请在以上代码的基础上使ai头像消息和用户头像消息分列左右

好的，下面是根据你的要求更新后的代码，使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">
          <img class="user-avatar" src="user-avatar.png" alt="User Avatar" />
          <div class="user-content">
            {{ message.content }}
          </div>
        </div>
        <div v-else class="ai-message">
          <div class="ai-content">
            {{ message.content }}
          </div>
          <img class="ai-avatar" src="ai-avatar.png" alt="AI Avatar" />
        </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;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: scroll;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.user-message {
  align-self: flex-start;
}

.ai-message {
  align-self: flex-end;
}

.user-avatar,
.ai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img,
.ai-avatar img {
  width: 100%;
  height: auto;
}

.user-content,
.ai-content {
  max-width: 70%;
  background-color: #f0f0f0;
  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>

在更新后的代码中，我通过添加了`<img>`标签来显示用户头像和AI头像，并通过CSS样式将它们分别对齐到消息的左侧和右侧。用户头像位于消息内容的前面，AI头像位于消息内容的后面。

请记得将`src`属性替换为实际的用户头像和AI头像的图片路径。

希望这个更新后的代码满足了你的需求！如果还有其他问题，请随时向我提问。