open chat ui on click

Author: MananTank

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"

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"

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

@@ -1,7 +1,6 @@
 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";
@@ -11,7 +10,7 @@ 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 { NebulaChatButton } from "../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
@@ -159,14 +158,22 @@ export default async function SupportPage() {
             </p>
             {/* 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>
+              <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"
@@ -230,22 +237,6 @@ export default async 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.stories.tsx

@@ -2,22 +2,22 @@ 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>
         <Story />
       </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: {

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: {
+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}