From 22397de05832065aed774169613fbe50b224d8f9 Mon Sep 17 00:00:00 2001
From: root <root@vps1170145.hostsailor.com>
Date: Tue, 24 Feb 2026 15:17:48 +0000
Subject: [PATCH] Simplify widget - direct mode buttons

---
 components/SiteMenteVoiceWidget.tsx | 37 ++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/components/SiteMenteVoiceWidget.tsx b/components/SiteMenteVoiceWidget.tsx
index c3a2961..b0b6d7b 100644
--- a/components/SiteMenteVoiceWidget.tsx
+++ b/components/SiteMenteVoiceWidget.tsx
@@ -140,14 +140,23 @@ export default function SiteMenteVoiceWidget({
         {language === 'en' ? '🇪🇸 ES' : '🇬🇧 EN'}
       </button>
 
-      {/* Mode Toggle Button */}
-      <button
-        onClick={cycleMode}
-        className={`absolute bottom-16 right-0 ${buttonColor} px-3 py-1.5 rounded-full text-xs text-white shadow-lg mb-2 flex items-center gap-1.5 hover:scale-105 transition-transform`}
-        title={mode === "off" ? "Enable Chat" : "Switch Mode"}
-      >
-        {getModeIcon()} {getModeLabel()}
-      </button>
+      {/* Mode Toggle Buttons - Direct Selection */}
+      <div className="absolute bottom-16 right-0 flex flex-col gap-1 mb-2">
+        <button
+          onClick={() => setModeInternal("text")}
+          className={`${mode === "text" ? buttonColor : "bg-white/20"} px-3 py-1.5 rounded-full text-xs text-white shadow-lg flex items-center gap-1.5 hover:scale-105 transition-transform`}
+          title="Text Chat"
+        >
+          💬 Chat
+        </button>
+        <button
+          onClick={() => setModeInternal("synthflow")}
+          className={`${mode === "synthflow" ? "bg-green-500" : "bg-white/20"} px-3 py-1.5 rounded-full text-xs text-white shadow-lg flex items-center gap-1.5 hover:scale-105 transition-transform`}
+          title="AI Voice"
+        >
+          🎙️ Voice
+        </button>
+      </div>
 
       {/* Synthflow Widget */}
       {mode === "synthflow" && (
@@ -231,25 +240,25 @@ export default function SiteMenteVoiceWidget({
         </div>
       )}
 
-      {/* Main Button */}
+      {/* Main Button - Toggle chat visibility when in text mode */}
       <button
-        onClick={cycleMode}
+        onClick={() => setShowChat(!showChat)}
         className={`${buttonColor} w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110 ${
           mode === "synthflow" ? "animate-pulse ring-4 ring-green-500/50" : ""
         }`}
-        title={getModeLabel()}
+        title={mode === "text" ? (showChat ? "Close" : "Open Chat") : "Click to enable"}
       >
         {mode === "synthflow" ? (
           <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
           </svg>
-        ) : mode === "text" ? (
+        ) : showChat ? (
           <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
         ) : (
           <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
           </svg>
         )}
       </button>