127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
/**
|
|
* @file components/chat/ChatInput.tsx
|
|
* @description Input component for sending chat messages within channels or direct message conversations, handling submission via keyboard events and API requests.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
/**
|
|
* Base properties shared across all ChatInput variations.
|
|
*
|
|
* @interface BaseChatInputProps
|
|
* @property {string} placeholderName - The display name for the channel or recipient used in the input placeholder text.
|
|
* @property {(message: unknown) => void} [onMessageSent] - Optional callback function triggered after a message is successfully sent.
|
|
*/
|
|
interface BaseChatInputProps {
|
|
placeholderName: string;
|
|
onMessageSent?: (message: unknown) => void;
|
|
}
|
|
|
|
/**
|
|
* Union type for ChatInput properties, supporting either a server channel or a direct message conversation context.
|
|
*
|
|
* @type {ChatInputProps}
|
|
*/
|
|
type ChatInputProps = BaseChatInputProps &
|
|
(
|
|
| {
|
|
type: "chat";
|
|
channelId: string;
|
|
serverId: string;
|
|
}
|
|
| {
|
|
type: "dm";
|
|
conversationId: string;
|
|
}
|
|
);
|
|
|
|
/**
|
|
* Renders an input field for writing and submitting chat messages with loading states and keyboard event handlers.
|
|
*
|
|
* @param {ChatInputProps} props - The component props.
|
|
* @returns {JSX.Element} The rendered chat input component.
|
|
*/
|
|
export function ChatInput(props: ChatInputProps) {
|
|
const [content, setContent] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
/**
|
|
* Handles keydown events on the input element to submit messages when pressing Enter without Shift.
|
|
*
|
|
* @async
|
|
* @function handleKeyDown
|
|
* @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event object.
|
|
* @returns {Promise<void>} Resolves when the message submission finishes or fails.
|
|
*/
|
|
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
|
|
if (!content.trim() || isLoading) return;
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const endpoint =
|
|
props.type === "dm"
|
|
? `/api/dm/${props.conversationId}`
|
|
: "/api/messages";
|
|
|
|
const payload =
|
|
props.type === "dm"
|
|
? { content: content.trim() }
|
|
: {
|
|
content: content.trim(),
|
|
channelId: props.channelId,
|
|
serverId: props.serverId,
|
|
};
|
|
|
|
const response = await fetch(endpoint, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Error sending message");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setContent("");
|
|
|
|
if (props.onMessageSent) {
|
|
props.onMessageSent(data);
|
|
} else {
|
|
router.refresh();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error sending the message:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const placeholderText =
|
|
props.type === "dm"
|
|
? `Message @${props.placeholderName}`
|
|
: `Message #${props.placeholderName}`;
|
|
|
|
return (
|
|
<div className="bg-surface border border-surface rounded-lg p-2.5 flex items-center focus-within:ring-1 focus-within:ring-accent transition-all">
|
|
<input
|
|
type="text"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={isLoading}
|
|
placeholder={placeholderText}
|
|
className="w-full bg-transparent outline-none text-foreground placeholder-muted text-sm disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|