feat: 增加消息reactions渲染

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

@@ -23,6 +23,7 @@ import { useChatMessageItemAction } from './useChatMessageItemAction';
 import { useChatMessageReaction } from './useChatMessageReaction';
 import { DevContainer } from '@/components/DevContainer';
 import { TcPopover } from '@/components/TcPopover';
+import { useMessageReactions } from './useMessageReactions';
 
 /**
  * 消息引用
@@ -62,6 +63,8 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
   const userInfo = useCachedUserInfo(payload.author ?? '');
   const [isActionBtnActive, setIsActionBtnActive] = useState(false);
 
+  const reactions = useMessageReactions(payload);
+
   const emojiAction = useChatMessageReaction(payload);
   const moreActions = useChatMessageItemAction(payload);
 
@@ -102,6 +105,8 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
           {/* 解释器按钮 */}
           {useRenderPluginMessageInterpreter(payload.content)}
         </div>
+
+        {reactions}
       </div>
 
       {/* 操作 */}

web/src/components/ChatBox/ChatMessageList/item.less

@@ -4,6 +4,13 @@
       max-height: 60px !important;
     }
   }
+
+  .chat-message-reactions {
+    .emoji-mart-emoji {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 
 .chat-message-item_action-popover {

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

@@ -1,4 +1,4 @@
-import { EmojiPanel } from '@/components/EmojiPanel';
+import { EmojiPanel } from '@/components/Emoji';
 import { useTcPopoverContext } from '@/components/TcPopover';
 import type { RenderFunction } from 'antd/lib/_util/getRenderPropValue';
 import React, { useMemo } from 'react';

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

@@ -0,0 +1,42 @@
+import type { ChatMessage } from 'tailchat-shared';
+import _groupBy from 'lodash/groupBy';
+import _uniqBy from 'lodash/uniqBy';
+import { useMemo } from 'react';
+import { Emoji } from '@/components/Emoji';
+import React from 'react';
+import { Tooltip } from 'antd';
+
+/**
+ * 消息反应表情渲染
+ */
+export function useMessageReactions(payload: ChatMessage) {
+  const reactions = payload.reactions ?? [];
+
+  const groupedReactions = useMemo(() => {
+    const groups = _groupBy(reactions, 'name');
+
+    return Object.keys(groups).map((name) => {
+      const reactions = _uniqBy(groups[name], 'author');
+      return {
+        name,
+        length: reactions.length,
+        users: reactions.map((r) => r.author),
+      };
+    });
+  }, [reactions]);
+
+  return (
+    <div className="flex chat-message-reactions gap-1">
+      {groupedReactions.map((reaction) => (
+        <div
+          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>
+  );
+}

web/src/components/Emoji/Emoji.tsx

@@ -0,0 +1,12 @@
+import { Emoji as OriginEmoji, EmojiProps } from 'emoji-mart';
+import React from 'react';
+
+interface Props extends Omit<EmojiProps, 'size'> {
+  size?: number;
+}
+const Emoji: React.FC<Props> = React.memo((props) => {
+  return <OriginEmoji size={16} {...props} />;
+});
+Emoji.displayName = 'Emoji';
+
+export default Emoji;

web/src/components/Emoji/index.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { Loadable } from '../Loadable';
 
+const Emoji = Loadable(
+  () =>
+    import(
+      /* webpackChunkName: 'emoji' */ /* webpackPrefetch: true */ './Emoji'
+    )
+);
+
 const EmojiPicker = Loadable(
   () =>
     import(
@@ -8,6 +15,8 @@ const EmojiPicker = Loadable(
     )
 );
 
+export { Emoji };
+
 /**
  * emoji表情面板
  */