fix: got styling to work again

2 files changed, 50 insertions, 32 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 818c754c3..8e415a407 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -53,6 +53,11 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
+import { PropertiesView } from '../../PropertiesView';
+import { ExtractColors } from '../../ExtractColors';
+import { StyleInputDocument } from '../../../apis/gpt/customization';
+import { RichTextField } from '../../../../fields/RichTextField';
+import { extname } from 'path';
 
 export interface collectionFreeformViewProps {
     NativeWidth?: () => number;
@@ -817,23 +822,26 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     eraserMax.X >= inkViewBounds.left &&
                     eraserMax.Y >= inkViewBounds.top
             )
-            .reduce((intersections, { inkStroke, inkView }) => {
-                const { inkData } = inkStroke.inkScaledData();
-                // Convert from screen space to ink space for the intersection.
-                const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
-                const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
-                for (var i = 0; i < inkData.length - 3; i += 4) {
-                    const rawIntersects = InkField.Segment(inkData, i).intersects({
-                        // compute all unique intersections
-                        p1: { x: prevPointInkSpace.X, y: prevPointInkSpace.Y },
-                        p2: { x: currPointInkSpace.X, y: currPointInkSpace.Y },
-                    });
-                    const intersects = Array.from(new Set(rawIntersects as (number | string)[])); // convert to more manageable union array type
-                    // return tuples of the inkingStroke intersected, and the t value of the intersection
-                    intersections.push(...intersects.map(t => ({ inkView, t: +t + Math.floor(i / 4) }))); // convert string t's to numbers and add start of curve segment to convert from local t value to t value along complete curve
-                }
-                return intersections;
-            }, [] as { t: number; inkView: DocumentView }[]);
+            .reduce(
+                (intersections, { inkStroke, inkView }) => {
+                    const { inkData } = inkStroke.inkScaledData();
+                    // Convert from screen space to ink space for the intersection.
+                    const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
+                    const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
+                    for (var i = 0; i < inkData.length - 3; i += 4) {
+                        const rawIntersects = InkField.Segment(inkData, i).intersects({
+                            // compute all unique intersections
+                            p1: { x: prevPointInkSpace.X, y: prevPointInkSpace.Y },
+                            p2: { x: currPointInkSpace.X, y: currPointInkSpace.Y },
+                        });
+                        const intersects = Array.from(new Set(rawIntersects as (number | string)[])); // convert to more manageable union array type
+                        // return tuples of the inkingStroke intersected, and the t value of the intersection
+                        intersections.push(...intersects.map(t => ({ inkView, t: +t + Math.floor(i / 4) }))); // convert string t's to numbers and add start of curve segment to convert from local t value to t value along complete curve
+                    }
+                    return intersections;
+                },
+                [] as { t: number; inkView: DocumentView }[]
+            );
     };
 
     /**
@@ -1637,7 +1645,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     openProperties = () => {
-        SettingsManager.propertiesWidth = 300;
+        SettingsManager.Instance.propertiesWidth = 300;
     };
 
     choosePath(url: URL) {
@@ -1661,7 +1669,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         PropertiesView.Instance.selectedStyle = -1;
         PropertiesView.Instance.useImageData = false;
 
-        console.log('Title', this.rootDoc.title);
+        console.log('Title', this.Document.title);
         console.log('bgcolor', this.layoutDoc._backgroundColor);
         // doc.backgroundColor
         const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
@@ -1685,7 +1693,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             textSize: 16,
         }));
 
-        const collectionDescription = StrCast(this.rootDoc.title);
+        const collectionDescription = StrCast(this.Document.title);
 
         const styleInput = {
             collectionDescription,
@@ -1732,6 +1740,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' });
         this._props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' });
         this._props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' });
+        this._props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' });
         if (!Doc.noviceMode) {
             optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' });
         }
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index b2059b185..b8b60d2a9 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -37,6 +37,12 @@ import { ScriptingBox } from '../ScriptingBox';
 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 { BiMicrophone, BiX } from 'react-icons/bi';
+import { AiOutlineSend } from 'react-icons/ai';
+import { gptTrailSlideCustomization } from '../../../apis/gpt/customization';
+import { DictationManager } from '../../../util/DictationManager';
 export interface pinDataTypes {
     scrollable?: boolean;
     dataviz?: number[];
@@ -300,22 +306,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @action
     customizeWithGPT = async (input: string) => {
+        console.log(this.slideToModify);
         // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
-        if (!this.slideToModify) return;
+        // if (!this.slideToModify) return;
         this.setIsRecording(false);
         this.setIsLoading(true);
         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];
-                    }
-                }
-            }
+            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];
+            //         }
+            //     }
+            // }
         } catch (err) {
             console.error(err);
         }
@@ -828,6 +836,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
      */
     navigateToActiveItem = (afterNav?: () => void) => {
         const activeItem: Doc = this.activeItem;
+        console.log('active item', activeItem);
         // GPT update
         this.slideToModify = activeItem;
         const targetDoc: Doc = this.targetDoc;
@@ -2749,7 +2758,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 />
                             )}
                         </div>
-                        <TextareaAutosize
+                        <ReactTextareaAutosize
                             ref={r => (this._inputref = r)}
                             minRows={3}
                             placeholder="Customize..."