feat: 增加reaction的用户昵称渲染

shared/hooks/model/useUsernames.ts

@@ -0,0 +1,15 @@
+import { getCachedUserInfo } from '../../cache/cache';
+import { useAsync } from '../useAsync';
+
+/**
+ * 用户名列表
+ */
+export function useUsernames(userIds: string[]): string[] {
+  const { value: names = [] } = useAsync(async () => {
+    const users = await Promise.all(userIds.map((id) => getCachedUserInfo(id)));
+
+    return users.map((user) => user.nickname);
+  }, [userIds.join(',')]);
+
+  return names;
+}

shared/index.tsx

@@ -56,6 +56,7 @@ export { Trans } from './i18n/Trans';
 export { useLanguage } from './i18n/language';
 
 // hooks
+export { useUsernames } from './hooks/model/useUsernames';
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRequest } from './hooks/useAsyncRequest';
@@ -112,7 +113,7 @@ export {
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export { recallMessage, deleteMessage, addReaction } from './model/message';
-export type { ChatMessage } from './model/message';
+export type { ChatMessageReaction, ChatMessage } from './model/message';
 export type { PluginManifest } from './model/plugin';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';
 export {

web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx

@@ -1,4 +1,4 @@
-import type { ChatMessage } from 'tailchat-shared';
+import { ChatMessage, useUsernames } from 'tailchat-shared';
 import _groupBy from 'lodash/groupBy';
 import _uniqBy from 'lodash/uniqBy';
 import { useMemo } from 'react';
@@ -6,13 +6,41 @@ import { Emoji } from '@/components/Emoji';
 import React from 'react';
 import { Tooltip } from 'antd';
 
+interface GroupedReaction {
+  name: string;
+  length: number;
+  users: string[];
+}
+
+/**
+ * 消息反应的用户名
+ */
+const ReactionItem: React.FC<{ reaction: GroupedReaction }> = React.memo(
+  (props) => {
+    const { reaction } = props;
+
+    return (
+      <div className="py-0.5 px-1 bg-black bg-opacity-20 rounded flex">
+        <Tooltip title={useUsernames(reaction.users)}>
+          <div>
+            <Emoji emoji={reaction.name} />
+
+            {reaction.length > 1 && <span>{reaction.length}</span>}
+          </div>
+        </Tooltip>
+      </div>
+    );
+  }
+);
+ReactionItem.displayName = 'ReactionItem';
+
 /**
  * 消息反应表情渲染
  */
 export function useMessageReactions(payload: ChatMessage) {
   const reactions = payload.reactions ?? [];
 
-  const groupedReactions = useMemo(() => {
+  const groupedReactions: GroupedReaction[] = useMemo(() => {
     const groups = _groupBy(reactions, 'name');
 
     return Object.keys(groups).map((name) => {
@@ -28,14 +56,7 @@ export function useMessageReactions(payload: ChatMessage) {
   return (
     <div className="flex chat-message-reactions gap-1">
       {groupedReactions.map((reaction) => (
-        <div
+        <ReactionItem key={reaction.name} reaction={reaction} />
-          key={reaction.name}
-          className="py-0.5 px-1 bg-black bg-opacity-20 rounded flex"
-        >
-          <Emoji emoji={reaction.name} />
-
-          {reaction.length > 1 && <span>{reaction.length}</span>}
-        </div>
       ))}
     </div>
   );