Update support page with nebula chat components

Author: Yash094

.env.example

@@ -9,6 +9,12 @@ 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";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 
 export const metadata: Metadata = {
   title: "thirdweb Support",
@@ -112,7 +118,25 @@ 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 +209,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/.env.example

@@ -35,6 +35,7 @@ import {
 import { shortenAddress } from "thirdweb/utils";
 import type { Wallet } from "thirdweb/wallets";
 import type { NebulaContext } from "../api/chat";
+import Link from "next/link";
 
 export type WalletMeta = {
   walletId: Wallet["id"];
@@ -55,6 +56,7 @@ export function ChatBar(props: {
   activeAccountAddress: string | undefined;
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
+  includeSupportButton: boolean;
 }) {
   const [message, setMessage] = useState(props.prefillMessage || "");
   const selectedChainIds = props.context?.chainIds?.map((x) => Number(x)) || [];
@@ -173,7 +175,16 @@ export function ChatBar(props: {
             </div>
           )}
         </div>
-
+        {props.includeSupportButton && (
+          <Button
+            variant="default"
+            className="!h-auto w-auto shrink-0 gap-2 p-2"
+          > 
+          <Link href="/support/create-ticket">
+            Create Support Ticket
+          </Link>
+          </Button>
+        )}
         {/* Send / Stop */}
         {props.isChatStreaming ? (
           <Button

apps/dashboard/src/app/(app)/(dashboard)/support/page.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/ChatBar.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:
     | {
@@ -222,6 +222,7 @@ function FloatingChatContentLoggedIn(props: {
         isChatStreaming={isChatStreaming}
         prefillMessage=""
         sendMessage={handleSendMessage}
+        includeSupportButton={props.pageType === "support"}
         className="rounded-none border-x-0 border-b-0"
       />
     </div>