diff options
Diffstat (limited to 'src/client/views/nodes/ChatBox/MessageComponent.tsx')
-rw-r--r-- | src/client/views/nodes/ChatBox/MessageComponent.tsx | 105 |
1 files changed, 0 insertions, 105 deletions
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx deleted file mode 100644 index 812e52ee0..000000000 --- a/src/client/views/nodes/ChatBox/MessageComponent.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { useState } from 'react'; -import { observer } from 'mobx-react'; -import { AssistantMessage, Citation, MessageContent, PROCESSING_TYPE, ProcessingInfo, TEXT_TYPE } from './types'; -import ReactMarkdown from 'react-markdown'; - -interface MessageComponentProps { - message: AssistantMessage; - index: number; - onFollowUpClick: (question: string) => void; - onCitationClick: (citation: Citation) => void; - updateMessageCitations: (index: number, citations: Citation[]) => void; -} - -const MessageComponentBox: React.FC<MessageComponentProps> = function ({ message, index, onFollowUpClick, onCitationClick, updateMessageCitations }) { - const [dropdownOpen, setDropdownOpen] = useState(false); - - const renderContent = (item: MessageContent) => { - const i = item.index; - //console.log('item', item, 'index', i); - if (item.type === TEXT_TYPE.GROUNDED) { - const citation_ids = item.citation_ids || []; - return ( - <span key={i} className="grounded-text"> - <ReactMarkdown>{item.text}</ReactMarkdown> - {citation_ids.map((id, idx) => { - const citation = message.citations?.find(c => c.citation_id === id); - if (!citation) return null; - return ( - <button key={i + idx} className="citation-button" onClick={() => onCitationClick(citation)}> - {i + 1} - </button> - ); - })} - </span> - ); - } else if (item.type === TEXT_TYPE.NORMAL) { - return ( - <span key={i} className="normal-text"> - <ReactMarkdown>{item.text}</ReactMarkdown> - </span> - ); - } else if ('query' in item) { - return ( - <span key={i} className="query-text"> - <ReactMarkdown>{JSON.stringify(item.query)}</ReactMarkdown> - </span> - ); - } else { - return ( - <span key={i}> - <ReactMarkdown>{JSON.stringify(item)}</ReactMarkdown> - </span> - ); - } - }; - - const hasProcessingInfo = message.processing_info && message.processing_info.length > 0; - - const renderProcessingInfo = (info: ProcessingInfo) => { - if (info.type === PROCESSING_TYPE.THOUGHT) { - return ( - <div key={info.index} className="dropdown-item"> - <strong>Thought:</strong> {info.content} - </div> - ); - } else if (info.type === PROCESSING_TYPE.ACTION) { - return ( - <div key={info.index} className="dropdown-item"> - <strong>Action:</strong> {info.content} - </div> - ); - } else { - return null; - } - }; - - return ( - <div className={`message ${message.role}`}> - {hasProcessingInfo && ( - <div className="processing-info"> - <button className="toggle-info" onClick={() => setDropdownOpen(!dropdownOpen)}> - {dropdownOpen ? 'Hide Agent Thoughts/Actions' : 'Show Agent Thoughts/Actions'} - </button> - {dropdownOpen && <div className="info-content">{message.processing_info.map(renderProcessingInfo)}</div>} - <br /> - </div> - )} - <div className="message-content">{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div> - {message.follow_up_questions && message.follow_up_questions.length > 0 && ( - <div className="follow-up-questions"> - <h4>Follow-up Questions:</h4> - <div className="questions-list"> - {message.follow_up_questions.map((question, idx) => ( - <button key={idx} className="follow-up-button" onClick={() => onFollowUpClick(question)}> - {question} - </button> - ))} - </div> - </div> - )} - </div> - ); -}; - -export default observer(MessageComponentBox); |