@@ -587,9 +544,10 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
- if (isStreamingMessage) {
+ if (status !== 'ready') {
return;
}
+
submitInput();
}
}}
@@ -609,9 +567,10 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
disabled={isRoadmapDetailLoading || isLimitExceeded}
onClick={() => {
if (isStreamingMessage) {
- handleAbort();
+ stop();
return;
}
+
submitInput();
}}
>
@@ -637,7 +596,6 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
setIsOpen(true);
setTimeout(() => {
scrollToBottom('instant');
- setShowScrollToBottom(false);
}, 0);
}}
>
diff --git a/src/components/Global/CodeBlock.tsx b/src/components/Global/CodeBlock.tsx
new file mode 100644
index 000000000..2b07086bb
--- /dev/null
+++ b/src/components/Global/CodeBlock.tsx
@@ -0,0 +1,160 @@
+import {
+ transformerNotationDiff,
+ transformerNotationErrorLevel,
+ transformerNotationFocus,
+ transformerNotationHighlight,
+ transformerNotationWordHighlight,
+} from '@shikijs/transformers';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { type BundledLanguage, codeToHtml } from 'shiki';
+import { cn } from '../../lib/classname';
+import { useCopyText } from '../../hooks/use-copy-text';
+export type { BundledLanguage } from 'shiki';
+
+const codeBlockClassName = cn(
+ 'mt-0 text-sm',
+ '[&_pre]:py-0',
+ '[&_pre]:grid',
+ '[&_code]:py-4',
+ '[&_code]:w-full',
+ '[&_code]:grid',
+ '[&_code]:overflow-x-auto',
+ '[&_code]:no-scrollbar',
+ '[&_code]:bg-transparent',
+ '[&_.line]:px-3',
+ '[&_.line]:w-full',
+ '[&_.line]:relative',
+ '[&_.line]:min-h-5',
+);
+
+function highlight(html: string, language?: BundledLanguage) {
+ return codeToHtml(html, {
+ lang: language ?? 'typescript',
+ theme: 'github-light',
+ transformers: [
+ transformerNotationDiff({
+ matchAlgorithm: 'v3',
+ }),
+ transformerNotationHighlight({
+ matchAlgorithm: 'v3',
+ }),
+ transformerNotationWordHighlight({
+ matchAlgorithm: 'v3',
+ }),
+ transformerNotationFocus({
+ matchAlgorithm: 'v3',
+ }),
+ transformerNotationErrorLevel({
+ matchAlgorithm: 'v3',
+ }),
+ ],
+ });
+}
+
+type CodeBlockFallbackProps = HTMLAttributes
;
+
+const CodeBlockFallback = ({ children, ...props }: CodeBlockFallbackProps) => (
+
+
+
+ {children
+ ?.toString()
+ .split('\n')
+ .map((line, i) => (
+
+ {line}
+
+ ))}
+
+
+
& {
+ value: string;
+ lineNumbers?: boolean;
+};
+
+export const CodeBlockItem = ({
+ children,
+ lineNumbers = true,
+ className,
+ value,
+ ...props
+}: CodeBlockItemProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export type CodeBlockContentProps = HTMLAttributes & {
+ language?: BundledLanguage;
+ syntaxHighlighting?: boolean;
+ children: string;
+};
+
+export const CodeBlockContent = ({
+ children,
+ language,
+ syntaxHighlighting = true,
+ ...props
+}: CodeBlockContentProps) => {
+ const [html, setHtml] = useState(null);
+ useLayoutEffect(() => {
+ if (!syntaxHighlighting) {
+ return;
+ }
+
+ if (typeof children !== 'string') {
+ return;
+ }
+
+ highlight(children, language).then(setHtml).catch(console.error);
+ }, [children, syntaxHighlighting, language]);
+
+ if (!(syntaxHighlighting && html)) {
+ return {children} ;
+ }
+
+ return
;
+};
+
+type CodeBlockHeaderProps = HTMLAttributes & {
+ language: string;
+ code: string;
+};
+
+export function CodeBlockHeader(props: CodeBlockHeaderProps) {
+ const { language, code, className, ...rest } = props;
+
+ const { copyText, isCopied } = useCopyText();
+
+ return (
+
+
{language}
+
+
+ copyText(code)}
+ className="flex size-6 items-center justify-center gap-2 rounded-md text-gray-400 hover:bg-zinc-200 hover:text-black focus:outline-none"
+ >
+ {isCopied ? (
+
+
+
{children} ;
+ }
+
+ // it's fine to do it, because we only have one code block in the markdown
+ // so no worries, it will be fine
+ // we need to remove the last line because it always add a empty line at the end
+ // @see https://github.com/shikijs/shiki/pull/585
+ const code = (children.props as { children: string })?.children?.slice(
+ 0,
+ -1
+ );
+
+ return (
+
+
+
+ {code}
+
+
+
+ );
+ },
+};
+
+type MarkdownProps = {
+ children: string;
+ className?: string;
+};
+
+function _Markdown(props: MarkdownProps) {
+ const { children, className } = props;
+
+ return (
+ *:first-child]:mt-0 [&>*:last-child]:mb-0',
+ className
+ )}
+ >
+
+ {children}
+
+
+ );
+}
+
+export const Markdown = memo(_Markdown, (prevProps, nextProps) => {
+ return prevProps.children === nextProps.children;
+});
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 3cead482e..272d07453 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -25,9 +25,7 @@ import { Ban, FileText, HeartHandshake, Star, X } from 'lucide-react';
import { getUrlParams, parseUrl } from '../../lib/browser';
import { Spinner } from '../ReactIcons/Spinner';
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import {
- type AllowedRoadmapRenderer
-} from '../../lib/roadmap.ts';
+import { type AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
import { lockBodyScroll } from '../../lib/dom.ts';
import { TopicDetailLink } from './TopicDetailLink.tsx';
import { ResourceListSeparator } from './ResourceListSeparator.tsx';
@@ -42,6 +40,8 @@ import type { AIChatHistoryType } from '../GenerateCourse/AICourseLessonChat.tsx
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal.tsx';
import { TopicProgressButton } from './TopicProgressButton.tsx';
import { CreateCourseModal } from './CreateCourseModal.tsx';
+import { useChat } from '@ai-sdk/react';
+import { topicDetailAiChatTransport } from '../../lib/ai.ts';
type PaidResourceType = {
_id?: string;
@@ -134,8 +134,6 @@ export function TopicDetail(props: TopicDetailProps) {
const [links, setLinks] = useState([]);
const [activeTab, setActiveTab] =
useState(defaultActiveTab);
- const [aiChatHistory, setAiChatHistory] =
- useState(defaultChatHistory);
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
const [isCustomResource, setIsCustomResource] = useState(false);
@@ -156,14 +154,20 @@ export function TopicDetail(props: TopicDetailProps) {
const [resourceType, setResourceType] = useState('roadmap');
const [paidResources, setPaidResources] = useState([]);
+ const chatId = `${resourceType}-${resourceId}-${topicId}`;
+ const { messages, sendMessage, setMessages, status } = useChat({
+ id: chatId,
+ transport: topicDetailAiChatTransport,
+ });
+
const handleClose = () => {
onClose?.();
setIsActive(false);
setIsContributing(false);
setShowUpgradeModal(false);
- setAiChatHistory(defaultChatHistory);
setActiveTab('content');
setShowSubjectSearchModal(false);
+ setMessages([]);
lockBodyScroll(false);
@@ -485,8 +489,10 @@ export function TopicDetail(props: TopicDetailProps) {
resourceId={resourceId}
resourceType={resourceType}
topicId={topicId}
- aiChatHistory={aiChatHistory}
- setAiChatHistory={setAiChatHistory}
+ messages={messages}
+ setMessages={setMessages}
+ status={status}
+ sendMessage={sendMessage}
hasUpgradeButtons={hasUpgradeButtons}
onUpgrade={() => setShowUpgradeModal(true)}
onLogin={() => {
diff --git a/src/components/TopicDetail/TopicDetailAI.tsx b/src/components/TopicDetail/TopicDetailAI.tsx
index a7898af9e..ad69c0347 100644
--- a/src/components/TopicDetail/TopicDetailAI.tsx
+++ b/src/components/TopicDetail/TopicDetailAI.tsx
@@ -1,3 +1,5 @@
+import '../ChatMessages/AIChat.css';
+
import { useQuery } from '@tanstack/react-query';
import {
BotIcon,
@@ -9,14 +11,11 @@ import {
Trash2,
WandSparkles,
} from 'lucide-react';
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
+import { useEffect, useRef, useState } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { useToast } from '../../hooks/use-toast';
-import { readStream } from '../../lib/ai';
import { cn } from '../../lib/classname';
-import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
-import { markdownToHtmlWithHighlighting } from '../../lib/markdown';
+import { isLoggedIn } from '../../lib/jwt';
import { getPercentage } from '../../lib/number';
import { showLoginPopup } from '../../lib/popup';
import type { ResourceType } from '../../lib/resource-progress';
@@ -24,14 +23,12 @@ import { aiLimitOptions } from '../../queries/ai-course';
import { billingDetailsOptions } from '../../queries/billing';
import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
import { queryClient } from '../../stores/query-client';
-import {
- AIChatCard,
- type AIChatHistoryType,
-} from '../GenerateCourse/AICourseLessonChat';
-import '../GenerateCourse/AICourseLessonChat.css';
import { AILimitsPopup } from '../GenerateCourse/AILimitsPopup';
-import { PredefinedActions, promptLabelMapping } from './PredefinedActions';
-import { defaultChatHistory } from './TopicDetail';
+import { PredefinedActions } from './PredefinedActions';
+import type { ChatStatus, UIMessage } from 'ai';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import { useAIChatScroll } from '../../hooks/use-ai-chat-scroll';
+import { TopicChatMessages } from '../ChatMessages/TopicChatMessages';
type TopicDetailAIProps = {
resourceId: string;
@@ -40,8 +37,10 @@ type TopicDetailAIProps = {
hasUpgradeButtons?: boolean;
- aiChatHistory: AIChatHistoryType[];
- setAiChatHistory: (history: AIChatHistoryType[]) => void;
+ messages: UIMessage[];
+ sendMessage: UseChatHelpers['sendMessage'];
+ setMessages: UseChatHelpers['setMessages'];
+ status: ChatStatus;
onUpgrade: () => void;
onLogin: () => void;
@@ -51,8 +50,11 @@ type TopicDetailAIProps = {
export function TopicDetailAI(props: TopicDetailAIProps) {
const {
- aiChatHistory,
- setAiChatHistory,
+ messages,
+ sendMessage,
+ setMessages,
+ status,
+
resourceId,
resourceType,
topicId,
@@ -63,7 +65,6 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
} = props;
const textareaRef = useRef(null);
- const scrollareaRef = useRef(null);
const formRef = useRef(null);
const sanitizedTopicId = topicId?.includes('@')
@@ -72,8 +73,6 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
const toast = useToast();
const [message, setMessage] = useState('');
- const [isStreamingMessage, setIsStreamingMessage] = useState(false);
- const [streamedMessage, setStreamedMessage] = useState('');
const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
const { data: tokenUsage, isLoading } = useQuery(
aiLimitOptions(),
@@ -105,7 +104,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
if (
!trimmedMessage ||
- isStreamingMessage ||
+ status !== 'ready' ||
!isLoggedIn() ||
isLimitExceeded ||
isLoading
@@ -113,110 +112,30 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
return;
}
- const newMessages: AIChatHistoryType[] = [
- ...aiChatHistory,
+ sendMessage(
{
- role: 'user',
- content: trimmedMessage,
+ text: trimmedMessage,
},
- ];
+ {
+ body: {
+ resourceId,
+ resourceType,
+ topicId: sanitizedTopicId,
+ },
+ },
+ );
- flushSync(() => {
- setAiChatHistory(newMessages);
- setMessage('');
- });
-
- scrollToBottom();
- completeAITutorChat(newMessages);
+ setMessage('');
+ setTimeout(() => {
+ scrollToBottom();
+ textareaRef.current?.focus();
+ }, 0);
};
- const scrollToBottom = useCallback(() => {
- scrollareaRef.current?.scrollTo({
- top: scrollareaRef.current.scrollHeight,
- behavior: 'smooth',
+ const { scrollToBottom, scrollableContainerRef, showScrollToBottomButton } =
+ useAIChatScroll({
+ messages,
});
- }, [scrollareaRef]);
-
- const completeAITutorChat = async (messages: AIChatHistoryType[]) => {
- try {
- setIsStreamingMessage(true);
-
- const response = await fetch(
- `${import.meta.env.PUBLIC_API_URL}/v1-topic-detail-chat`,
- {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- credentials: 'include',
- body: JSON.stringify({
- resourceId,
- resourceType,
- topicId: sanitizedTopicId,
- messages: messages.slice(-10),
- }),
- },
- );
-
- if (!response.ok) {
- const data = await response.json();
-
- toast.error(data?.message || 'Something went wrong');
- setAiChatHistory([...messages].slice(0, messages.length - 1));
- setIsStreamingMessage(false);
-
- if (data.status === 401) {
- removeAuthToken();
- window.location.reload();
- }
-
- queryClient.invalidateQueries(aiLimitOptions());
- return;
- }
-
- const reader = response.body?.getReader();
-
- if (!reader) {
- setIsStreamingMessage(false);
- toast.error('Something went wrong');
- return;
- }
-
- await readStream(reader, {
- onStream: async (content) => {
- flushSync(() => {
- setStreamedMessage(content);
- });
-
- scrollToBottom();
- },
- onStreamEnd: async (content) => {
- const newMessages: AIChatHistoryType[] = [
- ...messages,
- {
- role: 'assistant',
- content,
- html: await markdownToHtmlWithHighlighting(content),
- },
- ];
-
- flushSync(() => {
- setStreamedMessage('');
- setIsStreamingMessage(false);
- setAiChatHistory(newMessages);
- });
-
- queryClient.invalidateQueries(aiLimitOptions());
- scrollToBottom();
- },
- });
-
- setIsStreamingMessage(false);
- } catch (error) {
- toast.error('Something went wrong');
- setIsStreamingMessage(false);
- }
- };
useEffect(() => {
scrollToBottom();
@@ -228,7 +147,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
tokenUsage?.used || 0,
tokenUsage?.limit || 0,
);
- const hasChatHistory = aiChatHistory.length > 1;
+ const hasChatHistory = messages.length > 0;
const nodeTextParts = roadmapTreeMapping?.text?.split('>') || [];
const hasSubjects =
(roadmapTreeMapping?.subjects &&
@@ -236,7 +155,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
nodeTextParts.length > 1;
return (
-
+
{isDataLoading && (
@@ -279,7 +198,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
}
}}
href={`/ai/course?term=${subject}&difficulty=beginner&src=topic`}
- className="flex items-center gap-1 gap-2 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
+ className="flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
>
{subject}
@@ -349,7 +268,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
{
- setAiChatHistory(defaultChatHistory);
+ setMessages([]);
}}
>
-
-
-
- {aiChatHistory.map((chat, index) => {
- let content = chat.content;
-
- if (chat.role === 'user' && promptLabelMapping[chat.content]) {
- content = promptLabelMapping[chat.content];
- }
-
- return (
-
-
- );
- })}
-
- {isStreamingMessage && !streamedMessage && (
-
- )}
-
- {streamedMessage && (
-
- )}
-
-
-
+
(null);
+ const [showScrollToBottomButton, setShowScrollToBottomButton] =
+ useState(false);
+
+ const canScrollToBottom = useCallback(() => {
+ const scrollableContainer = scrollableContainerRef?.current;
+ if (!scrollableContainer) {
+ return false;
+ }
+
+ const paddingBottom = parseInt(
+ getComputedStyle(scrollableContainer).paddingBottom
+ );
+
+ const distanceFromBottom =
+ scrollableContainer.scrollHeight -
+ (scrollableContainer.scrollTop + scrollableContainer.clientHeight) -
+ paddingBottom;
+
+ return distanceFromBottom > -(paddingBottom - threshold);
+ }, [threshold]);
+
+ const scrollToBottom = useCallback(
+ (behavior: 'instant' | 'smooth' = 'smooth') => {
+ const scrollableContainer = scrollableContainerRef?.current;
+ if (!scrollableContainer) {
+ return;
+ }
+
+ scrollableContainer.scrollTo({
+ top: scrollableContainer.scrollHeight,
+ behavior: behavior === 'instant' ? 'instant' : 'smooth',
+ });
+ },
+ [scrollableContainerRef]
+ );
+
+ useEffect(() => {
+ const scrollableContainer = scrollableContainerRef.current;
+ if (!scrollableContainer) {
+ return;
+ }
+
+ const abortController = new AbortController();
+ let timeoutId: NodeJS.Timeout;
+ const debouncedHandleScroll = () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+
+ timeoutId = setTimeout(() => {
+ setShowScrollToBottomButton(canScrollToBottom());
+ }, 100);
+ };
+
+ debouncedHandleScroll();
+ scrollableContainer.addEventListener('scroll', debouncedHandleScroll, {
+ signal: abortController.signal,
+ });
+
+ return () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+ abortController.abort();
+ };
+ }, [messages]);
+
+ return {
+ scrollableContainerRef,
+ showScrollToBottomButton,
+ scrollToBottom,
+ };
+}
diff --git a/src/hooks/use-completion.ts b/src/hooks/use-completion.ts
new file mode 100644
index 000000000..c7bd86bda
--- /dev/null
+++ b/src/hooks/use-completion.ts
@@ -0,0 +1,119 @@
+import { useCallback, useRef, useState } from 'react';
+import { fetchWithAuthHandling } from '../lib/ai';
+import type { CompletionPart } from '../lib/stream';
+import { readDataStream } from '../lib/stream';
+
+type CompleteOptions = {
+ headers?: Record;
+ body?: Record;
+};
+
+type CompletionStatus = 'idle' | 'loading' | 'streaming' | 'success' | 'error';
+
+export type CompletionContext = {
+ content: string;
+};
+
+type CompletionParams> = {
+ endpoint: string;
+ onStart?: (options?: CompleteOptions) => Promise | void;
+ onData?: (
+ part: CompletionPart,
+ context: CompletionContext
+ ) => Promise | void;
+ onFinish?: (
+ result: string,
+ context: CompletionContext
+ ) => Promise | void;
+ onError?: (error: Error) => void;
+};
+
+export function useCompletion<
+ D extends Record = Record,
+>(params: CompletionParams) {
+ const { endpoint, onData, onFinish, onError, onStart } = params;
+
+ const [status, setStatus] = useState('idle');
+
+ const [error, setError] = useState(null);
+ const [completion, setCompletion] = useState('');
+
+ const abortControllerRef = useRef(null);
+
+ const complete = useCallback(
+ async (options?: CompleteOptions) => {
+ setStatus('loading');
+ setError(null);
+ setCompletion('');
+
+ const controller = new AbortController();
+ abortControllerRef.current = controller;
+
+ try {
+ await onStart?.(options);
+
+ const url = endpoint.startsWith('http')
+ ? endpoint
+ : `${import.meta.env.VITE_API_URL}${endpoint}`;
+ const response = await fetchWithAuthHandling(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options?.headers,
+ },
+ credentials: 'include',
+ ...(options?.body ? { body: JSON.stringify(options.body) } : {}),
+ signal: controller.signal,
+ });
+
+ const stream = response.body;
+ if (!stream) {
+ throw new Error('No stream found');
+ }
+
+ setStatus('streaming');
+ let result = '';
+ await readDataStream(stream, {
+ onData: async (part) => {
+ if (part.type === 'text') {
+ result += part.content;
+ setCompletion(result);
+ }
+ await onData?.(part, { content: result });
+ },
+ });
+
+ await onFinish?.(result, { content: result });
+
+ abortControllerRef.current = null;
+ setStatus('success');
+ setCompletion(result);
+
+ return result;
+ } catch (error) {
+ // we can ignore abort errors
+ // as they are expected when the user cancels the request
+ if (error instanceof Error && error.name === 'AbortError') {
+ return null;
+ }
+
+ setError(error as Error);
+ onError?.(error as Error);
+ setStatus('error');
+ return null;
+ }
+ },
+ [endpoint, onData, onFinish, onError, onStart]
+ );
+
+ const stop = useCallback(() => {
+ if (!abortControllerRef.current) {
+ return;
+ }
+
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }, [abortControllerRef]);
+
+ return { status, error, stop, complete, completion, setCompletion };
+}
diff --git a/src/hooks/use-is-thinking.ts b/src/hooks/use-is-thinking.ts
new file mode 100644
index 000000000..2a7f0c4b9
--- /dev/null
+++ b/src/hooks/use-is-thinking.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import type { ChatStatus, UIMessage } from 'ai';
+
+export function useIsThinking(messages: UIMessage[], status: ChatStatus) {
+ return useMemo(() => {
+ const lastMessage = messages.at(-1);
+ if (!lastMessage) {
+ return false;
+ }
+
+ if (status === 'submitted' && lastMessage.role === 'user') {
+ return true;
+ }
+
+ const hasText =
+ lastMessage.role === 'assistant' &&
+ lastMessage.parts.some(
+ (part) => part.type === 'text' && part.text?.trim(),
+ );
+
+ return (status === 'submitted' || status === 'streaming') && !hasText;
+ }, [messages, status]);
+}
diff --git a/src/hooks/use-personalized-roadmap.ts b/src/hooks/use-personalized-roadmap.ts
index b309a9fc2..27455b2a5 100644
--- a/src/hooks/use-personalized-roadmap.ts
+++ b/src/hooks/use-personalized-roadmap.ts
@@ -16,7 +16,7 @@ type UsePersonalizedRoadmapOptions = {
onFinish?: (data: PersonalizedRoadmapResponse) => void;
};
-export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
+export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
const { roadmapId, onError, onStart, onData, onFinish } = options;
const abortControllerRef = useRef(null);
diff --git a/src/lib/ai.ts b/src/lib/ai.ts
index 0afb4c05f..4e2f2b67f 100644
--- a/src/lib/ai.ts
+++ b/src/lib/ai.ts
@@ -1,4 +1,8 @@
+import Cookies from 'js-cookie';
import { nanoid } from 'nanoid';
+import { TOKEN_COOKIE_NAME } from './jwt';
+import { FetchError } from './query-http';
+import { DefaultChatTransport, type UIMessage } from 'ai';
export const IS_KEY_ONLY_ROADMAP_GENERATION = false;
@@ -353,3 +357,56 @@ export function generateAICourseRoadmapStructure(
return result;
}
+
+export type ChatUIMessage = UIMessage<
+ never,
+ {
+ redirect: {
+ title: string;
+ chatId: string;
+ };
+ }
+>;
+
+export const chatRoadmapTransport = new DefaultChatTransport({
+ api: import.meta.env.PUBLIC_API_URL + '/v1-chat-roadmap',
+ credentials: 'include',
+ fetch: fetchWithAuthHandling,
+});
+
+export const topicDetailAiChatTransport = new DefaultChatTransport({
+ api: import.meta.env.PUBLIC_API_URL + '/v1-topic-detail-chat',
+ credentials: 'include',
+ fetch: fetchWithAuthHandling,
+});
+
+export async function fetchWithAuthHandling(
+ input: RequestInfo | URL,
+ init?: RequestInit,
+) {
+ try {
+ const response = await fetch(input, init);
+ if (response.status === 401) {
+ Cookies.remove(TOKEN_COOKIE_NAME);
+ window?.location?.reload();
+ return null as unknown as Response;
+ }
+
+ if (!response.ok) {
+ const data = await response.json();
+ if (data?.errors) {
+ throw new FetchError(response.status, data.message);
+ } else {
+ throw new Error('An unexpected error occurred');
+ }
+ }
+
+ return response;
+ } catch (error: unknown) {
+ if (typeof navigator !== 'undefined' && !navigator.onLine) {
+ throw new FetchError(503, 'Service Unavailable');
+ }
+
+ throw error;
+ }
+}
diff --git a/src/lib/message-part.ts b/src/lib/message-part.ts
new file mode 100644
index 000000000..0ab0619c0
--- /dev/null
+++ b/src/lib/message-part.ts
@@ -0,0 +1,133 @@
+import { nanoid } from 'nanoid';
+
+type MessagePart = {
+ id: string;
+ type: string;
+ text?: string;
+ data?: any;
+};
+
+type MessagePartRendererProps = {
+ content: string;
+};
+
+export type MessagePartRenderer = (props: MessagePartRendererProps) => any;
+
+export function parseMessageParts(
+ content: string,
+ renderer: Record,
+) {
+ const parts: MessagePart[] = [];
+ const tagNames = Object.keys(renderer);
+
+ // Remove codeblocks around custom tags
+ if (tagNames.length > 0) {
+ const tagPattern = tagNames.join('|');
+
+ // Remove opening codeblock before tags: ```lang\n ->
+ // It sometimes puts codeblocks around our tags (despite us asking it not to)
+ // so we manually remove them here
+ content = content.replace(
+ new RegExp(`\`\`\`\\w*?\\n+?<(${tagPattern})>`, 'g'),
+ '<$1>',
+ );
+
+ // Remove closing codeblock after tags: \n``` ->
+ content = content.replace(
+ new RegExp(`<\\/(${tagPattern})>\\n+?\`\`\``, 'g'),
+ '',
+ );
+ }
+
+ // If no renderers, just return the content as markdown
+ if (tagNames.length === 0) {
+ parts.push({
+ id: nanoid(),
+ type: 'text',
+ text: content,
+ });
+ return parts;
+ }
+
+ const tagPattern = tagNames.join('|');
+ const regex = new RegExp(`<(${tagPattern})>(.*?)<\/\\1>`, 'gs');
+
+ let lastIndex = 0;
+ let match;
+
+ // we will match only tags that have renderers
+ // and then we will render each tag with the corresponding renderer
+ // and then we will push the rendered content to the parts array
+ while ((match = regex.exec(content)) !== null) {
+ const [_, tag, innerContent] = match;
+
+ // push the text before the tag
+ // so that we can render it later
+ if (match.index > lastIndex) {
+ const rawBefore = content.slice(lastIndex, match.index);
+ parts.push({
+ id: nanoid(),
+ type: 'text',
+ text: rawBefore,
+ });
+ }
+
+ const data = renderer[tag]({
+ content: innerContent,
+ });
+ parts.push({
+ id: nanoid(),
+ type: tag,
+ data,
+ });
+
+ // update the last index
+ // so that we can render the next tag
+ lastIndex = regex.lastIndex;
+ }
+
+ // if there was an opening tag that never closed, check manually
+ // search for any known tag that starts but wasn't matched
+ for (const tag of tagNames) {
+ const openingTag = `<${tag}>`;
+ const openingIndex = content.indexOf(openingTag, lastIndex);
+ const closingTag = ``;
+ const closingIndex = content.indexOf(closingTag, lastIndex);
+
+ if (openingIndex !== -1 && closingIndex === -1) {
+ if (openingIndex > lastIndex) {
+ const rawBefore = content.slice(lastIndex, openingIndex);
+ parts.push({
+ id: nanoid(),
+ type: 'text',
+ text: rawBefore,
+ });
+ }
+
+ const innerContent = content.slice(openingIndex + openingTag.length);
+ const data = renderer[tag]({
+ content: innerContent,
+ });
+ parts.push({
+ id: nanoid(),
+ type: tag,
+ data,
+ });
+
+ return parts;
+ }
+ }
+
+ // add the remaining content
+ if (lastIndex < content.length) {
+ const rawRemaining = content.slice(lastIndex);
+
+ parts.push({
+ id: nanoid(),
+ type: 'text',
+ text: rawRemaining,
+ });
+ }
+
+ return parts;
+}
diff --git a/src/lib/stream.ts b/src/lib/stream.ts
new file mode 100644
index 000000000..535b595c9
--- /dev/null
+++ b/src/lib/stream.ts
@@ -0,0 +1,100 @@
+export const CHAT_RESPONSE_PREFIX = {
+ message: '0',
+ details: 'd',
+} as const;
+
+const NEWLINE = '\n'.charCodeAt(0);
+
+function concatChunks(chunks: Uint8Array[], totalLength: number) {
+ const concatenatedChunks = new Uint8Array(totalLength);
+
+ let offset = 0;
+ for (const chunk of chunks) {
+ concatenatedChunks.set(chunk, offset);
+ offset += chunk.length;
+ }
+ chunks.length = 0;
+
+ return concatenatedChunks;
+}
+
+type CompletionTextPart = {
+ type: 'text';
+ content: string;
+};
+
+type CompletionDetailsPart> = {
+ type: 'details';
+ data: D;
+};
+
+export type CompletionPart<
+ D extends Record = Record,
+> = CompletionTextPart | CompletionDetailsPart;
+
+export async function readDataStream>(
+ stream: ReadableStream,
+ {
+ onData,
+ onFinish,
+ }: {
+ onData?: (part: CompletionPart) => Promise | void;
+ onFinish?: () => Promise | void;
+ },
+) {
+ const reader = stream.getReader();
+ const decoder = new TextDecoder('utf-8');
+ const chunks: Uint8Array[] = [];
+
+ let totalLength = 0;
+
+ while (true) {
+ const { value } = await reader.read();
+ if (value) {
+ chunks.push(value);
+ totalLength += value.length;
+ if (value[value.length - 1] !== NEWLINE) {
+ // if the last character is not a new line, we need to wait for the next chunk
+ continue;
+ }
+ }
+
+ if (chunks.length === 0) {
+ // end of stream
+ break;
+ }
+
+ const concatenatedChunks = concatChunks(chunks, totalLength);
+ totalLength = 0;
+
+ const streamParts: CompletionPart[] = decoder
+ .decode(concatenatedChunks, { stream: true })
+ .split('\n')
+ .filter((line) => line !== '')
+ .map((line) => {
+ const separatorIndex = line.indexOf(':');
+ if (separatorIndex === -1) {
+ throw new Error('Invalid line: ' + line + '. No separator found.');
+ }
+
+ const prefix = line.slice(0, separatorIndex);
+ const content = line.slice(separatorIndex + 1);
+
+ switch (prefix) {
+ case CHAT_RESPONSE_PREFIX.message:
+ return { type: 'text', content: JSON.parse(content) };
+ case CHAT_RESPONSE_PREFIX.details:
+ return { type: 'details', data: JSON.parse(content) };
+ default:
+ throw new Error('Invalid prefix: ' + prefix);
+ }
+ });
+
+ for (const part of streamParts) {
+ await onData?.(part);
+ }
+ }
+
+ await onFinish?.();
+ reader.releaseLock();
+}
diff --git a/src/queries/chat-history.ts b/src/queries/chat-history.ts
index 927f44ce4..dd5ec1848 100644
--- a/src/queries/chat-history.ts
+++ b/src/queries/chat-history.ts
@@ -12,6 +12,8 @@ import {
type RoadmapAIChatHistoryType,
} from '../hooks/use-roadmap-ai-chat';
import type { JSONContent } from '@tiptap/core';
+import type { UIMessage } from 'ai';
+import type { ChatUIMessage } from '../lib/ai';
export type ChatHistoryMessage = {
_id: string;
@@ -26,16 +28,13 @@ export interface ChatHistoryDocument {
userId: string;
roadmapId?: string;
title: string;
- messages: ChatHistoryMessage[];
+ messages: ChatUIMessage[];
createdAt: Date;
updatedAt: Date;
}
-export function chatHistoryOptions(
- chatHistoryId?: string,
- renderer?: Record,
-) {
+export function chatHistoryOptions(chatHistoryId?: string) {
return queryOptions({
queryKey: ['chat-history-details', chatHistoryId],
queryFn: async () => {
@@ -47,31 +46,7 @@ export function chatHistoryOptions(
document.title = data.title;
}
- const messages: RoadmapAIChatHistoryType[] = [];
- for (const message of data.messages) {
- messages.push({
- role: message.role,
- content: message.content,
- ...(message.role === 'user' &&
- !message?.json && {
- html: markdownToHtml(message.content),
- }),
- ...(message.role === 'user' &&
- message?.json && {
- html: htmlFromTiptapJSON(message.json),
- }),
- ...(message.role === 'assistant' && {
- jsx: await renderMessage(message.content, renderer ?? {}, {
- isLoading: false,
- }),
- }),
- });
- }
-
- return {
- ...data,
- messages,
- };
+ return data;
},
enabled: !!isLoggedIn() && !!chatHistoryId,
});