fix: align message content below avatars

src/renderer/src/ChatTimeline.test.tsx

@@ -74,6 +74,40 @@ describe('ChatTimeline', () => {
     expect(rule).not.toContain('contain-intrinsic')
   })
 
+  it('places message identity above the message body', () => {
+    const messages: Message[] = [
+      {
+        id: 'assistant-message',
+        role: 'assistant',
+        content: 'Answer',
+        createdAt: 1_775_000_000_000,
+        state: 'complete'
+      }
+    ]
+    const { container } = render(
+      <ChatTimeline
+        artifactById={new Map()}
+        conversationId="conversation-1"
+        hiddenMessageCount={0}
+        isUnusedConversation={false}
+        locale="zh-CN"
+        messageStartIndex={0}
+        messages={messages}
+        {...callbacks}
+        retryContent=""
+        totalMessageCount={messages.length}
+      />
+    )
+
+    const message = container.querySelector('.message')
+    const header = message?.querySelector('.message__header')
+    const body = message?.querySelector('.message__body')
+
+    expect(header).toContainElement(message?.querySelector('.message__avatar') ?? null)
+    expect(header).toContainElement(message?.querySelector('.message__meta') ?? null)
+    expect(Array.from(message?.children ?? [])).toEqual([header, body])
+  })
+
   it('enables HTML rendering only for completed Agent output', () => {
     const messages: Message[] = [
       {

src/renderer/src/ChatTimeline.tsx

@@ -532,14 +532,14 @@ function ChatMessageRowView({
       ref={(element) => onArticleRef(message.id, element)}
       tabIndex={-1}
     >
-      <div className="message__avatar">
+      <div className="message__header">
-        {message.role === 'assistant' ? (
+        <div className="message__avatar">
-          <Bot size={18} />
+          {message.role === 'assistant' ? (
-        ) : (
+            <Bot size={18} />
-          <UserRound size={18} />
+          ) : (
-        )}
+            <UserRound size={18} />
-      </div>
+          )}
-      <div className="message__body">
+        </div>
         <div className="message__meta">
           <strong>
             {message.role === 'assistant' ? 'GoodBuddy' : t('chat.user')}
@@ -557,6 +557,8 @@ function ChatMessageRowView({
           )}
           <span>{formatTime(message.createdAt, locale)}</span>
         </div>
+      </div>
+      <div className="message__body">
         {message.attachments && message.attachments.length > 0 && (
           <div
             aria-label={t('chat.attachments.region')}

src/renderer/src/styles.css

@@ -5311,15 +5311,24 @@ button > svg {
 }
 
 .message {
-  display: grid;
+  display: flex;
   min-width: 0;
   padding: 17px 8px;
-  gap: 12px;
+  flex-direction: column;
-  grid-template-columns: 30px minmax(0, 1fr);
+  gap: 8px;
 }
 
-.message--user {
+.message__header {
-  grid-template-columns: minmax(0, 1fr) 30px;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+}
+
+.message--user .message__header {
+  width: min(78%, 720px);
+  align-self: flex-end;
+  flex-direction: row-reverse;
 }
 
 .route-loading-status {
@@ -5374,6 +5383,7 @@ button > svg {
 
 .message__avatar {
   display: grid;
+  flex: 0 0 auto;
   width: 29px;
   height: 29px;
   place-items: center;
@@ -5384,8 +5394,6 @@ button > svg {
 }
 
 .message--user .message__avatar {
-  grid-column: 2;
-  grid-row: 1;
   border-color: var(--accent-selected);
   background: var(--accent-subtle);
   color: var(--accent);
@@ -5398,15 +5406,13 @@ button > svg {
 
 .message--user .message__body {
   width: min(78%, 720px);
-  grid-column: 1;
+  align-self: flex-end;
-  grid-row: 1;
-  justify-self: end;
 }
 
 .message__meta {
   display: flex;
+  min-width: 0;
   align-items: center;
-  margin: 1px 0 8px;
   gap: 8px;
 }