dashboard: Add AI chat component on support page

.env.example

@@ -4,4 +4,4 @@
 # used for unit tests that hit real IPFS gateway
 # get a secret key from https://thirdweb.com/create-api-key
 # Learn more about API keys. https://portal.thirdweb.com/account/api-keys
-TW_SECRET_KEY=""
+TW_SECRET_KEY=""

apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
@@ -9,6 +10,11 @@ import contractsIcon from "../../../../../public/assets/support/contracts.png";
 import engineIcon from "../../../../../public/assets/support/engine.png";
 import miscIcon from "../../../../../public/assets/support/misc.svg";
 import connectIcon from "../../../../../public/assets/support/wallets.png";
+import { NebulaFloatingChatButton } from "../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../api/lib/getAuthToken";
 
 export const metadata: Metadata = {
   title: "thirdweb Support",
@@ -112,7 +118,26 @@ const HELP_PRODUCTS = [
   },
 ] as const;
 
-export default function SupportPage() {
+export default async function SupportPage() {
+  const [authToken, accountAddress] = await Promise.all([
+    getAuthToken(),
+    getAuthTokenWalletAddress(),
+  ]);
+
+  const client = getThirdwebClient({
+    jwt: authToken,
+    teamId: undefined,
+  });
+
+  const supportPromptPrefix =
+    "You are a Customer Success Agent at thirdweb, assisting customers with blockchain and Web3-related issues. Use the following details to craft a professional, empathetic response: ";
+  const examplePrompts = [
+    "ERC20 - Transfer Amount Exceeds Allowance",
+    "Replacement transaction underpriced / Replacement fee too low",
+    "Nonce too low: next nonce #, tx nonce #",
+    "Nonce too high",
+  ];
+
   return (
     <main className="flex flex-col gap-12 pb-12">
       <div className="bg-gradient-to-b from-card/0 to-card py-20">
@@ -185,6 +210,22 @@ export default function SupportPage() {
           ))}
         </div>
       </section>
+
+      <NebulaFloatingChatButton
+        pageType="support"
+        authToken={authToken ?? undefined}
+        label="Ask AI about your issue"
+        client={client}
+        nebulaParams={{
+          messagePrefix: supportPromptPrefix,
+          chainIds: [],
+          wallet: accountAddress ?? undefined,
+        }}
+        examplePrompts={examplePrompts.map((prompt) => ({
+          title: prompt,
+          message: prompt,
+        }))}
+      />
     </main>
   );
 }

apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx

@@ -173,7 +173,6 @@ export function ChatBar(props: {
             </div>
           )}
         </div>
-
         {/* Send / Stop */}
         {props.isChatStreaming ? (
           <Button

apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx

@@ -22,7 +22,7 @@ import { NebulaIcon } from "../../icons/NebulaIcon";
 const LazyFloatingChatContent = lazy(() => import("./FloatingChatContent"));
 
 export function NebulaFloatingChatButton(props: {
-  pageType: "chain" | "contract";
+  pageType: "chain" | "contract" | "support";
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
   label: string;
@@ -104,7 +104,7 @@ function NebulaChatUIContainer(props: {
   hasBeenOpened: boolean;
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
-  pageType: "chain" | "contract";
+  pageType: "chain" | "contract" | "support";
   client: ThirdwebClient;
   nebulaParams:
     | {

apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx

@@ -25,7 +25,7 @@ export default function FloatingChatContent(props: {
   authToken: string | undefined;
   client: ThirdwebClient;
   examplePrompts: ExamplePrompt[];
-  pageType: "chain" | "contract";
+  pageType: "chain" | "contract" | "support";
   nebulaParams:
     | {
         messagePrefix: string;
@@ -52,7 +52,7 @@ export default function FloatingChatContent(props: {
 function FloatingChatContentLoggedIn(props: {
   authToken: string;
   client: ThirdwebClient;
-  pageType: "chain" | "contract";
+  pageType: "chain" | "contract" | "support";
   examplePrompts: ExamplePrompt[];
   nebulaParams:
     | {