diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/ChatBox/ChatBox.tsx | 241 |
1 files changed, 201 insertions, 40 deletions
diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx index 32ccbc35e..7c961d0c4 100644 --- a/src/client/views/nodes/ChatBox/ChatBox.tsx +++ b/src/client/views/nodes/ChatBox/ChatBox.tsx @@ -11,7 +11,7 @@ import { ViewBoxAnnotatableComponent } from '../../DocComponent'; import { FieldView, FieldViewProps } from '../FieldView'; import './ChatBox.scss'; import MessageComponentBox from './MessageComponent'; -import { ASSISTANT_ROLE, AssistantMessage, AI_Document, Citation, CHUNK_TYPE, RAGChunk, getChunkType, TEXT_TYPE, SimplifiedChunk, ProcessingInfo, MessageContent } from './types'; +import { ASSISTANT_ROLE, AssistantMessage, Citation, CHUNK_TYPE, RAGChunk, getChunkType, TEXT_TYPE, SimplifiedChunk, ProcessingInfo, MessageContent } from './types'; import { Vectorstore } from './vectorstore/Vectorstore'; import { Agent } from './Agent'; import dotenv from 'dotenv'; @@ -29,33 +29,51 @@ import { Networking } from '../../../Network'; dotenv.config(); +/** + * ChatBox is the main class responsible for managing the interaction between the user and the assistant, + * handling documents, and integrating with OpenAI for tasks such as document analysis, chat functionality, + * and vector store interactions. + */ @observer export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { + // MobX observable properties to track UI state and data @observable history: AssistantMessage[] = []; @observable.deep current_message: AssistantMessage | undefined = undefined; - @observable isLoading: boolean = false; - @observable uploadProgress: number = 0; // Track progress percentage - @observable currentStep: string = ''; // Track current step name + @observable uploadProgress: number = 0; + @observable currentStep: string = ''; @observable expandedScratchpadIndex: number | null = null; @observable inputValue: string = ''; @observable private linked_docs_to_add: ObservableSet = observable.set(); @observable private linked_csv_files: { filename: string; id: string; text: string }[] = []; @observable private isUploadingDocs: boolean = false; + + // Private properties for managing OpenAI API, vector store, agent, and UI elements private openai: OpenAI; private vectorstore_id: string; private vectorstore: Vectorstore; - private agent: Agent; // Add the ChatBot instance + private agent: Agent; private _oldWheel: HTMLDivElement | null = null; private messagesRef: React.RefObject; + /** + * Static method that returns the layout string for the field. + * @param fieldKey Key to get the layout string. + */ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ChatBox, fieldKey); } + /** + * Constructor initializes the component, sets up OpenAI, vector store, and agent instances, + * and observes changes in the chat history to save the state in dataDoc. + * @param props The properties passed to the component. + */ constructor(props: FieldViewProps) { super(props); - makeObservable(this); + makeObservable(this); // Enable MobX observables + + // Initialize OpenAI, vectorstore, and agent this.openai = this.initializeOpenAI(); if (StrCast(this.dataDoc.vectorstore_id) == '') { console.log('new_id'); @@ -68,14 +86,26 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.agent = new Agent(this.vectorstore, this.retrieveSummaries, this.retrieveFormattedHistory, this.retrieveCSVData, this.addLinkedUrlDoc, this.createCSVInDash); this.messagesRef = React.createRef<HTMLDivElement>(); + // Reaction to update dataDoc when chat history changes reaction( - () => this.history.map((msg: AssistantMessage) => ({ role: msg.role, content: msg.content, follow_up_questions: msg.follow_up_questions, citations: msg.citations })), + () => + this.history.map((msg: AssistantMessage) => ({ + role: msg.role, + content: msg.content, + follow_up_questions: msg.follow_up_questions, + citations: msg.citations, + })), serializableHistory => { this.dataDoc.data = JSON.stringify(serializableHistory); } ); } + /** + * Adds a document to the vectorstore for AI-based analysis. + * Handles the upload progress and errors during the process. + * @param newLinkedDoc The new document to add. + */ @action addDocToVectorstore = async (newLinkedDoc: Doc) => { this.uploadProgress = 0; @@ -83,6 +113,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.isUploadingDocs = true; try { + // Add the document to the vectorstore await this.vectorstore.addAIDoc(newLinkedDoc, this.updateProgress); } catch (error) { console.error('Error uploading document:', error); @@ -94,6 +125,11 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } }; + /** + * Updates the upload progress and the current step in the UI. + * @param progress The percentage of the progress. + * @param step The current step name. + */ @action updateProgress = (progress: number, step: string) => { console.log('Progress:', progress, step); @@ -101,12 +137,20 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.currentStep = step; }; + /** + * Adds a CSV file for analysis by sending it to OpenAI and generating a summary. + * @param newLinkedDoc The linked document representing the CSV file. + * @param id Optional ID for the document. + */ @action addCSVForAnalysis = async (newLinkedDoc: Doc, id?: string) => { console.log('adding csv file for analysis'); if (!newLinkedDoc.chunk_simpl) { + // Convert document text to CSV data const csvData: string = StrCast(newLinkedDoc.text); console.log('CSV Data:', csvData); + + // Generate a summary using OpenAI API const completion = await this.openai.chat.completions.create({ messages: [ { @@ -117,27 +161,25 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { { role: 'user', content: `Please provide a comprehensive summary of the CSV file based on the provided data. Ensure the summary highlights the most important information, patterns, and insights. Your response should be in paragraph form and be concise. - CSV Data: - ${csvData} - ********** Summary:`, }, ], model: 'gpt-3.5-turbo', }); - console.log('CSV Data:', csvData); + const csvId = id ?? uuidv4(); + // Add CSV details to linked files this.linked_csv_files.push({ filename: CsvCast(newLinkedDoc.data).url.pathname, id: csvId, text: csvData, }); - console.log(this.linked_csv_files); + // Add a chunk for the CSV and assign the summary const chunkToAdd = { chunkId: csvId, chunkType: CHUNK_TYPE.CSV, @@ -147,11 +189,19 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } }; + /** + * Toggles the tool logs, expanding or collapsing the scratchpad at the given index. + * @param index Index of the tool log to toggle. + */ @action toggleToolLogs = (index: number) => { this.expandedScratchpadIndex = this.expandedScratchpadIndex === index ? null : index; }; + /** + * Initializes the OpenAI API client using the API key from environment variables. + * @returns OpenAI client instance. + */ initializeOpenAI() { console.log(process.env.OPENAI_KEY); const configuration: ClientOptions = { @@ -161,49 +211,81 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return new OpenAI(configuration); } + /** + * Adds a scroll event listener to detect user scrolling and handle passive wheel events. + */ addScrollListener = () => { if (this.messagesRef.current) { this.messagesRef.current.addEventListener('wheel', this.onPassiveWheel, { passive: false }); } }; + /** + * Removes the scroll event listener from the chat messages container. + */ removeScrollListener = () => { if (this.messagesRef.current) { this.messagesRef.current.removeEventListener('wheel', this.onPassiveWheel); } }; + /** + * Scrolls the chat messages container to the bottom, ensuring the latest message is visible. + */ scrollToBottom = () => { if (this.messagesRef.current) { this.messagesRef.current.scrollTop = this.messagesRef.current.scrollHeight; } }; + /** + * Event handler for detecting wheel scrolling and stopping the event propagation. + * @param e The wheel event. + */ onPassiveWheel = (e: WheelEvent) => { if (this._props.isContentActive()) { e.stopPropagation(); } }; + /** + * Sends the user's input to OpenAI, displays the loading indicator, and updates the chat history. + * @param event The form submission event. + */ @action askGPT = async (event: React.FormEvent): Promise => { event.preventDefault(); this.inputValue = ''; + // Extract the user's message const textInput = event.currentTarget.elements.namedItem('messageInput') as HTMLInputElement; const trimmedText = textInput.value.trim(); if (trimmedText) { try { textInput.value = ''; - this.history.push({ role: ASSISTANT_ROLE.USER, content: [{ index: 0, type: TEXT_TYPE.NORMAL, text: trimmedText, citation_ids: null }], processing_info: [] }); + // Add the user's message to the history + this.history.push({ + role: ASSISTANT_ROLE.USER, + content: [{ index: 0, type: TEXT_TYPE.NORMAL, text: trimmedText, citation_ids: null }], + processing_info: [], + }); this.isLoading = true; - this.current_message = { role: ASSISTANT_ROLE.ASSISTANT, content: [], citations: [], processing_info: [] }; + this.current_message = { + role: ASSISTANT_ROLE.ASSISTANT, + content: [], + citations: [], + processing_info: [], + }; + // Define callbacks for real-time processing updates const onProcessingUpdate = (processingUpdate: ProcessingInfo[]) => { runInAction(() => { if (this.current_message) { - this.current_message = { ...this.current_message, processing_info: processingUpdate }; + this.current_message = { + ...this.current_message, + processing_info: processingUpdate, + }; } }); this.scrollToBottom(); @@ -212,13 +294,18 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const onAnswerUpdate = (answerUpdate: string) => { runInAction(() => { if (this.current_message) { - this.current_message = { ...this.current_message, content: [{ text: answerUpdate, type: TEXT_TYPE.NORMAL, index: 0, citation_ids: [] }] }; + this.current_message = { + ...this.current_message, + content: [{ text: answerUpdate, type: TEXT_TYPE.NORMAL, index: 0, citation_ids: [] }], + }; } }); }; + // Send the user's question to the assistant and get the final message const finalMessage = await this.agent.askAgent(trimmedText, onProcessingUpdate, onAnswerUpdate); + // Update the history with the final assistant message runInAction(() => { if (this.current_message) { this.history.push({ ...finalMessage }); @@ -228,7 +315,12 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }); } catch (err) { console.error('Error:', err); - this.history.push({ role: ASSISTANT_ROLE.ASSISTANT, content: [{ index: 0, type: TEXT_TYPE.ERROR, text: 'Sorry, I encountered an error while processing your request.', citation_ids: null }], processing_info: [] }); + // Handle error in processing + this.history.push({ + role: ASSISTANT_ROLE.ASSISTANT, + content: [{ index: 0, type: TEXT_TYPE.ERROR, text: 'Sorry, I encountered an error while processing your request.', citation_ids: null }], + processing_info: [], + }); } finally { this.isLoading = false; this.scrollToBottom(); @@ -237,6 +329,11 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.scrollToBottom(); }; + /** + * Updates the citations for a given message in the chat history. + * @param index The index of the message in the history. + * @param citations The list of citations to add to the message. + */ @action updateMessageCitations = (index: number, citations: Citation[]) => { if (this.history[index]) { @@ -244,17 +341,16 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } }; + /** + * Adds a linked document from a URL for future reference and analysis. + * @param url The URL of the document to add. + * @param id The unique identifier for the document. + */ @action addLinkedUrlDoc = async (url: string, id: string) => { const doc = Docs.Create.WebDocument(url, { data_useCors: true }); - - // const scriptsKey = Doc.LayoutFieldKey(doc) + '_allowScripts'; - // doc[DocData][scriptsKey] = true; - console.log('Adding URL:', url); - //console.log('Layout Field Key:', doc[DocData][scriptsKey]); - const linkDoc = Docs.Create.LinkDocument(this.Document, doc); LinkManager.Instance.addLink(linkDoc); let canDisplay; @@ -263,7 +359,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // Fetch the URL content through the proxy const { data } = await Networking.PostToServer('/proxyFetch', { url }); - // Simulating header behavior as you can't fetch headers via the proxy + // Simulating header behavior since we can't fetch headers via proxy const xFrameOptions = data.headers?.['x-frame-options']; if (xFrameOptions && xFrameOptions.toUpperCase() === 'SAMEORIGIN') { @@ -271,7 +367,6 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { canDisplay = false; } else { console.log('URL can be displayed in an iframe:', url); - console.log(StrCast(linkDoc.canDisplay)); canDisplay = true; } } catch (error) { @@ -288,11 +383,21 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { doc.chunk_simpl = JSON.stringify({ chunks: [chunkToAdd] }); }; + /** + * Getter to retrieve the current user's name from the client utils. + */ @computed get userName() { return ClientUtils.CurrentUserEmail; } + /** + * Creates a CSV document in the dashboard and adds it for analysis. + * @param url The URL of the CSV. + * @param title The title of the CSV document. + * @param id The unique ID for the document. + * @param data The CSV data content. + */ @action createCSVInDash = async (url: string, title: string, id: string, data: string) => { console.log('Creating CSV in Dash:', url, title); @@ -307,6 +412,10 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.addCSVForAnalysis(doc, id); }; + /** + * Event handler to manage citations click in the message components. + * @param citation The citation object clicked by the user. + */ @action handleCitationClick = (citation: Citation) => { console.log('Citation clicked:', citation); @@ -314,14 +423,13 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const chunkId = citation.chunk_id; + // Loop through the linked documents to find the matching chunk and handle its display for (let doc of currentLinkedDocs) { if (doc.chunk_simpl) { const docChunkSimpl = JSON.parse(StrCast(doc.chunk_simpl)) as { chunks: SimplifiedChunk[] }; - console.log(docChunkSimpl); const foundChunk = docChunkSimpl.chunks.find(chunk => chunk.chunkId === chunkId); - console.log(foundChunk); if (foundChunk) { - console.log(getChunkType(foundChunk.chunkType)); + // Handle different types of chunks (image, text, table, etc.) switch (foundChunk.chunkType) { case CHUNK_TYPE.IMAGE: case CHUNK_TYPE.TABLE: @@ -351,22 +459,14 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }); break; case CHUNK_TYPE.URL: - console.log('Opening URL:', foundChunk.url); - console.log('Can display:', foundChunk.canDisplay); if (!foundChunk.canDisplay) { - console.log('Opening URL in new tab:', doc.displayUrl); window.open(StrCast(doc.displayUrl), '_blank'); } else if (foundChunk.canDisplay) { - console.log('Opening URL in Dash:', doc.displayUrl); - DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => { - const firstView = Array.from(doc[DocViews])[0] as DocumentView; - }); + DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {}); } break; case CHUNK_TYPE.CSV: - DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => { - const firstView = Array.from(doc[DocViews])[0] as DocumentView; - }); + DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {}); break; default: console.log('Chunk type not supported', foundChunk.chunkType); @@ -377,6 +477,17 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } }; + /** + * Creates an annotation highlight on a PDF document for image citations. + * @param x1 X-coordinate of the top-left corner of the highlight. + * @param y1 Y-coordinate of the top-left corner of the highlight. + * @param x2 X-coordinate of the bottom-right corner of the highlight. + * @param y2 Y-coordinate of the bottom-right corner of the highlight. + * @param citation The citation object to associate with the highlight. + * @param annotationKey The key used to store the annotation. + * @param pdfDoc The document where the highlight is created. + * @returns The highlighted document. + */ createImageCitationHighlight = (x1: number, y1: number, x2: number, y2: number, citation: Citation, annotationKey: string, pdfDoc: Doc): Doc => { const highlight_doc = Docs.Create.FreeformDocument([], { x: x1, @@ -392,10 +503,18 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return highlight_doc; }; + /** + * Lifecycle method that triggers when the component updates. + * Ensures the chat is scrolled to the bottom when new messages are added. + */ componentDidUpdate() { this.scrollToBottom(); } + /** + * Lifecycle method that triggers when the component mounts. + * Initializes scroll listeners, sets up document reactions, and loads chat history from dataDoc if available. + */ componentDidMount() { this._props.setContentViewBox?.(this); if (this.dataDoc.data) { @@ -415,14 +534,24 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { console.error('Failed to parse history from dataDoc:', e); } } else { + // Default welcome message runInAction(() => { this.history.push({ role: ASSISTANT_ROLE.ASSISTANT, - content: [{ index: 0, type: TEXT_TYPE.NORMAL, text: `Hey, ${this.userName()} Welcome to the Your Friendly Assistant! Link a document or ask questions about anything to get started.`, citation_ids: null }], + content: [ + { + index: 0, + type: TEXT_TYPE.NORMAL, + text: `Hey, ${this.userName()}! Welcome to Your Friendly Assistant. Link a document or ask questions to get started.`, + citation_ids: null, + }, + ], processing_info: [], }); }); } + + // Set up reactions for linked documents reaction( () => { const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document) @@ -431,10 +560,10 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .filter(d => d); return linkedDocs; }, - linked => linked.forEach(doc => this.linked_docs_to_add.add(doc)) ); + // Observe changes to linked documents and handle document addition observe(this.linked_docs_to_add, change => { if (change.type === 'add') { if (PDFCast(change.newValue.data)) { @@ -449,10 +578,17 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.addScrollListener(); } + /** + * Lifecycle method that triggers when the component unmounts. + * Removes scroll listeners to avoid memory leaks. + */ componentWillUnmount() { this.removeScrollListener(); } + /** + * Getter that retrieves all linked documents for the current document. + */ @computed get linkedDocs() { return LinkManager.Instance.getAllRelatedLinks(this.Document) @@ -461,6 +597,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .filter(d => d); } + /** + * Getter that retrieves document IDs of linked documents that have AI-related content. + */ @computed get docIds() { return LinkManager.Instance.getAllRelatedLinks(this.Document) @@ -471,6 +610,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { .map(d => StrCast(d.ai_doc_id)); } + /** + * Getter that retrieves summaries of all linked documents. + */ @computed get summaries(): string { return ( @@ -492,11 +634,17 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ); } + /** + * Getter that retrieves all linked CSV files for analysis. + */ @computed get linkedCSVs(): { filename: string; id: string; text: string }[] { return this.linked_csv_files; } + /** + * Getter that formats the entire chat history as a string for the agent's system message. + */ @computed get formattedHistory(): string { let history = '<chat_history>\n'; @@ -511,6 +659,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return history; } + // Other helper methods for retrieving document data and processing + retrieveSummaries = () => { return this.summaries; }; @@ -527,12 +677,20 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return this.docIds; }; + /** + * Handles follow-up questions when the user clicks on them. + * Automatically sets the input value to the clicked follow-up question. + * @param question The follow-up question clicked by the user. + */ @action handleFollowUpClick = (question: string) => { console.log('Follow-up question clicked:', question); this.inputValue = question; }; + /** + * Renders the chat interface, including the message list, input field, and other UI elements. + */ render() { return ( <div className="chat-box"> @@ -580,6 +738,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } } +/** + * Register the ChatBox component as the template for CHAT document types. + */ Docs.Prototypes.TemplateMap.set(DocumentType.CHAT, { layout: { view: ChatBox, dataField: 'data' }, options: { acl: '', chat: '', chat_history: '', chat_thread_id: '', chat_assistant_id: '', chat_vector_store_id: '' }, |