feat: render Markdown in AI chat responses (bold, lists, code)

Added react-markdown to render assistant messages with proper formatting:
- **bold** text renders as bold
- Bullet/numbered lists render correctly
- Inline code renders with monospace background
- User messages stay as plain text

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-15 14:30:33 +01:00
parent 88e8ab0792
commit 7b1a5762d9
3 changed files with 1256 additions and 5 deletions
+1238 -4
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -24,6 +24,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.22.3",
"recharts": "^3.7.0",
"sonner": "^1.4.41",
+17 -1
View File
@@ -1,6 +1,7 @@
import { useState, useRef, useEffect, useCallback } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { MessageSquare, Send, Loader2, X, Plus, Bot, User } from 'lucide-react'
import ReactMarkdown from 'react-markdown'
import {
sendChatMessage,
getChatSessions,
@@ -230,7 +231,22 @@ export default function ChatPanel({ open, onClose, contextType, contextId }: Cha
: { backgroundColor: 'var(--color-bg-surface-hover)', color: 'var(--color-text-content)' }
}
>
{msg.content}
{msg.role === 'assistant' ? (
<ReactMarkdown
components={{
p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
ul: ({ children }) => <ul className="list-disc list-inside mb-1 space-y-0.5">{children}</ul>,
ol: ({ children }) => <ol className="list-decimal list-inside mb-1 space-y-0.5">{children}</ol>,
li: ({ children }) => <li>{children}</li>,
code: ({ children }) => <code className="px-1 py-0.5 rounded text-xs font-mono" style={{ backgroundColor: 'var(--color-bg-muted)' }}>{children}</code>,
}}
>
{msg.content}
</ReactMarkdown>
) : (
msg.content
)}
</div>
<p className="text-[10px] text-content-muted mt-0.5 px-1">
{formatTime(msg.created_at)}