1 files changed, 60 insertions, 3 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 383b400c8..ebf9c211c 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -37,7 +37,9 @@ 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';
 
 export interface pinDataTypes {
     scrollable?: boolean;
@@ -105,7 +107,24 @@ 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;
+
+    @action
+    setChatInput = (input: string) => {
+        this.chatInput = input;
+    };
+
+    @action
+    public setChatActive = (active: boolean) => {
+        this.chatActive = active;
+    };
+
+    @computed
+    get isTreeOrStack() {
         return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any);
     }
     @computed get isTree() {
@@ -241,6 +260,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
+    @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 +2702,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 +2711,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         </Tooltip>
                     } */}
                 </div>
+                {/* presbox chatbox */}
+                {this.chatActive && (
+                    <div className="presBox-chatbox">
+                        <input placeholder="Customize..." value={this.chatInput} onChange={e => this.setChatInput(e.target.value)} />
+                        <div style={{ alignSelf: 'flex-end' }}>
+                            <IconButton
+                                type={Type.TERT}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                tooltip="Send"
+                                icon={<AiOutlineSend size={'16px'} />}
+                                onClick={() => {
+                                    this.customizeWithGPT(this.chatInput);
+                                }}
+                            />
+                        </div>
+                    </div>
+                )}
             </div>
         );
     }