in it to win it

2 files changed, 110 insertions, 7 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 042b1dea5..291f272ce 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -7,10 +7,13 @@ $highlightedText: #82e0ff;
 
 .summary-box {
     position: fixed;
-    bottom: 10px;
-    right: 10px;
+    top: 115px;
+    left: 75px;
     width: 250px;
+    height: 200px;
     min-height: 200px;
+    min-width: 180px;
+
     border-radius: 16px;
     padding: 16px;
     padding-bottom: 0;
@@ -21,6 +24,18 @@ $highlightedText: #82e0ff;
     background-color: #ffffff;
     box-shadow: 0 2px 5px #7474748d;
     color: $textgrey;
+    resize: both; /* Allows resizing */
+    overflow: auto;
+
+    .resize-handle {
+        width: 10px;
+        height: 10px;
+        background: #ccc;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        cursor: se-resize;
+      }
 
     .summary-heading {
         display: flex;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 5a5e80dc4..71d437c3d 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -354,6 +354,84 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
+    cardMenu = () => (
+        <div className="btns-wrapper-gpt">
+            <Button
+                tooltip="Have ChatGPT sort your cards for you!"
+                text="Sort Cards!"
+                onClick={this.generateSort}
+                color={StrCast(Doc.UserDoc().userVariantColor)}
+                type={Type.TERT}
+                style={{
+                    width: '90%',
+                    textAlign: 'center',
+                    color: '#ffffff',
+                    fontSize: '16px',
+                }}
+            />
+            <Button
+                tooltip="Test your knowledge with ChatGPT!"
+                text="Quiz Cards!"
+                onClick={this.generateSort}
+                color={StrCast(Doc.UserDoc().userVariantColor)}
+                type={Type.TERT}
+                style={{
+                    width: '90%',
+                    textAlign: 'center',
+                    color: '#ffffff',
+                    fontSize: '16px',
+                }}
+            />
+        </div>
+
+    )
+
+    cardActual = (opt: string) => {
+        const isSort = opt === 'sort'
+
+        if (opt === 'sort'){
+            return (
+                <>
+                            <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>
+                            <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>
+                        </>
+            )
+
+        }
+
+}
+
     sortBox = () => (
     <>
         <div>
@@ -575,12 +653,22 @@ 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
+                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 className="resize-handle" />
             </div>
-
-
         );
     }
+    
 }