Create src/components/defrag/eleven-labs-agent.tsx

src/components/defrag/eleven-labs-agent.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from 'react';
+
+export function ElevenLabsAgent() {
+  // Uses environment variable or falls back to null if not set
+  const agentId = process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID;
+
+  useEffect(() => {
+    if (!agentId) return;
+    
+    const script = document.createElement('script');
+    script.src = 'https://elevenlabs.io/convai-widget/index.js';
+    script.async = true;
+    script.type = 'text/javascript';
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [agentId]);
+
+  if (!agentId) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100]">
+      {/* @ts-ignore */}
+      <elevenlabs-convai agent-id={agentId} />
+    </div>
+  );
+}