52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useCallback, type KeyboardEvent } from 'react';
|
||
|
|
|
||
|
|
interface ChatInputProps {
|
||
|
|
onSend: (text: string) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||
|
|
const [text, setText] = useState('');
|
||
|
|
|
||
|
|
const handleSend = useCallback(() => {
|
||
|
|
if (!text.trim() || disabled) return;
|
||
|
|
onSend(text.trim());
|
||
|
|
setText('');
|
||
|
|
}, [text, disabled, onSend]);
|
||
|
|
|
||
|
|
const handleKeyDown = useCallback(
|
||
|
|
(e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||
|
|
e.preventDefault();
|
||
|
|
handleSend();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[handleSend]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex-1 flex gap-2" data-testid="chat-input-container">
|
||
|
|
<textarea
|
||
|
|
value={text}
|
||
|
|
onChange={(e) => setText(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
disabled={disabled}
|
||
|
|
placeholder="Nachricht an Copilot..."
|
||
|
|
className="flex-1 border border-gray-300 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
|
|
rows={1}
|
||
|
|
data-testid="chat-input"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
onClick={handleSend}
|
||
|
|
disabled={disabled || !text.trim()}
|
||
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
data-testid="send-button"
|
||
|
|
>
|
||
|
|
Senden
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|