diff options
Diffstat (limited to 'src/client/views/pdf')
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 95 |
1 files changed, 22 insertions, 73 deletions
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 2d8547dcd..13196f06d 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -52,6 +52,8 @@ interface GPTPopupProps {} export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { // eslint-disable-next-line no-use-before-define static Instance: GPTPopup; + private messagesEndRef: React.RefObject<HTMLDivElement>; + @observable private chatMode: boolean = false; private correlatedColumns: string[] = []; @@ -173,29 +175,25 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.sortRespText = resp } - //mode where gpt says to select a specific card - // - - @observable chatSortPrompt: string = "" sortPromptChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { this.chatSortPrompt = e.target.value; }); - @observable quizAnswer: string = "" quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { this.quizAnswer = e.target.value; }); - - @observable correctAnswer: string = '' - @observable setCorrectAnswer = (s: string) => { - this.correctAnswer = s - } + @observable conversationArray: string[] = ["Hi! In this pop up, you can ask ChatGPT questions about your documents and filter / sort them. "] + + /** + * When the cards are in quiz mode in the card view, allows gpt to determine whether the user's answer was correct + * @returns + */ generateQuiz = async () => { this.setLoading(true); this.setSortDone(false); @@ -238,6 +236,12 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } + /** + * Generates a rubric by which to compare the user's answer to + * @param inputText user's answer + * @param doc the doc the user is providing info about + * @returns gpt's response + */ generateRubric = async (inputText: string, doc:Doc) => { try { const res = await gptAPICall(inputText, GPTCallType.RUBRIC); @@ -253,6 +257,10 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { @observable private regenerateCallback: (() => Promise<void>) | null = null; + /** + * Callback function that causes the card view to update the childpair string list + * @param callback + */ @action public setRegenerateCallback(callback: () => Promise<void>) { this.regenerateCallback = callback; } @@ -271,6 +279,9 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } + /** + * Generates a response to the user's questoin depending on the type of their question + */ generateCard = async () => { console.log(this.chatSortPrompt + "USER PROMPT") this.setLoading(true); @@ -469,7 +480,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { } - private messagesEndRef: React.RefObject<HTMLDivElement>; scrollToBottom = () => { @@ -538,7 +548,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { </div> ) - @observable conversationArray: string[] = ["Hi! In this pop up, you can ask ChatGPT questions about your documents and filter / sort them. If you're not sure if something is possible-- just ask!"] handleKeyPress = async (e: React.KeyboardEvent, isSort: boolean) => { @@ -563,12 +572,9 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { cardActual = (opt: GPTPopupMode) => { const isSort = opt === GPTPopupMode.SORT - // if (opt === GPTPopupMode.SORT) { return ( - // !this.sortDone ? ( - // <> + <div className="btns-wrapper-gpt"> - {/* Chat bubble container with scroll */} <div className="chat-wrapper"> <div className="chat-bubbles"> {this.conversationArray.map((message, index) => ( @@ -579,8 +585,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { {message} </div> ))} - - {/* Conditional Loading message */} {(!this.cardsDoneLoading || this.loading) && ( <div className={`chat-bubble chat-message`}> ... @@ -610,62 +614,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { /> </div> </div> - - - // </> - // ) : ( - // <div> - // <div className="content-wrapper"> - // <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${isSort ? this.sortRespText : this.quizRespText}`}</p> - // <IconButton - // tooltip="Generate Again" - // onClick={() => this.setSortDone(false)} - // icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} - // color={StrCast(Doc.UserDoc().userVariantColor)} - // /> - // </div> - // </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 = () => ( |