为聊天消息添加用户头像与昵称自定义插槽功能 (#4093)

zydemail · mimaoxiao · anlyyao · web-flow · commit 924ab850f4cd · 2025-12-03T18:34:15.000+08:00
* feat: 为聊天消息添加用户头像与昵称自定义插槽功能

* docs(sse): 更新SSE流式接口为微信小程序wx.request示例

* feat: 名称slot示例

* feat: 插槽位置调整

* docs: 更新 chat-message 组件及插槽配置说明

* chore: 更新 common 子模块提交版本

* docs: regenerate api docs

---------

Co-authored-by: nekowu &lt;1142809915@qq.com&gt;
Co-authored-by: anlyyao &lt;anly_yaw@163.com&gt;
diff --git a/packages/pro-components/chat/chat-message/README.en-US.md b/packages/pro-components/chat/chat-message/README.en-US.md
@@ -29,4 +29,4 @@ longpress | `(detail: { id: string })` | \-
 
 name | \-
 avatar | \-
-datetime | \-
+content | \-
diff --git a/packages/pro-components/chat/chat-message/README.md b/packages/pro-components/chat/chat-message/README.md
@@ -30,12 +30,12 @@ isComponent: true
 {{ base }}
 
 #### 可配置昵称、头像、对齐方式
-
+支持`avatar`，`name`插槽自定义
 {{ configure }}
 
 #### 配置消息属性
 
-支持`avatar`，`name`，`datetime`，`content`插槽自定义, `content`插槽使用建议：渲染聊天消息统一用 `t-chat-content`；仅在需要“单独使用 Markdown 组件”时使用 `t-chat-markdown`。也支持别的 markdown 渲染组件，选择其他 markdown 渲染库由用户自行安装。
+支持`content`插槽自定义, `content`插槽使用建议：渲染聊天消息统一用 `t-chat-content`；仅在需要“单独使用 Markdown 组件”时使用 `t-chat-markdown`。也支持别的 markdown 渲染组件，选择其他 markdown 渲染库由用户自行安装。
 
 {{ content }}
 
@@ -86,5 +86,5 @@ longpress | `(detail: { id: string })` | \-
 名称 | 描述
 -- | --
 avatar | 自定义 `avatar` 显示内容
-datetime | 自定义 `datetime` 显示内容
+content | 自定义消息内容
 name | 自定义 `name` 显示内容
diff --git a/packages/pro-components/chat/chat-message/_example/configure/index.wxml b/packages/pro-components/chat/chat-message/_example/configure/index.wxml
@@ -21,4 +21,12 @@
       placement="right"
     ></t-chat-message>
   </view>
+  <view class="chat-example-block">
+    <t-chat-message content="{{message.content}}" role="{{message.role}}" datetime="16:38">
+      <view slot="name" class="name-block">
+        <image src="https://tdesign.gtimg.com/site/chat-avatar.png" />
+        <view>Canxuan</view>
+      </view>
+    </t-chat-message>
+  </view>
 </view>
diff --git a/packages/pro-components/chat/chat-message/_example/configure/index.wxss b/packages/pro-components/chat/chat-message/_example/configure/index.wxss
@@ -8,3 +8,15 @@
   background-color: var(--td-bg-color-container);
   padding: 32rpx 32rpx 0 32rpx;
 }
+
+.name-block {
+  display: flex;
+  align-items: center;
+  margin-right: 16rpx;
+}
+
+.name-block image {
+  margin-right: 16rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
diff --git a/packages/pro-components/chat/chat-message/_example/content/index.js b/packages/pro-components/chat/chat-message/_example/content/index.js
@@ -19,6 +19,8 @@ Component({
     },
     pic1: {
       role: 'user',
+      name: '张三',
+      avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
       content: [
         {
           type: 'attachment',
diff --git a/packages/pro-components/chat/chat-message/_example/content/index.json b/packages/pro-components/chat/chat-message/_example/content/index.json
@@ -2,6 +2,7 @@
   "component": true,
   "usingComponents": {
     "t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
-    "t-chat-actionbar": "tdesign-miniprogram/chat-actionbar/chat-actionbar"
+    "t-chat-actionbar": "tdesign-miniprogram/chat-actionbar/chat-actionbar",
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
   }
-}
+}
diff --git a/packages/pro-components/chat/chat-message/_example/content/index.wxml b/packages/pro-components/chat/chat-message/_example/content/index.wxml
@@ -1,12 +1,5 @@
 <view class="chat-example">
   <!-- 附件消息 -->
-  <view class="chat-example-block">
-    <t-chat-message
-      content="{{pic1.content}}"
-      role="{{pic1.role}}"
-      chatContentProps="{{chatContentProps}}"
-    ></t-chat-message>
-  </view>
   <view class="chat-example-block">
     <t-chat-message
       content="{{pic2.content}}"
diff --git a/packages/pro-components/chat/chat-message/chat-message.less b/packages/pro-components/chat/chat-message/chat-message.less
@@ -18,7 +18,7 @@
 }
 
 .@{attachments} + .@{chat-content}:not(:empty),
-.@{chat-thinking} + .@{chat-content}:not(:empty){
+.@{chat-thinking} + .@{chat-content}:not(:empty) {
   margin-top: 24rpx;
 }
 
@@ -54,6 +54,10 @@
   &__header {
     .@{chat-message}__avatar {
       padding-top: calc(@chat-message-height + @spacer);
+
+      &:empty {
+        padding-top: 0;
+      }
     }
   }
 
@@ -115,6 +119,10 @@
     .@{chat-message}__avatar {
       margin-left: @spacer-1;
       margin-right: 0;
+
+      &:empty {
+        margin-left: 0;
+      }
     }
   }
 
@@ -126,6 +134,11 @@
     margin-right: @spacer-1;
     padding-top: calc(@chat-message-height + @spacer);
 
+    &:empty {
+      padding-top: 0;
+      margin-right: 0;
+    }
+
     &-image {
       width: @spacer-4;
       height: @spacer-4;
@@ -157,6 +170,11 @@
     color: @text-color-placeholder;
     // padding-left: @spacer-2;
     margin-bottom: @spacer;
+
+    &:empty {
+      height: 0;
+      margin-bottom: 0;
+    }
   }
 
   // 名称样式
diff --git a/packages/pro-components/chat/chat-message/chat-message.wxml b/packages/pro-components/chat/chat-message/chat-message.wxml
@@ -1,13 +1,17 @@
 <wxs src="../../../components/common/utils.wxs" module="_" />
 
 <view class="class {{chatItemClass}}" style="{{_._style([style, customStyle])}}" bindlongpress="handleLongPress">
-  <view wx:if="{{showAvatar}}" class="{{classPrefix}}__avatar">
+  <view class="{{classPrefix}}__avatar">
+    <!-- 头像插槽 -->
+    <slot name="avatar" />
     <block wx:if="{{avatar}}">
       <image src="{{avatar}}" class="{{classPrefix}}__avatar-image"></image>
     </block>
   </view>
   <view class="{{contentClasses}}">
-    <view wx:if="{{showName || showDateTime}}" class="{{classPrefix}}__base">
+    <view class="{{classPrefix}}__base">
+      <!-- 昵称插槽 -->
+      <slot name="name" />
       <text wx:if="{{showName}}" class="{{classPrefix}}__name">{{name}}</text>
       <text wx:if="{{datetime}}" class="{{classPrefix}}__time">{{datetime}}</text>
     </view>
diff --git a/packages/pro-components/chat/chat-message/props.ts b/packages/pro-components/chat/chat-message/props.ts
@@ -31,6 +31,7 @@ const props: TdChatMessageProps = {
   /** 对话单元的时间配置 */
   datetime: {
     type: String,
+    value: '',
   },
   /** 自定义的昵称 */
   name: {
diff --git a/packages/pro-components/chat/chat-message/type.ts b/packages/pro-components/chat/chat-message/type.ts
@@ -47,6 +47,7 @@ export interface TdChatMessageProps {
   };
   /**
    * 对话单元的时间配置
+   * @default ''
    */
   datetime?: {
     type: StringConstructor;
diff --git a/packages/tdesign-miniprogram-chat/site/docs/sse.md b/packages/tdesign-miniprogram-chat/site/docs/sse.md
@@ -120,80 +120,21 @@ data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{
 
 data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"模型"}}],"usage":{"prompt_tokens":10,"completion_tokens":11,"total_tokens":21}}
 ```
-下面是解析流式接口请求的代码片段：
+下面是微信小程序解析SSE流式接口请求的代码片段示例：
 ```js
-export const fetchSSE = async (options: FetchSSEOptions = {}) => {
-  const { success, fail, complete } = options;
-  // fetch请求流式接口url，需传入接口url和参数
-  const responsePromise = fetch().catch((e) => {
-    const msg = e.toString() || '流式接口异常';
-    complete?.(false, msg);
-    return Promise.reject(e); // 确保错误能够被后续的.catch()捕获
-  });
-
-  responsePromise
-    .then((response) => {
-      if (!response?.ok) {
-        complete?.(false, response.statusText);
-        fail?.();
-        throw new Error('Request failed'); // 抛出错误以便链式调用中的下一个.catch()处理
+  const requestTask = wx.request({
+      url: 'https://your-api-url',
+      enableChunked: true,
+      success(res){
+        console.log('success：', res)
+      },
+      fail(err){
+        console.warn('fail：', err);
       }
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      if (!reader) throw new Error('No reader available');
-
-      const bufferArr: string[] = [];
-      let dataText = ''; // 记录数据
-      const event: SSEEvent = { type: null, data: null };
-
-      async function processText({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> {
-        if (done) {
-          complete?.(true);
-          return Promise.resolve();
-        }
-        const chunk = decoder.decode(value);
-        const buffers = chunk.toString().split(/\r?\n/);
-        bufferArr.push(...buffers);
-        const i = 0;
-        while (i < bufferArr.length) {
-          const line = bufferArr[i];
-          if (line) {
-            dataText += line;
-            const response = line.slice(6);
-            if (response === '[DONE]') {
-              event.type = 'finish';
-              dataText = '';
-            } else {
-              const choices = JSON.parse(response.trim())?.choices?.[0];
-              if (choices.finish_reason === 'stop') {
-                event.type = 'finish';
-                dataText = '';
-              } else {
-                event.type = 'delta';
-                event.data = choices;
-              }
-            }
-          }
-          if (event.type && event.data) {
-            const jsonData = JSON.parse(JSON.stringify(event));
-            console.log('流式数据解析结果:', jsonData);
-            // 回调更新数据
-            success(jsonData);
-            event.type = null;
-            event.data = null;
-          }
-          bufferArr.splice(i, 1);
-        }
-        return reader.read().then(processText);
-      }
-
-      return reader.read().then(processText);
-    })
-    .catch(() => {
-      // 处理整个链式调用过程中发生的任何错误
-      fail?.();
     });
-};
+    // 解析流式返回的数据
+  requestTask.onChunkReceived((chunk)=>console.log('chunk', chunk))
+
 ```
 
 

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,8 @@ Component({`
`19`	`19`	`},`
`20`	`20`	`pic1: {`
`21`	`21`	`role: 'user',`
	`22`	`+ name: '张三',`
	`23`	`+ avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',`
`22`	`24`	`content: [`
`23`	`25`	`{`
`24`	`26`	`type: 'attachment',`