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

2 files changed, 12 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
index b5e89a01..e75886e1 100644
--- a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
+++ b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { ActionButton } from "@/components/ui/action-button";
+import { MarkdownReadonly } from "@/components/ui/markdown/markdown-readonly";
 import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
@@ -52,11 +53,11 @@ function AISummary({
         onClick={() => !isExpanded && setIsExpanded(true)}
       >
         <div className="h-full rounded-lg bg-accent p-2">
-          <p
-            className={`text-sm text-gray-700 dark:text-gray-300 ${!isExpanded && "line-clamp-3"}`}
+          <MarkdownReadonly
+            className={`text-sm ${!isExpanded && "line-clamp-3"}`}
           >
             {summary}
-          </p>
+          </MarkdownReadonly>
           {isExpanded && (
             <span className="flex justify-end gap-2 pt-2">
               <ActionButton
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} />;