From 585e6ece3c2bee7b5a747ec571c5c2af1861d324 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Fri, 14 Jun 2024 12:42:58 -0400
Subject: starting dragging ??????

---
 src/client/views/pdf/GPTPopup/GPTPopup.scss |   1 +
 src/client/views/pdf/GPTPopup/GPTPopup.tsx  | 151 ++++++++++++++++++++--------
 2 files changed, 109 insertions(+), 43 deletions(-)

(limited to 'src/client/views/pdf')

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 6d8793f82..042b1dea5 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -84,6 +84,7 @@ $highlightedText: #82e0ff;
         font-size: 9px;
         padding: 10px;
         color: #ffffff;
+        width: 100%;
         background-color: $button;
         border-radius: 5px;
     }
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index c0f17ba4e..468922532 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -20,6 +20,7 @@ import './GPTPopup.scss';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { SnappingManager } from '../../../util/SnappingManager';
 
+
 export enum GPTPopupMode {
     SUMMARY,
     EDIT,
@@ -149,6 +150,28 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.cardsDoneLoading = done;
     }
 
+    @observable sortRespText: string = ''
+
+    @action setSortRespText(resp: string) {
+        this.sortRespText = resp
+    }
+
+
+    @observable chatSortPrompt: string = ""
+
+    sortPromptChanged = action((e: React.ChangeEvent<HTMLInputElement>) => {
+        this.chatSortPrompt = e.target.value;
+    });
+
+    @observable private regenerateCallback: (() => Promise<void>) | null = null;
+
+    @action public setRegenerateCallback(callback: () => Promise<void>) {
+        this.regenerateCallback = callback;
+    }
+
+
+
+
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
     public createFilteredDoc: (axes?: any) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
@@ -160,21 +183,34 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.setLoading(true);
         this.setSortDone(false);
 
+        if (this.regenerateCallback) {
+            await this.regenerateCallback();
+        }
+    
         try {
-            const res = await gptAPICall(this.sortDesc, GPTCallType.SORT);
+            const res = await gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt);
             // Trigger the callback with the result
             if (this.onSortComplete) {
                 this.onSortComplete(res || 'Something went wrong :(');
+    
+                // Extract explanation surrounded by ------ at the top or both at the top and bottom
+                const explanationMatch = res.match(/------\s*([\s\S]*?)\s*(?:------|$)/) || [];
+                const explanation = explanationMatch[1] ? explanationMatch[1].trim() : 'No explanation found';
+    
+                // Set the extracted explanation to sortRespText
+                this.setSortRespText(explanation);
+    
                 console.log(res);
             }
         } catch (err) {
             console.error(err);
         }
-
+    
         this.setLoading(false);
         this.setSortDone(true);
     };
-
+    
+    
     /**
      * Generates a Dalle image and uploads it to the server.
      */
@@ -315,49 +351,75 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     };
 
     sortBox = () => (
-        <>
-            <div>
+    <>
+        <div>
             {this.heading('SORTING')}
-                    <>
-                        {!this.cardsDoneLoading || this.loading ? (
-                            <div className="content-wrapper">
-                                <div className="loading-spinner">
-                                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                                    {this.loading ? <span>Loading...</span> : <span>Reading Cards...</span>}
-                                </div>
+            <>
+                {!this.cardsDoneLoading || this.loading ? (
+                    <div className="content-wrapper">
+                        <div className="loading-spinner">
+                            <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                            {this.loading ? <span>Loading...</span> : <span>Reading Cards...</span>}
+                        </div>
+                    </div>
+                ) : (
+                    !this.sortDone && (
+                        <>
+                            <div className="btns-wrapper-gpt">
+                                <input
+                                    className="searchBox-input"
+                                    defaultValue=""
+                                    autoComplete="off"
+                                    onChange={this.sortPromptChanged}
+                                    onKeyDown={e => {
+                                        if (e.key === 'Enter') {
+                                            this.generateSort();
+                                        }
+                                        e.stopPropagation();
+                                    }}
+                                    type="text"
+                                    placeholder="How do you want to sort your cards ?"
+                                    id="search-input"
+                                    style={{ width: '100%' }}
+                                />
                             </div>
-                        ) : (
-                            !this.sortDone && (
-                                <div className="btns-wrapper-gpt">
-                                    <Button
-                                        tooltip="Have ChatGPT sort your cards for you!"
-                                        text="Sort!"
-                                        onClick={this.generateSort}
-                                        color={StrCast(Doc.UserDoc().userVariantColor)}
-                                        type={Type.TERT}
-                                        style={{
-                                            width: '90%',
-                                            textAlign: 'center',
-                                            color: '#ffffff', 
-                                            fontSize: '16px', 
-                                        }}
-                                    />
-                                </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 className="btns-wrapper-gpt">
+                                <Button
+                                    tooltip="Have ChatGPT sort your cards for you!"
+                                    text="Sort!"
+                                    onClick={this.generateSort}
+                                    color={StrCast(Doc.UserDoc().userVariantColor)}
+                                    type={Type.TERT}
+                                    style={{
+                                        width: '90%',
+                                        textAlign: 'center',
+                                        color: '#ffffff',
+                                        fontSize: '16px',
+                                    }}
+                                />
                             </div>
-                        )}
-                    </>
-            </div>
-        </>
-    );
+                        </>
+                    )
+                )}
+
+                {this.sortDone && (
+                    <div>
+                        <div className="content-wrapper">
+                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
+                            <IconButton
+                                tooltip="Generate Again"
+                                onClick={() => this.setSortDone(false)}
+                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                            />
+                        </div>
+                    </div>
+                )}
+            </>
+        </div>
+    </>
+);
+
     imageBox = () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
             {this.heading('GENERATED IMAGE')}
@@ -509,9 +571,12 @@ 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() : this.mode === GPTPopupMode.SORT ? this.sortBox() : null}
             </div>
+
+
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2