From de253f5acca34f20017895a2d8469b5ebd6032bf Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Tue, 30 Jul 2024 14:31:00 -0400
Subject: fight w css

---
 src/client/views/pdf/GPTPopup/GPTPopup.scss |   3 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx  | 164 +++++++++++++++++++---------
 2 files changed, 116 insertions(+), 51 deletions(-)

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

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 57973ef34..eaa3eaebf 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -66,8 +66,9 @@ $highlightedText: #82e0ff;
     .content-wrapper {
         padding-top: 10px;
         min-height: 50px;
-        max-height: 150px;
+        // max-height: 150px;
         overflow-y: auto;
+        height: 100%
     }
 
     .btns-wrapper-gpt {
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index bbd5ea630..a41c33a4d 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -19,7 +19,9 @@ import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { SnappingManager } from '../../../util/SnappingManager';
-
+import { DocumentView } from '../../nodes/DocumentView';
+import { DocCast } from '../../../../fields/Types';
+import { RTFCast } from '../../../../fields/Types';
 
 export enum GPTPopupMode {
     SUMMARY,
@@ -177,6 +179,59 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.quizAnswer = e.target.value;
     });
 
+    generateQuiz = async () => {
+        this.setLoading(true);
+        this.setSortDone(false);
+
+
+        const selected = DocumentView.SelectedDocs().lastElement();
+
+        const questionText = 'Question: ' + StrCast(selected['gptInputText']);
+
+        if (StrCast(selected['gptRubric']) === '') {
+            const rubricText = 'Rubric: ' + await this.generateRubric(StrCast(selected['gptInputText']), selected)
+        }
+
+        const rubricText = 'Rubric: ' + (StrCast(selected['gptRubric']))
+        // const rubricText = 'Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
+        const queryText = questionText + ' UserAnswer: ' + this.quizAnswer + '. ' + 'Rubric' + rubricText;
+
+        try {
+            const res = await gptAPICall(queryText, GPTCallType.QUIZ);
+            if (!res) {
+                console.error('GPT call failed');
+                return;
+            }
+            console.log(res)
+            this.setQuizResp(res)
+
+            this.setLoading(false);
+            this.setSortDone(true);
+
+            // this._outputValue = res;
+        } catch (err) {
+            console.error('GPT call failed');
+        }
+
+
+    }
+
+    generateRubric = async (inputText: string, doc:Doc) => {
+        try {
+            const res = await gptAPICall(inputText, GPTCallType.RUBRIC);
+            console.log(res + "rubbbb")
+            // if (!res) {
+            //     console.error('GPT call failed');
+            //     return;
+            // }
+            doc['gptRubric']= res;
+            return res
+        } catch (err) {
+            console.error('GPT call failed');
+        }
+
+    }
+
 
 
     @observable private regenerateCallback: (() => Promise<void>) | null = null;
@@ -192,6 +247,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     public createFilteredDoc: (axes?: any) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
+    @observable quizRespText: string = ''
+
+    @action setQuizResp (resp: string) {
+        this.quizRespText = resp
+
+    }
+
+
     /**
      * Sorts cards in the CollectionCardDeckView
      */
@@ -403,7 +466,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     )
     
     cardActual = (opt: GPTPopupMode) => {
-        if (opt === GPTPopupMode.SORT) {
+        const isSort = opt === GPTPopupMode.SORT
+        // if (opt === GPTPopupMode.SORT) {
             return (
                 !this.sortDone ? (
                     <>
@@ -412,24 +476,24 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                                 className="searchBox-input"
                                 defaultValue=""
                                 autoComplete="off"
-                                onChange={this.sortPromptChanged}
+                                onChange={isSort ? this.sortPromptChanged : this.quizAnswerChanged}
                                 onKeyDown={e => {
                                     if (e.key === 'Enter') {
-                                        this.generateSort();
+                                        isSort ? this.generateSort() : this.generateQuiz();
                                     }
                                     e.stopPropagation();
                                 }}
                                 type="text"
-                                placeholder="How do you want to sort your cards?"
+                                placeholder={`${isSort ? 'How do you want to sort your cards?' : 'What is the selected card?'}`}
                                 id="search-input"
                                 style={{ width: '100%' }}
                             />
                         {/* </div>
                         <div className="btns-wrapper-gpt"> */}
                             <Button
-                                tooltip="Have ChatGPT sort your cards for you!"
-                                text="Sort!"
-                                onClick={this.generateSort}
+                                tooltip={`${isSort ? 'HaveChatGPT sort ypur cards for you!' : 'See how close you get to the right answer!'}`}
+                                text={`${isSort ? 'Sort!' : 'Check!'}`}
+                                onClick={isSort ? this.generateSort : this.generateQuiz}
                                 color={StrCast(Doc.UserDoc().userVariantColor)}
                                 type={Type.TERT}
                                 style={{
@@ -446,7 +510,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                 ) : (
                     <div>
                         <div className="content-wrapper">
-                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
+                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${isSort ? this.sortRespText : this.quizRespText}`}</p>
                             <IconButton
                                 tooltip="Generate Again"
                                 onClick={() => this.setSortDone(false)}
@@ -457,50 +521,50 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                     </div>
                 )
             );
-        } else if (opt === GPTPopupMode.QUIZ) {
-            return (
-                <>
-                    <div className="btns-wrapper-gpt">
-                        <input
-                            className="searchBox-input"
-                            defaultValue=""
-                            autoComplete="off"
-                            onChange={this.quizAnswerChanged}
-                            onKeyDown={e => {
-                                if (e.key === 'Enter') {
-                                    this.generateSort();
-                                }
-                                e.stopPropagation();
-                            }}
-                            type="text"
-                            placeholder="What is the selected card?"
-                            id="search-input"
-                            style={{ width: '100%' }}
-                        />
-                    </div>
-                    <div className="btns-wrapper-gpt">
-                        <Button
-                            tooltip="See how close you got to the right answer!"
-                            text="Check!"
-                            onClick={this.generateSort}
-                            color={StrCast(Doc.UserDoc().userVariantColor)}
-                            type={Type.TERT}
-                            style={{
-                                width: '90%',
-                                textAlign: 'center',
-                                color: '#ffffff',
-                                fontSize: '16px',
-                            }}
-                        />
-                    </div>
-                </>
-            );
-        }
+        // } else if (opt === GPTPopupMode.QUIZ) {
+        //     return (
+        //         <>
+        //             <div className="btns-wrapper-gpt">
+        //                 <input
+        //                     className="searchBox-input"
+        //                     defaultValue=""
+        //                     autoComplete="off"
+        //                     onChange={this.quizAnswerChanged}
+        //                     onKeyDown={e => {
+        //                         if (e.key === 'Enter') {
+        //                             this.generateQuiz();
+        //                         }
+        //                         e.stopPropagation();
+        //                     }}
+        //                     type="text"
+        //                     placeholder="What is the selected card?"
+        //                     id="search-input"
+        //                     style={{ width: '100%' }}
+        //                 />
+        //             {/* </div>
+        //             <div className="btns-wrapper-gpt"> */}
+        //                 <Button
+        //                     tooltip="See how close you got to the right answer!"
+        //                     text="Check!"
+        //                     onClick={() => this.generateQuiz()}
+        //                     color={StrCast(Doc.UserDoc().userVariantColor)}
+        //                     type={Type.TERT}
+        //                     style={{
+        //                         width: '90%',
+        //                         textAlign: 'center',
+        //                         color: '#ffffff',
+        //                         fontSize: '16px',
+        //                     }}
+        //                 />
+        //             </div>
+        //         </>
+        //     );
+        // }
     };
     
     sortBox = () => (
         <div>
-            {this.heading('SORTING')}
+            {this.heading(this.mode === GPTPopupMode.SORT ? 'SORTING' : 'QUIZ')}
             <>
                 {!this.cardsDoneLoading || this.loading ? (
                     <div className="content-wrapper">
@@ -673,7 +737,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                             tooltip="back"
                             icon={<CgCornerUpLeft size="16px" />}
                             onClick={() => this.mode = GPTPopupMode.CARD}
-                            style = {{right: '-55px'}}
+                            style = {{right: '-20%'}}
                         />
                     )}
                     <IconButton
-- 
cgit v1.2.3-70-g09d2