Spaces:
Paused
Paused
File size: 3,437 Bytes
780df80 79ae05b 780df80 08ee506 79ae05b 780df80 79ae05b 780df80 79ae05b 780df80 79ae05b 780df80 |
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 |
"use client";
import { Button } from "@/components/ui/button";
import { AutosizeTextarea } from "@/components/ui/textarea";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useChatContext } from "@/lib/store/ChatContext";
import { Mic, Paperclip, Send, Square, StopCircle } from "lucide-react";
import React, { useState } from "react";
interface MessageInputProps {
onSendMessage: (content: string) => void;
isLoading: boolean;
userInputRef: React.LegacyRef<any>;
onCancel: () => void;
}
// Traditional component that takes props
const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage, isLoading, userInputRef, onCancel }) => {
const [message, setMessage] = useState("");
const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setMessage(e.target.value);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (message.trim() && !isLoading) {
onSendMessage(message);
setMessage("");
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
}
};
return (
<div className="p-4 absolute bottom-0 left-0 right-0 bg-transparent mb-4">
<form onSubmit={handleSubmit} className="max-w-4xl mx-auto">
<div className="relative flex items-center bg-background shadow-lg rounded-[2rem] border overflow-hidden h-full">
<AutosizeTextarea placeholder="Ask a research question..." maxHeight={500} minHeight={52} className="pr-36 pl-6 py-4 font-medium border-none h-auto resize-none" value={message} onChange={handleMessageChange} onKeyDown={handleKeyDown} disabled={isLoading} rows={1} autoFocus ref={userInputRef} />
<div className="absolute right-3 flex items-center gap-2 h-full">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="button" size="icon" variant="ghost" className="h-9 w-9" disabled={isLoading}>
<Paperclip className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Attach files (coming soon)</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="button" size="icon" variant="ghost" className="h-9 w-9" disabled={isLoading}>
<Mic className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Voice input (coming soon)</TooltipContent>
</Tooltip>
</TooltipProvider>
{isLoading && onCancel ? (
<Button type="button" size="icon" variant="ghost" className="h-9 w-9 rounded-full" onClick={onCancel}>
<Square className="h-4 w-4" />
<span className="sr-only">Cancel</span>
</Button>
) : (
<Button type="submit" size="icon" className="h-9 w-9 rounded-full" disabled={isLoading || !message.trim()}>
<Send className="h-4 w-4" />
<span className="sr-only">Send message</span>
</Button>
)}
</div>
</div>
</form>
</div>
);
};
export default MessageInput;
|