Skip to content

[Dashboard] Add ai usage billing banner to dashboard #8104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 23, 2025
Merged

[Dashboard] Add ai usage billing banner to dashboard #8104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ffd44c
feat: Add AI usage banner to chat page
cursoragent Sep 23, 2025
fd3cb3c
fixes
joaquim-verges Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,12 @@ function AnnouncementBannerUI(props: {
}

export function AnnouncementBanner() {
return (
<AnnouncementBannerUI
href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
trackingLabel="product-rebrand"
/>
);
// return (
// <AnnouncementBannerUI
// href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
// label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
// trackingLabel="product-rebrand"
// />
// );
return null;
Comment on lines +47 to +54
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Don’t silently disable AnnouncementBanner; gate or delete to avoid regressions.

Commenting out the render and returning null removes all global announcements and conflicts with our guidance to use AnnouncementBanner for notices. Either gate via a flag or delete the feature entirely (and its UI) to avoid dead code.

Apply one of these:

-  // return (
-  //   <AnnouncementBannerUI
-  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-  //     trackingLabel="product-rebrand"
-  //   />
-  // );
-  return null;
+  const SHOW_ANNOUNCEMENT = false; // flip to true to (re)enable when needed
+  return SHOW_ANNOUNCEMENT ? (
+    <AnnouncementBannerUI
+      href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
+      label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
+      trackingLabel="product-rebrand"
+    />
+  ) : null;

Quick check to ensure no pages depend on this banner:

🏁 Script executed:

#!/bin/bash
# Find imports/usages of AnnouncementBanner
rg -nP --type=tsx -C2 '<AnnouncementBanner\b|import\s+{[^}]*AnnouncementBanner[^}]*}\s+from'

Length of output: 27

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "rg version:"
rg --version || true
echo

echo "Finding AnnouncementBanner.tsx files (case-insensitive)..."
# Prefer find if fd isn't available
if command -v fd >/dev/null 2>&1; then
  fd -HI -e tsx -g "*AnnouncementBanner.tsx" || true
else
  find . -type f -iname "AnnouncementBanner.tsx" -print || true
fi
echo

echo "Searching repo for 'AnnouncementBanner' (imports/usages)..."
rg -nS "AnnouncementBanner" || true
echo

echo "Searching repo for JSX usage '<AnnouncementBanner'..."
rg -nS "<AnnouncementBanner\b" || true
echo

echo "Searching repo for 'AnnouncementBannerUI'..."
rg -nS "AnnouncementBannerUI" || true
echo

TARGET="apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx"
if [ -f "$TARGET" ]; then
  echo "== Showing $TARGET with line numbers =="
  nl -ba "$TARGET" | sed -n '1,240p'
else
  echo "File not found at $TARGET"
fi

Length of output: 2070

Don't silently disable AnnouncementBanner — gate it or remove the feature.

AnnouncementBanner currently returns null but is imported and rendered in multiple layouts, which removes global announcements (regression).

  • apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx — export at line 46; UI is commented out (~lines 48–54).
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx — import at line 9; at line 82.
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx — import at line 7; at line 66.
  • apps/dashboard/src/app/(app)/account/layout.tsx — import at line 8; at line 67.

Apply one of: gate behind a feature flag or delete the component and its usages. Suggested minimal change:

-  // return (
-  //   <AnnouncementBannerUI
-  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-  //     trackingLabel="product-rebrand"
-  //   />
-  // );
-  return null;
+  const SHOW_ANNOUNCEMENT = false; // flip to true to (re)enable when needed
+  return SHOW_ANNOUNCEMENT ? (
+    <AnnouncementBannerUI
+      href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
+      label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
+      trackingLabel="product-rebrand"
+    />
+  ) : null;
📝 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
// return (
// <AnnouncementBannerUI
// href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
// label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
// trackingLabel="product-rebrand"
// />
// );
return null;
const SHOW_ANNOUNCEMENT = false; // flip to true to (re)enable when needed
return SHOW_ANNOUNCEMENT ? (
<AnnouncementBannerUI
href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
trackingLabel="product-rebrand"
/>
) : null;
🤖 Prompt for AI Agents 
In apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx around lines
47–54 the component is returning null and its UI is commented out, removing
global announcements; either gate it behind a feature flag or delete it and its
usages. To gate: restore the commented return (use AnnouncementBannerUI with the
same href/label/trackingLabel props), read a feature flag (e.g.,
isFeatureEnabled('announcementBanner') or
process.env.FEATURE_ANNOUNCEMENT_BANNER) and render the UI only when the flag is
true (default false), export the component unchanged; to remove: delete this
file or export null and then remove the AnnouncementBanner import and
<AnnouncementBanner /> occurrences from the three layout files listed (team
layout line ~82, project sidebar layout line ~66, account layout line ~67) and
run a build to ensure no unused-import errors.

}
35 changes: 34 additions & 1 deletion ...pp)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { ArrowUpRightIcon } from "lucide-react";
import { ArrowUpRightIcon, InfoIcon } from "lucide-react";
import type { ThirdwebClient } from "thirdweb";
import { Button } from "@/components/ui/button";
import { NebulaIcon } from "@/icons/NebulaIcon";
Expand All @@ -24,6 +24,7 @@ export function EmptyStateChatPageContent(props: {
}) {
return (
<div className="overflow-hidden py-10 lg:py-16">
<AIUsageBanner />
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Make the banner’s positioning deterministic by making the container relative.

AIUsageBanner is absolute top-0. The nearest positioned ancestor is currently not the page section, so placement can drift. Align with the Nebula change and set the outer wrapper to relative.

Apply:

-    <div className="overflow-hidden py-10 lg:py-16">
+    <div className="relative overflow-hidden py-10 lg:py-16">
📝 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
<AIUsageBanner />
<div className="relative overflow-hidden py-10 lg:py-16">
<AIUsageBanner />
🤖 Prompt for AI Agents 
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
around line 27, the AIUsageBanner is positioned absolute (top-0) but its nearest
positioned ancestor is not the page section which makes placement drift; wrap
the <AIUsageBanner /> in the outer container that should be the positioned
ancestor and add relative positioning to that wrapper (e.g., give the outer
div/className a "relative" class) so the banner’s absolute positioning is
deterministic and anchored to the intended container.

{props.showAurora && (
<Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--primary-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--primary-foreground)/10%)]" />
)}
Expand Down Expand Up @@ -165,3 +166,35 @@ const Aurora: React.FC<AuroraProps> = ({ className }) => {
/>
);
};

function AIUsageBanner() {
return (
<div className="absolute top-0 left-0 right-0 z-10 flex justify-center px-4 pt-4">
<div className="max-w-4xl">
<div className="relative overflow-hidden rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 shadow-sm dark:border-blue-800 dark:from-blue-950/50 dark:to-blue-950/20">
<div className="relative flex items-center gap-3 px-2">
<div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
<InfoIcon className="size-3.5 text-blue-600 dark:text-blue-400" />
</div>

<div className="flex-1 text-sm">
<p className="text-blue-800 dark:text-blue-200">
thirdweb AI usage is billed based on number of tokens used. See
the{" "}
<a
href="https://thirdweb.com/pricing"
target="_blank"
rel="noopener noreferrer"
className="font-medium text-blue-700 underline decoration-blue-300 underline-offset-2 transition-colors hover:text-blue-800 hover:decoration-blue-500 dark:text-blue-300 dark:decoration-blue-600 dark:hover:text-blue-200 dark:hover:decoration-blue-400"
>
pricing page
</a>
.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function EmptyStateChatPageContent(props: {
onLoginClick: undefined | (() => void);
}) {
return (
<div className="overflow-hidden py-10 lg:py-16">
<div className="relative overflow-hidden py-10 lg:py-16">
{props.showAurora && (
<Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--nebula-pink-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--nebula-pink-foreground)/10%)]" />
)}
Expand Down
1 change: 0 additions & 1 deletion apps/playground-web/src/app/payments/x402/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ function ServerCodeExample() {

import { facilitator, verifyPayment } from "thirdweb/x402";
import { createThirdwebClient } from "thirdweb";
import { paymentMiddleware } from "x402-next";

const client = createThirdwebClient({ secretKey: "your-secret-key" });
const thirdwebX402Facilitator = facilitator({
Expand Down
1 change: 0 additions & 1 deletion apps/portal/src/app/payments/x402/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ Here's an example with a Next.js middleware:
```typescript
import { createThirdwebClient } from "thirdweb";
import { facilitator, verifyPayment } from "thirdweb/x402";
import { paymentMiddleware } from "x402-next";

const client = createThirdwebClient({ secretKey: "your-secret-key" });
const thirdwebX402Facilitator = facilitator({
Expand Down
Loading