diff options
Diffstat (limited to 'src/client/views/pdf/GPTPopup')
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.scss | 6 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 102 |
2 files changed, 65 insertions, 43 deletions
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss index 4425cf158..551c8e5af 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.scss +++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss @@ -55,10 +55,10 @@ $highlightedText: #82e0ff; overflow-y: auto; } - .btns-wrapper { + .btns-wrapper-gpt { height: 50px; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; transform: translateY(30px); @@ -76,6 +76,8 @@ $highlightedText: #82e0ff; display: flex; align-items: center; } + + } button { diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index faf66af85..d94be1860 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -154,6 +154,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } @observable onSortComplete?: (sortResult: string) => void; + @observable cardsDoneLoading = false; + + @action setCardsDoneLoading(done: boolean) { + console.log(done + "HI HIHI") + this.cardsDoneLoading = done; + } + @@ -169,12 +176,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.setSortDone(false); try { - const res = await gptAPICall(this.sortPrompt + this.sortDesc, GPTCallType.SORT); + + const res = await gptAPICall(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 :('); + console.log(res) } } catch (err) { console.error(err); @@ -313,52 +322,63 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { {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 className="loading-spinner"> + <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> + <span>Loading...</span> </div> - )} + </div> + ) : ( + <> + {!this.cardsDoneLoading ? ( + <div className="content-wrapper"> + <div className="loading-spinner"> + <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> + <span>Reading Cards...</span> + </div> + </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%', // Almost as wide as the container + textAlign: 'center', + color: '#ffffff', // White text + fontSize: '16px' // Adjust font size as needed + }} + /> + </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> + {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> </> ); + |