51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
// src/chat/components/MessageInput.tsx
|
|
import React, { useState } from "react";
|
|
|
|
interface MessageInputProps {
|
|
activeChannelId: bigint | null;
|
|
activeThreadId: bigint | null;
|
|
isFullyAuthenticated: boolean;
|
|
sendMessageReducer: (args: any) => void;
|
|
}
|
|
|
|
function MessageInput({
|
|
activeChannelId,
|
|
activeThreadId,
|
|
isFullyAuthenticated,
|
|
sendMessageReducer,
|
|
}: MessageInputProps) {
|
|
const [messageText, setMessageText] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!messageText.trim() || !activeChannelId) return;
|
|
|
|
// Call the sendMessage reducer
|
|
sendMessageReducer({
|
|
text: messageText,
|
|
channelId: activeChannelId,
|
|
threadId: activeThreadId,
|
|
});
|
|
setMessageText("");
|
|
};
|
|
|
|
return (
|
|
<div className="chat-input-container">
|
|
<form className="chat-input" onSubmit={handleSubmit}>
|
|
<input
|
|
placeholder={
|
|
isFullyAuthenticated
|
|
? `Message ${activeThreadId ? "in thread..." : "#channel"}`
|
|
: "Log in to chat"
|
|
}
|
|
disabled={!isFullyAuthenticated || !activeChannelId}
|
|
value={messageText}
|
|
onChange={(e) => setMessageText(e.target.value)}
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MessageInput;
|