@cuekit-ai/react 1.4.0 → 1.5.0

package/dist/index.mjs

@@ -37,7 +37,7 @@ import {
   setWebRTCCallbacks,
   setWebRTCConfig,
   validateDynamicElements
-} from "./chunk-VQ6DNY3R.mjs";
+} from "./chunk-MHLYAXXW.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -389,7 +389,7 @@ var require_core = __commonJS({
         root4.CryptoJS = factory();
       }
     })(exports, function() {
-      var CryptoJS = CryptoJS || function(Math2, undefined2) {
+      var CryptoJS = CryptoJS || (function(Math2, undefined2) {
         var crypto;
         if (typeof window !== "undefined" && window.crypto) {
           crypto = window.crypto;
@@ -429,7 +429,7 @@ var require_core = __commonJS({
           }
           throw new Error("Native crypto module could not be used to get secure random number.");
         };
-        var create2 = Object.create || /* @__PURE__ */ function() {
+        var create2 = Object.create || /* @__PURE__ */ (function() {
           function F2() {
           }
           return function(obj) {
@@ -439,10 +439,10 @@ var require_core = __commonJS({
             F2.prototype = null;
             return subtype;
           };
-        }();
+        })();
         var C = {};
         var C_lib = C.lib = {};
-        var Base = C_lib.Base = /* @__PURE__ */ function() {
+        var Base = C_lib.Base = /* @__PURE__ */ (function() {
           return {
             /**
              * Creates a new object that inherits from this object.
@@ -541,7 +541,7 @@ var require_core = __commonJS({
               return this.init.prototype.extend(this);
             }
           };
-        }();
+        })();
         var WordArray = C_lib.WordArray = Base.extend({
           /**
            * Initializes a newly created word array.
@@ -979,7 +979,7 @@ var require_core = __commonJS({
         });
         var C_algo = C.algo = {};
         return C;
-      }(Math);
+      })(Math);
       return CryptoJS;
     });
   }
@@ -1285,7 +1285,7 @@ var CuekitProvider = ({
     };
   }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-3TOBGQF7.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
+    import("./webrtc-service-AUWJ6AHB.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
           if (command.data.actionType === "navigate" && command.data.routeName) {
@@ -1374,7 +1374,7 @@ var CuekitProvider = ({
 };
 
 // src/components/mic-button.tsx
-import React11, { useState as useState10, useEffect as useEffect10, useCallback as useCallback5, useRef as useRef7 } from "react";
+import React11, { useState as useState10, useEffect as useEffect9, useCallback as useCallback5, useRef as useRef7 } from "react";
 
 // src/hooks/use-cuekit.ts
 import { useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
@@ -1513,6 +1513,7 @@ var useCuekit = (options) => {
   }, []);
   const [micState, setMicState] = useState3("idle");
   const [status, setStatus] = useState3("");
+  const [muteState, setMuteState] = useState3({ isMuted: false, canMute: false });
   const handleNavigationCommand = (event) => {
     console.log(`\u2B07\uFE0F Received event from backend: ${event.type}`, event);
     switch (event.type) {
@@ -1577,6 +1578,22 @@ var useCuekit = (options) => {
         }
         break;
       }
+      case "chat": {
+        const chatData = event.data;
+        console.log("\u{1F4AC} Chat message received:", chatData);
+        if (chatData.message && chatData.sender === "ai") {
+          const newMessage = {
+            id: `ai-${Date.now()}`,
+            role: "ai",
+            text: chatData.message,
+            isFinal: true,
+            timestamp: new Date(chatData.timestamp || Date.now()).toISOString()
+          };
+          setMessages((prev) => [...prev, newMessage]);
+          setMicState("listening");
+        }
+        break;
+      }
       case "request_runtime_data": {
         console.log("\u{1F9E0} Requesting runtime data");
         sendRuntimeData();
@@ -1609,17 +1626,21 @@ var useCuekit = (options) => {
     switch (state) {
       case "connecting":
         setStatus("Connecting...");
+        setMuteState((prev) => ({ ...prev, canMute: false }));
         break;
       case "connected":
         setStatus("");
         setMicState("listening");
+        setMuteState((prev) => ({ ...prev, canMute: true }));
         break;
       case "disconnected":
         setStatus("Disconnected");
         setMicState("idle");
+        setMuteState({ isMuted: false, canMute: false });
         break;
       case "reconnecting":
         setStatus("Reconnecting...");
+        setMuteState((prev) => ({ ...prev, canMute: false }));
         break;
       default:
         break;
@@ -1641,7 +1662,88 @@ var useCuekit = (options) => {
     await webrtc.disconnect();
     clearMessages();
     setMicState("idle");
+    setMuteState({ isMuted: false, canMute: false });
   }, [webrtc, clearMessages]);
+  const toggleMute = useCallback2(async () => {
+    if (!webrtc.isConnected) return;
+    try {
+      const room = webrtc.room;
+      if (!room) return;
+      const localParticipant = room.localParticipant;
+      const audioTrack = localParticipant.getTrackPublication(Track.Source.Microphone)?.track;
+      if (audioTrack) {
+        if (muteState.isMuted) {
+          await audioTrack.unmute();
+          setMuteState((prev) => ({ ...prev, isMuted: false }));
+        } else {
+          await audioTrack.mute();
+          setMuteState((prev) => ({ ...prev, isMuted: true }));
+        }
+      }
+    } catch (error) {
+      console.error("Failed to toggle mute:", error);
+    }
+  }, [webrtc, muteState.isMuted]);
+  const setMute = useCallback2(
+    async (muted) => {
+      if (!webrtc.isConnected) return;
+      try {
+        const room = webrtc.room;
+        if (!room) return;
+        const localParticipant = room.localParticipant;
+        const audioTrack = localParticipant.getTrackPublication(Track.Source.Microphone)?.track;
+        if (audioTrack) {
+          if (muted && !muteState.isMuted) {
+            await audioTrack.mute();
+            setMuteState((prev) => ({ ...prev, isMuted: true }));
+          } else if (!muted && muteState.isMuted) {
+            await audioTrack.unmute();
+            setMuteState((prev) => ({ ...prev, isMuted: false }));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to set mute:", error);
+      }
+    },
+    [webrtc, muteState.isMuted]
+  );
+  const sendChatMessage = useCallback2(
+    async (message) => {
+      if (!webrtc.isConnected) {
+        console.warn("Cannot send chat message: not connected to LiveKit");
+        return;
+      }
+      try {
+        const room = webrtc.room;
+        if (!room) return;
+        const payload = {
+          type: "chat",
+          message,
+          timestamp: Date.now(),
+          sender: "user"
+        };
+        console.log("\u{1F4E4} Sending chat message via LiveKit:", payload);
+        const encoder = new TextEncoder();
+        const encodedData = encoder.encode(JSON.stringify(payload));
+        await room.localParticipant.publishData(encodedData, {
+          reliable: true
+        });
+        const newMessage = {
+          id: `user-${Date.now()}`,
+          role: "user",
+          text: message,
+          isFinal: true,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setMessages((prev) => [...prev, newMessage]);
+        setMicState("thinking");
+      } catch (error) {
+        console.error("Failed to send chat message:", error);
+        throw error;
+      }
+    },
+    [webrtc]
+  );
   return {
     ...webrtc,
     messages,
@@ -1650,12 +1752,16 @@ var useCuekit = (options) => {
     status,
     setStatus,
     connect,
-    disconnect
+    disconnect,
+    muteState,
+    toggleMute,
+    setMute,
+    sendChatMessage
   };
 };
 
 // src/components/chat-popup.tsx
-import React6, { useState as useState5, useEffect as useEffect5, useRef as useRef3 } from "react";
+import React8, { useState as useState5, useEffect as useEffect4, useRef as useRef3 } from "react";
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -3530,7 +3636,7 @@ var urlAttributes = {
 
 // node_modules/react-markdown/lib/index.js
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // node_modules/mdast-util-to-string/lib/index.js
 var emptyOptions2 = {};
@@ -9252,7 +9358,7 @@ var convert = (
    * @param {Test} [test]
    * @returns {Check}
    */
-  function(test) {
+  (function(test) {
     if (test === null || test === void 0) {
       return ok2;
     }
@@ -9266,7 +9372,7 @@ var convert = (
       return typeFactory(test);
     }
     throw new Error("Expected function, string, or object as test");
-  }
+  })
 );
 function anyFactory(tests) {
   const checks2 = [];
@@ -10446,7 +10552,7 @@ var CallableInstance = (
    * @param {string | symbol} property
    * @returns {(...parameters: Array<unknown>) => unknown}
    */
-  function(property) {
+  (function(property) {
     const self2 = this;
     const constr = self2.constructor;
     const proto = (
@@ -10461,7 +10567,7 @@ var CallableInstance = (
     };
     Object.setPrototypeOf(apply, proto);
     return apply;
-  }
+  })
 );
 
 // node_modules/unified/lib/index.js
@@ -14399,6 +14505,59 @@ var PhoneOffIcon = ({ width = 24, height = 24, className, ...props }) => {
 };
 var phone_off_default = PhoneOffIcon;
 
+// src/components/svgs/mic-off.tsx
+import React6 from "react";
+var MicOffIcon = ({ style, className }) => {
+  return /* @__PURE__ */ React6.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: `lucide lucide-mic-off-icon lucide-mic-off ${className || ""}`,
+      style
+    },
+    /* @__PURE__ */ React6.createElement("path", { d: "M12 19v3" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M18.89 13.23A7 7 0 0 0 19 12v-2" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "m2 2 20 20" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" })
+  );
+};
+var mic_off_default = MicOffIcon;
+
+// src/components/svgs/mic.tsx
+import React7 from "react";
+var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React7.createElement("path", { d: "M12 19v3" }),
+    /* @__PURE__ */ React7.createElement("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ React7.createElement("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+  );
+};
+var mic_default = MicIcon;
+
 // src/components/chat-popup.tsx
 var ChatPopup = ({
   isOpen,
@@ -14415,7 +14574,9 @@ var ChatPopup = ({
   currentTheme = "dark",
   onThemeToggle,
   status,
-  anchor
+  anchor,
+  muteState,
+  onToggleMute
 }) => {
   const [inputText, setInputText] = useState5("");
   const [isSending, setIsSending] = useState5(false);
@@ -14423,7 +14584,7 @@ var ChatPopup = ({
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
-  useEffect5(() => {
+  useEffect4(() => {
     console.log("\u{1F4EC} ChatPopup received messages:", JSON.stringify(messages, null, 2));
     scrollToBottom();
   }, [messages]);
@@ -14485,7 +14646,7 @@ var ChatPopup = ({
     }
   };
   const positionStyle = getPositionStyle();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "div",
     {
       "data-cuekit-ignore": true,
@@ -14508,7 +14669,7 @@ var ChatPopup = ({
         ...positionStyle
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React8.createElement(
       "div",
       {
         style: {
@@ -14519,14 +14680,14 @@ var ChatPopup = ({
           justifyContent: "space-between"
         }
       },
-      /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React8.createElement(
         "img",
         {
           src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
           alt: "Cuekit AI",
           style: { width: 58, objectFit: "cover" }
         }
-      ), /* @__PURE__ */ React6.createElement(
+      ), /* @__PURE__ */ React8.createElement(
         "div",
         {
           style: {
@@ -14537,7 +14698,7 @@ var ChatPopup = ({
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React8.createElement(
           "span",
           {
             style: {
@@ -14552,9 +14713,9 @@ var ChatPopup = ({
               WebkitTextFillColor: "transparent"
             }
           },
-          "Cuekit.ai"
+          "ansyr.ai"
         ),
-        /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React8.createElement(
           "div",
           {
             style: {
@@ -14570,7 +14731,7 @@ var ChatPopup = ({
               fontWeight: "500"
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React8.createElement(
             "span",
             {
               style: {
@@ -14581,8 +14742,8 @@ var ChatPopup = ({
           )
         ))
       )),
-      /* @__PURE__ */ React6.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React8.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
+      /* @__PURE__ */ React8.createElement(
         "div",
         {
           style: {
@@ -14594,7 +14755,7 @@ var ChatPopup = ({
             top: 16
           }
         },
-        onThemeToggle && /* @__PURE__ */ React6.createElement(
+        onThemeToggle && /* @__PURE__ */ React8.createElement(
           "button",
           {
             onClick: () => {
@@ -14624,7 +14785,7 @@ var ChatPopup = ({
             "aria-label": "Toggle theme",
             title: `Switch to ${currentTheme === "dark" ? "light" : "dark"} mode`
           },
-          currentTheme === "dark" ? /* @__PURE__ */ React6.createElement(
+          currentTheme === "dark" ? /* @__PURE__ */ React8.createElement(
             sun_default,
             {
               style: {
@@ -14634,7 +14795,7 @@ var ChatPopup = ({
                 animation: "themeToggleEnter 0.3s ease-in-out"
               }
             }
-          ) : /* @__PURE__ */ React6.createElement(
+          ) : /* @__PURE__ */ React8.createElement(
             moon_default,
             {
               style: {
@@ -14646,7 +14807,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React8.createElement(
           "button",
           {
             onClick: onMinimize,
@@ -14673,11 +14834,11 @@ var ChatPopup = ({
             "aria-label": "Minimize",
             title: "Minimize chat"
           },
-          /* @__PURE__ */ React6.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
+          /* @__PURE__ */ React8.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
         )
       )
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React8.createElement(
       "div",
       {
         style: {
@@ -14690,7 +14851,7 @@ var ChatPopup = ({
           color: "hsl(var(--voice-text))"
         }
       },
-      messages.length === 0 ? /* @__PURE__ */ React6.createElement(
+      messages.length === 0 ? /* @__PURE__ */ React8.createElement(
         "div",
         {
           style: {
@@ -14700,7 +14861,7 @@ var ChatPopup = ({
           }
         },
         "Start a conversation with CueKit AI"
-      ) : messages.map((message, index2) => /* @__PURE__ */ React6.createElement(
+      ) : messages.map((message, index2) => /* @__PURE__ */ React8.createElement(
         "div",
         {
           key: index2,
@@ -14714,7 +14875,7 @@ var ChatPopup = ({
             justifyContent: message.sender === "user" ? "flex-end" : "flex-start"
           }
         },
-        message.sender === "assistant" && /* @__PURE__ */ React6.createElement(
+        message.sender === "assistant" && /* @__PURE__ */ React8.createElement(
           "div",
           {
             style: {
@@ -14729,7 +14890,7 @@ var ChatPopup = ({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React8.createElement(
             "img",
             {
               src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
@@ -14743,7 +14904,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React8.createElement(
           "div",
           {
             style: {
@@ -14754,7 +14915,7 @@ var ChatPopup = ({
               flex: 1
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React8.createElement(
             "div",
             {
               style: {
@@ -14772,12 +14933,12 @@ var ChatPopup = ({
                 marginLeft: message.sender === "user" ? "auto" : 0
               }
             },
-            /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
               Markdown,
               {
                 remarkPlugins: [remarkGfm],
                 components: {
-                  p: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  p: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "p",
                     {
                       style: {
@@ -14788,7 +14949,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h1: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h1: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "h1",
                     {
                       style: {
@@ -14800,7 +14961,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h2: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h2: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "h2",
                     {
                       style: {
@@ -14812,7 +14973,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h3: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h3: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "h3",
                     {
                       style: {
@@ -14824,7 +14985,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ul: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  ul: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "ul",
                     {
                       style: {
@@ -14836,7 +14997,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ol: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  ol: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "ol",
                     {
                       style: {
@@ -14848,7 +15009,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  li: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  li: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "li",
                     {
                       style: {
@@ -14859,7 +15020,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  strong: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  strong: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "strong",
                     {
                       style: {
@@ -14870,7 +15031,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  em: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  em: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "em",
                     {
                       style: {
@@ -14881,7 +15042,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  code: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  code: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "code",
                     {
                       style: {
@@ -14894,7 +15055,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  pre: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  pre: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "pre",
                     {
                       style: {
@@ -14909,7 +15070,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  blockquote: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  blockquote: ({ children }) => /* @__PURE__ */ React8.createElement(
                     "blockquote",
                     {
                       style: {
@@ -14928,7 +15089,7 @@ var ChatPopup = ({
               message.text
             ))
           ),
-          message.sender === "user" && /* @__PURE__ */ React6.createElement(
+          message.sender === "user" && /* @__PURE__ */ React8.createElement(
             "div",
             {
               style: {
@@ -14949,9 +15110,9 @@ var ChatPopup = ({
           )
         )
       )),
-      /* @__PURE__ */ React6.createElement("div", { ref: messagesEndRef })
+      /* @__PURE__ */ React8.createElement("div", { ref: messagesEndRef })
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React8.createElement(
       "div",
       {
         style: {
@@ -14960,7 +15121,7 @@ var ChatPopup = ({
           background: "hsl(var(--voice-bg))"
         }
       },
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React8.createElement(
         "form",
         {
           onSubmit: (e2) => {
@@ -14969,7 +15130,7 @@ var ChatPopup = ({
           },
           style: { display: "flex", alignItems: "center", gap: 8, margin: 0 }
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React8.createElement(
           "input",
           {
             type: "text",
@@ -14996,7 +15157,47 @@ var ChatPopup = ({
             }
           }
         ),
-        isConnected && onEndCall && /* @__PURE__ */ React6.createElement(
+        muteState?.canMute && onToggleMute && /* @__PURE__ */ React8.createElement(
+          "button",
+          {
+            onClick: onToggleMute,
+            style: {
+              padding: "10px 12px",
+              borderRadius: 8,
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
+              fontSize: 12,
+              fontWeight: 700,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              transition: "all 0.3s ease"
+            },
+            "aria-label": muteState.isMuted ? "Unmute microphone" : "Mute microphone",
+            title: muteState.isMuted ? "Unmute microphone" : "Mute microphone"
+          },
+          muteState.isMuted ? /* @__PURE__ */ React8.createElement(
+            mic_default,
+            {
+              style: {
+                width: 16,
+                height: 16,
+                color: "hsl(var(--voice-user-text))"
+              }
+            }
+          ) : /* @__PURE__ */ React8.createElement(
+            mic_off_default,
+            {
+              style: {
+                width: 16,
+                height: 16,
+                color: "hsl(var(--voice-user-text))"
+              }
+            }
+          )
+        ),
+        isConnected && onEndCall && /* @__PURE__ */ React8.createElement(
           "button",
           {
             type: "submit",
@@ -15015,7 +15216,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React6.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ React8.createElement(phone_off_default, { style: { width: 16, height: 16 } })
         )
       )
     )
@@ -15023,7 +15224,7 @@ var ChatPopup = ({
 };
 
 // src/components/border-glow.tsx
-import React7 from "react";
+import React9 from "react";
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
   const styles = {
@@ -15150,7 +15351,7 @@ var BorderGlow = ({ isActive }) => {
       opacity: 0.6
     }
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("style", null, `
           @keyframes borderPulse {
             0%, 100% {
               opacity: 1;
@@ -15159,12 +15360,12 @@ var BorderGlow = ({ isActive }) => {
               opacity: 0.5;
             }
           }
-        `), /* @__PURE__ */ React7.createElement("div", { style: styles.container }, /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomLeft })));
+        `), /* @__PURE__ */ React9.createElement("div", { style: styles.container }, /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerBottomLeft })));
 };
 var border_glow_default = BorderGlow;
 
 // src/components/voice-intensity-visualizer.tsx
-import React8, { useEffect as useEffect9, useState as useState9 } from "react";
+import React10, { useEffect as useEffect8, useState as useState9 } from "react";
 
 // node_modules/@livekit/components-react/dist/hooks-C2Bp5v2q.mjs
 import * as r from "react";
@@ -15179,7 +15380,7 @@ var Me = { exports: {} };
 var Or = Me.exports;
 var kt;
 function kr() {
-  return kt || (kt = 1, function(e2) {
+  return kt || (kt = 1, (function(e2) {
     (function(t, n) {
       e2.exports ? e2.exports = n() : t.log = n();
     })(Or, function() {
@@ -15323,7 +15524,7 @@ function kr() {
         return o;
       }, s.default = s, s;
     });
-  }(Me)), Me.exports;
+  })(Me)), Me.exports;
 }
 var _r = kr();
 var Lr = /* @__PURE__ */ Ar(_r);
@@ -15546,7 +15747,7 @@ function Ue(e2, t) {
     0 <= n && e2.splice(n, 1);
   }
 }
-var Oe = function() {
+var Oe = (function() {
   function e2(t) {
     this.initialTeardown = t, this.closed = false, this._parentage = null, this._finalizers = null;
   }
@@ -15630,11 +15831,11 @@ var Oe = function() {
   }, e2.prototype.remove = function(t) {
     var n = this._finalizers;
     n && Ue(n, t), t instanceof e2 && t._removeParent(this);
-  }, e2.EMPTY = function() {
+  }, e2.EMPTY = (function() {
     var t = new e2();
     return t.closed = true, t;
-  }(), e2;
-}();
+  })(), e2;
+})();
 var an = Oe.EMPTY;
 function cn(e2) {
   return e2 instanceof Oe || e2 && "closed" in e2 && P(e2.remove) && P(e2.add) && P(e2.unsubscribe);
@@ -15666,7 +15867,7 @@ function je() {
 function Re(e2) {
   e2();
 }
-var gt = function(e2) {
+var gt = (function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -15697,8 +15898,8 @@ var gt = function(e2) {
       this.unsubscribe();
     }
   }, t;
-}(Oe);
-var Nr = function() {
+})(Oe);
+var Nr = (function() {
   function e2(t) {
     this.partialObserver = t;
   }
@@ -15729,8 +15930,8 @@ var Nr = function() {
         Le(n);
       }
   }, e2;
-}();
-var Ce = function(e2) {
+})();
+var Ce = (function(e2) {
   te(t, e2);
   function t(n, r2, i2) {
     var o = e2.call(this) || this, s;
@@ -15741,7 +15942,7 @@ var Ce = function(e2) {
     } : s = n, o.destination = new Nr(s), o;
   }
   return t;
-}(gt);
+})(gt);
 function Le(e2) {
   un(e2);
 }
@@ -15754,9 +15955,9 @@ var Ur = {
   error: Fr,
   complete: je
 };
-var bt = function() {
+var bt = (function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
-}();
+})();
 function Ge(e2) {
   return e2;
 }
@@ -15767,7 +15968,7 @@ function jr(e2) {
     }, n);
   };
 }
-var k = function() {
+var k = (function() {
   function e2(t) {
     t && (this._subscribe = t);
   }
@@ -15826,7 +16027,7 @@ var k = function() {
   }, e2.create = function(t) {
     return new e2(t);
   }, e2;
-}();
+})();
 function Lt(e2) {
   var t;
   return (t = e2 ?? Dr.Promise) !== null && t !== void 0 ? t : Promise;
@@ -15856,7 +16057,7 @@ function j(e2) {
 function F(e2, t, n, r2, i2) {
   return new Hr(e2, t, n, r2, i2);
 }
-var Hr = function(e2) {
+var Hr = (function(e2) {
   te(t, e2);
   function t(n, r2, i2, o, s, a) {
     var c = e2.call(this, n) || this;
@@ -15891,13 +16092,13 @@ var Hr = function(e2) {
       e2.prototype.unsubscribe.call(this), !r2 && ((n = this.onFinalize) === null || n === void 0 || n.call(this));
     }
   }, t;
-}(gt);
+})(gt);
 var zr = mt(function(e2) {
   return function() {
     e2(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
 });
-var ee = function(e2) {
+var ee = (function(e2) {
   te(t, e2);
   function t() {
     var n = e2.call(this) || this;
@@ -15976,8 +16177,8 @@ var ee = function(e2) {
   }, t.create = function(n, r2) {
     return new It(n, r2);
   }, t;
-}(k);
-var It = function(e2) {
+})(k);
+var It = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this) || this;
@@ -15996,8 +16197,8 @@ var It = function(e2) {
     var r2, i2;
     return (i2 = (r2 = this.source) === null || r2 === void 0 ? void 0 : r2.subscribe(n)) !== null && i2 !== void 0 ? i2 : an;
   }, t;
-}(ee);
-var ln = function(e2) {
+})(ee);
+var ln = (function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -16020,13 +16221,13 @@ var ln = function(e2) {
   }, t.prototype.next = function(n) {
     e2.prototype.next.call(this, this._value = n);
   }, t;
-}(ee);
+})(ee);
 var Yr = {
   now: function() {
     return Date.now();
   }
 };
-var qr = function(e2) {
+var qr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     return e2.call(this) || this;
@@ -16034,7 +16235,7 @@ var qr = function(e2) {
   return t.prototype.schedule = function(n, r2) {
     return this;
   }, t;
-}(Oe);
+})(Oe);
 var Mt = {
   setInterval: function(e2, t) {
     for (var n = [], r2 = 2; r2 < arguments.length; r2++)
@@ -16046,7 +16247,7 @@ var Mt = {
   },
   delegate: void 0
 };
-var Kr = function(e2) {
+var Kr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this, n, r2) || this;
@@ -16088,16 +16289,16 @@ var Kr = function(e2) {
       this.work = this.state = this.scheduler = null, this.pending = false, Ue(o, this), r2 != null && (this.id = this.recycleAsyncId(i2, r2, null)), this.delay = null, e2.prototype.unsubscribe.call(this);
     }
   }, t;
-}(qr);
-var Rt = function() {
+})(qr);
+var Rt = (function() {
   function e2(t, n) {
     n === void 0 && (n = e2.now), this.schedulerActionCtor = t, this.now = n;
   }
   return e2.prototype.schedule = function(t, n, r2) {
     return n === void 0 && (n = 0), new this.schedulerActionCtor(this, t).schedule(r2, n);
   }, e2.now = Yr.now, e2;
-}();
-var Gr = function(e2) {
+})();
+var Gr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     r2 === void 0 && (r2 = Rt.now);
@@ -16122,7 +16323,7 @@ var Gr = function(e2) {
       throw i2;
     }
   }, t;
-}(Rt);
+})(Rt);
 var Qr = new Gr(Kr);
 function Jr(e2) {
   return e2 && P(e2.schedule);
@@ -16981,7 +17182,7 @@ var Xt = /* @__PURE__ */ e.forwardRef(
 // src/components/voice-intensity-visualizer.tsx
 var VoiceIntensityWithRoom = (props) => {
   const [room, setRoom] = useState9(null);
-  useEffect9(() => {
+  useEffect8(() => {
     if (props.isActive) {
       const currentRoom = getRoom();
       if (currentRoom) {
@@ -16994,7 +17195,7 @@ var VoiceIntensityWithRoom = (props) => {
   if (!room) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React8.createElement(VoiceIntensityBars, { ...props }));
+  return /* @__PURE__ */ React10.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React10.createElement(VoiceIntensityBars, { ...props }));
 };
 var VoiceIntensityBars = ({
   isActive,
@@ -17037,7 +17238,7 @@ var VoiceIntensityBars = ({
   if (!trackRef) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       className: `voice-intensity-visualizer ${className}`,
@@ -17054,7 +17255,7 @@ var VoiceIntensityBars = ({
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       Xt,
       {
         barCount,
@@ -17068,60 +17269,12 @@ var VoiceIntensityBars = ({
           gap: "0.25rem"
         }
       },
-      /* @__PURE__ */ React8.createElement("span", { className: "cuekit-voice-intensity-bar" })
+      /* @__PURE__ */ React10.createElement("span", { className: "cuekit-voice-intensity-bar" })
     )
   );
 };
 var VoiceIntensityVisualizer = VoiceIntensityWithRoom;
 
-// src/components/svgs/mic.tsx
-import React9 from "react";
-var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
-  return /* @__PURE__ */ React9.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width,
-      height,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      ...props
-    },
-    /* @__PURE__ */ React9.createElement("path", { d: "M12 19v3" }),
-    /* @__PURE__ */ React9.createElement("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-    /* @__PURE__ */ React9.createElement("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
-  );
-};
-var mic_default = MicIcon;
-
-// src/components/svgs/loader.tsx
-import React10 from "react";
-var LoaderIcon = ({ width = 24, height = 24, className, ...props }) => {
-  return /* @__PURE__ */ React10.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      ...props
-    },
-    /* @__PURE__ */ React10.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-  );
-};
-var loader_default = LoaderIcon;
-
 // src/components/mic-button.tsx
 var chatState = {
   isOpen: false,
@@ -17156,7 +17309,7 @@ var MicButton = ({
   const [currentTheme, setCurrentTheme] = useState10("dark");
   const [isChatOpen, setIsChatOpen] = useState10(chatState.isOpen);
   const [isChatMinimized, setIsChatMinimized] = useState10(chatState.isMinimized);
-  useEffect10(() => {
+  useEffect9(() => {
     chatState.isOpen = isChatOpen;
     chatState.isMinimized = isChatMinimized;
   }, [isChatOpen, isChatMinimized]);
@@ -17172,12 +17325,16 @@ var MicButton = ({
     connect: voiceConnect,
     disconnect: voiceDisconnect,
     sendUserCommand: sendUserCommand2,
+    sendChatMessage,
     messages: messageManagerMessages,
     micState,
     setMicState,
     status,
     setStatus,
-    participants
+    participants,
+    muteState,
+    toggleMute,
+    setMute
   } = useCuekit({
     // Don't override navigation command - let the provider handle it
     onConnectionStateChange: (state) => {
@@ -17190,7 +17347,7 @@ var MicButton = ({
     onAISpeechEnd: (trackId) => handleAISpeech(false, trackId),
     appId
   });
-  useEffect10(() => {
+  useEffect9(() => {
     const checkTheme = () => {
       if (typeof document !== "undefined") {
         let newTheme;
@@ -17258,7 +17415,7 @@ var MicButton = ({
     },
     [status, micState, isConnected]
   );
-  useEffect10(() => {
+  useEffect9(() => {
     if (audioContainerRef.current) {
       setAudioContainer(audioContainerRef);
     }
@@ -17285,17 +17442,17 @@ var MicButton = ({
     }
     return isConnected2 ? "Ready" : "Connecting...";
   };
-  useEffect10(() => {
+  useEffect9(() => {
     if (isConnected) {
     } else {
     }
   }, [isConnected]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (isConnected && !isChatOpen) {
       openChat();
     }
   }, [isConnected, isChatOpen, openChat]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (messageManagerMessages.length > 0 && !isChatOpen) {
       openChat();
     }
@@ -17324,7 +17481,9 @@ var MicButton = ({
     apiKey,
     appId,
     openChat,
-    showBorderGlow
+    showBorderGlow,
+    sendChatMessage,
+    isChatOpen
   ]);
   const handleSendText = async (textToSend) => {
     setMicState("thinking");
@@ -17334,13 +17493,14 @@ var MicButton = ({
     }
     if (isConnected) {
       try {
-        await sendUserCommand2(textToSend);
+        await sendChatMessage(textToSend);
         setMicState("replying");
         setTimeout(() => {
           setMicState("listening");
           if (showBorderGlow) setShowBodyGlow(true);
         }, 1e3);
       } catch (error) {
+        console.error("Failed to send chat message:", error);
       } finally {
         setMicState("listening");
         if (showBorderGlow) setShowBodyGlow(true);
@@ -17367,8 +17527,11 @@ var MicButton = ({
         filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))",
         ...imageStyle
       };
-      const animatedImageStyle = micState === "thinking" ? { ...baseImageStyle, animation: "spin 1s linear infinite" } : micState === "replying" ? { ...baseImageStyle, animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" } : baseImageStyle;
-      return /* @__PURE__ */ React11.createElement("img", { src: imageSource, alt: "Voice Assistant", style: animatedImageStyle });
+      if (micState === "idle") {
+        return /* @__PURE__ */ React11.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
+      } else {
+        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+      }
     }
     const iconStyle = {
       width: `100%`,
@@ -17376,15 +17539,10 @@ var MicButton = ({
       color: "white",
       filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))"
     };
-    switch (micState) {
-      case "thinking":
-        return /* @__PURE__ */ React11.createElement(loader_default, { style: { ...iconStyle, animation: "spin 1s linear infinite" } });
-      case "replying":
-        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
-      case "listening":
-        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
-      default:
-        return /* @__PURE__ */ React11.createElement(mic_default, { style: iconStyle });
+    if (micState === "idle") {
+      return /* @__PURE__ */ React11.createElement(mic_default, { style: iconStyle });
+    } else {
+      return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
     }
   };
   const getPositionStyle = () => {
@@ -17452,7 +17610,6 @@ var MicButton = ({
       case "thinking":
         baseStyle.transform = "scale(1.05)";
         baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
-        baseStyle.animation = "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite";
         break;
       case "replying":
         baseStyle.transform = "scale(1.05)";
@@ -17529,7 +17686,9 @@ var MicButton = ({
       currentTheme,
       onThemeToggle: setCurrentTheme,
       status: getUserFriendlyStatus(micState, isConnected ?? false),
-      anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize }
+      anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize },
+      muteState,
+      onToggleMute: toggleMute
     }
   ), isChatOpen && isChatMinimized && /* @__PURE__ */ React11.createElement(
     "button",