vue模拟聊天界面和机器人对话框左右两侧对话的代码

好的，以下是一个简单的 Vue.js 组件，可以模拟左右两侧的聊天对话框：

<template>
  <div class="chat-container">
    <div class="chat-box left" v-for="message in messages" :key="message.id" v-if="message.isLeft">
      {{ message.text }}
    </div>
    <div class="chat-box right" v-for="message in messages" :key="message.id" v-else>
      {{ message.text }}
    </div>
    <div class="input-box">
      <input type="text" v-model="currentMessage" @keyup.enter="sendMessage" placeholder="请输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      currentMessage: "",
    };
  },
  methods: {
    sendMessage() {
      if (this.currentMessage.trim().length === 0) {
        return;
      }
      this.messages.push({
        id: new Date().getTime(),
        text: this.currentMessage,
        isLeft: this.messages.length % 2 === 0,
      });
      this.currentMessage = "";
    },
  },
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-box {
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 5px;
  max-width: 70%;
}

.left {
  align-self: flex-start;
  background-color: #eee;
}

.right {
  align-self: flex-end;
  background-color: #ffcc99;
}

.input-box {
  display: flex;
  margin: 10px;
}

.input-box input {
  flex: 1;
  margin-right: 10px;
}

.input-box button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
}
</style>

你可以在 `messages` 数组中添加机器人和用户的消息，然后通过 `isLeft` 属性来控制消息框显示在左侧还是右侧。假设你已经有了一个可以对话的机器人，你可以将机器人的回答添加到 `messages` 中，并设置 `isLeft` 为 `false`，这样机器人的回答就会显示在右侧框中，用户的消息就会显示在左侧框中。

这只是一个简单的实现，如果你需要更加复杂的功能，比如支持图片、语音等消息类型，那么你需要根据具体的需求来进行扩展。