aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ChatBox/MessageComponent.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ChatBox/MessageComponent.tsx')
-rw-r--r--src/client/views/nodes/ChatBox/MessageComponent.tsx105
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);