[BLD-325] Dashboard: Rename floating chat button label

Author: MananTank

apps/dashboard/src/@/components/chat/CustomChatButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MessageCircleIcon, XIcon } from "lucide-react";
+import { CircleQuestionMarkIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
@@ -16,7 +16,6 @@ const client = createThirdwebClient({
 });
 
 export function CustomChatButton(props: {
-  label: string;
   examplePrompts: string[];
   authToken: string;
   team: Team;
@@ -39,30 +38,33 @@ export function CustomChatButton(props: {
     <>
       {/* Inline Button (not floating) */}
       <Button
-        className="gap-2 rounded-full shadow-lg"
+        className={cn(
+          "gap-2 rounded-full shadow-lg fixed right-6 bottom-6 z-50 bg-card",
+          isOpen && "opacity-0",
+        )}
+        size="sm"
         onClick={() => {
           setIsOpen(true);
           setHasBeenOpened(true);
         }}
-        variant="default"
+        variant="outline"
       >
-        <MessageCircleIcon className="size-4" />
-        {props.label}
+        <CircleQuestionMarkIcon className="size-3.5 text-muted-foreground" />
+        Need help?
       </Button>
 
       {/* Popup/Modal */}
       <div
         className={cn(
-          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
+          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-2xl",
           !isOpen && "hidden",
         )}
         ref={ref}
       >
         {/* Header with close button */}
         <div className="flex items-center justify-between border-b px-4 py-4">
           <div className="flex items-center gap-2 font-semibold text-lg">
-            <MessageCircleIcon className="size-5 text-muted-foreground" />
-            {props.label}
+            Need help?
           </div>
           <Button
             aria-label="Close chat"

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx

@@ -103,15 +103,12 @@ export default async function TeamLayout(props: {
         >
           {props.children}
         </TeamSidebarLayout>
-        <div className="fixed right-4 bottom-4 z-50">
-          <CustomChatButton
-            authToken={authToken}
-            clientId={undefined}
-            examplePrompts={siwaExamplePrompts}
-            label="Get Help"
-            team={team}
-          />
-        </div>
+        <CustomChatButton
+          authToken={authToken}
+          clientId={undefined}
+          examplePrompts={siwaExamplePrompts}
+          team={team}
+        />
       </div>
     </SidebarProvider>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx

@@ -77,15 +77,12 @@ export default async function ProjectLayout(props: {
           {props.children}
         </ProjectSidebarLayout>
       </div>
-      <div className="fixed right-4 bottom-4 z-50">
-        <CustomChatButton
-          authToken={authToken}
-          clientId={project.publishableKey}
-          examplePrompts={siwaExamplePrompts}
-          label="Ask AI Assistant"
-          team={team}
-        />
-      </div>
+      <CustomChatButton
+        authToken={authToken}
+        clientId={project.publishableKey}
+        examplePrompts={siwaExamplePrompts}
+        team={team}
+      />
       <SaveLastUsedProject projectId={project.id} teamId={team.id} />
     </SidebarProvider>
   );