@contentgrowth/llm-service 0.9.2 → 0.9.4

package/dist/ui/react/components/index.js

@@ -149,7 +149,7 @@ function ChatHeader({
 
 // src/ui/react/components/ChatInputArea.tsx
 import { useState as useState3, useRef as useRef3, useImperativeHandle, forwardRef, useEffect as useEffect3, useCallback as useCallback3, useLayoutEffect } from "react";
-import { MicrophoneIcon, StopIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { MicrophoneIcon, StopIcon, PaperAirplaneIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 // src/ui/react/hooks/useSpeechRecognition.ts
 import { useState, useEffect, useCallback, useRef } from "react";
@@ -387,6 +387,42 @@ var ChatInputArea = forwardRef(({
   const [isTranscribing, setIsTranscribing] = useState3(false);
   const [voiceError, setVoiceError] = useState3(null);
   const [isFocused, setIsFocused] = useState3(false);
+  const [showDebug, setShowDebug] = useState3(false);
+  const [logs, setLogs] = useState3([]);
+  const tapCountRef = useRef3({ count: 0, lastTap: 0 });
+  useEffect3(() => {
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const addLog = (type, args) => {
+      try {
+        const msg = args.map((arg) => {
+          if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+          if (typeof arg === "object") return JSON.stringify(arg);
+          return String(arg);
+        }).join(" ");
+        setLogs((prev) => [`[${type}] ${msg}`, ...prev].slice(0, 50));
+      } catch (e) {
+      }
+    };
+    console.log = (...args) => {
+      originalLog(...args);
+      addLog("LOG", args);
+    };
+    console.warn = (...args) => {
+      originalWarn(...args);
+      addLog("WRN", args);
+    };
+    console.error = (...args) => {
+      originalError(...args);
+      addLog("ERR", args);
+    };
+    return () => {
+      console.log = originalLog;
+      console.warn = originalWarn;
+      console.error = originalError;
+    };
+  }, []);
   const textareaRef = useRef3(null);
   const measurementRef = useRef3(null);
   const pendingSelectionRef = useRef3(null);
@@ -456,6 +492,12 @@ var ChatInputArea = forwardRef(({
     (_b2 = (_a2 = voiceConfigRef.current) == null ? void 0 : _a2.onVoiceEnd) == null ? void 0 : _b2.call(_a2);
   }, []);
   const nativeSpeech = useSpeechRecognition(handleVoiceResult, handleVoiceEnd, voiceConfig == null ? void 0 : voiceConfig.language);
+  useEffect3(() => {
+    if (nativeSpeech.error) {
+      setVoiceError(nativeSpeech.error);
+      console.error("[ChatInputArea] Native Speech Error:", nativeSpeech.error);
+    }
+  }, [nativeSpeech.error]);
   const customRecorder = useAudioRecorder(async (blob) => {
     var _a2, _b2, _c2;
     setVoiceTrigger(null);
@@ -569,20 +611,40 @@ var ChatInputArea = forwardRef(({
   if (!showInputForm) {
     return null;
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full relative", children: [
+    showDebug && /* @__PURE__ */ jsxs3("div", { className: "absolute bottom-full left-0 right-0 mb-2 p-2 bg-black/80 text-green-400 text-xs font-mono h-48 overflow-y-auto rounded z-50 pointer-events-auto", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ jsx5("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ jsx5("button", { onClick: () => setShowDebug(false), className: "text-white hover:text-red-400", children: /* @__PURE__ */ jsx5(XMarkIcon, { className: "w-4 h-4" }) })
+      ] }),
+      logs.map((log, i) => /* @__PURE__ */ jsx5("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ jsx5("div", { children: "No logs yet..." })
+    ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
       voiceConfig && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
           onClick: () => {
+            const now = Date.now();
+            if (now - tapCountRef.current.lastTap < 500) {
+              tapCountRef.current.count++;
+            } else {
+              tapCountRef.current.count = 1;
+            }
+            tapCountRef.current.lastTap = now;
+            if (tapCountRef.current.count >= 5) {
+              setShowDebug((prev) => !prev);
+              tapCountRef.current.count = 0;
+              return;
+            }
             if (voiceTrigger) {
               stopRecording();
             } else if (!isTranscribing) {
               startRecording("click");
             }
           },
-          className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border ${voiceTrigger || isTranscribing ? "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg" : "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100"} ${voiceTrigger ? "animate-pulse" : ""} ${isTranscribing ? "cursor-wait" : ""}`,
+          className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border ${isTranscribing ? "text-white border-indigo-500 bg-indigo-600 scale-110 shadow-lg" : voiceTrigger ? "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg" : "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100"} ${voiceTrigger ? "animate-pulse" : ""} ${isTranscribing ? "cursor-wait" : ""}`,
           disabled: isTranscribing,
           title: isTranscribing ? "Transcribing..." : voiceTrigger ? "Stop Recording" : "Start Voice Input",
           children: isTranscribing ? /* @__PURE__ */ jsx5("div", { className: "animate-spin w-5 h-5 flex items-center justify-center", children: /* @__PURE__ */ jsxs3("svg", { className: "w-5 h-5 text-white", viewBox: "0 0 24 24", children: [
@@ -685,26 +747,214 @@ var ChatInputArea = forwardRef(({
       )
     ] }),
     inputHint && /* @__PURE__ */ jsx5("div", { className: "text-sm text-red-500 bg-red-50 py-1 px-4 rounded-lg mt-1", children: inputHint }),
-    /* @__PURE__ */ jsx5("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ jsx5("p", { className: `text-[10px] leading-tight transition-all duration-200 ${voiceError ? "text-red-500" : voiceTrigger || isTranscribing ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceError ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1 font-semibold italic", children: [
+    /* @__PURE__ */ jsx5("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ jsx5("p", { className: `text-[10px] leading-tight transition-all duration-200 ${voiceError ? "text-red-500" : isTranscribing ? "text-indigo-600 font-bold" : voiceTrigger ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceError ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1 font-semibold italic", children: [
       "Error: ",
       voiceError
-    ] }) : isTranscribing ? "Transcribing, please wait..." : voiceTrigger ? "Listening... tap mic icon again to stop" : hintText || (voiceConfig ? "Type in text or tap mic icon to talk" : "Type your message...") }) })
+    ] }) : isTranscribing ? "Transcribing... please wait" : voiceTrigger ? "Transcribing, please wait..." : voiceTrigger ? "Listening... tap mic icon again to stop" : hintText || (voiceConfig ? "Type in text or tap mic icon to talk" : "Type your message...") }) })
   ] });
 });
 ChatInputArea.displayName = "ChatInputArea";
 
+// src/ui/react/components/TapToTalk.tsx
+import React3, { useState as useState4, useCallback as useCallback4, useRef as useRef4 } from "react";
+import { MicrophoneIcon as MicrophoneIcon2, XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var TapToTalk = ({
+  onResult,
+  voiceConfig: propVoiceConfig,
+  className = "",
+  disabled = false,
+  tooltip = "Tap to speak",
+  onFocusTarget,
+  accentColor = "bg-emerald-600"
+}) => {
+  var _a;
+  const globalConfig = useChatConfig();
+  const voiceConfig = propVoiceConfig || ((_a = globalConfig.voice) == null ? void 0 : _a.config);
+  const [isTranscribing, setIsTranscribing] = useState4(false);
+  const [voiceTrigger, setVoiceTrigger] = useState4(null);
+  const [errorMsg, setErrorMsg] = useState4(null);
+  const [showDebug, setShowDebug] = useState4(false);
+  const [logs, setLogs] = useState4([]);
+  const tapCountRef = useRef4({ count: 0, lastTap: 0 });
+  React3.useEffect(() => {
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const addLog = (type, args) => {
+      try {
+        const msg = args.map((arg) => {
+          if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+          if (typeof arg === "object") return JSON.stringify(arg);
+          return String(arg);
+        }).join(" ");
+        setLogs((prev) => [`[${type}] ${msg}`, ...prev].slice(0, 50));
+      } catch (e) {
+      }
+    };
+    console.log = (...args) => {
+      originalLog(...args);
+      addLog("LOG", args);
+    };
+    console.warn = (...args) => {
+      originalWarn(...args);
+      addLog("WRN", args);
+    };
+    console.error = (...args) => {
+      originalError(...args);
+      addLog("ERR", args);
+    };
+    return () => {
+      console.log = originalLog;
+      console.warn = originalWarn;
+      console.error = originalError;
+    };
+  }, []);
+  const handleVoiceResult = useCallback4((text, isFinal) => {
+    if (isFinal) {
+      onResult(text);
+      setErrorMsg(null);
+      setVoiceTrigger(null);
+    }
+  }, [onResult]);
+  const handleVoiceEnd = useCallback4(() => {
+    setVoiceTrigger(null);
+  }, []);
+  const nativeSpeech = useSpeechRecognition(handleVoiceResult, handleVoiceEnd, voiceConfig == null ? void 0 : voiceConfig.language);
+  React3.useEffect(() => {
+    if (nativeSpeech.error) {
+      setErrorMsg(nativeSpeech.error);
+      console.error("[TapToTalk] Native Speech Error:", nativeSpeech.error);
+    }
+  }, [nativeSpeech.error]);
+  const customRecorder = useAudioRecorder(async (blob) => {
+    setVoiceTrigger(null);
+    setIsTranscribing(true);
+    setErrorMsg(null);
+    if (blob.type === "audio/simulated") {
+      console.log("[TapToTalk] Handling simulated audio capture");
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      onResult("This is a simulated transcription for development testing.");
+      setIsTranscribing(false);
+      return;
+    }
+    if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "custom" && voiceConfig.onAudioCapture) {
+      try {
+        const text = await voiceConfig.onAudioCapture(blob);
+        if (text) onResult(text);
+      } catch (error) {
+        console.error("[TapToTalk] Custom transcription failed:", error);
+        setErrorMsg(error.message || "Transcription failed");
+      } finally {
+        setIsTranscribing(false);
+      }
+    } else {
+      setIsTranscribing(false);
+    }
+  });
+  const isListening = !!voiceTrigger || nativeSpeech.isListening || customRecorder.isRecording;
+  const isActive = isListening || isTranscribing;
+  const toggleVoice = async () => {
+    const now = Date.now();
+    if (now - tapCountRef.current.lastTap < 500) {
+      tapCountRef.current.count++;
+    } else {
+      tapCountRef.current.count = 1;
+    }
+    tapCountRef.current.lastTap = now;
+    if (tapCountRef.current.count >= 5) {
+      setShowDebug((prev) => !prev);
+      tapCountRef.current.count = 0;
+      return;
+    }
+    if (isActive) {
+      if (isTranscribing && !isListening) return;
+      if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
+        nativeSpeech.stop();
+      } else {
+        customRecorder.stop();
+      }
+      setVoiceTrigger(null);
+    } else {
+      setErrorMsg(null);
+      onFocusTarget == null ? void 0 : onFocusTarget();
+      setVoiceTrigger("click");
+      if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "custom") {
+        try {
+          await customRecorder.start();
+        } catch (e) {
+          setErrorMsg("Mic access denied");
+          setVoiceTrigger(null);
+        }
+      } else {
+        if (!nativeSpeech.isSupported) {
+          setErrorMsg("Speech not supported");
+          setVoiceTrigger(null);
+          return;
+        }
+        nativeSpeech.start();
+      }
+    }
+  };
+  let bgColor = accentColor;
+  let label = "Tap to Talk";
+  let Icon = /* @__PURE__ */ jsx6(MicrophoneIcon2, { className: "h-5 w-5" });
+  if (isListening) {
+    bgColor = "bg-orange-500";
+    label = "Listening ... Tap to stop";
+    Icon = /* @__PURE__ */ jsx6(MicrophoneIcon2, { className: "h-5 w-5 animate-pulse" });
+  } else if (isTranscribing) {
+    bgColor = "bg-indigo-600";
+    label = "Transcribing ...";
+    Icon = /* @__PURE__ */ jsxs4("svg", { className: "animate-spin h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx6("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx6("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col w-full relative", children: [
+    showDebug && /* @__PURE__ */ jsxs4("div", { className: "absolute bottom-full left-0 right-0 mb-2 p-2 bg-black/80 text-green-400 text-xs font-mono h-48 overflow-y-auto rounded z-50 pointer-events-auto", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ jsx6("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ jsx6("button", { onClick: (e) => {
+          e.stopPropagation();
+          setShowDebug(false);
+        }, className: "text-white hover:text-red-400", children: /* @__PURE__ */ jsx6(XMarkIcon2, { className: "w-4 h-4" }) })
+      ] }),
+      logs.map((log, i) => /* @__PURE__ */ jsx6("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ jsx6("div", { children: "No logs yet..." })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: toggleVoice,
+        disabled: disabled || isTranscribing && !isListening,
+        className: `flex items-center justify-center gap-3 px-6 py-3 rounded-xl transition-all duration-300 w-full font-medium shadow-md active:scale-[0.98]
+                ${bgColor} text-white
+                ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                ${className}`,
+        title: label,
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center shrink-0", children: Icon }),
+          /* @__PURE__ */ jsx6("span", { className: "truncate", children: label }),
+          errorMsg && /* @__PURE__ */ jsx6("span", { className: "text-[10px] bg-white/20 px-1.5 py-0.5 rounded text-red-100 animate-in fade-in slide-in-from-right-1", children: errorMsg })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/ui/react/components/ChatMessageList.tsx
-import { useEffect as useEffect6, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 
 // src/ui/react/components/interactive/ConfirmInteraction.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ConfirmInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted
 }) => {
-  const [selectedOption, setSelectedOption] = useState4(null);
+  const [selectedOption, setSelectedOption] = useState5(null);
   const params = parameters;
   const { yesPrompt, noPrompt } = params;
   console.log("[ConfirmInteraction] Parameters:", params);
@@ -713,8 +963,8 @@ var ConfirmInteraction = ({
     setSelectedOption(buttonText);
     onResponse(value);
   };
-  return /* @__PURE__ */ jsx6("div", { className: "mt-2 mb-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex space-x-2", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("div", { className: "mt-2 mb-4", children: /* @__PURE__ */ jsxs5("div", { className: "flex space-x-2", children: [
+    /* @__PURE__ */ jsx7(
       "button",
       {
         onClick: () => handleOptionClick(true, yesPrompt),
@@ -723,7 +973,7 @@ var ConfirmInteraction = ({
         children: yesPrompt
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         onClick: () => handleOptionClick(false, noPrompt),
@@ -737,16 +987,16 @@ var ConfirmInteraction = ({
 var ConfirmInteraction_default = ConfirmInteraction;
 
 // src/ui/react/components/interactive/SelectInteraction.tsx
-import { useState as useState5, useEffect as useEffect4 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var SelectInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted,
   message
 }) => {
-  const [selectedOption, setSelectedOption] = useState5(null);
-  const [customOption, setCustomOption] = useState5(null);
+  const [selectedOption, setSelectedOption] = useState6(null);
+  const [customOption, setCustomOption] = useState6(null);
   const params = parameters;
   const { question, options, placeholder } = params;
   useEffect4(() => {
@@ -764,8 +1014,8 @@ var SelectInteraction = ({
     setCustomOption(null);
     onResponse(option);
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "mt-2 mb-4", children: [
-    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: options.map((option, index) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6("div", { className: "mt-2 mb-4", children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-2", children: options.map((option, index) => /* @__PURE__ */ jsx8(
       "button",
       {
         onClick: () => handleOptionClick(option),
@@ -775,9 +1025,9 @@ var SelectInteraction = ({
       },
       index
     )) }),
-    customOption && isResponseSubmitted && /* @__PURE__ */ jsxs5("div", { className: "mt-2 text-sm text-amber-600 bg-amber-50 p-2 rounded", children: [
+    customOption && isResponseSubmitted && /* @__PURE__ */ jsxs6("div", { className: "mt-2 text-sm text-amber-600 bg-amber-50 p-2 rounded", children: [
       "User provided custom option: ",
-      /* @__PURE__ */ jsxs5("span", { className: "font-semibold", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "font-semibold", children: [
         '"',
         customOption,
         '"'
@@ -788,20 +1038,20 @@ var SelectInteraction = ({
 var SelectInteraction_default = SelectInteraction;
 
 // src/ui/react/components/interactive/FormInteraction.tsx
-import { useState as useState6, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useState as useState7, useEffect as useEffect5, useRef as useRef5 } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted,
   submittedValues
 }) => {
-  const [isModalOpen, setIsModalOpen] = useState6(false);
-  const [formValues, setFormValues] = useState6({});
-  const [isExpanded, setIsExpanded] = useState6(false);
-  const [parsedFields, setParsedFields] = useState6([]);
-  const formButtonsRef = useRef4(null);
+  const [isModalOpen, setIsModalOpen] = useState7(false);
+  const [formValues, setFormValues] = useState7({});
+  const [isExpanded, setIsExpanded] = useState7(false);
+  const [parsedFields, setParsedFields] = useState7([]);
+  const formButtonsRef = useRef5(null);
   const parseParameters = () => {
     const { prompt, description, submitText = "Submit", cancelText = "Cancel" } = parameters;
     let fieldsArray = [];
@@ -910,12 +1160,12 @@ var FormInteraction = ({
       case "email":
       case "number":
       case "password":
-        return /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsxs6("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
+        return /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ jsxs7("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
             label,
-            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ jsx9("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "input",
             {
               type: type === "string" ? "text" : type,
@@ -931,12 +1181,12 @@ var FormInteraction = ({
           )
         ] }, name);
       case "textarea":
-        return /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex items-start space-x-4", children: [
-          /* @__PURE__ */ jsxs6("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
+        return /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-start space-x-4", children: [
+          /* @__PURE__ */ jsxs7("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
             label,
-            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ jsx9("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               id: name,
@@ -952,12 +1202,12 @@ var FormInteraction = ({
           )
         ] }, name);
       case "select":
-        return /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsxs6("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
+        return /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ jsxs7("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
             label,
-            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ jsx9("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs7(
             "select",
             {
               id: name,
@@ -968,17 +1218,17 @@ var FormInteraction = ({
               disabled: isResponseSubmitted,
               className: "flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
               children: [
-                /* @__PURE__ */ jsx8("option", { value: "", disabled: true, children: placeholder || "Select an option" }),
-                options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsx8("option", { value: option, children: option }, index))
+                /* @__PURE__ */ jsx9("option", { value: "", disabled: true, children: placeholder || "Select an option" }),
+                options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsx9("option", { value: option, children: option }, index))
               ]
             }
           )
         ] }, name);
       case "checkbox":
-        return /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsx8("div", { className: "min-w-[120px]" }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ jsx9("div", { className: "min-w-[120px]" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 type: "checkbox",
@@ -991,20 +1241,20 @@ var FormInteraction = ({
                 className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
               }
             ),
-            /* @__PURE__ */ jsxs6("label", { htmlFor: name, className: "ml-2 text-sm text-gray-700", children: [
+            /* @__PURE__ */ jsxs7("label", { htmlFor: name, className: "ml-2 text-sm text-gray-700", children: [
               label,
-              required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+              required && /* @__PURE__ */ jsx9("span", { className: "text-red-500", children: "*" })
             ] })
           ] })
         ] }, name);
       case "radio":
-        return /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex space-x-4", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
+        return /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex space-x-4", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
             label,
-            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ jsx9("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-2", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("div", { className: "flex-1 space-y-2", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 id: `${name}-${index}`,
@@ -1018,7 +1268,7 @@ var FormInteraction = ({
                 className: "h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500"
               }
             ),
-            /* @__PURE__ */ jsx8("label", { htmlFor: `${name}-${index}`, className: "ml-2 text-sm text-gray-700", children: option })
+            /* @__PURE__ */ jsx9("label", { htmlFor: `${name}-${index}`, className: "ml-2 text-sm text-gray-700", children: option })
           ] }, index)) })
         ] }, name);
       default:
@@ -1026,27 +1276,27 @@ var FormInteraction = ({
     }
   };
   if (isResponseSubmitted) {
-    return /* @__PURE__ */ jsxs6("div", { className: "mt-2 bg-gray-50 p-3 rounded-md border border-gray-200", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex justify-between items-center cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-        /* @__PURE__ */ jsxs6("span", { className: "font-medium text-gray-700", children: [
+    return /* @__PURE__ */ jsxs7("div", { className: "mt-2 bg-gray-50 p-3 rounded-md border border-gray-200", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+        /* @__PURE__ */ jsxs7("span", { className: "font-medium text-gray-700", children: [
           isExpanded ? "Hide" : "Show",
           " Form Responses"
         ] }),
-        isExpanded ? /* @__PURE__ */ jsx8(ChevronUpIcon, { className: "h-5 w-5 text-gray-500" }) : /* @__PURE__ */ jsx8(ChevronDownIcon, { className: "h-5 w-5 text-gray-500" })
+        isExpanded ? /* @__PURE__ */ jsx9(ChevronUpIcon, { className: "h-5 w-5 text-gray-500" }) : /* @__PURE__ */ jsx9(ChevronDownIcon, { className: "h-5 w-5 text-gray-500" })
       ] }),
-      isExpanded && /* @__PURE__ */ jsx8("div", { className: "mt-2 space-y-2", children: parsedFields.map((field) => /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
-        /* @__PURE__ */ jsxs6("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
+      isExpanded && /* @__PURE__ */ jsx9("div", { className: "mt-2 space-y-2", children: parsedFields.map((field) => /* @__PURE__ */ jsxs7("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
           field.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-800", children: typeof (submittedValues == null ? void 0 : submittedValues[field.name]) === "boolean" ? submittedValues[field.name] ? "Yes" : "No" : (submittedValues == null ? void 0 : submittedValues[field.name]) || "Not provided" })
+        /* @__PURE__ */ jsx9("span", { className: "text-sm text-gray-800", children: typeof (submittedValues == null ? void 0 : submittedValues[field.name]) === "boolean" ? submittedValues[field.name] ? "Yes" : "No" : (submittedValues == null ? void 0 : submittedValues[field.name]) || "Not provided" })
       ] }, field.name)) })
     ] });
   }
-  return /* @__PURE__ */ jsx8("div", { className: "mt-2", children: isModalOpen && /* @__PURE__ */ jsx8("div", { className: "p-4", children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "mt-4", children: [
+  return /* @__PURE__ */ jsx9("div", { className: "mt-2", children: isModalOpen && /* @__PURE__ */ jsx9("div", { className: "p-4", children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "mt-4", children: [
     parsedFields.map((field) => renderField(field)),
-    /* @__PURE__ */ jsxs6("div", { ref: formButtonsRef, className: "flex justify-end mt-4 space-x-2", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs7("div", { ref: formButtonsRef, className: "flex justify-end mt-4 space-x-2", children: [
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1056,7 +1306,7 @@ var FormInteraction = ({
           children: params.cancelText
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "submit",
@@ -1071,12 +1321,12 @@ var FormInteraction = ({
 var FormInteraction_default = FormInteraction;
 
 // src/ui/react/components/interactive/PresentInteraction.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var ReactMarkdown2;
 try {
   ReactMarkdown2 = __require("react-markdown");
 } catch (error) {
-  ReactMarkdown2 = ({ children }) => /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap", children });
+  ReactMarkdown2 = ({ children }) => /* @__PURE__ */ jsx10("div", { className: "whitespace-pre-wrap", children });
 }
 var PresentInteraction = ({
   parameters
@@ -1114,15 +1364,15 @@ var PresentInteraction = ({
     }
   };
   const styles = getLevelStyles();
-  return /* @__PURE__ */ jsxs7("div", { className: `mt-2 mb-4 p-4 ${styles.container} border rounded-md`, children: [
-    title && /* @__PURE__ */ jsx9("div", { className: `font-medium ${styles.title} mb-2`, children: title }),
-    /* @__PURE__ */ jsx9("div", { className: `text-sm ${styles.content}`, children: format === "markdown" ? /* @__PURE__ */ jsx9(ReactMarkdown2, { className: "prose prose-sm max-w-none", children: content }) : format === "html" ? /* @__PURE__ */ jsx9("div", { dangerouslySetInnerHTML: { __html: content } }) : /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap", children: content }) })
+  return /* @__PURE__ */ jsxs8("div", { className: `mt-2 mb-4 p-4 ${styles.container} border rounded-md`, children: [
+    title && /* @__PURE__ */ jsx10("div", { className: `font-medium ${styles.title} mb-2`, children: title }),
+    /* @__PURE__ */ jsx10("div", { className: `text-sm ${styles.content}`, children: format === "markdown" ? /* @__PURE__ */ jsx10(ReactMarkdown2, { className: "prose prose-sm max-w-none", children: content }) : format === "html" ? /* @__PURE__ */ jsx10("div", { dangerouslySetInnerHTML: { __html: content } }) : /* @__PURE__ */ jsx10("div", { className: "whitespace-pre-wrap", children: content }) })
   ] });
 };
 var PresentInteraction_default = PresentInteraction;
 
 // src/ui/react/components/interactive/InteractiveMessageHandler.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var InteractiveMessageHandler = ({
   message,
   onResponse,
@@ -1133,7 +1383,7 @@ var InteractiveMessageHandler = ({
   const submittedResponse = parentMessage == null ? void 0 : parentMessage.responseValue;
   switch (functionType) {
     case "confirm":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         ConfirmInteraction_default,
         {
           parameters,
@@ -1142,7 +1392,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "select":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         SelectInteraction_default,
         {
           parameters,
@@ -1152,7 +1402,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "form":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         FormInteraction_default,
         {
           parameters,
@@ -1162,7 +1412,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "present":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         PresentInteraction_default,
         {
           parameters
@@ -1179,7 +1429,7 @@ var InteractiveMessageHandler_default = InteractiveMessageHandler;
 
 // src/ui/react/components/ChatMessageList.tsx
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var ChatMessageList = ({
   chatHistory,
   isProcessing,
@@ -1188,9 +1438,9 @@ var ChatMessageList = ({
   getContextExample,
   onInteractiveResponse
 }) => {
-  const chatContainerRef = useRef5(null);
-  const lastMessageRef = useRef5(null);
-  const processingIndicatorRef = useRef5(null);
+  const chatContainerRef = useRef6(null);
+  const lastMessageRef = useRef6(null);
+  const processingIndicatorRef = useRef6(null);
   useEffect6(() => {
     if (isProcessing && processingIndicatorRef.current) {
       processingIndicatorRef.current.scrollIntoView({ behavior: "smooth" });
@@ -1207,15 +1457,15 @@ var ChatMessageList = ({
       onInteractiveResponse(messageId, response);
     }
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: chatContainerRef,
       className: "flex-1 overflow-y-auto p-4 space-y-8 bg-gray-50",
       children: [
-        chatHistory.length === 0 && !isProcessing && /* @__PURE__ */ jsxs8("div", { className: "text-center py-8", children: [
-          /* @__PURE__ */ jsx11("h3", { className: "text-lg font-medium text-gray-700 mb-2", children: "How can I help you today?" }),
-          /* @__PURE__ */ jsxs8("p", { className: "text-sm text-gray-500 mb-4", children: [
+        chatHistory.length === 0 && !isProcessing && /* @__PURE__ */ jsxs9("div", { className: "text-center py-8", children: [
+          /* @__PURE__ */ jsx12("h3", { className: "text-lg font-medium text-gray-700 mb-2", children: "How can I help you today?" }),
+          /* @__PURE__ */ jsxs9("p", { className: "text-sm text-gray-500 mb-4", children: [
             "Try asking me something like ",
             getContextExample()
           ] })
@@ -1224,14 +1474,14 @@ var ChatMessageList = ({
           const isLastMessage = index === chatHistory.length - 1;
           const isUser = message.role === "user";
           const isError = message.role === "error";
-          return /* @__PURE__ */ jsxs8(
+          return /* @__PURE__ */ jsxs9(
             "div",
             {
               ref: isLastMessage ? lastMessageRef : void 0,
               className: `flex flex-col w-full ${isUser ? "items-end" : "items-start"}`,
               children: [
-                /* @__PURE__ */ jsx11("div", { className: "text-xs text-gray-400 mb-1 px-1", children: message.timestamp ? `${isUser ? "Sent" : "Received"} at ${new Date(message.timestamp).toLocaleString()}` : "" }),
-                /* @__PURE__ */ jsx11("div", { className: "w-full", children: message.interactive && message.interactiveData ? /* @__PURE__ */ jsx11("div", { className: `max-w-[85%] ${isUser ? "ml-auto" : "mr-auto"}`, children: /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12("div", { className: "text-xs text-gray-400 mb-1 px-1", children: message.timestamp ? `${isUser ? "Sent" : "Received"} at ${new Date(message.timestamp).toLocaleString()}` : "" }),
+                /* @__PURE__ */ jsx12("div", { className: "w-full", children: message.interactive && message.interactiveData ? /* @__PURE__ */ jsx12("div", { className: `max-w-[85%] ${isUser ? "ml-auto" : "mr-auto"}`, children: /* @__PURE__ */ jsx12(
                   InteractiveMessageHandler_default,
                   {
                     message: message.interactiveData,
@@ -1243,16 +1493,16 @@ var ChatMessageList = ({
                     isResponseSubmitted: !!message.isResponseSubmitted,
                     parentMessage: message
                   }
-                ) }) : /* @__PURE__ */ jsx11(
+                ) }) : /* @__PURE__ */ jsx12(
                   MessageBubble,
                   {
                     message,
                     isUser
                   }
                 ) }),
-                isUser && message.interactive && /* @__PURE__ */ jsxs8("div", { className: "flex items-center mt-1 space-x-1 text-xs text-gray-500 italic", children: [
-                  /* @__PURE__ */ jsx11(InformationCircleIcon, { className: "h-3 w-3 text-blue-400" }),
-                  /* @__PURE__ */ jsxs8("span", { children: [
+                isUser && message.interactive && /* @__PURE__ */ jsxs9("div", { className: "flex items-center mt-1 space-x-1 text-xs text-gray-500 italic", children: [
+                  /* @__PURE__ */ jsx12(InformationCircleIcon, { className: "h-3 w-3 text-blue-400" }),
+                  /* @__PURE__ */ jsxs9("span", { children: [
                     message.request === "form" && "Response to form submission",
                     message.request === "select" && "Response to selection prompt",
                     message.request === "confirm" && "Response to confirmation prompt"
@@ -1263,29 +1513,29 @@ var ChatMessageList = ({
             message.id || `message-${index}`
           );
         }),
-        isProcessing && /* @__PURE__ */ jsx11(
+        isProcessing && /* @__PURE__ */ jsx12(
           "div",
           {
             ref: processingIndicatorRef,
             className: "flex justify-start my-4",
-            children: /* @__PURE__ */ jsx11("div", { className: "bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ jsx11("span", { className: "text-sm", children: processingHint }),
-              /* @__PURE__ */ jsxs8("span", { className: "ml-2 flex space-x-1", children: [
-                /* @__PURE__ */ jsx11("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
-                /* @__PURE__ */ jsx11("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
-                /* @__PURE__ */ jsx11("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+            children: /* @__PURE__ */ jsx12("div", { className: "bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx12("span", { className: "text-sm", children: processingHint }),
+              /* @__PURE__ */ jsxs9("span", { className: "ml-2 flex space-x-1", children: [
+                /* @__PURE__ */ jsx12("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+                /* @__PURE__ */ jsx12("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+                /* @__PURE__ */ jsx12("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
               ] })
             ] }) })
           }
         ),
-        currentTask && !currentTask.complete && /* @__PURE__ */ jsxs8("div", { className: "mt-4 bg-blue-50 border border-blue-100 rounded-lg p-3", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "text-sm text-blue-800 mb-1", children: [
+        currentTask && !currentTask.complete && /* @__PURE__ */ jsxs9("div", { className: "mt-4 bg-blue-50 border border-blue-100 rounded-lg p-3", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "text-sm text-blue-800 mb-1", children: [
             "Task in progress: Step ",
             currentTask.currentStep,
             " of ",
             currentTask.steps
           ] }),
-          /* @__PURE__ */ jsx11("div", { className: "w-full bg-blue-200 rounded-full h-2", children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "w-full bg-blue-200 rounded-full h-2", children: /* @__PURE__ */ jsx12(
             "div",
             {
               className: "bg-blue-500 h-2 rounded-full",
@@ -1300,34 +1550,34 @@ var ChatMessageList = ({
 
 // src/ui/react/components/ConnectionStatus.tsx
 import { Wifi, WifiOff, RefreshCw } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var ConnectionStatus = ({
   connectionStatus,
   onReconnect
 }) => {
-  return /* @__PURE__ */ jsxs9("div", { className: "bg-amber-100 connection-status flex items-center justify-between px-4 py-1 text-xs", children: [
-    /* @__PURE__ */ jsx12("div", { className: "text-gray-700 font-medium", children: "You are talking with your personal Content Strategist" }),
-    connectionStatus === "connected" && /* @__PURE__ */ jsxs9("div", { className: "flex items-center text-green-600", children: [
-      /* @__PURE__ */ jsx12(Wifi, { className: "w-3 h-3 mr-1" }),
-      /* @__PURE__ */ jsx12("span", { children: "Connected" })
+  return /* @__PURE__ */ jsxs10("div", { className: "bg-amber-100 connection-status flex items-center justify-between px-4 py-1 text-xs", children: [
+    /* @__PURE__ */ jsx13("div", { className: "text-gray-700 font-medium", children: "You are talking with your personal Content Strategist" }),
+    connectionStatus === "connected" && /* @__PURE__ */ jsxs10("div", { className: "flex items-center text-green-600", children: [
+      /* @__PURE__ */ jsx13(Wifi, { className: "w-3 h-3 mr-1" }),
+      /* @__PURE__ */ jsx13("span", { children: "Connected" })
     ] }),
-    connectionStatus === "reconnecting" && /* @__PURE__ */ jsxs9("div", { className: "flex items-center text-amber-600", children: [
-      /* @__PURE__ */ jsx12(RefreshCw, { className: "w-3 h-3 mr-1 animate-spin" }),
-      /* @__PURE__ */ jsx12("span", { children: "Reconnecting..." })
+    connectionStatus === "reconnecting" && /* @__PURE__ */ jsxs10("div", { className: "flex items-center text-amber-600", children: [
+      /* @__PURE__ */ jsx13(RefreshCw, { className: "w-3 h-3 mr-1 animate-spin" }),
+      /* @__PURE__ */ jsx13("span", { children: "Reconnecting..." })
     ] }),
-    connectionStatus === "disconnected" && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "text-red-600 flex items-center", children: [
-        /* @__PURE__ */ jsx12(WifiOff, { className: "w-3 h-3 mr-1" }),
-        /* @__PURE__ */ jsx12("span", { children: "Disconnected" })
+    connectionStatus === "disconnected" && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "text-red-600 flex items-center", children: [
+        /* @__PURE__ */ jsx13(WifiOff, { className: "w-3 h-3 mr-1" }),
+        /* @__PURE__ */ jsx13("span", { children: "Disconnected" })
       ] }),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         "button",
         {
           onClick: onReconnect,
           className: "text-blue-600 hover:text-blue-800 flex items-center",
           children: [
-            /* @__PURE__ */ jsx12(RefreshCw, { className: "w-3 h-3 mr-1" }),
-            /* @__PURE__ */ jsx12("span", { children: "Reconnect" })
+            /* @__PURE__ */ jsx13(RefreshCw, { className: "w-3 h-3 mr-1" }),
+            /* @__PURE__ */ jsx13("span", { children: "Reconnect" })
           ]
         }
       )
@@ -1336,7 +1586,7 @@ var ConnectionStatus = ({
 };
 
 // src/ui/react/components/Spinner.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var Spinner = ({
   size = "md",
   className = "",
@@ -1348,7 +1598,7 @@ var Spinner = ({
     lg: "h-8 w-8",
     xl: "h-12 w-12"
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       className: `animate-spin ${sizeClasses[size]} ${color} ${className}`,
@@ -1356,7 +1606,7 @@ var Spinner = ({
       fill: "none",
       viewBox: "0 0 24 24",
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "circle",
           {
             className: "opacity-25",
@@ -1367,7 +1617,7 @@ var Spinner = ({
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "path",
           {
             className: "opacity-75",
@@ -1430,6 +1680,7 @@ export {
   ConnectionStatus,
   MessageBubble,
   Spinner,
+  TapToTalk,
   createWhisperVoiceConfig,
   transcribeAudio,
   useAudioRecorder,