Resolution search follow up chat input

[ngoiyaeric]

The chat input after the first resolution search has no response, only faster example queries does it respond

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Add a useEffect in chat.tsx that clears suggestions whenever new messages are added, ensuring resolution search flows properly reset UI state
• Cancel pending debounce timeouts when suggestions are cleared or form is submitted to prevent race conditions
• These minimal, targeted changes follow existing patterns and avoid introducing new abstractions while fixing the root cause of suggestions persisting after resolution search

Implementation Steps

Phase 1: Clear Suggestions State on Message Changes

This phase addresses the core issue by ensuring suggestions are cleared whenever new messages are added to the chat, regardless of how those messages were generated (normal chat, resolution search, followup panel, etc.).

Add Message Change Listener to Clear Suggestions

Implement automatic suggestion cleanup when the message count increases, ensuring resolution search and other non-input submission flows properly reset the suggestions state.

• Add a useEffect in components/chat.tsx that monitors the messages array length
• When a new message is detected (length increases), call setSuggestions(null) to clear stale suggestions
• Use a ref to track previous message count to detect additions vs. initial renders
• This ensures any submission path—including resolution search from header button, carousel, or followup panel—properly clears suggestions

🤖 Prompt for AI agents

This phase ensures suggestions are cleared whenever new messages are added to
the chat, fixing the issue where resolution search causes stale suggestions to
persist.

In `components/chat.tsx`:
- Add a useEffect hook that monitors the `messages` array length
- Use a ref to track the previous message count to distinguish between new
message additions and initial renders
- When the message count increases (new message detected), call
`setSuggestions(null)` to clear any existing suggestions
- This ensures all submission paths (normal chat, resolution search from header
button, carousel, or followup panel) properly clear the suggestions state

Phase 2: Prevent Race Condition with Debounced Suggestions

This phase addresses a secondary race condition where a pending debounce timeout could re-set suggestions after they've been cleared, causing them to persist unexpectedly.

Task 1: Cancel Pending Debounce When Clearing Suggestions

Expose a mechanism to cancel the debounced suggestions fetch when suggestions need to be cleared, preventing stale async operations from re-populating the suggestions state.

• In components/chat-panel.tsx, expose a clearSuggestionsWithCancel callback that clears the debounce timeout ref before calling setSuggestions(null)
• Update the onSuggestionsChange prop to accept an additional cancel flag or provide a separate callback
• When the message change listener in chat.tsx clears suggestions, also invoke the cancel mechanism
• Alternatively, clear the timeout directly in chat-panel when setSuggestions(null) is propagated down via props

Task 2: Clear Debounce Timeout on Form Submission

Ensure the debounce timeout is cancelled when the form is submitted, preventing any pending suggestion fetch from interfering with post-submission state.

• In components/chat-panel.tsx handleSubmit function, add clearTimeout(debounceTimeoutRef.current) before clearing the input
• This ensures that when input is cleared via setInput(''), no pending timeout will re-trigger suggestions
• Apply the same cleanup in the Enter key handler before calling requestSubmit()

🤖 Prompt for AI agents

This phase prevents race conditions where pending debounced suggestion fetches
could re-populate suggestions after they've been cleared.

In `components/chat-panel.tsx`:

**Task 2.1: Cancel Pending Debounce When Clearing Suggestions**
- Expose a `clearSuggestionsWithCancel` callback that clears the debounce
timeout ref before calling `setSuggestions(null)`
- Update the `onSuggestionsChange` prop to accept an additional `cancel` flag or
provide a separate callback for cancellation
- Ensure the message change listener in `chat.tsx` can invoke this cancel
mechanism when clearing suggestions
- Alternatively, clear the timeout directly in chat-panel when
`setSuggestions(null)` is propagated down via props

**Task 2.2: Clear Debounce Timeout on Form Submission**
- In the `handleSubmit` function, add `clearTimeout(debounceTimeoutRef.current)`
before clearing the input with `setInput('')`
- Apply the same timeout cleanup in the Enter key handler before calling
`requestSubmit()`
- This prevents any pending timeout from re-triggering suggestions after form
submission

Research

The chat system uses Vercel's AI RSC state management with a hybrid pattern combining server-side AI state and client-side UI state. The suggestions feature is managed via local state in chat.tsx, with the actual fetching logic debounced in chat-panel.tsx. Resolution search can be triggered from multiple entry points (header button, resolution carousel, followup panel) that bypass the chat panel's normal input→submit→clear cycle. The suggestions dropdown uses absolute positioning with z-50, appearing above the input field. The critical gap is that no useEffect exists to clear suggestions when messages change, causing suggestions to persist after resolution searches that don't go through the chat panel input.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase ensures suggestions are cleared whenever new messages are added to
the chat, fixing the issue where resolution search causes stale suggestions to
persist.

In `components/chat.tsx`:
- Add a useEffect hook that monitors the `messages` array length
- Use a ref to track the previous message count to distinguish between new
message additions and initial renders
- When the message count increases (new message detected), call
`setSuggestions(null)` to clear any existing suggestions
- This ensures all submission paths (normal chat, resolution search from header
button, carousel, or followup panel) properly clear the suggestions state
===============================================================================

Task: 2

This phase prevents race conditions where pending debounced suggestion fetches
could re-populate suggestions after they've been cleared.

In `components/chat-panel.tsx`:

**Task 2.1: Cancel Pending Debounce When Clearing Suggestions**
- Expose a `clearSuggestionsWithCancel` callback that clears the debounce
timeout ref before calling `setSuggestions(null)`
- Update the `onSuggestionsChange` prop to accept an additional `cancel` flag or
provide a separate callback for cancellation
- Ensure the message change listener in `chat.tsx` can invoke this cancel
mechanism when clearing suggestions
- Alternatively, clear the timeout directly in chat-panel when
`setSuggestions(null)` is propagated down via props

**Task 2.2: Clear Debounce Timeout on Form Submission**
- In the `handleSubmit` function, add `clearTimeout(debounceTimeoutRef.current)`
before clearing the input with `setInput('')`
- Apply the same timeout cleanup in the Enter key handler before calling
`requestSubmit()`
- This prevents any pending timeout from re-triggering suggestions after form
submission

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!