aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ComparisonBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ComparisonBox.tsx')
-rw-r--r--src/client/views/nodes/ComparisonBox.tsx109
1 files changed, 52 insertions, 57 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9852228fa..ccbe98257 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,7 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
import axios from 'axios';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import ReactLoading from 'react-loading';
@@ -30,6 +30,7 @@ import './ComparisonBox.scss';
import { DocumentView } from './DocumentView';
import { FieldView, FieldViewProps } from './FieldView';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { practiceMode } from '../collections/FlashcardPracticeUI';
const API_URL = 'https://api.unsplash.com/search/photos';
@@ -122,18 +123,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
</Tooltip>
)}
{DocCast(this.Document.embedContainer)?.type_collection !== CollectionViewType.Freeform ? null : (
- <>
- <Tooltip title={<div>Create a flashcard pile</div>}>
- <div className="comparisonBox-button" onPointerDown={() => this.createFlashcardPile([this.Document], false)}>
- <FontAwesomeIcon icon="folder-plus" size="xl" />
- </div>
- </Tooltip>
- <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
- <div className="comparisonBox-button" onClick={this.gptFlashcardPile}>
- <FontAwesomeIcon icon="layer-group" size="xl" />
- </div>
- </Tooltip>
- </>
+ <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
+ <div className="comparisonBox-button" onClick={this.gptFlashcardPile}>
+ <FontAwesomeIcon icon="layer-group" size="xl" />
+ </div>
+ </Tooltip>
)}
</>
)}
@@ -153,7 +147,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
this._frontSide = !this._frontSide;
};
- @action handleRenderGPTClick = async () => {
+ @action handleRenderGPTClick = () => {
const phonTrans = DocCast(this.Document.audio) ? DocCast(this.Document.audio).phoneticTranscription : undefined;
if (phonTrans) {
this._inputValue = StrCast(phonTrans);
@@ -490,20 +484,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
}
try {
const res = await gptAPICall(questionText, GPTCallType.FLASHCARD);
- if (!res) {
- console.error('GPT call failed');
- return;
- }
- if (callType == GPTCallType.CHATCARD) {
- DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
- } else if (callType == GPTCallType.QUIZ) {
- this._frontSide = true;
- this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
- } else if (callType === GPTCallType.FLASHCARD) {
+ runInAction(() => {
+ if (!res) {
+ console.error('GPT call failed');
+ return;
+ }
+ if (callType == GPTCallType.CHATCARD) {
+ DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
+ } else if (callType == GPTCallType.QUIZ) {
+ this._frontSide = true;
+ this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
+ } else if (callType === GPTCallType.FLASHCARD) {
+ this._loading = false;
+ return res;
+ }
this._loading = false;
- return res;
- }
- this._loading = false;
+ });
return res;
} catch (err) {
console.error('GPT call failed', err);
@@ -725,24 +721,33 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
if (this.Document._layout_isFlashcard) {
const side = this._frontSide ? 1 : 0;
+ const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
+ const textCreator = (which: number, title: string, text: string) => {
+ const newDoc = Docs.Create.TextDocument(text, {
+ title, //
+ _layout_autoHeight: true,
+ _layout_centered: true,
+ text_align: 'center',
+ _layout_fitWidth: true,
+ });
+ this.addDoc(newDoc, this.fieldKey + '_' + which);
+ return newDoc;
+ };
// add text box to each side when comparison box is first created
if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) {
- const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
- const newDoc = Docs.Create.TextDocument(dataSplit[1], { title: 'answer', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true });
- this.addDoc(newDoc, this.fieldKey + '_0');
+ textCreator(0, 'answer', dataSplit[1]);
}
if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) {
- const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
- const newDoc = Docs.Create.TextDocument(dataSplit[0], { title: 'question', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true });
- this.addDoc(newDoc, this.fieldKey + '_1');
+ const question = textCreator(1, 'question', dataSplit[0] || 'hint: Enter a topic, select this document and click the stack button to have GPT create a deck of cards');
+ Doc.SelectOnLoad = dataSplit[0] ? undefined : question;
}
- if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') {
+ if (DocCast(this.Document.embedContainer).practiceMode === practiceMode.QUIZ) {
const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
return (
- <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
+ <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`}>
<p style={{ color: 'white', padding: 10 }}>{text}</p>
<p style={{ display: text === '' ? 'flex' : 'none', color: 'white', marginLeft: '10px' }}>Return to all flashcards and add text to both sides. </p>
<div className="input-box">
@@ -757,38 +762,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
readOnly={this._frontSide}></textarea>
{this._loading ? (
- <div className="loading-spinner" style={{ position: 'absolute' }}>
+ <div className="loading-spinner">
<ReactLoading type="spin" height={30} width={30} color={'blue'} />
</div>
) : null}
</div>
<div>
- <div className="submit-button" style={{ overflow: 'hidden', display: 'flex', width: '100%' }}>
- <div
- className="submit-buttonschema-header-button"
- onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, false)}
- style={{ position: 'absolute', top: '5px', left: '11px', zIndex: '100', width: '5px', height: '5px', cursor: 'pointer' }}>
- <FontAwesomeIcon color={'white'} icon="caret-down" />
+ <div className="submit-button">
+ <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, false)}>
+ <FontAwesomeIcon color="white" icon="caret-down" />
</div>
- <button className="submit-buttonrecord" onClick={this._listening ? this.stopListening : this.startListening} style={{ background: this._listening ? 'lightgray' : '', borderRadius: '2px' }}>
+ <button className="submit-buttonrecord" onClick={this._listening ? this.stopListening : this.startListening} style={{ background: this._listening ? 'lightgray' : '' }}>
{<FontAwesomeIcon icon="microphone" size="lg" />}
</button>
- <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, true)} style={{ position: 'absolute', top: '5px', left: '50px', zIndex: '100', cursor: 'pointer' }}>
- <FontAwesomeIcon color={'white'} icon="caret-down" />
+ <div className="submit-buttonschema-header-button" onPointerDown={e => this.openContextMenu(e.clientX, e.clientY, true)} style={{ left: '50px', zIndex: '100' }}>
+ <FontAwesomeIcon color="white" icon="caret-down" />
</div>
- <button className="submit-buttonpronunciation" onClick={this.evaluatePronunciation} style={{ display: 'inline-flex', alignItems: 'center' }}>
+ <button className="submit-buttonpronunciation" onClick={this.evaluatePronunciation}>
Evaluate Pronunciation
</button>
-
- {!this._frontSide ? (
- <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px', width: '100%' }}>
- Submit
- </button>
- ) : (
- <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderClick} style={{ display: 'inline-flex', alignItems: 'center', borderRadius: '2px', marginBottom: '3px', width: '100%' }}>
- Redo the Question
- </button>
- )}
+ <button className="submit-buttonsubmit" type="button" onClick={this._frontSide ? this.handleRenderClick : this.handleRenderGPTClick}>
+ {this._frontSide ? 'Redo the Question' : 'Submit'}
+ </button>
</div>
</div>
</div>
@@ -804,7 +799,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
onMouseLeave={() => this.hoverFlip(false)}>
{displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
{this._loading ? (
- <div className="loading-spinner" style={{ position: 'absolute' }}>
+ <div className="loading-spinner">
<ReactLoading type="spin" height={30} width={30} color={'blue'} />
</div>
) : null}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 13:54:46 +0000