From 9b8e83d2e2c57fde0d61f28865862aabac5851fa Mon Sep 17 00:00:00 2001 From: Izan Gil <66965250+SrIzan10@users.noreply.github.com> Date: Wed, 2 Jul 2025 13:16:47 +0200 Subject: [PATCH] feat: add message history --- apps/chat/src/index.ts | 45 ++++++++++++++----- .../components/app/ChatPanel/ChatPanel.tsx | 33 +++++++------- .../src/components/app/ChatPanel/message.tsx | 18 ++++++++ apps/web/src/lib/auth/actions.ts | 2 +- apps/web/src/lib/auth/validate.ts | 2 +- .../src/lib/instrumentation/writeSessions.ts | 2 +- 6 files changed, 70 insertions(+), 32 deletions(-) create mode 100644 apps/web/src/components/app/ChatPanel/message.tsx diff --git a/apps/chat/src/index.ts b/apps/chat/src/index.ts index e42bb6d..6df82d7 100644 --- a/apps/chat/src/index.ts +++ b/apps/chat/src/index.ts @@ -5,8 +5,10 @@ import { readFile } from 'node:fs/promises'; import { lucia } from '@hctv/auth'; import { getCookie } from 'hono/cookie'; import { getPersonalChannel } from './utils/personalChannel.js'; -import { prisma } from '@hctv/db'; +import { getRedisConnection, prisma } from '@hctv/db'; +const MESSAGE_HISTORY_SIZE = 15; +const MESSAGE_TTL = 60 * 60 * 24; const threed = await readFile('./src/3d.txt', 'utf-8'); const app = new Hono(); @@ -54,6 +56,19 @@ app.get( ws.raw.personalChannel = personalChannel; } + const redis = getRedisConnection(); + const channelKey = `chat:history:${username}`; + const messages = await redis.zrange(channelKey, 0, MESSAGE_HISTORY_SIZE - 1); + + if (messages.length > 0) { + ws.send( + JSON.stringify({ + type: 'history', + messages: messages.map((msg) => JSON.parse(msg)), + }) + ); + } + await prisma.streamInfo.update({ where: { username, @@ -98,19 +113,27 @@ app.get( return; } if (msg.type === 'message') { + const msgObj = { + user: { + id: ws.user.id, + username: ws.personalChannel.name, + pfpUrl: ws.user.pfpUrl, + }, + message: msg.message, + }; + const msgStr = JSON.stringify(msgObj); + + const redis = getRedisConnection(); + const channelKey = `chat:history:${ws.targetUsername}`; + + redis.zadd(channelKey, Date.now(), msgStr); + redis.zremrangebyrank(channelKey, 0, -MESSAGE_HISTORY_SIZE - 1); + redis.expire(channelKey, MESSAGE_TTL); + ws.wss.clients.forEach((c) => { const client = c as ModifiedWebSocket; if (client.readyState === client.OPEN && client.targetUsername === ws.targetUsername) { - c.send( - JSON.stringify({ - user: { - id: ws.user.id, - username: ws.personalChannel.name, - pfpUrl: ws.user.pfpUrl, - }, - message: msg.message, - }) - ); + c.send(msgStr); } }); } diff --git a/apps/web/src/components/app/ChatPanel/ChatPanel.tsx b/apps/web/src/components/app/ChatPanel/ChatPanel.tsx index a819832..f88f7d5 100644 --- a/apps/web/src/components/app/ChatPanel/ChatPanel.tsx +++ b/apps/web/src/components/app/ChatPanel/ChatPanel.tsx @@ -5,6 +5,7 @@ import { Send } from 'lucide-react'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { useParams } from 'next/navigation'; +import { Message } from './message'; export default function ChatPanel() { const { username } = useParams(); @@ -28,7 +29,12 @@ export default function ChatPanel() { socket.onmessage = (event) => { try { const data = JSON.parse(event.data); - if (data.type === 'ping' || data.type === 'pong' || !data.user) return; + if (data.type === 'ping' || data.type === 'pong') return; + if (data.type === 'history') { + const messages = data.messages as ChatMessage[]; + setChatMessages((prev) => [...prev, ...messages, { message: 'Welcome to the chat!', type: 'systemMsg' }]); + return; + } setChatMessages((prev) => [...prev, data]); } catch (e) { console.log('Received message confirmation:', event.data); @@ -86,17 +92,7 @@ export default function ChatPanel() {
{chatMessages.map((msg, i) => ( -
-
-
{msg.user.username}
-
-
- {msg.message} -
-
+ ))}
@@ -122,13 +118,14 @@ export default function ChatPanel() { ); } -interface User { +export interface ChatMessage { + user?: User; + message: string; + type: 'message' | 'systemMsg'; +} + +export interface User { id: string; username: string; pfpUrl: string; } - -interface ChatMessage { - user: User; - message: string; -} diff --git a/apps/web/src/components/app/ChatPanel/message.tsx b/apps/web/src/components/app/ChatPanel/message.tsx new file mode 100644 index 0000000..b6b5735 --- /dev/null +++ b/apps/web/src/components/app/ChatPanel/message.tsx @@ -0,0 +1,18 @@ +import { cn } from "@/lib/utils"; +import { ChatMessage } from "./ChatPanel"; + +export function Message({ user, message, type }: ChatMessage) { + return ( +
+
+

+ {user?.username} + {message} +

+
+
+ ); +} \ No newline at end of file diff --git a/apps/web/src/lib/auth/actions.ts b/apps/web/src/lib/auth/actions.ts index 53f70dd..0174046 100644 --- a/apps/web/src/lib/auth/actions.ts +++ b/apps/web/src/lib/auth/actions.ts @@ -4,7 +4,7 @@ import { cookies } from 'next/headers'; import { lucia } from '@hctv/auth'; import { validateRequest } from '@/lib/auth/validate'; import { redirect } from 'next/navigation'; -import { getRedisConnection } from '../services/redis'; +import { getRedisConnection } from '@hctv/db'; export async function logout() { const { session } = await validateRequest(); diff --git a/apps/web/src/lib/auth/validate.ts b/apps/web/src/lib/auth/validate.ts index 9f77e7c..1033c8a 100644 --- a/apps/web/src/lib/auth/validate.ts +++ b/apps/web/src/lib/auth/validate.ts @@ -1,7 +1,7 @@ import { cookies } from "next/headers"; import { cache } from "react"; import { lucia } from '@hctv/auth'; -import { getRedisConnection } from "../services/redis"; +import { getRedisConnection } from "@hctv/db"; export const validateRequest = cache(async () => { const sessionId = (await cookies()).get(lucia.sessionCookieName)?.value ?? null; diff --git a/apps/web/src/lib/instrumentation/writeSessions.ts b/apps/web/src/lib/instrumentation/writeSessions.ts index 03ae0b1..6df2377 100644 --- a/apps/web/src/lib/instrumentation/writeSessions.ts +++ b/apps/web/src/lib/instrumentation/writeSessions.ts @@ -1,5 +1,5 @@ import { prisma } from "@hctv/db"; -import { getRedisConnection } from "../services/redis"; +import { getRedisConnection } from "@hctv/db"; export default async function writeSessions() { const sessions = await prisma.session.findMany();