feature: 優化遊戲房間使用者體驗與新聊天室串接 web socket

components/rooms/RoomButtonGroup.tsx

@@ -18,6 +18,7 @@ function RoomButtonGroup(props: RoomButtonGroupProps) {
     isHost,
     isReady,
   } = props;
+
   return (
     <div className="flex items-center gap-4 m-4">
       <Button

components/shared/Chat/v2/Chat.tsx

@@ -9,18 +9,22 @@ import Icon from "../../Icon";
 
 export type ChatProps = {
   userId: string;
+  roomId?: string;
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
   maxHeight?: string;
+  onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
 export default function Chat({
   userId,
+  roomId,
   lobbyMessages,
   friendList,
   roomMessages,
   maxHeight = "calc(100vh - 168px)",
+  onSubmit,
 }: Readonly<ChatProps>) {
   const [messages, setMessages] = useState(lobbyMessages);
   const [target, setTarget] = useState<[ChatTab["id"], string | null]>([
@@ -64,9 +68,9 @@ export default function Chat({
   const handleToggleTarget = (id: FriendType["target"]) =>
     setTarget(["friend", id]);
 
-  const handleSubmit = (message: MessageType) => {
+  const handleSubmit = (message: Pick<MessageType, "content" | "target">) => {
     if (activeTab === "friend" && !friendRoom) return;
-    setMessages((pre) => [...pre, message]);
+    onSubmit(message);
   };
 
   return (
@@ -108,7 +112,7 @@ export default function Chat({
           )}
         </div>
         <ChatInput
-          userId={userId}
+          roomId={roomId}
           onSubmit={handleSubmit}
           disabled={isFriendList}
         />

components/shared/Chat/v2/ChatInput.tsx

@@ -4,13 +4,13 @@ import Icon from "../../Icon";
 import type { MessageType } from "./ChatMessages";
 
 type ChatInputProps = {
-  userId: string;
+  roomId?: string;
   disabled: boolean;
-  onSubmit: (message: MessageType) => void;
+  onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
 export default function ChatInput({
-  userId,
+  roomId,
   disabled,
   onSubmit,
 }: Readonly<ChatInputProps>) {
@@ -24,8 +24,7 @@ export default function ChatInput({
     if (!content) return;
     setValue("");
     onSubmit({
-      from: userId,
-      target: "",
+      target: roomId ? `ROOM_${roomId}` : "TODO:OTHER",
       content,
     });
   };

components/shared/Chat/v2/ChatMessages.tsx

@@ -1,11 +1,21 @@
 import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
-import Avatar from "../../Avatar";
+import Avatar from "@/components/shared/Avatar";
+import type { UserInfo } from "@/requests/users";
+
+type User = Pick<UserInfo, "id" | "nickname">;
 
 export type MessageType = {
-  from: string;
-  target: string;
+  /** The source of the message. */
+  from: "SYSTEM" | User;
+  /** The content of the user message. */
   content: string;
+  /** The recipient of the message.
+   * @ "LOBBY" | "ROOM_[:roomId]"  -
+   */
+  target: string;
+  /** The timestamp of the message. */
+  timestamp: string;
 };
 
 type ChatMessageProps = {
@@ -31,7 +41,7 @@ export default function ChatMessages({
       <div ref={messagesRef} className="overflow-y-scroll scrollbar">
         <div className="p-4 pr-0">
           {messages.map(({ from, content }, index) => {
-            const isSystem = from === "System";
+            const isSystem = from === "SYSTEM";
             const isMe = from === userId;
             const isSameUser = from === messages[index + 1]?.from;
 
@@ -71,7 +81,7 @@ export default function ChatMessages({
                           isMe && "text-right mt-1"
                         )}
                       >
-                        {isMe ? "我" : from}
+                        {isMe ? "我" : from.nickname}
                       </div>
                     </div>
                   </>