From 4ffd44cf6ed58126f0d347b5f21f12e5ce542d27 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 23 Sep 2025 00:35:50 +0000
Subject: [PATCH 1/2] feat: Add AI usage banner to chat page

Co-authored-by: joaquim.verges <joaquim.verges@gmail.com>
---
 .../components/EmptyStateChatPageContent.tsx  | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
index fb81fe4db52..dea375d397a 100644
--- a/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUpRightIcon } from "lucide-react";
+import { ArrowUpRightIcon, InfoIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import { NebulaIcon } from "@/icons/NebulaIcon";
@@ -23,7 +23,8 @@ 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">
+      <AIUsageBanner />
       {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%)]" />
       )}
@@ -165,3 +166,37 @@ 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="w-full 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">
+          {/* Decorative blur */}
+          <div className="absolute -right-6 -top-6 size-20 rounded-full bg-blue-600 opacity-10 blur-xl" />
+          
+          <div className="relative flex items-start gap-3">
+            <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 billable based on number of tokens used. For more details, 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>
+  );
+}

From fd3cb3ca96480f5b4288fbba9b75ea442c8c24b7 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Tue, 23 Sep 2025 13:29:57 +1200
Subject: [PATCH 2/2] fixes

---
 .../@/components/misc/AnnouncementBanner.tsx  | 15 ++++----
 .../components/EmptyStateChatPageContent.tsx  | 35 +++++++++++++++++-
 .../components/EmptyStateChatPageContent.tsx  | 37 +------------------
 .../src/app/payments/x402/page.tsx            |  1 -
 apps/portal/src/app/payments/x402/page.mdx    |  1 -
 5 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx b/apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx
index 7deb08ac606..b5bf7642849 100644
--- a/apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx
+++ b/apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx
@@ -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;
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
index 9f5003c4c9c..b2614f74ee9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx
@@ -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";
@@ -24,6 +24,7 @@ export function EmptyStateChatPageContent(props: {
 }) {
   return (
     <div className="overflow-hidden py-10 lg:py-16">
+      <AIUsageBanner />
       {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%)]" />
       )}
@@ -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>
+  );
+}
diff --git a/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
index dea375d397a..1288a27b253 100644
--- a/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUpRightIcon, InfoIcon } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import { NebulaIcon } from "@/icons/NebulaIcon";
@@ -24,7 +24,6 @@ export function EmptyStateChatPageContent(props: {
 }) {
   return (
     <div className="relative overflow-hidden py-10 lg:py-16">
-      <AIUsageBanner />
       {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%)]" />
       )}
@@ -166,37 +165,3 @@ 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="w-full 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">
-          {/* Decorative blur */}
-          <div className="absolute -right-6 -top-6 size-20 rounded-full bg-blue-600 opacity-10 blur-xl" />
-          
-          <div className="relative flex items-start gap-3">
-            <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 billable based on number of tokens used. For more details, 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>
-  );
-}
diff --git a/apps/playground-web/src/app/payments/x402/page.tsx b/apps/playground-web/src/app/payments/x402/page.tsx
index 36d7f4b416a..e08cb8df411 100644
--- a/apps/playground-web/src/app/payments/x402/page.tsx
+++ b/apps/playground-web/src/app/payments/x402/page.tsx
@@ -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({
diff --git a/apps/portal/src/app/payments/x402/page.mdx b/apps/portal/src/app/payments/x402/page.mdx
index 6506d94e5fe..6baf022e5f9 100644
--- a/apps/portal/src/app/payments/x402/page.mdx
+++ b/apps/portal/src/app/payments/x402/page.mdx
@@ -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({