AI 回覆

使用者和 AI 機器人單聊時，機器人的回覆是一條 type 為 ai 的訊息，內容邊生成邊推送過來。UniApp SDK 的 client.ai 與 Web SDK 相同：按順序拼接實時內容、斷線後續傳、重新上線時補發，回覆結束後以訊息正文為準。介面、欄位和事件的完整說明見 Web SDK 的 AI 回覆，本頁說明在 uni-app 頁面中如何顯示。機器人和回覆由你的服務端建立，見 AI 對話。

版本

AI 回覆從 @deeprespond/im-uniapp@1.0.6 起提供（依賴 @deeprespond/im-web@1.0.6），安裝見接入與下載。

整理成檢視

小程式和 App 端不能直接渲染 Markdown。@deeprespond/im-web/render（隨 @deeprespond/im-uniapp 安裝）的 aiView(message, live) 把一條 AI 訊息整理成模板可以直接使用的檢視，正文轉成 rich-text 的節點陣列（只生成節點，不生成 HTML 字串；連結只保留文字）。檢視的欄位見小程式 SDK 的 AI 回覆。

vue

<template>
  <view class="ai-msg" :data-status="view.status">
    <text v-if="view.reasoning">{{ view.thinking ? '思考中…' : '已深度思考' }}</text>
    <text v-for="tool in view.tools" :key="tool.id">{{ tool.title }}（{{ tool.state }}）</text>
    <view v-for="(block, index) in view.blocks" :key="index">
      <view v-if="block.kind === 'text'">
        <rich-text :nodes="block.nodes" selectable />
        <text v-if="view.streaming && block.last">▍</text>
      </view>
      <image v-else-if="block.kind === 'image'" :src="block.url" mode="widthFix" />
      <text v-else-if="block.kind === 'file'">{{ block.name }} {{ block.size }}</text>
    </view>
    <text v-if="view.status === 'stopped'">已停止生成</text>
    <text v-if="view.status === 'failed'">生成中断：{{ view.error }}</text>
    <text v-if="view.streaming" @click="stop">停止生成</text>
  </view>
</template>

<script>
import { aiView } from '@deeprespond/im-web/render';

export default {
  props: { item: Object, client: Object },
  data: () => ({ live: null, offs: [] }),
  computed: {
    streamId() { return this.item.body?.stream_id; },
    // 生成中取实时内容，结束后取消息正文
    view() { return aiView(this.item, this.item.body?.status === 'streaming' ? this.live : null); },
  },
  mounted() {
    this.live = this.client.ai.state(this.streamId);
    const mine = (fn) => (s) => { if (s.stream_id === this.streamId) fn(s); };
    this.offs = [
      this.client.on('ai.streamStarted', mine((s) => (this.live = s))),
      this.client.on('ai.streamUpdated', mine((s) => (this.live = s))),
      this.client.on('ai.streamEnded', mine(() => (this.live = null))),
    ];
  },
  beforeUnmount() { this.offs.forEach((off) => off()); },
  methods: {
    stop() { this.client.ai.stop(this.streamId); },
  },
};
</script>

ai.streamUpdated 的 parts 是當前完整內容，按它整體重畫這一條訊息即可；推送合併為每 50 毫秒或 2 KB 一次。
回覆結束後訊息列表會以最終內容更新，client.ai.state() 返回 null。
停止生成：只有接收回復的使用者可以停止，已結束的回覆返回當前狀態，不報錯。
重新生成：再發一次被回覆的問題，機器人的服務端會開始一條新的回覆。
會話列表的預覽可以使用 SDK 的 summarize（已支援 AI 訊息）或訊息正文的 text。

H5 端可以直接渲染 HTML 時，也可以只取 aiView 的結構，自己把 nodes 轉為 DOM。

Demo

三個 Demo 都已顯示 AI 回覆，可以作為參考：

Demo	位置
H5 Demo	`demo/src/features/ai.ts`（原生 DOM）
App Demo	`demo-app/components/ai-reply.vue`
小程式 Demo	`demo-miniprogram/components/ai-reply.vue`

AI 回覆 ​

整理成檢視 ​

Demo ​

AI 回覆

整理成檢視

Demo