Add custom Synthflow WebSocket widget

components/SiteMenteVoiceWidget.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import SynthflowWidget from "./SynthflowWidget";
 
 interface SiteMenteVoiceWidgetProps {
   businessName?: string;
@@ -158,15 +159,13 @@ export default function SiteMenteVoiceWidget({
         </button>
       </div>
 
-      {/* Synthflow Widget - Embedded iframe */}
+      {/* Synthflow Widget - Custom WebSocket */}
       {mode === "synthflow" && (
-        <div className="absolute bottom-16 right-0 w-[380px] h-[520px] mb-2 rounded-xl overflow-hidden shadow-2xl border-2 border-green-500">
-          <iframe 
-            src="https://widget.synthflow.ai/widget/v2/0ee1b79c-43c2-41e0-aa6a-d2a560e0ca6a/1771945296284x399137457562280600?theme=dark"
-            className="w-full h-full"
-            allow="microphone; autoplay; fullscreen"
-            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
-            title="Synthflow AI Voice Assistant"
+        <div className="absolute bottom-16 right-0 mb-2">
+          <SynthflowWidget 
+            apiKey="yCNoizRk4kRcLrR4V27iem3XkFKZizWrjSXvkao-MZI"
+            assistantId="0ee1b79c-43c2-41e0-aa6a-d2a560e0ca6a"
+            theme={theme}
           />
         </div>
       )}