aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/pdf')
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.scss23
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx277
2 files changed, 178 insertions, 122 deletions
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 291f272ce..57973ef34 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -71,10 +71,12 @@ $highlightedText: #82e0ff;
}
.btns-wrapper-gpt {
- height: 50px;
+ height: 100%;
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
+
transform: translateY(30px);
@@ -93,17 +95,20 @@ $highlightedText: #82e0ff;
}
- }
- button {
- font-size: 9px;
- padding: 10px;
- color: #ffffff;
- width: 100%;
- background-color: $button;
- border-radius: 5px;
+
}
+ // button {
+ // font-size: 9px;
+ // padding: 10px;
+ // color: #ffffff;
+ // width: 100%;
+ // background-color: $button;
+ // border-radius: 5px;
+
+ // }
+
.text-btn {
&:hover {
background-color: $button;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 71d437c3d..bbd5ea630 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -4,7 +4,7 @@ import { Button, IconButton, Type } from 'browndash-components';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { CgClose } from 'react-icons/cg';
+import { CgClose, CgPathBack, CgArrowLeftO, CgCornerUpLeft } from 'react-icons/cg';
import ReactLoading from 'react-loading';
import { TypeAnimation } from 'react-type-animation';
import { ClientUtils } from '../../../../ClientUtils';
@@ -33,6 +33,10 @@ export enum GPTPopupMode {
}
+
+
+
+
interface GPTPopupProps {}
@observer
@@ -166,6 +170,15 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
this.chatSortPrompt = e.target.value;
});
+
+ @observable quizAnswer: string = ""
+
+ quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => {
+ this.quizAnswer = e.target.value;
+ });
+
+
+
@observable private regenerateCallback: (() => Promise<void>) | null = null;
@action public setRegenerateCallback(callback: () => Promise<void>) {
@@ -359,81 +372,133 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
<Button
tooltip="Have ChatGPT sort your cards for you!"
text="Sort Cards!"
- onClick={this.generateSort}
+ onClick={() => this.setMode(GPTPopupMode.SORT)}
color={StrCast(Doc.UserDoc().userVariantColor)}
type={Type.TERT}
style={{
- width: '90%',
+ width: '100%',
+ height: '40%',
textAlign: 'center',
color: '#ffffff',
fontSize: '16px',
+ marginBottom: '10px'
}}
/>
<Button
tooltip="Test your knowledge with ChatGPT!"
text="Quiz Cards!"
- onClick={this.generateSort}
+ onClick={() => this.setMode(GPTPopupMode.QUIZ)}
color={StrCast(Doc.UserDoc().userVariantColor)}
type={Type.TERT}
style={{
- width: '90%',
+ width: '100%',
textAlign: 'center',
color: '#ffffff',
fontSize: '16px',
+ height: '40%',
+
}}
/>
</div>
-
)
+
+ cardActual = (opt: GPTPopupMode) => {
+ if (opt === GPTPopupMode.SORT) {
+ return (
+ !this.sortDone ? (
+ <>
+ <div className="btns-wrapper-gpt">
+ <input
+ className="searchBox-input"
+ defaultValue=""
+ autoComplete="off"
+ onChange={this.sortPromptChanged}
+ onKeyDown={e => {
+ if (e.key === 'Enter') {
+ this.generateSort();
+ }
+ e.stopPropagation();
+ }}
+ type="text"
+ placeholder="How do you want to sort your cards?"
+ id="search-input"
+ style={{ width: '100%' }}
+ />
+ {/* </div>
+ <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: '100%',
+ textAlign: 'center',
+ color: '#ffffff',
+ fontSize: '16px',
+ height: '40%',
- cardActual = (opt: string) => {
- const isSort = opt === 'sort'
-
- if (opt === 'sort'){
+ }}
+ />
+ </div>
+ </>
+ ) : (
+ <div>
+ <div className="content-wrapper">
+ <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</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.sortPromptChanged}
- onKeyDown={e => {
- if (e.key === 'Enter') {
- this.generateSort();
- }
- e.stopPropagation();
- }}
- type="text"
- placeholder= {`How do you want to sort your cards ?` }
- id="search-input"
- style={{ width: '100%' }}
- />
- </div>
- <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%',
- textAlign: 'center',
- color: '#ffffff',
- fontSize: '16px',
- }}
- />
- </div>
- </>
- )
-
+ <div className="btns-wrapper-gpt">
+ <input
+ className="searchBox-input"
+ defaultValue=""
+ autoComplete="off"
+ onChange={this.quizAnswerChanged}
+ onKeyDown={e => {
+ if (e.key === 'Enter') {
+ this.generateSort();
+ }
+ 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.generateSort}
+ color={StrCast(Doc.UserDoc().userVariantColor)}
+ type={Type.TERT}
+ style={{
+ width: '90%',
+ textAlign: 'center',
+ color: '#ffffff',
+ fontSize: '16px',
+ }}
+ />
+ </div>
+ </>
+ );
}
-
-}
-
+ };
+
sortBox = () => (
- <>
<div>
{this.heading('SORTING')}
<>
@@ -445,62 +510,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
</div>
</div>
) : (
- !this.sortDone && (
- <>
- <div className="btns-wrapper-gpt">
- <input
- className="searchBox-input"
- defaultValue=""
- autoComplete="off"
- onChange={this.sortPromptChanged}
- onKeyDown={e => {
- if (e.key === 'Enter') {
- this.generateSort();
- }
- e.stopPropagation();
- }}
- type="text"
- placeholder="How do you want to sort your cards ?"
- id="search-input"
- style={{ width: '100%' }}
- />
- </div>
- <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%',
- textAlign: 'center',
- color: '#ffffff',
- fontSize: '16px',
- }}
- />
- </div>
- </>
- )
- )}
-
- {this.sortDone && (
- <div>
- <div className="content-wrapper">
- <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
- <IconButton
- tooltip="Generate Again"
- onClick={() => this.setSortDone(false)}
- icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
- color={StrCast(Doc.UserDoc().userVariantColor)}
- />
- </div>
- </div>
+ (this.mode === GPTPopupMode.CARD ? this.cardMenu() : this.cardActual(this.mode)) // Call the functions to render JSX
)}
</>
</div>
- </>
-);
+ );
+
+
imageBox = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -647,25 +663,60 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
heading = (headingText: string) => (
<div className="summary-heading">
<label className="summary-text">{headingText}</label>
- {this.loading ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />}
+ {this.loading ? (
+ <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />
+ ) : (
+ <>
+ {(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: '-55px'}}
+ />
+ )}
+ <IconButton
+ color={StrCast(SettingsManager.userVariantColor)}
+ tooltip="close"
+ icon={<CgClose size="16px" />}
+ onClick={() => this.setVisible(false)}
+ />
+
+ </>
+ )}
</div>
);
+
render() {
+ let content;
+
+ switch (this.mode) {
+ case GPTPopupMode.SUMMARY:
+ content = this.summaryBox();
+ break;
+ case GPTPopupMode.DATA:
+ content = this.dataAnalysisBox();
+ break;
+ case GPTPopupMode.IMAGE:
+ content = this.imageBox();
+ break;
+ case GPTPopupMode.SORT:
+ case GPTPopupMode.CARD:
+ case GPTPopupMode.QUIZ:
+ content = this.sortBox();
+ break;
+ default:
+ content = null;
+ }
+
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()
- : null}
+ {content}
<div className="resize-handle" />
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-15 16:25:32 +0000