+
Login or Signup
diff --git a/src/components/ChatEditor/ChatEditor.css b/src/components/ChatEditor/ChatEditor.css new file mode 100644 index 000000000..d5ff8dca4 --- /dev/null +++ b/src/components/ChatEditor/ChatEditor.css @@ -0,0 +1,25 @@ +.chat-editor .tiptap p.is-editor-empty:first-child::before { + color: #adb5bd; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} + +.chat-editor .tiptap p:first-child.is-empty::before { + color: #adb5bd; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} + +.chat-editor .tiptap [data-type='variable'] { + font-size: 12px; + font-weight: 500; + line-height: 1.5; + padding: 2px 4px; + border-radius: 8px; + background-color: #f0f5ff; + color: #2c5df1; +} diff --git a/src/components/ChatEditor/ChatEditor.tsx b/src/components/ChatEditor/ChatEditor.tsx new file mode 100644 index 000000000..7361cb4c9 --- /dev/null +++ b/src/components/ChatEditor/ChatEditor.tsx @@ -0,0 +1,122 @@ +import './ChatEditor.css'; + +import { + Editor, + EditorContent, + useEditor, + type JSONContent, +} from '@tiptap/react'; +import DocumentExtension from '@tiptap/extension-document'; +import ParagraphExtension from '@tiptap/extension-paragraph'; +import TextExtension from '@tiptap/extension-text'; +import Placeholder from '@tiptap/extension-placeholder'; +import { VariableExtension } from './VariableExtension/VariableExtension'; +import { variableSuggestion } from './VariableExtension/VariableSuggestion'; +import { queryClient } from '../../stores/query-client'; +import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree'; +import { useQuery } from '@tanstack/react-query'; +import { useEffect, type RefObject } from 'react'; +import { roadmapDetailsOptions } from '../../queries/roadmap'; + +const extensions = [ + DocumentExtension, + ParagraphExtension, + TextExtension, + Placeholder.configure({ + placeholder: 'Ask AI anything about the roadmap...', + }), + VariableExtension.configure({ + suggestion: variableSuggestion(), + }), +]; + +const content = '
{description}
{content}
+ Generate unlimited courses about any topic, get career guidance + and instant answers from AI, test your skills and more +
+ + + 2 months free with yearly plan + +
+ Join millions of developers in their learning journey +
+ Perfect for continuous learning +
+ Save $20 (2 months free) +
+ Try our AI features for free and experience the power of AI-assisted + learning before upgrading. +
+ {roadmapDetailError.message} +
+ Limit reached for today + {isPaidUser ? '. Please wait until tomorrow.' : ''} +
${htmlFromTiptapJSON(child)}
+ I'm here to guide you through your learning journey on this roadmap. + I can help you understand concepts, track your progress, and provide + personalized learning advice. +
+ Tip: I can see your current + progress on the roadmap, so my advice will be personalized to your + learning journey. Just ask me anything about the topics you see on the + roadmap! +
+ Before we start, answer these questions so we can help you better. +
+ We'll use this information to help you get the best out of the AI + Tutor. +