yay git add -A

2 files changed, 169 insertions, 2 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 5d966395c..4425cf158 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -60,6 +60,17 @@ $highlightedText: #82e0ff;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        transform: translateY(30px);
+
+
+        .searchBox-input{
+            transform: translateY(-15px);
+            height: 50px;
+            border-radius: 10px;
+            border-color: #5b97ff;
+        }
+
+        
 
         .summarizing {
             display: flex;
@@ -111,6 +122,28 @@ $highlightedText: #82e0ff;
     }
 }
 
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #666;
+}
+
+
+
+
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+
 .image-content-wrapper {
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 29b1ca365..faf66af85 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -21,6 +21,7 @@ export enum GPTPopupMode {
     EDIT,
     IMAGE,
     DATA,
+    SORT
 }
 
 interface GPTPopupProps {}
@@ -94,10 +95,21 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     private done: boolean = false;
     @action
     public setDone = (done: boolean) => {
+        console.log("HIIIIIIIII")
         this.done = done;
         this.chatMode = false;
     };
 
+    @observable
+    private sortDone: boolean = false // this is so redundant but the og done variable was causing weird unknown problems and im just a girl
+
+    @action
+    public setSortDone = (done: boolean) => {
+        console.log("HIIIIIIIII")
+        this.sortDone = done;
+    };
+
+
     // change what can be a ref into a ref
     @observable
     private sidebarId: string = '';
@@ -120,9 +132,61 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.textAnchor = anchor;
     };
 
+    @observable
+    public sortPrompt: string = ''; 
+    @action
+    public setSortPrompt = ((e: React.ChangeEvent<HTMLInputElement>) => {
+        this.sortPrompt = e.target.value;
+    });
+
+    @observable
+    public sortText: string = ''
+    @action
+    public setSortText = (t: string) => {
+        this.sortText = t
+    }
+
+    @observable
+    public sortDesc: string = ''
+
+    @action public setSortDesc = (t:string) => {
+        this.sortDesc = t
+    }
+
+    @observable onSortComplete?: (sortResult: string) => void;
+
+
+
+
+
+
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
+
+    generateSort = async () => {
+        this.setLoading(true);
+        this.setSortDone(false);
+
+        try {
+            const res = await gptAPICall(this.sortPrompt + this.sortDesc, GPTCallType.SORT);
+            this.setSortText(res || 'Something went wrong :(');
+
+            // Trigger the callback with the result
+            if (this.onSortComplete) {
+                this.onSortComplete(res || 'Something went wrong :(');
+            }
+        } catch (err) {
+            console.error(err);
+            this.setSortText('Something went wrong :(');
+        }
+
+        this.setLoading(false);
+        this.setSortDone(true);
+    }
+
+
+
     /**
      * Generates a Dalle image and uploads it to the server.
      */
@@ -243,6 +307,74 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
+    sortBox = () => (
+        <>
+            <div>
+                {this.heading("SORTING")}
+                {this.loading ? (
+                    <div className="content-wrapper">
+                        <div className="loading-spinner">
+                            <ReactLoading type="spin" color="#000" height={30} width={30} />
+                            <span>Loading...</span>
+                        </div>
+                    </div>
+                ) : !this.sortDone && (
+                    <div className="btns-wrapper">
+                        <input
+                            defaultValue=""
+                            autoComplete="off"
+                            onChange={this.setSortPrompt}
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') {
+                                    this.generateSort();
+                                }
+                                e.stopPropagation();
+                            }}
+                            type="text"
+                            placeholder="Enter sorting instructions..."
+                            id="search-input"
+                            className="searchBox-input"
+                            style={{ width: "100%" }}
+                        />
+                    </div>
+                )}
+    
+                {this.sortDone && (
+                    <div>
+                        <div className="content-wrapper">
+
+                        <p>{this.text== "Something went wrong :(" ? "Something went wrong :(" : "Sorting done! Feel free to move things around / regenerate :) !"}</p>
+                       
+
+                            <IconButton
+                                tooltip="Generate Again"
+                                onClick={() => this.setSortDone(false)}
+                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                            />
+
+                    </div>  
+                    </div>
+                )}
+            </div>
+        </>
+    );
+    
+    
+
+
+//     <>
+//     <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
+//     <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
+// </>
+// ) : (
+// <div className="summarizing">
+//     <span>Sorting</span>
+//     <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
+//     <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)}  type={Type.TERT}/>
+// </div>
+// )}
+
     imageBox = () => {
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -396,8 +528,10 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     render() {
         return (
             <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
-                {this.mode === GPTPopupMode.SUMMARY? this.summaryBox() : this.mode === GPTPopupMode.DATA? this.dataAnalysisBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : <></>}
-            </div>
+                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() :
+                this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() :
+                this.mode === GPTPopupMode.IMAGE ? this.imageBox() :
+                this.mode === GPTPopupMode.SORT ? this.sortBox() : <></>}            </div>
         );
     }
 }