added curr slide info to slide customization

4 files changed, 56 insertions, 26 deletions

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index db5ef6eb5..946208eeb 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -35,7 +35,7 @@ interface PromptInfo {
 const prompts: { [key: string]: PromptInfo } = {
     trails: {
         description:
-            'We are adding customization to a slide in a presentation. Given a natural language input, translate it into a json with the required fields: [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection].',
+            'We are customizing the properties and transition of a slide in a presentation. You are given the current properties of the slide in a json with the fields [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection], as well as the prompt for how the user wants to change it. Return a json with the required fields: [title, presentation_transition, presentation_effect, config_zoom, presentation_effectDirection] by applying the changes in the prompt to the current state of the slide.',
         features: [],
     },
 };
@@ -44,19 +44,24 @@ export const addCustomizationProperty = (type: CustomizationType, name: string,
     values ? prompts[type].features.push({ name, description, values }) : prompts[type].features.push({ name, description });
 };
 
+export const gptSlideProperties = ['title', 'presentation_transition', 'presentation_effect', 'presentation_effectDirection', 'config_zoom'];
+
 const setupPresSlideCustomization = () => {
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'title', 'is the title/name of the slide.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_transition', 'is a number in milliseconds for how long it should take to transition/move to a slide.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Fade in', 'Flip', 'Rotate', 'Bounce', 'Roll']);
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effectDirection', 'is what direction the effect is applied.', ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']);
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'config_zoom', 'is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.');
 };
 
 setupPresSlideCustomization();
 
-export const gptTrailSlideCustomization = async (inputText: string) => {
+export const gptTrailSlideCustomization = async (inputText: string, properties: any) => {
+    console.log('properties', properties);
     let prompt = prompts.trails.description;
 
     prompts.trails.features.forEach(feature => {
-        prompt += feature.name + feature.description;
+        prompt += feature.name + ' ' + feature.description;
         if (feature.values) {
             prompt += `Its only possible values are [${feature.values.join(', ')}].`;
         }
@@ -65,16 +70,21 @@ export const gptTrailSlideCustomization = async (inputText: string) => {
     // prompt +=
     //     'title is the title/name of the slide. presentation_transition is a number in milliseconds for how long it should take to transition/move to a slide. presentation_effect is an effect applied to the slide when we transition to it. Its only possible values are: [None, Fade in, Flip, Rotate, Bounce, Roll]. presentation_effectDirection is what direction the effect is applied. Its only possible values are:  [Enter from left, Enter from right, Enter from bottom, Enter from Top, Enter from center]. config_zoom is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.';
 
-    prompt += 'If the input does not contain info a specific key, please set their value to null. Please only return the json with these keys and their values.';
+    prompt += 'Set unchanged values to null. Please only return the json with these keys and their values.';
+
+    console.log('messages', [
+        { role: 'system', content: prompt },
+        { role: 'user', content: `Prompt: ${inputText}, Current properties: ${JSON.stringify(properties)}` },
+    ]);
 
     try {
         const response = await openai.chat.completions.create({
-            model: 'gpt-3.5-turbo',
+            model: 'gpt-4',
             messages: [
                 { role: 'system', content: prompt },
-                { role: 'user', content: inputText },
+                { role: 'user', content: `Prompt: ${inputText}, Current properties: ${JSON.stringify(properties)}` },
             ],
-            temperature: 0.1,
+            temperature: 0,
             max_tokens: 1000,
         });
         return response.choices[0].message?.content;
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 1537ad0b8..5fc356299 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -34,6 +34,7 @@
         .pres-chatbox {
             outline: none;
             border: none;
+            resize: none;
         }
     }
 
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 1b1b65e46..ba80facce 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -38,10 +38,10 @@ import './PresBox.scss';
 import ReactLoading from 'react-loading';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
 import ReactTextareaAutosize from 'react-textarea-autosize';
-import { IconButton, Type } from 'browndash-components';
+import { Dropdown, IconButton, Type } from 'browndash-components';
 import { BiMicrophone, BiX } from 'react-icons/bi';
 import { AiOutlineSend } from 'react-icons/ai';
-import { gptTrailSlideCustomization } from '../../../apis/gpt/customization';
+import { gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
 import { DictationManager } from '../../../util/DictationManager';
 export interface pinDataTypes {
     scrollable?: boolean;
@@ -263,7 +263,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
-    // GPT
+    // Recording for GPT customization
 
     recordDictation = () => {
         this.setIsRecording(true);
@@ -283,6 +283,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     setDictationContent = (value: string) => {
+        console.log('Dictation value', value);
         this.setChatInput(value);
         // // Get the current cursor position
         // if (!this._inputref) return;
@@ -306,24 +307,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @action
     customizeWithGPT = async (input: string) => {
-        console.log(this.slideToModify);
+        console.log('Slide to modify', this.slideToModify);
         // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
         // if (!this.slideToModify) return;
         this.setIsRecording(false);
         this.setIsLoading(true);
+
+        let currSlideProperties: { [key: string]: any } = {};
+        for (const key of gptSlideProperties) {
+            currSlideProperties[key] = this.activeItem[key];
+        }
+        console.log('current slide props', currSlideProperties);
+
         try {
-            const res = await gptTrailSlideCustomization(input);
-            console.log('slide result', res);
-            // 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];
-            //         }
-            //     }
-            // }
+            const res = await gptTrailSlideCustomization(input, currSlideProperties);
+            console.log('GPT Result:', res);
+            if (typeof res === 'string') {
+                const resObj = JSON.parse(res);
+                console.log('Parsed GPT Result ', resObj);
+                // this.activeItem
+                for (let key in resObj) {
+                    if (resObj[key]) {
+                        this.activeItem[key] = resObj[key];
+                    }
+                }
+            }
         } catch (err) {
             console.error(err);
         }
@@ -1833,6 +1841,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     })}>
                     <div className="ribbon-box">
                         Movement
+                        {/* <Dropdown
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        formLabel={'Type'}
+                        closeOnSelect={true}
+                        items={bugDropdownItems}
+                        selectedVal={this.formData.type}
+                        setSelectedVal={val => {
+                            if (typeof val === 'string') this.setFormData({ ...this.formData, type: val as BugType });
+                        }}
+                        dropdownType={DropdownType.SELECT}
+                        type={Type.TERT}
+                        fillWidth
+                    /> */}
                         <div
                             className="presBox-dropdown"
                             onClick={action(e => {
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index ed2f25fb6..4abfc5a94 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -409,8 +409,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return presBoxDocView ? presBoxDocView._props.PanelWidth() : width ? width : 300;
     }
 
-    // GPT
-
     @computed get presButtons() {
         const presBox = this.presBox;
         const presBoxColor = StrCast(presBox?._backgroundColor);
@@ -520,7 +518,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     className={'slideButton'}
                     onClick={() => {
                         PresBox.Instance.setChatActive(true);
-                        PresBox.Instance.slideToModify = this.rootDoc;
+                        PresBox.Instance.slideToModify = this.Document;
                         PresBox.Instance.recordDictation();
                     }}>
                     <FontAwesomeIcon icon={'message'} onPointerDown={e => e.stopPropagation()} />