diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/formattedText/DailyJournal.tsx | 172 |
1 files changed, 156 insertions, 16 deletions
diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx index 31108f05a..26a86bc6e 100644 --- a/src/client/views/nodes/formattedText/DailyJournal.tsx +++ b/src/client/views/nodes/formattedText/DailyJournal.tsx @@ -8,9 +8,15 @@ import { FormattedTextBox, FormattedTextBoxProps } from './FormattedTextBox'; import { gptAPICall, GPTCallType, gptImageLabel } from '../../../apis/gpt/GPT'; import { RichTextField } from '../../../../fields/RichTextField'; import { TextSelection } from 'prosemirror-state'; +import { Plugin } from 'prosemirror-state'; export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() { @observable journalDate: string; + @observable typingTimeout: NodeJS.Timeout | null = null; // Track typing delay + @observable lastUserText: string = ''; // Store last user-entered text + _ref = React.createRef<FormattedTextBox>(); // reference to the formatted textbox + predictiveTextRange: { from: number; to: number } | null = null; // where predictive text starts and ends + private predictiveText: string | null = ' ... why?'; public static LayoutString(fieldStr: string) { return FieldView.LayoutString(DailyJournal, fieldStr); @@ -22,6 +28,11 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() this.journalDate = this.getFormattedDate(); } + /** + * Method to get the current date in standard format + * @returns - date in standard long format + */ + getFormattedDate(): string { const date = new Date().toLocaleDateString(undefined, { weekday: 'long', @@ -33,6 +44,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() return date; } + /** + * Method to set the title of the node to the date + */ @action setDailyTitle() { console.log('setDailyTitle() called...'); @@ -46,6 +60,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() console.log('New title after update:', this.dataDoc.title); } + /** + * Method to set the standard text of the node (to the current date) + */ @action setDailyText() { const placeholderText = 'Start writing here...'; @@ -66,16 +83,138 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() console.log('Current text field:', this.dataDoc[this.fieldKey]); } + /** + * Tracks user typing text inout into the node, to call the insert predicted + * text function when appropriate (i.e. when the user stops typing) + */ + + @action onTextInput = () => { + const editorView = this._ref.current?.EditorView; + if (!editorView) return; + + if (this.typingTimeout) clearTimeout(this.typingTimeout); + + this.typingTimeout = setTimeout(() => { + this.insertPredictiveQuestion(); + }, 3500); + }; + + /** + * Inserts predictive text at the end of what the user is typing + */ + + @action insertPredictiveQuestion = async () => { + const editorView = this._ref.current?.EditorView; + if (!editorView) return; + + const { state, dispatch } = editorView; + const { schema } = state; + const { from, to } = state.selection; + const insertPos = to; // cursor position + + const resolvedPos = state.doc.resolve(insertPos); + const parentNode = resolvedPos.parent; + const indexInParent = resolvedPos.index(); + const isAtEndOfParent = indexInParent >= parentNode.childCount; + + // Check if there's a line break or paragraph node after the current position + let hasNewlineAfter = false; + try { + const nextNode = parentNode.child(indexInParent); + hasNewlineAfter = nextNode.type.name === 'hard_break' || nextNode.type.name === 'paragraph'; + } catch { + hasNewlineAfter = false; + } + + // Only insert if we're at end of node, or there's a newline node after + if (!isAtEndOfParent && !hasNewlineAfter) return; + + const fontSizeMark = schema.marks.pFontSize.create({ fontSize: '14px' }); + const fontColorMark = schema.marks.pFontColor.create({ fontColor: 'lightgray' }); + const fontItalicsMark = schema.marks.em.create(); + + this.predictiveText = ' ...'; // placeholder for now + + const fullTextUpToCursor = state.doc.textBetween(0, state.selection.to, '\n', '\n'); + const gptPrompt = `Given the following incomplete journal entry, generate a single 2-5 word question that continues the user's thought:\n\n"${fullTextUpToCursor}"`; + const res = await gptAPICall(gptPrompt, GPTCallType.COMPLETION); + if (!res) return; + + // styled text node + const text = ` ... ${res.trim()}`; + const predictedText = schema.text(text, [fontSizeMark, fontColorMark, fontItalicsMark]); + + // Insert styled text at cursor position + const transaction = state.tr.insert(insertPos, predictedText); + dispatch(transaction); + + this.predictiveText = text; + }; + + createPredictiveCleanupPlugin = () => { + return new Plugin({ + view: () => { + return { + update: (view, prevState) => { + const { state, dispatch } = view; + if (!this.predictiveText) return; + + // Check if doc or selection changed + if (!prevState.doc.eq(state.doc) || !prevState.selection.eq(state.selection)) { + let found = false; + const textToRemove = this.predictiveText; + + state.doc.descendants((node, pos) => { + if (node.isText && node.text === textToRemove) { + const tr = state.tr.delete(pos, pos + node.nodeSize); + + // Set the desired default marks for future input + const fontSizeMark = state.schema.marks.pFontSize.create({ fontSize: '14px' }); + const fontColorMark = state.schema.marks.pFontColor.create({ fontColor: 'gray' }); + tr.setStoredMarks([]); + tr.setStoredMarks([fontSizeMark, fontColorMark]); + + dispatch(tr); + + this.predictiveText = null; + return false; + } + return true; + }); + + if (!found) { + // fallback cleanup + this.predictiveText = null; + } + } + }, + }; + }, + }); + }; + componentDidMount(): void { console.log('componentDidMount() triggered...'); - console.log("Text: " + (this.Document.text as any)?.Text); + console.log('Text: ' + (this.Document.text as any)?.Text); + + const editorView = this._ref.current?.EditorView; + if (editorView) { + editorView.dom.addEventListener('input', this.onTextInput); + + // Add plugin to state if not already added + const cleanupPlugin = this.createPredictiveCleanupPlugin(); + const newState = editorView.state.reconfigure({ + plugins: [...editorView.state.plugins, cleanupPlugin], + }); + editorView.updateState(newState); + } const rawText = (this.Document.text as any)?.Text ?? ''; - const isTextEmpty = !rawText || rawText === ""; + const isTextEmpty = !rawText || rawText === ''; - const currentTitle = this.dataDoc.title || ""; + const currentTitle = this.dataDoc.title || ''; const isTitleString = typeof currentTitle === 'string'; - const isDefaultTitle = isTitleString && currentTitle.includes("Untitled DailyJournal"); + const isDefaultTitle = isTitleString && currentTitle.includes('Untitled DailyJournal'); if (isTextEmpty && isDefaultTitle) { console.log('Journal title and text are default. Initializing...'); @@ -86,6 +225,14 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() } } + componentWillUnmount(): void { + const editorView = this._ref.current?.EditorView; + if (editorView) { + editorView.dom.removeEventListener('input', this.onTextInput); + } + if (this.typingTimeout) clearTimeout(this.typingTimeout); + } + @action handleGeneratePrompts = async () => { const rawText = (this.Document.text as any)?.Text ?? ''; console.log('Extracted Journal Text:', rawText); @@ -109,36 +256,29 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() if (!editorView) { console.error('EditorView is not available.'); return; - } - - else { + } else { const { state, dispatch } = editorView; const { schema } = state; - // Use available marks + // Use available marks const boldMark = schema.marks.strong.create(); const italicMark = schema.marks.em.create(); - const fontSizeMark = schema.marks.pFontSize.create({ fontSize: "14px" }); - const fontColorMark = schema.marks.pFontColor.create({ fontColor: "gray" }); + const fontSizeMark = schema.marks.pFontSize.create({ fontSize: '14px' }); + const fontColorMark = schema.marks.pFontColor.create({ fontColor: 'gray' }); // Create text nodes with formatting const headerText = schema.text('\n\n# Suggested Prompts:\n', [boldMark, italicMark, fontSizeMark, fontColorMark]); const responseText = schema.text(res, [fontSizeMark, fontColorMark]); // Insert formatted text - const transaction = state.tr.insert( - state.selection.from, headerText).insert( - state.selection.from + headerText.nodeSize, responseText); + const transaction = state.tr.insert(state.selection.from, headerText).insert(state.selection.from + headerText.nodeSize, responseText); dispatch(transaction); } - } catch (err) { console.error('Error calling GPT:', err); } }; - _ref = React.createRef<FormattedTextBox>(); - render() { return ( <div |