feat: improve markdown table styling (#244)

**Summary**
Improves markdown table styling in chat messages by reusing components
from `ui/table.tsx`. This provides consistency with the data
visualization tool.

**Before**
<img width="759" height="385" alt="image"
src="https://github.com/user-attachments/assets/d140af01-57d2-4a1f-951a-c81bbc456bb7"
/>

**After**
<img width="744" height="529" alt="image"
src="https://github.com/user-attachments/assets/567101bd-06f1-40d5-b11c-044997aa4b91"
/>

Author: hakonharnes

src/components/markdown.tsx

@@ -5,6 +5,14 @@ import { PreBlock } from "./pre-block";
 import { isJson, isString, toAny } from "lib/utils";
 import JsonView from "ui/json-view";
 import { LinkIcon } from "lucide-react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "ui/table";
 
 const FadeIn = memo(({ children }: PropsWithChildren) => {
   return <span className="fade-in animate-in duration-1000">{children} </span>;
@@ -21,6 +29,36 @@ export const WordByWordFadeIn = memo(({ children }: PropsWithChildren) => {
 });
 WordByWordFadeIn.displayName = "WordByWordFadeIn";
 const components: Partial<Components> = {
+  table: ({ node, children, ...props }) => {
+    return (
+      <div className="my-4">
+        <Table {...props}>{children}</Table>
+      </div>
+    );
+  },
+  thead: ({ node, children, ...props }) => {
+    return <TableHeader {...props}>{children}</TableHeader>;
+  },
+  tbody: ({ node, children, ...props }) => {
+    return <TableBody {...props}>{children}</TableBody>;
+  },
+  tr: ({ node, children, ...props }) => {
+    return <TableRow {...props}>{children}</TableRow>;
+  },
+  th: ({ node, children, ...props }) => {
+    return (
+      <TableHead {...props}>
+        <WordByWordFadeIn>{children}</WordByWordFadeIn>
+      </TableHead>
+    );
+  },
+  td: ({ node, children, ...props }) => {
+    return (
+      <TableCell {...props}>
+        <WordByWordFadeIn>{children}</WordByWordFadeIn>
+      </TableCell>
+    );
+  },
   code: ({ children }) => {
     return (
       <code className="text-sm rounded-md bg-accent text-primary py-1 px-2 mx-0.5">