ChatView refactor split out ChatComposer component and some scrolling hooks

[Ymit24]

What Changed

1. Extracted hooks from ChatView for handling scrolling
2. Cut out composer UI and the purely internal to composer hooks into new ChatComposer component.

relates to #830

Why

In an ongoing effort to refactor ChatView, I pulled out the ChatComposer UI. This doesn't change the behavior of these hooks, just move them. There is still a lot of composer state intertwined in chatview. I wanted to do another structural move first before actually, finally, reworking the state flow. I think it will be easier to review+merge by doing this move first then the refactor, otherwise its hard to see what's changing.

As a quick win, i also pulled out a bunch of scroll related hooks and moved to a custom hook, this just reduces noise in ChatView without changing much. I think there may be more like this we can do in the future. Number 1 goal is just get stuff out of ChatView so more people can independently work on refactoring those sections without conflicting.

Feedback is very much welcomed!

UI Changes

No UI changes here, should be purely technical.

Checklist

• [~] This PR is small and focused (technically this does two things so i wouldn't be against splitting it into two PRs if that was preferable)
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Future Work

With this split out, it is now possible to work up and down, so rework data flow between ChatView<->ChatComposer but also work to break out more stuff inside ChatComposer into more sub components.

Note

Extract auto-scroll and composer logic from ChatView into dedicated hook and component

• Moves message list auto-scroll logic into a new useMessageListAutoScroll hook that pins scroll to bottom, cancels stickiness on user scroll-up, and reschedules on thread changes or new messages.
• Extracts the entire composer UI and state into a new ChatComposer component, accepting provider/model selection, image attachments, pending approvals, and send/interrupt/implement callbacks as props.
• ChatView is simplified by replacing inline scroll refs, event handlers, and the composer form block with the new hook and component.

^{Macroscope summarized 88f950d.}

[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: cecb7abf-de32-4ac4-995e-ec2be942660c

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[nmggithub]

It's funny, my PR adding you to the vouched list got merged just half an hour before you put up this PR (great timing!). And great work so far!

[Ymit24]

Great timing indeed! Thanks for that too btw! I’m hoping this evening I can try and begin some of the “real” work of altering the data flow so all of this extra composer state isn’t being directly accessed by chatview. That might take a bit of time tho lol. Excited to see if others try and do some refactoring of composer subcomponents or other chatview parts, definitely plenty to go around 😅