feat(chat): add react-window for optimized chat history rendering

[amelitoalcuitas]

Summary by CodeRabbit

• New Features

  • Virtualized chat history for smoother scrolling with large chat lists.
  • Inline chat title editing (save on blur/Enter, cancel on Escape).

• Bug Fixes

  • Empty chat state now displays correctly when no chats are present.

• Style

  • Sidebar padding and overflow adjusted for improved layout.

• Chores

  • Added dependency to support chat history optimization.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f79fd252-9fa6-43e7-8fc6-9c9dd2f12c9e

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

Walkthrough

The chat sidebar component is refactored to virtualize chat history rendering using react-window. The dependency is added, imports updated, and a row-based data model replaces inline JSX grouping. Chats are grouped by relative date and flattened into rows for efficient virtual rendering with inline edit support.

Changes

Chat Sidebar Virtualization

Layer / File(s)	Summary
Dependency Addition apps/playground/package.json	React-window library (v2.2.7) added to dependencies.
Imports apps/playground/src/components/playground/chat-sidebar.tsx	useMemo imported from React; List and RowComponentProps imported from react-window.
Row Model & Utilities apps/playground/src/components/playground/chat-sidebar.tsx	ChatHistoryRow union introduced; ChatHistoryRowComponent, getChatHistoryRowHeight, formatDate, and groupChatsByDate utilities added.
Edit State Helpers apps/playground/src/components/playground/chat-sidebar.tsx	cancelEditTitle and inline edit state (editingId/editTitle) added for per-chat title edits.
Chat Grouping apps/playground/src/components/playground/chat-sidebar.tsx	chatGroups memoized computation groups sorted chats by relative date buckets.
Row Flattening apps/playground/src/components/playground/chat-sidebar.tsx	historyRows memoized array flattens grouped chats into header, chat, and spacer rows for virtualization.
Layout & Virtualized Rendering apps/playground/src/components/playground/chat-sidebar.tsx	SidebarContent padding changed to overflow-hidden py-4; react-window List replaces manual group rendering; empty-state shown when no chats exist.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding react-window dependency for virtualizing chat history rendering to optimize performance.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/playground/src/components/playground/chat-sidebar.tsx`:
- Around line 167-201: The Input is being rendered inside the interactive
SidebarMenuButton which causes invalid nested interactive controls; when editing
(editingId === chat.id) replace the button-interactive SidebarMenuButton with a
non-button container (or render the Input as a sibling outside
SidebarMenuButton) so the editable Input is not a descendant of a button; keep
the same callbacks (onEditTitleChange, onSaveTitle, onCancelEdit) and still call
onChatSelect(chat.id) from the SidebarMenuButton when not editing, ensuring the
Input receives autoFocus and handles Enter/Escape as before.
- Around line 179-183: The input saves on both onBlur and onKeyDown Enter
causing duplicate updateChat.mutate calls; add a ref flag (e.g., didSubmitRef)
in the component, set didSubmitRef.current = true when handling Enter in the
onKeyDown handler (after calling onSaveTitle and preventing default), and in the
onBlur handler check if didSubmitRef.current is true — if so, clear the flag and
skip calling onSaveTitle to avoid the second mutate; reference the onSaveTitle
handler and updateChat.mutate usage so the onBlur guard prevents the duplicate
mutation.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 37c7f29d-34a0-4e79-a057-cf16627728b1

📥 Commits

Reviewing files that changed from the base of the PR and between 1e3b13f and 620dfb6.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• apps/playground/package.json
• apps/playground/src/components/playground/chat-sidebar.tsx