aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/DocumentButtonBar.tsx6
-rw-r--r--src/client/views/DocumentDecorations.tsx2
-rw-r--r--src/client/views/FilterPanel.tsx95
-rw-r--r--src/client/views/StyleProvider.tsx7
-rw-r--r--src/client/views/collections/CollectionCardDeckView.scss50
-rw-r--r--src/client/views/collections/CollectionCardDeckView.tsx1
-rw-r--r--src/client/views/nodes/IconTagBox.scss30
-rw-r--r--src/client/views/nodes/IconTagBox.tsx168
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.scss3
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx164
10 files changed, 447 insertions, 79 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 3d6436cb5..c8df66535 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -309,7 +309,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
// this.subPin = '';
// })}
onClick={e => {
- name === 'keywords' ? targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels) : 'hi'
+ name === 'tags' ? targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags) : 'hi'
}}
@@ -332,7 +332,9 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
}}>
<div className="documentButtonBar-pinTypes">
- {/* {pinBtn(true, false, 'window-maximize')}
+ {
+ metaBtn('tags', "tag")
+ /* {pinBtn(true, false, 'window-maximize')}
{pinBtn(false, true, 'address-card')}
{pinBtn(true, true, 'id-card')} */}
</div>
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index dc40562e8..b5d819b97 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -832,7 +832,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
<div
className="link-button-container"
style={{
- top: `${doc[DocData].showLabels ? 4 + (doc._keywordHeight as number) : 4}px`,
+ top: `${(doc[DocData].showLabels || doc[DocData].showIconTags) ? 4 + (doc._keywordHeight as number) : 4}px`,
transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
}}>
<DocumentButtonBar views={() => DocumentView.Selected()} />
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 5db627d23..332a89a96 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -19,6 +19,16 @@ import './FilterPanel.scss';
import { DocumentView } from './nodes/DocumentView';
import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
import { ObservableReactComponent } from './ObservableReactComponent';
+import { Button } from '../util/CurrentUserUtils';
+import { ButtonType } from './nodes/FontIconBox/FontIconBox';
+import { DocCast } from '../../fields/Types';
+// import { Docs } from '../../documents/Documents';
+import { Docs } from '../documents/Documents';
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { DocumentOptions } from '../documents/Documents';
+import { DocUtils } from '../documents/DocUtils';
+import { dropActionType } from '../util/DropActionTypes';
+
interface filterProps {
Document: Doc;
@@ -217,6 +227,83 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
};
+ addHotkey() {
+
+ const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+ const filter = buttons['Filter']
+ const filter2 = DocCast(filter)
+ const but2 = Doc.UserDoc().myContextMenuBtns
+
+ // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), {
+ // _width: 250,
+ // _height: 200,
+ // _layout_fitWidth: false,
+ // _layout_autoHeight: true,
+ // });
+
+ // CurrentUserUtils.setupContextMenuButtons()
+
+ // const hm = Docs.Create.FontIconDocument()
+
+ // DocumentView.getDocumentView(filter2)?.ComponentView?.addDocument?.(hm)
+
+ // console.log(DocumentView.getDocumentView(filter2) + "hiiiii")
+
+ // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm)
+
+ const hi = CurrentUserUtils.contextMenuTools()
+
+ const newKey: Button = { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}
+
+
+ const heyy = [...hi, newKey]
+
+ Doc.UserDoc().myFilterHotKeyIcons = "palette"
+ Doc.UserDoc().myFilterHotKeyTitles = "hi"
+
+ CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc());
+
+
+
+ Doc.UserDoc().hi = Docs.Create.FontIconDocument(
+ { title: '',
+ icon: 'map-pin',
+
+ backgroundColor: '#ACCEF7',
+ layout_hideAllLinks: true,
+ _width: 15,
+ _height: 15,
+ _xPadding: 0,
+ }
+ )
+
+
+ // buttons['Filter']
+
+
+
+
+ const reqdCtxtOpts:DocumentOptions = { title: "hi", undoIgnoreFields:new List<string>(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: dropActionType.embed, childDontRegisterViews: true, linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 };
+ const ctxtMenuBtns = CurrentUserUtils.setupContextMenuBtn(newKey, buttons);
+ // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns);
+
+
+ DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]);
+
+
+ // newCol && dv.ComponentView?.addDocument?.(newCol);
+
+ // console.log(but2 + "omgg")
+
+
+
+ // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]);
+
+
+
+ // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc])
+ }
+
render() {
return (
<div className="filterBox-treeView">
@@ -283,6 +370,14 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
)
)}
</div>
+ <div>
+ <div className="filterBox-select">
+ <div style={{ width: '100%' }}>
+ <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} />
+ </div>
+ </div>
+
+ </div>
</div>
);
}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 40d0358d2..55e6217ff 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -30,6 +30,7 @@ import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { StyleProp } from './StyleProp';
import './StyleProvider.scss';
+import { IconTagBox } from './nodes/IconTagBox';
function toggleLockedPosition(doc: Doc) {
UndoManager.RunInBatch(() => Doc.toggleLockedPosition(doc), 'toggleBackground');
@@ -377,6 +378,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
return (<KeywordBox isEditing={false} doc={doc}></KeywordBox>)
}
}
+
+ const iconTags = () => {
+ if (doc && doc![DocData].showIconTags)
+ {return (<IconTagBox doc= {doc}></IconTagBox>)}
+ }
return (
<>
{paint()}
@@ -384,6 +390,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
{filter()}
{audio()}
{keywords()}
+ {iconTags()}
</>
);
}
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index eb1b456f5..5869f89e1 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -22,32 +22,32 @@
transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
-.card-button-container {
- display: flex;
- padding: 3px;
- // width: 300px;
- // height:100px;
- pointer-events: none; /* This ensures the container does not capture hover events */
-
- background-color: rgb(218, 218, 218); /* Background color of the container */
- border-radius: 50px; /* Rounds the corners of the container */
- transform: translateY(25px);
- // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
- align-items: center; /* Centers buttons vertically */
- justify-content: start; /* Centers buttons horizontally */
-
- button {
- pointer-events: auto; /* Re-enable pointer events for the buttons */
+// .card-button-container {
+// display: flex;
+// padding: 3px;
+// // width: 300px;
+// // height:100px;
+// pointer-events: none; /* This ensures the container does not capture hover events */
+
+// background-color: rgb(218, 218, 218); /* Background color of the container */
+// border-radius: 50px; /* Rounds the corners of the container */
+// transform: translateY(25px);
+// // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
+// align-items: center; /* Centers buttons vertically */
+// justify-content: start; /* Centers buttons horizontally */
+
+// button {
+// pointer-events: auto; /* Re-enable pointer events for the buttons */
- width: 70px;
- height: 70px;
- border-radius: 50%;
- background-color: $dark-gray;
- // border-color: $medium-blue;
- margin: 5px; // transform: translateY(-50px);
- background-color: transparent;
- }
-}
+// width: 70px;
+// height: 70px;
+// border-radius: 50%;
+// background-color: $dark-gray;
+// // border-color: $medium-blue;
+// margin: 5px; // transform: translateY(-50px);
+// background-color: transparent;
+// }
+// }
.no-card-span{
position: relative;
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 410ddc355..736cc2354 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -446,6 +446,7 @@ export class CollectionCardView extends CollectionSubView() {
};
const docTextPromises = this.childDocsWithoutLinks.map(async doc => {
const docText = (await docToText(doc)) ?? '';
+ doc['gptInputText'] = docText
this._textToDoc.set(docText.replace(/\n/g, ' ').trim(), doc);
return `======${docText.replace(/\n/g, ' ').trim()}======`;
});
diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss
new file mode 100644
index 000000000..8c0f92c90
--- /dev/null
+++ b/src/client/views/nodes/IconTagBox.scss
@@ -0,0 +1,30 @@
+@import '../global/globalCssVariables.module.scss';
+
+.card-button-container {
+ display: flex;
+ padding: 3px;
+ position: absolute;
+ // width: 300px;
+ // height:100px;
+ pointer-events: none; /* This ensures the container does not capture hover events */
+
+ background-color: rgb(218, 218, 218); /* Background color of the container */
+ border-radius: 50px; /* Rounds the corners of the container */
+ transform: translateY(25px);
+ // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
+ align-items: center; /* Centers buttons vertically */
+ justify-content: start; /* Centers buttons horizontally */
+
+ button {
+ pointer-events: auto; /* Re-enable pointer events for the buttons */
+ transform: translateY(-7.5px);
+
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: $dark-gray;
+ // border-color: $medium-blue;
+ margin: 5px; // transform: translateY(-50px);
+ background-color: transparent;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
new file mode 100644
index 000000000..9a2273c3a
--- /dev/null
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+
+import { ObservableReactComponent } from "../ObservableReactComponent";
+import { NumCast } from "../../../fields/Types";
+import { makeObservable } from "mobx";
+import { Doc } from "../../../fields/Doc";
+import { Reaction } from "mobx";
+import { reaction } from "mobx";
+import { numberRange } from "../../../Utils";
+import { Tooltip } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { undoable } from "../../util/UndoManager";
+import { BoolCast } from "../../../fields/Types";
+import { DocCast } from "../../../fields/Types";
+import './IconTagBox.scss';
+import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../fields/DocSymbols';
+
+
+export interface IconTagProps {
+ doc: Doc;
+
+
+}
+
+@observer
+export class IconTagBox extends ObservableReactComponent<IconTagProps> {
+ private ref: React.RefObject<HTMLDivElement>;
+ private height: number = 0;
+
+
+ @computed
+ get currentScale() {
+ return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1);
+ }
+
+ constructor(props: any) {
+ super(props);
+ makeObservable(this);
+ this.ref = React.createRef();
+ }
+
+ componentDidMount(): void {
+ this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
+ this._props.doc._keywordHeight = this.height;
+
+ reaction(
+ () => this.currentScale,
+ () => {
+ if (this.currentScale < 1) {
+ this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
+ this._props.doc._keywordHeight = this.height;
+ }
+ }
+ );
+ }
+
+ componentDidUpdate(prevProps: Readonly<IconTagProps>): void {
+ this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
+ this._props.doc._keywordHeight = this.height;
+ }
+
+ /**
+ * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
+ * @param doc
+ * @param cardSort
+ * @returns
+ */
+ renderButtons = (doc: Doc): JSX.Element | null => {
+ // if (cardSort !== cardSortings.Custom) return null;
+
+ const amButtons = 4
+
+ // const amButtons = Math.max(
+ // 4,
+ // this.childDocs?.reduce((set, d) => {
+ // if (this.cardSort_customField) {
+ // set.add(NumCast(d[this.cardSort_customField]));
+ // }
+ // return set;
+ // }, new Set<number>()).size ?? 0
+ // );
+
+ // const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
+
+ const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
+
+ const iconMap: { [key: number]: any } = {
+ 0: 'star',
+ 1: 'heart',
+ 2: 'cloud',
+ 3: 'bolt'
+ };
+
+ return (
+ <div
+ className="card-button-container"
+ style={{
+ transformOrigin: 'top left',
+ transform: `scale(${1 / this.currentScale}) translateY(${doc[DocData].showLabels ? doc._keywordHeight as number : 0}px)`,
+ width: `${totalWidth}px`,
+ fontSize: '50px'
+ }}
+ >
+ {numberRange(amButtons).map(i => (
+ <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap[i]} group</div>}>
+ <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap[i] )}>
+ {this.getButtonIcon(doc, iconMap[i])}
+ </button>
+ </Tooltip>
+ ))}
+ </div>
+ );
+ };
+
+ /**
+ * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt
+ * @param childPairIndex
+ * @param buttonID
+ * @param doc
+ */
+ toggleButton = undoable((doc: Doc, icon: string) => {
+
+
+
+ // this.cardSort_customField && (doc[this.cardSort_customField] = buttonID);
+
+ // doc.cardSort_activeIcons = new List<string>()
+
+
+ // const list = StrListCast(doc.cardSort_activeIcons);
+ // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]);
+
+ BoolCast(doc[icon]) ? doc[icon] = false : doc[icon] = true
+
+
+
+ // StrListCast(doc.cardSort_activeIcons).push(iconMap[buttonID])
+ }, 'toggle card tag');
+
+
+ getButtonIcon = (doc: Doc, icon: any): JSX.Element => {
+
+ // const isActive = StrListCast(doc.cardSort_activeIcons).includes(icon)
+ const isActive = doc[icon]
+
+ // console.log(StrListCast(doc.cardSort_activeIcons))
+ const color = isActive ? '#4476f7' : '#323232';
+
+ return <FontAwesomeIcon icon={icon} style={{ color , height: '30px', width: '30px'}} />;
+ };
+
+ render (){
+ return (
+ <>
+ {this.renderButtons(this._props.doc)}
+
+ </>
+ )
+
+ }
+
+
+
+}
+
+
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 57973ef34..eaa3eaebf 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -66,8 +66,9 @@ $highlightedText: #82e0ff;
.content-wrapper {
padding-top: 10px;
min-height: 50px;
- max-height: 150px;
+ // max-height: 150px;
overflow-y: auto;
+ height: 100%
}
.btns-wrapper-gpt {
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index bbd5ea630..a41c33a4d 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -19,7 +19,9 @@ import { AnchorMenu } from '../AnchorMenu';
import './GPTPopup.scss';
import { SettingsManager } from '../../../util/SettingsManager';
import { SnappingManager } from '../../../util/SnappingManager';
-
+import { DocumentView } from '../../nodes/DocumentView';
+import { DocCast } from '../../../../fields/Types';
+import { RTFCast } from '../../../../fields/Types';
export enum GPTPopupMode {
SUMMARY,
@@ -177,6 +179,59 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
this.quizAnswer = e.target.value;
});
+ generateQuiz = async () => {
+ this.setLoading(true);
+ this.setSortDone(false);
+
+
+ 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)
+ }
+
+ const rubricText = 'Rubric: ' + (StrCast(selected['gptRubric']))
+ // const rubricText = 'Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
+ 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.setLoading(false);
+ this.setSortDone(true);
+
+ // this._outputValue = res;
+ } catch (err) {
+ console.error('GPT call failed');
+ }
+
+
+ }
+
+ generateRubric = async (inputText: string, doc:Doc) => {
+ try {
+ const res = await gptAPICall(inputText, GPTCallType.RUBRIC);
+ console.log(res + "rubbbb")
+ // if (!res) {
+ // console.error('GPT call failed');
+ // return;
+ // }
+ doc['gptRubric']= res;
+ return res
+ } catch (err) {
+ console.error('GPT call failed');
+ }
+
+ }
+
@observable private regenerateCallback: (() => Promise<void>) | null = null;
@@ -192,6 +247,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
public createFilteredDoc: (axes?: any) => boolean = () => false;
public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
+ @observable quizRespText: string = ''
+
+ @action setQuizResp (resp: string) {
+ this.quizRespText = resp
+
+ }
+
+
/**
* Sorts cards in the CollectionCardDeckView
*/
@@ -403,7 +466,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
)
cardActual = (opt: GPTPopupMode) => {
- if (opt === GPTPopupMode.SORT) {
+ const isSort = opt === GPTPopupMode.SORT
+ // if (opt === GPTPopupMode.SORT) {
return (
!this.sortDone ? (
<>
@@ -412,24 +476,24 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
className="searchBox-input"
defaultValue=""
autoComplete="off"
- onChange={this.sortPromptChanged}
+ onChange={isSort ? this.sortPromptChanged : this.quizAnswerChanged}
onKeyDown={e => {
if (e.key === 'Enter') {
- this.generateSort();
+ isSort ? this.generateSort() : this.generateQuiz();
}
e.stopPropagation();
}}
type="text"
- placeholder="How do you want to sort your cards?"
+ placeholder={`${isSort ? 'How do you want to sort your cards?' : 'What is the selected card?'}`}
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}
+ tooltip={`${isSort ? 'HaveChatGPT sort ypur cards for you!' : 'See how close you get to the right answer!'}`}
+ text={`${isSort ? 'Sort!' : 'Check!'}`}
+ onClick={isSort ? this.generateSort : this.generateQuiz}
color={StrCast(Doc.UserDoc().userVariantColor)}
type={Type.TERT}
style={{
@@ -446,7 +510,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
) : (
<div>
<div className="content-wrapper">
- <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
+ <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${isSort ? this.sortRespText : this.quizRespText}`}</p>
<IconButton
tooltip="Generate Again"
onClick={() => this.setSortDone(false)}
@@ -457,50 +521,50 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
</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.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>
- </>
- );
- }
+ // } 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 = () => (
<div>
- {this.heading('SORTING')}
+ {this.heading(this.mode === GPTPopupMode.SORT ? 'SORTING' : 'QUIZ')}
<>
{!this.cardsDoneLoading || this.loading ? (
<div className="content-wrapper">
@@ -673,7 +737,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
tooltip="back"
icon={<CgCornerUpLeft size="16px" />}
onClick={() => this.mode = GPTPopupMode.CARD}
- style = {{right: '-55px'}}
+ style = {{right: '-20%'}}
/>
)}
<IconButton
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-09 12:30:19 +0000