36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import type { ChatMessageType } from '../../types'
|
|
|
|
interface ChatMessageProps {
|
|
message: ChatMessageType
|
|
}
|
|
|
|
export function ChatMessage({ message }: ChatMessageProps) {
|
|
const isUser = message.role === 'user'
|
|
|
|
return (
|
|
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
|
|
{!isUser && (
|
|
<div className="shrink-0 w-6 h-6 rounded-full bg-accent/20 border border-accent/30 flex items-center justify-center mr-2 mt-0.5">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<circle cx="6" cy="6" r="3" fill="#22d3ee" />
|
|
<circle cx="6" cy="6" r="5.5" stroke="#22d3ee" strokeOpacity="0.4" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`max-w-[80%] px-3 py-2 rounded-lg text-sm leading-relaxed font-body ${
|
|
isUser
|
|
? 'bg-accent/15 text-zinc-100 border border-accent/20'
|
|
: 'bg-zinc-800 text-zinc-200 border border-zinc-700'
|
|
}`}
|
|
>
|
|
{message.content}
|
|
{message.isStreaming && (
|
|
<span className="inline-block w-1 h-3.5 bg-accent ml-0.5 align-text-bottom animate-pulse" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|