1 files changed, 31 insertions, 20 deletions
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index e362c0c89..75ef55060 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Slider, Switch } from '@mui/material';
 import { Button, IconButton } from 'browndash-components';
-import { action, makeObservable, observable } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
@@ -50,6 +50,7 @@ export interface DrawingOptions {
 
 @observer
 export class SmartDrawHandler extends ObservableReactComponent<object> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: SmartDrawHandler;
 
     private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
@@ -148,15 +149,17 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      */
     @action
     hideSmartDrawHandler = () => {
-        this.ShowRegenerate = false;
-        this._display = false;
-        this._isLoading = false;
-        this._showOptions = false;
-        this._userInput = '';
-        this._complexity = 5;
-        this._size = 350;
-        this._autoColor = true;
-        Doc.ActiveTool = InkTool.None;
+        if (this._display) {
+            this.ShowRegenerate = false;
+            this._display = false;
+            this._isLoading = false;
+            this._showOptions = false;
+            this._userInput = '';
+            this._complexity = 5;
+            this._size = 350;
+            this._autoColor = true;
+            Doc.ActiveTool = InkTool.None;
+        }
     };
 
     /**
@@ -192,14 +195,21 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         this._canInteract = false;
         if (this.ShowRegenerate) {
             await this.regenerate();
-            this._regenInput = '';
-            this._showEditBox = false;
+            runInAction(() => {
+                this._regenInput = '';
+                this._showEditBox = false;
+            });
         } else {
-            this._showOptions = false;
+            runInAction(() => {
+                this._showOptions = false;
+            });
             try {
                 await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput, this._complexity, this._size, this._autoColor);
                 this.hideSmartDrawHandler();
-                this.ShowRegenerate = true;
+
+                runInAction(() => {
+                    this.ShowRegenerate = true;
+                });
             } catch (err) {
                 if (this._errorOccurredOnce) {
                     console.error('GPT call failed', err);
@@ -210,8 +220,10 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 }
             }
         }
-        this._isLoading = false;
-        this._canInteract = true;
+        runInAction(() => {
+            this._isLoading = false;
+            this._canInteract = true;
+        });
     };
 
     /**
@@ -226,9 +238,8 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             console.error('GPT call failed');
             return;
         }
-        console.log(res);
         const strokeData = await this.parseSvg(res, startPt, false, autoColor);
-        const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData?.data, strokeData?.lastInput, strokeData?.lastRes);
+        const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
         drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
 
         this._errorOccurredOnce = false;
@@ -259,7 +270,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             }
             const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
             this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, this._selectedDoc);
-            const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData?.data, strokeData?.lastInput, strokeData?.lastRes);
+            const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
             drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
             return strokeData;
         } catch (err) {
@@ -385,7 +396,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                                 defaultChecked={true}
                                 value={this._autoColor}
                                 size="small"
-                                onChange={action(e => this._canInteract && (this._autoColor = !this._autoColor))}
+                                onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))}
                             />
                         </div>
                         <div className="complexity">