diff options
| author | bobzel <zzzman@gmail.com> | 2024-05-18 23:15:49 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2024-05-18 23:15:49 -0400 |
| commit | 9badfc489f00afd10489f0dde0a3b9e21817feb5 (patch) | |
| tree | b69d90fb3525d0bfca4a107ec1640e4706c0dfb6 /src/client/views/pdf/GPTPopup | |
| parent | 38d2d361aa723917b5721e2635933d2d8b9f483a (diff) | |
more cardView cleanup
Diffstat (limited to 'src/client/views/pdf/GPTPopup')
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 126 |
1 files changed, 53 insertions, 73 deletions
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 4fb757d8a..0ba62d60e 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -21,7 +21,7 @@ export enum GPTPopupMode { EDIT, IMAGE, DATA, - SORT + SORT, } interface GPTPopupProps {} @@ -60,7 +60,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { public dataChatPrompt: string | null = null; @action public setDataJson = (text: string) => { - if (text=="") this.dataChatPrompt = ""; + if (text == '') this.dataChatPrompt = ''; this.dataJson = text; }; @@ -95,21 +95,18 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { private done: boolean = false; @action public setDone = (done: boolean) => { - console.log("HIIIIIIIII") 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 + 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) => { - console.log("HIIIIIIIII") this.sortDone = done; }; - // change what can be a ref into a ref @observable private sidebarId: string = ''; @@ -133,26 +130,20 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { }; @observable - public sortDesc: string = '' + public sortDesc: string = ''; - @action public setSortDesc = (t:string) => { - this.sortDesc = t - } + @action public setSortDesc = (t: string) => { + this.sortDesc = t; + }; @observable onSortComplete?: (sortResult: string) => void; @observable cardsDoneLoading = false; @action setCardsDoneLoading(done: boolean) { - console.log(done + "HI HIHI") + console.log(done + 'HI HIHI'); this.cardsDoneLoading = done; } - - - - - - public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @@ -164,12 +155,11 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.setSortDone(false); try { - const res = await gptAPICall(this.sortDesc, GPTCallType.SORT); // Trigger the callback with the result if (this.onSortComplete) { this.onSortComplete(res || 'Something went wrong :('); - console.log(res) + console.log(res); } } catch (err) { console.error(err); @@ -177,9 +167,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.setLoading(false); this.setSortDone(true); - } - - + }; /** * Generates a Dalle image and uploads it to the server. @@ -219,7 +207,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { console.error(err); } GPTPopup.Instance.setLoading(false); - } + }; generateDataAnalysis = async () => { GPTPopup.Instance.setVisible(true); @@ -231,7 +219,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { console.error(err); } GPTPopup.Instance.setLoading(false); - } + }; /** * Transfers the summarization text to a sidebar annotation text document. @@ -282,7 +270,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { */ private chatWithAI = () => { this.chatMode = true; - } + }; dataPromptChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { this.dataChatPrompt = e.target.value; }); @@ -304,14 +292,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { sortBox = () => ( <> <div> - {this.heading("SORTING")} + {this.heading('SORTING')} {this.loading ? ( <div className="content-wrapper"> - <div className="loading-spinner"> - <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> - <span>Loading...</span> + <div className="loading-spinner"> + <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> + <span>Loading...</span> + </div> </div> - </div> ) : ( <> {!this.cardsDoneLoading ? ( @@ -334,27 +322,18 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { width: '90%', // Almost as wide as the container textAlign: 'center', color: '#ffffff', // White text - fontSize: '16px' // Adjust font size as needed + 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)} - /> + <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> )} @@ -364,21 +343,17 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { </> ); - - - - -// <> -// <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> -// <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> -// </> -// ) : ( -// <div className="summarizing"> -// <span>Sorting</span> -// <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} /> -// <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT}/> -// </div> -// )} + // <> + // <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> + // <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> + // </> + // ) : ( + // <div className="summarizing"> + // <span>Sorting</span> + // <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} /> + // <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT}/> + // </div> + // )} imageBox = () => { return ( @@ -457,7 +432,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { dataAnalysisBox = () => ( <> <div> - {this.heading("ANALYSIS")} + {this.heading('ANALYSIS')} <div className="content-wrapper"> {!this.loading && (!this.done ? ( @@ -479,8 +454,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { </div> {!this.loading && ( <div className="btns-wrapper"> - {this.done? - this.chatMode?( + {this.done ? ( + this.chatMode ? ( <input defaultValue="" autoComplete="off" @@ -493,19 +468,26 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { placeholder="Ask GPT a question about the data..." id="search-input" className="searchBox-input" - style={{width: "100%"}} + style={{ width: '100%' }} /> - ) - :( - <> - <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> - <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> - </> + ) : ( + <> + <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> + <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> + </> + ) ) : ( <div className="summarizing"> <span>Summarizing</span> <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} /> - <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT}/> + <Button + text="Stop Animation" + onClick={() => { + this.setDone(true); + }} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + /> </div> )} </div> @@ -533,10 +515,8 @@ 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() : <></>} </div> + {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode === GPTPopupMode.SORT ? this.sortBox() : <></>}{' '} + </div> ); } } |
