feat: add 'Fix with Doce' button to preview error state#46
Conversation
When the preview server fails to start, show a 'Fix with Doce' button that sends the error message to the AI chat for automated troubleshooting. - Add onFixWithDoce callback prop to PreviewPanel - Wire up handleSend from useChatPanel in ProjectContentWrapper - Send formatted prompt with error details to AI agent
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 47 minutes and 4 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThe changes add a "Fix with Doce" flow for preview errors. Sequence Diagram(s)sequenceDiagram
actor User
participant PreviewPanel
participant ProjectContentWrapper
participant ChatPanel
participant ChatAgent as Chat Agent
User->>PreviewPanel: Click "Fix with Doce"
PreviewPanel->>ProjectContentWrapper: onFixWithDoce(errorMessage)
ProjectContentWrapper->>ProjectContentWrapper: Format prompt with context
ProjectContentWrapper->>ChatPanel: handleSend(formattedPrompt)
ChatPanel->>ChatAgent: Deliver prompt for analysis
ChatAgent-->>ChatPanel: Analysis/response
ChatPanel-->>ProjectContentWrapper: Response delivered
ProjectContentWrapper-->>PreviewPanel: (optional) display result/update UI
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/preview/PreviewPanel.tsx`:
- Around line 679-691: The error state is rendering duplicate retry CTAs: the
centered "Try Again" uses handleRetry and onFixWithDoce/message, while the
header also renders a "Retry" button; update PreviewPanel so only one retry CTA
shows by removing or conditionally hiding the header Retry button when the
centered error actions are displayed (use the same error/state that triggers
rendering of the centered block—i.e., the presence of message or the error
flag). Specifically, locate the header Retry button in PreviewPanel and wrap it
in the inverse condition of the centered error actions (or remove it entirely)
so that handleRetry appears only once alongside onFixWithDoce when message is
present.
In `@src/components/projects/ProjectContentWrapper.tsx`:
- Around line 61-74: Guard handleFixWithDoce to avoid sending while the agent is
streaming: update the handleFixWithDoce function to check the isStreaming flag
(already in ProjectContentWrapper) and return early when true before calling
handleSend; additionally consider passing isStreaming into PreviewPanel and
disabling the "Fix with Doce" button there so the UI reflects the same state.
Ensure you reference handleFixWithDoce, isStreaming, handleSend, and
PreviewPanel when making the changes.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 482143c0-fa1f-41ae-ad53-045dd52a7461
📒 Files selected for processing (2)
src/components/preview/PreviewPanel.tsxsrc/components/projects/ProjectContentWrapper.tsx
| <div className="flex items-center gap-2"> | ||
| <Button variant="outline" onClick={handleRetry}> | ||
| Try Again | ||
| </Button> | ||
| {onFixWithDoce && message && ( | ||
| <Button | ||
| variant="default" | ||
| onClick={() => onFixWithDoce(message)} | ||
| > | ||
| Fix with Doce | ||
| </Button> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Avoid showing duplicate retry CTAs in the error state.
This adds Try Again in the error panel while the header still renders Retry for the same error state at Lines 575-579. The resulting UI can show three actions instead of the intended “Try Again” + “Fix with Doce”.
Suggested cleanup
- <div className="flex items-center gap-2">
+ <div className="flex items-center gap-2">
<Button variant="outline" onClick={handleRetry}>
Try Again
</Button>Also remove or hide the header retry button when the centered error actions are shown.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/preview/PreviewPanel.tsx` around lines 679 - 691, The error
state is rendering duplicate retry CTAs: the centered "Try Again" uses
handleRetry and onFixWithDoce/message, while the header also renders a "Retry"
button; update PreviewPanel so only one retry CTA shows by removing or
conditionally hiding the header Retry button when the centered error actions are
displayed (use the same error/state that triggers rendering of the centered
block—i.e., the presence of message or the error flag). Specifically, locate the
header Retry button in PreviewPanel and wrap it in the inverse condition of the
centered error actions (or remove it entirely) so that handleRetry appears only
once alongside onFixWithDoce when message is present.
| // Get chat send function for "Fix with Doce" feature | ||
| const { handleSend } = useChatPanel({ | ||
| projectId, | ||
| models, | ||
| onStreamingStateChange: (count, streaming) => { | ||
| setUserMessageCount(count); | ||
| setIsStreaming(streaming); | ||
| }, | ||
| }); | ||
|
|
||
| const handleFixWithDoce = (errorMessage: string) => { | ||
| const prompt = `The preview server failed to start with this error:\n\n${errorMessage}\n\nPlease fix this issue.`; | ||
| void handleSend(prompt); | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify whether `useChatPanel` owns per-hook local state and find all active hook instances.
# Inspect the hook implementation for local state/subscriptions around items, handleSend, and streaming.
fd -i '^useChatPanel\.ts$' --exec sed -n '1,240p' {}
# Inspect call sites to confirm whether ProjectContentWrapper and rendered chat panels create separate hook instances.
rg -nP -C4 '\buseChatPanel\s*\(' --type=ts --type=tsxRepository: pablopunk/doce.dev
Length of output: 6293
🏁 Script executed:
#!/bin/bash
# Find and inspect useChatStore implementation
fd -i 'chatstore' --type f | head -20Repository: pablopunk/doce.dev
Length of output: 127
🏁 Script executed:
#!/bin/bash
# Search for handleFixWithDoce call sites and surrounding context
rg -n 'handleFixWithDoce' -A 5 -B 5Repository: pablopunk/doce.dev
Length of output: 2808
🏁 Script executed:
#!/bin/bash
# Inspect the useChatStore hook to understand state sharing
fd 'useChatStore' -type f -name '*.ts' -o -name '*.tsx' | xargs cat | head -150Repository: pablopunk/doce.dev
Length of output: 232
🏁 Script executed:
#!/bin/bash
cat src/stores/useChatStore.ts | head -100Repository: pablopunk/doce.dev
Length of output: 2199
🏁 Script executed:
#!/bin/bash
# Find ChatPanel component and check if it calls useChatPanel
rg -n 'useChatPanel' src/components/chat/ChatPanel.tsx -A 3 -B 3Repository: pablopunk/doce.dev
Length of output: 596
🏁 Script executed:
#!/bin/bash
# Check where onFixWithDoce is actually invoked - look for click handlers or error handlers
rg -n 'onFixWithDoce' --type ts --type tsx -B 5Repository: pablopunk/doce.dev
Length of output: 89
🏁 Script executed:
#!/bin/bash
# Search for onFixWithDoce usage and invocation points
rg 'onFixWithDoce' -A 5 -B 5Repository: pablopunk/doce.dev
Length of output: 4273
🏁 Script executed:
#!/bin/bash
# Look at useChatStore initialization to confirm singleton behavior
cat src/stores/useChatStore.ts | tail -50Repository: pablopunk/doce.dev
Length of output: 1201
Guard handleFixWithDoce to prevent sending while the agent is streaming/building.
The handler currently sends the diagnostic prompt unconditionally, even when isStreaming is true. This conflicts with the linked issue requirement to avoid transient errors while code is actively changing. Since isStreaming is already available in ProjectContentWrapper, add a guard before calling handleSend:
const handleFixWithDoce = (errorMessage: string) => {
if (isStreaming) return; // Ignore while agent is busy
const prompt = `The preview server failed to start with this error:\n\n${errorMessage}\n\nPlease fix this issue.`;
void handleSend(prompt);
};Alternatively or additionally, disable the "Fix with Doce" button in PreviewPanel when the agent is streaming by passing isStreaming to the component and conditionally disabling the button.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/projects/ProjectContentWrapper.tsx` around lines 61 - 74,
Guard handleFixWithDoce to avoid sending while the agent is streaming: update
the handleFixWithDoce function to check the isStreaming flag (already in
ProjectContentWrapper) and return early when true before calling handleSend;
additionally consider passing isStreaming into PreviewPanel and disabling the
"Fix with Doce" button there so the UI reflects the same state. Ensure you
reference handleFixWithDoce, isStreaming, handleSend, and PreviewPanel when
making the changes.
|
❌ Preview deployment failed. |
|
🚀 Preview deployed! |
|
❌ Preview deployment failed. |
1 participant
Closes #8
When the preview server fails to start, users can now click a 'Fix with Doce' button that automatically sends the error message to the AI chat for troubleshooting.
Changes
onFixWithDoceprop and button that appears on error statehandleSendfromuseChatPanelto send formatted prompt to AIHow it works
Screenshot
Error state now shows two buttons:
Summary by CodeRabbit
New Features
UI Changes
Chores