[TOOL-4176] Dashboard: Add tracking to nebula floating chat

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

@@ -100,6 +100,7 @@ The following is the user's message:
   return (
     <>
       <NebulaFloatingChatButton
+        pageType="chain"
         authToken={authToken ?? undefined}
         label="Ask AI about this chain"
         client={client}

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

@@ -115,6 +115,7 @@ The following is the user's message:`;
       client={client}
     >
       <NebulaFloatingChatButton
+        pageType="contract"
         authToken={authToken ?? undefined}
         label="Ask AI about this contract"
         client={client}

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

@@ -15,12 +15,14 @@ import {
   useState,
 } from "react";
 import type { ThirdwebClient } from "thirdweb";
+import { useTrack } from "../../../../../hooks/analytics/useTrack";
 import type { ExamplePrompt } from "../../data/examplePrompts";
 import { NebulaIcon } from "../../icons/NebulaIcon";
 
 const LazyFloatingChatContent = lazy(() => import("./FloatingChatContent"));
 
 export function NebulaFloatingChatButton(props: {
+  pageType: "chain" | "contract";
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
   label: string;
@@ -37,6 +39,7 @@ export function NebulaFloatingChatButton(props: {
   const [hasBeenOpened, setHasBeenOpened] = useState(false);
   const closeModal = useCallback(() => setIsOpen(false), []);
   const [isDismissed, setIsDismissed] = useState(false);
+  const trackEvent = useTrack();
 
   if (isDismissed) {
     return null;
@@ -50,6 +53,12 @@ export function NebulaFloatingChatButton(props: {
             onClick={() => {
               setIsOpen(true);
               setHasBeenOpened(true);
+              trackEvent({
+                category: "floating_nebula",
+                action: "click",
+                label: "open",
+                page: props.pageType,
+              });
             }}
             variant="default"
             className="gap-2 rounded-full"
@@ -60,7 +69,15 @@ export function NebulaFloatingChatButton(props: {
           <Button
             variant="outline"
             className="size-10 rounded-full bg-card p-0"
-            onClick={() => setIsDismissed(true)}
+            onClick={() => {
+              setIsDismissed(true);
+              trackEvent({
+                category: "floating_nebula",
+                action: "click",
+                label: "dismiss",
+                page: props.pageType,
+              });
+            }}
           >
             <XIcon className="size-4" />
           </Button>
@@ -75,6 +92,7 @@ export function NebulaFloatingChatButton(props: {
         client={props.client}
         nebulaParams={props.nebulaParams}
         examplePrompts={props.examplePrompts}
+        pageType={props.pageType}
       />
     </>
   );
@@ -86,6 +104,7 @@ function NebulaChatUIContainer(props: {
   hasBeenOpened: boolean;
   authToken: string | undefined;
   examplePrompts: ExamplePrompt[];
+  pageType: "chain" | "contract";
   client: ThirdwebClient;
   nebulaParams:
     | {
@@ -98,6 +117,7 @@ function NebulaChatUIContainer(props: {
   const ref = useOutsideClick(props.onClose);
   const shouldRenderChat = props.isOpen || props.hasBeenOpened;
   const [nebulaSessionKey, setNebulaSessionKey] = useState(0);
+  const trackEvent = useTrack();
 
   return (
     <div
@@ -112,6 +132,14 @@ function NebulaChatUIContainer(props: {
           className="group flex items-center gap-2"
           target="_blank"
           href="https://thirdweb.com/nebula"
+          onClick={() => {
+            trackEvent({
+              category: "floating_nebula",
+              action: "click",
+              label: "nebula-landing",
+              page: props.pageType,
+            });
+          }}
         >
           <h2 className="font-semibold text-lg tracking-tight">Nebula</h2>
           <ExternalLinkIcon className="size-4 text-muted-foreground/70 group-hover:text-foreground" />
@@ -158,6 +186,7 @@ function NebulaChatUIContainer(props: {
               nebulaParams={props.nebulaParams}
               key={nebulaSessionKey}
               examplePrompts={props.examplePrompts}
+              pageType={props.pageType}
             />
           </Suspense>
         )}

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

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { Button } from "../../../../../@/components/ui/button";
+import { useTrack } from "../../../../../hooks/analytics/useTrack";
 import type { NebulaContext } from "../../api/chat";
 import { createSession } from "../../api/session";
 import type { ExamplePrompt } from "../../data/examplePrompts";
@@ -20,6 +21,7 @@ export default function FloatingChatContent(props: {
   authToken: string | undefined;
   client: ThirdwebClient;
   examplePrompts: ExamplePrompt[];
+  pageType: "chain" | "contract";
   nebulaParams:
     | {
         messagePrefix: string;
@@ -38,13 +40,15 @@ export default function FloatingChatContent(props: {
       client={props.client}
       nebulaParams={props.nebulaParams}
       examplePrompts={props.examplePrompts}
+      pageType={props.pageType}
     />
   );
 }
 
 function FloatingChatContentLoggedIn(props: {
   authToken: string;
   client: ThirdwebClient;
+  pageType: "chain" | "contract";
   examplePrompts: ExamplePrompt[];
   nebulaParams:
     | {
@@ -60,6 +64,7 @@ function FloatingChatContentLoggedIn(props: {
   const [chatAbortController, setChatAbortController] = useState<
     AbortController | undefined
   >();
+  const trackEvent = useTrack();
   const [isChatStreaming, setIsChatStreaming] = useState(false);
   const [enableAutoScroll, setEnableAutoScroll] = useState(false);
 
@@ -90,6 +95,15 @@ function FloatingChatContentLoggedIn(props: {
       setIsChatStreaming(true);
       setEnableAutoScroll(true);
 
+      trackEvent({
+        category: "floating_nebula",
+        action: "send",
+        label: "message",
+        message: userMessage,
+        page: props.pageType,
+        sessionId: sessionId,
+      });
+
       // if this is first message, set the message prefix
       const messageToSend =
         props.nebulaParams?.messagePrefix && !userHasSubmittedMessage
@@ -145,6 +159,8 @@ function FloatingChatContentLoggedIn(props: {
       sessionId,
       props.nebulaParams?.messagePrefix,
       userHasSubmittedMessage,
+      trackEvent,
+      props.pageType,
     ],
   );