3 files changed, 32 insertions, 16 deletions

diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss
index f4998efa1..2e8621b5b 100644
--- a/src/client/views/OverlayView.scss
+++ b/src/client/views/OverlayView.scss
@@ -17,6 +17,7 @@
     top: 0;
     left: 0;
     pointer-events: all;
+    box-shadow: black 5px 5px 5px;
 }
 
 .overlayWindow-outerDiv,
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 0b832f64c..c8903e09f 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -80,8 +80,7 @@ $headingHeight: 32px;
         .searchBox-input {
             height: 40px;
             border-radius: 10px;
-            position: absolute;
-            bottom: 10px;
+            position: relative;
             border-color: #5b97ff;
             width: 90%;
         }
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index cb3e9b2d7..b7eaf2674 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -22,6 +22,8 @@ import { ChatSortField, docSortings } from '../../collections/CollectionSubView'
 import { DocumentView } from '../../nodes/DocumentView';
 import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
+import { DictationButton } from '../../DictationButton';
+import { AiOutlineSend } from 'react-icons/ai';
 
 export enum GPTPopupMode {
     SUMMARY, // summary of seleted document text
@@ -37,6 +39,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
     // eslint-disable-next-line no-use-before-define
     static Instance: GPTPopup;
     static ChatTag = '#chat'; // tag used by GPT popup to filter docs
+    private _askDictation: DictationButton | null = null;
     private _messagesEndRef: React.RefObject<HTMLDivElement>;
     private _correlatedColumns: string[] = [];
     private _dataChatPrompt: string | undefined = undefined;
@@ -101,9 +104,9 @@ export class GPTPopup extends ObservableReactComponent<object> {
     @observable private _collectionContext: Doc | undefined = undefined;
     @action setCollectionContext = (doc: Doc | undefined) => (this._collectionContext = doc);
     @observable private _userPrompt: string = '';
-    @action setUserPrompt = (e: React.ChangeEvent<HTMLInputElement>) => (this._userPrompt = e.target.value);
+    @action setUserPrompt = (e: string) => (this._userPrompt = e);
     @observable private _quizAnswer: string = '';
-    @action setQuizAnswer = (e: React.ChangeEvent<HTMLInputElement>) => (this._quizAnswer = e.target.value);
+    @action setQuizAnswer = (e: string) => (this._quizAnswer = e);
     @observable private _stopAnimatingResponse: boolean = false;
     @action private setStopAnimatingResponse = (done: boolean) => (this._stopAnimatingResponse = done);
 
@@ -371,22 +374,26 @@ export class GPTPopup extends ObservableReactComponent<object> {
         </div>
     );
 
+    callGpt = (isUserPrompt: boolean) => {
+        this.setGptProcessing(true);
+        if (isUserPrompt) {
+            this._conversationArray.push(this._userPrompt);
+            return this.generateUserPromptResponse(this._userPrompt).then(action(() => (this._userPrompt = '')));
+        }
+        this._conversationArray.push(this._quizAnswer);
+        return this.generateQuizAnswerAnalysis(DocumentView.SelectedDocs().lastElement(), this._quizAnswer).then(action(() => (this._quizAnswer = '')));
+    };
+
     @action
     handleKeyPress = async (e: React.KeyboardEvent, isUserPrompt: boolean) => {
+        this._askDictation?.stopDictation();
         if (e.key === 'Enter') {
             e.stopPropagation();
 
-            this.setGptProcessing(true);
-            if (isUserPrompt) {
-                this._conversationArray.push(this._userPrompt);
-                await this.generateUserPromptResponse(this._userPrompt).then(action(() => (this._userPrompt = '')));
-            } else {
-                this._conversationArray.push(this._quizAnswer);
-                await this.generateQuizAnswerAnalysis(DocumentView.SelectedDocs().lastElement(), this._quizAnswer).then(action(() => (this._quizAnswer = '')));
-            }
-            this.setGptProcessing(false);
-
-            this.scrollToBottom();
+            this.callGpt(isUserPrompt).then(() => {
+                this.setGptProcessing(false);
+                this.scrollToBottom();
+            });
         }
     };
 
@@ -418,11 +425,20 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     className="searchBox-input"
                     value={isUserPrompt ? this._userPrompt : this._quizAnswer} // Controlled input
                     autoComplete="off"
-                    onChange={isUserPrompt ? this.setUserPrompt : this.setQuizAnswer}
+                    onChange={e => (isUserPrompt ? this.setUserPrompt : this.setQuizAnswer)(e.target.value)}
                     onKeyDown={e => this.handleKeyPress(e, isUserPrompt)}
                     type="text"
                     placeholder={`${isUserPrompt ? 'Have ChatGPT sort, tag, define, or filter your documents for you!' : 'Describe/answer the selected document!'}`}
                 />
+                <Button //
+                    text="Send"
+                    type={Type.TERT}
+                    icon={<AiOutlineSend />}
+                    iconPlacement="right"
+                    color={SnappingManager.userVariantColor}
+                    onClick={() => this.callGpt(isUserPrompt)}
+                />
+                <DictationButton ref={r => (this._askDictation = r)} setInput={isUserPrompt ? this.setUserPrompt : this.setQuizAnswer} />
             </div>
         </>
     );