feat(swift): voeg chat messages en styling toe (E2.S1-S2)

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>

components/swift/chat/chat-message.tsx

@@ -0,0 +1,76 @@
+'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>
+  );
+}

components/swift/chat/chat-panel.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+/**
+ * Chat Panel (v3.0)
+ *
+ * Chat interface met message list en input.
+ * Toont chat messages met verschillende types (user, assistant, system, error).
+ *
+ * Epic: E2 (Chat Panel & Messages)
+ * Story: E2.S2 (ChatMessage component) - testing
+ */
+
+import { ChatMessage } from './chat-message';
+import { useSwiftStore } from '@/stores/swift-store';
+
+export function ChatPanel() {
+  const chatMessages = useSwiftStore((s) => s.chatMessages);
+
+  // Demo messages for testing E2.S2 (will be removed in E2.S3)
+  const demoMessages = chatMessages.length === 0 ? [
+    {
+      id: '1',
+      type: 'system' as const,
+      content: 'Welkom bij Swift Medical Scribe v3.0',
+      timestamp: new Date(),
+    },
+    {
+      id: '2',
+      type: 'user' as const,
+      content: 'Notitie voor Jan: medicatie gegeven om 14:00',
+      timestamp: new Date(),
+    },
+    {
+      id: '3',
+      type: 'assistant' as const,
+      content: 'Ik begrijp dat je een notitie wilt maken voor Jan over medicatie. Ik open een dagnotitie voor je waarin je dit kunt vastleggen.',
+      timestamp: new Date(),
+    },
+    {
+      id: '4',
+      type: 'error' as const,
+      content: 'Er ging iets mis met de verbinding. Probeer het opnieuw.',
+      timestamp: new Date(),
+    },
+  ] : chatMessages;
+
+  const hasMessages = demoMessages.length > 0;
+
+  return (
+    <div className="h-full flex flex-col bg-white">
+      {/* Chat messages area */}
+      <div className="flex-1 overflow-auto p-6">
+        {hasMessages ? (
+          <div className="flex flex-col space-y-3">
+            {demoMessages.map((message) => (
+              <ChatMessage key={message.id} message={message} showTimestamp />
+            ))}
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <div className="max-w-md text-center text-slate-500">
+              <div className="text-4xl mb-4">💬</div>
+              <h3 className="text-lg font-medium text-slate-700 mb-2">
+                Welkom bij Swift Medical Scribe
+              </h3>
+              <p className="text-sm mb-4">
+                Typ of spreek wat je wilt doen...
+              </p>
+              <div className="text-left text-sm space-y-1 bg-slate-50 rounded-lg p-4">
+                <p className="font-medium text-slate-700 mb-2">Voorbeelden:</p>
+                <p>• &ldquo;Notitie voor Jan: medicatie gegeven&rdquo;</p>
+                <p>• &ldquo;Zoek Marie van den Berg&rdquo;</p>
+                <p>• &ldquo;Maak overdracht voor deze dienst&rdquo;</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Chat input - placeholder */}
+      <div className="border-t border-slate-200 p-4">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Typ of spreek wat je wilt doen..."
+            className="w-full px-4 py-3 pr-12 rounded-lg border border-slate-300 focus:border-brand-600 focus:ring-2 focus:ring-brand-600/20 outline-none text-slate-900 placeholder:text-slate-400"
+            disabled
+          />
+          <button
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400"
+            disabled
+          >
+            🎤
+          </button>
+        </div>
+        <p className="text-xs text-slate-400 mt-2">
+          E2.S2 compleet: ChatMessage component werkend ✓
+        </p>
+      </div>
+    </div>
+  );
+}

stores/swift-store.ts

@@ -17,6 +17,27 @@ export type SwiftIntent =
 
 export type BlockType = Exclude<SwiftIntent, 'unknown'> | 'fallback';
 
+// Chat types (v3.0)
+export type ChatMessageType = 'user' | 'assistant' | 'system' | 'error';
+
+export interface ChatMessage {
+  id: string;
+  type: ChatMessageType;
+  content: string;
+  timestamp: Date;
+  action?: ChatAction; // Optional action attached to assistant messages
+}
+
+export interface ChatAction {
+  intent: SwiftIntent;
+  entities: ExtractedEntities;
+  confidence: number;
+  artifact?: {
+    type: BlockType;
+    prefill: BlockPrefillData;
+  };
+}
+
 // Extracted entities from user input
 export interface ExtractedEntities {
   patientName?: string;
@@ -57,6 +78,11 @@ interface SwiftStore {
   // Recent actions
   recentActions: RecentAction[];
 
+  // Chat state (v3.0)
+  chatMessages: ChatMessage[];
+  isStreaming: boolean;
+  pendingAction: ChatAction | null;
+
   // Context actions
   setActivePatient: (patient: Patient | null) => void;
   setShift: (shift: ShiftType) => void;
@@ -74,6 +100,13 @@ interface SwiftStore {
   // Recent actions
   addRecentAction: (action: Omit<RecentAction, 'id' | 'timestamp'>) => void;
 
+  // Chat actions (v3.0)
+  addChatMessage: (message: Omit<ChatMessage, 'id' | 'timestamp'>) => void;
+  updateLastMessage: (content: string) => void;
+  clearChat: () => void;
+  setStreaming: (streaming: boolean) => void;
+  setPendingAction: (action: ChatAction | null) => void;
+
   // Reset
   reset: () => void;
 }
@@ -97,6 +130,10 @@ const initialState = {
   inputValue: '',
   isVoiceActive: false,
   recentActions: [],
+  // Chat state (v3.0)
+  chatMessages: [],
+  isStreaming: false,
+  pendingAction: null,
 };
 
 // Create the store
@@ -161,6 +198,56 @@ export const useSwiftStore = create<SwiftStore>()(
         );
       },
 
+      // Chat actions (v3.0)
+      addChatMessage: (message) => {
+        const newMessage: ChatMessage = {
+          ...message,
+          id: crypto.randomUUID(),
+          timestamp: new Date(),
+        };
+
+        set(
+          (state) => ({
+            chatMessages: [...state.chatMessages, newMessage],
+          }),
+          false,
+          'addChatMessage'
+        );
+      },
+
+      updateLastMessage: (content) => {
+        set(
+          (state) => {
+            const messages = [...state.chatMessages];
+            if (messages.length > 0) {
+              messages[messages.length - 1] = {
+                ...messages[messages.length - 1],
+                content,
+              };
+            }
+            return { chatMessages: messages };
+          },
+          false,
+          'updateLastMessage'
+        );
+      },
+
+      clearChat: () => {
+        set(
+          {
+            chatMessages: [],
+            isStreaming: false,
+            pendingAction: null,
+          },
+          false,
+          'clearChat'
+        );
+      },
+
+      setStreaming: (streaming) => set({ isStreaming: streaming }, false, 'setStreaming'),
+
+      setPendingAction: (action) => set({ pendingAction: action }, false, 'setPendingAction'),
+
       // Reset
       reset: () => set(initialState, false, 'reset'),
     }),