@flexem/chat-box 1.0.0

package/miniprogram_dist/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "sidebar": "./components/sidebar/index",
+    "message-item": "./components/message/index",
+    "input-bar": "./components/input-bar/index"
+  }
+}

package/miniprogram_dist/index.wxml

@@ -0,0 +1,172 @@
+<view class="chat-box-wrapper">
+  <!-- 侧边栏（固定在左侧底层） -->
+  <sidebar
+    id="sidebar"
+    visible="{{showSidebar}}"
+    baseUrl="{{serviceUrls.aiChatUrl}}"
+    token="{{userToken}}"
+    currentSessionId="{{currentSession.id}}"
+    username="{{userInfo.name || ''}}"
+    userAvatar="{{userInfo.avatar || ''}}"
+    bind:select="onSelectSession"
+    bind:delete="onDeleteSession"
+    bind:close="closeSidebar"
+    bind:login="onNeedLogin"
+  />
+
+  <!-- 主聊天容器（会滑动） -->
+  <view class="chat-box-container {{showSidebar ? 'sidebar-open' : ''}}">
+    <!-- 侧边栏打开时的点击关闭遮罩 -->
+    <view wx:if="{{showSidebar}}" class="sidebar-close-overlay" bindtap="closeSidebar"></view>
+
+    <!-- 标题栏 -->
+  <view class="header-bar" style="height: {{navBarHeight}}px; padding-top: {{menuButtonTop}}px;">
+    <!-- 左侧胶囊按钮 -->
+    <view class="capsule-btn" style="height: {{menuButtonHeight}}px; border-radius: {{menuButtonHeight / 2}}px;">
+      <!-- 返回按钮 -->
+      <view class="capsule-item" style="height: {{menuButtonHeight}}px;" bindtap="onBack">
+        <image class="back-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-back.svg" mode="aspectFit" />
+      </view>
+      <!-- 分割线 -->
+      <view class="capsule-divider"></view>
+      <!-- 菜单按钮 -->
+      <view class="capsule-item" style="height: {{menuButtonHeight}}px;" bindtap="openSidebar">
+        <image class="menu-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-menu.svg" mode="aspectFit" />
+      </view>
+    </view>
+
+    <!-- 中间标题 -->
+    <view class="header-center" style="height: {{menuButtonHeight}}px;" bindtap="toggleDropdown">
+      <text class="header-title">{{'Chat'}} </text>
+      <image
+        class="dropdown-arrow"
+        src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-arrow-{{showDropdown ? 'up' : 'down'}}.svg"
+        mode="aspectFit"
+      />
+    </view>
+
+    <!-- 右侧占位 -->
+    <view class="header-right"></view>
+
+    <!-- 下拉菜单 -->
+    <view wx:if="{{showDropdown}}" class="dropdown-menu">
+      <view class="dropdown-item" bindtap="onNewChat">
+        <text>开始新对话</text>
+      </view>
+      <view class="dropdown-divider"></view>
+      <view class="dropdown-item" bindtap="toggleVoiceAutoPlay">
+        <text>语音播放</text>
+        <view class="toggle-switch {{settings.voiceAutoPlay ? 'on' : ''}}">
+          <view class="toggle-thumb"></view>
+        </view>
+      </view>
+      <!-- 深度思考（暂时隐藏）
+      <view class="dropdown-item" bindtap="toggleDeepThinking">
+        <text class="dropdown-icon">🧠</text>
+        <text>深度思考</text>
+        <view class="toggle-switch {{settings.deepThinking ? 'on' : ''}}">
+          <view class="toggle-thumb"></view>
+        </view>
+      </view>
+      -->
+      <!-- 联网搜索（暂时隐藏）
+      <view class="dropdown-item" bindtap="toggleWebSearch">
+        <text class="dropdown-icon">🌐</text>
+        <text>联网搜索</text>
+        <view class="toggle-switch {{settings.webSearch ? 'on' : ''}}">
+          <view class="toggle-thumb"></view>
+        </view>
+      </view>
+      -->
+    </view>
+
+    <!-- 下拉菜单遮罩 -->
+    <view wx:if="{{showDropdown}}" class="dropdown-mask" bindtap="closeDropdown"></view>
+  </view>
+
+  <!-- 消息列表区域 -->
+  <scroll-view
+    class="message-list"
+    style="margin-top: {{navBarHeight}}px; padding-bottom: {{keyboardHeight > 0 ? (keyboardHeight + inputBarHeight + 40) : (94 + attachmentHeight + inputBarHeight)}}px;"
+    scroll-y="true"
+    scroll-into-view="{{scrollToMessage}}"
+    enhanced="true"
+    show-scrollbar="false"
+    bindscrolltoupper="onScrollToUpper"
+  >
+    <!-- 加载更多 -->
+    <view wx:if="{{hasMoreHistory}}" class="load-more-history">
+      <text bindtap="loadMoreHistory">{{isLoadingHistory ? '加载中...' : '加载更多历史消息'}}</text>
+    </view>
+
+    <!-- 消息列表 -->
+    <view class="message-wrapper">
+      <block wx:for="{{messages}}" wx:key="id">
+        <message-item
+          id="msg-{{item.id}}"
+          message="{{item}}"
+          userAvatar="{{userInfo.avatar}}"
+          showUserActions="{{item.role === 'user' && !isStreaming}}"
+          isPlaying="{{playingMessageId === item.id}}"
+          isSynthesizing="{{synthesizingMessageId === item.id}}"
+          isStreaming="{{isStreaming}}"
+          bind:playvoice="onPlayVoice"
+          bind:regenerate="onRegenerate"
+          bind:edit="onEditMessage"
+          bind:quickreply="onQuickReply"
+          bind:imageload="onImageLoad"
+        />
+      </block>
+
+      <!-- 正在生成中的消息 -->
+      <message-item
+        wx:if="{{streamingMessage}}"
+        id="msg-streaming"
+        message="{{streamingMessage}}"
+        userAvatar="{{userInfo.avatar}}"
+        showUserActions="{{false}}"
+        isPlaying="{{playingMessageId === streamingMessage.id}}"
+        isSynthesizing="{{synthesizingMessageId === streamingMessage.id}}"
+        isStreaming="{{true}}"
+      />
+    </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>
+
+  <!-- 底部区域（输入栏 + 免责声明） -->
+  <view class="bottom-area {{keyboardHeight > 0 ? 'keyboard-visible' : ''}}" style="bottom: {{keyboardHeight}}px;">
+    <!-- 输入栏 -->
+    <input-bar
+      id="input-bar"
+      placeholder="输入消息..."
+      voiceToText="{{voiceToText}}"
+      speechRecognitionManager="{{speechRecognitionManager}}"
+      baseUrl="{{serviceUrls.aiChatUrl}}"
+      ossServiceUrl="{{serviceUrls.ossServiceUrl}}"
+      blobStorageDownloadServiceUrl="{{serviceUrls.blobStorageDownloadServiceUrl}}"
+      token="{{userToken}}"
+      defaultValue="{{editingContent}}"
+      isGenerating="{{isStreaming}}"
+      bind:send="onSendMessage"
+      bind:stop="onStopGeneration"
+      bind:keyboardheight="onKeyboardHeight"
+      bind:attachmentheight="onAttachmentHeight"
+      bind:inputheight="onInputHeight"
+    />
+
+    <!-- 免责声明（键盘弹出时隐藏） -->
+    <view class="disclaimer" wx:if="{{keyboardHeight === 0}}">
+      <text>内容由 AI 生成，请仔细甄别</text>
+    </view>
+  </view>
+</view>
+</view>

package/miniprogram_dist/index.wxss

@@ -0,0 +1,291 @@
+/* 外层包裹器 */
+.chat-box-wrapper {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #F3F3F3;
+}
+
+/* 主容器 */
+.chat-box-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  background-color: #F3F3F3;
+  position: relative;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+/* 侧边栏打开时主容器滑到右侧并缩小高度 */
+.chat-box-container.sidebar-open {
+  transform: translateX(85vw);
+  margin-top: 200rpx;
+  margin-bottom: 200rpx;
+  height: calc(100vh - 400rpx);
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: -4rpx 0 20rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 侧边栏打开时的点击关闭遮罩 */
+.sidebar-close-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background-color: transparent;
+}
+
+/* 标题栏 */
+.header-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-left: 16rpx;
+  padding-right: 30rpx;
+  background-color: #F3F3F3;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  box-sizing: border-box;
+}
+
+.header-right {
+  width: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 胶囊按钮 */
+.capsule-btn {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1rpx solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+}
+
+.capsule-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70rpx;
+}
+
+.capsule-item:active {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.capsule-item:first-child:active {
+  border-radius: 50rpx 0 0 50rpx;
+}
+
+.capsule-item:last-child:active {
+  border-radius: 0 50rpx 50rpx 0;
+}
+
+.capsule-divider {
+  width: 1rpx;
+  height: 32rpx;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+/* 返回图标 */
+.back-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+
+/* 菜单图标 */
+.menu-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+
+/* 标题区域 */
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.header-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-arrow {
+  width: 44rpx;
+  height: 44rpx;
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
+  min-width: 320rpx;
+  overflow: hidden;
+  z-index: 200;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 30rpx;
+  gap: 16rpx;
+}
+
+.dropdown-item:active {
+  background-color: #f5f5f5;
+}
+
+.dropdown-icon {
+  font-size: 32rpx;
+}
+
+.dropdown-item text:nth-child(2) {
+  flex: 1;
+  font-size: 30rpx;
+  color: #333;
+}
+
+.dropdown-divider {
+  height: 1rpx;
+  background-color: #eee;
+}
+
+/* 开关样式 */
+.toggle-switch {
+  width: 80rpx;
+  height: 44rpx;
+  background-color: #ddd;
+  border-radius: 22rpx;
+  padding: 4rpx;
+  transition: background-color 0.2s;
+}
+
+.toggle-switch.on {
+  background-color: #007aff;
+}
+
+.toggle-thumb {
+  width: 36rpx;
+  height: 36rpx;
+  background-color: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.on .toggle-thumb {
+  transform: translateX(36rpx);
+}
+
+/* 下拉菜单遮罩 */
+.dropdown-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 150;
+}
+
+/* 消息列表 */
+.message-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.message-wrapper {
+  padding-bottom: 20rpx;
+}
+
+/* 加载更多历史 */
+.load-more-history {
+  display: flex;
+  justify-content: center;
+  padding: 30rpx;
+}
+
+.load-more-history text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 30rpx;
+}
+
+.empty-text {
+  font-size: 34rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.empty-hint {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 底部占位 */
+.scroll-bottom-spacer {
+  height: 20rpx;
+}
+
+/* 底部区域 */
+.bottom-area {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #F3F3F3;
+  z-index: 99;
+}
+
+/* 键盘弹出时，不需要免责声明的空间，输入栏紧贴底部 */
+.bottom-area.keyboard-visible {
+  padding-bottom: 0;
+}
+
+/* 免责声明 */
+.disclaimer {
+  display: flex;
+  justify-content: center;
+  padding: 8rpx 16rpx;
+  padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
+  background-color: #F3F3F3;
+}
+
+.disclaimer text {
+  font-size: 22rpx;
+  color: #999;
+}

package/miniprogram_dist/package.json

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