feat(ai): display AI assistant avatar for userid=-1

When a message has userid=-1 (AI assistant), display a special AI avatar
with gradient styling instead of the regular UserAvatar component.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kuaifan 2026-01-21 01:51:01 +00:00
parent 027662ebab
commit 3603cf9889
2 changed files with 32 additions and 1 deletions

View File

@ -2,7 +2,14 @@
<div class="dialog-view" :class="viewClass" :data-id="msgData.id">
<!--昵称-->
<div v-if="dialogType === 'group'" class="dialog-username" @pointerdown="handleOperation($event, 'mention')">
<UserAvatar :userid="msgData.userid" :show-icon="false" :show-name="true" click-open-detail/>
<!-- AI 助手头像 -->
<template v-if="msgData.userid === -1">
<div class="ai-assistant-avatar">
<div class="ai-icon">AI</div>
<div class="avatar-name">{{ $L('AI 助手') }}</div>
</div>
</template>
<UserAvatar v-else :userid="msgData.userid" :show-icon="false" :show-name="true" click-open-detail/>
</div>
<div

View File

@ -680,6 +680,30 @@
height: 22px;
margin-bottom: 6px;
opacity: 0.8;
.ai-assistant-avatar {
display: flex;
align-items: center;
.ai-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-name {
margin-left: 6px;
font-size: 12px;
color: #666;
}
}
}
.dialog-head {