@flexem/chat-box 1.0.9 → 1.0.10

package/miniprogram_dist/components/input-bar/index.js

@@ -80,7 +80,7 @@ Component({
   data: {
     inputValue: '',           // 输入内容
     inputHeight: 50,          // 输入框高度
-    maxInputHeight: 200,      // 最大输入框高度（5行）
+    maxInputHeight: 210,      // 最大输入框高度（5行 × 42rpx）
     isVoiceMode: false,       // 是否语音模式
     isRecording: false,       // 是否正在录音
     isRecognizing: false,     // 是否正在识别
@@ -92,7 +92,8 @@ Component({
     textareaFocus: false,     // textarea 是否聚焦
     recognizedText: '',       // 语音识别的中间结果
     recordStartTime: 0,       // 录音开始时间
-    voiceStartY: 0            // 录音开始时的 Y 坐标
+    voiceStartY: 0,           // 录音开始时的 Y 坐标
+    placeholderStyle: ''      // placeholder 样式（Android 需要特殊处理垂直居中）
   },
 
   observers: {
@@ -125,6 +126,16 @@ Component({
       if (this.properties.defaultValue) {
         this.setData({ inputValue: this.properties.defaultValue });
       }
+
+      // 检测平台，Android 需要特殊处理 textarea placeholder 垂直居中
+      const systemInfo = wx.getSystemInfoSync();
+      const isAndroid = systemInfo.platform === 'android';
+      if (isAndroid) {
+        // Android 上 textarea 的 placeholder 不会垂直居中，需要通过 padding-top 调整
+        this.setData({
+          placeholderStyle: 'padding-top: 15rpx;'
+        });
+      }
     },
     detached() {
       if (this.data.isRecording) {
@@ -282,10 +293,11 @@ Component({
      * 输入框行数变化
      */
     onLineChange(e) {
-      const lineHeight = 35;
-      const baseHeight = 50; // 单行基准高度
+      const lineHeight = 42; // 基于 font-size: 30rpx, line-height: 1.4
+      const baseHeight = 50; // 单行基准高度（和语音按钮内容高度一致）
       const lines = Math.min(e.detail.lineCount, 5);
-      const newHeight = lineHeight * lines;
+      // 单行时使用基准高度，多行时使用行高计算
+      const newHeight = lines <= 1 ? baseHeight : lineHeight * lines;
       this.setData({
         inputHeight: newHeight
       });

package/miniprogram_dist/components/input-bar/index.wxml

@@ -48,6 +48,7 @@
         class="text-input"
         placeholder="{{placeholder}}"
         placeholder-class="text-input-placeholder"
+        placeholder-style="{{placeholderStyle}}"
         value="{{inputValue}}"
         focus="{{textareaFocus}}"
         bindinput="onInput"

package/miniprogram_dist/components/input-bar/index.wxss

@@ -52,10 +52,10 @@
 
 .attachment-remove {
   position: absolute;
-  top: -12rpx;
-  right: -12rpx;
-  width: 36rpx;
-  height: 36rpx;
+  top: -14rpx;
+  right: -14rpx;
+  width: 40rpx;
+  height: 40rpx;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 50%;
   display: flex;
@@ -65,8 +65,9 @@
 
 .attachment-remove text {
   color: #fff;
-  font-size: 24rpx;
+  font-size: 32rpx;
   line-height: 1;
+  margin-top: -6rpx;
 }
 
 .attachment-progress {
@@ -115,19 +116,20 @@
   background-color: #fff;
   border-radius: 16rpx;
   border: 1rpx solid #E0E0E0;
-  padding: 0rpx 24rpx 0rpx 24rpx;
-  min-height: 82rpx;
+  padding: 0 24rpx;
+  min-height: 92rpx;
   box-sizing: border-box;
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 .text-input {
   width: 100%;
   font-size: 30rpx;
   line-height: 1.4;
-  min-height: 40rpx;
   color: #333;
+  min-height: 50rpx;
 }
 
 .text-input-placeholder {
@@ -137,15 +139,16 @@
 /* 语音按钮 */
 .voice-btn {
   flex: 1;
-  height: 82rpx;
-  padding: 16rpx 24rpx;
+  height: 92rpx;
+  padding: 32rpx 24rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
   border-radius: 16rpx;
   border: 1rpx solid #E0E0E0;
-  font-size: 28rpx;
+  font-size: 30rpx;
+  font-weight: bold;
   color: #333;
   transition: all 0.2s;
   box-sizing: border-box;

package/miniprogram_dist/components/sidebar/index.js

@@ -52,7 +52,11 @@ Component({
     searchKeyword: '',      // 搜索关键词
     // 胶囊按钮位置
     menuButtonTop: 0,
-    menuButtonHeight: 0
+    menuButtonHeight: 0,
+    // 重命名模态框
+    showRenameModal: false,
+    renameValue: '',
+    renamingSession: null
   },
 
   lifetimes: {
@@ -272,8 +276,13 @@ Component({
      * 选择会话
      */
     onSelectSession(e) {
-      if (this.data.isEditMode) return;
       const session = e.currentTarget.dataset.session;
+
+      // 如果在编辑模式，先退出编辑模式
+      if (this.data.isEditMode) {
+        this.setData({ isEditMode: false });
+      }
+
       this.triggerEvent('select', { session });
       this.onClose();
     },
@@ -331,45 +340,89 @@ Component({
     },
 
     /**
-     * 重命名对话
+     * 重命名对话 - 显示自定义模态框
      */
     onRename(e) {
       const session = e.currentTarget.dataset.session;
+      this.setData({
+        showRenameModal: true,
+        renameValue: session.title || '',
+        renamingSession: session
+      });
+    },
 
-      wx.showModal({
-        title: '重命名',
-        editable: true,
-        placeholderText: '请输入新标题',
-        content: session.title,
-        success: async (res) => {
-          if (res.confirm && res.content && res.content.trim()) {
-            try {
-              await api.renameChatSession(
-                this.properties.baseUrl,
-                this.properties.token,
-                session.id,
-                res.content.trim()
-              );
-
-              // 更新本地数据
-              this.updateSessionTitle(session.id, res.content.trim());
+    /**
+     * 重命名输入变化
+     */
+    onRenameInput(e) {
+      this.setData({
+        renameValue: e.detail.value
+      });
+    },
 
-              wx.showToast({
-                title: '重命名成功',
-                icon: 'success'
-              });
-            } catch (error) {
-              console.error('重命名失败', error);
-              wx.showToast({
-                title: error.message || '重命名失败',
-                icon: 'none'
-              });
-            }
-          }
-        }
+    /**
+     * 取消重命名
+     */
+    onRenameCancel() {
+      this.setData({
+        showRenameModal: false,
+        renameValue: '',
+        renamingSession: null
       });
     },
 
+    /**
+     * 确认重命名
+     */
+    async onRenameConfirm() {
+      const { renameValue, renamingSession } = this.data;
+
+      if (!renameValue || !renameValue.trim()) {
+        wx.showToast({
+          title: '请输入标题',
+          icon: 'none'
+        });
+        return;
+      }
+
+      try {
+        await api.renameChatSession(
+          this.properties.baseUrl,
+          this.properties.token,
+          renamingSession.id,
+          renameValue.trim()
+        );
+
+        // 更新本地数据
+        this.updateSessionTitle(renamingSession.id, renameValue.trim());
+
+        // 关闭模态框
+        this.setData({
+          showRenameModal: false,
+          renameValue: '',
+          renamingSession: null
+        });
+
+        wx.showToast({
+          title: '重命名成功',
+          icon: 'success'
+        });
+      } catch (error) {
+        console.error('重命名失败', error);
+        wx.showToast({
+          title: error.message || '重命名失败',
+          icon: 'none'
+        });
+      }
+    },
+
+    /**
+     * 阻止模态框点击冒泡
+     */
+    preventModalBubble() {
+      // 空函数，阻止事件冒泡
+    },
+
     /**
      * 更新会话标题
      */

package/miniprogram_dist/components/sidebar/index.wxml

@@ -134,4 +134,32 @@
       </view>
     </view>
   </view>
+
+  <!-- 重命名模态框 -->
+  <view wx:if="{{showRenameModal}}" class="rename-modal-overlay" catchtap="onRenameCancel">
+    <view class="rename-modal" catchtap="preventModalBubble">
+      <view class="rename-modal-header">
+        <text class="rename-modal-title">重命名</text>
+      </view>
+      <view class="rename-modal-body">
+        <input
+          class="rename-input"
+          value="{{renameValue}}"
+          placeholder="请输入新标题"
+          focus="{{showRenameModal}}"
+          bindinput="onRenameInput"
+          bindconfirm="onRenameConfirm"
+          maxlength="50"
+        />
+      </view>
+      <view class="rename-modal-footer">
+        <view class="rename-modal-btn rename-cancel-btn" bindtap="onRenameCancel">
+          <text>取消</text>
+        </view>
+        <view class="rename-modal-btn rename-confirm-btn" bindtap="onRenameConfirm">
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>

package/miniprogram_dist/components/sidebar/index.wxss

@@ -260,3 +260,77 @@
   color: #333;
   font-weight: bold;
 }
+
+/* 重命名模态框 */
+.rename-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.rename-modal {
+  width: 80%;
+  max-width: 560rpx;
+  background-color: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.rename-modal-header {
+  padding: 32rpx;
+  text-align: center;
+}
+
+.rename-modal-title {
+  font-size: 34rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.rename-modal-body {
+  padding: 0 32rpx 32rpx;
+}
+
+.rename-input {
+  width: 100%;
+  height: 80rpx;
+  padding: 0 24rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+  font-size: 30rpx;
+  box-sizing: border-box;
+}
+
+.rename-modal-footer {
+  display: flex;
+  border-top: 1rpx solid #eee;
+}
+
+.rename-modal-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28rpx;
+  font-size: 32rpx;
+}
+
+.rename-modal-btn:active {
+  background-color: #f5f5f5;
+}
+
+.rename-cancel-btn {
+  color: #666;
+  border-right: 1rpx solid #eee;
+}
+
+.rename-confirm-btn {
+  color: #007aff;
+}

package/miniprogram_dist/index.js

@@ -399,6 +399,12 @@ Component({
         return;
       }
 
+      // 停止语音播放
+      if (this.data.playingMessageId) {
+        audio.stop();
+        this.setData({ playingMessageId: null, synthesizingMessageId: null });
+      }
+
       this.setData({ showSidebar: true });
       // 刷新对话列表
       const sidebar = this.selectComponent('#sidebar');
@@ -761,11 +767,24 @@ Component({
       };
 
       const messages = [...this.data.messages, userMessage];
-      this.setData({ messages });
-      this.scrollToBottom();
-
-      // 发送请求
-      this.sendChatRequest(content, attachments, isVoice);
+      this.setData({ messages }, () => {
+        // 使用 nextTick 确保 DOM 已更新
+        wx.nextTick(() => {
+          // 如果有图片附件，延迟一下让图片开始加载
+          const hasImages = attachments && attachments.some(att => att.type === 'image');
+          if (hasImages) {
+            setTimeout(() => {
+              this.scrollToBottom(true);
+              // 发送请求
+              this.sendChatRequest(content, attachments, isVoice);
+            }, 150);
+          } else {
+            this.scrollToBottom();
+            // 发送请求
+            this.sendChatRequest(content, attachments, isVoice);
+          }
+        });
+      });
     },
 
     /**
@@ -1007,7 +1026,10 @@ Component({
           streamingMessage: null,
           isStreaming: false,
           playingMessageId: null,
-          synthesizingMessageId: null
+          synthesizingMessageId: null  
+        }, () => {
+            // 停止生成后滚动到底部
+            this.scrollToBottom(true);
         });
       } else {
         this.setData({
@@ -1091,10 +1113,16 @@ Component({
         isVoice: message.isVoice
       };
 
-      this.setData({ messages: [...messages, userMessage] });
-
-      // 重新发送该用户消息
-      this.sendChatRequest(message.content, message.attachments, message.isVoice);
+      // 重置用户滚动状态，确保重新生成时能自动滚动
+      this.setData({
+        messages: [...messages, userMessage],
+        userScrolledUp: false
+      }, () => {
+        // 先滚动到底部，再发送请求
+        this.scrollToBottom(true);
+        // 重新发送该用户消息
+        this.sendChatRequest(message.content, message.attachments, message.isVoice);
+      });
     },
 
     /**
@@ -1401,7 +1429,7 @@ Component({
      */
     scrollToBottom(force = false) {
       const now = Date.now();
-      const throttleInterval = 200; // 200ms 节流
+      const throttleInterval = 100; // 100ms 节流（更快响应）
 
       // 流式输出时，如果用户手动向上滚动了，不自动滚动（除非强制）
       if (!force && this.data.isStreaming && this.data.userScrolledUp) {
@@ -1422,12 +1450,25 @@ Component({
         }
       }
 
-      // 使用计数器确保每次都能触发滚动
-      const counter = this.data.scrollCounter + 1;
+      // 设置自动滚动标志，防止 onScroll 误判为用户手动滚动
+      this.isAutoScrolling = true;
+
+      // 先清空 scrollToMessage，再设置为目标值，确保触发滚动
+      // 因为 scroll-into-view 值不变时不会重新触发滚动
       this.setData({
-        scrollToMessage: 'scroll-bottom',
-        scrollCounter: counter,
+        scrollToMessage: '',
         lastScrollTime: now
+      }, () => {
+        // 在下一个 tick 设置目标值
+        wx.nextTick(() => {
+          this.setData({
+            scrollToMessage: 'scroll-bottom'
+          });
+          // 延迟清除自动滚动标志，等待滚动动画完成
+          setTimeout(() => {
+            this.isAutoScrolling = false;
+          }, 300);
+        });
       });
     },
 
@@ -1450,6 +1491,11 @@ Component({
         return;
       }
 
+      // 如果是自动滚动触发的，忽略
+      if (this.isAutoScrolling) {
+        return;
+      }
+
       const { deltaY } = e.detail;
 
       // deltaY > 0 表示向上滚动（手指向下滑）

package/miniprogram_dist/index.wxml

@@ -87,7 +87,7 @@
   <!-- 消息列表区域 -->
   <scroll-view
     class="message-list"
-    style="margin-top: {{navBarHeight}}px; padding-bottom: {{keyboardHeight > 0 ? (keyboardHeight + inputBarHeight + 40) : (55 + safeAreaBottom + attachmentHeight + inputBarHeight)}}px;"
+    style="margin-top: {{navBarHeight}}px; padding-bottom: {{keyboardHeight > 0 ? (keyboardHeight + inputBarHeight + 62) : (83 + safeAreaBottom + attachmentHeight + inputBarHeight)}}px;"
     scroll-y="true"
     scroll-into-view="{{scrollToMessage}}"
     enhanced="true"
@@ -104,6 +104,13 @@
 
     <!-- 消息列表 -->
     <view class="message-wrapper">
+      <!-- 空状态 -->
+      <view wx:if="{{messages.length === 0 && !streamingMessage}}" class="empty-state">
+        <view class="empty-icon"></view>
+        <text class="empty-text">开始新对话</text>
+        <text class="empty-hint">输入问题或按住说话</text>
+      </view>
+
       <block wx:for="{{messages}}" wx:key="id">
         <message-item
           id="msg-{{item.id}}"
@@ -136,13 +143,6 @@
       />
     </view>
 
-    <!-- 空状态 -->
-    <view wx:if="{{messages.length === 0 && !streamingMessage}}" class="empty-state">
-      <view class="empty-icon"></view>
-      <text class="empty-text">开始新对话</text>
-      <text class="empty-hint">输入问题或按住说话</text>
-    </view>
-
     <!-- 底部占位 -->
     <view class="scroll-bottom-spacer" id="scroll-bottom"></view>
   </scroll-view>

package/miniprogram_dist/index.wxss

@@ -218,7 +218,7 @@
 }
 
 .message-wrapper {
-  padding-bottom: 40rpx;
+  padding-bottom: 10rpx;
   /* 设置最小高度为100%+额外空间，确保能够滚动 */
   min-height: calc(100%);
 }
@@ -241,6 +241,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  min-height: 100%;  /* 占满整个 message-wrapper */
   padding: 100rpx 0;
 }
 
@@ -262,7 +263,7 @@
 
 /* 底部占位 */
 .scroll-bottom-spacer {
-  height: 20rpx;
+  height: 0rpx;
 }
 
 /* 底部区域 */

package/miniprogram_dist/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@flexem/chat-box",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "index.js"
 }

package/miniprogram_dist/utils/audio.js

@@ -11,6 +11,7 @@ let currentPlayingId = null;
 let onPlayStateChange = null;
 let currentSegmentPlayer = null;  // 当前正在播放的片段播放器（用于分段播放）
 let currentPlayState = null;      // 当前的 playState 对象引用（用于停止时标记）
+let pendingStopCallback = false;  // 是否有待处理的 stop 回调（用于区分 onEnded 是 stop 触发还是正常播放完毕）
 
 // 流式播放队列相关
 let streamingId = null;            // 当前流式播放的消息 ID
@@ -55,6 +56,10 @@ function initAudioPlayer() {
 
   innerAudioContext.onStop(() => {
     console.log('音频停止');
+    // 清除待处理的 stop 回调标志
+    pendingStopCallback = false;
+    // 如果 playText 正在用 segmentPlayer 管理播放，不要干扰
+    if (currentPlayState) return;
     if (onPlayStateChange) {
       onPlayStateChange({ playing: false, id: currentPlayingId });
     }
@@ -64,11 +69,31 @@ function initAudioPlayer() {
 
   innerAudioContext.onEnded(() => {
     console.log('音频播放结束');
+
+    // 如果这个 onEnded 是由 stop() 触发的（而非正常播放完毕），不要进入流式播放分支
+    // 否则会错误地将其当作新流式播放的"音频段播放完毕"，导致状态混乱
+    if (pendingStopCallback) {
+      console.log('onEnded 由 stop() 触发，忽略流式播放处理');
+      pendingStopCallback = false;
+      // 按停止逻辑处理
+      if (!currentPlayState) {
+        if (onPlayStateChange) {
+          onPlayStateChange({ playing: false, id: currentPlayingId });
+        }
+      }
+      currentPlayingId = null;
+      return;
+    }
+
     // 流式模式下，播放完当前段后继续播放队列中的下一段
     if (isStreamingMode && streamingId) {
       isPlayingAudio = false;
       playNextAudio();
     } else {
+      // 如果 playText 正在用 segmentPlayer 管理播放，不要干扰
+      // 否则 innerAudioContext.stop() 触发的异步 onEnded 会把 currentPlayingId 置空，
+      // 导致 tryPlayNext 的 currentPlayingId !== playState.id 判断失败，音频不播放
+      if (currentPlayState) return;
       if (onPlayStateChange) {
         onPlayStateChange({ playing: false, id: currentPlayingId });
       }
@@ -155,6 +180,8 @@ function stop() {
 
   // 停止全局播放器
   if (innerAudioContext) {
+    // 标记有待处理的 stop 回调，防止异步 onEnded 被错误地当作新流式播放的"音频段播放完毕"
+    pendingStopCallback = true;
     innerAudioContext.stop();
   }
   currentPlayingId = null;
@@ -622,6 +649,9 @@ function startStreamingPlay(id) {
     stopStreamingPlay();
   }
 
+  // 清除待处理的 stop 回调标志，确保新的流式播放不受之前 stop() 的影响
+  pendingStopCallback = false;
+
   streamingId = id;
   textQueue = [];
   audioQueue = [];
@@ -816,6 +846,7 @@ function playNextAudio() {
       console.log('流式播放全部完成');
       const id = streamingId;
       stopStreamingPlay();
+      currentPlayingId = null;
       if (onPlayStateChange) {
         onPlayStateChange({ playing: false, id: id });
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexem/chat-box",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "chat box",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",