fix: Prevent chat overwrite during loading phase

[AnthonyRonning]

Fixes issue where users could overwrite chats while they're still loading.

Changes

• Expose isPending state from useChatSession hook
• Include isPending in isStreaming prop to disable input during chat loading
• Prevents users from accidentally overwriting chats while they're still loading

Closes #198

Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Chat now displays a streaming/state indicator during pending operations, providing clearer feedback while messages are loading, persisting, or summarizing.
  • Improved responsiveness of the chat UI by incorporating pending status into streaming behavior, reducing moments of ambiguity during transitions.
  • More consistent status handling ensures users see accurate progress indicators across various chat actions.

[coderabbitai]

Walkthrough

The chat session hook’s return value is expanded to include an isPending flag. The chat route consumes this new flag and includes it in the ChatBox isStreaming condition. No other logic, control flow, or error handling changes are introduced.

Changes

Cohort / File(s)	Change Summary
Hook API update frontend/src/hooks/useChatSession.ts	Adds isPending to the hook’s returned object alongside streamingError, exposing the internal query’s pending state.
Route integration frontend/src/routes/_auth.chat.$chatId.tsx	Destructures isPending from useChatSession and extends ChatBox isStreaming condition to include isPending.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ChatComponent
  participant useChatSession
  participant ChatBox

  User->>ChatComponent: Open chat / interact
  ChatComponent->>useChatSession: Invoke hook
  useChatSession-->>ChatComponent: { streamingError, isPending, ... }
  ChatComponent->>ChatBox: isStreaming = loading || persisting || summarizing || isPending
  ChatBox-->>User: Show streaming/pending UI state

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Prevent overwriting chats while not fully loaded (#198)	❓	Adds isPending and propagates to streaming UI, but does not show submission blocking or data protection logic. Unclear if it prevents overwrite.

Possibly related PRs

• Disable chatbox while streaming #14 — Adjusts chat streaming UI flow by propagating a streaming flag into ChatBox, similar pattern to this PR.
• Fix streaming errors and spacing issues #165 — Modifies useChatSession return API (adds streamingError), akin to this PR’s addition of isPending.

Poem

In burrows of bytes I twitch my nose,
A pending flag now comes and goes.
I thump my foot—“Hold, don’t send yet!”
Till all the chat is safely set.
Streams now wait, like carrots in line—
Crunch! The logs remain divine. 🥕

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between cb491b6 and d926a0f.

📒 Files selected for processing (2)

• frontend/src/hooks/useChatSession.ts (1 hunks)
• frontend/src/routes/_auth.chat.$chatId.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit Inference Engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling

Files:

• frontend/src/hooks/useChatSession.ts
• frontend/src/routes/_auth.chat.$chatId.tsx

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (CLAUDE.md)

Use strict TypeScript typing and avoid any when possible

Files:

• frontend/src/hooks/useChatSession.ts
• frontend/src/routes/_auth.chat.$chatId.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: browseruse-tests
• GitHub Check: build-macos (universal-apple-darwin)
• GitHub Check: build-linux
• GitHub Check: build-ios

🔇 Additional comments (3)

frontend/src/hooks/useChatSession.ts (1)

319-321: Good addition: expose isPending from the hook API

Returning isPending makes the pending state available to consumers without breaking changes. This aligns with the PR goal to disable input during initial load.

frontend/src/routes/_auth.chat.$chatId.tsx (2)

189-195: LGTM: consume isPending from the hook

Adding isPending to the destructuring is consistent with the new hook API and keeps the route component in sync.

---

589-592: Correct: include isPending in isStreaming to disable input while loading

This prevents user input from overwriting a chat that hasn’t fully loaded yet. Matches the PR objective.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/issue-198-20250816-1541

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[greptile-apps]

Greptile Summary

This PR fixes a critical data loss bug where users could accidentally overwrite entire chat histories by typing messages while chats were still loading from the server. The issue occurred because the chat input remained enabled during the loading phase, allowing users to submit messages before the full chat data was retrieved, which would initialize the optimistic state with an empty messages array and overwrite the existing chat.

The fix involves two key changes:

1. Exposing isPending state: The useChatSession hook now returns the isPending state from React Query's useQuery, which indicates when chat data is still being fetched from the server.

2. Disabling input during loading: The chat component now includes isPending in the isStreaming prop calculation (isLoading || isPersisting || isSummarizing || isPending), which disables the chat input during all phases where the chat state might be unstable.

This change integrates seamlessly with the existing architecture, leveraging React Query's built-in loading states and the component's existing input disabling mechanism. The hook already had a guard clause (if (!serverChat || isPending) return;) that prevents optimistic updates during loading, and now the UI properly reflects this loading state by disabling user input. This prevents the race condition where user input could overwrite partially loaded chat data, particularly important for users with long chat histories.

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it addresses a critical data loss bug with a targeted fix
• Score reflects the use of existing React Query patterns and proper integration with the component's input disabling mechanism
• No files require special attention as the changes are straightforward and leverage existing architectural patterns

_{2 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}