Open
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughThe PR enhances the guide-action-button component with dynamic prompt generation logic tailored to different guide types and SDK platforms. Three new UI actions are introduced for opening guides in Cursor and Codex editors, plus updated icon components. Helper functions generate specialized prompts for client-SDK guides (with React-specific handling) and sanitize markdown content for safe embedding. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/ui/src/icons/codex.tsx (1)
16-16: PrefercurrentColorto keep Codex icon theme-aware.At Line 16, fixed fill prevents parent color classes from applying. Using
currentColorkeeps behavior consistent with other menu icons.Suggested fix
- fill="#262626" + fill="currentColor"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/icons/codex.tsx` at line 16, The Codex icon component in codex.tsx currently hardcodes fill="#262626"; update the SVG element(s) in that component (look for the fill="#262626" attribute) to use fill="currentColor" so the icon inherits parent color classes and remains theme-aware.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/ui/guides/guide-action-button.tsx`:
- Around line 112-127: The generated React snippet places the analytics
component outside the <body>, producing invalid Next.js RootLayout markup;
update the RootLayout function so that analyticsComponent (the <DubAnalytics />
markup) is rendered inside the <body> alongside {children} — locate the
RootLayout export and move the analyticsComponent reference into the <body>
element (ensure the <html> contains only <body> and that analyticsComponent is
rendered as part of body children, e.g., inside the body tag with {children}) so
the component is not outside the body.
In `@packages/ui/src/icons/openai.tsx`:
- Line 16: The SVG in packages/ui/src/icons/openai.tsx currently hardcodes
fill="#262626", which prevents consumer className color utilities from working;
update the SVG path(s) or shape fill attributes to use "currentColor" instead of
the hex value so the OpenAI icon respects parent text color (e.g.,
className="text-...") when rendered (locate the fill attribute inside the OpenAI
icon component in this file and replace the literal with "currentColor").
---
Nitpick comments:
In `@packages/ui/src/icons/codex.tsx`:
- Line 16: The Codex icon component in codex.tsx currently hardcodes
fill="#262626"; update the SVG element(s) in that component (look for the
fill="#262626" attribute) to use fill="currentColor" so the icon inherits parent
color classes and remains theme-aware.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8788e693-aeff-4381-8ce1-0fc0048cac4c
📒 Files selected for processing (6)
apps/web/ui/guides/guide-action-button.tsxpackages/ui/src/icons/anthropic.tsxpackages/ui/src/icons/codex.tsxpackages/ui/src/icons/cursor.tsxpackages/ui/src/icons/index.tsxpackages/ui/src/icons/openai.tsx
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
apps/web/ui/guides/guide-action-button.tsx (1)
112-124:⚠️ Potential issue | 🟠 MajorMove
analyticsComponentinside<body>in the generated React snippet.At Line 122 and Line 123, the generated example places
${analyticsComponent}as a sibling of<body>, which produces invalid RootLayout markup when copied.Suggested fix
return ( <html lang="en"> - <body>{children}</body> - ${analyticsComponent} + <body> + {children} + ${analyticsComponent} + </body> </html> );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/ui/guides/guide-action-button.tsx` around lines 112 - 124, The generated example in RootLayout places analyticsComponent outside the <body>, producing invalid markup; update the snippet so that analyticsComponent is rendered inside the <body> (e.g., render {children} and then include ${analyticsComponent} before the closing </body>), locating the change in the RootLayout example where children and analyticsComponent are returned.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@apps/web/ui/guides/guide-action-button.tsx`:
- Around line 112-124: The generated example in RootLayout places
analyticsComponent outside the <body>, producing invalid markup; update the
snippet so that analyticsComponent is rendered inside the <body> (e.g., render
{children} and then include ${analyticsComponent} before the closing </body>),
locating the change in the RootLayout example where children and
analyticsComponent are returned.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b847e9c2-c88c-49dd-a03c-93a829ef5336
📒 Files selected for processing (1)
apps/web/ui/guides/guide-action-button.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/ui/guides/guide-action-button.tsx (1)
240-320: Refactor repeated AI action buttons into a config map.The ChatGPT/Claude/Cursor/Codex blocks repeat nearly identical markup and interaction wiring. Converting this to a data-driven render path will reduce drift and future update cost.
♻️ Suggested refactor shape
+const aiActions = [ + { + label: "Open in ChatGPT", + subtitle: "Ask questions about this step", + Icon: OpenAI, + getUrl: (prompt: string) => + `https://chatgpt.com?hints=search&prompt=${encodeURIComponent(prompt)}`, + }, + { + label: "Open in Claude", + subtitle: "Ask questions about this step", + Icon: Anthropic, + getUrl: (prompt: string) => + `https://claude.ai/new?q=${encodeURIComponent(prompt)}`, + }, + { + label: "Open in Cursor", + subtitle: "Ask questions about this step", + Icon: Cursor, + getUrl: (prompt: string) => + `https://cursor.com/link/prompt?text=${encodeURIComponent(prompt)}`, + }, + { + label: "Open in Codex", + subtitle: "Ask questions about this step", + Icon: Codex, + getUrl: (prompt: string) => + `https://chatgpt.com/codex?prompt=${encodeURIComponent(prompt)}`, + }, +]; ... -<button>...</button> // repeated x4 +{aiActions.map(({ label, subtitle, Icon, getUrl }) => ( + <button + key={label} + className="flex w-full cursor-pointer items-center gap-2 rounded-md p-2 text-sm text-neutral-600 transition-colors hover:bg-neutral-100" + onClick={() => window.open(getUrl(prompt), "_blank", "noopener,noreferrer")} + > + <div className="flex h-8 w-8 items-center justify-center rounded border border-neutral-200 transition-colors hover:border-neutral-300"> + <Icon className="size-4 text-neutral-600" /> + </div> + <div className="flex flex-1 flex-col items-start"> + <div className="flex items-center gap-1"> + <span className="font-medium">{label}</span> + <ArrowUpRight className="size-3.5 text-neutral-600" /> + </div> + <span className="text-xs text-neutral-500">{subtitle}</span> + </div> + </button> +))}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/ui/guides/guide-action-button.tsx` around lines 240 - 320, The four nearly identical button blocks (rendering ChatGPT, Claude, Cursor, Codex) duplicate markup and click logic; replace them with a data-driven config array (e.g., providers = [{ key:'chatgpt', label:'Open in ChatGPT', icon: OpenAI, url: p => `https://chatgpt.com?hints=search&prompt=${encodeURIComponent(p)}` }, ...]) that uses the existing identifiers prompt, cursorUrl, codexUrl, OpenAI, Anthropic, Cursor, Codex and ArrowUpRight, then map over providers to render a single Button JSX template that calls window.open(provider.url(promptOrUrls)) and preserves all classes/structure and aria/title text; ensure provider entries that need full URLs (cursorUrl/codexUrl) accept the precomputed value while others build from prompt.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/ui/guides/guide-action-button.tsx`:
- Around line 137-139: The early return in guide-action-button.tsx that checks
guide.type === "client-sdk" && guide.key === "shopify" causes Shopify to skip
the setup-question flow and standardized footer; remove or refactor that
special-case return so Shopify follows the same client-sdk branch logic that
triggers the publishable-key/outbound-domain/click-tracking prompts and the
shared footer formatting. Locate the conditional using guide.type and guide.key
and either drop the shopify-specific return or fold its messaging into the
existing client-sdk flow so the same prompts and footer are produced for shopify
as for other client-sdk keys.
---
Nitpick comments:
In `@apps/web/ui/guides/guide-action-button.tsx`:
- Around line 240-320: The four nearly identical button blocks (rendering
ChatGPT, Claude, Cursor, Codex) duplicate markup and click logic; replace them
with a data-driven config array (e.g., providers = [{ key:'chatgpt', label:'Open
in ChatGPT', icon: OpenAI, url: p =>
`https://chatgpt.com?hints=search&prompt=${encodeURIComponent(p)}` }, ...]) that
uses the existing identifiers prompt, cursorUrl, codexUrl, OpenAI, Anthropic,
Cursor, Codex and ArrowUpRight, then map over providers to render a single
Button JSX template that calls window.open(provider.url(promptOrUrls)) and
preserves all classes/structure and aria/title text; ensure provider entries
that need full URLs (cursorUrl/codexUrl) accept the precomputed value while
others build from prompt.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9a795311-3ab9-4c67-8169-cad883c9187a
📒 Files selected for processing (2)
apps/web/ui/guides/guide-action-button.tsxpackages/ui/src/icons/codex.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/src/icons/codex.tsx
Comment on lines
+137
to
+139
| if (guide.type === "client-sdk" && guide.key === "shopify") { | ||
| return `Read from ${guide.url} so I can ask questions about it.`; | ||
| } |
Contributor
There was a problem hiding this comment.
Shopify branch bypasses the new setup-question flow.
At Line 137–Line 139, the early return for guide.key === "shopify" skips the publishable-key/outbound-domain/click-tracking prompts and the standardized footer format used by other client SDK options, making Shopify behavior inconsistent.
💡 Proposed fix
function getGuidePrompt(guide: IntegrationGuide, markdown: string) {
- if (guide.type === "client-sdk" && guide.key === "shopify") {
- return `Read from ${guide.url} so I can ask questions about it.`;
- }
-
if (guide.type === "client-sdk" && guide.key === "react") {
return getReactStepOnePrompt(markdown, guide);
}
if (guide.type === "client-sdk") {
const conversionTrackingEnabled = CONVERSION_TRACKING_PATTERNS.some((pattern) =>
pattern.test(markdown),
);
const outboundTrackingEnabled = isOutboundDomainTrackingEnabled(markdown);
const sanitizedMarkdown = sanitizeClientScriptMarkdown(markdown);
return [
- "I'm using Dub and need to install the client-side script.",
+ guide.key === "shopify"
+ ? "I'm using Dub with Shopify and need to install client-side tracking."
+ : "I'm using Dub and need to install the client-side script.",
"Help me add the script from the instructions below.",
conversionTrackingEnabled
? "Ask me for my publishable key before finalizing the conversion tracking setup."
: null,
"Ask me if I want to enable client-side click tracking (Dub Partners). If yes, add `domainsConfig.refer` with my referring domain.",
outboundTrackingEnabled
? "Ask me which outbound domains I want to track before finalizing the setup."
: null,
"Instructions:",
sanitizedMarkdown,
`Full guide link for reference: ${guide.url}`,
]
.filter(Boolean)
.join("\n\n");
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (guide.type === "client-sdk" && guide.key === "shopify") { | |
| return `Read from ${guide.url} so I can ask questions about it.`; | |
| } | |
| function getGuidePrompt(guide: IntegrationGuide, markdown: string) { | |
| if (guide.type === "client-sdk" && guide.key === "react") { | |
| return getReactStepOnePrompt(markdown, guide); | |
| } | |
| if (guide.type === "client-sdk") { | |
| const conversionTrackingEnabled = CONVERSION_TRACKING_PATTERNS.some((pattern) => | |
| pattern.test(markdown), | |
| ); | |
| const outboundTrackingEnabled = isOutboundDomainTrackingEnabled(markdown); | |
| const sanitizedMarkdown = sanitizeClientScriptMarkdown(markdown); | |
| return [ | |
| guide.key === "shopify" | |
| ? "I'm using Dub with Shopify and need to install client-side tracking." | |
| : "I'm using Dub and need to install the client-side script.", | |
| "Help me add the script from the instructions below.", | |
| conversionTrackingEnabled | |
| ? "Ask me for my publishable key before finalizing the conversion tracking setup." | |
| : null, | |
| "Ask me if I want to enable client-side click tracking (Dub Partners). If yes, add `domainsConfig.refer` with my referring domain.", | |
| outboundTrackingEnabled | |
| ? "Ask me which outbound domains I want to track before finalizing the setup." | |
| : null, | |
| "Instructions:", | |
| sanitizedMarkdown, | |
| `Full guide link for reference: ${guide.url}`, | |
| ] | |
| .filter(Boolean) | |
| .join("\n\n"); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/ui/guides/guide-action-button.tsx` around lines 137 - 139, The early
return in guide-action-button.tsx that checks guide.type === "client-sdk" &&
guide.key === "shopify" causes Shopify to skip the setup-question flow and
standardized footer; remove or refactor that special-case return so Shopify
follows the same client-sdk branch logic that triggers the
publishable-key/outbound-domain/click-tracking prompts and the shared footer
formatting. Locate the conditional using guide.type and guide.key and either
drop the shopify-specific return or fold its messaging into the existing
client-sdk flow so the same prompts and footer are produced for shopify as for
other client-sdk keys.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dropdown
When opening in selected app, the prompt:
Other
CleanShot.2026-03-04.at.15.19.28.mp4
Summary by CodeRabbit
New Features
Improvements
UI Updates