fix(dashboard): update Recapt integration to load globally and streamline widget rendering (#592)

app/(dashboard)/layout.tsx

@@ -5,8 +5,6 @@ import DashboardNav from '@/components/dashboard/DashboardNav'
 import { MainContainer } from '@/components/dashboard/MainContainer'
 import CompanyTabSync from '@/components/dashboard/CompanyTabSync'
 import { RecaptIdentify } from '@/components/RecaptIdentify'
-import { RecaptLoader } from '@/components/RecaptLoader'
-import { RecaptHideWidget } from '@/components/RecaptHideWidget'
 import { AgentSheetProvider } from '@/components/agent/AgentSheetProvider'
 import AgentTrigger from '@/components/agent/AgentTrigger'
 import CommandPalette from '@/components/common/CommandPalette'
@@ -282,15 +280,11 @@ export default async function DashboardLayout({
           <CommandPalette />
         </div>
         {!isSandbox && (
-          <>
-            <RecaptLoader />
-            <RecaptHideWidget />
-            <RecaptIdentify
-              userId={user.id}
-              email={user.email}
-              displayName={settings?.company_name || undefined}
-            />
-          </>
+          <RecaptIdentify
+            userId={user.id}
+            email={user.email}
+            displayName={settings?.company_name || undefined}
+          />
         )}
       </AgentSheetProvider>
     </CompanyProvider>

app/layout.tsx

@@ -6,6 +6,8 @@ import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@/components/theme-provider";
+import { RecaptLoader } from "@/components/RecaptLoader";
+import { RecaptHideWidget } from "@/components/RecaptHideWidget";
 import { ensureInitialized } from "@/lib/init";
 import { getBranding } from "@/lib/branding/service";
 import "./globals.css";
@@ -70,6 +72,7 @@ export default async function RootLayout({
     <html lang={locale} suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} ${hedvigSerif.variable}`}>
       <head>
         <link rel="apple-touch-icon" href={branding.appleTouchIconPath} />
+        <RecaptLoader />
       </head>
       <body
         className="antialiased"
@@ -83,6 +86,7 @@ export default async function RootLayout({
           >
             {children}
             <Toaster />
+            <RecaptHideWidget />
           </ThemeProvider>
         </NextIntlClientProvider>
         <Script src="/sw-register.js" strategy="afterInteractive" />