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

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

<!-- 背景图 -->
<image class="bg-image" src="./images/bg.png" mode="aspectFill"></image>

<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' && item.contentType === 'text'}}" class="message-row ai-row">
          <!-- AI头像 -->
          <view class="avatar ai-avatar">
            <image class="ai-avatar-image" src="./images/ai-avatar.png" mode="aspectFill" binderror="onAvatarError" wx:if="{{!avatarError}}"></image>
            <text wx:if="{{avatarError}}" class="avatar-fallback">AI</text>
          </view>
          <view class="message-content">
            <view class="bubble ai-bubble">
              <text class="message-text">{{item.content}}</text>
            </view>
          </view>
        </view>

        <!-- 常见问题卡片（不带头像） -->
        <view wx:if="{{item.type === 'ai' && item.contentType === 'faq'}}" class="message-row faq-row">
          <view class="message-content faq-content-full">
            <view class="faq-card">
              <view class="faq-header">
                <image class="faq-header-img" src="./images/faq-header.png" mode="aspectFit"></image>
              </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">
                  <image class="faq-icon-img" src="./images/faq-icon.png" mode="aspectFit"></image>
                  <text class="faq-text">{{question}}</text>
                  <image class="faq-arrow-img" src="./images/arrow-right.png" mode="aspectFit"></image>
                </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="aspectFill" bindtap="onImageTap" data-url="{{item.content}}"></image>
            </view>
          </view>
          <view class="avatar user-avatar">
            <image wx:if="{{userAvatar}}" src="{{userAvatar}}" mode="widthFix"></image>
            <image wx:else src="./images/user-avatar.png" mode="widthFix"></image>
          </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="./images/ai-avatar.png" mode="aspectFill" binderror="onAvatarError" wx:if="{{!avatarError}}"></image>
            <text wx:if="{{avatarError}}" class="avatar-fallback">AI</text>
          </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="./images/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">
        <input
          class="chat-input"
          placeholder="请输入您的问题..."
          placeholder-class="placeholder"
          value="{{inputValue}}"
          bindinput="onInput"
          confirm-type="send"
          bindconfirm="sendTextMessage"
          adjust-position
          cursor-spacing="20"
        />
      </view>
      <view class="send-btn" bindtap="sendTextMessage">
        <text class="send-btn-text">发送</text>
      </view>
    </view>
  </view>
</view>