vue聊天对话ai流式输出

在Vue中实现AI流式输出，通常涉及到监听滚动事件以判断用户是否正在阅读聊天记录，并在适当的时候触发AI生成新的回复。以下是一个简化的示例：

<template>
  <div class="chat-container">
    <div class="chat-messages" ref="chatMessages">
      <div v-for="(message, index) in messages" :key="index" class="chat-message">
        {{ message.content }}
      </div>
    </div>
    <div class="chat-input">
      <input v-model="userInput" @keyup.enter="sendMessage" placeholder="输入消息" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messages: [],
      userInput: '',
      aiTyping: false,
      aiThrottle: 5000, // 5秒
      aiTimer: null,
    };
  },
  methods: {
    sendMessage() {
      if (this.userInput.trim() === '') {
        return;
      }
      this.messages.push({ content: this.userInput, type: 'user' });
      this.userInput = '';
      this.startAITyping();
    },
    startAITyping() {
      if (this.aiTimer) {
        clearTimeout(this.aiTimer);
      }
      this.aiTyping = true;
      this.aiTimer = setTimeout(() => {
        this.aiTyping = false;
        this.aiTimer = null;
        this.generateAIReply();
      }, this.aiThrottle);
    },
    generateAIReply() {
      // 模拟AI回复的生成
      const aiReply = { content: 'AI回复内容', type: 'ai' };
      this.messages.push(aiReply);
      // 滚动到底部
      this.$nextTick(() => {
        this.$refs.chatMessages.scrollTop = this.$refs.chatMessages.scrollHeight;
      });
    },
  },
};
</script>
 
<style>
.chat-container {
  height: 500px;
  overflow: hidden;
  position: relative;
}
.chat-messages {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 50px; /* 留出空间供AI回复 */
}
.chat-message {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.chat-input {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>

在这个例子中，.chat-messages 容器被设置了固定高度并且有滚动条，以便用户可以滚动查看聊天记录。输入框位于容器的底部，使得用户可以直接进行回复。

当用户发送一条消息时，sendMessage 方法会被触发，消息被推送到 messages 数组，AI回复的生成也被延迟了一段时间（模拟的throttle），以模拟用户在阅读消息时不触发AI回复。AI回复被推送到 messages 数组后，通过 $nextTick 方法和 scrollTop 属性确保滚动到底部，以便用户可以看到最新的消息。