refactoring gpt functionalities

1 files changed, 44 insertions, 113 deletions

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 07b2afd91..e6b9cb382 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -48,9 +48,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     @observable public Status: 'marquee' | 'annotation' | '' = '';
 
     // GPT additions
-    @observable private GPTpopupText: string = '';
-    @observable private loadingGPT: boolean = false;
-    @observable private showGPTPopup: boolean = false;
     @observable private GPTMode: GPTPopupMode = GPTPopupMode.SUMMARY;
     @observable private selectedText: string = '';
     @observable private editorView?: EditorView;
@@ -59,25 +56,11 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     private selectionRange: number[] | undefined;
 
     @action
-    setGPTPopupVis = (vis: boolean) => {
-        this.showGPTPopup = vis;
-    };
-    @action
     setGPTMode = (mode: GPTPopupMode) => {
         this.GPTMode = mode;
     };
 
     @action
-    setGPTPopupText = (txt: string) => {
-        this.GPTpopupText = txt;
-    };
-
-    @action
-    setLoading = (loading: boolean) => {
-        this.loadingGPT = loading;
-    };
-
-    @action
     setHighlightRange(r: number[] | undefined) {
         this.highlightRange = r;
     }
@@ -130,19 +113,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     componentDidMount() {
         this._disposer2 = reaction(
             () => this._opacity,
-            opacity => {
-                if (!opacity) {
-                    this.setGPTPopupVis(false);
-                    this.setGPTPopupText('');
-                }
-            },
+            opacity => {},
             { fireImmediately: true }
         );
         this._disposer = reaction(
             () => SelectionManager.Views().slice(),
             selected => {
-                this.setGPTPopupVis(false);
-                this.setGPTPopupText('');
                 AnchorMenu.Instance.fadeOut(true);
             }
         );
@@ -153,23 +129,22 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * @param e pointer down event
      */
     gptSummarize = async (e: React.PointerEvent) => {
+        GPTPopup.Instance.setVisible(true);
         this.setHighlightRange(undefined);
-        this.setGPTPopupVis(true);
         this.setGPTMode(GPTPopupMode.SUMMARY);
-        this.setLoading(true);
+        GPTPopup.Instance.setLoading(true);
 
         try {
             const res = await gptAPICall(this.selectedText, GPTCallType.SUMMARY);
             if (res) {
-                this.setGPTPopupText(res);
+                GPTPopup.Instance.setText(res);
             } else {
-                this.setGPTPopupText('Something went wrong.');
+                GPTPopup.Instance.setText('Something went wrong.');
             }
         } catch (err) {
             console.error(err);
         }
-
-        this.setLoading(false);
+        GPTPopup.Instance.setLoading(false);
     };
 
     /**
@@ -184,9 +159,9 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         const fullText = state.doc.textBetween(0, this.editorView.state.doc.content.size, ' \n');
         const selectedText = state.doc.textBetween(sel.from, sel.to);
 
-        this.setGPTPopupVis(true);
+        GPTPopup.Instance.setVisible(true);
         this.setGPTMode(GPTPopupMode.EDIT);
-        this.setLoading(true);
+        GPTPopup.Instance.setLoading(true);
 
         try {
             let res = await gptAPICall(selectedText, GPTCallType.EDIT);
@@ -196,16 +171,16 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             const resultText = fullText.slice(0, sel.from - 1) + res + fullText.slice(sel.to - 1);
 
             if (res) {
-                this.setGPTPopupText(resultText);
+                GPTPopup.Instance.setText(resultText);
                 this.setHighlightRange([sel.from - 1, sel.from - 1 + res.length]);
             } else {
-                this.setGPTPopupText('Something went wrong.');
+                GPTPopup.Instance.setText('Something went wrong.');
             }
         } catch (err) {
             console.error(err);
         }
 
-        this.setLoading(false);
+        GPTPopup.Instance.setLoading(false);
     };
 
     /**
@@ -253,21 +228,18 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     };
 
     @computed get highlighter() {
-        return <Group>
-            <IconButton 
-                icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
-                tooltip={'Click to Highlight'}
-                onClick={this.highlightClicked}
-                colorPicker={this.highlightColor}
-                color={StrCast(Doc.UserDoc().userColor)}
-            />
-            <ColorPicker
-                colorPickerType={'github'}
-                selectedColor={this.highlightColor}
-                setSelectedColor={color => this.changeHighlightColor(color)}
-                size={Size.XSMALL}
-            />
-        </Group>
+        return (
+            <Group>
+                <IconButton
+                    icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
+                    tooltip={'Click to Highlight'}
+                    onClick={this.highlightClicked}
+                    colorPicker={this.highlightColor}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                />
+                <ColorPicker colorPickerType={'github'} selectedColor={this.highlightColor} setSelectedColor={color => this.changeHighlightColor(color)} size={Size.XSMALL} />
+            </Group>
+        );
     }
 
     @action changeHighlightColor = (color: string) => {
@@ -312,12 +284,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.Status === 'marquee' ? (
                 <>
                     {this.highlighter}
-                    <IconButton 
-                        tooltip={'Drag to Place Annotation'} 
-                        onPointerDown={this.pointerDown} 
-                        icon={<FontAwesomeIcon icon="comment-alt"/>}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />
+                    <IconButton tooltip={'Drag to Place Annotation'} onPointerDown={this.pointerDown} icon={<FontAwesomeIcon icon="comment-alt" />} color={StrCast(Doc.UserDoc().userColor)} />
                     {/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection*/}
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
                         <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
@@ -326,7 +293,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             </button>
                         </Tooltip>
                     )}
-                    <GPTPopup
+                    {/* <GPTPopup
                         key="gptpopup"
                         visible={this.showGPTPopup}
                         text={this.GPTpopupText}
@@ -336,68 +303,32 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         callEditApi={this.gptEdit}
                         replaceText={this.replaceText}
                         mode={this.GPTMode}
-                    />
+                    /> */}
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click to Record Annotation'}
-                            onPointerDown={this.audioDown}
-                            icon={<FontAwesomeIcon icon="microphone" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
-                    )}
-                    {this.canEdit() && (
-                        <IconButton 
-                            tooltip={'AI edit suggestions'}
-                            onPointerDown={this.gptEdit}
-                            icon={<FontAwesomeIcon icon="pencil-alt" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click to Record Annotation'} onPointerDown={this.audioDown} icon={<FontAwesomeIcon icon="microphone" />} color={StrCast(Doc.UserDoc().userColor)} />
                     )}
-                    <Popup 
-                        tooltip='Find document to link to selected text'
-                        type={Type.PRIM}
-                        icon={<FontAwesomeIcon icon={'search'} />}
-                        popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />
+                    {this.canEdit() && <IconButton tooltip={'AI edit suggestions'} onPointerDown={this.gptEdit} icon={<FontAwesomeIcon icon="pencil-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    <Popup tooltip="Find document to link to selected text" type={Type.PRIM} icon={<FontAwesomeIcon icon={'search'} />} popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />} color={StrCast(Doc.UserDoc().userColor)} />
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click/Drag to create cropped image'}
-                            onPointerDown={this.cropDown}
-                            icon={<FontAwesomeIcon icon="image"/>}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click/Drag to create cropped image'} onPointerDown={this.cropDown} icon={<FontAwesomeIcon icon="image" />} color={StrCast(Doc.UserDoc().userColor)} />
                     )}
                 </>
             ) : (
                 <>
-                    {this.Delete !== returnFalse && <IconButton 
-                        tooltip={'Remove Link Anchor'}
-                        onPointerDown={this.Delete}
-                        icon={<FontAwesomeIcon icon="trash-alt" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.PinToPres !== returnFalse && <IconButton 
-                        tooltip={'Pin to Presentation'}
-                        onPointerDown={this.PinToPres}
-                        icon={<FontAwesomeIcon icon="map-pin" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.ShowTargetTrail !== returnFalse && <IconButton 
-                        tooltip={'Show Linked Trail'}
-                        onPointerDown={this.ShowTargetTrail}
-                        icon={<FontAwesomeIcon icon="taxi" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.IsTargetToggler !== returnFalse && <Toggle
-                        tooltip={'Make target visibility toggle on click'}
-                        type={Type.PRIM}
-                        toggleType={ToggleType.BUTTON}
-                        toggleStatus={this.IsTargetToggler()}
-                        onClick={this.MakeTargetToggle}
-                        icon={<FontAwesomeIcon icon="thumbtack" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
+                    {this.Delete !== returnFalse && <IconButton tooltip={'Remove Link Anchor'} onPointerDown={this.Delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.PinToPres !== returnFalse && <IconButton tooltip={'Pin to Presentation'} onPointerDown={this.PinToPres} icon={<FontAwesomeIcon icon="map-pin" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.ShowTargetTrail !== returnFalse && <IconButton tooltip={'Show Linked Trail'} onPointerDown={this.ShowTargetTrail} icon={<FontAwesomeIcon icon="taxi" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.IsTargetToggler !== returnFalse && (
+                        <Toggle
+                            tooltip={'Make target visibility toggle on click'}
+                            type={Type.PRIM}
+                            toggleType={ToggleType.BUTTON}
+                            toggleStatus={this.IsTargetToggler()}
+                            onClick={this.MakeTargetToggle}
+                            icon={<FontAwesomeIcon icon="thumbtack" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
                 </>
             );