2023-06-11 00:59:16 +03:00
|
|
|
"use client";
|
|
|
|
import { ChatMessage } from "@/app/chat/types";
|
|
|
|
import { UUID } from "crypto";
|
|
|
|
import { Dispatch, SetStateAction } from "react";
|
|
|
|
import Button from "../../../../components/ui/Button";
|
|
|
|
import { ConfigButton } from "./ConfigButton";
|
|
|
|
import { MicButton } from "./MicButton";
|
|
|
|
|
|
|
|
interface ChatInputProps {
|
|
|
|
isSendingMessage: boolean;
|
|
|
|
sendMessage: (chatId?: UUID, msg?: ChatMessage) => Promise<void>;
|
|
|
|
setMessage: Dispatch<SetStateAction<ChatMessage>>;
|
|
|
|
message: ChatMessage;
|
|
|
|
chatId?: UUID;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ChatInput({
|
|
|
|
chatId,
|
|
|
|
isSendingMessage,
|
|
|
|
message,
|
|
|
|
sendMessage,
|
|
|
|
setMessage,
|
|
|
|
}: ChatInputProps) {
|
|
|
|
return (
|
|
|
|
<form
|
|
|
|
onSubmit={(e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
if (!isSendingMessage) sendMessage(chatId);
|
|
|
|
}}
|
2023-06-11 11:44:23 +03:00
|
|
|
className="sticky bottom-0 p-5 bg-white dark:bg-black rounded-t-md border border-black/10 dark:border-white/25 border-b-0 w-full max-w-3xl flex items-center justify-center gap-2 z-20"
|
2023-06-11 00:59:16 +03:00
|
|
|
>
|
|
|
|
<textarea
|
|
|
|
autoFocus
|
|
|
|
value={message[1]}
|
|
|
|
onChange={(e) => setMessage((msg) => [msg[0], e.target.value])}
|
|
|
|
onKeyDown={(e) => {
|
|
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
|
|
e.preventDefault(); // Prevents the newline from being entered in the textarea
|
|
|
|
if (!isSendingMessage) sendMessage(chatId); // Call the submit function here
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
|
|
|
|
placeholder="Begin conversation here..."
|
|
|
|
/>
|
|
|
|
<Button type="submit" isLoading={isSendingMessage}>
|
|
|
|
{isSendingMessage ? "Thinking..." : "Chat"}
|
|
|
|
</Button>
|
|
|
|
<MicButton />
|
|
|
|
<ConfigButton />
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|