feat: render chat markdown tables and code

frontend/e2e/auth-and-chat.spec.ts

@@ -81,6 +81,17 @@ test("creates an account from the signup form", async ({ page }) => {
 
 test("uploads a document and chats with it", async ({ page }) => {
   const documents: typeof uploadedDocument[] = [];
+  const markdownAnswer = [
+    "A short summary.",
+    "",
+    "| Field | Value |",
+    "| --- | --- |",
+    "| Pages | 1 |",
+    "",
+    "```ts",
+    "const answer = 42;",
+    "```",
+  ].join("\n");
 
   await page.addInitScript(() => {
     localStorage.setItem("token", "access-token");
@@ -103,10 +114,9 @@ test("uploads a document and chats with it", async ({ page }) => {
       status: 200,
       headers: { "content-type": "text/event-stream" },
       body: [
-        'data: {"type":"token","data":"A short"}\n\n',
-        'data: {"type":"token","data":" summary."}\n\n',
-        'data: {"type":"sources","data":[]}\n\n',
-        'data: {"type":"done"}\n\n',
+        `data: ${JSON.stringify({ type: "token", data: markdownAnswer })}\n\n`,
+        `data: ${JSON.stringify({ type: "sources", data: [] })}\n\n`,
+        `data: ${JSON.stringify({ type: "done" })}\n\n`,
       ].join(""),
     });
   });
@@ -127,4 +137,7 @@ test("uploads a document and chats with it", async ({ page }) => {
 
   await expect(page.getByText("Summarize this document")).toBeVisible();
   await expect(page.getByText("A short summary.")).toBeVisible();
+  await expect(page.getByRole("columnheader", { name: "Field" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Pages" })).toBeVisible();
+  await expect(page.getByText("const answer = 42;")).toBeVisible();
 });

frontend/package-lock.json

@@ -19,6 +19,7 @@
         "react-dropzone": "^15.0.0",
         "react-markdown": "^10.1.0",
         "react-pdf": "^10.4.1",
+        "rehype-highlight": "^7.0.2",
         "remark-gfm": "^4.0.1",
         "shadcn": "^4.3.1",
         "tailwind-merge": "^3.5.0",
@@ -6021,6 +6022,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -6048,6 +6062,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -6088,6 +6118,15 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hono": {
       "version": "4.12.14",
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.14.tgz",
@@ -7418,6 +7457,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -9629,6 +9683,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+      "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "lowlight": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -11107,6 +11178,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "react-dropzone": "^15.0.0",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "shadcn": "^4.3.1",
     "tailwind-merge": "^3.5.0",

frontend/src/app/globals.css

@@ -182,6 +182,16 @@
 .prose-chat p { margin-bottom: 0.75em; line-height: 1.7; }
 .prose-chat ul, .prose-chat ol { padding-left: 1.5em; margin-bottom: 0.75em; }
 .prose-chat li { margin-bottom: 0.25em; }
+.prose-chat table {
+  width: 100%;
+}
+.prose-chat th,
+.prose-chat td {
+  white-space: nowrap;
+}
+.prose-chat tbody tr:last-child td {
+  border-bottom: 0;
+}
 .prose-chat code {
   background: oklch(1 0 0 / 8%);
   padding: 0.15em 0.4em;
@@ -198,6 +208,35 @@
 .prose-chat pre code {
   background: none;
   padding: 0;
+  color: inherit;
+  font-size: 0.92em;
+}
+.prose-chat pre code[data-language]::before {
+  content: attr(data-language);
+  display: block;
+  margin-bottom: 0.75rem;
+  color: oklch(0.72 0 0);
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.prose-chat .hljs-keyword,
+.prose-chat .hljs-selector-tag,
+.prose-chat .hljs-title.function_ {
+  color: oklch(0.78 0.16 305);
+}
+.prose-chat .hljs-string,
+.prose-chat .hljs-attr {
+  color: oklch(0.82 0.15 150);
+}
+.prose-chat .hljs-number,
+.prose-chat .hljs-literal {
+  color: oklch(0.82 0.13 80);
+}
+.prose-chat .hljs-comment {
+  color: oklch(0.62 0 0);
 }
 .prose-chat blockquote {
   border-left: 3px solid oklch(0.65 0.2 265);
@@ -211,5 +250,8 @@
 
 .light .prose-chat code { background: oklch(0 0 0 / 6%); }
 .light .prose-chat pre { background: oklch(0.96 0 0); }
+.light .prose-chat pre code { color: oklch(0.2 0 0); }
+.light .prose-chat pre code[data-language]::before { color: oklch(0.45 0 0); }
+.light .prose-chat .hljs-comment { color: oklch(0.5 0 0); }
 .light .prose-chat strong { color: oklch(0.2 0 0); }
-.light .prose-chat blockquote { color: oklch(0.4 0 0); }
+.light .prose-chat blockquote { color: oklch(0.4 0 0); }

frontend/src/components/chat/MessageBubble.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
 import type { ChatMsg } from "@/store/chat-store";
 import { Brain, User, Copy, Check } from "lucide-react";
@@ -11,6 +12,43 @@ interface Props {
   message: ChatMsg;
 }
 
+const markdownComponents: Components = {
+  table: ({ children }) => (
+    <div className="my-3 overflow-x-auto rounded-lg border border-border/70">
+      <table className="min-w-full border-collapse text-left text-sm">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-muted/60 text-foreground">{children}</thead>
+  ),
+  th: ({ children }) => (
+    <th className="border-b border-border/70 px-3 py-2 font-semibold">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="border-b border-border/50 px-3 py-2 align-top">
+      {children}
+    </td>
+  ),
+  pre: ({ children }) => (
+    <pre className="not-prose my-3 overflow-x-auto rounded-lg border border-border/70 bg-zinc-950 p-3 text-sm text-zinc-100">
+      {children}
+    </pre>
+  ),
+  code: ({ className, children, ...props }) => {
+    const language = /language-(\w+)/.exec(className ?? "")?.[1];
+
+    return (
+      <code className={className} data-language={language} {...props}>
+        {children}
+      </code>
+    );
+  },
+};
+
 export default function MessageBubble({ message }: Props) {
   const isUser = message.role === "user";
   const [copied, setCopied] = useState(false);
@@ -71,7 +109,11 @@ export default function MessageBubble({ message }: Props) {
             )}
             <div className={`prose-chat text-sm ${message.content ? "pr-7" : ""}`}>
               {message.content ? (
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeHighlight]}
+                  components={markdownComponents}
+                >
                   {message.content}
                 </ReactMarkdown>
               ) : message.isStreaming ? (