Use react markdown component and sb-prose styles for AI chat modal (#380

)

packages/web/package.json

@@ -31,6 +31,7 @@
     "diff": "^7.0.0",
     "lucide-react": "^0.439.0",
     "marked": "catalog:",
+    "marked-react": "^2.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",

packages/web/src/components/apps/markdown.tsx

@@ -0,0 +1,10 @@
+import MarkdownReact from 'marked-react';
+import { cn } from '@srcbook/components';
+
+export default function Markdown(props: { source: string; className?: string }) {
+  return (
+    <div className={cn('sb-prose', props.className)}>
+      <MarkdownReact gfm>{props.source}</MarkdownReact>
+    </div>
+  );
+}

packages/web/src/components/chat.tsx

@@ -1,5 +1,5 @@
 import { Button, cn, ScrollArea } from '@srcbook/components';
-import { Markdown } from '../components/markdown';
+import Markdown from './apps/markdown.js';
 import { diffFiles } from './apps/lib/diff.js';
 import TextareaAutosize from 'react-textarea-autosize';
 import { ArrowUp, X, Paperclip, History, LoaderCircle, ViewIcon, Undo2Icon } from 'lucide-react';
@@ -90,7 +90,7 @@ function Chat({
                 </div>
               );
             } else if (message.type === 'plan') {
-              return <Markdown key={index}>{message.content}</Markdown>;
+              return <Markdown key={index} source={message.content} />;
             } else if (message.type === 'diff') {
               return <DiffBox key={index} files={message.diff} app={app} />;
             }