Feature/markdown stream tail (#4390)

* feat: 新增tail功能

* feat: list示例更新

* feat: 新增小程序端tail-component抽象组件

* feat: tail示例

* feat: table和code节点内光标

* feat: uniapp端tail示例

* feat: 示例调整

* feat: 光标样式调整

Author: mimaoxiao

packages/common

@@ -1,7 +1,12 @@
 {
   "component": true,
   "styleIsolation": "apply-shared",
+  "componentGenerics": {
+    "tail-component": {
+      "default": "tdesign-miniprogram/chat-markdown/chat-markdown-tail/chat-markdown-tail"
+    }
+  },
   "usingComponents": {
     "t-chat-markdown": "tdesign-miniprogram/chat-markdown/chat-markdown"
   }
-}
+}

packages/pro-components/chat/chat-content/chat-content.json

@@ -10,7 +10,13 @@
   </block>
   <block wx:else>
     <view class="{{classPrefix}}__assistant">
-      <t-chat-markdown content="{{textInfo}}" options="{{markdownProps && markdownProps.options}}" bindclick="onMarkdownClick"></t-chat-markdown>
+      <t-chat-markdown
+        content="{{textInfo}}"
+        options="{{markdownProps && markdownProps.options}}"
+        streaming="{{markdownProps && markdownProps.streaming}}"
+        generic:tail-component="tail-component"
+        bindclick="onMarkdownClick"
+      ></t-chat-markdown>
     </view>
   </block>
 </view>

packages/pro-components/chat/chat-content/chat-content.wxml

@@ -0,0 +1,3 @@
+Component({
+  properties: {},
+});

packages/pro-components/chat/chat-list/_example/docs/custom-tail/custom-tail.js

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

packages/pro-components/chat/chat-list/_example/docs/custom-tail/custom-tail.json

@@ -0,0 +1,2 @@
+<!-- 自定义光标组件示例：渲染一个彩色方块光标 -->
+<text class="custom-tail">●</text>

packages/pro-components/chat/chat-list/_example/docs/custom-tail/custom-tail.wxml

@@ -0,0 +1,12 @@
+/* 自定义光标样式：蓝色渐变闪烁 */
+.custom-tail {
+  display: inline-block;
+  color: #0052d9;
+  font-weight: bold;
+  animation: custom-tail-blink 0.8s ease-in-out infinite;
+}
+
+@keyframes custom-tail-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}

packages/pro-components/chat/chat-list/_example/docs/custom-tail/custom-tail.wxss

@@ -189,6 +189,7 @@ Component({
             },
           ],
         },
+        markdownProps: { streaming: { hasNextChunk: true, tail: true } },
         chatId: getUniqueKey(),
       };
 
@@ -208,6 +209,7 @@ Component({
           complete() {
             that.setData({
               'chatList[0].message.status': 'complete',
+              'chatList[0].markdownProps': {},
               loading: false,
             });
           },

packages/pro-components/chat/chat-list/_example/docs/index.js

@@ -1,12 +1,18 @@
 {
   "component": true,
   "styleIsolation": "shared",
+  "componentGenerics": {
+    "tail-component": {
+      "default": "./custom-tail/custom-tail"
+    }
+  },
   "usingComponents": {
+    "custom-tail": "./custom-tail/custom-tail",
     "t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
     "t-chat-content": "tdesign-miniprogram/chat-content/chat-content",
     "t-chat": "tdesign-miniprogram/chat-list/chat-list",
     "t-chat-sender": "tdesign-miniprogram/chat-sender/chat-sender",
     "t-chat-actionbar": "tdesign-miniprogram/chat-actionbar/chat-actionbar",
     "t-toast": "tdesign-miniprogram/toast/toast"
   }
-}
+}

packages/pro-components/chat/chat-list/_example/docs/index.json

@@ -6,12 +6,26 @@
         avatar="{{item.avatar || ''}}"
         name="{{item.name || ''}}"
         datetime="{{item.datetime || ''}}"
-        content="{{item.message.content}}"
         role="{{item.message.role}}"
-        chatContentProps="{{chatContentProps}}"
         placement="{{item.message.role === 'user' ? 'right' : 'left'}}"
         bind:message-longpress="showPopover"
       >
+        <view slot="content">
+          <block
+            wx:for="{{item.message.content}}"
+            wx:for-item="contentItem"
+            wx:for-index="contentIndex"
+            wx:key="contentIndex"
+          >
+            <t-chat-content
+              wx:if="{{contentItem.type === 'text' || contentItem.type === 'markdown'}}"
+              content="{{contentItem}}"
+              role="{{item.message.role}}"
+              markdownProps="{{item.markdownProps}}"
+              generic:tail-component="custom-tail"
+            />
+          </block>
+        </view>
         <t-chat-actionbar
           wx:if="{{chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'}}"
           slot="actionbar"