diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.scss | 25 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 132 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 37 |
4 files changed, 192 insertions, 3 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fcdfbdf2a..46cd6db8f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -966,6 +966,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps }; breakupDictation = () => { + console.log('breakup'); if (this._editorView && this._recordingDictation) { this.stopDictation(true); this._break = true; diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 0b51813a5..370b155fd 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -15,6 +15,31 @@ //overflow: hidden; transition: 0.7s opacity ease; + .presBox-chatbox { + position: fixed; + bottom: 8px; + left: 8px; + width: calc(100% - 16px); + min-height: 100px; + border-radius: 16px; + padding: 16px; + gap: 8px; + z-index: 999; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #ffffff; + box-shadow: 0 2px 5px #7474748d; + + .pres-chatbox { + outline: none; + border: none; + font-size: 16px; + letter-spacing: 1px; + color: #404040; + } + } + .presBox-listCont { position: relative; height: calc(100% - 67px); diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 383b400c8..051a1fbfd 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -37,7 +37,12 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; -const { Howl } = require('howler'); +import { IconButton, Type } from 'browndash-components'; +import { AiOutlineSend } from 'react-icons/ai'; +import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; +import { DictationManager } from '../../../util/DictationManager'; +import { BiMicrophone, BiX } from 'react-icons/bi'; +import TextareaAutosize from 'react-textarea-autosize'; export interface pinDataTypes { scrollable?: boolean; @@ -105,7 +110,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @observable _treeViewMap: Map<Doc, number> = new Map(); @observable _presKeyEvents: boolean = false; @observable _forceKeyEvents: boolean = false; - @computed get isTreeOrStack() { + + // GPT + @observable chatActive: boolean = false; + @observable chatInput: string = ''; + public slideToModify: Doc | null = null; + @observable isRecording: boolean = false; + + @action + setChatInput = (input: string) => { + this.chatInput = input; + }; + + @action + public setChatActive = (active: boolean) => { + this.chatActive = active; + }; + + @action + public setIsRecording = (isRecording: boolean) => { + this.isRecording = isRecording; + }; + + @computed + get isTreeOrStack() { return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any); } @computed get isTree() { @@ -241,6 +269,46 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }; + // GPT + + recordDictation = () => { + DictationManager.Controls.listen({ + interimHandler: this.setDictationContent, + continuous: { indefinite: false }, + }).then(results => { + if (results && [DictationManager.Controls.Infringed].includes(results)) { + DictationManager.Controls.stop(); + } + }); + }; + stopDictation = (abort: boolean) => DictationManager.Controls.stop(!abort); + + setDictationContent = (value: string) => { + this.setChatInput(value); + }; + + @action + customizeWithGPT = async (input: string) => { + // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; + if (!this.slideToModify) return; + + try { + const res = await gptTrailSlideCustomization(input); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Result ', resObj); + // this.activeItem + for (let key in resObj) { + if (resObj[key]) { + this.slideToModify[key] = resObj[key]; + } + } + } + } catch (err) { + console.error(err); + } + }; + //TODO: al: it seems currently that tempMedia doesn't stop onslidechange after clicking the button; the time the tempmedia stop depends on the start & end time // TODO: to handle child slides (entering into subtrail and exiting), also the next() and back() functions // No more frames in current doc and next slide is defined, therefore move to next slide @@ -2661,7 +2729,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { /> ) : null} </div> - {/* { // if the document type is a presentation, then the collection stacking view has a "+ new slide" button at the bottom of the stack <Tooltip title={<div className="dash-tooltip">{'Click on document to pin to presentaiton or make a marquee selection to pin your desired view'}</div>}> @@ -2671,6 +2738,65 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </Tooltip> } */} </div> + {/* presbox chatbox */} + {this.chatActive && ( + <div className="presBox-chatbox"> + <div style={{ alignSelf: 'flex-end' }}> + <IconButton + type={Type.PRIM} + color={StrCast(Doc.UserDoc().userVariantColor)} + tooltip="Close" + icon={<BiX size={'16px'} />} + onClick={() => { + this.setChatActive(false); + }} + /> + </div> + <TextareaAutosize + minRows={3} + placeholder="Customize..." + className="pres-chatbox" + autoFocus={true} + value={this.chatInput} + onChange={e => { + this.setChatInput(e.target.value); + }} + onSelect={e => { + this.stopDictation(true); + }} + onKeyDown={e => e.stopPropagation()} + onKeyPress={e => e.stopPropagation()} + onPointerDown={e => e.stopPropagation()} + onClick={e => e.stopPropagation()} + onPointerUp={e => e.stopPropagation()} + /> + {/* <input className="chatbox" placeholder="Customize..." value={this.chatInput} onChange={e => this.setChatInput(e.target.value)} /> */} + <div style={{ alignSelf: 'flex-end', display: 'flex', gap: '8px' }}> + <IconButton + type={Type.TERT} + color={this.isRecording ? 'red' : StrCast(Doc.UserDoc().userVariantColor)} + tooltip="Record" + icon={<BiMicrophone size={'16px'} />} + onClick={() => { + if (!this.isRecording) { + this.recordDictation(); + } else { + this.stopDictation(true); + } + }} + /> + <IconButton + type={Type.TERT} + color={StrCast(Doc.UserDoc().userVariantColor)} + tooltip="Send" + icon={<AiOutlineSend size={'16px'} />} + onClick={() => { + this.customizeWithGPT(this.chatInput); + }} + /> + </div> + </div> + )} </div> ); } diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 82ed9e8d5..482d38f59 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -28,6 +28,8 @@ import React = require('react'); import { TreeView } from '../../collections/TreeView'; import { BranchingTrailManager } from '../../../util/BranchingTrailManager'; import { MultiToggle, Type } from 'browndash-components'; +import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; +import { DictationManager } from '../../../util/DictationManager'; /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. @@ -434,6 +436,27 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { return width; } + // GPT + + @action + customizeWithGPT = async (input: string) => { + const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; + + try { + const res = await gptTrailSlideCustomization(testInput); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Result ', resObj); + + for (let key in resObj) { + this.rootDoc[key] = resObj[key]; + } + } + } catch (err) { + console.error(err); + } + }; + @computed get presButtons() { const presBox = this.presBox; const presBoxColor = StrCast(presBox?._backgroundColor); @@ -537,6 +560,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> </Tooltip> ); + items.push( + <Tooltip key="customize" title={<div className="dash-tooltip">Customize</div>}> + <div + className={'slideButton'} + onClick={() => { + PresBox.Instance.setChatActive(true); + PresBox.Instance.slideToModify = this.rootDoc; + PresBox.Instance.recordDictation(); + // this.customizeWithGPT(''); + }}> + <FontAwesomeIcon icon={'message'} onPointerDown={e => e.stopPropagation()} /> + </div> + </Tooltip> + ); return items; } |