88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Loader2, Send } from "lucide-react";
|
|
import { type KeyboardEvent, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useChatTyping } from "@/lib/hooks/use-chat";
|
|
import { useSocket } from "@/lib/hooks/use-socket";
|
|
|
|
interface MessageInputProps {
|
|
onSend: (content: string) => Promise<void>;
|
|
isSending: boolean;
|
|
disabled?: boolean;
|
|
chatId: string | null;
|
|
}
|
|
|
|
export function MessageInput({
|
|
onSend,
|
|
isSending,
|
|
disabled = false,
|
|
chatId,
|
|
}: MessageInputProps) {
|
|
const [content, setContent] = useState("");
|
|
const { socket, isConnected } = useSocket();
|
|
const { handleTypingStart, handleTypingStop } = useChatTyping(
|
|
socket,
|
|
isConnected,
|
|
chatId,
|
|
);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!content.trim() || isSending || disabled) return;
|
|
|
|
const messageContent = content.trim();
|
|
setContent("");
|
|
handleTypingStop();
|
|
await onSend(messageContent);
|
|
};
|
|
|
|
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
};
|
|
|
|
const handleChange = (value: string) => {
|
|
setContent(value);
|
|
|
|
if (value.trim().length > 0) {
|
|
handleTypingStart();
|
|
} else {
|
|
handleTypingStop();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="border-t p-4">
|
|
<div className="flex items-end gap-2">
|
|
<Textarea
|
|
value={content}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Digite sua mensagem... (Enter para enviar, Shift+Enter para nova linha)"
|
|
className="min-h-[60px] max-h-[120px] resize-none"
|
|
disabled={isSending || disabled}
|
|
rows={2}
|
|
/>
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={!content.trim() || isSending || disabled}
|
|
size="icon"
|
|
className="h-[60px] w-[60px] flex-shrink-0"
|
|
>
|
|
{isSending ? (
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|
) : (
|
|
<Send className="h-5 w-5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Máximo 1000 caracteres
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|