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:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user