手把手教你从0到1集成混元AI问答客服系统

<template>
  <div class="chat-window">
    <div class="chat-header">Fanstuck</div> 
    <div class="messages">
      <div v-if="isLoading" class="load">
        <hr/><hr/><hr/><hr/>
      </div>
      <div v-for="(message, index) in messages" :key="index" class="message" :class="{ 'user': message.sender === 'user', 'bot': message.sender === 'bot' }">
        <div class="avatar">
          <img v-if="message.sender === 'user'" :src="userAvatar" alt="User">
          <img v-else :src="botAvatar" alt="Bot">
        </div>
        <div v-if="message.sender === 'bot' && message.isTyping" class="typing" :ref="'typeitContainer' + index"></div>
        <div v-else class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="input-area">
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." class="input-field" :disabled="isSending"/>
      <button @click="sendMessage" class="send-button" :disabled="isSending || !newMessage.trim()">发送</button>
    </div>
  </div>
</template>
​

methods: {
    async startChat(){
      try{
        const response = await axios.post('http://localhost:8080/api/chats/start');
        this.chatCode = response.data; // 将后端返回的 chatCode 保存在前端
        console.log('Chat started with code:', this.chatCode);
      } catch (error) {
        console.error('Failed to start chat:', error);
        this.messages.push({ sender: 'bot', content: '无法启动对话。请稍后再试。' });
      }
    },
​
    async sendMessage() {
      if (!this.newMessage.trim()) return; // 确保不发送空消息
      this.isSending = true; // 开始发送，禁用发送按钮
      this.isLoading = true;
​
      // 添加用户消息到对话
      this.messages.push({ sender: 'user', content: this.newMessage, isTyping: false });
      
      // 如果 chatCode 为空，先调用 startChat 获取
      if (!this.chatCode) {
              await this.startChat();
              if (!this.chatCode) {
                this.isSending = false;
                this.isLoading = false;
                return; // 如果获取 chatCode 失败，停止发送
              }
            }
​
      try {
      // 模拟异步获取机器人回复
      setTimeout(async () => {
        // 向Spring Boot后端发送POST请求
        const response = await axios.post(`http://localhost:8080/api/chats/${this.chatCode}/ask`, {
          prompt: this.newMessage // 使用POST请求并传递JSON格式的数据
        });
​
        const botMessageContent = response.data.reply; // 根据后端响应的结构获取消息内容
        
        this.messages.push({ sender: 'bot', content: botMessageContent, isTyping: true });
​
        setTimeout(() => {
          const botMessageIndex = this.messages.length -1 ;
          const container = this.$refs[`typeitContainer${botMessageIndex}`];
          if (container) {
            new TypeIt(container[0], {
              strings: [botMessageContent],
              speed: 50,
              afterComplete: (instance) => {
                this.messages[botMessageIndex].isTyping = false;
                instance.destroy(); // 强制更新以显示完整消息
              }
            }).go();
          }
        },0);
​
        this.isLoading = false;
        // 清空输入框
        this.newMessage = '';
        this.isSending = false; // 结束发送，允许再次发送
      }, 1000); // 假设1秒后收到回复
    } catch (error) {
      console.error('获取回复失败:', error);
      // 处理错误情况，例如添加一条错误消息到对话
      this.messages.push({ sender: 'bot', content: '抱歉，无法获取回复。' });
    }

Slf4j
@Service
public class TencentyiServicelmpl implements TencentiService{
    @Resource
    private TencentProperties aliyunProperties;
    @Autowired
    private AiChatTencentRespRepository aiChatTencentRespRepository;
    @Override
    public TencentChatRespDto chat(TencentChatReqDto dto) {
        try {
            // 构建API调用参数
            ApplicationParam param = ApplicationParam.builder()
                    .apiKey(TencentProperties.getTongyi().getApiKey())
                    .appId(TencentProperties.getTongyi().getChatAppId())
                    .prompt(dto.getPrompt())
                    .build();
            Application application = new Application();
            ApplicationResult result = application.call(param);
            // 创建返回对象
            AiResponse response = new AiResponse(result.getRequestId(), dto.getPrompt(), result.getOutput().getText(), result.getOutput().getFinishReason(), result.getUsage());
            // 将 AiResponse 转换为实体类 AiChatTongyiRespPo
            AiChatTencentRespPo po = AiResponseToPoConverter.convert(response);
            aiChatTencentRespRepository.saveAiResponse(po);
            return new TencentChatRespDto().setReply(result.getOutput().getText());
​
        }catch (Exception e){
            log.error("调用大模型未知错误", e);
            throw new RuntimeException("调用失败", e);
        }
    }
}

public class AiChatAskServiceImpl implements AiChatAskService {
    @Resource
    private AiChatAskRepository askRepository;
    @Resource
    private AiyunTongyiService tongyiService;
​
    @Override
    public String startChat() {
        return IdUtil.fastSimpleUUID();
    }
​
    @Override
    public AiChatAsk ask(String chatCode, String prompt) {
        AiChatAsk ask = new AiChatAsk(new AiChatAskInfo(chatCode, prompt));
        ask.start();
​
        TongyiChatRespDto resp = tongyiService.chat(new TongyiChatReqDto()
                .setAskCode(ask.getAskInfo().getAskCode())
                .setPrompt(prompt));
        ask.reply(resp.getReply());
​
        askRepository.save(ask);
        return ask;
    }
    @Override
    public void evaluate(AiChatAsk ask, Integer evaluate) {
        ask.evaluate(evaluate);
        askRepository.saveOnEvaluate(ask);
    }
​
}