feat: split out components from ChatView.tsx

[Ymit24]

What Changed

Split out all of the components from ChatView.tsx into their own files, and pulled the functions into a ChatView.logic.ts. I didn't change the actual content of those components, just moved them to their own files.

Why

In order to tame the massive ChatView.tsx file (and ChatView component!) it is basically required that we move out some of this functionality, otherwise any attempts to refactor will be met with merge conflict hell. It's fair that some of these components I broke out might belong together, however, it is much easier to break them all out and later put them back together in smaller PRs. This way we can independently work to refactor individual aspects (e.g. message timeline component).

I considered making this multiple PRs due to volume of code changes, however i choose not two because:

1. AI makes it easier to validate that content didn't change, just organization.
2. I didn't want to spam 10 PRs just to get a number lower arbitrarily.

This is associated with the effort of #830, i don't mean to step on toes if others are working on this effort, hopefully this split will make it much easier for many to work on individual parts of this refactor in a more coordinated matter!

UI Changes

No UI changes, pure refactor.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

(technically this is not a small PR, but it is very very focused.)

Future Work

Rather than having a single super ChatView component, we should lower some of the responsibilities to more appropriate locations in the component tree. Ideally, in my opinion, ChatView itself should be quite small and only handle orchestrating the various major components it mounts (e.g. the header, timeline, composer, etc...).

Note

Split ChatView.tsx into modular chat sub-components

Extracts a large number of components and utilities previously inlined in ChatView.tsx into separate files under apps/web/src/components/chat/.

• New components include MessagesTimeline, ChatHeader, ProposedPlanCard, ProviderModelPicker, ProviderHealthBanner, ThreadErrorBanner, ComposerCommandMenu, ComposerPendingUserInputPanel, ComposerPendingApprovalPanel, ChangedFilesTree, OpenInPicker, and several smaller UI pieces.
• Logic helpers (blob URL management, draft thread construction, model resolution, localStorage utilities) are extracted into ChatView.logic.ts.
• ChatView.tsx is refactored to import from these new modules, with no intended change to runtime behavior.

^{Macroscope summarized 24b93b3.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e3cb2de5-f507-45b1-a7db-3ccdd94c3458

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[binbandit]

I'm not opposed to this change, I am opposed to how the files are structured. Potentially we could put them in a folder or something?

[Ymit24]

Thoughts on “/chat” in the components folder for the organization? @binbandit

[binbandit]

Thoughts on “/chat” in the components folder for the organization? @binbandit

Ye. That works nicely. It explains it well 😂

[Ymit24]

Very cool, I’ll push a new commit with the change, thanks for the feedback!

[Ymit24]

updated to move the files into /chat. Also rebased to get new changes from #488 in ChatView.tsx

[juliusmarminge]

how much of ChatView is now invoking hooks and just passing down to child components? Can we have the child components own their state more? e.g. composer can probably just fetch the state from store directly, instead of the chatview pulling it just to pass it down as props?

[Ymit24]

Most of ChatView right now is as you describe, @juliusmarminge. Unfortunately, a lot of the useEffects and various callbacks are fairly intertwined 😅. I'm working on pulling out the composer pieces right now and already reduced ChatView significantly, so seems very promising. I think a couple of focused stacked PRs will be able to split it apart nicely. The tough part is balancing splitting it up and actually improving the architecture without accidentally introducing subtle bugs.