refactor: 重寫消息顯示相關邏輯

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",

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}>