diff options
| -rw-r--r-- | src/client/apis/gpt/GPT.ts | 9 | ||||
| -rw-r--r-- | src/client/documents/Documents.ts | 2 | ||||
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 4 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 95 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.scss | 50 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.scss | 30 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 168 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.scss | 3 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 164 |
13 files changed, 460 insertions, 81 deletions
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 40af70d99..d95e564c7 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -12,6 +12,7 @@ enum GPTCallType { DESCRIBE = 'describe', MERMAID = 'mermaid', DATA = 'data', + RUBRIC = 'rubric' } type GPTCallOpts = { @@ -26,6 +27,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { summary: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Summarize the text given in simpler terms.' }, edit: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Reword the text.' }, flashcard: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Make flashcards out of this text with each question and answer labeled. Do not label each flashcard and do not include asterisks: ' }, + completion: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful assistant. Answer the user's prompt." }, mermaid: { model: 'gpt-4-turbo', @@ -54,6 +56,13 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { temp: 0, prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct', }, + + rubric: { + model: 'gpt-4-turbo', + maxTokens: 1024, + temp: 0, + prompt: "Provide a definition for the vollowing term. It will be used as a rubric to evaluate the user's understanding of the topic", + }, }; let lastCall = ''; diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e8e9b4fb6..612629f89 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -493,6 +493,8 @@ export class DocumentOptions { // cardSort_visibleSortGroups?: List<number>; // which sorting values are being filtered (shown) cardSort_isDesc?: BOOLt = new BoolInfo('whether the cards are sorted ascending or descending'); // test?: STRt = new StrInfo('testing for filtering') + keywords?: MAPt = new MapInfo('keywords', true); + } export const DocOptions = new DocumentOptions(); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 380d16686..67f8dafc4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -39,7 +39,7 @@ import { ColorScheme } from "./SettingsManager"; import { SnappingManager } from "./SnappingManager"; import { UndoManager } from "./UndoManager"; -interface Button { +export interface Button { // DocumentOptions fields a button can set title?: string; toolTip?: string; @@ -714,7 +714,7 @@ pie title Minerals in my tap water // } static tagGroupTools(): Button[] { return [ - { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Star", icon: StrCast(Doc.UserDoc().myFilterHotKeyIcons) ?? "Star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, { 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_);}'}}, 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 |