1 files changed, 44 insertions, 1 deletions
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 03585a8b7..1a79bbbfe 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -1,18 +1,22 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ColorResult } from 'react-color';
+import ReactLoading from 'react-loading';
 import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction, unimplementedFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
+import { DocData } from '../../../fields/DocSymbols';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { Docs } from '../../documents/Documents';
 import { SettingsManager } from '../../util/SettingsManager';
+import { undoBatch } from '../../util/UndoManager';
 import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu';
 import { LinkPopup } from '../linking/LinkPopup';
 import { DocumentView } from '../nodes/DocumentView';
+import { DrawingOptions, SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import './AnchorMenu.scss';
 import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
 
@@ -38,6 +42,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // GPT additions
     @observable private _selectedText: string = '';
+    @observable private _isLoading: boolean = false;
     @action
     public setSelectedText = (txt: string) => {
         this._selectedText = txt.trim();
@@ -60,6 +65,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public get Active() {
         return this._left > 0;
     }
+    public AddDrawingAnnotation: (doc: Doc) => void = unimplementedFunction;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
     componentWillUnmount() {
@@ -136,6 +142,35 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         this.addToCollection?.(newCol);
     };
 
+    /**
+     * Creates a GPT drawing based on selected text.
+     */
+    gptDraw = async (e: React.PointerEvent) => {
+        try {
+            SmartDrawHandler.Instance.AddDrawing = this.createDrawingAnnotation;
+            runInAction(() => (this._isLoading = true));
+            await SmartDrawHandler.Instance.drawWithGPT({ X: e.clientX, Y: e.clientY }, this._selectedText, 5, 100, true);
+            runInAction(() => (this._isLoading = false));
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    /**
+     * Defines how a GPT drawing should be added to the current document.
+     */
+    @undoBatch
+    createDrawingAnnotation = action((drawing: Doc, opts: DrawingOptions, gptRes: string) => {
+        this.AddDrawingAnnotation(drawing);
+        const docData = drawing[DocData];
+        docData.title = opts.text.match(/^(.*?)~~~.*$/)?.[1] || opts.text;
+        docData.drawingInput = opts.text;
+        docData.drawingComplexity = opts.complexity;
+        docData.drawingColored = opts.autoColor;
+        docData.drawingSize = opts.size;
+        docData.drawingData = gptRes;
+    });
+
     pointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(
             this,
@@ -225,6 +260,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         icon={<FontAwesomeIcon icon="id-card" size="lg" />}
                         color={SettingsManager.userColor}
                     />
+                    {this._selectedText && (
+                        <IconButton
+                            tooltip="Create drawing"
+                            onPointerDown={e => this.gptDraw(e)}
+                            icon={this._isLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon="paintbrush" size="lg" />}
+                            color={SettingsManager.userColor}
+                        />
+                    )}
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
                         <IconButton
                             tooltip="Click to Record Annotation" //