67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import { useState, type KeyboardEvent } from 'react'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Send } from 'lucide-react'
|
|
import type { ChatMode } from '@/types/chat'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ChatInputProps {
|
|
onSend: (message: string) => void
|
|
disabled: boolean
|
|
mode: ChatMode
|
|
placeholder?: string
|
|
}
|
|
|
|
const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' }: ChatInputProps) => {
|
|
const [message, setMessage] = useState('')
|
|
|
|
const handleSend = () => {
|
|
if (message.trim() && !disabled) {
|
|
onSend(message)
|
|
setMessage('')
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleSend()
|
|
}
|
|
}
|
|
|
|
const modeFocusColors = {
|
|
general: 'focus-visible:ring-blue-500',
|
|
strategy: 'focus-visible:ring-purple-500',
|
|
}
|
|
|
|
const modeButtonColors = {
|
|
general: 'bg-blue-500 hover:bg-blue-600',
|
|
strategy: 'bg-purple-500 hover:bg-purple-600',
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'flex-1 bg-slate-700 border-slate-600 text-white placeholder:text-slate-400',
|
|
modeFocusColors[mode]
|
|
)}
|
|
/>
|
|
<Button
|
|
onClick={handleSend}
|
|
disabled={disabled || !message.trim()}
|
|
className={cn('rounded-xl', modeButtonColors[mode])}
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChatInput
|