fix(fe): assistant icon is inline with chat

[jmelahman]

Description

This was bothering me. On my small screen, horizontal real estate is precious.

See also, https://onyx-company.slack.com/archives/C0832RVRVG8/p1767977671998979

How Has This Been Tested?

Additional Options

• Override Linear Check

---

Summary by cubic

Makes the assistant avatar inline with chat content to free horizontal space, especially on small screens. Also cleans up the tool steps layout for consistent width and smoother expand/collapse.

• Bug Fixes
  • Avatar now inline with blinking dots, cancelled text, and tool groups in AIMessage.
  • Removed extra padding/max-width so messages use full available width.
  • MultiToolRenderer: full-width container, inner bordered timeline, aligned steps header, smoother expand/collapse.

^{Written for commit 7df87b5. Summary will update on new commits.}

[greptile-apps]

Greptile Summary

Repositioned the assistant avatar to be inline with chat messages instead of in a separate column, saving horizontal space on smaller screens. The avatar now appears next to content in both streaming and completed states.

Key changes:

• Removed top-level AgentAvatar and pl-4/max-w-message-max wrapper classes from AIMessage.tsx
• Moved avatar inside content containers for both empty state and tool groups
• Adjusted MultiToolRenderer.tsx layout to accommodate inline avatar (added pl-4 to collapsed state for proper alignment)
• Restructured border/shadow styling in streaming state to create visual separation while maintaining inline layout

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - it's a focused UI layout change
• The changes are purely presentational, moving the avatar position without altering logic. The author provided visual testing screenshots showing the change works as intended. Layout restructuring is straightforward and doesn't introduce logic bugs or security issues.
• No files require special attention - both files contain simple layout adjustments

Important Files Changed

Filename	Overview
web/src/app/chat/message/messageComponents/AIMessage.tsx	Restructured assistant avatar positioning to be inline with chat content, removing unnecessary wrapper padding and max-width constraints
web/src/app/chat/message/messageComponents/MultiToolRenderer.tsx	Adjusted layout structure to support inline avatar positioning, moving border/shadow styling to inner container and updating collapsed state flexbox

Sequence Diagram

sequenceDiagram
    participant User
    participant AIMessage
    participant MultiToolRenderer
    participant AgentAvatar
    
    User->>AIMessage: Render AI response
    
    alt No content yet (groupedPackets.length === 0)
        AIMessage->>AIMessage: Create flex container with gap-2
        AIMessage->>AgentAvatar: Render avatar inline (size 24)
        alt User cancelled
            AIMessage->>AIMessage: Show "User has stopped generation"
        else Streaming
            AIMessage->>AIMessage: Show BlinkingDot
        end
    else Has content (groupedPackets.length > 0)
        AIMessage->>AIMessage: Create flex-wrap container with pb-4
        AIMessage->>AgentAvatar: Render avatar inline (size 24)
        alt Has tool groups
            AIMessage->>MultiToolRenderer: Pass tool groups
            alt Tools streaming/incomplete
                MultiToolRenderer->>MultiToolRenderer: Render bordered timeline (pt-4, border, rounded, shadow)
            else Tools complete
                MultiToolRenderer->>MultiToolRenderer: Render collapsed state
                MultiToolRenderer->>MultiToolRenderer: Add pl-4 for alignment with avatar
                MultiToolRenderer->>MultiToolRenderer: Show "X steps" toggle (flex-1)
            end
        end
        AIMessage->>AIMessage: Render display groups (final answer)
    end

Loading

[cubic-dev-ai]

No issues found across 2 files