能给以上代码增加用户头像以及美化界面吗

当然可以！以下是更新后的代码，增加了用户头像和对界面进行美化的样式：

<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>AI 问答聊天</h1>
    </div>
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div v-if="message.from === 'user'" class="user-message">
          <div class="user-avatar">
            <img src="user-avatar.png" alt="User Avatar" />
          </div>
          <div class="user-content">
            {{ message.content }}
          </div>
        </div>
        <div v-else class="ai-message">
          <div class="ai-avatar">
            <img src="ai-avatar.png" alt="AI Avatar" />
          </div>
          <div class="ai-content">
            {{ message.content }}
          </div>
        </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-header {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

.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>

在更新后的代码中，我添加了一个聊天头部，使用了`<h1>`标签显示"AI 问答聊天"标题。每条消息都被包裹在一个`<div class="message">`中，用户消息和AI回答分别使用不同的样式和头像区分。用户头像使用了`<div class="user-avatar">`和`<img>`标签，AI头像同理。你需要将`src`属性替换为实际的用户和AI头像的图片路径。

我还对界面进行了一些美化，添加了背景色、边框、间距等样式，使界面更加清晰和美观。

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