@flexem/chat-box 1.0.3 → 1.0.4

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

@@ -332,6 +332,9 @@ Component({
      * 语音按钮按下
      */
     onVoiceStart(e) {
+      // 通知父组件停止语音播放
+      this.triggerEvent('voicerecordstart');
+
       // 记录按下时间，用于判断是否为快速点击
       this._voiceTouchStartTime = Date.now();
       this._voiceTouchCancelled = false;

package/miniprogram_dist/components/message/index.js

@@ -637,7 +637,13 @@ Component({
           const endPos = remaining.indexOf(marker, nearest.pos + 2);
           if (endPos !== -1) {
             const boldText = remaining.slice(nearest.pos + 2, endPos);
-            parts.push({ type: 'text', text: boldText, bold: true });
+            // 递归解析粗体内容，支持内部的链接等
+            const boldParts = this.processInlineElements(boldText);
+            // 给所有解析出的部分添加 bold 标记
+            boldParts.forEach(part => {
+              part.bold = true;
+              parts.push(part);
+            });
             remaining = remaining.slice(endPos + 2);
           } else {
             // 没有闭合，当作普通文本
@@ -660,7 +666,13 @@ Component({
           }
           if (endPos !== -1) {
             const italicText = remaining.slice(nearest.pos + 1, endPos);
-            parts.push({ type: 'text', text: italicText, italic: true, bold: false });
+            // 递归解析斜体内容，支持内部的链接等
+            const italicParts = this.processInlineElements(italicText);
+            // 给所有解析出的部分添加 italic 标记
+            italicParts.forEach(part => {
+              part.italic = true;
+              parts.push(part);
+            });
             remaining = remaining.slice(endPos + 1);
           } else {
             // 没有闭合，当作普通文本
@@ -964,6 +976,13 @@ Component({
       this.triggerEvent('playvoice', { id, content: message.content });
     },
 
+    /**
+     * 停止语音播放
+     */
+    onStopVoice() {
+      this.triggerEvent('stopvoice');
+    },
+
     /**
      * 重新生成
      */
@@ -1003,10 +1022,26 @@ Component({
       const touch = e.touches[0] || e.changedTouches[0];
       if (!touch) return;
 
-      // 计算气泡菜单位置（在触摸点上方）
-      const menuHeight = 120; // 气泡菜单大约高度
+      // 获取屏幕宽度
+      const systemInfo = wx.getWindowInfo();
+      const screenWidth = systemInfo.windowWidth;
+
+      // 气泡菜单实际宽度：3个按钮(min-width 120rpx + padding 48rpx) + 外层 padding 16rpx = 约 520rpx
+      // rpx 转 px: px = rpx / 750 * screenWidth
+      const menuWidth = 520 / 750 * screenWidth;
+      const menuHeight = 120;
+
+      // 计算气泡菜单位置（在触摸点上方，水平居中但不超出屏幕）
       const top = touch.clientY - menuHeight - 20;
-      const left = touch.clientX;
+      let left = touch.clientX;
+
+      // 确保菜单不超出左右边界（菜单使用 translateX(-50%)）
+      const halfMenu = menuWidth / 2;
+      const minLeft = halfMenu + 16;
+      const maxLeft = screenWidth - halfMenu - 16;
+
+      // 限制 left 在有效范围内
+      left = Math.max(minLeft, Math.min(maxLeft, left));
 
       this.setData({
         showBubbleMenu: true,

package/miniprogram_dist/components/message/index.wxml

@@ -83,10 +83,10 @@
               <text class="code-lang">{{item.lang || 'code'}}</text>
               <text class="code-copy" bindtap="onCopyCode" data-code="{{item.text}}">复制</text>
             </view>
-            <!-- 使用 view + CSS overflow 替代 scroll-view，避免内容更新时跳动 -->
-            <view class="code-content-wrapper">
+            <!-- 使用 scroll-view 实现横向滚动 -->
+            <scroll-view class="code-content-wrapper" scroll-x="true" enhanced="true" show-scrollbar="true">
               <text class="code-text" user-select="{{true}}">{{item.text}}</text>
-            </view>
+            </scroll-view>
           </view>
 
           <!-- 行内代码 -->
@@ -251,7 +251,7 @@
             <text class="bubble-menu-text">复制全文</text>
           </view>
           <view class="bubble-menu-item" bindtap="onSelectCopy">
-            <image class="bubble-menu-icon" src="../../assets/icons/icon-edit-msg.svg" mode="aspectFit" />
+            <text class="bubble-menu-icon-text">[A]</text>
             <text class="bubble-menu-text">节选复制</text>
           </view>
           <view class="bubble-menu-item" bindtap="onBubblePlayVoice">
@@ -265,12 +265,12 @@
 
       <!-- 正在输入指示器 -->
       <view wx:if="{{message.isStreaming}}" class="typing-indicator">
-        <!-- 语音播放中时显示播放动画 -->
-        <block wx:if="{{isPlaying}}">
+        <!-- 语音播放中时显示播放动画，点击可停止 -->
+        <view wx:if="{{isPlaying}}" class="voice-playing-streaming" bindtap="onStopVoice">
           <view class="voice-bar"></view>
           <view class="voice-bar"></view>
           <view class="voice-bar"></view>
-        </block>
+        </view>
         <!-- 未播放时显示打字动画 -->
         <block wx:else>
           <view class="typing-dot"></view>

package/miniprogram_dist/components/message/index.wxss

@@ -15,6 +15,7 @@
 
 .ai-message {
   flex-direction: row;
+  overflow: visible;
 }
 
 /* 头像 */
@@ -46,6 +47,7 @@
   flex: 1;
   align-items: flex-start;
   max-width: calc(100%);
+  overflow: visible;
 }
 
 /* 消息气泡 */
@@ -67,7 +69,6 @@
 .ai-bubble {
   background-color: #fff;
   color: #333;
-  border-bottom-left-radius: 8rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 }
 
@@ -132,8 +133,12 @@
 }
 
 .thinking-icon {
-  width: 32rpx;
-  height: 32rpx;
+  width: 32rpx !important;
+  height: 32rpx !important;
+  min-width: 32rpx !important;
+  min-height: 32rpx !important;
+  max-width: 32rpx !important;
+  max-height: 32rpx !important;
 }
 
 .thinking-title {
@@ -267,12 +272,11 @@
   overflow-x: auto;
 }
 
-/* 代码内容容器 - 使用纯 CSS overflow 替代 scroll-view，避免内容更新时跳动 */
+/* 代码内容容器 - 使用 scroll-view 实现横向滚动 */
 .code-content-wrapper {
   padding: 20rpx;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .code-text {
@@ -282,7 +286,6 @@
   white-space: pre;
   word-break: normal;
   display: inline-block;
-  min-width: 100%;
 }
 
 /* 行内代码 */
@@ -461,8 +464,12 @@
 }
 
 .action-icon-img {
-  width: 40rpx;
-  height: 40rpx;
+  width: 40rpx !important;
+  height: 40rpx !important;
+  min-width: 40rpx !important;
+  min-height: 40rpx !important;
+  max-width: 40rpx !important;
+  max-height: 40rpx !important;
   padding: 8rpx;
 }
 
@@ -482,6 +489,17 @@
   padding: 8rpx;
 }
 
+/* 流式消息中的语音播放动画（可点击停止） */
+.voice-playing-streaming {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4rpx;
+  padding: 8rpx 16rpx;
+  background-color: rgba(0, 122, 255, 0.1);
+  border-radius: 20rpx;
+}
+
 .voice-bar {
   width: 6rpx;
   height: 20rpx;
@@ -610,12 +628,25 @@
 }
 
 .bubble-menu-icon {
-  width: 48rpx;
-  height: 48rpx;
+  width: 48rpx !important;
+  height: 48rpx !important;
+  min-width: 48rpx !important;
+  min-height: 48rpx !important;
+  max-width: 48rpx !important;
+  max-height: 48rpx !important;
   margin-bottom: 8rpx;
   filter: brightness(0) invert(1);
 }
 
+.bubble-menu-icon-text {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 8rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+}
+
 .bubble-menu-text {
   font-size: 24rpx;
   color: #fff;

package/miniprogram_dist/index.js

@@ -82,6 +82,7 @@ Component({
     keyboardHeight: 0,         // 键盘高度
     attachmentHeight: 0,       // 附件预览区域高度
     inputBarHeight: 0,         // 输入框高度增量（多行时相对于单行的额外高度，rpx转px）
+    safeAreaBottom: 0,         // 底部安全区域高度
 
     // 会话相关
     currentSession: {},        // 当前会话
@@ -98,6 +99,7 @@ Component({
     // 加载状态
     isStreaming: false,        // 是否正在流式输出
     lastScrollTime: 0,         // 上次滚动时间（用于节流）
+    userScrolledUp: false,     // 用户是否手动向上滚动（流式输出时暂停自动滚动）
     hasMoreHistory: false,     // 是否有更多历史消息
     isLoadingHistory: false,   // 是否正在加载历史消息
     historyPage: 1,            // 历史消息页码
@@ -159,6 +161,20 @@ Component({
     }
   },
 
+  /**
+   * 页面生命周期（组件所在页面的生命周期）
+   */
+  pageLifetimes: {
+    hide() {
+      // 页面隐藏时停止语音播放（如用户点击小程序关闭按钮）
+      audio.stop();
+      this.setData({
+        playingMessageId: null,
+        synthesizingMessageId: null
+      });
+    }
+  },
+
   /**
    * 组件的方法列表
    */
@@ -179,11 +195,15 @@ Component({
       // 导航栏总高度 = 胶囊按钮底部 + 与顶部相同的边距
       const navBarHeight = menuButton.bottom + (menuButton.top - statusBarHeight);
 
+      // 计算底部安全区域高度
+      const safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
+
       this.setData({
         statusBarHeight,
         menuButtonTop,
         menuButtonHeight,
-        navBarHeight
+        navBarHeight,
+        safeAreaBottom
       });
     },
 
@@ -340,6 +360,13 @@ Component({
      * 返回上一页
      */
     onBack() {
+      // 停止语音播放
+      audio.stop();
+      this.setData({
+        playingMessageId: null,
+        synthesizingMessageId: null
+      });
+
       // 触发 back 事件，让外部处理返回逻辑
       this.triggerEvent('back');
 
@@ -685,6 +712,12 @@ Component({
 
       if (!content && (!attachments || attachments.length === 0)) return;
 
+      // 停止正在播放的语音
+      if (this.data.playingMessageId) {
+        audio.stop();
+        this.setData({ playingMessageId: null, synthesizingMessageId: null });
+      }
+
       // 检查登录状态
       if (!this.getAiChatUrl() || !this.data.userToken) {
         this.triggerEvent('login');
@@ -764,6 +797,7 @@ Component({
 
       this.setData({
         isStreaming: true,
+        userScrolledUp: false,  // 重置用户滚动状态
         streamingMessage: {
           id: aiMessageId,  // 使用固定 ID，便于跟踪播放状态
           role: 'assistant',
@@ -989,6 +1023,12 @@ Component({
         return;
       }
 
+      // 停止正在播放的语音
+      if (this.data.playingMessageId) {
+        audio.stop();
+        this.setData({ playingMessageId: null, synthesizingMessageId: null });
+      }
+
       // 重新生成应该是针对用户消息的
       if (message.role !== 'user') {
         console.error('重新生成只能用于用户消息');
@@ -1056,6 +1096,12 @@ Component({
         return;
       }
 
+      // 停止正在播放的语音
+      if (this.data.playingMessageId) {
+        audio.stop();
+        this.setData({ playingMessageId: null, synthesizingMessageId: null });
+      }
+
       this.setData({
         editingContent: message.content,
         editingMessage: message
@@ -1176,6 +1222,30 @@ Component({
       }
     },
 
+    /**
+     * 停止语音播放
+     */
+    onStopVoice() {
+      audio.stop();
+      this.setData({
+        playingMessageId: null,
+        synthesizingMessageId: null
+      });
+    },
+
+    /**
+     * 按住说话开始时停止语音播放
+     */
+    onVoiceRecordStart() {
+      if (this.data.playingMessageId) {
+        audio.stop();
+        this.setData({
+          playingMessageId: null,
+          synthesizingMessageId: null
+        });
+      }
+    },
+
     /**
      * 播放消息语音
      */
@@ -1312,12 +1382,17 @@ Component({
 
     /**
      * 滚动到底部（带节流，流式输出时减少滚动频率）
-     * @param {boolean} force - 是否强制滚动（不受节流限制）
+     * @param {boolean} force - 是否强制滚动（不受节流限制和用户滚动状态限制）
      */
     scrollToBottom(force = false) {
       const now = Date.now();
       const throttleInterval = 200; // 200ms 节流
 
+      // 流式输出时，如果用户手动向上滚动了，不自动滚动（除非强制）
+      if (!force && this.data.isStreaming && this.data.userScrolledUp) {
+        return;
+      }
+
       // 非强制模式下，流式输出时进行节流
       if (!force && this.data.isStreaming) {
         if (now - this.data.lastScrollTime < throttleInterval) {
@@ -1350,6 +1425,39 @@ Component({
       }
     },
 
+    /**
+     * 滚动事件处理
+     * 检测用户是否手动向上滚动
+     */
+    onScroll(e) {
+      // 只在流式输出时检测
+      if (!this.data.isStreaming) {
+        return;
+      }
+
+      const { deltaY } = e.detail;
+
+      // deltaY > 0 表示向上滚动（手指向下滑）
+      // 如果用户向上滚动，标记为手动滚动
+      if (deltaY > 0) {
+        if (!this.data.userScrolledUp) {
+          this.setData({ userScrolledUp: true });
+        }
+      }
+    },
+
+    /**
+     * 滚动到底部事件
+     * 用户滚动到底部时，恢复自动滚动
+     */
+    onScrollToLower() {
+      if (this.data.isStreaming && this.data.userScrolledUp) {
+        this.setData({ userScrolledUp: false });
+        // 恢复后立即触发一次滚动，确保跟上最新数据
+        this.scrollToBottom(true);
+      }
+    },
+
     /**
      * 格式化时间（完整格式：2025/09/18 17:41:22）
      */

package/miniprogram_dist/index.wxml

@@ -87,12 +87,15 @@
   <!-- 消息列表区域 -->
   <scroll-view
     class="message-list"
-    style="margin-top: {{navBarHeight}}px; padding-bottom: {{keyboardHeight > 0 ? (keyboardHeight + inputBarHeight + 40) : (94 + attachmentHeight + inputBarHeight)}}px;"
+    style="margin-top: {{navBarHeight}}px; padding-bottom: {{keyboardHeight > 0 ? (keyboardHeight + inputBarHeight + 40) : (50 + safeAreaBottom + attachmentHeight + inputBarHeight)}}px;"
     scroll-y="true"
     scroll-into-view="{{scrollToMessage}}"
     enhanced="true"
     show-scrollbar="false"
     bindscrolltoupper="onScrollToUpper"
+    bindscroll="onScroll"
+    lower-threshold="50"
+    bindscrolltolower="onScrollToLower"
   >
     <!-- 加载更多 -->
     <view wx:if="{{hasMoreHistory}}" class="load-more-history">
@@ -129,6 +132,7 @@
         isPlaying="{{playingMessageId === streamingMessage.id}}"
         isSynthesizing="{{synthesizingMessageId === streamingMessage.id}}"
         isStreaming="{{true}}"
+        bind:stopvoice="onStopVoice"
       />
     </view>
 
@@ -162,6 +166,7 @@
       bind:keyboardheight="onKeyboardHeight"
       bind:attachmentheight="onAttachmentHeight"
       bind:inputheight="onInputHeight"
+      bind:voicerecordstart="onVoiceRecordStart"
     />
 
     <!-- 免责声明（键盘弹出时隐藏） -->

package/miniprogram_dist/index.wxss

@@ -216,7 +216,7 @@
 }
 
 .message-wrapper {
-  padding-bottom: 20rpx;
+  padding-bottom: 40rpx;
 }
 
 /* 加载更多历史 */

package/miniprogram_dist/package.json

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

package/package.json

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