@flexem/chat-box 1.0.0

package/miniprogram_dist/components/message/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/components/message/index.wxml

@@ -0,0 +1,285 @@
+<view class="message-item {{message.role === 'user' ? 'user-message' : 'ai-message'}}">
+  <!-- 消息内容区域 -->
+  <view class="message-content">
+    <!-- 用户消息 -->
+    <view wx:if="{{message.role === 'user'}}" class="message-bubble user-bubble">
+      <text class="message-text">{{message.content}}</text>
+
+      <!-- 附件预览 -->
+      <view wx:if="{{message.attachments && message.attachments.length > 0}}" class="attachments">
+        <block wx:for="{{message.attachments}}" wx:key="url">
+          <image
+            wx:if="{{item.type === 'image'}}"
+            class="attachment-image"
+            src="{{item.url}}"
+            mode="widthFix"
+            bindtap="onPreviewImage"
+            bindload="onImageLoad"
+            data-url="{{item.url}}"
+          />
+          <view wx:else class="attachment-file" bindtap="onOpenFile" data-file="{{item}}">
+            <text class="file-icon">📄</text>
+            <text class="file-name">{{item.name}}</text>
+          </view>
+        </block>
+      </view>
+
+      <!-- 用户消息元信息 -->
+      <view class="message-meta">
+        <view class="meta-left">
+          <text class="message-time">{{message.timeText}}</text>
+        </view>
+        <view wx:if="{{showUserActions}}" class="meta-right">
+          <!-- 重新生成按钮 -->
+          <image class="action-icon-img" src="../../assets/icons/icon-regenerate.svg" mode="aspectFit" bindtap="onRegenerate" />
+          <!-- 编辑按钮 -->
+          <image class="action-icon-img" src="../../assets/icons/icon-edit-msg.svg" mode="aspectFit" bindtap="onEdit" />
+        </view>
+      </view>
+    </view>
+
+    <!-- AI 消息 -->
+    <view wx:else class="message-bubble ai-bubble {{message.isError ? 'error-bubble' : ''}}">
+      <!-- 思考过程（可折叠） -->
+      <view wx:if="{{message.thinkingText}}" class="thinking-section">
+        <view class="thinking-header" bindtap="toggleThinking">
+          <image class="thinking-icon" src="../../assets/icons/icon-thinking.svg" mode="aspectFit" />
+          <text class="thinking-title">思考过程</text>
+          <text class="thinking-toggle">{{showThinking ? '收起' : '展开'}}</text>
+        </view>
+        <view wx:if="{{showThinking}}" class="thinking-content">
+          <text>{{message.thinkingText}}</text>
+        </view>
+      </view>
+
+      <!-- Markdown 内容 -->
+      <view class="markdown-content">
+        <block wx:for="{{parsedContent}}" wx:key="id">
+          <!-- 普通段落 -->
+          <view wx:if="{{item.type === 'paragraph'}}" class="md-paragraph">
+            <block wx:for="{{item.text}}" wx:for-item="part" wx:key="idx">
+              <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}} {{part.italic ? 'md-italic' : ''}}">{{part.text}}</text>
+              <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+              <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+              <image
+                wx:elif="{{part.type === 'image'}}"
+                class="md-image md-inline-image"
+                src="{{part.src}}"
+                mode="widthFix"
+                bindtap="onPreviewImage"
+                data-url="{{part.src}}"
+              />
+            </block>
+          </view>
+
+          <!-- 标题 -->
+          <view wx:elif="{{item.type === 'heading'}}" class="md-heading md-h{{item.level}}">
+            <text>{{item.text}}</text>
+          </view>
+
+          <!-- 代码块 -->
+          <view wx:elif="{{item.type === 'code'}}" class="md-code-block">
+            <view class="code-header">
+              <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">
+              <text class="code-text" user-select="{{true}}">{{item.text}}</text>
+            </view>
+          </view>
+
+          <!-- 行内代码 -->
+          <text wx:elif="{{item.type === 'inline-code'}}" class="md-inline-code">{{item.text}}</text>
+
+          <!-- 列表（支持嵌套） -->
+          <view wx:elif="{{item.type === 'list'}}" class="md-list">
+            <view wx:for="{{item.items}}" wx:for-item="listItem" wx:for-index="listIndex" wx:key="listIndex" class="md-list-item-wrapper">
+              <!-- 第一级列表项 -->
+              <view class="md-list-item" style="padding-left: 0;">
+                <text class="list-marker">{{listItem.isOrdered ? (listIndex + 1) + '.' : '•'}}</text>
+                <view class="list-text">
+                  <block wx:for="{{listItem.content}}" wx:for-item="part" wx:key="idx">
+                    <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}} {{part.italic ? 'md-italic' : ''}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+                    <image
+                      wx:elif="{{part.type === 'image'}}"
+                      class="md-image md-inline-image"
+                      src="{{part.src}}"
+                      mode="widthFix"
+                      bindtap="onPreviewImage"
+                      data-url="{{part.src}}"
+                    />
+                  </block>
+                </view>
+              </view>
+
+              <!-- 第二级嵌套列表 -->
+              <block wx:if="{{listItem.children && listItem.children.length > 0}}">
+                <view wx:for="{{listItem.children}}" wx:for-item="childList" wx:key="idx" class="md-nested-list">
+                  <view wx:for="{{childList.items}}" wx:for-item="childItem" wx:for-index="childIndex" wx:key="childIndex" class="md-list-item-wrapper">
+                    <view class="md-list-item" style="padding-left: 32rpx;">
+                      <text class="list-marker">{{childItem.isOrdered ? (childIndex + 1) + '.' : '•'}}</text>
+                      <view class="list-text">
+                        <block wx:for="{{childItem.content}}" wx:for-item="part" wx:key="partIdx">
+                          <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}} {{part.italic ? 'md-italic' : ''}}">{{part.text}}</text>
+                          <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+                          <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+                          <image
+                            wx:elif="{{part.type === 'image'}}"
+                            class="md-image md-inline-image"
+                            src="{{part.src}}"
+                            mode="widthFix"
+                            bindtap="onPreviewImage"
+                            data-url="{{part.src}}"
+                          />
+                        </block>
+                      </view>
+                    </view>
+
+                    <!-- 第三级嵌套列表 -->
+                    <block wx:if="{{childItem.children && childItem.children.length > 0}}">
+                      <view wx:for="{{childItem.children}}" wx:for-item="grandChildList" wx:key="gcIdx" class="md-nested-list">
+                        <view wx:for="{{grandChildList.items}}" wx:for-item="grandChildItem" wx:for-index="grandChildIndex" wx:key="grandChildIndex" class="md-list-item-wrapper">
+                          <view class="md-list-item" style="padding-left: 64rpx;">
+                            <text class="list-marker">{{grandChildItem.isOrdered ? (grandChildIndex + 1) + '.' : '•'}}</text>
+                            <view class="list-text">
+                              <block wx:for="{{grandChildItem.content}}" wx:for-item="part" wx:key="gcPartIdx">
+                                <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}} {{part.italic ? 'md-italic' : ''}}">{{part.text}}</text>
+                                <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+                                <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+                                <image
+                                  wx:elif="{{part.type === 'image'}}"
+                                  class="md-image md-inline-image"
+                                  src="{{part.src}}"
+                                  mode="widthFix"
+                                  bindtap="onPreviewImage"
+                                  data-url="{{part.src}}"
+                                />
+                              </block>
+                            </view>
+                          </view>
+                        </view>
+                      </view>
+                    </block>
+                  </view>
+                </view>
+              </block>
+            </view>
+          </view>
+
+          <!-- 表格 -->
+          <scroll-view wx:elif="{{item.type === 'table'}}" class="md-table-wrapper" scroll-x="true">
+            <view class="md-table">
+              <!-- 表头 -->
+              <view class="md-table-row md-table-header">
+                <view wx:for="{{item.headers}}" wx:for-item="header" wx:for-index="colIndex" wx:key="colIndex"
+                      class="md-table-cell" style="text-align: {{item.alignments[colIndex] || 'left'}}">
+                  <block wx:for="{{header}}" wx:for-item="part" wx:key="idx">
+                    <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+                  </block>
+                </view>
+              </view>
+              <!-- 数据行 -->
+              <view wx:for="{{item.rows}}" wx:for-item="row" wx:for-index="rowIndex" wx:key="rowIndex" class="md-table-row">
+                <view wx:for="{{row}}" wx:for-item="cell" wx:for-index="colIndex" wx:key="colIndex"
+                      class="md-table-cell" style="text-align: {{item.alignments[colIndex] || 'left'}}">
+                  <block wx:for="{{cell}}" wx:for-item="part" wx:key="idx">
+                    <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+                    <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+                  </block>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+
+          <!-- 引用 -->
+          <view wx:elif="{{item.type === 'blockquote'}}" class="md-blockquote">
+            <block wx:for="{{item.text}}" wx:for-item="part" wx:key="idx">
+              <text wx:if="{{part.type === 'text' || !part.type}}" class="{{part.bold ? 'md-bold' : ''}}">{{part.text}}</text>
+              <text wx:elif="{{part.type === 'link'}}" class="md-link" bindtap="onOpenLink" data-url="{{part.url}}">{{part.text}}</text>
+              <text wx:elif="{{part.type === 'code'}}" class="md-inline-code">{{part.text}}</text>
+            </block>
+          </view>
+
+          <!-- 分隔线 -->
+          <view wx:elif="{{item.type === 'hr'}}" class="md-hr"></view>
+
+          <!-- 快捷回复 -->
+          <view wx:elif="{{item.type === 'quick-replies'}}" class="quick-replies">
+            <view
+              wx:for="{{item.options}}"
+              wx:for-item="option"
+              wx:key="*this"
+              class="quick-reply-btn {{isStreaming ? 'disabled' : ''}}"
+              bindtap="onQuickReply"
+              data-option="{{option}}"
+            >
+              <text>{{option}}</text>
+            </view>
+          </view>
+
+          <!-- 图片 -->
+          <image
+            wx:elif="{{item.type === 'image'}}"
+            class="md-image"
+            src="{{item.src}}"
+            mode="widthFix"
+            bindtap="onPreviewImage"
+            data-url="{{item.src}}"
+          />
+
+          <!-- 链接（块级） -->
+          <text
+            wx:elif="{{item.type === 'link'}}"
+            class="md-link"
+            bindtap="onOpenLink"
+            data-url="{{item.url}}"
+          >{{item.text}}</text>
+        </block>
+      </view>
+
+      <!-- 正在输入指示器 -->
+      <view wx:if="{{message.isStreaming}}" class="typing-indicator">
+        <!-- 语音播放中时显示播放动画 -->
+        <block wx:if="{{isPlaying}}">
+          <view class="voice-bar"></view>
+          <view class="voice-bar"></view>
+          <view class="voice-bar"></view>
+        </block>
+        <!-- 未播放时显示打字动画 -->
+        <block wx:else>
+          <view class="typing-dot"></view>
+          <view class="typing-dot"></view>
+          <view class="typing-dot"></view>
+        </block>
+      </view>
+
+      <!-- AI消息元信息 -->
+      <view wx:if="{{!message.isStreaming}}" class="message-meta">
+        <view class="meta-left">
+          <!-- 语音合成中 -->
+          <view wx:if="{{isSynthesizing}}" class="voice-synthesizing">
+            <view class="synthesizing-spinner"></view>
+            <text class="synthesizing-text">语音合成中</text>
+          </view>
+          <!-- 语音播放按钮 -->
+          <view wx:elif="{{isPlaying}}" class="voice-playing" bindtap="onPlayVoice" data-id="{{message.id}}">
+            <view class="voice-bar"></view>
+            <view class="voice-bar"></view>
+            <view class="voice-bar"></view>
+          </view>
+          <image wx:else class="action-icon-img" src="../../assets/icons/icon-play-voice.svg" mode="aspectFit" bindtap="onPlayVoice" data-id="{{message.id}}" />
+        </view>
+        <view class="meta-right">
+          <!-- 复制按钮 -->
+          <image class="action-icon-img" src="../../assets/icons/icon-copy.svg" mode="aspectFit" bindtap="onCopy" />
+        </view>
+      </view>
+    </view>
+  </view>
+</view>