用vue3实现

要用 Vue 3 实现一个对话框，可以按照以下步骤进行：

1. 创建一个新的 Vue 3 项目，并安装所需的依赖项。可以使用 Vue CLI 来创建项目，也可以手动安装 Vue 3。

2. 在 App.vue 文件中添加一个文本输入框和一个按钮，用于向 AI 发送消息。

3. 创建一个对话框组件 Dialog，用于显示 AI 和用户之间的对话。在组件中，可以使用 v-for 指令来循环渲染对话消息。

4. 在 Dialog 组件中，使用 ref 来引用对话框的底部，以便每次添加新消息时自动滚动到底部。

5. 创建一个 ChatBot 类，用于与 AI 进行通信，并处理 AI 发送回来的消息。可以使用 axios 或 fetch 来发送 HTTP 请求，获取 AI 的响应。

6. 在 App.vue 中，创建 ChatBot 实例，并在用户点击发送按钮时调用 ChatBot 的 sendMessage 方法，将用户输入的消息发送给 AI。同时在 ChatBot 接收到 AI 的响应后，将响应消息添加到 Dialog 组件中。

7. 在 ChatBot 类中，可以使用 Promise 或 async/await 来处理异步操作，以确保在获取到 AI 的响应后再渲染对话框。

下面是一个简单的示例代码，帮助你更好地理解如何使用 Vue 3 实现对话框：

<template>
  <div class="container">
    <Dialog :messages="messages" ref="dialog"></Dialog>
    <div class="input-container">
      <input type="text" v-model="message" @keyup.enter="sendMessage">
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
import Dialog from './components/Dialog.vue'
import ChatBot from './ChatBot'

export default {
  name: 'App',
  components: {
    Dialog
  },
  data() {
    return {
      message: '',
      messages: []
    }
  },
  methods: {
    async sendMessage() {
      if (!this.message) return
      this.messages.push({ text: this.message, isUser: true })
      this.message = ''
      const response = await ChatBot.sendMessage(this.message)
      this.messages.push({ text: response, isUser: false })
      this.$nextTick(() => {
        this.$refs.dialog.scrollToBottom()
      })
    }
  }
}
</script>

Dialog.vue：

<template>
  <div class="dialog-container">
    <div class="dialog" ref="dialog">
      <div class="message" v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.isUser }">
        {{ message.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    messages: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    scrollToBottom() {
      this.$refs.dialog.scrollTop = this.$refs.dialog.scrollHeight
    }
  }
}
</script>

ChatBot.js：

const API_URL = '<AI_API_URL>'

export default class ChatBot {
  static async sendMessage(message) {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ message })
    })
    const data = await response.json()
    return data.message
  }
}

其中，API_URL 是指 AI 的 API 地址，需要根据实际情况进行替换。同时可以根据自己的需求进行更改和扩展。