@flexem/chat-box 1.0.2 → 1.0.3

package/README.md

@@ -74,7 +74,10 @@ npm run build
 **request 合法域名：**
 - `https://ids-dev.platform.flexem.net`（IDS 服务）
 - `https://chatweb-dev.platform.flexem.net`（AI 聊天服务）
-- `https://oss-dev.platform.flexem.net`（OSS 服务）
+- `https://chatbg.fbox360.com`（线上AI 聊天服务）
+- `https://usso.fbox360.com`（线上IDS 服务）
+- `https://oss-dev.platform.flexem.net`（线上OSS 服务）
+- `https://os.fbox360.com`（线上OSS 服务）
 - `https://up-z2.qiniup.com`（七牛云上传）
 
 **uploadFile 合法域名：**
@@ -82,6 +85,7 @@ npm run build
 
 **downloadFile 合法域名：**
 - `https://blobstorage-dev.platform.flexem.net`（文件下载服务）
+- `https://fuf.flexem.net`（线上文件下载服务）
 
 ### 2. 页面配置
 

package/miniprogram_dist/components/message/index.js

@@ -42,7 +42,10 @@ Component({
     showThinking: false,  // 是否显示思考过程
     lastParseTime: 0,     // 上次解析时间
     pendingParse: false,  // 是否有待处理的解析
-    elementIdCounter: 0   // 元素 ID 计数器，用于生成唯一 ID
+    elementIdCounter: 0,  // 元素 ID 计数器，用于生成唯一 ID
+    // 长按气泡菜单
+    showBubbleMenu: false,
+    bubbleMenuPosition: { top: 0, left: 0 }
   },
 
   observers: {
@@ -983,6 +986,131 @@ Component({
       if (option) {
         this.triggerEvent('quickreply', { content: option });
       }
+    },
+
+    // ==================== 长按气泡菜单 ====================
+
+    /**
+     * 长按消息显示气泡菜单
+     */
+    onLongPress(e) {
+      // 只对 AI 消息显示气泡菜单
+      if (this.properties.message.role !== 'assistant') {
+        return;
+      }
+
+      // 获取触摸位置
+      const touch = e.touches[0] || e.changedTouches[0];
+      if (!touch) return;
+
+      // 计算气泡菜单位置（在触摸点上方）
+      const menuHeight = 120; // 气泡菜单大约高度
+      const top = touch.clientY - menuHeight - 20;
+      const left = touch.clientX;
+
+      this.setData({
+        showBubbleMenu: true,
+        bubbleMenuPosition: {
+          top: Math.max(top, 50), // 确保不超出顶部
+          left: left
+        }
+      });
+
+      // 震动反馈
+      wx.vibrateShort({ type: 'medium' });
+    },
+
+    /**
+     * 隐藏气泡菜单
+     */
+    hideBubbleMenu() {
+      this.setData({ showBubbleMenu: false });
+    },
+
+    /**
+     * 阻止事件冒泡
+     */
+    stopPropagation() {
+      // 空函数，用于阻止事件冒泡
+    },
+
+    /**
+     * 复制全文
+     */
+    onCopyAll() {
+      const content = this.properties.message.content;
+      wx.setClipboardData({
+        data: content,
+        success: () => {
+          wx.showToast({
+            title: '内容已复制',
+            icon: 'success'
+          });
+          this.hideBubbleMenu();
+        }
+      });
+    },
+
+    /**
+     * 节选复制 - 触发事件让父组件显示弹框
+     */
+    onSelectCopy() {
+      const content = this.properties.message.content;
+      // 按段落分割内容
+      const segments = this.splitContentToSegments(content);
+
+      this.setData({
+        showBubbleMenu: false
+      });
+
+      // 触发事件，让父组件显示弹框
+      this.triggerEvent('selectcopy', { segments });
+    },
+
+    /**
+     * 将内容按段落分割
+     */
+    splitContentToSegments(content) {
+      if (!content) return [];
+
+      // 按换行符分割，过滤空行，合并短段落
+      const lines = content.split('\n');
+      const segments = [];
+      let currentSegment = '';
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+        if (!trimmedLine) {
+          // 空行，保存当前段落
+          if (currentSegment) {
+            segments.push({ text: currentSegment.trim() });
+            currentSegment = '';
+          }
+        } else {
+          // 非空行
+          if (currentSegment) {
+            currentSegment += '\n' + trimmedLine;
+          } else {
+            currentSegment = trimmedLine;
+          }
+        }
+      }
+
+      // 保存最后一个段落
+      if (currentSegment) {
+        segments.push({ text: currentSegment.trim() });
+      }
+
+      return segments;
+    },
+
+    /**
+     * 气泡菜单 - 语音播放
+     */
+    onBubblePlayVoice() {
+      this.hideBubbleMenu();
+      const message = this.properties.message;
+      this.triggerEvent('playvoice', { id: message.id, content: message.content });
     }
   }
 });

package/miniprogram_dist/components/message/index.wxml

@@ -2,7 +2,7 @@
   <!-- 消息内容区域 -->
   <view class="message-content">
     <!-- 用户消息 -->
-    <view wx:if="{{message.role === 'user'}}" class="message-bubble user-bubble">
+    <view wx:if="{{message.role === 'user'}}" class="message-bubble user-bubble" bindlongpress="onLongPress">
       <text class="message-text">{{message.content}}</text>
 
       <!-- 附件预览 -->
@@ -39,7 +39,7 @@
     </view>
 
     <!-- AI 消息 -->
-    <view wx:else class="message-bubble ai-bubble {{message.isError ? 'error-bubble' : ''}}">
+    <view wx:else class="message-bubble ai-bubble {{message.isError ? 'error-bubble' : ''}}" bindlongpress="onLongPress">
       <!-- 思考过程（可折叠） -->
       <view wx:if="{{message.thinkingText}}" class="thinking-section">
         <view class="thinking-header" bindtap="toggleThinking">
@@ -243,6 +243,26 @@
         </block>
       </view>
 
+      <!-- 长按气泡菜单 -->
+      <view wx:if="{{showBubbleMenu}}" class="bubble-menu-overlay" catchtap="hideBubbleMenu">
+        <view class="bubble-menu" catchtap="stopPropagation" style="top: {{bubbleMenuPosition.top}}px; left: {{bubbleMenuPosition.left}}px;">
+          <view class="bubble-menu-item" bindtap="onCopyAll">
+            <image class="bubble-menu-icon" src="../../assets/icons/icon-copy.svg" mode="aspectFit" />
+            <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-text">节选复制</text>
+          </view>
+          <view class="bubble-menu-item" bindtap="onBubblePlayVoice">
+            <image class="bubble-menu-icon" src="../../assets/icons/icon-play-voice.svg" mode="aspectFit" />
+            <text class="bubble-menu-text">语音播放</text>
+          </view>
+          <!-- 气泡箭头 -->
+          <view class="bubble-menu-arrow"></view>
+        </view>
+      </view>
+
       <!-- 正在输入指示器 -->
       <view wx:if="{{message.isStreaming}}" class="typing-indicator">
         <!-- 语音播放中时显示播放动画 -->

package/miniprogram_dist/components/message/index.wxss

@@ -573,3 +573,63 @@
   opacity: 0.5;
   pointer-events: none;
 }
+
+/* 长按气泡菜单 */
+.bubble-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+
+.bubble-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  background-color: #333;
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
+  padding: 16rpx 8rpx;
+  transform: translateX(-50%);
+}
+
+.bubble-menu-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 24rpx;
+  min-width: 120rpx;
+}
+
+.bubble-menu-item:active {
+  background-color: #444;
+  border-radius: 12rpx;
+}
+
+.bubble-menu-icon {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 8rpx;
+  filter: brightness(0) invert(1);
+}
+
+.bubble-menu-text {
+  font-size: 24rpx;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.bubble-menu-arrow {
+  position: absolute;
+  bottom: -16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 16rpx solid transparent;
+  border-right: 16rpx solid transparent;
+  border-top: 16rpx solid #333;
+}

package/miniprogram_dist/components/sidebar/index.js

@@ -49,7 +49,17 @@ Component({
     hasMore: true,          // 是否有更多数据
     currentPage: 1,         // 当前页码
     pageSize: 20,           // 每页数量
-    searchKeyword: ''       // 搜索关键词
+    searchKeyword: '',      // 搜索关键词
+    // 胶囊按钮位置
+    menuButtonTop: 0,
+    menuButtonHeight: 0
+  },
+
+  lifetimes: {
+    attached() {
+      // 获取胶囊按钮位置，确保关闭按钮与其对齐
+      this.initMenuButtonInfo();
+    }
   },
 
   observers: {
@@ -61,6 +71,27 @@ Component({
   },
 
   methods: {
+    /**
+     * 获取胶囊按钮位置信息
+     */
+    initMenuButtonInfo() {
+      try {
+        const menuButton = wx.getMenuButtonBoundingClientRect();
+        this.setData({
+          menuButtonTop: menuButton.top,
+          menuButtonHeight: menuButton.height
+        });
+      } catch (e) {
+        // 降级处理
+        const systemInfo = wx.getSystemInfoSync();
+        const statusBarHeight = systemInfo.statusBarHeight || 20;
+        this.setData({
+          menuButtonTop: statusBarHeight + 4,
+          menuButtonHeight: 32
+        });
+      }
+    },
+
     /**
      * 加载会话列表
      */

package/miniprogram_dist/components/sidebar/index.wxml

@@ -1,8 +1,8 @@
 <view class="sidebar-wrapper {{visible ? 'show' : ''}}">
   <view class="sidebar-container" catchtap="preventBubble">
     <!-- 顶部标题栏（只有关闭按钮） -->
-    <view class="sidebar-header">
-      <view class="close-btn" bindtap="onClose">
+    <view class="sidebar-header" style="padding-top: {{menuButtonTop}}px; height: {{menuButtonHeight}}px;">
+      <view class="close-btn" style="height: {{menuButtonHeight}}px;" bindtap="onClose">
         <image class="close-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-close.svg" mode="aspectFit" />
       </view>
     </view>

package/miniprogram_dist/components/sidebar/index.wxss

@@ -30,21 +30,19 @@
   display: flex;
   align-items: center;
   padding: 0 16rpx;
-  padding-top: env(safe-area-inset-top);
-  height: 88rpx;
+  box-sizing: content-box;
 }
 
 .close-btn {
   width: 64rpx;
-  height: 64rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .close-icon {
-  width: 52rpx;
-  height: 52rpx;
+  width: 50rpx;
+  height: 50rpx;
 }
 
 /* 标题行（对话列表 + 编辑按钮） */

package/miniprogram_dist/index.js

@@ -110,6 +110,10 @@ Component({
     editingContent: '',        // 编辑中的内容
     editingMessage: null,      // 正在编辑的消息
 
+    // 节选复制弹框
+    showSelectCopyModal: false,   // 是否显示节选复制弹框
+    selectCopySegments: [],       // 节选内容段落
+
     // 服务配置（从 serviceUrls 获取）
     serviceUrls: {
       aiChatUrl: '',                     // AI 聊天 API 地址
@@ -194,7 +198,6 @@ Component({
         console.log('[ChatBox] 未提供 data 参数');
         return;
       }
-
       if (isToken) {
         // data 就是 token，直接使用
         this.setData({ userToken: data });
@@ -1120,6 +1123,35 @@ Component({
       });
     },
 
+    // ==================== 节选复制弹框 ====================
+
+    /**
+     * 打开节选复制弹框
+     */
+    onSelectCopy(e) {
+      const { segments } = e.detail;
+      this.setData({
+        showSelectCopyModal: true,
+        selectCopySegments: segments
+      });
+    },
+
+    /**
+     * 关闭节选复制弹框
+     */
+    hideSelectCopyModal() {
+      this.setData({
+        showSelectCopyModal: false
+      });
+    },
+
+    /**
+     * 阻止事件冒泡
+     */
+    stopPropagation() {
+      // 空函数，用于阻止事件冒泡
+    },
+
     // ==================== 语音播放 ====================
 
     /**

package/miniprogram_dist/index.wxml

@@ -115,6 +115,7 @@
           bind:edit="onEditMessage"
           bind:quickreply="onQuickReply"
           bind:imageload="onImageLoad"
+          bind:selectcopy="onSelectCopy"
         />
       </block>
 
@@ -169,4 +170,23 @@
     </view>
   </view>
 </view>
+
+<!-- 节选复制弹框（放在最外层，确保层级最高） -->
+<view wx:if="{{showSelectCopyModal}}" class="select-copy-modal-overlay" catchtap="hideSelectCopyModal">
+  <view class="select-copy-modal" catchtap="stopPropagation">
+    <view class="select-copy-header">
+      <text class="select-copy-title">选择文字复制</text>
+    </view>
+    <scroll-view class="select-copy-content" scroll-y="true">
+      <block wx:for="{{selectCopySegments}}" wx:key="index">
+        <view class="select-copy-segment">
+          <text user-select="{{true}}" space="nbsp">{{item.text}}</text>
+        </view>
+      </block>
+    </scroll-view>
+    <view class="select-copy-footer">
+      <text class="select-copy-cancel" bindtap="hideSelectCopyModal">取消</text>
+    </view>
+  </view>
+</view>
 </view>

package/miniprogram_dist/index.wxss

@@ -289,3 +289,85 @@
   font-size: 22rpx;
   color: #999;
 }
+
+/* 节选复制弹框 */
+.select-copy-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.select-copy-modal {
+  width: 100%;
+  max-height: 70vh;
+  background-color: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.select-copy-header {
+  padding: 32rpx;
+  border-bottom: 1rpx solid #eee;
+  text-align: center;
+}
+
+.select-copy-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.select-copy-content {
+  flex: 1;
+  padding: 24rpx 32rpx;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.select-copy-segment {
+  padding: 20rpx 24rpx;
+  margin-bottom: 16rpx;
+  background-color: #f8f9fa;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #333;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+.select-copy-footer {
+  padding: 16rpx 32rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  display: flex;
+  justify-content: center;
+}
+
+.select-copy-cancel {
+  font-size: 28rpx;
+  color: #007aff;
+  padding: 16rpx 32rpx;
+}
+
+.select-copy-cancel:active {
+  opacity: 0.6;
+}

package/miniprogram_dist/package.json

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

package/package.json

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