第一次提交

app-instance/frontend/components/chat-workbench/MarkdownContent.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export function MarkdownContent({ content }: { content: string }) {
+  return (
+    <div className="prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          table: ({ children, ...props }) => (
+            <div className="my-3 overflow-x-auto rounded-lg border border-border">
+              <table className="w-full border-collapse text-sm" {...props}>
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children, ...props }) => (
+            <thead className="bg-muted/60" {...props}>
+              {children}
+            </thead>
+          ),
+          th: ({ children, ...props }) => (
+            <th className="px-3 py-2 text-left font-semibold text-foreground border-b border-border" {...props}>
+              {children}
+            </th>
+          ),
+          td: ({ children, ...props }) => (
+            <td className="px-3 py-2 border-b border-border/50" {...props}>
+              {children}
+            </td>
+          ),
+          tr: ({ children, ...props }) => (
+            <tr className="hover:bg-muted/30 transition-colors" {...props}>
+              {children}
+            </tr>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}