added dictation buttons to chatbox

1 files changed, 16 insertions, 37 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3ce4dc6cb..b98a7f96e 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -7,7 +7,6 @@ import { IReactionDisposer, ObservableSet, action, computed, makeObservable, obs
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
-import { BiMicrophone } from 'react-icons/bi';
 import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa';
 import ReactLoading from 'react-loading';
 import ReactTextareaAutosize from 'react-textarea-autosize';
@@ -26,12 +25,12 @@ import { DocServer } from '../../../DocServer';
 import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/PresCustomization';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
-import { DictationManager } from '../../../util/DictationManager';
 import { dropActionType } from '../../../util/DropActionTypes';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SerializationHelper } from '../../../util/SerializationHelper';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoBatch, undoable } from '../../../util/UndoManager';
+import { DictationButton } from '../../DictationButton';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { pinDataTypes as dataTypes } from '../../PinFuncs';
 import { CollectionView } from '../../collections/CollectionView';
@@ -79,6 +78,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed.  Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
     _unmounting = false; // flag that view is unmounting used to block RemFromMap from deleting things
     _presTimer: NodeJS.Timeout | undefined;
+    _animationDictation: DictationButton | null = null;
+    _slideDictation: DictationButton | null = null;
 
     // eslint-disable-next-line no-use-before-define
     @observable public static Instance: PresBox;
@@ -108,7 +109,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _chatActive: boolean = false;
     @observable _animationChat: string = '';
     @observable _chatInput: string = '';
-    @observable _isRecording: boolean = false;
     @observable _isLoading: boolean = false;
 
     @observable generatedAnimations: AnimationSettings[] = [
@@ -147,7 +147,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     setChatInput =              action((input: string) => { this._chatInput = input; }); // prettier-ignore
     setAnimationChat =          action((input: string) => { this._animationChat = input; }); // prettier-ignore
     setIsLoading =              action((input?: boolean) => { this._isLoading = !!input; }); // prettier-ignore
-    setIsRecording =            action((input: boolean) => { this._isRecording = input; }); // prettier-ignore
     setShowAIGalleryVisibilty = action((visible: boolean) => { this._showAIGallery = visible; }); // prettier-ignore
     setBezierControlPoints = action((newPoints: { p1: number[]; p2: number[] }) => {
         this.setEaseFunc(this.activeItem, `cubic-bezier(${newPoints.p1[0]}, ${newPoints.p1[1]}, ${newPoints.p2[0]}, ${newPoints.p2[1]})`);
@@ -280,24 +279,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
-    // Recording for GPT customization
-    recordDictation = () => {
-        this.setIsRecording(true);
-        this.setChatInput('');
-        DictationManager.Controls.listen({
-            interimHandler: this.setDictationContent,
-            continuous: { indefinite: false },
-        }).then(results => {
-            if (results && [DictationManager.Controls.Infringed].includes(results)) {
-                DictationManager.Controls.stop();
-            }
-        });
-    };
-    stopDictation = () => {
-        this.setIsRecording(false);
-        DictationManager.Controls.stop();
-    };
-
     setDictationContent = (value: string) => this.setChatInput(value);
 
     customizeAnimations = action(() => {
@@ -310,7 +291,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     customizeWithGPT = action((input: string) => {
         // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
-        this.setIsRecording(false);
         this.setIsLoading(true);
         const slideDefaults: { [key: string]: FieldResult } = { presentation_transition: 500, config_zoom: 1 };
         const currSlideProperties = gptSlideProperties.reduce(
@@ -1785,7 +1765,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 this.setAnimationChat(e.target.value);
                             }}
                             onKeyDown={e => {
-                                this.stopDictation();
+                                this._animationDictation?.stopDictation();
                                 e.stopPropagation();
                             }}
                         />
@@ -1799,6 +1779,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         color={SnappingManager.userVariantColor}
                         onClick={this.customizeAnimations}
                     />
+                    <DictationButton
+                        ref={r => {
+                            this._animationDictation = r;
+                        }}
+                        setInput={this.setAnimationChat}
+                    />
                 </div>
                 <div style={{ alignItems: 'center' }}>
                     Click a box to use the effect.
@@ -1878,22 +1864,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         this.setChatInput(e.target.value);
                                     }}
                                     onKeyDown={e => {
-                                        this.stopDictation();
+                                        this._slideDictation?.stopDictation();
                                         e.stopPropagation();
                                     }}
                                 />
-                                <IconButton
-                                    type={Type.TERT}
-                                    color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
-                                    tooltip="Record"
-                                    icon={<BiMicrophone size="16px" />}
-                                    onClick={() => {
-                                        if (!this._isRecording) {
-                                            this.recordDictation();
-                                        } else {
-                                            this.stopDictation();
-                                        }
+                                <DictationButton
+                                    ref={r => {
+                                        this._slideDictation = r;
                                     }}
+                                    setInput={this.setChatInput}
                                 />
                             </div>
                             <Button
@@ -1904,7 +1883,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 iconPlacement="right"
                                 color={SnappingManager.userVariantColor}
                                 onClick={() => {
-                                    this.stopDictation();
+                                    this._slideDictation?.stopDictation();
                                     this.customizeWithGPT(this._chatInput);
                                 }}
                             />