improvement(ui): Merge ui components for mothership chat

[TheodoreSpeaks]

Summary

Now that mothership and copilot have almost identical logic, combined them into a single ui component: MothershipChat.
Shared logic for hooks is stored in the use-chat helper. This will reduce the effort needed when making any ui change, since both locations will need the improvement.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Validated attachments, aborts, queueing, copilot diffs, edits, and terminal logs for workflows all work as intended after change on copilot and mothership sides.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Mar 25, 2026 0:05am

[TheodoreSpeaks]

@cursor review @greptile review

[cursor]

PR Summary

Medium Risk
Moderate risk because it refactors core chat rendering/scrolling and centralizes useChat endpoint configuration; small mismatches could impact message streaming, auto-scroll, or stop-generation behavior in both Home and Copilot panels.

Overview
Unifies chat UI rendering by introducing a reusable MothershipChat component and replacing the previously inlined message list/queued-messages/input markup in both home.tsx and the workflow panel.tsx.

Standardizes useChat configuration by adding getMothershipUseChatOptions and getWorkflowCopilotUseChatOptions helpers (including the copilot API path constant) and updating call sites to use them, reducing duplicated endpoint/option wiring.

^{Written by Cursor Bugbot for commit 0fcd52b. This will update automatically on new commits. Configure here.}

[greptile-apps]

Greptile Summary

This PR consolidates the nearly-identical mothership (home page) and copilot (panel) chat UIs into a single MothershipChat component, driven by a layout prop that selects between two pre-defined style configurations. Chat-hook configuration is similarly unified into two factory functions. The refactoring is clean, logically sound, and reduces the surface area for future UI drift between the two surfaces.

Key changes and observations:

• MothershipChat component: New shared component correctly reproduces the layout and behaviour of both original views via the LAYOUT_STYLES config. The initial-scroll logic is functionally equivalent to the original home.tsx version.
• agent-group.tsx: The key-based remounting trick (changing key to force re-initialization of expanded state) is replaced by a new wasAutoExpandedRef plus useEffect approach. This avoids unnecessary unmount/remount cycles and allows CSS transitions to play smoothly.
• message-content.tsx: AgentGroup is now given a stable key, paired correctly with the new effect-based expand management above.
• Copilot panel gains new behaviour: By sharing MothershipChat, the copilot panel now renders file attachments on user messages and auto-scrolls to bottom on first message load — both previously absent. These appear to be intentional improvements rather than regressions.
• isLastAssistant role guard is dropped in mothership-chat.tsx (see inline comment) — a minor defensive improvement is suggested.
• h-full combined with flex-1 on the copilot panel wrapper is worth visual QA to ensure the panel resizes correctly at varying heights.

Confidence Score: 4/5

• Safe to merge after visual QA on both the home page and copilot panel to confirm layout and scroll behaviour.
• The refactoring correctly preserves all original logic and the two new factory functions use the right API/stop paths. The agent-group.tsx effect-based approach is a clear improvement over key-based remounting. The main unknowns are visual: the h-full+flex-1 combination on the copilot panel and the new attachment/auto-scroll behaviour in the copilot view are hard to fully validate without rendering. No data-loss or security risk is introduced.
• Pay attention to mothership-chat/mothership-chat.tsx (role guard and layout classes) and panel.tsx (visual sizing of the copilot chat area).

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx	New shared component consolidating mothership and copilot chat UIs. Uses a LAYOUT_STYLES config object to switch between mothership-view (home page) and copilot-view (panel) layouts. Includes its own initial-scroll logic and useAutoScroll. Introduces ChatMessageAttachments support to the copilot panel (new behavior) and adds initial scroll-to-bottom on first load for copilot (also new behavior).
apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts	Adds two factory functions (getMothershipUseChatOptions, getWorkflowCopilotUseChatOptions) that encapsulate the default API/stop paths for each chat context, reducing repetition at call sites. COPILOT_CHAT_API_PATH constant correctly resolves to the original /api/copilot/chat value.
apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx	Replaces key-based remounting (to force expand) with effect-based state management via wasAutoExpandedRef. The new useEffect correctly expands/collapses the group as defaultExpanded changes, and the click handler clears the auto-expanded ref so user intent is respected. Eliminates unnecessary remounting and preserves animation continuity.
apps/sim/app/workspace/[workspaceId]/home/home.tsx	Home page simplified by delegating scroll/layout/message-rendering to MothershipChat. initialScrollBlocked correctly derives the same boolean that the original useLayoutEffect guarded against. Removed useLayoutEffect, useAutoScroll, and large inline JSX — clean reduction in complexity.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx	Copilot panel now uses MothershipChat with layout='copilot-view', which correctly applies the compact styles. The panel now gains attachment rendering and initial auto-scroll as side effects of the shared component. className='min-h-0 flex-1' is passed to keep the flex sizing consistent with the old scroll div, though combined with the component's own h-full this may be worth validating visually.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[home.tsx] -->|uses| B[MothershipChat\nlayout='mothership-view']
C[panel.tsx] -->|uses| D[MothershipChat\nlayout='copilot-view']
B --> E[LAYOUT_STYLES\nmothership-view\npx-6 pt-4 pb-8\nmax-w-42rem]
D --> F[LAYOUT_STYLES\ncopilot-view\npx-3 pt-2 pb-4\nno max-width]
G[useChat hook] --> H{getMothershipUseChatOptions}
G --> I{getWorkflowCopilotUseChatOptions}
H -->|apiPath: MOTHERSHIP_CHAT_API_PATH| A
I -->|apiPath: COPILOT_CHAT_API_PATH| C
B --> J[useAutoScroll\ninitialScrollBlocked prop]
D --> K[useAutoScroll\ninitialScrollBlocked=false default]
L[AgentGroup] -->|stable key\nsegment.id| M[wasAutoExpandedRef effect\nmanages expand/collapse\nvia defaultExpanded prop]
M -->|previously| N[key-based remount\nforced expand reset]

Loading

_{Reviews (2): Last reviewed commit: "Fix subagent text not animating collapse..." | Re-trigger Greptile}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[TheodoreSpeaks]

Pretty sure this is actually needed - agent-group is unmounted after auto collapsed and needs a timer after the fact to animate itself closed.