Files
video-create/web/client/src/components/chat/ChatMessage.tsx
sion123 348cc0c5b9 refactor(web): router-based navigation, light theme, form config
- Replace Zustand activeView with React Router (NavLink + Routes)
- White/light modern theme with indigo accents
- Sidebar with Chinese labels under icons
- ConfigForm with individual form fields (no JSON textareas)
- Account switching with context injection into chat
- Fix duplicate conversation creation with useRef guard
- Asset gallery: smaller 6-column grid with date labels
- All components updated to light color scheme

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-07 03:48:14 +08:00

33 lines
1021 B
TypeScript

import { cn } from '@/lib/utils';
import { renderMarkdown } from '@/lib/markdown';
import type { Message } from '@/types';
export function ChatMessage({ message }: { message: Message }) {
const isUser = message.role === 'user';
const isEmpty = !message.content;
return (
<div className={cn('mb-4 flex', isUser ? 'justify-end' : 'justify-start')}>
<div
className={cn(
'max-w-[80%] rounded-xl px-4 py-2.5',
isUser
? 'bg-indigo-600 text-white'
: 'bg-white text-zinc-700 border border-zinc-200 shadow-sm'
)}
>
{isEmpty ? (
<span className="text-zinc-400 italic text-xs">...</span>
) : isUser ? (
<p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
) : (
<div
className="markdown-body text-sm leading-relaxed"
dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }}
/>
)}
</div>
</div>
);
}