atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat changes

Browse Source
This commit is contained in:
Atridad Lahiji
2025-04-27 10:53:03 -06:00
parent 871000c333
commit ae10c14cc8
3 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
islands/Chat.tsx
View File

@ -36,6 +36,7 @@ export default function Chat() {
} else {
setMessages((prev) => [...prev, data]);
// Auto-scroll to bottom on new message
const chatBox = document.getElementById("chat-messages");
if (chatBox) {
setTimeout(() => {
@ -73,19 +74,21 @@ export default function Chat() {
};
return (
<div class="w-full max-w-4xl mx-auto bg-dark rounded-lg shadow-lg overflow-hidden border border-gray-800">
<div class="w-full max-w-4xl mx-auto bg-[#1E2127] rounded-lg shadow-lg overflow-hidden border border-gray-800 flex flex-col h-[calc(100vh-180px)] md:h-[600px]">
{/* Header */}
<div class="p-4 bg-secondary text-white">
<h2 class="text-xl font-bold">Live Chat</h2>
<p class="text-sm opacity-80">
<h2 class="text-2xl font-bold">Live Chat</h2>
<p class="text-sm">
{isConnected
? `${userCount} online • Messages are not saved`
: "Connecting..."}
</p>
</div>
{/* Chat messages area */}
<div
id="chat-messages"
class="p-4 h-96 overflow-y-auto bg-dark text-gray-300"
class="flex-grow overflow-y-auto bg-[#1E2127] text-gray-300 p-4"
>
{messages.length === 0
? (
@ -97,7 +100,7 @@ export default function Chat() {
messages.map((msg, i) => (
<div
key={i}
class={`mb-3 max-w-md ${
class={`mb-3 max-w-[85%] ${
msg.sender === username ? "ml-auto" : ""
}`}
>
@ -112,44 +115,44 @@ export default function Chat() {
<span class="font-bold text-sm">
{msg.sender === username ? "You" : msg.sender}
</span>
<span class="text-xs opacity-70">
<span class="text-xs opacity-70 ml-2">
{new Date(msg.timestamp).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</span>
</div>
<p>{msg.text}</p>
<p class="break-words">{msg.text}</p>
</div>
</div>
))
)}
</div>
<form onSubmit={sendMessage} class="p-4 border-t border-gray-800">
<div class="flex">
{/* Input area */}
<div class="p-3 border-t border-gray-800 pb-6 md:pb-3">
<form onSubmit={sendMessage} class="relative">
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.currentTarget.value)}
placeholder="Type your message..."
class="flex-1 px-4 py-3 bg-gray-800 text-white rounded-l-lg border-0 focus:outline-none focus:ring-2 focus:ring-secondary placeholder-gray-500"
class="w-full pl-4 pr-20 py-3 bg-gray-800 text-white rounded-lg border-0 focus:outline-none focus:ring-1 focus:ring-secondary placeholder-gray-500"
disabled={!isConnected}
maxLength={2000}
/>
<button
type="submit"
class="bg-secondary text-white px-8 py-3 rounded-r-lg hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-secondary font-medium"
class="absolute right-0 top-0 h-full bg-secondary text-white px-5 rounded-r-lg font-medium"
disabled={!isConnected || !newMessage.trim()}
>
Send
</button>
</div>
</form>
<p class="mt-2 text-xs text-gray-500">
You are chatting as{" "}
<span class="font-medium text-gray-400">{username}</span>
</p>
</form>
</div>
</div>
);
}