帮我写一个vue3的简易ai问答聊天界面

当然可以！下面是一个简单的Vue 3的AI问答聊天界面的示例代码：

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div v-if="message.from === 'user'" class="user-message">
          {{ message.content }}
        </div>
        <div v-else class="ai-message">
          {{ message.content }}
        </div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="请输入您的问题" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: []
    }
  },
  methods: {
    sendMessage() {
      const userMessage = {
        from: 'user',
        content: this.inputMessage
      }
      this.messages.push(userMessage)

      // 调用后端API发送用户问题并获取回答
      // 这里使用了一个假的回答作为示例
      const aiMessage = {
        from: 'ai',
        content: '这是一个假的回答'
      }
      this.messages.push(aiMessage)

      this.inputMessage = ''
    }
  }
}
</script>

<style scoped>
.chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
}

.chat-messages {
  height: 80%;
  padding: 10px;
  overflow-y: scroll;
}

.message {
  margin-bottom: 10px;
}

.user-message {
  background-color: #f0f0f0;
  padding: 5px;
}

.ai-message {
  background-color: #e0e0e0;
  padding: 5px;
}

.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex-grow: 1;
  padding: 5px;
  margin-right: 10px;
}

.chat-input button {
  padding: 5px 10px;
}
</style>

这个Vue组件包含了一个输入框和一个消息列表，用户可以在输入框中输入问题，并点击发送按钮发送问题。然后，组件会将用户的问题显示在消息列表中，并调用后端API获取回答。这里使用一个假的回答作为示例，你需要根据实际情况替换为调用真实的AI问答服务的逻辑。

希望这个示例对你有帮助！如果有任何问题，请随时向我提问。