refactor: integrate custom table components into markdown rendering in chat

This commit is contained in:
Anish Sarkar 2026-03-24 23:42:12 +05:30
parent 15a81dbf41
commit 06b242c8f1

View file

@ -20,6 +20,7 @@ import remarkMath from "remark-math";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import { InlineCitation, UrlCitation } from "@/components/assistant-ui/inline-citation"; import { InlineCitation, UrlCitation } from "@/components/assistant-ui/inline-citation";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function stripThemeBackgrounds( function stripThemeBackgrounds(
@ -370,43 +371,40 @@ const defaultComponents = memoizeMarkdownComponents({
<hr className={cn("aui-md-hr my-5 border-b", className)} {...props} /> <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
), ),
table: ({ className, ...props }) => ( table: ({ className, ...props }) => (
<div className="aui-md-table-wrapper my-5 w-full overflow-x-auto"> <div className="aui-md-table-wrapper my-5 overflow-hidden rounded-2xl border">
<table <Table className={cn("aui-md-table", className)} {...props} />
className={cn("aui-md-table w-full min-w-max border-separate border-spacing-0", className)}
{...props}
/>
</div> </div>
), ),
thead: ({ className, ...props }) => (
<TableHeader className={cn("aui-md-thead", className)} {...props} />
),
tbody: ({ className, ...props }) => (
<TableBody className={cn("aui-md-tbody", className)} {...props} />
),
th: ({ className, children, ...props }) => ( th: ({ className, children, ...props }) => (
<th <TableHead
className={cn( className={cn(
"aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right", "aui-md-th bg-muted/50 whitespace-normal [[align=center]]:text-center [[align=right]]:text-right",
className className
)} )}
{...props} {...props}
> >
{processChildrenWithCitations(children)} {processChildrenWithCitations(children)}
</th> </TableHead>
), ),
td: ({ className, children, ...props }) => ( td: ({ className, children, ...props }) => (
<td <TableCell
className={cn( className={cn(
"aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right", "aui-md-td whitespace-normal [[align=center]]:text-center [[align=right]]:text-right",
className className
)} )}
{...props} {...props}
> >
{processChildrenWithCitations(children)} {processChildrenWithCitations(children)}
</td> </TableCell>
), ),
tr: ({ className, ...props }) => ( tr: ({ className, ...props }) => (
<tr <TableRow className={cn("aui-md-tr", className)} {...props} />
className={cn(
"aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
className
)}
{...props}
/>
), ),
sup: ({ className, ...props }) => ( sup: ({ className, ...props }) => (
<sup className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)} {...props} /> <sup className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)} {...props} />