帮我写一份用vue2开发的聊天机器人前端页面

好的，以下是一个简单的用Vue2开发的聊天机器人前端页面示例（仅供参考）：

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" class="chat-message" :class="{ 'is-user': message.isUser }">
        <div class="chat-message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" v-model="inputMessage" @keyup.enter="sendMessage" placeholder="请输入消息...">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 聊天记录
      inputMessage: '' // 输入框中的消息
    }
  },
  methods: {
    // 发送消息
    sendMessage() {
      const message = this.inputMessage.trim()
      if (!message) {
        return
      }
      this.messages.push({
        content: message,
        isUser: true // 标记为用户发送的消息
      })
      // TODO: 调用后端接口获取聊天机器人的回复消息
      this.inputMessage = ''
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
}
.chat-message {
  margin: 10px;
  padding: 10px;
  max-width: 80%;
  border-radius: 10px;
}
.chat-message-content {
  word-break: break-all;
}
.chat-message.is-user {
  align-self: flex-end;
  background-color: #409EFF;
  color: #fff;
}
.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.chat-input input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
.chat-input button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #409EFF;
  color: #fff;
  cursor: pointer;
}
</style>

这里的示例代码只包含了最基本的聊天界面和用户输入消息的发送功能，具体的聊天机器人回复消息的逻辑需要自己实现。如果您需要更加复杂的功能，比如支持多人聊天、聊天记录存储等，可以根据实际需求进行扩展。