[TOOL-4347] Dashboard: Use Nebula auth token for nebula floating chat (#6928)

<!--

## 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 primarily focuses on enhancing the `NebulaChatButton` component by modifying authentication handling, improving the login process, and introducing a new method for managing the Nebula authentication token.

### Detailed summary
- Removed `authToken` from several components.
- Updated `doLogin` function to accept `loginPayload`.
- Introduced `getNebulaAuthToken` to manage token retrieval.
- Replaced `Suspense` with a new `ChatContent` component for better token handling.
- Added `useNebulaAuthToken` hook to fetch authentication token using React Query.
- Enhanced error handling and login flow in `doNebulaLogin`.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -103,7 +103,6 @@ The following is the user's message:
         networks={chain.testnet ? "testnet" : "mainnet"}
         isFloating={true}
         pageType="chain"
-        authToken={authToken ?? undefined}
         label="Ask AI about this chain"
         client={client}
         nebulaParams={{

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx

@@ -10,7 +10,6 @@ import { isAddress, isContractDeployed } from "thirdweb/utils";
 import { shortenIfAddress } from "utils/usedapp-external";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
-  getAuthToken,
   getAuthTokenWalletAddress,
   getUserThirdwebClient,
 } from "../../../../api/lib/getAuthToken";
@@ -47,10 +46,7 @@ export default async function Layout(props: {
     notFound();
   }
 
-  const [authToken, accountAddress] = await Promise.all([
-    getAuthToken(),
-    getAuthTokenWalletAddress(),
-  ]);
+  const accountAddress = await getAuthTokenWalletAddress();
 
   const client = await getUserThirdwebClient();
   const teamsAndProjects = await getTeamsAndProjectsIfLoggedIn();
@@ -118,7 +114,6 @@ The following is the user's message:`;
         networks={info.chainMetadata.testnet ? "testnet" : "mainnet"}
         isFloating={true}
         pageType="contract"
-        authToken={authToken ?? undefined}
         label="Ask AI about this contract"
         client={client}
         nebulaParams={{

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

@@ -161,7 +161,6 @@ export default async function SupportPage() {
                 networks="all"
                 isFloating={false}
                 pageType="support"
-                authToken={authToken ?? undefined}
                 label="Ask Nebula AI for support"
                 client={client}
                 nebulaParams={{

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

@@ -4,6 +4,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
 import { useTrack } from "hooks/analytics/useTrack";
 import { ExternalLinkIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import Link from "next/link";
@@ -19,12 +20,12 @@ import type { ThirdwebClient } from "thirdweb";
 import type { NebulaContext } from "../../api/chat";
 import type { ExamplePrompt } from "../../data/examplePrompts";
 import { NebulaIcon } from "../../icons/NebulaIcon";
+import { getNebulaAuthToken } from "./actions";
 
 const LazyFloatingChatContent = lazy(() => import("./FloatingChatContent"));
 
 export function NebulaChatButton(props: {
   pageType: "chain" | "contract" | "support";
-  authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
   networks: NebulaContext["networks"];
   label: string;
@@ -97,7 +98,6 @@ export function NebulaChatButton(props: {
         onClose={closeModal}
         isOpen={isOpen}
         hasBeenOpened={hasBeenOpened}
-        authToken={props.authToken}
         client={props.client}
         nebulaParams={props.nebulaParams}
         examplePrompts={props.examplePrompts}
@@ -111,7 +111,6 @@ function NebulaChatUIContainer(props: {
   onClose: () => void;
   isOpen: boolean;
   hasBeenOpened: boolean;
-  authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
   pageType: "chain" | "contract" | "support";
   client: ThirdwebClient;
@@ -183,29 +182,54 @@ function NebulaChatUIContainer(props: {
       {/* once opened keep the component mounted to preserve the states */}
       <div className="relative flex grow flex-col overflow-hidden">
         {shouldRenderChat && (
-          <Suspense
-            fallback={
-              <div className="absolute inset-0 flex items-center justify-center">
-                <Spinner className="size-10" />
-              </div>
-            }
-          >
-            <LazyFloatingChatContent
-              networks={props.networks}
-              authToken={props.authToken}
-              client={props.client}
-              nebulaParams={props.nebulaParams}
-              key={nebulaSessionKey}
-              examplePrompts={props.examplePrompts}
-              pageType={props.pageType}
-            />
-          </Suspense>
+          <ChatContent
+            sessionKey={nebulaSessionKey}
+            networks={props.networks}
+            client={props.client}
+            nebulaParams={props.nebulaParams}
+            examplePrompts={props.examplePrompts}
+            pageType={props.pageType}
+          />
         )}
       </div>
     </div>
   );
 }
 
+function ChatContent(
+  props: Omit<
+    React.ComponentProps<typeof LazyFloatingChatContent>,
+    "authToken"
+  > & {
+    sessionKey: number;
+  },
+) {
+  const { sessionKey, ...restProps } = props;
+  const nebulaAuthTokenQuery = useNebulaAuthToken();
+
+  if (nebulaAuthTokenQuery.isPending) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <Suspense fallback={<LoadingScreen />}>
+      <LazyFloatingChatContent
+        key={sessionKey}
+        {...restProps}
+        authToken={nebulaAuthTokenQuery.data ?? undefined}
+      />
+    </Suspense>
+  );
+}
+
+function LoadingScreen() {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center">
+      <Spinner className="size-10" />
+    </div>
+  );
+}
+
 function useOutsideClick(onOutsideClick: () => void) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -234,3 +258,17 @@ function useOutsideClick(onOutsideClick: () => void) {
 
   return ref;
 }
+
+function useNebulaAuthToken() {
+  return useQuery({
+    queryKey: ["nebula-auth-token"],
+    queryFn: async () => {
+      const jwt = await getNebulaAuthToken();
+      return jwt || null;
+    },
+    retry: false,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  });
+}

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

@@ -0,0 +1,54 @@
+"use server";
+
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../../../(app)/api/lib/getAuthToken";
+import { getNebulaLoginStatus } from "../../../_utils/isLoggedIntoNebula";
+import {
+  doNebulaLogin,
+  getNebulaLoginPayload,
+} from "../../../login/auth-actions";
+
+export async function getNebulaAuthToken() {
+  const [dashboardAuthToken, dashboardAuthTokenAddress] = await Promise.all([
+    getAuthToken(),
+    getAuthTokenWalletAddress(),
+  ]);
+
+  // if not logged in to dashboard
+  if (!dashboardAuthToken || !dashboardAuthTokenAddress) {
+    return undefined;
+  }
+
+  const nebulaLoginStatus = await getNebulaLoginStatus();
+
+  // if already logged in to nebula
+  if (nebulaLoginStatus.isLoggedIn) {
+    return nebulaLoginStatus.authToken;
+  }
+
+  // automatically login to nebula with the dashboard auth token ---
+  const loginPayload = await getNebulaLoginPayload({
+    address: dashboardAuthTokenAddress,
+    chainId: 1,
+  });
+
+  if (!loginPayload) {
+    return undefined;
+  }
+
+  const result = await doNebulaLogin({
+    type: "floating-chat",
+    loginPayload: {
+      payload: loginPayload,
+      token: dashboardAuthToken,
+    },
+  });
+
+  if (result.success) {
+    return result.token;
+  }
+
+  return undefined;
+}

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

@@ -132,14 +132,18 @@ function CustomConnectEmbed(props: {
         <ConnectEmbed
           auth={{
             getLoginPayload: getNebulaLoginPayload,
-            doLogin: async (params) => {
+            doLogin: async (loginPayload) => {
               if (isVercel() && !turnstileToken) {
                 setAlwaysShowTurnstile(true);
                 throw new Error("Please complete the captcha.");
               }
 
               try {
-                const result = await doNebulaLogin(params, turnstileToken);
+                const result = await doNebulaLogin({
+                  type: "nebula-app",
+                  loginPayload: loginPayload,
+                  turnstileToken,
+                });
                 if (result.error) {
                   console.error(
                     "Failed to login",

apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx

@@ -42,18 +42,29 @@ export async function getNebulaLoginPayload(
 }
 
 export async function doNebulaLogin(
-  payload: VerifyLoginPayloadParams,
-  turnstileToken: string | undefined,
+  params:
+    | {
+        type: "nebula-app";
+        loginPayload: VerifyLoginPayloadParams;
+        turnstileToken: string | undefined;
+      }
+    | {
+        type: "floating-chat";
+        loginPayload: {
+          payload: LoginPayload;
+          token: string;
+        };
+      },
 ) {
   // only validate the turnstile token if we are in a vercel environment
-  if (isVercel()) {
-    if (!turnstileToken) {
+  if (params.type === "nebula-app" && isVercel()) {
+    if (!params.turnstileToken) {
       return {
         error: "Please complete the captcha.",
       };
     }
 
-    const result = await verifyTurnstileToken(turnstileToken);
+    const result = await verifyTurnstileToken(params.turnstileToken);
     if (!result.success) {
       return {
         error: "Invalid captcha. Please try again.",
@@ -71,15 +82,16 @@ export async function doNebulaLogin(
       "Content-Type": "application/json",
       "X-Secret-Key": NEBULA_APP_SECRET_KEY,
     },
-    body: JSON.stringify(payload),
+    body: JSON.stringify(params.loginPayload),
   });
 
   // if the request failed, log the error and throw an error
   if (!res.ok) {
     try {
       // clear the cookies to prevent any weird issues
       cookieStore.delete(
-        NEBULA_COOKIE_PREFIX_TOKEN + getAddress(payload.payload.address),
+        NEBULA_COOKIE_PREFIX_TOKEN +
+          getAddress(params.loginPayload.payload.address),
       );
       cookieStore.delete(NEBULA_COOKIE_ACTIVE_ACCOUNT);
     } catch {
@@ -127,7 +139,8 @@ export async function doNebulaLogin(
 
   // set the token cookie
   cookieStore.set(
-    NEBULA_COOKIE_PREFIX_TOKEN + getAddress(payload.payload.address),
+    NEBULA_COOKIE_PREFIX_TOKEN +
+      getAddress(params.loginPayload.payload.address),
     jwt,
     {
       httpOnly: true,
@@ -140,7 +153,7 @@ export async function doNebulaLogin(
   // set the active account cookie
   cookieStore.set(
     NEBULA_COOKIE_ACTIVE_ACCOUNT,
-    getAddress(payload.payload.address),
+    getAddress(params.loginPayload.payload.address),
     {
       httpOnly: true,
       secure: true,
@@ -151,6 +164,7 @@ export async function doNebulaLogin(
 
   return {
     success: true,
+    token: jwt,
   };
 }