From 1023d79c64b7146df180cc07c474e688377a63fe Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Feb 2025 12:51:59 -0500 Subject: added dictation buttons to chatbox --- src/client/views/nodes/trails/PresBox.tsx | 53 ++++++++++--------------------- 1 file changed, 16 insertions(+), 37 deletions(-) (limited to 'src/client/views/nodes/trails') 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() { _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() { @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() { 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() { } }; - // 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() { 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() { this.setAnimationChat(e.target.value); }} onKeyDown={e => { - this.stopDictation(); + this._animationDictation?.stopDictation(); e.stopPropagation(); }} /> @@ -1799,6 +1779,12 @@ export class PresBox extends ViewBoxBaseComponent() { color={SnappingManager.userVariantColor} onClick={this.customizeAnimations} /> + { + this._animationDictation = r; + }} + setInput={this.setAnimationChat} + />
Click a box to use the effect. @@ -1878,22 +1864,15 @@ export class PresBox extends ViewBoxBaseComponent() { this.setChatInput(e.target.value); }} onKeyDown={e => { - this.stopDictation(); + this._slideDictation?.stopDictation(); e.stopPropagation(); }} /> - } - onClick={() => { - if (!this._isRecording) { - this.recordDictation(); - } else { - this.stopDictation(); - } + { + this._slideDictation = r; }} + setInput={this.setChatInput} />