Add max amount of messages in scroll & auto-scroll

client/components/chat/index.tsx

@@ -1,20 +1,50 @@
-import { FC, useEffect, useState } from "react"
+import { FC, KeyboardEventHandler, useEffect, useRef, useState } from "react"
-import { CHAT_URL } from "../../config"
+import { CHAT_URL, MAX_CHAT_MESSAGES } from "../../config"
+import useSession from "../../hooks/useSession"
 import { ChatMessage as Message } from "../../types"
 import Input from "../common/Input"
 import ChatMessage from "../message/ChatMessage"
 
 const Chat: FC = () => {
+  const { session } = useSession()
   const [messages, setMessages] = useState<Message[]>([])
+  const wsRef = useRef<WebSocket | null>(null)
+  const messagesEndRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const ws = new WebSocket(CHAT_URL)
+    wsRef.current = new WebSocket(CHAT_URL)
-    ws.onmessage = (ev) => {
+    wsRef.current.onmessage = (ev) => {
       const newMsg = JSON.parse(ev.data) as Message
-      setMessages((old) => [...old, newMsg])
+      if (typeof newMsg === "string") return
+      setMessages((old) => {
+        if (old.length >= MAX_CHAT_MESSAGES) old.shift()
+        return [...old, newMsg]
+      })
+    }
+
+    return () => {
+      if (wsRef.current) wsRef.current.close()
     }
   }, [])
 
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  const handleChatInput: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === "Enter" && wsRef.current) {
+      const msg = JSON.stringify({
+        fromUser: "niku",
+        fromUserID: 10,
+        toUser: "niku",
+        toUserID: 10,
+        content: event.currentTarget.value,
+      })
+      wsRef.current.send(msg)
+      event.currentTarget.value = ""
+    }
+  }
+
   return (
     <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
       <div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
@@ -24,9 +54,15 @@ const Chat: FC = () => {
         {messages.map((message) => (
           <ChatMessage key={message.messageId.toString()} message={message} />
         ))}
+        <div ref={messagesEndRef} />
       </div>
       <div className="m-2">
-        <Input className="w-full p-2" placeholder="Send a message" />
+        <Input
+          disabled={!session}
+          className="w-full p-2"
+          placeholder="Send a message"
+          onKeyDown={handleChatInput}
+        />
       </div>
     </div>
   )

client/components/message/ChatMessage.tsx

@@ -9,7 +9,7 @@ const ChatMessage: FC<ChatMessageProps> = ({
   message: { fromUser, content },
 }) => {
   return (
-    <div className="mx-2 p-2 hover:bg-neutral-700 text-sm rounded-md">
+    <div className="mx-2 p-[0.4rem] hover:bg-neutral-700 text-xs rounded-md">
       <div className="space-x-1 inline">
         <span className="align-middle">{fromUser}: </span>
       </div>

client/config/index.ts

@@ -1,2 +1,3 @@
 export const KRATOS_URL = "http://127.0.0.1:4433"
 export const CHAT_URL = "ws://localhost:1323"
+export const MAX_CHAT_MESSAGES = 50

client/types/index.ts

@@ -1,9 +1,9 @@
 export interface ChatMessage {
-  messageId: bigint
+  messageId: number
-  fromUserId: bigint
+  fromUserID: number
   fromUser: string
-  toUserId: bigint
+  toUserID: number
   toUser: string
   content: string
-  createdAt: bigint
+  createdAt: number
 }