classroom-music-activation/miniprogram/pages/chat/chat.wxml

<navigation-bar title="音乐数字AI客服" back-btn="{{true}}" bg-color="#E8F4FC"></navigation-bar>

<view class="chat-container">
  <!-- 聊天消息列表 -->
  <scroll-view class="chat-scroll" scroll-y scroll-into-view="{{scrollToMessage}}" enhanced show-scrollbar="{{false}}">
    <view class="message-list">
      <block wx:for="{{messages}}" wx:key="id">
        <!-- AI消息 -->
        <view wx:if="{{item.type === 'ai'}}" class="message-row ai-row">
          <view class="avatar ai-avatar">
            <image class="ai-avatar-image" src="https://oss.dayaedu.com/ktyq/ai-avatar.png" mode="aspectFill" binderror="onAvatarError"></image>
          </view>
          <view class="message-content">
            <!-- 文本消息 -->
            <view wx:if="{{item.contentType === 'text'}}" class="bubble ai-bubble">
              <text class="message-text">{{item.content}}</text>
            </view>
            <!-- 常见问题卡片 -->
            <view wx:if="{{item.contentType === 'faq'}}" class="faq-card">
              <view class="faq-header">
                <text class="faq-title">常见问题</text>
              </view>
              <view class="faq-list">
                <view wx:for="{{item.questions}}" wx:key="index" wx:for-item="question" class="faq-item" data-index="{{index}}" bindtap="onFaqTap">
                  <view class="faq-icon">
                    <text class="faq-icon-text">#</text>
                  </view>
                  <text class="faq-text">{{question}}</text>
                  <text class="faq-arrow">›</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 用户消息 -->
        <view wx:if="{{item.type === 'user'}}" class="message-row user-row">
          <view class="message-content">
            <view wx:if="{{item.contentType === 'text'}}" class="bubble user-bubble">
              <text class="message-text">{{item.content}}</text>
            </view>
            <view wx:if="{{item.contentType === 'image'}}" class="user-image">
              <image src="{{item.content}}" mode="aspectFit" show-menu-by-longpress></image>
            </view>
          </view>
          <view class="avatar user-avatar">
            <image wx:if="{{userAvatar}}" src="{{userAvatar}}" mode="aspectFill"></image>
            <text wx:else class="avatar-text">我</text>
          </view>
        </view>

        <!-- AI回复（用户问题答案） -->
        <view wx:if="{{item.type === 'reply'}}" class="message-row ai-row">
          <view class="avatar ai-avatar">
            <image class="ai-avatar-image" src="https://oss.dayaedu.com/ktyq/ai-avatar.png" mode="aspectFill"></image>
          </view>
          <view class="message-content">
            <view class="bubble ai-bubble">
              <text class="message-text">{{item.content}}</text>
            </view>
          </view>
        </view>
      </block>

      <!-- 加载中状态 -->
      <view wx:if="{{isLoading}}" class="message-row ai-row loading-row">
        <view class="avatar ai-avatar">
          <image class="ai-avatar-image" src="https://oss.dayaedu.com/ktyq/ai-avatar.png" mode="aspectFill"></image>
        </view>
        <view class="loading-bubble">
          <view class="loading-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>

      <view id="last-message"></view>
    </view>
  </scroll-view>

  <!-- 输入区域 -->
  <view class="input-area">
    <view class="input-container">
      <view class="input-wrapper">
        <view class="voice-btn">
          <text class="voice-icon">🎤</text>
        </view>
        <input
          class="chat-input"
          placeholder="请输入您的问题..."
          placeholder-class="placeholder"
          value="{{inputValue}}"
          bindinput="onInput"
          confirm-type="send"
          bindconfirm="sendTextMessage"
        />
      </view>
      <view class="image-btn" bindtap="chooseImage">
        <text class="image-icon">🖼️</text>
      </view>
    </view>
  </view>
</view>