feat: display reaction on context menu

Author: KUN1007

components/message/chat/window/ChatHeader.tsx

@@ -19,7 +19,7 @@ interface ChatHeaderProps {
 export const ChatHeader = memo(
   ({ chatroom, onlineCount, typingUsers }: ChatHeaderProps) => {
     const handleMoreAction = () => {
-      toast.success('功能正在开发中...')
+      toast.success('杂鱼杂鱼杂鱼, 功能正在开发中...')
     }
 
     const hasTypingUsers = Object.keys(typingUsers).length > 0
@@ -60,3 +60,5 @@ export const ChatHeader = memo(
     )
   }
 )
+
+ChatHeader.displayName = 'ChatHeader'

components/message/chat/window/ChatMessage.tsx

@@ -222,6 +222,7 @@ export const ChatMessage = ({
         onClose={() => setIsMenuOpen(false)}
         anchorPoint={anchorPoint}
         onReaction={handleReaction}
+        reactionArray={message.reaction}
         onDelete={onOpenDelete}
         onReply={onReply}
         onEdit={onEdit}

components/message/chat/window/ChatMessageContextMenu.tsx

@@ -4,36 +4,70 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  DropdownTrigger
+  DropdownTrigger,
+  Tooltip,
+  Avatar,
+  DropdownSection
 } from '@heroui/react'
 import { CornerDownRight, Trash2, Edit } from 'lucide-react'
-import type { Key } from 'react'
+import { useMemo, type Key } from 'react'
+// import { formatDate } from '~/utils/time'
+import type { ChatMessageReaction } from '~/types/api/chat'
 
 interface Props {
   isMenuOpen: boolean
   onClose: () => void
   anchorPoint: { x: number; y: number }
   onReaction: (emoji: string) => void
+  reactionArray: ChatMessageReaction[]
   onDelete?: () => void
   onReply?: () => void
   onEdit?: () => void
   isOwner?: boolean
 }
 
-const commonReactions = ['🥰', '👍', '❤️', '🤨', '🙄']
+const commonReactions = [
+  '🥰',
+  '👍',
+  '❤️',
+  '🤨',
+  '🙄',
+  '😎',
+  '😱',
+  '😭',
+  '🔥',
+  '🎉'
+]
 
 export const ChatMessageContextMenu = ({
   isMenuOpen,
   onClose,
   anchorPoint,
   onReaction,
+  reactionArray,
   onDelete,
   onReply,
   onEdit,
   isOwner = false
 }: Props) => {
   if (!isMenuOpen) return null
 
+  const groupedReactions = useMemo(() => {
+    if (!reactionArray || reactionArray.length === 0) {
+      return {}
+    }
+    return reactionArray.reduce(
+      (acc, reaction) => {
+        if (!acc[reaction.emoji]) {
+          acc[reaction.emoji] = []
+        }
+        acc[reaction.emoji].push(reaction)
+        return acc
+      },
+      {} as Record<string, ChatMessageReaction[]>
+    )
+  }, [reactionArray])
+
   const handleMenuAction = (key: Key) => {
     switch (key) {
       case 'reply':
@@ -65,42 +99,76 @@ export const ChatMessageContextMenu = ({
             textValue="Reactions"
             isReadOnly
             key="reactions"
-            className="gap-1 cursor-default data-[hover=true]:bg-background"
-          >
-            {commonReactions.map((emoji) => (
-              <span
-                key={emoji}
-                className="cursor-pointer p-1 rounded-full text-lg hover:bg-default-200"
-                onClick={() => handleReactionClick(emoji)}
-              >
-                {emoji}
-              </span>
-            ))}
-          </DropdownItem>
-
-          <DropdownItem
-            key="reply"
-            startContent={<CornerDownRight className="size-4" />}
+            className="gap-1 px-0 cursor-default data-[hover=true]:bg-background"
           >
-            回复
+            <div className="grid grid-cols-5">
+              {commonReactions.map((emoji) => (
+                <span
+                  key={emoji}
+                  className="cursor-pointer p-1 flex justify-center items-center rounded-full text-lg hover:bg-default-200"
+                  onClick={() => handleReactionClick(emoji)}
+                >
+                  {emoji}
+                </span>
+              ))}
+            </div>
           </DropdownItem>
 
-          {isOwner ? (
-            <DropdownItem key="edit" startContent={<Edit className="size-4" />}>
-              编辑
-            </DropdownItem>
-          ) : null}
-
-          {isOwner ? (
+          <DropdownSection showDivider title="消息操作">
             <DropdownItem
-              key="delete"
-              className="text-danger"
-              color="danger"
-              startContent={<Trash2 className="size-4" />}
+              key="reply"
+              startContent={<CornerDownRight className="size-4" />}
             >
-              删除
+              回复
             </DropdownItem>
-          ) : null}
+
+            {isOwner ? (
+              <DropdownItem
+                key="edit"
+                startContent={<Edit className="size-4" />}
+              >
+                编辑
+              </DropdownItem>
+            ) : null}
+
+            {isOwner ? (
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                startContent={<Trash2 className="size-4" />}
+              >
+                删除
+              </DropdownItem>
+            ) : null}
+          </DropdownSection>
+
+          <DropdownSection title="回应表情">
+            <>
+              {Object.entries(groupedReactions).map(([emoji, reactions]) => (
+                <DropdownItem
+                  key={`reaction-detail-${emoji}`}
+                  isReadOnly
+                  startContent={<span className="text-xs">{emoji}</span>}
+                  endContent={
+                    <span className="text-xs text-default-600">
+                      {reactions.length}
+                    </span>
+                  }
+                  className="cursor-default data-[hover=true]:bg-background"
+                  textValue={`${emoji} ${reactions.length}`}
+                >
+                  <span className="text-xs">{reactions[0].user.name}</span>
+                  {reactions.length > 1 && (
+                    <span className="text-xs text-default-500">
+                      {' '}
+                      等 {reactions.length - 1} 人
+                    </span>
+                  )}
+                </DropdownItem>
+              ))}
+            </>
+          </DropdownSection>
         </DropdownMenu>
       </Dropdown>
     </div>

components/message/chat/window/MessageList.tsx

@@ -69,3 +69,5 @@ export const MessageList = memo(
     )
   }
 )
+
+MessageList.displayName = 'MessageList'

migration/userDailyUploadSize.mjs

@@ -6,12 +6,10 @@ async function migrateDailyUploadSize() {
   try {
     console.log('Starting migration...')
 
-    // Step 1: 更新所有用户的数据，将 MB 转换为 Byte（避免精度丢失）
     await prisma.$executeRaw`UPDATE "user" SET "daily_upload_size" = "daily_upload_size" * 1024 * 1024;`
 
     console.log('Data conversion completed.')
 
-    // Step 2: 修改数据库字段类型
     await prisma.$executeRaw`ALTER TABLE "user" ALTER COLUMN "daily_upload_size" SET DATA TYPE INT;`
 
     console.log('Column type updated to INT.')
@@ -22,5 +20,4 @@ async function migrateDailyUploadSize() {
   }
 }
 
-// 执行迁移
 migrateDailyUploadSize()

socket/handler.ts

@@ -1,7 +1,7 @@
 import { Server, Socket } from 'socket.io'
 import { prisma } from '~/prisma/index'
 import { registerChatEventHandlers } from './event/register'
-import { broadcastRoomStatus } from './event/roomStatus' // 1. 引入辅助函数
+import { broadcastRoomStatus } from './event/roomStatus'
 
 export const onSocketConnection = async (io: Server, socket: Socket) => {
   try {