Spaces:
Running
Running
File size: 2,064 Bytes
1904e4c |
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 |
import React, { RefObject } from "react";
import { CornerDownLeft } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
interface ChatInputAreaProps {
inputRef: RefObject<HTMLInputElement>;
inputValue: string;
setInputValue: (value: string) => void;
handleSendMessage: (e?: React.FormEvent) => void;
isLoading: boolean;
}
export const ChatInputArea: React.FC<ChatInputAreaProps> = ({
inputRef,
inputValue,
setInputValue,
handleSendMessage,
isLoading
}) => {
return (
<div className="absolute bottom-0 left-0 right-0 p-4 bg-background/80 dark:bg-background/50 backdrop-blur-md border-t border-border/30">
<div className="max-w-3xl mx-auto">
<form onSubmit={handleSendMessage} className="relative">
<div className="relative">
<Input
ref={inputRef}
type="text"
placeholder="Message Insight AI..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
className="pr-20 py-6 text-base bg-background/50 border border-border/50 focus-visible:ring-1 focus-visible:ring-primary/50 rounded-xl"
disabled={isLoading}
/>
<div className="absolute right-2 top-1/2 -translate-y-1/2">
<Button
type="submit"
size="icon"
className="rounded-lg"
disabled={isLoading || !inputValue.trim()}
>
{isLoading ? (
<div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
) : (
<CornerDownLeft className="h-4 w-4" />
)}
</Button>
</div>
</div>
<div className="mt-2 text-center text-xs text-muted-foreground">
Insight AI may produce inaccurate information. Verify important information.
</div>
</form>
</div>
</div>
);
};
|