Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* ChatInput - Input field for sending messages
*/
import React, { useState, useRef, useEffect } from 'react';
import { Icon } from '@/components/ui/icons';
export interface ChatInputProps {
/** Handler for sending messages */
onSend: (message: string) => void;
/** Whether input is disabled */
disabled?: boolean;
/** Placeholder text */
placeholder?: string;
}
export default function ChatInput({
onSend,
disabled = false,
placeholder = 'Type a message...'}: ChatInputProps) {
const [value, setValue] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
// Focus input on mount
useEffect(() => {
inputRef.current?.focus();
}, []);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const trimmedValue = value.trim();
if (trimmedValue && !disabled) {
onSend(trimmedValue);
setValue('');
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
}
};
return (
<form
onSubmit={handleSubmit}
className="border-t border-gray-200 bg-white p-3"
>
<div className="flex items-center gap-2">
<input
ref={inputRef}
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
disabled={disabled}
className="
flex-1 px-4 py-2
border border-gray-300 rounded-full
text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
disabled:bg-gray-100 disabled:cursor-not-allowed
"
aria-label="Type a message"
/>
<button
type="submit"
disabled={disabled || !value.trim()}
className="
p-2 rounded-full
bg-blue-600 text-white
hover:bg-blue-700
disabled:bg-gray-300 disabled:cursor-not-allowed
transition-colors
"
aria-label="Send message"
>
<Icon name="send" size={20} />
</button>
</div>
</form>
);
}
|