fix: message observers

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Remove observer wrapper from ChatMessages and MessageContent components to simplify structure and reduce re-renders.

• Behavior:
  • Remove observer wrapper from ChatMessages in index.tsx and MessageContent in message-content/index.tsx.
  • Simplifies component structure and potentially reduces unnecessary re-renders.
• Misc:
  • Minor refactoring in index.tsx and message-content/index.tsx to improve code readability.

^{This description was created by for 352466f. You can customize this summary. It will automatically update as commits are pushed.}

Summary by CodeRabbit

• New Features
  • Chat thread now supports reliable programmatic “scroll to bottom,” improving navigation in long conversations.
• Bug Fixes
  • Reduced instances where new messages failed to auto-scroll into view.
  • More consistent display of partial tool responses during streaming.
• Refactor
  • Simplified chat message components for improved rendering performance and stability without changing appearance or behavior for users.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
web	Building	Preview	Comment	Oct 14, 2025 11:40am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Oct 14, 2025 11:40am

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Refactors ChatMessages to use React forwardRef with an exposed scrollToBottom via useImperativeHandle, introducing a ScrollController and wrapping in a Conversation layout. Retains ChatMessagesInner as a MobX observer. Converts MessageContent from an observer-wrapped component to a plain functional component without changing rendering outcomes.

Changes

Cohort / File(s)	Summary
Chat messages container refactor apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/index.tsx	Replaced MobX observer wrapper with forwardRef to expose scrollToBottom; introduced ScrollController; restructured return to render Conversation containing ScrollController and ChatMessagesInner; kept inner component as observer.
Message content wrapper change apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/index.tsx	Removed observer wrapper; converted to plain functional component with explicit props; slightly reorganized isStream-related logic without altering external rendering behavior.

Sequence Diagram(s)

sequenceDiagram
  participant P as Parent Component
  participant CM as ChatMessages (forwardRef)
  participant C as Conversation
  participant SC as ScrollController
  participant I as ChatMessagesInner (observer)

  P->>CM: render(props, ref)
  Note over CM: useImperativeHandle exposes<br/>scrollToBottom(ref)
  CM->>C: render
  C->>SC: mount with scroll handlers
  SC->>I: render messages
  P-->>CM: ref.scrollToBottom()
  CM->>SC: invoke scroll to bottom

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: fix initial sent message not showing and creating conversation load #2871 — Also modifies ChatMessages, adjusting export/implementation and streaming/render structure.
• feat: use conversation list smooth #2881 — Further refactors ChatMessages with forwardRef and layout changes akin to ScrollController/Conversation composition.
• fix: reasoning performance #2838 — Touches message-content/index.tsx around reasoning and isStream handling, overlapping with this component’s control flow area.

Poem

In threads of chat I nibble, neat,
A forwardRef beneath my feet.
Scroll I will, to bottom’s brink,
With carrots, codes, and caffeinated ink.
Observer bows, the props take flight—
Conversations hop through night.
Thump-thump: messages render right.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/message-observer

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc4c0d1 and 352466f.

📒 Files selected for processing (2)

• apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/index.tsx (1 hunks)
• apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/index.tsx (1 hunks)

---

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