1 files changed, 32 insertions, 104 deletions

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 1a79bbbfe..eaaeb8d97 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -1,24 +1,19 @@
+import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from '@dash/components';
 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, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } 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 { ComparisonBox } from '../nodes/ComparisonBox';
 import { DocumentView } from '../nodes/DocumentView';
-import { DrawingOptions, SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import './AnchorMenu.scss';
-import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
+import { GPTPopup } from './GPTPopup/GPTPopup';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -28,6 +23,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     private _disposer: IReactionDisposer | undefined;
     private _commentRef = React.createRef<HTMLDivElement>();
     private _cropRef = React.createRef<HTMLDivElement>();
+    @observable private _loading = false;
 
     constructor(props: AntimodeMenuProps) {
         super(props);
@@ -42,12 +38,22 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // GPT additions
     @observable private _selectedText: string = '';
+    @observable private _x: number = 0;
+    @observable private _y: number = 0;
     @observable private _isLoading: boolean = false;
     @action
     public setSelectedText = (txt: string) => {
         this._selectedText = txt.trim();
     };
+    @action
+    public setLocation = (x: number, y: number) => {
+        this._x = x;
+        this._y = y;
+    };
 
+    @computed public get selectedText() {
+        return this._selectedText;
+    }
     public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
 
     public OnCrop: (e: PointerEvent) => void = unimplementedFunction;
@@ -62,6 +68,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public MakeTargetToggle: () => void = unimplementedFunction;
     public ShowTargetTrail: () => void = unimplementedFunction;
     public IsTargetToggler: () => boolean = returnFalse;
+    public gptFlashcards: () => void = unimplementedFunction;
+    public makeLabels: () => void = unimplementedFunction;
+    public marqueeWidth = 0;
+    public marqueeHeight = 0;
     public get Active() {
         return this._left > 0;
     }
@@ -83,94 +93,24 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Invokes the API with the selected text and stores it in the summarized text.
      * @param e pointer down event
      */
-    gptSummarize = async () => {
-        GPTPopup.Instance.setVisible(true);
-        GPTPopup.Instance.setMode(GPTPopupMode.SUMMARY);
-        GPTPopup.Instance.setLoading(true);
-
-        try {
-            const res = await gptAPICall(this._selectedText, GPTCallType.SUMMARY);
-            GPTPopup.Instance.setText(res || 'Something went wrong.');
-        } catch (err) {
-            console.error(err);
-        }
-        GPTPopup.Instance.setLoading(false);
-    };
-    // gptSummarize = async () => {
-    //     GPTPopup.Instance?.setSelectedText(this._selectedText);
-    //     GPTPopup.Instance.generateSummary();
-    // };
-
-    /**
-     * Invokes the API with the selected text and stores it in the selected text.
-     * @param e pointer down event
-     */
-    gptFlashcards = async () => {
-        const queryText = this._selectedText;
-        try {
-            const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
-            console.log(res);
-            GPTPopup.Instance.setText(res || 'Something went wrong.');
-            this.transferToFlashcard(res || 'Something went wrong');
-        } catch (err) {
-            console.error(err);
-        }
-        GPTPopup.Instance.setLoading(false);
-    };
+    gptSummarize = () => GPTPopup.Instance.generateSummary(this._selectedText);
 
     /*
      * Transfers the flashcard text generated by GPT on flashcards and creates a collection out them.
      */
-    transferToFlashcard = (text: string) => {
-        // put each question generated by GPT on the front of the flashcard
-        const senArr = text.split('Question');
-        const collectionArr: Doc[] = [];
-        for (let i = 1; i < senArr.length; i++) {
-            console.log('Arr ' + i + ': ' + senArr[i]);
-            const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
-            newDoc.text = senArr[i];
-            collectionArr.push(newDoc);
-        }
-        // create a new carousel collection of these flashcards
-        const newCol = Docs.Create.CarouselDocument(collectionArr, {
-            _width: 250,
-            _height: 200,
-            _layout_fitWidth: false,
-            _layout_autoHeight: true,
-        });
 
-        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);
-        }
+    transferToFlashcard = (text: string, x: number, y: number) => {
+        ComparisonBox.createFlashcardDeck(text, 250, 200, 'data_front', 'data_back').then(
+            action(newCol => {
+                newCol.x = x;
+                newCol.y = y;
+                newCol.zIndex = 1000;
+                this.addToCollection?.(newCol);
+                this._loading = false;
+            })
+        );
     };
 
-    /**
-     * 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,
@@ -254,20 +194,8 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         />
                     )}
                     {/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */}
-                    <IconButton
-                        tooltip="Create flashcards" //
-                        onPointerDown={this.gptFlashcards}
-                        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}
-                        />
-                    )}
+                    {this.gptFlashcards === unimplementedFunction ? null : <IconButton tooltip="Create flashcards" onPointerDown={this.gptFlashcards} icon={<FontAwesomeIcon icon="layer-group" size="lg" />} color={SettingsManager.userColor} />}
+                    {this.makeLabels === unimplementedFunction ? null : <IconButton tooltip="Create labels" onPointerDown={this.makeLabels} icon={<FontAwesomeIcon icon="tag" size="lg" />} color={SettingsManager.userColor} />}
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
                         <IconButton
                             tooltip="Click to Record Annotation" //