feat: 对于过长消息自动折叠并通过展开按钮展开

packages/design/components/AutoFolder/index.tsx

@@ -2,15 +2,11 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 interface AutoFolderProps {
   maxHeight: number;
-  showFullText?: string;
+  showFullText?: React.ReactNode;
   backgroundColor?: string;
 }
 export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
-  const {
-    maxHeight,
-    showFullText = 'More',
-    backgroundColor = 'rgba(0,0,0,0)',
-  } = props;
+  const { maxHeight, showFullText = 'More', backgroundColor = 'white' } = props;
   const [isShowFull, setIsShowFull] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -61,7 +57,7 @@ export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
             bottom: 0,
             textAlign: 'center',
             cursor: 'pointer',
-            backgroundImage: `linear-gradient(${backgroundColor}, white)`,
+            backgroundImage: `linear-gradient(rgba(0,0,0,0), ${backgroundColor})`,
             padding: '4px 0',
           }}
           onClick={() => setIsShowFull(true)}

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

@@ -22,6 +22,7 @@ import { TcPopover } from '@/components/TcPopover';
 import { useMessageReactions } from './useMessageReactions';
 import { stopPropagation } from '@/utils/dom-helper';
 import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList';
+import { AutoFolder } from 'tailchat-design';
 import './Item.less';
 
 /**
@@ -104,14 +105,24 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
         )}
 
         {/* 消息内容 */}
-        <div className="chat-message-item_body leading-6 break-words">
-          <MessageQuote payload={payload} />
+        <AutoFolder
+          maxHeight={320}
+          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>
 
-          {/* 解释器按钮 */}
-          {useRenderPluginMessageInterpreter(payload.content)}
-        </div>
+            {/* 解释器按钮 */}
+            {useRenderPluginMessageInterpreter(payload.content)}
+          </div>
+        </AutoFolder>
 
         {/* 额外渲染 */}
         <div>

web/src/styles/global.less

@@ -4,6 +4,7 @@
   --tc-background-image: url(../../assets/images/bg.jpg);
   --tc-content-background-image: '';
   --tc-content-background-image-opacity: 0.2;
+  --tc-content-background-color: rgba(243, 244, 246, 1); // copy from bg-content-light
 
   .tc-background {
     @apply bg-center bg-cover bg-no-repeat;
@@ -51,6 +52,7 @@
   // 深色模式覆盖
   &.dark {
     @apply text-typography-dark bg-content-dark;
+    --tc-content-background-color: rgba(55, 65, 81, 1);; // copy from bg-content-light
 
     h1,h2,h3,h4,h5,h6 {
       @apply text-typography-dark;