fix: 修复聊天窗口布局 - AGENT头像在左侧，用户头像在右侧

src/pages/chat/components/ChatBody.tsx

@@ -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,
+                            marginBottom: 6
-                        marginLeft: 2
                           }}>
-                        <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>
             )}
           </>
         )}

src/pages/chat/components/messages/MessageItem.tsx

@@ -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,
+                marginBottom: 6
-          marginLeft: 2
               }}>
-          <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>
-
+            <div className="monica-msg-actions">
-      {message.role === 'assistant' && (
-        <div className="monica-msg-actions" style={{ maxWidth: '78%' }}>
               {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.meta && (
-
+              <div>
-      {message.role === 'assistant' && message.meta && (
-        <div style={{ maxWidth: '78%' }}>
                 {!!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>
   );
 }