From 3e1ef3d0b5445065ab3f44ffc17bbb04efaa8c8a Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Tue, 23 Jul 2024 12:07:53 -0400
Subject: merging w/ zach's branch

---
 src/client/views/smartdraw/SmartDrawHandler.tsx | 97 +++++++++++++------------
 1 file changed, 52 insertions(+), 45 deletions(-)

(limited to 'src/client/views/smartdraw/SmartDrawHandler.tsx')

diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 24046bb83..489f6f92b 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -17,6 +17,7 @@ import { DocData } from '../../../fields/DocSymbols';
 import { DocumentView } from '../nodes/DocumentView';
 import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
 import './SmartDrawHandler.scss';
+import { unimplementedFunction } from '../../../Utils';
 
 export interface DrawingOptions {
     text: string;
@@ -39,15 +40,15 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
     @observable private _userInput: string = '';
     @observable private _showOptions: boolean = false;
     @observable private _showEditBox: boolean = false;
-    @observable private _showRegenerate: boolean = false;
+    @observable public _showRegenerate: boolean = false;
     @observable private _complexity: number = 5;
     @observable private _size: number = 200;
     @observable private _autoColor: boolean = true;
     @observable private _regenInput: string = '';
     @observable private _canInteract: boolean = true;
-    private _addFunc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void = () => {};
-    private _deleteFunc: (doc?: Doc) => void = () => {};
-    private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 300, autoColor: true, x: 0, y: 0 };
+    public _addFunc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void = () => {};
+    public _deleteFunc: (doc?: Doc) => void = () => {};
+    private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
     private _lastResponse: string = '';
     private _selectedDoc: Doc | undefined = undefined;
 
@@ -119,51 +120,62 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
         this._showOptions = false;
         this._userInput = '';
         this._complexity = 5;
-        this._size = 300;
+        this._size = 350;
         this._autoColor = true;
         Doc.ActiveTool = InkTool.None;
+        this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
     };
 
     @action
     hideRegenerate = () => {
-        this._showRegenerate = false;
-        this._isLoading = false;
-        this._regenInput = '';
+        if (!this._isLoading) {
+            this._showRegenerate = false;
+            this._isLoading = false;
+            this._regenInput = '';
+            this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
+        }
     };
 
     @action
     handleKeyPress = async (event: React.KeyboardEvent) => {
         if (event.key === 'Enter') {
-            if (this._showRegenerate) {
-                this.regenerate();
-            } else {
-                await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput);
-                this._userInput = '';
-            }
+            await this.handleSendClick();
         }
     };
 
-    _errorOccurredOnce = false;
     @action
-    drawWithGPT = async (startPt: { X: number; Y: number }, input: string) => {
-        if (input === '') return;
-        this._lastInput = { text: input, complexity: this._complexity, size: this._size, autoColor: this._autoColor, x: startPt.X, y: startPt.Y };
+    handleSendClick = async () => {
         this._isLoading = true;
         this._canInteract = false;
-        this._showOptions = false;
+        if (this._showRegenerate) {
+            await this.regenerate();
+            this._regenInput = '';
+            this._showEditBox = false;
+        } else {
+            this._showOptions = false;
+            await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput, this._complexity, this._size, this._autoColor);
+            this.hideSmartDrawHandler();
+            this._showRegenerate = true;
+        }
+        this._isLoading = false;
+        this._canInteract = true;
+    };
+
+    _errorOccurredOnce = false;
+    @action
+    drawWithGPT = async (startPt: { X: number; Y: number }, input: string, complexity: number, size: number, autoColor: boolean) => {
+        if (input === '') return;
+        this._lastInput = { text: input, complexity: complexity, size: size, autoColor: autoColor, x: startPt.X, y: startPt.Y };
+
         try {
-            const res = await gptAPICall(`"${input}", "${this._complexity}", "${this._size}"`, GPTCallType.DRAW, undefined, true);
+            const res = await gptAPICall(`"${input}", "${complexity}", "${size}"`, GPTCallType.DRAW, undefined, true);
             if (!res) {
                 console.error('GPT call failed');
                 return;
             }
             console.log(res);
-            const strokeData = await this.parseResponse(res, startPt, false);
-            this.hideSmartDrawHandler();
-            this._showRegenerate = true;
+            const strokeData = await this.parseResponse(res, startPt, false, autoColor);
             this._errorOccurredOnce = false;
-            this._isLoading = false;
-            this._canInteract = true;
             return strokeData;
         } catch (err) {
             if (this._errorOccurredOnce) {
@@ -171,7 +183,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                 this._errorOccurredOnce = false;
             } else {
                 this._errorOccurredOnce = true;
-                this.drawWithGPT(startPt, input);
+                this.drawWithGPT(startPt, input, complexity, size, autoColor);
             }
         }
     };
@@ -182,9 +194,11 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
     };
 
     @action
-    regenerate = async () => {
-        this._isLoading = true;
-        this._canInteract = false;
+    regenerate = async (lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string) => {
+        if (lastInput) this._lastInput = lastInput;
+        if (lastResponse) this._lastResponse = lastResponse;
+        if (regenInput) this._regenInput = regenInput;
+
         try {
             let res;
             if (this._regenInput !== '') {
@@ -199,21 +213,15 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                 return;
             }
             console.log(res);
-            this.parseResponse(res, { X: this._lastInput.x, Y: this._lastInput.y }, true);
+            this.parseResponse(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
         } catch (err) {
             console.error('GPT call failed', err);
         }
-        this._isLoading = false;
-        this._canInteract = true;
-        this._regenInput = '';
-        this._showEditBox = false;
     };
 
     @action
-    parseResponse = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean) => {
+    parseResponse = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean, autoColor: boolean) => {
         const svg = res.match(/<svg[^>]*>([\s\S]*?)<\/svg>/g);
-        console.log(svg);
-        console.log('start point is', startPoint);
         if (svg) {
             this._lastResponse = svg[0];
             const svgObject = await parse(svg[0]);
@@ -225,12 +233,12 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                     convertedBezier.map(point => {
                         return { X: point.X + startPoint.X - this._size / 1.5, Y: point.Y + startPoint.Y - this._size / 2 };
                     }),
-                    (regenerate ? this._lastInput.autoColor : this._autoColor) ? child.attributes.stroke : undefined,
-                    (regenerate ? this._lastInput.autoColor : this._autoColor) ? child.attributes.fill : undefined,
+                    (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.stroke : undefined,
+                    (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.fill : undefined,
                 ]);
             });
             if (regenerate) {
-                this._deleteFunc(this._selectedDoc);
+                if (this._deleteFunc !== unimplementedFunction) this._deleteFunc(this._selectedDoc);
                 this._addFunc(strokeData, this._lastInput, svg[0], this._selectedDoc);
             } else {
                 this._addFunc(strokeData, this._lastInput, svg[0]);
@@ -283,9 +291,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                             icon={this._isLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
                             color={SettingsManager.userColor}
-                            onClick={e => {
-                                this.drawWithGPT({ X: e.clientX, Y: e.clientY }, this._userInput);
-                            }}
+                            onClick={this.handleSendClick}
                         />
                     </div>
                     {this._showOptions && (
@@ -303,6 +309,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                                             },
                                         }}
                                         defaultChecked={true}
+                                        value={this._autoColor}
                                         size="small"
                                         onChange={this.setAutoColor}
                                     />
@@ -390,7 +397,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                             tooltip="Regenerate"
                             icon={this._isLoading && this._regenInput === '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
                             color={SettingsManager.userColor}
-                            onClick={this.regenerate}
+                            onClick={this.handleSendClick}
                         />
                         <IconButton tooltip="Edit with GPT" icon={<FontAwesomeIcon icon="pen-to-square" />} color={SettingsManager.userColor} onClick={this.edit} />
                         {this._showEditBox && (
@@ -418,7 +425,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
                                     icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                                     iconPlacement="right"
                                     color={SettingsManager.userColor}
-                                    onClick={this.regenerate}
+                                    onClick={this.handleSendClick}
                                 />
                             </div>
                         )}
-- 
cgit v1.2.3-70-g09d2

