From 7087b3fcbcf4b63f62638b528209b0eae2bdf7a0 Mon Sep 17 00:00:00 2001
From: GiselleNessi <gisecn@gmail.com>
Date: Fri, 25 Apr 2025 19:34:39 +0000
Subject: [PATCH] Dashboard: add nebula chat on support page, update CTAs
 (#6862)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `FloatingChat` component by renaming it to `NebulaChatButton` and adding support for a new `support` page type. It also updates various components and their usage across the application to reflect this change.

### Detailed summary
- Renamed `NebulaFloatingChatButton` to `NebulaChatButton`.
- Added `support` as a new value for the `pageType` property.
- Updated imports and component usage to reflect the new name.
- Added `isFloating` prop to `NebulaChatButton`.
- Modified `SupportPage` to utilize `NebulaChatButton` for support inquiries.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../(chain)/[chain_id]/(chainPage)/layout.tsx |  5 +-
 .../[chain_id]/[contractAddress]/layout.tsx   |  5 +-
 .../app/(app)/(dashboard)/support/page.tsx    | 62 +++++++++++++++++--
 .../FloatingChat/FloatingChat.stories.tsx     |  8 +--
 .../components/FloatingChat/FloatingChat.tsx  | 54 +++++++++-------
 .../FloatingChat/FloatingChatContent.tsx      |  4 +-
 6 files changed, 98 insertions(+), 40 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
index 72f63b4ed3a..f4bd349ab68 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
@@ -19,7 +19,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getThirdwebClient } from "../../../../../../@/constants/thirdweb.server";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
-import { NebulaFloatingChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
+import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
@@ -99,7 +99,8 @@ The following is the user's message:
 
   return (
     <>
-      <NebulaFloatingChatButton
+      <NebulaChatButton
+        isFloating={true}
         pageType="chain"
         authToken={authToken ?? undefined}
         label="Ask AI about this chain"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
index 2c80b8542b1..c2ae8f463fd 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
@@ -8,7 +8,7 @@ import { localhost } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isAddress, isContractDeployed } from "thirdweb/utils";
 import { shortenIfAddress } from "utils/usedapp-external";
-import { NebulaFloatingChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
+import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
@@ -114,7 +114,8 @@ The following is the user's message:`;
       teamsAndProjects={teamsAndProjects}
       client={client}
     >
-      <NebulaFloatingChatButton
+      <NebulaChatButton
+        isFloating={true}
         pageType="contract"
         authToken={authToken ?? undefined}
         label="Ask AI about this contract"
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx
index 813f444d9b0..51e15766b4d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx
+++ b/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 { NebulaChatButton } 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">
@@ -127,12 +152,37 @@ 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>
+            <div className="mt-6 flex w-full flex-col items-center gap-3">
+              <NebulaChatButton
+                isFloating={false}
+                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,
+                }))}
+              />
+
+              <Link
+                href="/support/create-ticket"
+                target="_blank"
+                rel="noreferrer"
+                className="text-muted-foreground text-sm hover:underline"
+              >
+                Open a support case
+              </Link>
+            </div>
           </div>
         </header>
       </div>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.stories.tsx
index f1b67c773ad..61c480f9702 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.stories.tsx
@@ -2,11 +2,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { storybookThirdwebClient } from "stories/utils";
 import { ThirdwebProvider } from "thirdweb/react";
 import { examplePrompts } from "../../data/examplePrompts";
-import { NebulaFloatingChatButton } from "./FloatingChat";
+import { NebulaChatButton } from "./FloatingChat";
 
 const meta = {
   title: "Nebula/FloatingChat",
-  component: NebulaFloatingChatButton,
+  component: NebulaChatButton,
   decorators: [
     (Story) => (
       <ThirdwebProvider>
@@ -14,10 +14,10 @@ const meta = {
       </ThirdwebProvider>
     ),
   ],
-} satisfies Meta<typeof NebulaFloatingChatButton>;
+} satisfies Meta<typeof NebulaChatButton>;
 
 export default meta;
-type Story = StoryObj<typeof NebulaFloatingChatButton>;
+type Story = StoryObj<typeof NebulaChatButton>;
 
 export const LoggedIn: Story = {
   args: {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
index 369146f3e0b..ee690537cff 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
@@ -21,12 +21,13 @@ import { NebulaIcon } from "../../icons/NebulaIcon";
 
 const LazyFloatingChatContent = lazy(() => import("./FloatingChatContent"));
 
-export function NebulaFloatingChatButton(props: {
-  pageType: "chain" | "contract";
+export function NebulaChatButton(props: {
+  pageType: "chain" | "contract" | "support";
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
   label: string;
   client: ThirdwebClient;
+  isFloating: boolean;
   nebulaParams:
     | {
         messagePrefix: string;
@@ -47,25 +48,30 @@ export function NebulaFloatingChatButton(props: {
 
   return (
     <>
-      {!isOpen && (
-        <div className="fixed right-6 bottom-6 z-50 flex items-center gap-1.5">
-          <Button
-            onClick={() => {
-              setIsOpen(true);
-              setHasBeenOpened(true);
-              trackEvent({
-                category: "floating_nebula",
-                action: "click",
-                label: "open",
-                page: props.pageType,
-              });
-            }}
-            variant="default"
-            className="gap-2 rounded-full"
-          >
-            <NebulaIcon className="size-4" />
-            {props.label}
-          </Button>
+      <div
+        className={cn(
+          "flex items-center gap-1.5",
+          props.isFloating && "fixed right-6 bottom-6 z-50",
+        )}
+      >
+        <Button
+          onClick={() => {
+            setIsOpen(true);
+            setHasBeenOpened(true);
+            trackEvent({
+              category: "floating_nebula",
+              action: "click",
+              label: "open",
+              page: props.pageType,
+            });
+          }}
+          variant="default"
+          className="gap-2 rounded-full"
+        >
+          <NebulaIcon className="size-4" />
+          {props.label}
+        </Button>
+        {props.isFloating && (
           <Button
             variant="outline"
             className="size-10 rounded-full bg-card p-0"
@@ -81,8 +87,8 @@ export function NebulaFloatingChatButton(props: {
           >
             <XIcon className="size-4" />
           </Button>
-        </div>
-      )}
+        )}
+      </div>
 
       <NebulaChatUIContainer
         onClose={closeModal}
@@ -104,7 +110,7 @@ function NebulaChatUIContainer(props: {
   hasBeenOpened: boolean;
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
-  pageType: "chain" | "contract";
+  pageType: "chain" | "contract" | "support";
   client: ThirdwebClient;
   nebulaParams:
     | {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
index 57b06358ecb..5aad872c971 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
+++ b/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:
     | {