adding new cta in support page/ nebula modal

Author: GiselleNessi

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

@@ -1,5 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { NebulaIcon } from "app/nebula-app/(app)/icons/NebulaIcon";
 import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
@@ -9,6 +11,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 +119,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">
@@ -127,12 +153,31 @@ export default function SupportPage() {
               How can we help?
             </h1>
             <p className="text-center text-lg text-muted-foreground">
-              Our dedicated support team is here to help you with any questions
-              or issues you may have. Contact us today and let us assist you.
+              Get instant answers with Nebula AI, our onchain support assistant.
+              Still need help? You can also create a support case to reach our
+              team.
             </p>
-            <Button variant="default" className="mt-6" size="lg" asChild>
-              <Link href="/support/create-ticket">Get Support</Link>
-            </Button>
+            {/* biome-ignore lint/nursery/useSortedClasses: <explanation> */}
+            <div className="mt-6 w-full flex flex-col items-center gap-3">
+              <Button
+                variant="default"
+                className="gap-2 rounded-full"
+                size="default"
+              >
+                <NebulaIcon className="size-4" />
+                Ask Nebula AI for support
+              </Button>
+
+              <Link
+                href="/support/create-ticket"
+                target="_blank"
+                rel="noreferrer"
+                // biome-ignore lint/nursery/useSortedClasses: <explanation>
+                className="text-sm text-muted-foreground hover:underline"
+              >
+                Open a support case
+              </Link>
+            </div>
           </div>
         </header>
       </div>
@@ -185,6 +230,22 @@ export default function SupportPage() {
           ))}
         </div>
       </section>
+
+      <NebulaFloatingChatButton
+        pageType="support"
+        authToken={authToken ?? undefined}
+        label="Ask Nebula AI for support"
+        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/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:
     | {