@contentgrowth/llm-service 1.0.0 → 1.0.2

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

@@ -189,19 +189,174 @@ function ChatHeader({
 }
 
 // src/ui/react/components/ChatInputArea.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
+var import_outline2 = require("@heroicons/react/24/outline");
+
+// src/ui/react/components/VoiceInputButton.tsx
 var import_outline = require("@heroicons/react/24/outline");
 
-// src/ui/react/hooks/useAudioRecorder.ts
+// src/ui/react/hooks/useDragCancel.ts
 var import_react2 = require("react");
+var useDragCancel = ({
+  onCancel,
+  onCommit,
+  isListening,
+  threshold = 50,
+  direction = "up"
+}) => {
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react2.useState)(false);
+  const startPosRef = (0, import_react2.useRef)(null);
+  const handlePointerDown = (0, import_react2.useCallback)((e) => {
+    startPosRef.current = { x: e.clientX, y: e.clientY };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsPressed(true);
+    setIsDragging(false);
+  }, []);
+  const handlePointerMove = (0, import_react2.useCallback)((e) => {
+    if (!startPosRef.current || !isListening) return;
+    const deltaY = e.clientY - startPosRef.current.y;
+    const deltaX = e.clientX - startPosRef.current.x;
+    let shouldTrigger = false;
+    if (direction === "up") {
+      shouldTrigger = deltaY < -threshold;
+    } else {
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      shouldTrigger = distance > threshold;
+    }
+    if (shouldTrigger) {
+      setIsDragging(true);
+    } else {
+      setIsDragging(false);
+    }
+  }, [isListening, threshold, direction]);
+  const handlePointerUp = (0, import_react2.useCallback)((e) => {
+    if (!startPosRef.current) return;
+    const deltaY = e.clientY - startPosRef.current.y;
+    const deltaX = e.clientX - startPosRef.current.x;
+    let isCancelled = false;
+    if (direction === "up") {
+      isCancelled = deltaY < -threshold;
+    } else {
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      isCancelled = distance > threshold;
+    }
+    if (isListening && isCancelled) {
+      onCancel();
+    } else {
+      onCommit();
+    }
+    startPosRef.current = null;
+    setIsDragging(false);
+    setIsPressed(false);
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  }, [isListening, threshold, direction, onCancel, onCommit]);
+  const handlePointerCancel = (0, import_react2.useCallback)((e) => {
+    startPosRef.current = null;
+    setIsDragging(false);
+    setIsPressed(false);
+  }, []);
+  return {
+    handlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel
+    },
+    isDragging,
+    isPressed
+  };
+};
+
+// src/ui/react/components/VoiceInputButton.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var VoiceInputButton = ({
+  voiceConfig,
+  voiceTrigger,
+  isTranscribing,
+  setVoiceTrigger,
+  setShowDebug,
+  tapCountRef,
+  customRecorder,
+  startRecording,
+  stopRecording
+}) => {
+  const { handlers, isDragging, isPressed } = useDragCancel({
+    isListening: !!voiceTrigger,
+    onCancel: () => {
+      var _a;
+      console.log("[ChatInputArea] Gesture Cancel");
+      customRecorder.cancel();
+      setVoiceTrigger(null);
+      (_a = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a.call(voiceConfig);
+    },
+    onCommit: () => {
+      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;
+        stopRecording();
+        return;
+      }
+      if (voiceTrigger) {
+        stopRecording();
+      } else if (!isTranscribing) {
+        startRecording("click");
+      }
+    },
+    threshold: 30
+  });
+  let btnClass = "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100";
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.MicrophoneIcon, { className: "w-5 h-5" });
+  if (isTranscribing) {
+    btnClass = "text-white border-indigo-500 bg-indigo-600 scale-110 shadow-lg cursor-wait";
+    icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "animate-spin w-5 h-5 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-5 h-5 text-white", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
+    ] }) });
+  } else if (voiceTrigger) {
+    btnClass = "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg animate-pulse";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative flex flex-col items-center", children: [
+    voiceTrigger && !isTranscribing && isPressed && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `absolute bottom-full mb-4 left-0 px-3 py-2 rounded-full text-xs font-semibold whitespace-nowrap shadow-xl transition-all duration-200 z-50 flex items-center gap-2 pointer-events-none transform
+                    ${isDragging ? "bg-red-500 text-white scale-110" : "bg-white text-red-500 border border-red-100"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `transition-transform duration-300 ${isDragging ? "rotate-180" : ""}`, children: isDragging ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.XMarkIcon, { className: "w-4 h-4" }) : "\u2191" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: isDragging ? "Release to Cancel" : "Drag here to cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `absolute top-full left-4 -translate-x-1/2 border-8 border-transparent transition-colors duration-200
+                        ${isDragging ? "border-t-red-500" : "border-t-white"}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        ...handlers,
+        className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border touch-none select-none ${btnClass}`,
+        disabled: isTranscribing,
+        title: isTranscribing ? "Transcribing..." : isDragging ? "Release to Cancel" : voiceTrigger ? "Stop Recording" : "Start Voice Input",
+        children: icon
+      }
+    )
+  ] });
+};
+
+// src/ui/react/hooks/useAudioRecorder.ts
+var import_react3 = require("react");
 var useAudioRecorder = (onStop) => {
-  const [isRecording, setIsRecording] = (0, import_react2.useState)(false);
-  const [isSimulated, setIsSimulated] = (0, import_react2.useState)(false);
-  const [blob, setBlob] = (0, import_react2.useState)(null);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const mediaRecorderRef = (0, import_react2.useRef)(null);
-  const chunksRef = (0, import_react2.useRef)([]);
-  const start = (0, import_react2.useCallback)(async () => {
+  const [isRecording, setIsRecording] = (0, import_react3.useState)(false);
+  const [isSimulated, setIsSimulated] = (0, import_react3.useState)(false);
+  const [blob, setBlob] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const mediaRecorderRef = (0, import_react3.useRef)(null);
+  const chunksRef = (0, import_react3.useRef)([]);
+  const cancelledRef = (0, import_react3.useRef)(false);
+  const start = (0, import_react3.useCallback)(async () => {
+    cancelledRef.current = false;
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
         if (process.env.NODE_ENV === "development") {
@@ -228,6 +383,14 @@ var useAudioRecorder = (onStop) => {
         }
       };
       mediaRecorder.onstop = () => {
+        if (cancelledRef.current) {
+          console.log("[useAudioRecorder] Recording cancelled, discarding data.");
+          setIsRecording(false);
+          stream.getTracks().forEach((track) => {
+            track.stop();
+          });
+          return;
+        }
         const audioBlob = new Blob(chunksRef.current, { type: "audio/webm" });
         setBlob(audioBlob);
         setIsRecording(false);
@@ -244,7 +407,7 @@ var useAudioRecorder = (onStop) => {
       setError(e.message || "Microphone access denied");
     }
   }, [onStop]);
-  const stop = (0, import_react2.useCallback)(() => {
+  const stop = (0, import_react3.useCallback)(() => {
     if (isSimulated) {
       setIsRecording(false);
       setIsSimulated(false);
@@ -257,20 +420,32 @@ var useAudioRecorder = (onStop) => {
       mediaRecorderRef.current.stop();
     }
   }, [isSimulated, onStop]);
+  const cancel = (0, import_react3.useCallback)(() => {
+    cancelledRef.current = true;
+    if (isSimulated) {
+      setIsRecording(false);
+      setIsSimulated(false);
+      return;
+    }
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+  }, [isSimulated]);
   return {
     isRecording,
     isSimulated,
     start,
     stop,
+    cancel,
     blob,
     error
   };
 };
 
 // src/ui/react/hooks/useProactiveResize.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useProactiveResize(textareaRef, measurementRef, value, disabled) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!textareaRef.current || !measurementRef.current) return;
     const styles = window.getComputedStyle(textareaRef.current);
     measurementRef.current.style.width = styles.width;
@@ -289,8 +464,8 @@ function useProactiveResize(textareaRef, measurementRef, value, disabled) {
 }
 
 // src/ui/react/components/ChatInputArea.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ChatInputArea = (0, import_react4.forwardRef)(({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ChatInputArea = (0, import_react5.forwardRef)(({
   onSubmit,
   isSending,
   showInputForm,
@@ -306,15 +481,15 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
   defaultInputMode = "text"
 }, ref) => {
   var _a, _b, _c, _d;
-  const [internalMessage, setInternalMessage] = (0, import_react4.useState)("");
-  const [voiceTrigger, setVoiceTrigger] = (0, import_react4.useState)(null);
-  const [isTranscribing, setIsTranscribing] = (0, import_react4.useState)(false);
-  const [voiceError, setVoiceError] = (0, import_react4.useState)(null);
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
-  const [showDebug, setShowDebug] = (0, import_react4.useState)(false);
-  const [logs, setLogs] = (0, import_react4.useState)([]);
-  const tapCountRef = (0, import_react4.useRef)({ count: 0, lastTap: 0 });
-  (0, import_react4.useEffect)(() => {
+  const [internalMessage, setInternalMessage] = (0, import_react5.useState)("");
+  const [voiceTrigger, setVoiceTrigger] = (0, import_react5.useState)(null);
+  const [isTranscribing, setIsTranscribing] = (0, import_react5.useState)(false);
+  const [voiceError, setVoiceError] = (0, import_react5.useState)(null);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
+  const [showDebug, setShowDebug] = (0, import_react5.useState)(false);
+  const [logs, setLogs] = (0, import_react5.useState)([]);
+  const tapCountRef = (0, import_react5.useRef)({ count: 0, lastTap: 0 });
+  (0, import_react5.useEffect)(() => {
     const originalLog = console.log;
     const originalWarn = console.warn;
     const originalError = console.error;
@@ -347,17 +522,17 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
       console.error = originalError;
     };
   }, []);
-  const copyLogs = (0, import_react4.useCallback)(() => {
+  const copyLogs = (0, import_react5.useCallback)(() => {
     navigator.clipboard.writeText(logs.join("\n")).then(() => alert("Logs copied to clipboard")).catch((err) => console.error("Failed to copy logs", err));
   }, [logs]);
-  const textareaRef = (0, import_react4.useRef)(null);
-  const measurementRef = (0, import_react4.useRef)(null);
-  const pendingSelectionRef = (0, import_react4.useRef)(null);
+  const textareaRef = (0, import_react5.useRef)(null);
+  const measurementRef = (0, import_react5.useRef)(null);
+  const pendingSelectionRef = (0, import_react5.useRef)(null);
   const isControlled = value !== void 0;
   const message = isControlled ? value : internalMessage;
-  const messageRef = (0, import_react4.useRef)(message);
+  const messageRef = (0, import_react5.useRef)(message);
   messageRef.current = message;
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     if (pendingSelectionRef.current && textareaRef.current) {
       const { start, end } = pendingSelectionRef.current;
       textareaRef.current.focus();
@@ -365,18 +540,18 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
       pendingSelectionRef.current = null;
     }
   }, [message]);
-  const onChangeRef = (0, import_react4.useRef)(onChange);
-  (0, import_react4.useEffect)(() => {
+  const onChangeRef = (0, import_react5.useRef)(onChange);
+  (0, import_react5.useEffect)(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
   const { voice: globalVoice } = useChatConfig();
   const isVoiceEnabled = (_a = globalVoice == null ? void 0 : globalVoice.enabled) != null ? _a : !!propVoiceConfig;
   const voiceConfig = isVoiceEnabled ? propVoiceConfig || (globalVoice == null ? void 0 : globalVoice.config) : void 0;
-  const voiceConfigRef = (0, import_react4.useRef)(voiceConfig);
-  (0, import_react4.useEffect)(() => {
+  const voiceConfigRef = (0, import_react5.useRef)(voiceConfig);
+  (0, import_react5.useEffect)(() => {
     voiceConfigRef.current = voiceConfig;
   }, [voiceConfig]);
-  const triggerChange = (0, import_react4.useCallback)((newValue) => {
+  const triggerChange = (0, import_react5.useCallback)((newValue) => {
     setVoiceError(null);
     if (isControlled && onChangeRef.current) {
       const syntheticEvent = {
@@ -390,7 +565,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
   }, [isControlled]);
   const isInputDisabled = (currentTask == null ? void 0 : currentTask.complete) || (lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactive) && (((_b = lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactiveData) == null ? void 0 : _b.function) === "form" && !(lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.isResponseSubmitted) || ((_c = lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactiveData) == null ? void 0 : _c.function) === "confirm" && !(lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.isResponseSubmitted));
   useProactiveResize(textareaRef, measurementRef, message, isInputDisabled || !!voiceTrigger);
-  const insertTextAtCursor = (0, import_react4.useCallback)((text) => {
+  const insertTextAtCursor = (0, import_react5.useCallback)((text) => {
     const textarea = textareaRef.current;
     const currentVal = messageRef.current || "";
     if (!textarea) {
@@ -408,12 +583,12 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
     pendingSelectionRef.current = { start: selectionStart, end: selectionEnd };
     triggerChange(newText);
   }, [triggerChange]);
-  const handleVoiceResult = (0, import_react4.useCallback)((text, isFinal) => {
+  const handleVoiceResult = (0, import_react5.useCallback)((text, isFinal) => {
     if (isFinal) {
       insertTextAtCursor(text);
     }
   }, [insertTextAtCursor]);
-  const handleVoiceEnd = (0, import_react4.useCallback)(() => {
+  const handleVoiceEnd = (0, import_react5.useCallback)(() => {
     var _a2, _b2;
     setVoiceTrigger(null);
     (_b2 = (_a2 = voiceConfigRef.current) == null ? void 0 : _a2.onVoiceEnd) == null ? void 0 : _b2.call(_a2);
@@ -445,7 +620,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
       setIsTranscribing(false);
     }
   });
-  (0, import_react4.useImperativeHandle)(ref, () => ({
+  (0, import_react5.useImperativeHandle)(ref, () => ({
     focus: () => {
       var _a2;
       (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
@@ -524,62 +699,43 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
   if (!showInputForm) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col w-full relative", children: [
-    showDebug && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Debug Logs" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: copyLogs, className: "text-white hover:text-blue-400", title: "Copy Logs", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.Square2StackIcon, { className: "w-4 h-4" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col w-full relative", children: [
+    showDebug && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: copyLogs, className: "text-white hover:text-blue-400", title: "Copy Logs", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.Square2StackIcon, { className: "w-4 h-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => {
             copyLogs();
             setShowDebug(false);
-          }, className: "text-white hover:text-red-400", title: "Copy & Close", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.XMarkIcon, { className: "w-4 h-4" }) })
+          }, className: "text-white hover:text-red-400", title: "Copy & Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.XMarkIcon, { className: "w-4 h-4" }) })
         ] })
       ] }),
-      logs.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
-      logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "No logs yet..." })
+      logs.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "No logs yet..." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-      voiceConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "button",
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+      voiceConfig && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        VoiceInputButton,
         {
-          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;
-              stopRecording();
-              return;
-            }
-            if (voiceTrigger) {
-              stopRecording();
-            } else if (!isTranscribing) {
-              startRecording("click");
-            }
-          },
-          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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "animate-spin w-5 h-5 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-5 h-5 text-white", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
-          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.MicrophoneIcon, { className: "w-5 h-5" })
+          voiceConfig,
+          voiceTrigger,
+          isTranscribing,
+          setVoiceTrigger,
+          setShowDebug,
+          tapCountRef,
+          customRecorder,
+          startRecording,
+          stopRecording
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           tabIndex: -1,
           className: `flex-1 flex items-center border border-gray-300 rounded-lg overflow-hidden outline-none bg-white min-h-[42px] mb-1 transition-all ${voiceTrigger ? "ring-2 ring-orange-100 border-orange-300" : "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 ref: measurementRef,
@@ -587,7 +743,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                 style: { fontSize: "1rem" }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "textarea",
               {
                 ref: textareaRef,
@@ -612,8 +768,8 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                 className: `flex-grow px-4 py-2 outline-none text-gray-700 placeholder-gray-500 resize-none leading-6 w-full ${isInputDisabled ? "bg-gray-100 cursor-not-allowed" : "bg-transparent"} ${voiceTrigger || isTranscribing ? "cursor-default" : ""}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mx-2 flex-shrink-0", children: [
-              isSending && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute -inset-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mx-2 flex-shrink-0", children: [
+              isSending && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute -inset-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "svg",
                 {
                   className: "animate-spin h-full w-full text-blue-500 opacity-75",
@@ -621,7 +777,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                   fill: "none",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "circle",
                       {
                         className: "opacity-25",
@@ -632,7 +788,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                         strokeWidth: "4"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "path",
                       {
                         className: "opacity-75",
@@ -643,7 +799,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
                   type: "button",
@@ -658,7 +814,7 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
                   disabled: (currentTask == null ? void 0 : currentTask.complete) || isSending && !onStop || isInputDisabled,
                   className: `relative z-10 text-white rounded-full p-2 transition-colors duration-200 disabled:bg-gray-400 disabled:cursor-not-allowed ${isSending && onStop ? "bg-red-500 hover:bg-red-600" : "bg-blue-600 hover:bg-blue-700"}`,
                   title: isSending && onStop ? "Stop generating" : "Send message",
-                  children: isSending ? onStop ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.StopIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.PaperAirplaneIcon, { className: "h-5 w-5" })
+                  children: isSending ? onStop ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.StopIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.PaperAirplaneIcon, { className: "h-5 w-5" })
                 }
               )
             ] })
@@ -666,19 +822,19 @@ var ChatInputArea = (0, import_react4.forwardRef)(({
         }
       )
     ] }),
-    inputHint && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-red-500 bg-red-50 py-1 px-4 rounded-lg mt-1", children: inputHint }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex items-center gap-1 font-semibold italic", children: [
+    inputHint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-red-500 bg-red-50 py-1 px-4 rounded-lg mt-1", children: inputHint }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-1 font-semibold italic", children: [
       "Error: ",
       voiceError
-    ] }) : 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...") }) })
+    ] }) : isTranscribing ? "Transcribing... please wait" : voiceTrigger ? "Listening... Tap 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
-var import_react5 = __toESM(require("react"), 1);
-var import_outline2 = require("@heroicons/react/24/outline");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react6 = __toESM(require("react"), 1);
+var import_outline3 = require("@heroicons/react/24/outline");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TapToTalk = ({
   onResult,
   voiceConfig: propVoiceConfig,
@@ -691,13 +847,13 @@ var TapToTalk = ({
   var _a;
   const globalConfig = useChatConfig();
   const voiceConfig = propVoiceConfig || ((_a = globalConfig.voice) == null ? void 0 : _a.config);
-  const [isTranscribing, setIsTranscribing] = (0, import_react5.useState)(false);
-  const [voiceTrigger, setVoiceTrigger] = (0, import_react5.useState)(null);
-  const [errorMsg, setErrorMsg] = (0, import_react5.useState)(null);
-  const [showDebug, setShowDebug] = (0, import_react5.useState)(false);
-  const [logs, setLogs] = (0, import_react5.useState)([]);
-  const tapCountRef = (0, import_react5.useRef)({ count: 0, lastTap: 0 });
-  import_react5.default.useEffect(() => {
+  const [isTranscribing, setIsTranscribing] = (0, import_react6.useState)(false);
+  const [voiceTrigger, setVoiceTrigger] = (0, import_react6.useState)(null);
+  const [errorMsg, setErrorMsg] = (0, import_react6.useState)(null);
+  const [showDebug, setShowDebug] = (0, import_react6.useState)(false);
+  const [logs, setLogs] = (0, import_react6.useState)([]);
+  const tapCountRef = (0, import_react6.useRef)({ count: 0, lastTap: 0 });
+  import_react6.default.useEffect(() => {
     const originalLog = console.log;
     const originalWarn = console.warn;
     const originalError = console.error;
@@ -730,13 +886,14 @@ var TapToTalk = ({
       console.error = originalError;
     };
   }, []);
-  const copyLogs = (0, import_react5.useCallback)(() => {
+  const copyLogs = (0, import_react6.useCallback)(() => {
     navigator.clipboard.writeText(logs.join("\n")).then(() => alert("Logs copied to clipboard")).catch((err) => console.error("Failed to copy logs", err));
   }, [logs]);
-  const handleVoiceEnd = (0, import_react5.useCallback)(() => {
+  const handleVoiceEnd = (0, import_react6.useCallback)(() => {
     setVoiceTrigger(null);
   }, []);
   const customRecorder = useAudioRecorder(async (blob) => {
+    var _a2;
     setVoiceTrigger(null);
     setIsTranscribing(true);
     setErrorMsg(null);
@@ -760,11 +917,13 @@ var TapToTalk = ({
     } else {
       setIsTranscribing(false);
     }
+    (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
   });
   const isListening = !!voiceTrigger || customRecorder.isRecording;
   const isActive = isListening || isTranscribing;
-  const processingRef = (0, import_react5.useRef)(false);
+  const processingRef = (0, import_react6.useRef)(false);
   const toggleVoice = async () => {
+    var _a2, _b, _c;
     if (processingRef.current) {
       console.log("[TapToTalk] toggleVoice ignored - processing");
       return;
@@ -797,17 +956,20 @@ var TapToTalk = ({
         console.log("[TapToTalk] Stopping voice...");
         customRecorder.stop();
         setVoiceTrigger(null);
+        (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
       } else {
         console.log("[TapToTalk] Starting voice...");
         setErrorMsg(null);
         onFocusTarget == null ? void 0 : onFocusTarget();
         setVoiceTrigger("click");
+        (_b = voiceConfig == null ? void 0 : voiceConfig.onVoiceStart) == null ? void 0 : _b.call(voiceConfig);
         try {
           await customRecorder.start();
         } catch (e) {
           console.error("[TapToTalk] Custom recorder failed:", e);
           setErrorMsg("Mic access denied");
           setVoiceTrigger(null);
+          (_c = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _c.call(voiceConfig);
         }
       }
     } finally {
@@ -816,54 +978,75 @@ var TapToTalk = ({
       }, 300);
     }
   };
+  const { handlers, isDragging, isPressed } = useDragCancel({
+    isListening: !!voiceTrigger,
+    onCancel: () => {
+      var _a2;
+      console.log("[TapToTalk] Gesture Cancel");
+      customRecorder.cancel();
+      setVoiceTrigger(null);
+      (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
+    },
+    onCommit: () => {
+      toggleVoice();
+    },
+    threshold: 30
+  });
   let bgColor = accentColor;
   let label = "Tap to Talk";
-  let Icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.MicrophoneIcon, { className: "h-5 w-5" });
+  let Icon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_outline3.MicrophoneIcon, { className: "h-5 w-5" });
   if (isListening) {
     bgColor = "bg-orange-500";
-    label = "Listening ... Tap to stop";
-    Icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.MicrophoneIcon, { className: "h-5 w-5 animate-pulse" });
+    label = "Listening... Tap again to stop";
+    Icon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_outline3.MicrophoneIcon, { className: "h-5 w-5 animate-pulse" });
   } else if (isTranscribing) {
     bgColor = "bg-indigo-600";
     label = "Transcribing ...";
-    Icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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" })
+    Icon = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col w-full relative", children: [
-    showDebug && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Debug Logs" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: (e) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col w-full relative items-center", children: [
+    isListening && !isTranscribing && isPressed && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `absolute bottom-full mb-6 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap shadow-xl transition-all duration-200 z-50 flex items-center gap-2 pointer-events-none transform
+                    ${isDragging ? "bg-red-500 text-white scale-110" : "bg-white text-red-500 border border-red-100"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `transition-transform duration-300 ${isDragging ? "rotate-180" : ""}`, children: isDragging ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_outline3.XMarkIcon, { className: "w-5 h-5" }) : "\u2191" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: isDragging ? "Release to Cancel" : "Drag here to cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent transition-colors duration-200
+                        ${isDragging ? "border-t-red-500" : "border-t-white"}` })
+    ] }),
+    showDebug && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: (e) => {
             e.stopPropagation();
             copyLogs();
-          }, className: "text-white hover:text-blue-400", title: "Copy Logs", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.Square2StackIcon, { className: "w-4 h-4" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: (e) => {
+          }, className: "text-white hover:text-blue-400", title: "Copy Logs", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_outline3.Square2StackIcon, { className: "w-4 h-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: (e) => {
             e.stopPropagation();
             copyLogs();
             setShowDebug(false);
-          }, className: "text-white hover:text-red-400", title: "Copy & Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_outline2.XMarkIcon, { className: "w-4 h-4" }) })
+          }, className: "text-white hover:text-red-400", title: "Copy & Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_outline3.XMarkIcon, { className: "w-4 h-4" }) })
         ] })
       ] }),
-      logs.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
-      logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "No logs yet..." })
+      logs.map((log, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "No logs yet..." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
-        onClick: toggleVoice,
+        ...handlers,
         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]
+        className: `flex items-center justify-center gap-3 px-6 py-3 rounded-xl transition-all duration-300 w-full font-medium shadow-md touch-none select-none
                 ${bgColor} text-white
                 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                 ${className}`,
         title: label,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-center shrink-0", children: Icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: label }),
-          errorMsg && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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 })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center shrink-0", children: Icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: label }),
+          errorMsg && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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 })
         ]
       }
     )
@@ -871,17 +1054,17 @@ var TapToTalk = ({
 };
 
 // src/ui/react/components/ChatMessageList.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/ui/react/components/interactive/ConfirmInteraction.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ConfirmInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted
 }) => {
-  const [selectedOption, setSelectedOption] = (0, import_react6.useState)(null);
+  const [selectedOption, setSelectedOption] = (0, import_react7.useState)(null);
   const params = parameters;
   const { yesPrompt, noPrompt } = params;
   console.log("[ConfirmInteraction] Parameters:", params);
@@ -890,8 +1073,8 @@ var ConfirmInteraction = ({
     setSelectedOption(buttonText);
     onResponse(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex space-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         onClick: () => handleOptionClick(true, yesPrompt),
@@ -900,7 +1083,7 @@ var ConfirmInteraction = ({
         children: yesPrompt
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         onClick: () => handleOptionClick(false, noPrompt),
@@ -914,19 +1097,19 @@ var ConfirmInteraction = ({
 var ConfirmInteraction_default = ConfirmInteraction;
 
 // src/ui/react/components/interactive/SelectInteraction.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SelectInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted,
   message
 }) => {
-  const [selectedOption, setSelectedOption] = (0, import_react7.useState)(null);
-  const [customOption, setCustomOption] = (0, import_react7.useState)(null);
+  const [selectedOption, setSelectedOption] = (0, import_react8.useState)(null);
+  const [customOption, setCustomOption] = (0, import_react8.useState)(null);
   const params = parameters;
   const { question, options, placeholder } = params;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isResponseSubmitted && (message == null ? void 0 : message.responseValue)) {
       const responseValueStr = String(message.responseValue);
       setSelectedOption(responseValueStr);
@@ -941,8 +1124,8 @@ var SelectInteraction = ({
     setCustomOption(null);
     onResponse(option);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-2 mb-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-2 mb-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         onClick: () => handleOptionClick(option),
@@ -952,9 +1135,9 @@ var SelectInteraction = ({
       },
       index
     )) }),
-    customOption && isResponseSubmitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-2 text-sm text-amber-600 bg-amber-50 p-2 rounded", children: [
+    customOption && isResponseSubmitted && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-2 text-sm text-amber-600 bg-amber-50 p-2 rounded", children: [
       "User provided custom option: ",
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "font-semibold", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-semibold", children: [
         '"',
         customOption,
         '"'
@@ -965,20 +1148,20 @@ var SelectInteraction = ({
 var SelectInteraction_default = SelectInteraction;
 
 // src/ui/react/components/interactive/FormInteraction.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormInteraction = ({
   parameters,
   onResponse,
   isResponseSubmitted,
   submittedValues
 }) => {
-  const [isModalOpen, setIsModalOpen] = (0, import_react8.useState)(false);
-  const [formValues, setFormValues] = (0, import_react8.useState)({});
-  const [isExpanded, setIsExpanded] = (0, import_react8.useState)(false);
-  const [parsedFields, setParsedFields] = (0, import_react8.useState)([]);
-  const formButtonsRef = (0, import_react8.useRef)(null);
+  const [isModalOpen, setIsModalOpen] = (0, import_react9.useState)(false);
+  const [formValues, setFormValues] = (0, import_react9.useState)({});
+  const [isExpanded, setIsExpanded] = (0, import_react9.useState)(false);
+  const [parsedFields, setParsedFields] = (0, import_react9.useState)([]);
+  const formButtonsRef = (0, import_react9.useRef)(null);
   const parseParameters = () => {
     const { prompt, description, submitText = "Submit", cancelText = "Cancel" } = parameters;
     let fieldsArray = [];
@@ -1039,7 +1222,7 @@ var FormInteraction = ({
     };
   };
   const params = parseParameters();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const processedParams = parseParameters();
     setParsedFields(processedParams.fields);
     const initialValues = {};
@@ -1057,7 +1240,7 @@ var FormInteraction = ({
       setIsModalOpen(true);
     }
   }, [parameters, isResponseSubmitted]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isModalOpen && formButtonsRef.current) {
       setTimeout(() => {
         var _a;
@@ -1087,12 +1270,12 @@ var FormInteraction = ({
       case "email":
       case "number":
       case "password":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
               type: type === "string" ? "text" : type,
@@ -1108,12 +1291,12 @@ var FormInteraction = ({
           )
         ] }, name);
       case "textarea":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4 flex items-start space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex items-start space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "textarea",
             {
               id: name,
@@ -1129,12 +1312,12 @@ var FormInteraction = ({
           )
         ] }, name);
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: name, className: "text-sm font-medium text-gray-700 min-w-[120px]", children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "select",
             {
               id: name,
@@ -1145,17 +1328,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__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", disabled: true, children: placeholder || "Select an option" }),
-                options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: option, children: option }, index))
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", disabled: true, children: placeholder || "Select an option" }),
+                options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: option, children: option }, index))
               ]
             }
           )
         ] }, name);
       case "checkbox":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-w-[120px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex items-center space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-w-[120px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -1168,20 +1351,20 @@ var FormInteraction = ({
                 className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: name, className: "ml-2 text-sm text-gray-700", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: name, className: "ml-2 text-sm text-gray-700", children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-red-500", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-red-500", children: "*" })
             ] })
           ] })
         ] }, name);
       case "radio":
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4 flex space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-sm font-medium text-gray-700 min-w-[120px] pt-2", children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-red-500", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-red-500", children: "*" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 space-y-2", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 space-y-2", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 id: `${name}-${index}`,
@@ -1195,7 +1378,7 @@ var FormInteraction = ({
                 className: "h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: `${name}-${index}`, className: "ml-2 text-sm text-gray-700", children: option })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${name}-${index}`, className: "ml-2 text-sm text-gray-700", children: option })
           ] }, index)) })
         ] }, name);
       default:
@@ -1203,27 +1386,27 @@ var FormInteraction = ({
     }
   };
   if (isResponseSubmitted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-2 bg-gray-50 p-3 rounded-md border border-gray-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between items-center cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-medium text-gray-700", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-2 bg-gray-50 p-3 rounded-md border border-gray-200", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between items-center cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-medium text-gray-700", children: [
           isExpanded ? "Hide" : "Show",
           " Form Responses"
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronUpIcon, { className: "h-5 w-5 text-gray-500" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronDownIcon, { className: "h-5 w-5 text-gray-500" })
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ChevronUpIcon, { className: "h-5 w-5 text-gray-500" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ChevronDownIcon, { className: "h-5 w-5 text-gray-500" })
       ] }),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 space-y-2", children: parsedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
+      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 space-y-2", children: parsedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
           field.label,
           ":"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "mt-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "mt-4", children: [
     parsedFields.map((field) => renderField(field)),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: formButtonsRef, className: "flex justify-end mt-4 space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: formButtonsRef, className: "flex justify-end mt-4 space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -1233,7 +1416,7 @@ var FormInteraction = ({
           children: params.cancelText
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "submit",
@@ -1248,12 +1431,12 @@ var FormInteraction = ({
 var FormInteraction_default = FormInteraction;
 
 // src/ui/react/components/interactive/PresentInteraction.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ReactMarkdown2;
 try {
   ReactMarkdown2 = require("react-markdown");
 } catch (error) {
-  ReactMarkdown2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap", children });
+  ReactMarkdown2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "whitespace-pre-wrap", children });
 }
 var PresentInteraction = ({
   parameters
@@ -1291,15 +1474,15 @@ var PresentInteraction = ({
     }
   };
   const styles = getLevelStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `mt-2 mb-4 p-4 ${styles.container} border rounded-md`, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `font-medium ${styles.title} mb-2`, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `text-sm ${styles.content}`, children: format === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReactMarkdown2, { className: "prose prose-sm max-w-none", children: content }) : format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap", children: content }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `mt-2 mb-4 p-4 ${styles.container} border rounded-md`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `font-medium ${styles.title} mb-2`, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `text-sm ${styles.content}`, children: format === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ReactMarkdown2, { className: "prose prose-sm max-w-none", children: content }) : format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "whitespace-pre-wrap", children: content }) })
   ] });
 };
 var PresentInteraction_default = PresentInteraction;
 
 // src/ui/react/components/interactive/InteractiveMessageHandler.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var InteractiveMessageHandler = ({
   message,
   onResponse,
@@ -1310,7 +1493,7 @@ var InteractiveMessageHandler = ({
   const submittedResponse = parentMessage == null ? void 0 : parentMessage.responseValue;
   switch (functionType) {
     case "confirm":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ConfirmInteraction_default,
         {
           parameters,
@@ -1319,7 +1502,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         SelectInteraction_default,
         {
           parameters,
@@ -1329,7 +1512,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "form":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         FormInteraction_default,
         {
           parameters,
@@ -1339,7 +1522,7 @@ var InteractiveMessageHandler = ({
         }
       );
     case "present":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         PresentInteraction_default,
         {
           parameters
@@ -1355,8 +1538,8 @@ var InteractiveMessageHandler = ({
 var InteractiveMessageHandler_default = InteractiveMessageHandler;
 
 // src/ui/react/components/ChatMessageList.tsx
-var import_outline3 = require("@heroicons/react/24/outline");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_outline4 = require("@heroicons/react/24/outline");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ChatMessageList = ({
   chatHistory,
   isProcessing,
@@ -1365,10 +1548,10 @@ var ChatMessageList = ({
   getContextExample,
   onInteractiveResponse
 }) => {
-  const chatContainerRef = (0, import_react9.useRef)(null);
-  const lastMessageRef = (0, import_react9.useRef)(null);
-  const processingIndicatorRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const chatContainerRef = (0, import_react10.useRef)(null);
+  const lastMessageRef = (0, import_react10.useRef)(null);
+  const processingIndicatorRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (isProcessing && processingIndicatorRef.current) {
       processingIndicatorRef.current.scrollIntoView({ behavior: "smooth" });
       return;
@@ -1384,15 +1567,15 @@ var ChatMessageList = ({
       onInteractiveResponse(messageId, response);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: chatContainerRef,
       className: "flex-1 overflow-y-auto p-4 space-y-8 bg-gray-50",
       children: [
-        chatHistory.length === 0 && !isProcessing && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center py-8", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-medium text-gray-700 mb-2", children: "How can I help you today?" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-sm text-gray-500 mb-4", children: [
+        chatHistory.length === 0 && !isProcessing && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-center py-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-lg font-medium text-gray-700 mb-2", children: "How can I help you today?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "text-sm text-gray-500 mb-4", children: [
             "Try asking me something like ",
             getContextExample()
           ] })
@@ -1401,14 +1584,14 @@ var ChatMessageList = ({
           const isLastMessage = index === chatHistory.length - 1;
           const isUser = message.role === "user";
           const isError = message.role === "error";
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               ref: isLastMessage ? lastMessageRef : void 0,
               className: `flex flex-col w-full ${isUser ? "items-end" : "items-start"}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs text-gray-400 mb-1 px-1", children: message.timestamp ? `${isUser ? "Sent" : "Received"} at ${new Date(message.timestamp).toLocaleString()}` : "" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full", children: message.interactive && message.interactiveData ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `max-w-[85%] ${isUser ? "ml-auto" : "mr-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-gray-400 mb-1 px-1", children: message.timestamp ? `${isUser ? "Sent" : "Received"} at ${new Date(message.timestamp).toLocaleString()}` : "" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", children: message.interactive && message.interactiveData ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `max-w-[85%] ${isUser ? "ml-auto" : "mr-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   InteractiveMessageHandler_default,
                   {
                     message: message.interactiveData,
@@ -1420,16 +1603,16 @@ var ChatMessageList = ({
                     isResponseSubmitted: !!message.isResponseSubmitted,
                     parentMessage: message
                   }
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                ) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   MessageBubble,
                   {
                     message,
                     isUser
                   }
                 ) }),
-                isUser && message.interactive && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center mt-1 space-x-1 text-xs text-gray-500 italic", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_outline3.InformationCircleIcon, { className: "h-3 w-3 text-blue-400" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+                isUser && message.interactive && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center mt-1 space-x-1 text-xs text-gray-500 italic", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_outline4.InformationCircleIcon, { className: "h-3 w-3 text-blue-400" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
                     message.request === "form" && "Response to form submission",
                     message.request === "select" && "Response to selection prompt",
                     message.request === "confirm" && "Response to confirmation prompt"
@@ -1440,29 +1623,29 @@ var ChatMessageList = ({
             message.id || `message-${index}`
           );
         }),
-        isProcessing && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        isProcessing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             ref: processingIndicatorRef,
             className: "flex justify-start my-4",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm", children: processingHint }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "ml-2 flex space-x-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm", children: processingHint }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ml-2 flex space-x-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "h-2 w-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
               ] })
             ] }) })
           }
         ),
-        currentTask && !currentTask.complete && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-4 bg-blue-50 border border-blue-100 rounded-lg p-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-sm text-blue-800 mb-1", children: [
+        currentTask && !currentTask.complete && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-4 bg-blue-50 border border-blue-100 rounded-lg p-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-sm text-blue-800 mb-1", children: [
             "Task in progress: Step ",
             currentTask.currentStep,
             " of ",
             currentTask.steps
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full bg-blue-200 rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full bg-blue-200 rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               className: "bg-blue-500 h-2 rounded-full",
@@ -1477,34 +1660,34 @@ var ChatMessageList = ({
 
 // src/ui/react/components/ConnectionStatus.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ConnectionStatus = ({
   connectionStatus,
   onReconnect
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-amber-100 connection-status flex items-center justify-between px-4 py-1 text-xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-gray-700 font-medium", children: "You are talking with your personal Content Strategist" }),
-    connectionStatus === "connected" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center text-green-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Wifi, { className: "w-3 h-3 mr-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Connected" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-amber-100 connection-status flex items-center justify-between px-4 py-1 text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-gray-700 font-medium", children: "You are talking with your personal Content Strategist" }),
+    connectionStatus === "connected" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center text-green-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.Wifi, { className: "w-3 h-3 mr-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Connected" })
     ] }),
-    connectionStatus === "reconnecting" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center text-amber-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.RefreshCw, { className: "w-3 h-3 mr-1 animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Reconnecting..." })
+    connectionStatus === "reconnecting" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center text-amber-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.RefreshCw, { className: "w-3 h-3 mr-1 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Reconnecting..." })
     ] }),
-    connectionStatus === "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-red-600 flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.WifiOff, { className: "w-3 h-3 mr-1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Disconnected" })
+    connectionStatus === "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-red-600 flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.WifiOff, { className: "w-3 h-3 mr-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Disconnected" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "button",
         {
           onClick: onReconnect,
           className: "text-blue-600 hover:text-blue-800 flex items-center",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.RefreshCw, { className: "w-3 h-3 mr-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Reconnect" })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.RefreshCw, { className: "w-3 h-3 mr-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Reconnect" })
           ]
         }
       )
@@ -1513,7 +1696,7 @@ var ConnectionStatus = ({
 };
 
 // src/ui/react/components/Spinner.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Spinner = ({
   size = "md",
   className = "",
@@ -1525,7 +1708,7 @@ var Spinner = ({
     lg: "h-8 w-8",
     xl: "h-12 w-12"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "svg",
     {
       className: `animate-spin ${sizeClasses[size]} ${color} ${className}`,
@@ -1533,7 +1716,7 @@ var Spinner = ({
       fill: "none",
       viewBox: "0 0 24 24",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "circle",
           {
             className: "opacity-25",
@@ -1544,7 +1727,7 @@ var Spinner = ({
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             className: "opacity-75",