Spaces:
No application file
No application file
File size: 2,729 Bytes
0cd248c | 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 89 90 91 92 93 94 | "use client"
import type React from "react"
import { useState, useRef, type KeyboardEvent } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Send, Trash2, Paperclip } from "lucide-react"
interface ChatInputProps {
onSend: (message: string, file?: File) => void
isLoading: boolean
onClear: () => void
}
export function ChatInput({ onSend, isLoading, onClear }: ChatInputProps) {
const [message, setMessage] = useState("")
const [file, setFile] = useState<File | null>(null)
const fileInputRef = useRef<HTMLInputElement>(null)
const handleSend = () => {
if (message.trim() || file) {
onSend(message.trim(), file || undefined)
setMessage("")
setFile(null)
}
}
const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault()
handleSend()
}
}
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.target.files?.[0]
if (selectedFile) {
setFile(selectedFile)
}
}
return (
<div className="space-y-2">
{file && (
<div className="flex items-center gap-2 p-2 bg-muted rounded-md">
<Paperclip className="h-4 w-4" />
<span className="text-sm">{file.name}</span>
<Button variant="ghost" size="sm" onClick={() => setFile(null)}>
×
</Button>
</div>
)}
<div className="flex gap-2">
<div className="flex-1 relative">
<Textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="Type your message... (Shift+Enter for new line)"
className="min-h-[60px] resize-none pr-12"
disabled={isLoading}
/>
<input
ref={fileInputRef}
type="file"
className="hidden"
onChange={handleFileSelect}
accept=".txt,.json,.md,.pdf"
/>
<Button
variant="ghost"
size="sm"
className="absolute right-2 top-2 h-8 w-8 p-0"
onClick={() => fileInputRef.current?.click()}
>
<Paperclip className="h-4 w-4" />
</Button>
</div>
<div className="flex flex-col gap-2">
<Button onClick={handleSend} disabled={isLoading || (!message.trim() && !file)} size="sm">
<Send className="h-4 w-4" />
</Button>
<Button variant="outline" onClick={onClear} size="sm">
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</div>
)
}
|