feat: add context menu into message item

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

@@ -120,60 +120,67 @@ export const NormalMessage: React.FC<ChatMessageItemProps> = React.memo(
         </div>
 
         {/* 主体 */}
-        <div
+        <Dropdown
-          className="flex flex-col flex-1 overflow-auto group"
+          menu={moreActions}
-          onContextMenu={stopPropagation}
+          placement="bottomLeft"
+          trigger={['contextMenu']}
+          onOpenChange={setIsActionBtnActive}
         >
-          {showAvatar && (
+          <div
-            <div className="flex items-center">
+            className="flex flex-col flex-1 overflow-auto group"
-              <div className="font-bold">
+            onContextMenu={stopPropagation}
-                {userInfo.nickname ?? <span>&nbsp;</span>}
+          >
-              </div>
+            {showAvatar && (
-              <div className="hidden group-hover:block opacity-40 ml-1 text-sm">
+              <div className="flex items-center">
-                {formatShortTime(payload.createdAt)}
+                <div className="font-bold">
+                  {userInfo.nickname ?? <span>&nbsp;</span>}
+                </div>
+                <div className="hidden group-hover:block opacity-40 ml-1 text-sm">
+                  {formatShortTime(payload.createdAt)}
+                </div>
               </div>
-            </div>
+            )}
-          )}
 
-          {/* 消息内容 */}
+            {/* 消息内容 */}
-          <AutoFolder
+            <AutoFolder
-            maxHeight={340}
+              maxHeight={340}
-            backgroundColor="var(--tc-content-background-color)"
+              backgroundColor="var(--tc-content-background-color)"
-            showFullText={
+              showFullText={
-              <div className="inline-block rounded-full bg-white dark:bg-black opacity-80 py-2 px-3 hover:opacity-100">
+                <div className="inline-block rounded-full bg-white dark:bg-black opacity-80 py-2 px-3 hover:opacity-100">
-                {t('点击展开更多')}
+                  {t('点击展开更多')}
-              </div>
+                </div>
-            }
+              }
-          >
+            >
-            <div className="chat-message-item_body leading-6 break-words">
+              <div className="chat-message-item_body leading-6 break-words">
-              <MessageQuote payload={payload} />
+                <MessageQuote payload={payload} />
 
-              <span>{getMessageRender(payload.content)}</span>
+                <span>{getMessageRender(payload.content)}</span>
 
-              {payload.sendFailed === true && (
+                {payload.sendFailed === true && (
-                <Icon
+                  <Icon
-                  className="inline-block ml-1"
+                    className="inline-block ml-1"
-                  icon="emojione:cross-mark-button"
+                    icon="emojione:cross-mark-button"
-                />
+                  />
-              )}
+                )}
+
+                {/* 解释器按钮 */}
+                {useRenderPluginMessageInterpreter(payload.content)}
+              </div>
+            </AutoFolder>
 
-              {/* 解释器按钮 */}
+            {/* 额外渲染 */}
-              {useRenderPluginMessageInterpreter(payload.content)}
+            <div>
+              {pluginMessageExtraParsers.map((parser) => (
+                <React.Fragment key={parser.name}>
+                  {parser.render(payload)}
+                </React.Fragment>
+              ))}
             </div>
-          </AutoFolder>
 
-          {/* 额外渲染 */}
+            {/* 消息反应 */}
-          <div>
+            {reactions}
-            {pluginMessageExtraParsers.map((parser) => (
-              <React.Fragment key={parser.name}>
-                {parser.render(payload)}
-              </React.Fragment>
-            ))}
           </div>
-
+        </Dropdown>
-          {/* 消息反应 */}
-          {reactions}
-        </div>
 
         {/* 操作 */}
         {!disableOperate && (
@@ -201,7 +208,7 @@ export const NormalMessage: React.FC<ChatMessageItemProps> = React.memo(
 
             <Dropdown
               menu={moreActions}
-              placement="bottomLeft"
+              placement="bottomRight"
               trigger={['click']}
               onOpenChange={setIsActionBtnActive}
             >