Aura
/
aura-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复聊天头像显示和布局位置 - AGENT左侧头像，用户右侧头像

main
sp mac bookpro 2605 2026-06-08 01:08:56 +08:00
parent 6378159406
commit b85e3ed358
1 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/pages/chat/components/messages/MessageItem.tsx
View File

@ -22,7 +22,6 @@ export default function MessageItem(props: {
// 获取回答者 Agent 信息
const answerAgentId = message.agent_id || (message.role === 'assistant' ? currentAgentId : undefined);
const answerAgent = answerAgentId ? agentList.find(a => a.id === answerAgentId) : undefined;
const hasAnswerAgent = !!answerAgent && message.role === 'assistant';
const hasBranches = !!branch && branch.total > 1;
const activeIdx = branch?.activeIndex ?? 0;
const total = branch?.total ?? 1;
@ -50,10 +49,17 @@ export default function MessageItem(props: {
transition: 'background 0.4s, padding 0.4s'
}}
>
{message.role === 'user' ? (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
{/* 用户: 头像在右侧，内容在左侧（靠右对齐） */}
<div style={{ flex: 1, minWidth: 0, maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
{message.role === 'assistant' ? (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
{/* AGENT: 头像在左侧，内容在右侧（靠左对齐） */}
<Avatar
src={answerAgent?.avatar}
size={36}
style={{ flexShrink: 0, marginTop: 2, backgroundColor: '#52c41a' }}
>
{answerAgent?.name?.charAt(0)?.toUpperCase() || 'A'}
</Avatar>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
display: 'flex',
alignItems: 'center',
@ -65,44 +71,9 @@ export default function MessageItem(props: {
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
我
{answerAgent?.name || 'AI'}
</span>
</div>
<div className={`bubble ${message.role}`}>
{message.content.includes('![image](') ? (
<Markdown>{message.content}</Markdown>
) : (
<span dangerouslySetInnerHTML={{
__html: message.content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>')
}} />
)}
</div>
</div>
<Avatar style={{ flexShrink: 0, marginTop: 2, backgroundColor: '#1890ff' }} size={36}>我</Avatar>
</div>
) : (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
{/* AGENT: 头像在左侧，内容在右侧（靠左对齐） */}
{hasAnswerAgent && (
<Avatar src={answerAgent!.avatar} size={36} style={{ flexShrink: 0, marginTop: 2 }} />
)}
<div style={{ flex: 1, minWidth: 0 }}>
{hasAnswerAgent && (
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
marginBottom: 6
}}>
<span style={{
fontSize: 12,
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
{answerAgent!.name}
</span>
</div>
)}
<div className={`bubble ${message.role}`}>
<Markdown>{message.content}</Markdown>
</div>
@ -151,6 +122,36 @@ export default function MessageItem(props: {
)}
</div>
</div>
) : (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
{/* 用户: 头像在右侧，内容在左侧（靠右对齐） */}
<div style={{ flex: 1, minWidth: 0, maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
marginBottom: 6
}}>
<span style={{
fontSize: 12,
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
我
</span>
</div>
<div className={`bubble ${message.role}`}>
{message.content.includes('![image](') ? (
<Markdown>{message.content}</Markdown>
) : (
<span dangerouslySetInnerHTML={{
__html: message.content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>')
}} />
)}
</div>
</div>
<Avatar style={{ flexShrink: 0, marginTop: 2, backgroundColor: '#1890ff' }} size={36}>我</Avatar>
</div>
)}
</div>
);