fix: 修复聊天头像显示和布局位置 - AGENT左侧头像，用户右侧头像
sp mac bookpro 2605
parent
6378159406
commit
b85e3ed358
|
|
@ -22,7 +22,6 @@ export default function MessageItem(props: {
|
||||||
// 获取回答者 Agent 信息
|
// 获取回答者 Agent 信息
|
||||||
const answerAgentId = message.agent_id || (message.role === 'assistant' ? currentAgentId : undefined);
|
const answerAgentId = message.agent_id || (message.role === 'assistant' ? currentAgentId : undefined);
|
||||||
const answerAgent = answerAgentId ? agentList.find(a => a.id === answerAgentId) : undefined;
|
const answerAgent = answerAgentId ? agentList.find(a => a.id === answerAgentId) : undefined;
|
||||||
const hasAnswerAgent = !!answerAgent && message.role === 'assistant';
|
|
||||||
const hasBranches = !!branch && branch.total > 1;
|
const hasBranches = !!branch && branch.total > 1;
|
||||||
const activeIdx = branch?.activeIndex ?? 0;
|
const activeIdx = branch?.activeIndex ?? 0;
|
||||||
const total = branch?.total ?? 1;
|
const total = branch?.total ?? 1;
|
||||||
|
|
@ -50,10 +49,17 @@ export default function MessageItem(props: {
|
||||||
transition: 'background 0.4s, padding 0.4s'
|
transition: 'background 0.4s, padding 0.4s'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{message.role === 'user' ? (
|
{message.role === 'assistant' ? (
|
||||||
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
|
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
|
||||||
{/* 用户: 头像在右侧，内容在左侧（靠右对齐） */}
|
{/* AGENT: 头像在左侧，内容在右侧（靠左对齐） */}
|
||||||
<div style={{ flex: 1, minWidth: 0, maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
|
<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={{
|
<div style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|
@ -65,44 +71,9 @@ export default function MessageItem(props: {
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
color: 'var(--color-text-secondary)'
|
color: 'var(--color-text-secondary)'
|
||||||
}}>
|
}}>
|
||||||
我
|
{answerAgent?.name || 'AI'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={`bubble ${message.role}`}>
|
|
||||||
{message.content.includes(' ? (
|
|
||||||
<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}`}>
|
<div className={`bubble ${message.role}`}>
|
||||||
<Markdown>{message.content}</Markdown>
|
<Markdown>{message.content}</Markdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -151,6 +122,36 @@ export default function MessageItem(props: {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</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(' ? (
|
||||||
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue