From b3d620a32967ef9cca293c069b49dfba58439f00 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sun, 21 Sep 2025 16:11:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E5=AF=AB=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E9=A1=AF=E7=A4=BA=E7=9B=B8=E9=97=9C=E9=82=8F=E8=BC=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/{Message.jsx => Message.tsx}   | 32 ++++++++++++-------
 ...sageContainer.jsx => MessageContainer.tsx} |  9 ++----
 2 files changed, 24 insertions(+), 17 deletions(-)
 rename client/ui/chat/{Message.jsx => Message.tsx} (76%)
 rename client/ui/chat/{MessageContainer.jsx => MessageContainer.tsx} (78%)

diff --git a/client/ui/chat/Message.jsx b/client/ui/chat/Message.tsx
similarity index 76%
rename from client/ui/chat/Message.jsx
rename to client/ui/chat/Message.tsx
index 2a92fd6..4bb6ed7 100644
--- a/client/ui/chat/Message.jsx
+++ b/client/ui/chat/Message.tsx
@@ -1,15 +1,25 @@
+import Client from "../../api/Client.ts"
+import DataCaches from "../../api/DataCaches.ts"
 import Avatar from "../Avatar.tsx"
+import useAsyncEffect from "../useAsyncEffect.ts"
+import React from "react"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    userId: string
+}
+
+export default function Message({ userId, children, ...props }: Args) {
+    const isAtRight = Client.myUserProfile?.id == userId
+
+    const [ nickName, setNickName ] = React.useState("")
+    const [ avatarUrl, setAvatarUrl ] = React.useState<string | undefined>("")
+
+    useAsyncEffect(async () => {
+        const user = await DataCaches.getUserProfile(userId)
+        setNickName(user.nickname)
+        setAvatarUrl(user?.avatar)
+    }, [userId])
 
-/**
- * 一条消息
- * @param { Object } param
- * @param { "left" | "right" } [param.direction="left"] 消息方向
- * @param { String } [param.avatar] 头像链接
- * @param { String } [param.nickName] 昵称
- * @returns { React.JSX.Element }
- */
-export default function Message({ direction = 'left', avatar, nickName, children, ...props } = {}) {
-    let isAtRight = direction == 'right'
     return (
         <div
             slot="trigger"
@@ -39,7 +49,7 @@ export default function Message({ direction = 'left', avatar, nickName, children
                     // 发送者头像
                 }
                 <Avatar
-                    src={avatar}
+                    src={avatarUrl}
                     text={nickName}
                     style={{
                         width: "43px",
diff --git a/client/ui/chat/MessageContainer.jsx b/client/ui/chat/MessageContainer.tsx
similarity index 78%
rename from client/ui/chat/MessageContainer.jsx
rename to client/ui/chat/MessageContainer.tsx
index c4f22de..b97223a 100644
--- a/client/ui/chat/MessageContainer.jsx
+++ b/client/ui/chat/MessageContainer.tsx
@@ -1,8 +1,6 @@
-/**
- * 消息容器
- * @returns { React.JSX.Element }
- */
-export default function MessageContainer({ children, style, ...props } = {}) {
+interface Args extends React.HTMLAttributes<HTMLElement> {}
+
+export default function MessageContainer({ children, style, ...props }: Args) {
     return (
         <div style={{
             display: 'flex',
@@ -10,7 +8,6 @@ export default function MessageContainer({ children, style, ...props } = {}) {
             justifyContent: 'flex-end',
             alignItems: 'center',
             marginBottom: '20px',
-            height: "100%",
             ...style,
         }}
         {...props}>