chore: add elevenlabs widget

autogpt_platform/frontend/src/app/layout.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import "./globals.css";
 
 import { Providers } from "@/app/providers";
+import ElevenLabsWidget from "@/components/ElevenLabsWidget";
 import TallyPopupSimple from "@/components/TallyPopup";
 import { GoogleAnalytics } from "@/components/analytics/google-analytics";
 import { Toaster } from "@/components/molecules/Toast/toaster";
@@ -42,6 +43,7 @@ export default async function RootLayout({
           <div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
             {children}
             <TallyPopupSimple />
+            <ElevenLabsWidget />
 
             {/* React Query DevTools is only available in development */}
             {process.env.NEXT_PUBLIC_REACT_QUERY_DEVTOOL && (

autogpt_platform/frontend/src/components/ElevenLabsWidget.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, createElement } from "react";
+import { getBehaveAs, BehaveAs } from "@/lib/utils";
+
+export default function ElevenLabsWidget() {
+  const behaveAs = getBehaveAs();
+
+  useEffect(() => {
+    if (behaveAs !== BehaveAs.CLOUD) return;
+
+    // Check if script is already loaded
+    const existingScript = document.querySelector(
+      'script[src="https://unpkg.com/@elevenlabs/convai-widget-embed"]',
+    );
+
+    if (existingScript) return;
+
+    const script = document.createElement("script");
+    script.src = "https://unpkg.com/@elevenlabs/convai-widget-embed";
+    script.async = true;
+    script.type = "text/javascript";
+
+    document.head.appendChild(script);
+
+    return () => {
+      const scriptToRemove = document.querySelector(
+        'script[src="https://unpkg.com/@elevenlabs/convai-widget-embed"]',
+      );
+      if (scriptToRemove) {
+        scriptToRemove.remove();
+      }
+    };
+  }, [behaveAs]);
+
+  if (behaveAs !== BehaveAs.CLOUD) return null;
+
+  return createElement("elevenlabs-convai", {
+    "agent-id": "agent_01k0catqvjef0sk50r03cj49ek",
+  });
+}