refactoring gpt functionalities

2 files changed, 78 insertions, 36 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 44413ede7..2f0ff83e2 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -6,12 +6,6 @@ $button: #5b97ff;
 $highlightedText: #82e0ff;
 
 .summary-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: #ffffff;
-    box-shadow: 0 2px 5px #7474748d;
-    color: $textgrey;
     position: fixed;
     bottom: 10px;
     right: 10px;
@@ -21,6 +15,12 @@ $highlightedText: #82e0ff;
     padding: 15px;
     padding-bottom: 0;
     z-index: 999;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px #7474748d;
+    color: $textgrey;
 
     .summary-heading {
         display: flex;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 8bd060d4f..9f28cb5d1 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -5,56 +5,96 @@ import { observer } from 'mobx-react';
 import ReactLoading from 'react-loading';
 import Typist from 'react-typist';
 import { Doc } from '../../../../fields/Doc';
-import { Docs } from '../../../documents/Documents';
+import { DocUtils, Docs } from '../../../documents/Documents';
 import './GPTPopup.scss';
+import { Button, IconButton } from 'browndash-components';
+import { StrCast } from '../../../../fields/Types';
 
 export enum GPTPopupMode {
     SUMMARY,
     EDIT,
 }
 
-interface GPTPopupProps {
-    visible: boolean;
-    text: string;
-    loading: boolean;
-    mode: GPTPopupMode;
-    callSummaryApi: (e: React.PointerEvent) => Promise<void>;
-    callEditApi: (e: React.PointerEvent) => Promise<void>;
-    replaceText: (replacement: string) => void;
-    highlightRange?: number[];
-}
+interface GPTPopupProps {}
 
 @observer
 export class GPTPopup extends React.Component<GPTPopupProps> {
     static Instance: GPTPopup;
 
     @observable
-    private done: boolean = false;
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
+    };
     @observable
-    private sidebarId: string = '';
+    public loading: boolean = false;
+    @action
+    public setLoading = (loading: boolean) => {
+        this.loading = loading;
+    };
+    @observable
+    public text: string = '';
+    @action
+    public setText = (text: string) => {
+        this.text = text;
+    };
+    @observable
+    public mode: GPTPopupMode = GPTPopupMode.SUMMARY;
+    @action
+    public setMode = (mode: GPTPopupMode) => {
+        this.mode = mode;
+    };
 
+    @observable
+    public highlightRange: number[] = [];
+    @action callSummaryApi = () => {};
+    @action callEditApi = () => {};
+    @action replaceText = (replacement: string) => {};
+
+    @observable
+    private done: boolean = false;
     @action
     public setDone = (done: boolean) => {
         this.done = done;
     };
+    @observable
+    private sidebarId: string = '';
     @action
     public setSidebarId = (id: string) => {
         this.sidebarId = id;
     };
 
+    // reference
+    // if (focusNode) {
+    //     const anchor = srcWeb?.ComponentView?.getAnchor?.(true);
+    //     anchor && DocUtils.MakeLink(htmlDoc, anchor, {});
+    // }
+    @observable
+    private pdfAnchor: Doc | undefined;
+    @action
+    public setPdfAnchor = (anchor: Doc) => {
+        this.pdfAnchor = anchor;
+    };
+
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
 
     /**
      * Transfers the summarization text to a sidebar annotation text document.
      */
     private transferToText = () => {
-        const newDoc = Docs.Create.TextDocument(this.props.text.trim(), {
+        const newDoc = Docs.Create.TextDocument(this.text.trim(), {
             _width: 200,
             _height: 50,
             _layout_fitWidth: true,
             _layout_autoHeight: true,
         });
         this.addDoc(newDoc, this.sidebarId);
+        if (this.pdfAnchor) {
+            DocUtils.MakeLink(newDoc, this.pdfAnchor, {
+                link_relationship: 'GPT Summary',
+            });
+        }
     };
 
     constructor(props: GPTPopupProps) {
@@ -63,7 +103,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
     }
 
     componentDidUpdate = () => {
-        if (this.props.loading) {
+        if (this.loading) {
             this.setDone(false);
         }
     };
@@ -73,10 +113,10 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
             <div>
                 {this.heading('SUMMARY')}
                 <div className="content-wrapper">
-                    {!this.props.loading &&
+                    {!this.loading &&
                         (!this.done ? (
                             <Typist
-                                key={this.props.text}
+                                key={this.text}
                                 avgTypingDelay={15}
                                 cursor={{ hideWhenDone: true }}
                                 onTypingDone={() => {
@@ -84,18 +124,18 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
                                         this.setDone(true);
                                     }, 500);
                                 }}>
-                                {this.props.text}
+                                {this.text}
                             </Typist>
                         ) : (
-                            this.props.text
+                            this.text
                         ))}
                 </div>
             </div>
-            {!this.props.loading && (
+            {!this.loading && (
                 <div className="btns-wrapper">
                     {this.done ? (
                         <>
-                            <button className="icon-btn" onPointerDown={e => this.props.callSummaryApi(e)}>
+                            {/* <button className="icon-btn" onClick={this.callSummaryApi}>
                                 <FontAwesomeIcon icon="redo-alt" size="lg" />
                             </button>
                             <button
@@ -104,7 +144,9 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
                                     this.transferToText();
                                 }}>
                                 Transfer to Text
-                            </button>
+                            </button> */}
+                            <IconButton onClick={this.callSummaryApi} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} />
+                            <Button text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} />
                         </>
                     ) : (
                         <div className="summarizing">
@@ -125,7 +167,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
     );
 
     editBox = () => {
-        const hr = this.props.highlightRange;
+        const hr = this.highlightRange;
         return (
             <>
                 <div>
@@ -133,22 +175,22 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
                     <div className="content-wrapper">
                         {hr && (
                             <div>
-                                {this.props.text.slice(0, hr[0])} <span className="highlighted-text">{this.props.text.slice(hr[0], hr[1])}</span> {this.props.text.slice(hr[1])}
+                                {this.text.slice(0, hr[0])} <span className="highlighted-text">{this.text.slice(hr[0], hr[1])}</span> {this.text.slice(hr[1])}
                             </div>
                         )}
                     </div>
                 </div>
-                {hr && !this.props.loading && (
+                {hr && !this.loading && (
                     <>
                         <div className="btns-wrapper">
                             <>
-                                <button className="icon-btn" onPointerDown={e => this.props.callEditApi(e)}>
+                                <button className="icon-btn" onPointerDown={this.callEditApi}>
                                     <FontAwesomeIcon icon="redo-alt" size="lg" />
                                 </button>
                                 <button
                                     className="text-btn"
                                     onClick={e => {
-                                        this.props.replaceText(this.props.text);
+                                        this.replaceText(this.text);
                                     }}>
                                     Replace Text
                                 </button>
@@ -174,14 +216,14 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
     heading = (headingText: string) => (
         <div className="summary-heading">
             <label className="summary-text">{headingText}</label>
-            {this.props.loading && <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />}
+            {this.loading && <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />}
         </div>
     );
 
     render() {
         return (
-            <div className="summary-box" style={{ display: this.props.visible ? 'flex' : 'none' }}>
-                {this.props.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.editBox()}
+            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
+                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.editBox()}
             </div>
         );
     }