Improve links/buttons for AI errors (#1524)

drive-by: update links for pro banners

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Revamps ChatErrorBox with styled CTA buttons, UTM-tracked links,
broader error matching, and adds default help CTAs; updates Pro banners
to point to /pro URLs.
> 
> - **Chat**:
> - **Error handling/UI**: Expands rate-limit matching to include
`"Provider returned error"` and appends default CTAs on generic errors.
> - **CTAs**: Replaces underlined links with styled buttons via
`ExternalLink` (supports `primary|secondary` variants and icons), and
adds upgrade/docs buttons across error states.
> - **Links**: Adds UTM parameters to Pro/Docs links; updates exceeded
budget CTA to `"Reload or upgrade your subscription"` with new
subscription URL.
> - **Pro Banners**:
> - Adjusts banner click-through URLs in `AiAccessBanner`,
`SmartContextBanner`, and `TurboBanner` to `https://www.dyad.sh/pro?...`
(removes `#ai`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2111954ac9a98dd66f5b3b9e628270ac19713a2d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
This commit is contained in:
Will Chen
2025-10-13 17:05:04 -07:00
committed by GitHub
parent ffa4c3ad01
commit 7acbe73c73
2 changed files with 71 additions and 19 deletions

View File

@@ -1,5 +1,9 @@
import { IpcClient } from "@/ipc/ipc_client";
import { X } from "lucide-react";
import {
X,
ExternalLink as ExternalLinkIcon,
CircleArrowUp,
} from "lucide-react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
@@ -17,7 +21,10 @@ export function ChatErrorBox({
<ChatErrorContainer onDismiss={onDismiss}>
{error}
<span className="ml-1">
<ExternalLink href="https://dyad.sh/pro">
<ExternalLink
href="https://dyad.sh/pro?utm_source=dyad-app&utm_medium=app&utm_campaign=free-quota-error"
variant="primary"
>
Access with Dyad Pro
</ExternalLink>
</span>{" "}
@@ -30,22 +37,24 @@ export function ChatErrorBox({
// because it also includes this URL in the error message
if (
error.includes("Resource has been exhausted") ||
error.includes("https://ai.google.dev/gemini-api/docs/rate-limits")
error.includes("https://ai.google.dev/gemini-api/docs/rate-limits") ||
error.includes("Provider returned error")
) {
return (
<ChatErrorContainer onDismiss={onDismiss}>
{error}
<span className="ml-1">
<ExternalLink href="https://dyad.sh/pro">
<div className="mt-2 space-y-2 space-x-2">
<ExternalLink
href="https://dyad.sh/pro?utm_source=dyad-app&utm_medium=app&utm_campaign=rate-limit-error"
variant="primary"
>
Upgrade to Dyad Pro
</ExternalLink>
</span>{" "}
or read the
<span className="ml-1">
<ExternalLink href="https://dyad.sh/docs/help/ai-rate-limit">
Rate limit troubleshooting guide.
Troubleshooting guide
</ExternalLink>
</span>
</div>
</ChatErrorContainer>
);
}
@@ -55,7 +64,10 @@ export function ChatErrorBox({
<ChatInfoContainer onDismiss={onDismiss}>
<span>
Looks like you don't have a valid Dyad Pro key.{" "}
<ExternalLink href="https://dyad.sh/pro">
<ExternalLink
href="https://dyad.sh/pro?utm_source=dyad-app&utm_medium=app&utm_campaign=invalid-pro-key-error"
variant="primary"
>
Upgrade to Dyad Pro
</ExternalLink>{" "}
today.
@@ -68,8 +80,11 @@ export function ChatErrorBox({
<ChatInfoContainer onDismiss={onDismiss}>
<span>
You have used all of your Dyad AI credits this month.{" "}
<ExternalLink href="https://academy.dyad.sh/subscription">
Upgrade to Dyad Max
<ExternalLink
href="https://academy.dyad.sh/subscription?utm_source=dyad-app&utm_medium=app&utm_campaign=exceeded-budget-error"
variant="primary"
>
Reload or upgrade your subscription
</ExternalLink>{" "}
and get more AI credits
</span>
@@ -80,22 +95,59 @@ export function ChatErrorBox({
if (error.includes("Fallbacks=")) {
error = error.split("Fallbacks=")[0];
}
return <ChatErrorContainer onDismiss={onDismiss}>{error}</ChatErrorContainer>;
return (
<ChatErrorContainer onDismiss={onDismiss}>
{error}
<div className="mt-2 space-y-2 space-x-2">
<ExternalLink
href="https://dyad.sh/pro?utm_source=dyad-app&utm_medium=app&utm_campaign=general-error"
variant="primary"
>
Upgrade to Dyad Pro
</ExternalLink>
<ExternalLink href="https://www.dyad.sh/docs/faq">
Read docs
</ExternalLink>
</div>
</ChatErrorContainer>
);
}
function ExternalLink({
href,
children,
variant = "secondary",
icon,
}: {
href: string;
children: React.ReactNode;
variant?: "primary" | "secondary";
icon?: React.ReactNode;
}) {
const baseClasses =
"cursor-pointer inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium shadow-sm focus:outline-none focus:ring-2";
const primaryClasses =
"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
const secondaryClasses =
"bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 hover:border-blue-300 focus:ring-blue-200";
const iconElement =
icon ??
(variant === "primary" ? (
<CircleArrowUp size={18} />
) : (
<ExternalLinkIcon size={14} />
));
return (
<a
className="underline cursor-pointer text-blue-500 hover:text-blue-700"
className={`${baseClasses} ${
variant === "primary" ? primaryClasses : secondaryClasses
}`}
onClick={() => IpcClient.getInstance().openExternalUrl(href)}
>
{children}
<span>{children}</span>
{iconElement}
</a>
);
}