feat: add context menu into message item

msgbyte · Apr 11, 2024 · a36ca7c · a36ca7c
1 parent 5c259d7
commit a36ca7c
Showing 1 changed file with 53 additions and 46 deletions.
diff --git a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -120,60 +120,67 @@ export const NormalMessage: React.FC<ChatMessageItemProps> = React.memo(
         </div>
 
         {/* 主体 */}
-        <div
-          className="flex flex-col flex-1 overflow-auto group"
-          onContextMenu={stopPropagation}
+        <Dropdown
+          menu={moreActions}
+          placement="bottomLeft"
+          trigger={['contextMenu']}
+          onOpenChange={setIsActionBtnActive}
         >
-          {showAvatar && (
-            <div className="flex items-center">
-              <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
+            className="flex flex-col flex-1 overflow-auto group"
+            onContextMenu={stopPropagation}
+          >
+            {showAvatar && (
+              <div className="flex items-center">
+                <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
-            maxHeight={340}
-            backgroundColor="var(--tc-content-background-color)"
-            showFullText={
-              <div className="inline-block rounded-full bg-white dark:bg-black opacity-80 py-2 px-3 hover:opacity-100">
-                {t('点击展开更多')}
-              </div>
-            }
-          >
-            <div className="chat-message-item_body leading-6 break-words">
-              <MessageQuote payload={payload} />
+            {/* 消息内容 */}
+            <AutoFolder
+              maxHeight={340}
+              backgroundColor="var(--tc-content-background-color)"
+              showFullText={
+                <div className="inline-block rounded-full bg-white dark:bg-black opacity-80 py-2 px-3 hover:opacity-100">
+                  {t('点击展开更多')}
+                </div>
+              }
+            >
+              <div className="chat-message-item_body leading-6 break-words">
+                <MessageQuote payload={payload} />
 
-              <span>{getMessageRender(payload.content)}</span>
+                <span>{getMessageRender(payload.content)}</span>
 
-              {payload.sendFailed === true && (
-                <Icon
-                  className="inline-block ml-1"
-                  icon="emojione:cross-mark-button"
-                />
-              )}
+                {payload.sendFailed === true && (
+                  <Icon
+                    className="inline-block ml-1"
+                    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>
-            {pluginMessageExtraParsers.map((parser) => (
-              <React.Fragment key={parser.name}>
-                {parser.render(payload)}
-              </React.Fragment>
-            ))}
+            {/* 消息反应 */}
+            {reactions}
           </div>
-
-          {/* 消息反应 */}
-          {reactions}
-        </div>
+        </Dropdown>
 
         {/* 操作 */}
         {!disableOperate && (
@@ -201,7 +208,7 @@ export const NormalMessage: React.FC<ChatMessageItemProps> = React.memo(
 
             <Dropdown
               menu={moreActions}
-              placement="bottomLeft"
+              placement="bottomRight"
               trigger={['click']}
               onOpenChange={setIsActionBtnActive}
             >