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>
);
}

11
islands/NavigationBar.tsx
View File

@ -1,4 +1,3 @@
// islands/NavigationBar.tsx
import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import {
@ -54,8 +53,8 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
isScrolling.value ? "opacity-30" : "opacity-100"
} ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
>
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg gap-2">
<li>
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg flex flex-nowrap whitespace-nowrap overflow-x-auto">
<li class="mx-1">
<a href="/" class={currentPath === "/" ? "menu-active" : ""}>
<div class="tooltip" data-tip="Home">
<LuHouse class="text-xl" />
@ -63,7 +62,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
</a>
</li>
<li>
<li class="mx-1">
<a
href="/posts"
class={isPostsPath(currentPath) ? "menu-active" : ""}
@ -74,7 +73,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
</a>
</li>
<li>
<li class="mx-1">
<a
href="/projects"
class={currentPath.startsWith("/projects") ? "menu-active" : ""}
@ -85,7 +84,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
</a>
</li>
<li>
<li class="mx-1">
<a
href="/chat"
class={currentPath.startsWith("/chat") ? "menu-active" : ""}

15
routes/chat.tsx
View File

@ -2,14 +2,19 @@ import Chat from "../islands/Chat.tsx";
export default function ChatPage() {
return (
<div class="min-h-screen p-4 sm:p-8">
<h1 class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center">
Chat Room <div className="badge badge-dash badge-primary">Demo</div>
</h1>
<div class="min-h-screen p-4 pb-24">
<div class="flex items-center justify-center mb-6">
<h1 class="text-3xl font-bold text-secondary">Chat Room</h1>
<span class="ml-3 border border-pink-500 text-pink-500 rounded-full px-3 py-1 text-sm">
Demo
</span>
</div>
<div class="max-w-4xl mx-auto">
<Chat />
</div>
<div class="mt-8 text-center text-sm text-gray-500">
<div class="mt-4 text-center text-xs text-gray-500 mb-20">
<p>
This is an ephemeral chat room. Messages are only visible to users
currently online and aren't stored after you leave.