added dictation buttons to chatbox

1 files changed, 28 insertions, 3 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 810e1793b..4453fe140 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -22,17 +22,18 @@ import { CollectionViewType, DocumentType } from '../../../../documents/Document
 import { Docs, DocumentOptions } from '../../../../documents/Documents';
 import { DocumentManager } from '../../../../util/DocumentManager';
 import { LinkManager } from '../../../../util/LinkManager';
+import { DictationButton } from '../../../DictationButton';
 import { ViewBoxAnnotatableComponent } from '../../../DocComponent';
 import { DocumentView } from '../../DocumentView';
 import { FieldView, FieldViewProps } from '../../FieldView';
 import { PDFBox } from '../../PDFBox';
 import { Agent } from '../agentsystem/Agent';
+import { supportedDocumentTypes } from '../tools/CreateDocumentTool';
 import { ASSISTANT_ROLE, AssistantMessage, CHUNK_TYPE, Citation, ProcessingInfo, SimplifiedChunk, TEXT_TYPE } from '../types/types';
 import { Vectorstore } from '../vectorstore/Vectorstore';
 import './ChatBox.scss';
 import MessageComponentBox from './MessageComponent';
 import { ProgressBar } from './ProgressBar';
-import { supportedDocumentTypes } from '../tools/CreateDocumentTool';
 
 dotenv.config();
 
@@ -64,6 +65,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private vectorstore: Vectorstore;
     private agent: Agent;
     private messagesRef: React.RefObject<HTMLDivElement>;
+    private _textInputRef: HTMLInputElement | undefined | null;
 
     /**
      * Static method that returns the layout string for the field.
@@ -73,6 +75,10 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return FieldView.LayoutString(ChatBox, fieldKey);
     }
 
+    setChatInput = action((input: string) => {
+        this._inputValue = input;
+    });
+
     /**
      * 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.
@@ -820,6 +826,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._inputValue = question;
     };
 
+    _dictation: DictationButton | null = null;
     /**
      * Renders the chat interface, including the message list, input field, and other UI elements.
      */
@@ -847,8 +854,19 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 </div>
 
                 <form onSubmit={this.askGPT} className="chat-input">
-                    <input type="text" name="messageInput" autoComplete="off" placeholder="Type your message here..." value={this._inputValue} onChange={action(e => (this._inputValue = e.target.value))} disabled={this._isLoading} />
-                    <button className="submit-button" type="submit" disabled={this._isLoading || !this._inputValue.trim()}>
+                    <input
+                        ref={r => {
+                            this._textInputRef = r;
+                        }}
+                        type="text"
+                        name="messageInput"
+                        autoComplete="off"
+                        placeholder="Type your message here..."
+                        value={this._inputValue}
+                        onChange={action(e => (this._inputValue = e.target.value))}
+                        disabled={this._isLoading}
+                    />
+                    <button className="submit-button" onClick={() => this._dictation?.stopDictation()} type="submit" disabled={this._isLoading || !this._inputValue.trim()}>
                         {this._isLoading ? (
                             <div className="spinner"></div>
                         ) : (
@@ -858,6 +876,13 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </svg>
                         )}
                     </button>
+                    <DictationButton
+                        ref={r => {
+                            this._dictation = r;
+                        }}
+                        setInput={this.setChatInput}
+                        inputRef={this._textInputRef}
+                    />
                 </form>
                 {/* Popup for citation */}
                 {this._citationPopup.visible && (