From d2931a36f89a8918823cff50847cf937f96a6bfc Mon Sep 17 00:00:00 2001 From: colinislit Date: Sat, 27 Dec 2025 14:10:38 +0100 Subject: [PATCH] feat(swift): voeg keyboard shortcuts toe aan chat (E2.S5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit E2.S5 - Keyboard shortcuts (1 SP) - ⌘K / Ctrl+K om chat input te focussen (global) - Escape om input te clearen (local) - Enter om bericht te versturen (al in E2.S4) - Shift+Enter voor nieuwe regel (al in E2.S4) ChatInput Updates: - forwardRef toegevoegd voor ref support - useImperativeHandle voor focus() en clear() methods - ChatInputHandle interface geëxporteerd - Escape key handler (clears input + resets height) - Helper text updated: "⌘K focus • Esc clear • Enter versturen" ChatPanel Updates: - chatInputRef toegevoegd (ChatInputHandle type) - Global keyboard event listener voor ⌘K/Ctrl+K - Cross-platform support (metaKey voor macOS, ctrlKey voor Windows/Linux) - preventDefault() om browser conflicts te voorkomen - Cleanup listener bij unmount Keyboard Shortcuts: - ⌘K / Ctrl+K: Focus chat input (global window listener) - Escape: Clear input (local textarea handler) - Enter: Submit message (E2.S4) - Shift+Enter: New line (E2.S4) Cross-platform: - macOS: ⌘K (e.metaKey) - Windows/Linux: Ctrl+K (e.ctrlKey) - Both: Escape, Enter, Shift+Enter Components Updated: - components/swift/chat/chat-input.tsx (+17 regels) - components/swift/chat/chat-panel.tsx (+15 regels) 🎉 Epic 2 Compleet! 5/5 stories (13 SP / 13 SP = 100%) Epic 2 Deliverables: - E2.S1: Chat state in store (chatMessages, isStreaming, actions) - E2.S2: ChatMessage component (4 message types met styling) - E2.S3: Scrolling (auto-scroll, scroll-lock, scroll-to-bottom button) - E2.S4: ChatInput (textarea, Enter submit, auto-resize) - E2.S5: Keyboard shortcuts (⌘K focus, Escape clear) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- components/swift/chat/chat-input.tsx | 49 +++++++++++++++++++++++----- components/swift/chat/chat-panel.tsx | 30 ++++++++++++++--- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/components/swift/chat/chat-input.tsx b/components/swift/chat/chat-input.tsx index f5f440c..652f5f4 100644 --- a/components/swift/chat/chat-input.tsx +++ b/components/swift/chat/chat-input.tsx @@ -9,7 +9,7 @@ * Story: E2.S4 (ChatInput component) */ -import { useState, useRef, KeyboardEvent, ChangeEvent } from 'react'; +import { useState, useRef, KeyboardEvent, ChangeEvent, forwardRef, useImperativeHandle } from 'react'; import { Send, Mic } from 'lucide-react'; import { useSwiftStore } from '@/stores/swift-store'; import { cn } from '@/lib/utils'; @@ -20,15 +20,33 @@ interface ChatInputProps { disabled?: boolean; } -export function ChatInput({ +export interface ChatInputHandle { + focus: () => void; + clear: () => void; +} + +export const ChatInput = forwardRef(function ChatInput({ placeholder = 'Typ of spreek wat je wilt doen...', onSend, disabled = false, -}: ChatInputProps) { +}, ref) { const [inputValue, setInputValue] = useState(''); const textareaRef = useRef(null); const addChatMessage = useSwiftStore((s) => s.addChatMessage); + // Expose focus and clear methods to parent + useImperativeHandle(ref, () => ({ + focus: () => { + textareaRef.current?.focus(); + }, + clear: () => { + setInputValue(''); + if (textareaRef.current) { + textareaRef.current.style.height = 'auto'; + } + }, + })); + // Handle input change and auto-resize const handleChange = (e: ChangeEvent) => { setInputValue(e.target.value); @@ -74,6 +92,15 @@ export function ChatInput({ handleSubmit(); } + // Escape to clear input + if (e.key === 'Escape') { + e.preventDefault(); + setInputValue(''); + if (textareaRef.current) { + textareaRef.current.style.height = 'auto'; + } + } + // Shift+Enter for new line (default behavior, no need to handle) }; @@ -139,15 +166,19 @@ export function ChatInput({ {/* Helper text */}

+ + ⌘K + {' '} + focus •{' '} + + Esc + {' '} + clear •{' '} Enter {' '} - om te versturen •{' '} - - Shift+Enter - {' '} - voor nieuwe regel + versturen

); -} +}); diff --git a/components/swift/chat/chat-panel.tsx b/components/swift/chat/chat-panel.tsx index b251196..3fa8a98 100644 --- a/components/swift/chat/chat-panel.tsx +++ b/components/swift/chat/chat-panel.tsx @@ -12,7 +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 { ChatInput, ChatInputHandle } from './chat-input'; import { useSwiftStore } from '@/stores/swift-store'; import { cn } from '@/lib/utils'; @@ -23,6 +23,9 @@ export function ChatPanel() { const scrollContainerRef = useRef(null); const messagesEndRef = useRef(null); + // Ref for chat input (for keyboard shortcuts) + const chatInputRef = useRef(null); + // Scroll-lock state const [isScrolledUp, setIsScrolledUp] = useState(false); const [showScrollButton, setShowScrollButton] = useState(false); @@ -61,6 +64,20 @@ export function ChatPanel() { scrollToBottom('auto'); }, [scrollToBottom]); + // Global keyboard shortcuts + useEffect(() => { + const handleGlobalKeyDown = (e: KeyboardEvent) => { + // ⌘K or Ctrl+K to focus chat input + if ((e.metaKey || e.ctrlKey) && e.key === 'k') { + e.preventDefault(); + chatInputRef.current?.focus(); + } + }; + + window.addEventListener('keydown', handleGlobalKeyDown); + return () => window.removeEventListener('keydown', handleGlobalKeyDown); + }, []); + return (
{/* Chat messages area - scrollable */} @@ -118,10 +135,13 @@ export function ChatPanel() {
{/* Chat input */} - { - // Handle send (AI response will be added in E3) - console.log('User sent:', message); - }} /> + { + // Handle send (AI response will be added in E3) + console.log('User sent:', message); + }} + /> ); }