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 00:58:55 +08:00
parent 345a055d1a
commit 32cb1c9d92
2 changed files with 171 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/chat/components/ChatBody.tsx
View File

@ -70,19 +70,29 @@ export default function ChatBody(props: {
{streaming.active && (
<div style={{ marginBottom: 24 }}>
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
{(() => {
const streamingAgentId = streaming.targetAgentId || currentAgentId;
const streamingAgent = agentList.find(a => a.id === streamingAgentId);
if (streamingAgent) {
return (
<div className="message-agent-header" style={{
<Avatar src={streamingAgent.avatar} size={36} style={{ flexShrink: 0, marginTop: 2 }} />
);
}
return null;
})()}
<div style={{ flex: 1, minWidth: 0 }}>
{(() => {
const streamingAgentId = streaming.targetAgentId || currentAgentId;
const streamingAgent = agentList.find(a => a.id === streamingAgentId);
if (streamingAgent) {
return (
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
marginBottom: 6,
marginLeft: 2
marginBottom: 6
}}>
<Avatar src={streamingAgent.avatar} size={24} />
<span style={{
fontSize: 13,
fontWeight: 500,
@ -130,12 +140,14 @@ export default function ChatBody(props: {
</div>
</div>
{(streaming.retrieved.length > 0 || streaming.toolCalls.length > 0) && (
<div style={{ maxWidth: '85%' }}>
<div>
{streaming.retrieved.length > 0 && <RetrievedView retrieved={streaming.retrieved} />}
{streaming.toolCalls.length > 0 && <ToolCallView calls={streaming.toolCalls} liveStyle />}
</div>
)}
</div>
</div>
</div>
)}
</>
)}

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

@ -43,22 +43,27 @@ export default function MessageItem(props: {
<div
id={'msg-' + message.id}
style={{
marginBottom: 12,
marginBottom: 20,
padding: highlighted ? 8 : 0,
borderRadius: highlighted ? 10 : 0,
background: highlighted ? 'rgba(254, 243, 199, 0.6)' : 'transparent',
transition: 'background 0.4s, padding 0.4s'
}}
>
{message.role === 'assistant' ? (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
{/* AGENT: 头像在左侧 */}
{hasAnswerAgent && (
<div className="message-agent-header" style={{
<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,
marginLeft: 2
marginBottom: 6
}}>
<Avatar src={answerAgent!.avatar} size={24} />
<span style={{
fontSize: 13,
fontWeight: 500,
@ -69,19 +74,9 @@ export default function MessageItem(props: {
</div>
)}
<div className={`bubble ${message.role}`}>
{message.role === 'assistant' ? (
<Markdown>{message.content}</Markdown>
) : message.content.includes('![image](') ? (
<Markdown>{message.content}</Markdown>
) : (
<span dangerouslySetInnerHTML={{
__html: message.content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>')
}} />
)}
</div>
{message.role === 'assistant' && (
<div className="monica-msg-actions" style={{ maxWidth: '78%' }}>
<div className="monica-msg-actions">
{hasBranches && (
<Space size={2}>
<Button size="small" type="text" disabled={activeIdx === 0} onClick={goPrev}>
@ -117,15 +112,46 @@ export default function MessageItem(props: {
</Button>
</Tooltip>
</div>
)}
{message.role === 'assistant' && message.meta && (
<div style={{ maxWidth: '78%' }}>
{message.meta && (
<div>
{!!message.meta.reasoning && <ReasoningView reasoning={message.meta.reasoning} />}
{!!message.meta.retrieved?.length && <RetrievedView retrieved={message.meta.retrieved} />}
{!!message.meta.toolCalls?.length && <ToolCallView calls={message.meta.toolCalls} />}
</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: 13,
fontWeight: 500,
color: 'var(--color-text)'
}}>
我
</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>
);
}