haitham/sitemente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify widget - direct mode buttons

Browse Source
This commit is contained in:
root
2026-02-24 15:17:48 +00:00
parent 8fdde1d882
commit 22397de058
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SiteMenteVoiceWidget.tsx
+23 -14
View File
@@ -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>