e3ff72cd9c
E2.S1 - Store uitbreiding (2 SP) - ChatMessage, ChatAction, ChatMessageType types toegevoegd - chatMessages[], isStreaming, pendingAction state - addChatMessage, updateLastMessage, clearChat, setStreaming actions E2.S2 - ChatMessage component (3 SP) - Herbruikbare ChatMessage component met 4 message types - MESSAGE_STYLES config (user/assistant/system/error) - User: amber bubble rechts, rounded-tr-sm - Assistant: slate bubble links, rounded-tl-sm - System: centered, transparent, italic - Error: red bubble links - Optional timestamp support (NL locale) - Demo messages in ChatPanel voor testing Components Created: - components/swift/chat/chat-message.tsx (77 regels) - components/swift/chat/chat-panel.tsx (102 regels) Store Updated: - stores/swift-store.ts (+87 regels) - Chat state en actions Epic 2 Progress: 2/5 stories compleet (5 SP / 13 SP = 38%) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Chat Message Component (v3.0)
|
|
*
|
|
* Displays individual chat messages with styling per message type.
|
|
* Supports user, assistant, system, and error message types.
|
|
*
|
|
* Epic: E2 (Chat Panel & Messages)
|
|
* Story: E2.S2 (ChatMessage component)
|
|
*/
|
|
|
|
import { format } from 'date-fns';
|
|
import { nl } from 'date-fns/locale';
|
|
import { cn } from '@/lib/utils';
|
|
import type { ChatMessage as ChatMessageType } from '@/stores/swift-store';
|
|
|
|
// Message styling configuration per type
|
|
const MESSAGE_STYLES = {
|
|
user: {
|
|
container: 'self-end bg-amber-50 border-amber-200 text-slate-900',
|
|
borderRadius: 'rounded-2xl rounded-tr-sm',
|
|
maxWidth: 'max-w-[80%]',
|
|
},
|
|
assistant: {
|
|
container: 'self-start bg-slate-100 border-slate-200 text-slate-900',
|
|
borderRadius: 'rounded-2xl rounded-tl-sm',
|
|
maxWidth: 'max-w-[85%]',
|
|
},
|
|
system: {
|
|
container: 'self-center bg-transparent border-transparent text-slate-500 text-sm italic',
|
|
borderRadius: 'rounded-lg',
|
|
maxWidth: 'max-w-[90%]',
|
|
},
|
|
error: {
|
|
container: 'self-start bg-red-50 border-red-200 text-red-900',
|
|
borderRadius: 'rounded-2xl',
|
|
maxWidth: 'max-w-[80%]',
|
|
},
|
|
} as const;
|
|
|
|
interface ChatMessageProps {
|
|
message: ChatMessageType;
|
|
showTimestamp?: boolean;
|
|
}
|
|
|
|
export function ChatMessage({ message, showTimestamp = false }: ChatMessageProps) {
|
|
const styles = MESSAGE_STYLES[message.type];
|
|
|
|
// Don't show border for system messages
|
|
const showBorder = message.type !== 'system';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col px-4 py-2.5 border transition-all',
|
|
styles.container,
|
|
styles.borderRadius,
|
|
styles.maxWidth,
|
|
!showBorder && 'border-none px-0 py-1'
|
|
)}
|
|
>
|
|
{/* Message content */}
|
|
<div className="whitespace-pre-wrap break-words leading-relaxed">
|
|
{message.content}
|
|
</div>
|
|
|
|
{/* Timestamp (optional) */}
|
|
{showTimestamp && message.timestamp && (
|
|
<div className="text-xs text-slate-400 mt-1.5">
|
|
{format(message.timestamp, 'HH:mm', { locale: nl })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|