From 8f6f24f7578c58036be972d2255f685b1fdc6a3f Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Sat, 27 Dec 2025 14:06:38 +0100
Subject: [PATCH] feat(swift): voeg chat input met keyboard shortcuts toe
 (E2.S4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

E2.S4 - ChatInput component (2 SP)
- Textarea met multi-line support en auto-resize
- Enter to submit functionaliteit
- Shift+Enter voor nieuwe regel
- Integration met store (addChatMessage)
- Send en Mic buttons (Lucide icons)
- Helper text met keyboard shortcuts

Input Features:
- Auto-resize textarea (max 8 lines / 128px)
- Focus management (auto-focus na submit)
- Disabled state support
- Brand colors voor focus/hover states
- Placeholder: "Typ of spreek wat je wilt doen..."

Keyboard Shortcuts:
- Enter: verstuur bericht (preventDefault als niet Shift)
- Shift+Enter: nieuwe regel (default textarea behavior)
- Auto-clear input na submit

UI Components:
- Send button (rechts, alleen enabled met content)
- Mic button placeholder (voor E5.S3 voice input)
- Helper text met <kbd> tags voor shortcuts
- Smooth transitions en hover effects

ChatPanel Integration:
- ChatInput component vervangen placeholder
- Demo messages verwijderd (nu echte chatMessages uit store)
- Auto-scroll werkt met nieuwe user messages

Components Created:
- components/swift/chat/chat-input.tsx (153 regels)

Components Updated:
- components/swift/chat/chat-panel.tsx (-108 demo messages, +ChatInput)

Epic 2 Progress: 4/5 stories compleet (12 SP / 13 SP = 92%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/swift/chat/chat-input.tsx | 153 +++++++++++++++++++++++++++
 components/swift/chat/chat-panel.tsx | 108 ++-----------------
 2 files changed, 162 insertions(+), 99 deletions(-)
 create mode 100644 components/swift/chat/chat-input.tsx

diff --git a/components/swift/chat/chat-input.tsx b/components/swift/chat/chat-input.tsx
new file mode 100644
index 0000000..f5f440c
--- /dev/null
+++ b/components/swift/chat/chat-input.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+/**
+ * Chat Input Component (v3.0)
+ *
+ * Text input onderaan chat panel met Enter to submit en Shift+Enter voor nieuwe regel.
+ *
+ * Epic: E2 (Chat Panel & Messages)
+ * Story: E2.S4 (ChatInput component)
+ */
+
+import { useState, useRef, KeyboardEvent, ChangeEvent } from 'react';
+import { Send, Mic } from 'lucide-react';
+import { useSwiftStore } from '@/stores/swift-store';
+import { cn } from '@/lib/utils';
+
+interface ChatInputProps {
+  placeholder?: string;
+  onSend?: (message: string) => void;
+  disabled?: boolean;
+}
+
+export function ChatInput({
+  placeholder = 'Typ of spreek wat je wilt doen...',
+  onSend,
+  disabled = false,
+}: ChatInputProps) {
+  const [inputValue, setInputValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const addChatMessage = useSwiftStore((s) => s.addChatMessage);
+
+  // Handle input change and auto-resize
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+
+    // Auto-resize textarea
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  };
+
+  // Handle submit
+  const handleSubmit = () => {
+    const trimmedValue = inputValue.trim();
+    if (!trimmedValue || disabled) return;
+
+    // Add user message to store
+    addChatMessage({
+      type: 'user',
+      content: trimmedValue,
+    });
+
+    // Call optional onSend callback
+    onSend?.(trimmedValue);
+
+    // Clear input
+    setInputValue('');
+
+    // Reset textarea height
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+
+    // Focus back on textarea
+    textareaRef.current?.focus();
+  };
+
+  // Handle keyboard shortcuts
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Enter to submit (unless Shift is pressed)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+
+    // Shift+Enter for new line (default behavior, no need to handle)
+  };
+
+  return (
+    <div className="border-t border-slate-200 p-4 bg-white">
+      <div className="relative flex items-end gap-2">
+        {/* Textarea input */}
+        <textarea
+          ref={textareaRef}
+          value={inputValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className={cn(
+            'flex-1 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 resize-none',
+            'text-slate-900 placeholder:text-slate-400',
+            'max-h-32 overflow-y-auto',
+            'transition-colors',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          style={{ minHeight: '48px' }}
+        />
+
+        {/* Voice input button (placeholder for now) */}
+        <button
+          type="button"
+          className={cn(
+            'absolute right-12 bottom-3',
+            'text-slate-400 hover:text-slate-600',
+            'transition-colors p-1.5 rounded-md hover:bg-slate-100',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          disabled={disabled}
+          aria-label="Spraak invoer"
+          title="Spraak invoer (komt in E5.S3)"
+        >
+          <Mic className="w-5 h-5" />
+        </button>
+
+        {/* Send button */}
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={disabled || !inputValue.trim()}
+          className={cn(
+            'absolute right-3 bottom-3',
+            'text-brand-600 hover:text-brand-700',
+            'transition-all p-1.5 rounded-md',
+            'hover:bg-brand-50 active:scale-95',
+            (!inputValue.trim() || disabled) && 'opacity-30 cursor-not-allowed'
+          )}
+          aria-label="Verstuur bericht"
+          title="Verstuur (Enter)"
+        >
+          <Send className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Helper text */}
+      <p className="text-xs text-slate-400 mt-2">
+        <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
+          Enter
+        </kbd>{' '}
+        om te versturen •{' '}
+        <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
+          Shift+Enter
+        </kbd>{' '}
+        voor nieuwe regel
+      </p>
+    </div>
+  );
+}
diff --git a/components/swift/chat/chat-panel.tsx b/components/swift/chat/chat-panel.tsx
index ce4fcae..b251196 100644
--- a/components/swift/chat/chat-panel.tsx
+++ b/components/swift/chat/chat-panel.tsx
@@ -12,6 +12,7 @@
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { ArrowDown } from 'lucide-react';
 import { ChatMessage } from './chat-message';
+import { ChatInput } from './chat-input';
 import { useSwiftStore } from '@/stores/swift-store';
 import { cn } from '@/lib/utils';
 
@@ -26,83 +27,7 @@ export function ChatPanel() {
   const [isScrolledUp, setIsScrolledUp] = useState(false);
   const [showScrollButton, setShowScrollButton] = useState(false);
 
-  // Demo messages for testing scrolling behavior (will be removed when chat input is implemented)
-  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: 'Hoi, ik wil een notitie maken',
-      timestamp: new Date(),
-    },
-    {
-      id: '3',
-      type: 'assistant' as const,
-      content: 'Natuurlijk! Voor welke patiënt wil je een notitie maken?',
-      timestamp: new Date(),
-    },
-    {
-      id: '4',
-      type: 'user' as const,
-      content: 'Notitie voor Jan: medicatie gegeven om 14:00',
-      timestamp: new Date(),
-    },
-    {
-      id: '5',
-      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: '6',
-      type: 'user' as const,
-      content: 'Zoek Marie van den Berg',
-      timestamp: new Date(),
-    },
-    {
-      id: '7',
-      type: 'assistant' as const,
-      content: 'Ik zoek Marie van den Berg voor je op in het systeem.',
-      timestamp: new Date(),
-    },
-    {
-      id: '8',
-      type: 'user' as const,
-      content: 'Maak overdracht voor deze dienst',
-      timestamp: new Date(),
-    },
-    {
-      id: '9',
-      type: 'assistant' as const,
-      content: 'Ik maak een overdracht voor je. Welke dienst bedoel je precies? Nacht, ochtend, middag of avond?',
-      timestamp: new Date(),
-    },
-    {
-      id: '10',
-      type: 'user' as const,
-      content: 'Avonddienst',
-      timestamp: new Date(),
-    },
-    {
-      id: '11',
-      type: 'assistant' as const,
-      content: 'Prima! Ik open een overdracht voor de avonddienst. Je kunt hier alle relevante informatie voor de overdracht invullen.',
-      timestamp: new Date(),
-    },
-    {
-      id: '12',
-      type: 'system' as const,
-      content: 'Dit is een lange conversatie om scrolling te testen',
-      timestamp: new Date(),
-    },
-  ] : chatMessages;
-
-  const hasMessages = demoMessages.length > 0;
+  const hasMessages = chatMessages.length > 0;
 
   // Scroll to bottom function
   const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
@@ -129,7 +54,7 @@ export function ChatPanel() {
     if (!isScrolledUp && hasMessages) {
       scrollToBottom('smooth');
     }
-  }, [demoMessages.length, isScrolledUp, hasMessages, scrollToBottom]);
+  }, [chatMessages.length, isScrolledUp, hasMessages, scrollToBottom]);
 
   // Initial scroll to bottom on mount
   useEffect(() => {
@@ -146,7 +71,7 @@ export function ChatPanel() {
       >
         {hasMessages ? (
           <div className="flex flex-col space-y-3">
-            {demoMessages.map((message) => (
+            {chatMessages.map((message) => (
               <ChatMessage key={message.id} message={message} showTimestamp />
             ))}
             {/* Invisible element to scroll to */}
@@ -192,26 +117,11 @@ export function ChatPanel() {
         )}
       </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.S3 in progress: Auto-scroll en scroll-lock werkend ✓
-        </p>
-      </div>
+      {/* Chat input */}
+      <ChatInput onSend={(message) => {
+        // Handle send (AI response will be added in E3)
+        console.log('User sent:', message);
+      }} />
     </div>
   );
 }