aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf/GPTPopup
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-05-18 23:15:49 -0400
committerbobzel <zzzman@gmail.com>2024-05-18 23:15:49 -0400
commit9badfc489f00afd10489f0dde0a3b9e21817feb5 (patch)
treeb69d90fb3525d0bfca4a107ec1640e4706c0dfb6 /src/client/views/pdf/GPTPopup
parent38d2d361aa723917b5721e2635933d2d8b9f483a (diff)
more cardView cleanup
Diffstat (limited to 'src/client/views/pdf/GPTPopup')
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx126
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>
);
}
}