@flexem/chat-box 1.0.0

package/miniprogram_dist/index.js

@@ -0,0 +1,1316 @@
+/**
+ * @songkaige/chat-box
+ * 微信小程序 AI 聊天组件
+ * 参照「元宝」小程序 UI 设计
+ */
+
+const api = require('./utils/api.js');
+const audio = require('./utils/audio.js');
+const storage = require('./utils/storage.js');
+
+Component({
+  /**
+   * 组件的属性列表
+   *
+   * 外部传入配置示例:
+   * {
+   *   "idsServiceUrl": "https://ids-dev.platform.flexem.net",
+   *   "domain": "platform.flexem.net",
+   *   "loginUrl": "https://idsweb-dev.platform.flexem.net/webapp/user/login",
+   *   "aiChatWebUrl": "https://chatweb-dev.platform.flexem.net"
+   * }
+   */
+  properties: {
+    // IDS 服务地址（用于获取 serviceUrls）
+    idsServiceUrl: {
+      type: String,
+      value: ''
+    },
+    // 用户 Token
+    userToken: {
+      type: String,
+      value: ''
+    },
+    // 用户信息
+    userInfo: {
+      type: Object,
+      value: {
+        name: '',
+        avatar: ''
+      }
+    },
+    // 语音转文字函数
+    voiceToText: {
+      type: null,
+      value: null
+    },
+    // 语音识别管理器（WechatSI 的 RecordRecognitionManager，边录边识别）
+    speechRecognitionManager: {
+      type: null,
+      value: null
+    },
+    // 文字转语音函数（可选，不传则使用内置）
+    textToVoice: {
+      type: null,
+      value: null
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // 界面状态
+    showSidebar: false,        // 侧边栏显示状态
+    showDropdown: false,       // 下拉菜单显示状态
+    scrollToMessage: '',       // 滚动到指定消息
+    scrollCounter: 0,          // 滚动计数器，用于确保滚动触发
+
+    // 导航栏尺寸
+    navBarHeight: 0,           // 导航栏总高度
+    statusBarHeight: 0,        // 状态栏高度
+    menuButtonTop: 0,          // 胶囊按钮 top
+    menuButtonHeight: 0,       // 胶囊按钮高度
+    keyboardHeight: 0,         // 键盘高度
+    attachmentHeight: 0,       // 附件预览区域高度
+    inputBarHeight: 0,         // 输入框高度增量（多行时相对于单行的额外高度，rpx转px）
+
+    // 会话相关
+    currentSession: {},        // 当前会话
+    messages: [],              // 消息列表
+    streamingMessage: null,    // 正在流式生成的消息
+
+    // 设置
+    settings: {
+      voiceAutoPlay: false,    // 语音自动播放
+      deepThinking: false,     // 深度思考
+      webSearch: false         // 联网搜索
+    },
+
+    // 加载状态
+    isStreaming: false,        // 是否正在流式输出
+    lastScrollTime: 0,         // 上次滚动时间（用于节流）
+    hasMoreHistory: false,     // 是否有更多历史消息
+    isLoadingHistory: false,   // 是否正在加载历史消息
+    historyPage: 1,            // 历史消息页码
+
+    // 语音播放
+    playingMessageId: null,       // 正在播放语音的消息ID
+    synthesizingMessageId: null,  // 正在合成语音的消息ID
+
+    // 编辑重发
+    editingContent: '',        // 编辑中的内容
+    editingMessage: null,      // 正在编辑的消息
+
+    // 服务配置（从 serviceUrls 获取）
+    serviceUrls: {
+      aiChatUrl: '',                     // AI 聊天 API 地址
+      ossServiceUrl: '',                 // OSS 服务地址
+      blobStorageDownloadServiceUrl: ''  // 文件下载服务地址
+    },
+    isServiceUrlsLoaded: false           // 服务配置是否已加载
+  },
+
+  /**
+   * 组件生命周期
+   */
+  lifetimes: {
+    attached() {
+      // 获取系统信息和胶囊按钮位置
+      this.initNavBarInfo();
+
+      // 加载本地设置
+      const settings = storage.getSettings();
+      this.setData({ settings });
+
+      // 设置音频播放状态回调
+      audio.setPlayStateCallback((state) => {
+        this.setData({
+          playingMessageId: state.playing ? state.id : null
+        });
+      });
+
+      // 加载服务配置
+      this.loadServiceUrls();
+    },
+    detached() {
+      // 销毁音频播放器
+      audio.destroy();
+
+      // 中止正在进行的请求
+      if (this.currentRequest) {
+        this.currentRequest.abort();
+      }
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // ==================== 初始化 ====================
+
+    /**
+     * 初始化导航栏信息
+     */
+    initNavBarInfo() {
+      const systemInfo = wx.getWindowInfo();
+      const menuButton = wx.getMenuButtonBoundingClientRect();
+
+      // 计算导航栏高度：状态栏 + 胶囊按钮高度 + 上下边距
+      const statusBarHeight = systemInfo.statusBarHeight;
+      const menuButtonTop = menuButton.top;
+      const menuButtonHeight = menuButton.height;
+      // 导航栏总高度 = 胶囊按钮底部 + 与顶部相同的边距
+      const navBarHeight = menuButton.bottom + (menuButton.top - statusBarHeight);
+
+      this.setData({
+        statusBarHeight,
+        menuButtonTop,
+        menuButtonHeight,
+        navBarHeight
+      });
+    },
+
+    /**
+     * 键盘高度变化
+     */
+    onKeyboardHeight(e) {
+      const { height } = e.detail;
+      this.setData({ keyboardHeight: height });
+
+      // 键盘弹出时滚动到底部
+      if (height > 0) {
+        this.scrollToBottom();
+      }
+    },
+
+    /**
+     * 附件区域高度变化
+     */
+    onAttachmentHeight(e) {
+      const { hasAttachments, count } = e.detail;
+      // 附件预览区域高度：有附件时约 140px（120rpx 缩略图 + 20rpx 内边距），每行最多放多个
+      // 简化处理：有附件时增加固定高度
+      const attachmentHeight = hasAttachments ? 70 : 0;
+      this.setData({ attachmentHeight });
+
+      // 有附件时滚动到底部
+      if (hasAttachments) {
+        this.scrollToBottom();
+      }
+    },
+
+    /**
+     * 输入框高度变化（增量）
+     */
+    onInputHeight(e) {
+      const { height } = e.detail;
+      // height 是 rpx 增量值（多行相对于单行的额外高度），需要转换为 px
+      // 1rpx = screenWidth / 750 px
+      const systemInfo = wx.getSystemInfoSync();
+      const pxHeight = height * systemInfo.screenWidth / 750;
+      this.setData({ inputBarHeight: pxHeight });
+
+      // 输入框变高时滚动到底部
+      this.scrollToBottom();
+    },
+
+    // ==================== 服务配置 ====================
+
+    /**
+     * 加载服务配置
+     */
+    async loadServiceUrls() {
+      if (!this.properties.idsServiceUrl || !this.properties.userToken) {
+        return;
+      }
+
+      try {
+        const result = await api.getServiceUrls(
+          this.properties.idsServiceUrl,
+          this.properties.userToken
+        );
+
+        this.setData({
+          serviceUrls: {
+            aiChatUrl: result.aiChatUrl || '',
+            ossServiceUrl: result.ossServiceUrl || '',
+            blobStorageDownloadServiceUrl: result.blobStorageDownloadServiceUrl || ''
+          },
+          isServiceUrlsLoaded: true
+        });
+
+        // 恢复上次会话
+        const lastSessionId = storage.getCurrentSession();
+        if (lastSessionId) {
+          this.loadSession(lastSessionId);
+        }
+      } catch (error) {
+        console.error('加载服务配置失败', error);
+        if (error.code === 401) {
+          this.triggerEvent('login');
+        }
+      }
+    },
+
+    /**
+     * 获取 AI 聊天 API 地址
+     */
+    getAiChatUrl() {
+      return this.data.serviceUrls.aiChatUrl;
+    },
+
+    /**
+     * 获取 OSS 服务地址
+     */
+    getOssServiceUrl() {
+      return this.data.serviceUrls.ossServiceUrl;
+    },
+
+    /**
+     * 获取文件下载服务地址
+     */
+    getBlobStorageDownloadServiceUrl() {
+      return this.data.serviceUrls.blobStorageDownloadServiceUrl;
+    },
+
+    // ==================== 导航操作 ====================
+
+    /**
+     * 返回上一页
+     */
+    onBack() {
+      // 触发 back 事件，让外部处理返回逻辑
+      this.triggerEvent('back');
+
+      // 默认行为：返回上一页
+      wx.navigateBack({
+        fail: () => {
+          // 如果没有上一页，尝试跳转到首页
+          wx.switchTab({
+            url: '/pages/index/index',
+            fail: () => {
+              console.log('无法返回');
+            }
+          });
+        }
+      });
+    },
+
+    // ==================== 侧边栏操作 ====================
+
+    /**
+     * 打开侧边栏
+     */
+    openSidebar() {
+      // 如果正在流式输出，提示用户稍后操作
+      if (this.data.isStreaming) {
+        wx.showToast({
+          title: '回答输出中，请稍后操作',
+          icon: 'none'
+        });
+        return;
+      }
+
+      this.setData({ showSidebar: true });
+      // 刷新对话列表
+      const sidebar = this.selectComponent('#sidebar');
+      if (sidebar) {
+        sidebar.refresh();
+      }
+    },
+
+    /**
+     * 关闭侧边栏
+     */
+    closeSidebar() {
+      this.setData({ showSidebar: false });
+    },
+
+    /**
+     * 选择会话
+     */
+    onSelectSession(e) {
+      const { session } = e.detail;
+      this.loadSession(session.id);
+      storage.saveCurrentSession(session.id);
+    },
+
+    /**
+     * 删除会话
+     */
+    onDeleteSession(e) {
+      const { sessionId } = e.detail;
+      if (this.data.currentSession.id === sessionId) {
+        this.setData({
+          currentSession: {},
+          messages: []
+        });
+        storage.saveCurrentSession('');
+      }
+    },
+
+    // ==================== 下拉菜单操作 ====================
+
+    /**
+     * 切换下拉菜单
+     */
+    toggleDropdown() {
+      this.setData({ showDropdown: !this.data.showDropdown });
+    },
+
+    /**
+     * 关闭下拉菜单
+     */
+    closeDropdown() {
+      this.setData({ showDropdown: false });
+    },
+
+    /**
+     * 新建对话（仅重置状态，实际创建在发送第一条消息时进行）
+     */
+    onNewChat() {
+      this.closeDropdown();
+
+      // 重置到初始状态
+      this.setData({
+        currentSession: {},
+        messages: [],
+        streamingMessage: null,
+        hasMoreHistory: false,
+        historyPage: 1,
+        editingContent: ''
+      });
+
+      // 清空输入框
+      const inputBar = this.selectComponent('#input-bar');
+      if (inputBar) {
+        inputBar.setValue('');
+      }
+
+      // 清除存储的当前会话
+      storage.saveCurrentSession(null);
+    },
+
+    /**
+     * 切换语音自动播放
+     */
+    toggleVoiceAutoPlay() {
+      const settings = {
+        ...this.data.settings,
+        voiceAutoPlay: !this.data.settings.voiceAutoPlay
+      };
+      this.setData({ settings });
+      storage.saveSettings(settings);
+    },
+
+    /**
+     * 切换深度思考
+     */
+    toggleDeepThinking() {
+      const settings = {
+        ...this.data.settings,
+        deepThinking: !this.data.settings.deepThinking
+      };
+      this.setData({ settings });
+      storage.saveSettings(settings);
+    },
+
+    /**
+     * 切换联网搜索
+     */
+    toggleWebSearch() {
+      const settings = {
+        ...this.data.settings,
+        webSearch: !this.data.settings.webSearch
+      };
+      this.setData({ settings });
+      storage.saveSettings(settings);
+    },
+
+    // ==================== 消息操作 ====================
+
+    /**
+     * 加载会话
+     */
+    async loadSession(sessionId) {
+      if (!sessionId) return;
+
+      wx.showLoading({ title: '加载中...' });
+
+      try {
+        // 获取聊天历史
+        const result = await api.getChatHistories(
+          this.getAiChatUrl(),
+          this.properties.userToken,
+          sessionId,
+          1,
+          20
+        );
+
+        // 解析返回数据：{ items: [...], paginator: {...} }
+        const items = result.items || [];
+        const paginator = result.paginator || {};
+        const messages = this.processHistoryMessages(items);
+
+        // 找到会话标题
+        let sessionTitle = '对话';
+        if (items.length > 0 && items[0].session) {
+          sessionTitle = items[0].session.title || sessionTitle;
+        }
+
+        // 清除编辑状态和输入框内容
+        this.setData({
+          currentSession: {
+            id: sessionId,
+            title: sessionTitle
+          },
+          messages: messages,
+          hasMoreHistory: paginator.total_page > paginator.current_page,
+          historyPage: 2,
+          editingContent: '',      // 清除编辑内容
+          editingMessage: null     // 清除编辑消息
+        }, () => {
+          // 清除输入框内容
+          const inputBar = this.selectComponent('#input-bar');
+          if (inputBar) {
+            inputBar.clearInput();
+          }
+
+          // 在 setData 回调中滚动，确保数据已渲染
+          // 使用延迟确保 DOM 完成渲染
+          setTimeout(() => {
+            this.scrollToBottom(true);
+          }, 100);
+        });
+      } catch (error) {
+        console.error('加载会话失败', error);
+        if (error.code === 401) {
+          this.triggerEvent('login');
+        } else {
+          wx.showToast({
+            title: error.message || '加载失败',
+            icon: 'none'
+          });
+        }
+      } finally {
+        wx.hideLoading();
+      }
+    },
+
+    /**
+     * 加载更多历史消息
+     */
+    async loadMoreHistory() {
+      if (this.data.isLoadingHistory || !this.data.hasMoreHistory) return;
+
+      this.setData({ isLoadingHistory: true });
+
+      try {
+        const result = await api.getChatHistories(
+          this.getAiChatUrl(),
+          this.properties.userToken,
+          this.data.currentSession.id,
+          this.data.historyPage,
+          20
+        );
+
+        // 解析返回数据：{ items: [...], paginator: {...} }
+        const items = result.items || [];
+        const paginator = result.paginator || {};
+        const newMessages = this.processHistoryMessages(items);
+
+        this.setData({
+          messages: [...newMessages, ...this.data.messages],
+          hasMoreHistory: paginator.total_page > paginator.current_page,
+          historyPage: this.data.historyPage + 1
+        });
+      } catch (error) {
+        console.error('加载更多历史失败', error);
+        wx.showToast({
+          title: error.message || '加载失败',
+          icon: 'none'
+        });
+      } finally {
+        this.setData({ isLoadingHistory: false });
+      }
+    },
+
+    /**
+     * 处理历史消息数据
+     * API 返回字段：
+     * - id: 消息ID
+     * - user_question: 用户问题
+     * - ai_response: AI 回复
+     * - ai_thinking_text: AI 思考过程
+     * - created_at: 创建时间
+     * - files: 附件列表
+     * - messages: 消息详情（包含 tool_calls 等）
+     */
+    processHistoryMessages(items) {
+      const messages = [];
+
+      // 图片文件扩展名列表
+      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
+
+      /**
+       * 判断文件是否为图片
+       * @param {string} fileName - 文件名
+       * @returns {boolean}
+       */
+      const isImageFile = (fileName) => {
+        if (!fileName) return false;
+        const ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
+        return imageExtensions.includes(ext);
+      };
+
+      /**
+       * 转换文件数据为组件需要的格式
+       * API 返回: { file_name, file_url, content }
+       * 组件需要: { name, url, type, content }
+       */
+      const convertFiles = (files) => {
+        if (!files || !Array.isArray(files)) return [];
+        return files.map(file => ({
+          name: file.file_name || file.name || '',
+          url: file.file_url || file.url || '',
+          type: isImageFile(file.file_name || file.name) ? 'image' : 'file',
+          content: file.content || ''
+        }));
+      };
+
+      items.forEach(item => {
+        const createTime = new Date(item.created_at);
+        const timestamp = createTime.getTime();
+
+        // 用户消息
+        if (item.user_question || (item.files && item.files.length > 0)) {
+          messages.push({
+            id: item.id + '_user',
+            role: 'user',
+            content: item.user_question || '',
+            createTime: createTime,
+            timestamp: timestamp,
+            timeText: this.formatTime(createTime),
+            attachments: convertFiles(item.files)
+          });
+        }
+
+        // AI 消息
+        if (item.ai_response) {
+          messages.push({
+            id: item.id + '_ai',
+            role: 'assistant',
+            content: item.ai_response,
+            thinkingText: item.ai_thinking_text || '',
+            createTime: createTime,
+            timestamp: timestamp,
+            timeText: this.formatTime(createTime),
+            chatHistoryTime: item.created_at
+          });
+        }
+      });
+
+      // 按时间戳排序
+      messages.sort((a, b) => a.timestamp - b.timestamp);
+
+      return messages;
+    },
+
+    /**
+     * 发送消息
+     */
+    async onSendMessage(e) {
+      const { content, attachments, isVoice } = e.detail;
+
+      if (!content && (!attachments || attachments.length === 0)) return;
+
+      // 检查登录状态
+      if (!this.getAiChatUrl() || !this.properties.userToken) {
+        this.triggerEvent('login');
+        return;
+      }
+
+      // 如果没有当前会话，先创建
+      if (!this.data.currentSession.id) {
+        await this.createNewSession(content);
+      }
+
+      // 清除编辑状态
+      if (this.data.editingMessage) {
+        this.clearEditState();
+      }
+
+      // 添加用户消息
+      const userMessage = {
+        id: 'user_' + Date.now(),
+        role: 'user',
+        content: content,
+        createTime: new Date(),
+        timeText: this.formatTime(new Date()),
+        attachments: attachments || [],
+        isVoice: isVoice
+      };
+
+      const messages = [...this.data.messages, userMessage];
+      this.setData({ messages });
+      this.scrollToBottom();
+
+      // 发送请求
+      this.sendChatRequest(content, attachments, isVoice);
+    },
+
+    /**
+     * 创建新会话
+     */
+    async createNewSession(firstMessage) {
+      try {
+        const result = await api.createChatSession(
+          this.getAiChatUrl(),
+          this.properties.userToken,
+          firstMessage.substring(0, 20) + (firstMessage.length > 20 ? '...' : ''),
+          {
+            deepThinking: this.data.settings.deepThinking,
+            webSearch: this.data.settings.webSearch
+          }
+        );
+
+        // 处理返回值：可能是字符串ID或包含id属性的对象
+        const sessionId = typeof result === 'string' ? result : (result.id || result);
+        const sessionTitle = typeof result === 'object' && result.title ? result.title : '新对话';
+
+        this.setData({
+          currentSession: {
+            id: sessionId,
+            title: sessionTitle
+          }
+        });
+
+        storage.saveCurrentSession(sessionId);
+      } catch (error) {
+        console.error('创建会话失败', error);
+        throw error;
+      }
+    },
+
+    /**
+     * 发送聊天请求
+     */
+    sendChatRequest(content, attachments, isVoice) {
+      // 为本次请求生成固定的消息 ID，用于跟踪播放状态
+      const aiMessageId = 'ai_' + Date.now();
+      // 标记是否已开始自动播放语音
+      let hasStartedVoicePlay = false;
+
+      this.setData({
+        isStreaming: true,
+        streamingMessage: {
+          id: aiMessageId,  // 使用固定 ID，便于跟踪播放状态
+          role: 'assistant',
+          content: '',
+          thinkingText: '',
+          isStreaming: true,
+          createTime: new Date(),
+          timeText: this.formatTime(new Date())
+        }
+      });
+
+      const messagesForApi = [{
+        role: 'user',
+        content: content,
+        attachments: (attachments || []).map(att => ({
+          file_name: att.name,
+          file_url: att.url,
+          content: att.parsedContent || ''
+        }))
+      }];
+
+      this.currentRequest = api.sendChatMessage({
+        baseUrl: this.getAiChatUrl(),
+        token: this.properties.userToken,
+        sessionId: this.data.currentSession.id,
+        messages: messagesForApi,
+        settings: {
+          deepThinking: this.data.settings.deepThinking,
+          webSearch: this.data.settings.webSearch
+        },
+        onMessage: (data) => {
+          this.setData({
+            'streamingMessage.content': data.content,
+            'streamingMessage.thinkingText': data.thinkingText || ''
+          });
+          this.scrollToBottom();
+
+          // 语音自动播放：收到第一条数据时开始流式播放
+          // 条件：用户按住说话发送消息 且 语音播放设置打开
+          if (this.data.settings.voiceAutoPlay && isVoice && data.content) {
+            if (!hasStartedVoicePlay) {
+              // 首次收到数据，开始流式播放
+              hasStartedVoicePlay = true;
+              audio.startStreamingPlay(aiMessageId);
+            }
+            // 更新流式内容，audio 模块会自动分段并播放
+            audio.updateStreamingContent(aiMessageId, data.content);
+          }
+        },
+        onComplete: (data) => {
+          // 完成流式输出
+          const aiMessage = {
+            id: aiMessageId,  // 使用相同的 ID，保持播放状态一致
+            role: 'assistant',
+            content: data.content,
+            thinkingText: data.thinkingText || '',
+            createTime: new Date(),
+            timeText: this.formatTime(new Date()),
+            msgId: data.msgId,
+            isVoice: isVoice
+          };
+
+          const messages = [...this.data.messages, aiMessage];
+          this.setData({
+            messages,
+            streamingMessage: null,
+            isStreaming: false
+          });
+
+          this.currentRequest = null;
+
+          // 强制滚动到底部（不受节流限制）
+          this.scrollToBottom(true);
+
+          // 更新会话标题（第一条消息时）
+          if (this.data.messages.length === 2) {
+            this.updateSessionTitle(content, data.content);
+          }
+
+          // 流式播放：通知播放完成，处理剩余内容
+          if (hasStartedVoicePlay) {
+            audio.finishStreamingContent(aiMessageId, data.content);
+          }
+        },
+        onError: (error) => {
+          // 检查是否是用户主动中止的请求
+          const isAborted = error.message && (
+            error.message.includes('abort') ||
+            error.message.includes('cancel')
+          );
+
+          // 中止请求不需要处理，由 onStopGeneration 处理
+          if (isAborted) {
+            return;
+          }
+
+          console.error('发送消息失败', error);
+
+          // 如果正在流式播放语音，停止播放
+          if (hasStartedVoicePlay) {
+            audio.stop();
+            this.setData({
+              playingMessageId: null,
+              synthesizingMessageId: null
+            });
+          }
+
+          // 创建错误消息显示在页面上
+          // 判断是否为网络断开错误
+          const isNetworkError = error.message && error.message.includes('ERR_INTERNET_DISCONNECTED');
+          const errorContent = isNetworkError
+            ? '抱歉，网络波动导致内容丢失，请稍后重试。'
+            : `抱歉，发送消息失败：${error.message || '未知错误'}`;
+
+          const errorMessage = {
+            id: 'error_' + Date.now(),
+            role: 'assistant',
+            content: errorContent,
+            createTime: new Date(),
+            timeText: this.formatTime(new Date()),
+            isError: true
+          };
+
+          const messages = [...this.data.messages, errorMessage];
+          this.setData({
+            messages,
+            streamingMessage: null,
+            isStreaming: false
+          });
+          this.currentRequest = null;
+
+          // 滚动到底部显示错误消息
+          this.scrollToBottom(true);
+
+          if (error.code === 401) {
+            this.triggerEvent('login');
+          }
+        }
+      });
+    },
+
+    /**
+     * 更新会话标题
+     */
+    async updateSessionTitle(userQuestion, aiAnswer) {
+      try {
+        const result = await api.updateSessionTitle(
+          this.getAiChatUrl(),
+          this.properties.userToken,
+          this.data.currentSession.id,
+          userQuestion,
+          aiAnswer
+        );
+
+        if (result && result.title) {
+          this.setData({
+            'currentSession.title': result.title
+          });
+        }
+      } catch (error) {
+        console.error('更新标题失败', error);
+      }
+    },
+
+    /**
+     * 停止生成
+     */
+    onStopGeneration() {
+      if (this.currentRequest) {
+        this.currentRequest.abort();
+        this.currentRequest = null;
+      }
+
+      // 停止语音播放（无条件调用，确保流式播放队列也被清空）
+      audio.stop();
+
+      // 如果有正在生成的消息，将其保存到消息列表
+      if (this.data.streamingMessage && this.data.streamingMessage.content) {
+        const aiMessage = {
+          id: 'ai_' + Date.now(),
+          role: 'assistant',
+          content: this.data.streamingMessage.content,
+          thinkingText: this.data.streamingMessage.thinkingText || '',
+          createTime: new Date(),
+          timeText: this.formatTime(new Date()),
+          isInterrupted: true  // 标记为被中断
+        };
+
+        const messages = [...this.data.messages, aiMessage];
+        this.setData({
+          messages,
+          streamingMessage: null,
+          isStreaming: false,
+          playingMessageId: null,
+          synthesizingMessageId: null
+        });
+      } else {
+        this.setData({
+          streamingMessage: null,
+          isStreaming: false,
+          playingMessageId: null,
+          synthesizingMessageId: null
+        });
+      }
+
+      wx.showToast({
+        title: '已停止生成',
+        icon: 'none'
+      });
+    },
+
+    /**
+     * 重新生成
+     */
+    async onRegenerate(e) {
+      const { message } = e.detail;
+
+      if (this.data.isStreaming) {
+        wx.showToast({
+          title: '请等待当前回复完成',
+          icon: 'none'
+        });
+        return;
+      }
+
+      // 重新生成应该是针对用户消息的
+      if (message.role !== 'user') {
+        console.error('重新生成只能用于用户消息');
+        return;
+      }
+
+      // 找到该用户消息的索引
+      const messageIndex = this.data.messages.findIndex(m => m.id === message.id);
+      if (messageIndex === -1) {
+        console.error('找不到要重新生成的消息');
+        return;
+      }
+
+      // 获取该消息的时间戳，用于删除后端的历史记录
+      // 注意：微信小程序中 Date 对象在数据传递时会变成空对象，所以使用 timestamp 数字时间戳
+      const chatHistoryTime = new Date(message.timestamp || Date.now()).toISOString();
+
+      // 删除后端的历史记录（从该消息开始的所有记录）
+      if (this.data.currentSession.id && chatHistoryTime) {
+        try {
+          await api.deleteChatHistoriesByTime(
+            this.getAiChatUrl(),
+            this.properties.userToken,
+            this.data.currentSession.id,
+            chatHistoryTime
+          );
+        } catch (error) {
+          console.error('删除历史记录失败', error);
+          // 即使删除失败也继续，因为可能是新对话还没有后端记录
+        }
+      }
+
+      // 从消息列表中移除该消息及其之后的所有消息
+      const messages = this.data.messages.slice(0, messageIndex);
+
+      // 重新创建用户消息并添加到列表
+      const userMessage = {
+        id: 'user_' + Date.now(),
+        role: 'user',
+        content: message.content,
+        createTime: new Date(),
+        timestamp: Date.now(),
+        timeText: this.formatTime(new Date()),
+        attachments: message.attachments || [],
+        isVoice: message.isVoice
+      };
+
+      this.setData({ messages: [...messages, userMessage] });
+
+      // 重新发送该用户消息
+      this.sendChatRequest(message.content, message.attachments, message.isVoice);
+    },
+
+    /**
+     * 编辑消息
+     */
+    onEditMessage(e) {
+      const { message } = e.detail;
+
+      if (this.data.isStreaming) {
+        wx.showToast({
+          title: '请等待当前回复完成',
+          icon: 'none'
+        });
+        return;
+      }
+
+      this.setData({
+        editingContent: message.content,
+        editingMessage: message
+      });
+
+      // 获取输入栏组件
+      const inputBar = this.selectComponent('#input-bar');
+      if (inputBar) {
+        // 如果是语音模式，切换到文本模式
+        if (inputBar.data.isVoiceMode) {
+          inputBar.toggleInputMode();
+        }
+
+        // 设置附件（如果有的话）
+        if (message.attachments && message.attachments.length > 0) {
+          inputBar.setAttachments(message.attachments);
+        }
+      }
+    },
+
+    /**
+     * 清除编辑状态
+     */
+    clearEditState() {
+      this.setData({
+        editingContent: '',
+        editingMessage: null
+      });
+    },
+
+    /**
+     * 快捷回复点击
+     */
+    onQuickReply(e) {
+      const { content } = e.detail;
+
+      if (this.data.isStreaming) {
+        wx.showToast({
+          title: '请等待当前回复完成',
+          icon: 'none'
+        });
+        return;
+      }
+
+      if (content) {
+        // 直接发送消息
+        this.onSendMessage({
+          detail: {
+            content: content,
+            attachments: [],
+            isVoice: false
+          }
+        });
+      }
+    },
+
+    /**
+     * 图片加载完成
+     * 当消息中的图片加载完成后，重新滚动到底部
+     */
+    onImageLoad() {
+      // 使用 nextTick 确保 DOM 更新后再滚动
+      wx.nextTick(() => {
+        this.scrollToBottom(true);
+      });
+    },
+
+    // ==================== 语音播放 ====================
+
+    /**
+     * 播放语音
+     */
+    onPlayVoice(e) {
+      const { id, content } = e.detail;
+      // 优先通过 ID 查找，其次通过内容查找
+      let message = this.data.messages.find(m => m.id === id);
+      if (!message) {
+        message = this.data.messages.find(m => m.content === content);
+      }
+
+      if (message) {
+        this.playMessageVoice(message);
+      } else {
+        console.error('找不到消息', id, content);
+        wx.showToast({
+          title: '播放失败',
+          icon: 'none'
+        });
+      }
+    },
+
+    /**
+     * 播放消息语音
+     */
+    playMessageVoice(message) {
+      const textToVoiceFn = this.properties.textToVoice;
+
+      // 如果正在播放同一条消息，停止播放
+      if (this.data.playingMessageId === message.id) {
+        audio.stop();
+        this.setData({ playingMessageId: null, synthesizingMessageId: null });
+        return;
+      }
+
+      // 停止之前的播放
+      if (this.data.playingMessageId) {
+        audio.stop();
+      }
+
+      // 清理 Markdown 文本，用于 TTS
+      const cleanedContent = this.cleanTextForTTS(message.content);
+
+      // 如果清理后没有文本，提示用户
+      if (!cleanedContent) {
+        wx.showToast({
+          title: '无可播放的文本',
+          icon: 'none'
+        });
+        return;
+      }
+
+      // 立即设置合成状态，清除播放状态
+      this.setData({
+        synthesizingMessageId: message.id,
+        playingMessageId: null
+      });
+
+      if (typeof textToVoiceFn === 'function') {
+        // 使用外部 TTS 函数
+        textToVoiceFn({
+          content: cleanedContent,
+          success: (res) => {
+            // 合成完成，直接切换到播放状态（避免中间闪烁默认图标）
+            this.setData({
+              synthesizingMessageId: null,
+              playingMessageId: message.id
+            });
+            audio.play(res.src, message.id);
+          },
+          fail: (err) => {
+            // 清除合成状态
+            this.setData({ synthesizingMessageId: null });
+            wx.showToast({
+              title: '语音播放失败',
+              icon: 'none'
+            });
+          }
+        });
+      } else {
+        // 使用内置 TTS
+        audio.playText(cleanedContent, message.id, {
+          onSynthesized: () => {
+            // TTS 合成完成，直接切换到播放状态（避免中间闪烁默认图标）
+            this.setData({
+              synthesizingMessageId: null,
+              playingMessageId: message.id
+            });
+          },
+          onError: () => {
+            // TTS 失败
+            this.setData({ synthesizingMessageId: null });
+          }
+        });
+      }
+    },
+
+    // ==================== 工具方法 ====================
+
+    /**
+     * 清理 Markdown 文本，用于 TTS 播放
+     * 移除 Markdown 语法、URL、图片等，保留纯文本
+     */
+    cleanTextForTTS(text) {
+      if (!text) return '';
+
+      let cleaned = text;
+
+      // 移除代码块
+      cleaned = cleaned.replace(/```[\s\S]*?```/g, '');
+
+      // 移除行内代码
+      cleaned = cleaned.replace(/`[^`]+`/g, '');
+
+      // 移除图片 ![alt](url)
+      cleaned = cleaned.replace(/!\[[^\]]*\]\([^)]+\)/g, '');
+
+      // 移除链接，保留链接文本 [text](url) -> text
+      cleaned = cleaned.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+
+      // 移除 HTML 链接 <a href="...">text</a> -> text
+      cleaned = cleaned.replace(/<a[^>]*>([^<]*)<\/a>/gi, '$1');
+
+      // 移除标题标记 ### -> 空
+      cleaned = cleaned.replace(/^#{1,6}\s+/gm, '');
+
+      // 移除加粗 **text** 或 __text__ -> text
+      cleaned = cleaned.replace(/\*\*([^*]+)\*\*/g, '$1');
+      cleaned = cleaned.replace(/__([^_]+)__/g, '$1');
+
+      // 移除斜体 *text* 或 _text_ -> text（注意不要和列表标记冲突）
+      cleaned = cleaned.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '$1');
+      cleaned = cleaned.replace(/(?<!_)_([^_]+)_(?!_)/g, '$1');
+
+      // 移除列表标记 - * + 或数字.
+      cleaned = cleaned.replace(/^\s*[-*+]\s+/gm, '');
+      cleaned = cleaned.replace(/^\s*\d+\.\s+/gm, '');
+
+      // 移除引用标记 >
+      cleaned = cleaned.replace(/^\s*>\s*/gm, '');
+
+      // 移除分割线 --- *** ___
+      cleaned = cleaned.replace(/^[-*_]{3,}$/gm, '');
+
+      // 移除 URL（http/https 开头的）
+      cleaned = cleaned.replace(/https?:\/\/[^\s)]+/g, '');
+
+      // 移除多余的空行
+      cleaned = cleaned.replace(/\n{3,}/g, '\n\n');
+
+      // 移除首尾空白
+      cleaned = cleaned.trim();
+
+      return cleaned;
+    },
+
+    /**
+     * 滚动到底部（带节流，流式输出时减少滚动频率）
+     * @param {boolean} force - 是否强制滚动（不受节流限制）
+     */
+    scrollToBottom(force = false) {
+      const now = Date.now();
+      const throttleInterval = 200; // 200ms 节流
+
+      // 非强制模式下，流式输出时进行节流
+      if (!force && this.data.isStreaming) {
+        if (now - this.data.lastScrollTime < throttleInterval) {
+          // 设置延迟滚动，确保最终位置正确
+          if (this.scrollTimer) {
+            clearTimeout(this.scrollTimer);
+          }
+          this.scrollTimer = setTimeout(() => {
+            this.scrollToBottom(true);
+          }, throttleInterval);
+          return;
+        }
+      }
+
+      // 使用计数器确保每次都能触发滚动
+      const counter = this.data.scrollCounter + 1;
+      this.setData({
+        scrollToMessage: 'scroll-bottom',
+        scrollCounter: counter,
+        lastScrollTime: now
+      });
+    },
+
+    /**
+     * 滚动到顶部时加载更多
+     */
+    onScrollToUpper() {
+      if (this.data.hasMoreHistory && !this.data.isLoadingHistory) {
+        this.loadMoreHistory();
+      }
+    },
+
+    /**
+     * 格式化时间（完整格式：2025/09/18 17:41:22）
+     */
+    formatTime(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      const seconds = date.getSeconds().toString().padStart(2, '0');
+      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+    },
+
+    /**
+     * 需要登录
+     */
+    onNeedLogin() {
+      this.triggerEvent('login');
+    },
+
+    // ==================== 外部调用方法 ====================
+
+    /**
+     * 刷新会话列表
+     */
+    refreshSessions() {
+      const sidebar = this.selectComponent('.sidebar');
+      if (sidebar) {
+        sidebar.refresh();
+      }
+    },
+
+    /**
+     * 设置 Token（登录后调用）
+     */
+    setToken(token) {
+      // 通过属性传入即可，此方法保留兼容
+    },
+
+    /**
+     * 设置用户信息
+     */
+    setUserInfo(userInfo) {
+      this.setData({
+        userInfo: {
+          name: userInfo.name || userInfo.nickName || '',
+          avatar: userInfo.avatar || userInfo.avatarUrl || ''
+        }
+      });
+    }
+  }
+});