Enhance Markdown skills and documentation with new features

.dockerignore

@@ -4,6 +4,7 @@
 .next
 .swc
 .vscode
+.agents
 coverage
 node_modules
 

AGENTS.md

@@ -2,6 +2,7 @@
 
 You are a professional and senior full-stack engineer and UI/UX expert and Maintainers of many well-known open-source repositories who built the refract.ai web project using Next.js, TypeScript, Taildwind CSS, Lucide icon, Zod, ShadcnUI, Vercel AI sdk and Jotai. 
 
+
 ## Commands
 
 - `pnpm dev` - Start the dev server

app/chat/[id]/page.test.tsx

@@ -8,7 +8,7 @@ import {
 	workspaceChartAtom,
 	workspaceDatasetAtom,
 	workspaceFileAtom,
-	workspaceTypstContentAtom,
+	workspaceMarkdownContentAtom,
 	workspaceViewAtom,
 } from "@/atoms/chat";
 import { act, render, waitFor } from "@testing-library/react";
@@ -123,7 +123,7 @@ describe("ChatPage workspace reset", () => {
 			fileId: "old-file",
 			filename: "old.csv",
 		});
-		jotaiStore.set(workspaceTypstContentAtom, "old typst");
+		jotaiStore.set(workspaceMarkdownContentAtom, "old markdown");
 		jotaiStore.set(pendingHomePromptAtom, "");
 		jotaiStore.set(pendingHomeUploadsAtom, []);
 	});
@@ -141,7 +141,7 @@ describe("ChatPage workspace reset", () => {
 			expect(jotaiStore.get(workspaceChartAtom)).toBeNull();
 			expect(jotaiStore.get(workspaceDatasetAtom)).toBeNull();
 			expect(jotaiStore.get(workspaceFileAtom)).toBeNull();
-			expect(jotaiStore.get(workspaceTypstContentAtom)).toBe("");
+			expect(jotaiStore.get(workspaceMarkdownContentAtom)).toBe("");
 		});
 	});
 

app/chat/[id]/page.tsx

@@ -70,8 +70,8 @@ const canKeepWorkspaceView = (
 			return Boolean(snapshot.dataset);
 		case "file":
 			return Boolean(snapshot.file);
-		case "typst":
-			return snapshot.typstContent.length > 0;
+		case "markdown":
+			return snapshot.markdownContent.length > 0;
 		case "vnc":
 			return snapshot.vncUrl.length > 0;
 		default:

app/chat/components/markdown-preview-panel.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import "@/styles/markdown-preview.css";
+import "katex/dist/katex.min.css";
+import { workspaceMarkdownContentAtom } from "@/atoms";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useAtomValue } from "jotai";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { memo } from "react";
+import Markdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import Mermaid from "./mermaid-chart";
+
+const MarkdownCodeBlock = ({
+	className,
+	children,
+	...props
+}: ComponentPropsWithoutRef<"code">) => {
+	const langMatch = className?.match(/language-mermaid/);
+	const codeString = String(children).replace(/\n$/, "");
+
+	if (langMatch) {
+		return <Mermaid chart={codeString} />;
+	}
+
+	return (
+		<code {...props} className={className}>
+			{children}
+		</code>
+	);
+};
+
+const MarkdownPreBlock = ({
+	children,
+	...props
+}: ComponentPropsWithoutRef<"pre"> & { children?: ReactNode }) => {
+	const child = children as ReactNode & {
+		props?: { className?: string };
+	};
+
+	if (child?.props?.className?.includes("language-mermaid")) {
+		return <>{children}</>;
+	}
+
+	return <pre {...props}>{children}</pre>;
+};
+
+const MarkdownPreview = () => {
+	const markdownContent = useAtomValue(workspaceMarkdownContentAtom);
+
+	return (
+		<ScrollArea className="h-full w-full p-6">
+			<article className="prose prose-sm dark:prose-invert markdown-body max-w-none">
+				<Markdown
+					remarkPlugins={[remarkGfm, remarkMath]}
+					rehypePlugins={[rehypeRaw, rehypeKatex]}
+					components={{
+						code: MarkdownCodeBlock,
+						pre: MarkdownPreBlock,
+					}}
+				>
+					{markdownContent}
+				</Markdown>
+			</article>
+		</ScrollArea>
+	);
+};
+
+export default memo(MarkdownPreview);

app/chat/components/mermaid-chart.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { handleError } from "@/lib/error-handler";
+import mermaid from "mermaid";
+import { useEffect, useId, useState } from "react";
+
+mermaid.initialize({
+	startOnLoad: false,
+	theme: "default",
+	securityLevel: "loose",
+});
+
+const Mermaid = ({ chart }: { chart: string }) => {
+	const [svg, setSvg] = useState("");
+	const uniqueId = useId();
+
+	useEffect(() => {
+		if (!chart) return;
+
+		const renderChart = async () => {
+			try {
+				const id = `mermaid-${uniqueId}-${Math.random().toString(36).slice(2, 9)}`;
+				if (await mermaid.parse(chart)) {
+					const { svg: rendered } = await mermaid.render(id, chart);
+					setSvg(rendered);
+				}
+			} catch (error) {
+				handleError(error);
+			}
+		};
+
+		renderChart();
+	}, [chart, uniqueId]);
+
+	return (
+		<div
+			className="flex justify-center rounded-lg p-4 text-sm"
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by mermaid library
+			dangerouslySetInnerHTML={{ __html: svg }}
+		/>
+	);
+};
+
+export default Mermaid;

app/chat/components/text-block-markdown.tsx

@@ -1,6 +1,11 @@
+import "katex/dist/katex.min.css";
 import { cn } from "@/lib/utils";
 import { type ComponentPropsWithoutRef, memo, useDeferredValue } from "react";
 import Markdown, { type Components } from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 
 type TextBlockMarkdownProps = {
 	text: string;
@@ -100,7 +105,11 @@ const TextBlockMarkdown = memo(({ text }: TextBlockMarkdownProps) => {
 
 	return (
 		<div className="prose prose-sm max-w-full prose-pre:max-w-full prose-pre:overflow-x-auto break-words prose-headings:break-words prose-li:break-words prose-p:break-words prose-code:break-all">
-			<Markdown components={TEXT_BLOCK_MARKDOWN_COMPONENTS}>
+			<Markdown
+				remarkPlugins={[remarkGfm, remarkMath]}
+				rehypePlugins={[rehypeRaw, rehypeKatex]}
+				components={TEXT_BLOCK_MARKDOWN_COMPONENTS}
+			>
 				{deferredText}
 			</Markdown>
 		</div>