diff options
Diffstat (limited to 'src/client/views/pdf/GPTPopup')
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 250 |
1 files changed, 102 insertions, 148 deletions
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index d5f5f620c..f5a9f9e6a 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, IconButton, Type } from 'browndash-components'; -import { action, makeObservable, observable } from 'mobx'; +import { Button, IconButton, Toggle, ToggleType, Type } from '@dash/components'; +import { action, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { CgClose, CgCornerUpLeft } from 'react-icons/cg'; @@ -37,10 +37,8 @@ export enum GPTQuizType { MULTIPLE = 2, } -interface GPTPopupProps {} - @observer -export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { +export class GPTPopup extends ObservableReactComponent<object> { // eslint-disable-next-line no-use-before-define static Instance: GPTPopup; private messagesEndRef: React.RefObject<HTMLDivElement>; @@ -48,115 +46,84 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { @observable private chatMode: boolean = false; private correlatedColumns: string[] = []; - @observable - public visible: boolean = false; - @action - public setVisible = (vis: boolean) => { - this.visible = vis; + @observable public Visible: boolean = false; + @action public setVisible = (vis: boolean) => { + this.Visible = vis; }; - @observable - public loading: boolean = false; - @action - public setLoading = (loading: boolean) => { + @observable public loading: boolean = false; + @action public setLoading = (loading: boolean) => { this.loading = loading; }; - @observable - public text: string = ''; - @action - public setText = (text: string) => { + @observable public text: string = ''; + @action public setText = (text: string) => { this.text = text; }; - @observable - public selectedText: string = ''; - @action - public setSelectedText = (text: string) => { + @observable public selectedText: string = ''; + @action public setSelectedText = (text: string) => { this.selectedText = text; }; - @observable - public dataJson: string = ''; + @observable public dataJson: string = ''; public dataChatPrompt: string | undefined = undefined; - @action - public setDataJson = (text: string) => { + @action public setDataJson = (text: string) => { if (text === '') this.dataChatPrompt = ''; this.dataJson = text; }; - @observable - public imgDesc: string = ''; - @action - public setImgDesc = (text: string) => { + @observable public imgDesc: string = ''; + @action public setImgDesc = (text: string) => { this.imgDesc = text; }; - @observable - public imgUrls: string[][] = []; - @action - public setImgUrls = (imgs: string[][]) => { + @observable public imgUrls: string[][] = []; + @action public setImgUrls = (imgs: string[][]) => { this.imgUrls = imgs; }; - @observable - public mode: GPTPopupMode = GPTPopupMode.SUMMARY; - @action - public setMode = (mode: GPTPopupMode) => { + @observable public mode: GPTPopupMode = GPTPopupMode.SUMMARY; + @action public setMode = (mode: GPTPopupMode) => { this.mode = mode; }; - @observable - public highlightRange: number[] = []; + @observable public highlightRange: number[] = []; @action callSummaryApi = () => {}; - @observable - private done: boolean = false; - @action - public setDone = (done: boolean) => { + @observable private done: boolean = false; + @action public setDone = (done: boolean) => { 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) => { - this.sortDone = done; - }; - // change what can be a ref into a ref - @observable - private sidebarId: string = ''; - @action - public setSidebarId = (id: string) => { + @observable private sidebarId: string = ''; + @action public setSidebarId = (id: string) => { this.sidebarId = id; }; - @observable - private imgTargetDoc: Doc | undefined; - @action - public setImgTargetDoc = (anchor: Doc) => { + @observable private imgTargetDoc: Doc | undefined; + @action public setImgTargetDoc = (anchor: Doc) => { this.imgTargetDoc = anchor; }; - @observable - private textAnchor: Doc | undefined; - @action - public setTextAnchor = (anchor: Doc) => { + @observable private textAnchor: Doc | undefined; + @action public setTextAnchor = (anchor: Doc) => { this.textAnchor = anchor; }; - @observable - public sortDesc: string = ''; - + @observable public sortDesc: string = ''; @action public setSortDesc = (t: string) => { this.sortDesc = t; }; - @observable onSortComplete?: (sortResult: string, questionType: string, tag?: string) => void; - @observable onQuizRandom?: () => void; + onSortComplete?: (sortResult: string, questionType: string, tag?: string) => void; + onQuizRandom?: () => void; @observable cardsDoneLoading = false; + @observable collectionDoc: Doc | undefined = undefined; + @action setCollectionDoc(doc: Doc | undefined) { + this.collectionDoc = doc; + } + @action setCardsDoneLoading(done: boolean) { - console.log(done + 'HI HIHI'); this.cardsDoneLoading = done; } @@ -186,39 +153,27 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { */ generateQuiz = async () => { this.setLoading(true); - this.setSortDone(false); - const quizType = this.quizMode; + await this.regenerateCallback?.(); 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)); + if (!StrCast(selected.gptRubric)) { + await this.generateRubric(StrCast(selected.gptInputText), selected); } - const rubricText = 'Rubric: ' + StrCast(selected['gptRubric']); - 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.conversationArray.push(res); + const res = await gptAPICall('Question: ' + StrCast(selected.gptInputText) + ' UserAnswer: ' + this.quizAnswer + '. Rubric: ' + StrCast(selected.gptRubric), GPTCallType.QUIZ); + if (res) { + this.setQuizResp(res); + this.conversationArray.push(res); - this.setLoading(false); - this.setSortDone(true); + this.setLoading(false); + this.onQuizRandom?.(); + } else { + console.error('GPT provided no response'); + } } catch (err) { - console.error('GPT call failed'); - } - - if (this.onQuizRandom) { - this.onQuizRandom(); + console.error('GPT call failed', err); } }; @@ -231,10 +186,10 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { generateRubric = async (inputText: string, doc: Doc) => { try { const res = await gptAPICall(inputText, GPTCallType.RUBRIC); - doc['gptRubric'] = res; + doc.gptRubric = res; return res; } catch (err) { - console.error('GPT call failed'); + console.error('GPT call failed', err); } }; @@ -244,7 +199,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { * Callback function that causes the card view to update the childpair string list * @param callback */ - @action public setRegenerateCallback(callback: () => Promise<void>) { + @action public setRegenerateCallback(collectionDoc: Doc | undefined, callback: null | (() => Promise<void>)) { + this.setCollectionDoc(collectionDoc); this.regenerateCallback = callback; } @@ -262,37 +218,21 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { * Generates a response to the user's question depending on the type of their question */ generateCard = async () => { - console.log(this.chatSortPrompt + 'USER PROMPT'); this.setLoading(true); - this.setSortDone(false); - if (this.regenerateCallback) { - await this.regenerateCallback(); - } + await this.regenerateCallback?.(); try { - // const res = await gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt); const questionType = await gptAPICall(this.chatSortPrompt, GPTCallType.TYPE); - const questionNumber = questionType.split(' ')[0]; - console.log(questionType); - let res = ''; - - switch (questionNumber) { - case '1': - case '2': - case '4': - res = await gptAPICall(this.sortDesc, GPTCallType.SUBSET, this.chatSortPrompt); - break; - case '6': - res = await gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt); - break; - default: - const selected = DocumentView.SelectedDocs().lastElement(); - const questionText = StrCast(selected!['gptInputText']); - - res = await gptAPICall(questionText, GPTCallType.INFO, this.chatSortPrompt); - break; - } + const questionNumber = questionType.split(' ')[0][0]; + const res = await (() => { + switch (questionNumber) { + case '1': + case '2': + case '4': return gptAPICall(this.sortDesc, GPTCallType.SUBSET, this.chatSortPrompt); + case '6': return gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt); + default: return gptAPICall(StrCast(DocumentView.SelectedDocs().lastElement()?.gptInputText), GPTCallType.INFO, this.chatSortPrompt); + }})(); // prettier-ignore // Trigger the callback with the result if (this.onSortComplete) { @@ -308,7 +248,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { // Set the extracted explanation to sortRespText this.setSortRespText(explanation); - this.conversationArray.push(this.sortRespText); + runInAction(() => this.conversationArray.push(this.sortRespText)); this.scrollToBottom(); console.log(res); @@ -318,7 +258,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } this.setLoading(false); - this.setSortDone(true); }; /** @@ -448,7 +387,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { private getPreviewUrl = (source: string) => source.split('.').join('_m.'); - constructor(props: GPTPopupProps) { + constructor(props: object) { super(props); makeObservable(this); GPTPopup.Instance = this; @@ -498,9 +437,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { onClick={() => { this.conversationArray = ['Define the selected card!']; this.setMode(GPTPopupMode.QUIZ); - if (this.onQuizRandom) { - this.onQuizRandom(); - } + this.onQuizRandom?.(); }} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} @@ -515,18 +452,25 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { </div> ); - handleKeyPress = async (e: React.KeyboardEvent, isSort: boolean) => { + @action + handleKeyPress = (e: React.KeyboardEvent, isSort: boolean) => { if (e.key === 'Enter') { e.stopPropagation(); if (isSort) { this.conversationArray.push(this.chatSortPrompt); - await this.generateCard(); - this.chatSortPrompt = ''; + this.generateCard().then( + action(() => { + this.chatSortPrompt = ''; + }) + ); } else { this.conversationArray.push(this.quizAnswer); - await this.generateQuiz(); - this.quizAnswer = ''; + this.generateQuiz().then( + action(() => { + this.quizAnswer = ''; + }) + ); } this.scrollToBottom(); @@ -569,21 +513,22 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { }; sortBox = () => ( - <div style={{ height: '80%' }}> + <div className="gptPopup-sortBox" style={{ height: '80%' }}> {this.heading(this.mode === GPTPopupMode.SORT ? 'SORTING' : 'QUIZ')} <> - {!this.cardsDoneLoading ? ( - <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>} + { + !this.cardsDoneLoading ? ( + <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> - </div> - ) : this.mode === GPTPopupMode.CARD ? ( - this.cardMenu() - ) : ( - this.cardActual(this.mode) - ) // Call the functions to render JSX + ) : this.mode === GPTPopupMode.CARD ? ( + this.cardMenu() + ) : ( + this.cardActual(this.mode) + ) // Call the functions to render JSX } </> </div> @@ -741,6 +686,15 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { {(this.mode === GPTPopupMode.SORT || this.mode === GPTPopupMode.QUIZ) && ( <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={() => (this.mode = GPTPopupMode.CARD)} style={{ right: '50px', position: 'absolute' }} /> )} + <Toggle + tooltip="Clear Chat filter" + toggleType={ToggleType.BUTTON} + type={Type.PRIM} + toggleStatus={Doc.hasDocFilter(this.collectionDoc, 'tags', '#chat')} + text={Doc.hasDocFilter(this.collectionDoc, 'tags', '#chat') ? 'filtered' : ''} + color="red" + onClick={() => this.collectionDoc && Doc.setDocFilter(this.collectionDoc, 'tags', '#chat', 'remove')} + /> <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" @@ -777,7 +731,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } return ( - <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}> + <div className="summary-box" style={{ display: this.Visible ? 'flex' : 'none' }}> {content} <div className="resize-handle" /> </div> |