update

src/views/AIAgentView.vue

@@ -387,6 +387,12 @@ const getIconPath = (agent: Agent) => {
       return '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line"/>'
   }
 }
+
+// 在 script 部分修改获取首字母的函数
+const getInitial = (nickname: string) => {
+  if (!nickname) return '?'
+  return nickname.trim()[0].toUpperCase()
+}
 </script>
 
 <template>
@@ -427,6 +433,25 @@ const getIconPath = (agent: Agent) => {
                       : 'ai-message',
                 ]"
               >
+                <div v-if="message.role === 'assistant'" class="avatar">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                    ></path>
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
+                  </svg>
+                </div>
+                <div v-if="message.role === 'user'" class="avatar user-avatar">
+                  {{ getInitial(userStore.userInfo?.nickname || '') }}
+                </div>
                 <div
                   class="message-content"
                   :class="{
@@ -690,6 +715,7 @@ const getIconPath = (agent: Agent) => {
   justify-content: flex-end;
   width: 100%;
   display: flex;
+  gap: 12px;
 }
 
 .ai-message,
@@ -697,6 +723,35 @@ const getIconPath = (agent: Agent) => {
   justify-content: flex-start;
   width: 100%;
   display: flex;
+  gap: 12px;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.user-message .avatar {
+  order: 1;
+  background-color: var(--color-accent);
+  border: none;
+}
+
+.user-message .avatar svg {
+  color: white;
+}
+
+.avatar svg {
+  width: 24px;
+  height: 24px;
+  color: var(--color-accent);
 }
 
 .message {
@@ -739,14 +794,14 @@ const getIconPath = (agent: Agent) => {
 .user-message .message-content {
   background-color: var(--color-accent);
   color: white;
-  border-radius: 1rem 1rem 0 1rem;
+  border-radius: 1rem 0 1rem 1rem;
   padding: 1.25rem;
 }
 
 .ai-message .message-content {
   background-color: var(--color-bg-secondary);
   color: var(--color-text-primary);
-  border-radius: 1rem 1rem 1rem 0;
+  border-radius: 0 1rem 1rem 1rem;
   border: 1px solid var(--color-border);
   padding: 1.25rem;
   margin-top: 0.5rem;
@@ -779,6 +834,16 @@ const getIconPath = (agent: Agent) => {
     max-width: 90%;
   }
 
+  .avatar {
+    width: 32px;
+    height: 32px;
+  }
+
+  .avatar svg {
+    width: 20px;
+    height: 20px;
+  }
+
   .thought-message .message-content {
     max-width: 85%;
     font-size: 0.9rem;
@@ -1240,4 +1305,19 @@ const getIconPath = (agent: Agent) => {
     opacity: 0;
   }
 }
+
+/* 调整用户头像样式以更好地显示中文字符 */
+.user-avatar {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: white;
+  background-color: var(--color-accent);
+  border: none;
+}
+
+@media (max-width: 768px) {
+  .user-avatar {
+    font-size: 1rem;
+  }
+}
 </style>