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); + }} + /> ); }