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

interface Message {
  id: string;
  type: 'ai' | 'user' | 'reply';
  contentType: 'text' | 'image' | 'faq';
  content: string;
  questions?: string[];
  timestamp: number;
}

interface FAQItem {
  question: string;
  answer: string;
}

import { api_cozeAgent } from '../../api/login';

const FAQ_LIST: FAQItem[] = [
  { question: '一个账号可以领取几次0元试用？', answer: '每个手机号可分别领取一次【老师端】和一次【学生端】的免费试用，每端试用期均为2天。' },
  { question: '要如何安装软件呢？', answer: '老师端：无需安装，直接在电脑、一体机或希沃等白板的浏览器中访问 https://kt.colexiu.com 即可。推荐使用谷歌浏览器，以获得最佳体验。学生端：可通过手机或平板在应用市场搜索【音乐数字课堂】下载安装，或访问 https://kt.colexiu.com/classroom-app/#/download 获取安装包。' },
  { question: '我想有定制化的需求，怎么办？', answer: '我们为会员提供一次定制化曲目服务。如您有需要，可添加专属客服微信：klx569569 进行咨询。' },
  { question: '如何进行商务合作？', answer: '感谢您的关注！如有商务合作需求，欢迎添加专属客服微信 klx569569，我们会尽快与您沟通。' },
];


Page({
  data: {
    messages: [] as Message[],
    inputValue: '',
    scrollToMessage: '',
    userAvatar: '',
    isLoading: false,
    avatarError: false,
    keyboardHeight: 0,
  },

  onLoad() {
    this.loadUserInfo();
    this.initWelcomeMessages();
  },

  // 加载用户信息
  loadUserInfo() {
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        userAvatar: userInfo.avatarUrl || ''
      });
    }
  },

  // 初始化欢迎消息
  initWelcomeMessages() {
    const messages: Message[] = [];

    // 第一条欢迎消息
    messages.push({
      id: this.generateId(),
      type: 'ai',
      contentType: 'text',
      content: '您好，欢迎来到音乐数字课堂！请问有什么可以帮您的吗？',
      timestamp: Date.now()
    });

    // 第二条常见问题卡片
    messages.push({
      id: this.generateId(),
      type: 'ai',
      contentType: 'faq',
      content: '常见问题',
      questions: FAQ_LIST.map(item => item.question),
      timestamp: Date.now() + 1
    });

    this.setData({ messages }, () => {
      this.scrollToBottom();
    });
  },

  // 生成唯一ID
  generateId(): string {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
  },

  // 滚动到底部
  scrollToBottom() {
    this.setData({
      scrollToMessage: 'last-message'
    });
  },

  // 头像加载失败
  onAvatarError() {
    this.setData({ avatarError: true });
  },

  // 输入框变化
  onInput(e: WechatMiniprogram.Input) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  onKeyboardHeightChange(e: WechatMiniprogram.InputKeyboardHeightChange) {
    const keyboardHeight = e.detail.height || 0;

    if (keyboardHeight === this.data.keyboardHeight) return;

    this.setData({ keyboardHeight }, () => {
      this.scrollToBottom();
    });
  },

  // 发送文字消息
  sendTextMessage() {
    const { inputValue, isLoading } = this.data;

    if (!inputValue.trim() || isLoading) return;

    const content = inputValue.trim();

    // 添加用户消息
    this.addUserMessage('text', content);

    // 清空输入框
    this.setData({ inputValue: '' });

    // 发送到服务器
    this.sendMessageToServer(content, 'text');
  },

  // 添加用户消息
  addUserMessage(contentType: 'text' | 'image', content: string) {
    const { messages } = this.data;
    const newMessage: Message = {
      id: this.generateId(),
      type: 'user',
      contentType,
      content,
      timestamp: Date.now()
    };

    this.setData({
      messages: [...messages, newMessage]
    }, () => {
      this.scrollToBottom();
    });
  },

  // 选择图片
  chooseImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath;
        this.uploadImage(tempFilePath);
      },
      fail: (err) => {
        console.error('选择图片失败:', err);
        wx.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  },

  // 上传图片
  uploadImage(filePath: string) {
    // 先显示本地图片
    this.addUserMessage('image', filePath);

    // 获取全局配置
    const app = getApp<IAppOption>();
    const baseUrl = app.globalData?.baseUrl || 'https://test.kt.colexiu.com';

    // 上传图片到服务器
    wx.uploadFile({
      url: `${baseUrl}/edu-app/ai/chat/upload`,
      filePath: filePath,
      name: 'file',
      header: {
        'Authorization': wx.getStorageSync('token') || ''
      },
      success: (res) => {
        try {
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            // 上传成功，发送图片URL到聊天
            this.sendMessageToServer(data.data.url, 'image');
          } else {
            throw new Error(data.msg || '上传失败');
          }
        } catch (err) {
          console.error('解析上传响应失败:', err);
          this.addReplyMessage('图片上传失败，请重试');
        }
      },
      fail: (err) => {
        console.error('上传图片失败:', err);
        // 模拟成功，直接回复
        setTimeout(() => {
          this.addReplyMessage('我已收到您的图片，请问有什么可以帮助您的吗？');
        }, 1000);
      }
    });
  },

  // 发送消息到服务器
  async sendMessageToServer(content: string, contentType: 'text' | 'image') {
    this.setData({ isLoading: true });

    // 获取用户ID（优先使用openid，其次使用token中的用户ID）
    const userInfo = wx.getStorageSync('userInfo') || {};
    const userId = userInfo.openId || userInfo.userId || wx.getStorageSync('openId');

    // 构建消息内容（图片发送固定提示语）
    const messageContent = contentType === 'image' ? '我发送了一张图片' : content;

    try {
      // 调用客服消息接口
      const {data}: any = await api_cozeAgent({
        message: messageContent,
        userId: userId
      });
      if (data.code === 200 && data.data) {
        // 使用接口返回的回复内容
        const reply =data.data || '您好，我已经收到您的问题。';
        this.addReplyMessage(reply);
      } else {
        // 接口返回错误，使用默认回复
        this.handleDefaultReply(contentType);
      }
    } catch (err) {
      console.error('客服接口调用失败:', err);
      // 接口调用失败，使用默认回复
      this.handleDefaultReply(contentType);
    } finally {
      this.setData({ isLoading: false });
    }
  },

  // 处理默认回复（当接口调用失败时使用）
  handleDefaultReply(contentType: 'text' | 'image') {
    let reply = '';
    if (contentType === 'image') {
      reply = '我已收到您的图片，请问有什么可以帮助您的吗？';
    } else {
      reply = '您好，我已经收到您的问题。我们的客服人员会尽快为您解答。如果您有其他问题，也可以继续提问。';
    }
    this.addReplyMessage(reply);
  },

  // 添加AI回复消息
  addReplyMessage(content: string) {
    const { messages } = this.data;
    const replyMessage: Message = {
      id: this.generateId(),
      type: 'reply',
      contentType: 'text',
      content,
      timestamp: Date.now()
    };

    this.setData({
      messages: [...messages, replyMessage]
    }, () => {
      this.scrollToBottom();
    });
  },

  // 点击常见问题
  onFaqTap(e: WechatMiniprogram.Tap) {
    const index = e.currentTarget.dataset.index;
    const faq = FAQ_LIST[index];

    if (faq) {
      // 添加用户选择的问题
      this.addUserMessage('text', faq.question);

      // 直接回复固定内容
      setTimeout(() => {
        this.addReplyMessage(faq.answer);
      }, 500);
    }
  },

  // 点击图片预览
  onImageTap(e: any) {
    const url = e.currentTarget.dataset.url;
    if (url) {
      wx.previewImage({
        urls: [url],
        current: url
      });
    }
  }
});