update chatbox

src/ui/Duel/PlayMat/ChatBox/index.module.scss

 .chatbox {
   position: relative;
-  height: 50% !important;
-  width: 80% !important;
-  left: 10%;
-  bottom: -40%;
+  height: 60% !important;
+  width: 60% !important;
+  background-color: #0d0d0d8f;
+  left: 20%;
+  bottom: -30%;
   border-radius: 6px;
 
   :global(.ant-drawer-header) {
     padding: 8px 4px;
   }
+  :global(.ant-drawer-body) {
+    padding: 16px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+}
+
+.input {
+  display: flex;
+  width: 100%;
+  margin-top: auto;
+  background-color: hsla(0, 0%, 100%, 0.07);
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.dialogs {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  padding: 8px 0;
+  width: 100%;
+  gap: 2px;
+
+  .item {
+    vertical-align: baseline;
+    .name, .content {
+      display: inline-block;
+    }
+    .name {
+      font-weight: 500;
+      line-height: 1.375rem;
+    }
+    .content {
+      font-size: 14px;
+      color: green;
+      margin-top: 2px;
+    }
+  }
 }

src/ui/Duel/PlayMat/ChatBox/index.tsx

 import { DownOutlined } from "@ant-design/icons";
-import { Drawer } from "antd";
-import React from "react";
+import { Button, Drawer, Input } from "antd";
+import { type OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
+import React, { useEffect, useRef, useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
+import { sendChat } from "@/api";
+import { chatStore, roomStore } from "@/stores";
+import { IconFont, ScrollableArea } from "@/ui/Shared";
+
 import styles from "./index.module.scss";
 
 const store = proxy({ open: false });
 
+interface ChatItem {
+  name: string;
+  content: string;
+}
+
 export const ChatBox: React.FC = () => {
   const { open } = useSnapshot(store);
-  const onClose = () => (store.open = false);
+  const [chatList, setChatList] = useState<ChatItem[]>([]);
+  const [input, setInput] = useState<string | undefined>(undefined);
+  const chat = useSnapshot(chatStore);
+
+  useEffect(() => {
+    if (chatStore.sender >= 0 && chatStore.message.length !== 0) {
+      const { sender } = chatStore;
+      const name =
+        sender < roomStore.players.length
+          ? roomStore.players[sender]?.name ?? "?"
+          : (sender > 8 && sender < 11) || sender > 19
+          ? "?"
+          : "System";
+      setChatList((prev) => [
+        ...prev,
+        {
+          name: name,
+          content: chatStore.message,
+        },
+      ]);
+      scrollToBottom();
+    }
+  }, [chat]);
 
+  /** 滚动条的ref */
+  const ref = useRef<OverlayScrollbarsComponentRef<"div">>(null);
+
+  /** dialogs 滚动到最底下 */
+  const scrollToBottom = () => {
+    const viewport = ref.current?.osInstance()?.elements().viewport;
+    if (viewport) {
+      viewport.scrollTop = viewport.scrollHeight;
+    }
+  };
+
+  const onClose = () => (store.open = false);
+  /** 发信息 */
+  const onSend = () => {
+    if (input !== undefined) {
+      sendChat(input);
+      setInput("");
+    }
+  };
   return (
     <Drawer
       open={open}
@@ -19,8 +70,42 @@ export const ChatBox: React.FC = () => {
       className={styles.chatbox}
       onClose={onClose}
       closeIcon={<DownOutlined />}
-    ></Drawer>
+    >
+      <div className={styles.container}>
+        <ScrollableArea className={styles.dialogs} ref={ref}>
+          {chatList.map((item, idx) => (
+            <DialogItem key={idx} {...item} />
+          ))}
+        </ScrollableArea>
+        <div className={styles.input}>
+          <Input.TextArea
+            bordered={false}
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            autoSize
+            placeholder="请输入聊天内容"
+            onPressEnter={(e) => {
+              e.preventDefault();
+              onSend();
+            }}
+          />
+          <Button
+            type="text"
+            icon={<IconFont type="icon-send" size={14} />}
+            onClick={onSend}
+          />
+        </div>
+      </div>
+    </Drawer>
   );
 };
 
+const DialogItem: React.FC<ChatItem> = ({ name, content }) => (
+  <div className={styles.item}>
+    <div className={styles.name}>{name}</div>
+    <span>{` > `}</span>
+    <div className={styles.content}>{content}</div>
+  </div>
+);
+
 export const openChatBox = () => (store.open = true);