feat(web): render AI summary in markdown (#1869)

* feat: wrap bookmark summary with MarkdownReadonly component to render Markdown properly.

* fix: hydration errors because of the markdown component

1 files changed, 8 insertions, 2 deletions

diff --git a/apps/web/components/ui/markdown/markdown-readonly.tsx b/apps/web/components/ui/markdown/markdown-readonly.tsx
index b945b7ab..3c6daf31 100644
--- a/apps/web/components/ui/markdown/markdown-readonly.tsx
+++ b/apps/web/components/ui/markdown/markdown-readonly.tsx
@@ -22,11 +22,17 @@ function PreWithCopyBtn({ className, ...props }: React.ComponentProps<"pre">) {
   );
 }
 
-export function MarkdownReadonly({ children: markdown }: { children: string }) {
+export function MarkdownReadonly({
+  children: markdown,
+  className,
+}: {
+  children: string;
+  className?: string;
+}) {
   return (
     <Markdown
       remarkPlugins={[remarkGfm, remarkBreaks]}
-      className="prose dark:prose-invert"
+      className={cn("prose dark:prose-invert", className)}
       components={{
         pre({ ...props }) {
           return <PreWithCopyBtn {...props} />;