@contentgrowth/llm-service 0.8.2 → 0.8.4

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

@@ -0,0 +1,1344 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/ui/react/components/ChatBubble.tsx
+import { jsx } from "react/jsx-runtime";
+function ChatBubble({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      className: "bg-blue-500 hover:bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg animate-pulse",
+      "aria-label": "Open chat assistant",
+      children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }) })
+    }
+  );
+}
+
+// src/ui/react/components/MessageBubble.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { SparklesIcon } from "@heroicons/react/24/solid";
+
+// src/ui/react/context/ChatConfigContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChatConfigContext = createContext({});
+var ChatConfigProvider = ({ config, children }) => {
+  return /* @__PURE__ */ jsx2(ChatConfigContext.Provider, { value: config, children });
+};
+var useChatConfig = () => useContext(ChatConfigContext);
+
+// src/ui/react/components/MessageBubble.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var MessageBubble = ({
+  message,
+  isUser,
+  userAvatarUrl,
+  onViewChanges
+}) => {
+  const { user } = useChatConfig();
+  const finalAvatarUrl = userAvatarUrl || (user == null ? void 0 : user.avatarUrl);
+  const isSystem = message.role === "system";
+  if (isSystem) {
+    return /* @__PURE__ */ jsx3("div", { className: "text-center my-4", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 italic bg-gray-100 px-3 py-1 rounded-full", children: [
+      message.content,
+      message.diff && onViewChanges && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: () => onViewChanges(message.diff),
+          className: "ml-2 font-semibold text-blue-600 hover:underline focus:outline-none",
+          children: "View Changes"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-3 my-4 ${isUser ? "justify-end" : "justify-start"}`, children: [
+    !isUser && /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white", children: /* @__PURE__ */ jsx3(SparklesIcon, { className: "h-5 w-5" }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `max-w-[85%] px-4 py-3 rounded-2xl shadow-sm overflow-hidden ${isUser ? "bg-blue-500 text-white rounded-br-none" : "bg-gray-100 text-gray-800 rounded-bl-none"}`,
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: `text-sm ${!isUser ? "prose prose-sm max-w-none" : ""}`, children: isUser ? /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap", children: message.content }) : /* @__PURE__ */ jsx3(
+            ReactMarkdown,
+            {
+              remarkPlugins: [remarkGfm],
+              components: {
+                p: ({ node, ...props }) => /* @__PURE__ */ jsx3("p", { className: "mb-2 last:mb-0", ...props }),
+                ul: ({ node, ...props }) => /* @__PURE__ */ jsx3("ul", { className: "list-disc ml-4 mb-2", ...props }),
+                ol: ({ node, ...props }) => /* @__PURE__ */ jsx3("ol", { className: "list-decimal ml-4 mb-2", ...props }),
+                li: ({ node, ...props }) => /* @__PURE__ */ jsx3("li", { className: "mb-0.5", ...props }),
+                a: ({ node, ...props }) => /* @__PURE__ */ jsx3("a", { className: "text-blue-600 hover:underline", ...props }),
+                code: ({ node, ...props }) => /* @__PURE__ */ jsx3("code", { className: "bg-gray-200 rounded px-1 py-0.5 text-xs font-mono", ...props })
+              },
+              children: message.content
+            }
+          ) }),
+          message.role === "assistant" && message.diff && onViewChanges && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => onViewChanges(message.diff),
+              className: "mt-2 text-sm text-blue-500 hover:underline block",
+              children: "View Changes"
+            }
+          ),
+          message.actionResult && message.actionResult.type === "link" && /* @__PURE__ */ jsx3("div", { className: "mt-2 pt-2 border-t border-gray-300", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: message.actionResult.url,
+              target: message.actionResult.target || "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => {
+                var _a;
+                if (((_a = message.actionResult) == null ? void 0 : _a.target) && message.actionResult.target !== "_blank") {
+                  e.preventDefault();
+                  window.open(message.actionResult.url, message.actionResult.target);
+                }
+              },
+              className: `inline-flex items-center gap-1 text-sm font-medium hover:underline ${isUser ? "text-blue-100 hover:text-white" : "text-blue-600 hover:text-blue-800"}`,
+              children: [
+                message.actionResult.label,
+                /* @__PURE__ */ jsx3("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    isUser && /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0 h-8 w-8 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center text-gray-500", children: finalAvatarUrl ? /* @__PURE__ */ jsx3(
+      "img",
+      {
+        className: "h-full w-full object-cover",
+        src: finalAvatarUrl,
+        alt: "User",
+        onError: (e) => {
+          var _a;
+          e.target.style.display = "none";
+          (_a = e.target.parentElement) == null ? void 0 : _a.classList.remove("bg-gray-200");
+        }
+      }
+    ) : /* @__PURE__ */ jsx3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", d: "M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z", clipRule: "evenodd" }) }) })
+  ] });
+};
+
+// src/ui/react/components/ChatHeader.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatHeader({
+  contextTitle,
+  currentTask,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "bg-blue-500 text-white px-4 py-4 flex justify-between items-center", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "font-medium text-lg", children: currentTask ? `DoveText Virtual Assistant (${currentTask.currentStep}/${currentTask.steps})` : `DoveText Virtual Assistant (${contextTitle})` }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: onClose,
+        className: "bg-blue-600 hover:bg-blue-700 text-white rounded-full p-1.5 flex items-center justify-center transition-colors cursor-pointer",
+        "aria-label": "Close chat",
+        children: /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) })
+      }
+    )
+  ] });
+}
+
+// src/ui/react/components/ChatInputArea.tsx
+import { useState as useState3, useRef as useRef3, useImperativeHandle, forwardRef } from "react";
+import { StopIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+
+// src/ui/react/hooks/useSpeechRecognition.ts
+import { useState, useEffect, useCallback, useRef } from "react";
+var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
+  const [isListening, setIsListening] = useState(false);
+  const [transcript, setTranscript] = useState("");
+  const [error, setError] = useState(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const recognitionRef = useRef(null);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (SpeechRecognition) {
+        setIsSupported(true);
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = language;
+        recognition.onstart = () => {
+          setIsListening(true);
+          setError(null);
+        };
+        recognition.onend = () => {
+          setIsListening(false);
+          if (onEnd) onEnd();
+        };
+        recognition.onresult = (event) => {
+          let interimTranscript = "";
+          let finalTranscript = "";
+          for (let i = event.results.length - 1; i < event.results.length; ++i) {
+            const result = event.results[i];
+            if (result.isFinal) {
+              finalTranscript += result[0].transcript;
+              if (onResult) onResult(finalTranscript, true);
+            } else {
+              interimTranscript += result[0].transcript;
+              if (onResult) onResult(interimTranscript, false);
+            }
+          }
+          setTranscript((prev) => prev + finalTranscript);
+        };
+        recognition.onerror = (event) => {
+          if (event.error === "not-allowed" && process.env.NODE_ENV === "development") {
+            console.warn("Speech recognition blocked. Simulating input for development...");
+            setError(null);
+            setIsListening(true);
+            setTimeout(() => {
+              const mockText = "This is a simulated voice input for testing.";
+              setTranscript((prev) => prev + (prev ? " " : "") + mockText);
+              if (onResult) onResult(mockText, true);
+              setIsListening(false);
+              if (onEnd) onEnd();
+            }, 1e3);
+            return;
+          }
+          console.error("Speech recognition error", event.error);
+          setError(event.error);
+          setIsListening(false);
+        };
+        recognitionRef.current = recognition;
+      }
+    }
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.stop();
+      }
+    };
+  }, [onResult, onEnd]);
+  const start = useCallback(() => {
+    if (recognitionRef.current && !isListening) {
+      try {
+        setTranscript("");
+        recognitionRef.current.start();
+      } catch (e) {
+        console.error("Failed to start speech recognition:", e);
+      }
+    }
+  }, [isListening]);
+  const stop = useCallback(() => {
+    if (recognitionRef.current && isListening) {
+      recognitionRef.current.stop();
+    }
+  }, [isListening]);
+  const resetTranscript = useCallback(() => {
+    setTranscript("");
+  }, []);
+  return {
+    isListening,
+    transcript,
+    start,
+    stop,
+    resetTranscript,
+    isSupported,
+    error
+  };
+};
+
+// src/ui/react/hooks/useAudioRecorder.ts
+import { useState as useState2, useRef as useRef2, useCallback as useCallback2 } from "react";
+var useAudioRecorder = (onStop) => {
+  const [isRecording, setIsRecording] = useState2(false);
+  const [blob, setBlob] = useState2(null);
+  const [error, setError] = useState2(null);
+  const mediaRecorderRef = useRef2(null);
+  const chunksRef = useRef2([]);
+  const start = useCallback2(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mediaRecorder = new MediaRecorder(stream);
+      mediaRecorderRef.current = mediaRecorder;
+      chunksRef.current = [];
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+      mediaRecorder.onstop = () => {
+        const audioBlob = new Blob(chunksRef.current, { type: "audio/webm" });
+        setBlob(audioBlob);
+        setIsRecording(false);
+        if (onStop) onStop(audioBlob);
+        stream.getTracks().forEach((track) => track.stop());
+      };
+      mediaRecorder.start();
+      setIsRecording(true);
+      setError(null);
+    } catch (e) {
+      console.error("Failed to start audio recording:", e);
+      setError(e.message || "Microphone access denied");
+    }
+  }, [onStop]);
+  const stop = useCallback2(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+  }, []);
+  return {
+    isRecording,
+    start,
+    stop,
+    blob,
+    error
+  };
+};
+
+// src/ui/react/hooks/useProactiveResize.ts
+import { useEffect as useEffect2 } from "react";
+function useProactiveResize(textareaRef, measurementRef, value, disabled) {
+  useEffect2(() => {
+    if (!textareaRef.current || !measurementRef.current) return;
+    const styles = window.getComputedStyle(textareaRef.current);
+    measurementRef.current.style.width = styles.width;
+    measurementRef.current.style.font = styles.font;
+    measurementRef.current.style.padding = styles.padding;
+    measurementRef.current.style.border = styles.border;
+    measurementRef.current.style.boxSizing = styles.boxSizing;
+    measurementRef.current.style.whiteSpace = "pre-wrap";
+    measurementRef.current.style.visibility = "hidden";
+    measurementRef.current.style.position = "absolute";
+    measurementRef.current.style.pointerEvents = "none";
+    measurementRef.current.textContent = value + "\u200B";
+    const scrollHeight = measurementRef.current.offsetHeight;
+    textareaRef.current.style.height = `${scrollHeight}px`;
+  }, [value, disabled, textareaRef, measurementRef]);
+}
+
+// src/ui/react/components/ChatInputArea.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChatInputArea = forwardRef(({
+  onSubmit,
+  isSending,
+  showInputForm,
+  currentTask,
+  lastInteractiveMessage,
+  voiceConfig: propVoiceConfig,
+  // Rename to distinguish from context
+  onStop,
+  hintText,
+  placeholder,
+  value,
+  onChange
+}, ref) => {
+  var _a, _b, _c, _d;
+  const [internalMessage, setInternalMessage] = useState3("");
+  const [isVoiceActive, setIsVoiceActive] = useState3(false);
+  const [inputMode, setInputMode] = useState3("text");
+  const textareaRef = useRef3(null);
+  const measurementRef = useRef3(null);
+  const isControlled = value !== void 0;
+  const message = isControlled ? value : internalMessage;
+  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 triggerChange = (newValue) => {
+    if (isControlled && onChange && textareaRef.current) {
+      const syntheticEvent = {
+        target: { value: newValue },
+        currentTarget: { value: newValue }
+      };
+      onChange(syntheticEvent);
+    } else {
+      setInternalMessage(newValue);
+    }
+  };
+  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 || isVoiceActive || inputMode === "voice");
+  const nativeSpeech = useSpeechRecognition((text) => {
+    triggerChange(message + (message ? " " : "") + text);
+  }, () => {
+    var _a2;
+    setIsVoiceActive(false);
+    (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
+  }, voiceConfig == null ? void 0 : voiceConfig.language);
+  const customRecorder = useAudioRecorder(async (blob) => {
+    var _a2;
+    setIsVoiceActive(false);
+    (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
+    if (voiceConfig == null ? void 0 : voiceConfig.onAudioCapture) {
+      try {
+        const text = await voiceConfig.onAudioCapture(blob);
+        if (text) triggerChange(message + (message ? " " : "") + text);
+      } catch (e) {
+        console.error("Audio capture failed", e);
+      }
+    }
+  });
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a2;
+      (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+    },
+    setValue: (newValue) => {
+      triggerChange(newValue);
+    }
+  }));
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if (!message.trim()) {
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      }, 0);
+      return;
+    }
+    const currentMessage = message;
+    triggerChange("");
+    setTimeout(() => {
+      var _a2;
+      return (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+    }, 0);
+    onSubmit(currentMessage);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const startRecording = async () => {
+    var _a2;
+    if (isVoiceActive) return;
+    setIsVoiceActive(true);
+    (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceStart) == null ? void 0 : _a2.call(voiceConfig);
+    if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
+      if (!nativeSpeech.isSupported) {
+        alert("Speech recognition is not supported in this browser.");
+        setIsVoiceActive(false);
+        return;
+      }
+      nativeSpeech.start();
+    } else {
+      await customRecorder.start();
+    }
+  };
+  const stopRecording = () => {
+    if (!isVoiceActive) return;
+    if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
+      nativeSpeech.stop();
+    } else {
+      customRecorder.stop();
+    }
+  };
+  const getPlaceholder = () => {
+    if (placeholder) return placeholder;
+    if (isVoiceActive) return "Listening...";
+    if (currentTask == null ? void 0 : currentTask.complete) {
+      return "Task completed!";
+    }
+    if ((lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactive) && (lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactiveData) && !(lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.isResponseSubmitted)) {
+      const interactiveType = lastInteractiveMessage.interactiveData.function;
+      switch (interactiveType) {
+        case "chat":
+          return "Type your response...";
+        case "confirm":
+          return "Select Yes or No, or type your response...";
+        case "select":
+          return "Choose an option or type your response...";
+        case "form":
+          return "Fill out the form...";
+        default:
+          return "Type your response...";
+      }
+    }
+    return currentTask ? "Continue your conversation..." : "Ask me anything...";
+  };
+  const inputHint = !isInputDisabled && !(lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactive) ? null : ((_d = lastInteractiveMessage == null ? void 0 : lastInteractiveMessage.interactiveData) == null ? void 0 : _d.function) === "form" ? "Please provide information by completing above form" : null;
+  if (!showInputForm) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      voiceConfig && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (inputMode === "voice" && isVoiceActive) {
+              stopRecording();
+            }
+            setInputMode((prev) => prev === "text" ? "voice" : "text");
+          },
+          className: "mb-1 p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 border border-gray-300 bg-white",
+          title: inputMode === "text" ? "Switch to Voice" : "Switch to Keyboard",
+          children: inputMode === "text" ? (
+            // Voice Icon (Waveform)
+            /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-gray-600", children: /* @__PURE__ */ jsx5("path", { d: "M11.25 4.532A.75.75 0 0 1 12 5.25v13.5a.75.75 0 0 1-1.5 0V5.25a.75.75 0 0 1 .75-.718ZM7.5 8.25a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm9 0a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM3.75 10.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75Zm16.5 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75Z" }) })
+          ) : (
+            // Keyboard Icon (Filled)
+            /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-gray-600", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm4.5 3a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75V9Zm6 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75V9Zm6 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75V9Zm-12 4.5a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75v-1.5Zm6 0a.75.75 0 0 1 .75-.75h6.75a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-6.75a.75.75 0 0 1-.75-.75v-1.5Z", clipRule: "evenodd" }) })
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500 bg-white min-h-[42px] mb-1", children: [
+        inputMode === "text" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              ref: measurementRef,
+              className: "absolute invisible whitespace-pre-wrap p-0 m-0 text-gray-700 leading-6",
+              style: { fontSize: "1rem" }
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: message,
+              onChange: (e) => {
+                if (isControlled && onChange) {
+                  onChange(e);
+                } else {
+                  setInternalMessage(e.target.value);
+                }
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: getPlaceholder(),
+              disabled: isInputDisabled || isVoiceActive,
+              rows: 1,
+              className: `flex-grow px-4 py-2 outline-none text-gray-700 placeholder-gray-500 disabled:bg-gray-100 resize-none leading-6 w-full ${isInputDisabled ? "cursor-not-allowed" : ""}`
+            }
+          )
+        ] }),
+        inputMode === "voice" && /* @__PURE__ */ jsx5("div", { className: "flex-grow flex justify-center items-center p-1", children: /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onMouseDown: startRecording,
+            onMouseUp: stopRecording,
+            onTouchStart: startRecording,
+            onTouchEnd: stopRecording,
+            disabled: isInputDisabled,
+            className: `flex-grow py-2 text-center font-medium rounded-md transition-colors select-none ${isVoiceActive ? "bg-blue-100 text-blue-700" : "bg-gray-50 text-gray-700 hover:bg-gray-100"}`,
+            children: isVoiceActive ? "Release to Send" : "Hold to Talk"
+          }
+        ) }),
+        (inputMode === "text" || isSending) && /* @__PURE__ */ jsxs3("div", { className: "relative mx-2 flex-shrink-0", children: [
+          isSending && /* @__PURE__ */ jsx5("div", { className: "absolute -inset-1", children: /* @__PURE__ */ jsxs3(
+            "svg",
+            {
+              className: "animate-spin h-full w-full text-blue-500 opacity-75",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx5(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "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__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                if (isSending && onStop) {
+                  e.preventDefault();
+                  onStop();
+                } else {
+                  handleSubmit();
+                }
+              },
+              disabled: (currentTask == null ? void 0 : currentTask.complete) || isSending && !onStop || isInputDisabled || isVoiceActive,
+              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__ */ jsx5(StopIcon, { className: "h-5 w-5" }) : (
+                // AND we show the overlay spinner outside?
+                // Actually `ChatInput.tsx` lines 117-140 are `isLoading && (...)`. It is always shown when loading.
+                // So we have a spinner ring AROUND the button (absolute -inset-1).
+                // AND potentially a spinner INSIDE the button if no onStop?
+                // In my case, I will stick to:
+                // If onStop: Show StopIcon. Button is Red.
+                // If !onStop: Show Spinner inside? Or just let the outer ring do the work?
+                // Legacy `Spinner` component usage inside button suggests double spinner if we are not careful.
+                // But usually `onStop` is provided for streaming.
+                // If I look at the screenshot, it shows a RED button (with stop icon) and a BLUE ring around it.
+                // That matches: Red button (bg-red-500) + Blue Spinner Ring (text-blue-500).
+                // So I will replicate that structure.
+                /* @__PURE__ */ jsx5(StopIcon, { className: "h-5 w-5" })
+              ) : /* @__PURE__ */ jsx5(PaperAirplaneIcon, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    inputHint && /* @__PURE__ */ jsx5("div", { className: "text-sm text-red-500 bg-red-50 py-1 px-4 rounded-lg mt-1", children: inputHint }),
+    hintText && inputMode === "text" && /* @__PURE__ */ jsx5("p", { className: "text-xs text-gray-500 ml-12 mb-2 mt-1", children: hintText })
+  ] });
+});
+ChatInputArea.displayName = "ChatInputArea";
+
+// src/ui/react/components/ChatMessageList.tsx
+import { useEffect as useEffect6, useRef as useRef5 } 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";
+var ConfirmInteraction = ({
+  parameters,
+  onResponse,
+  isResponseSubmitted
+}) => {
+  const [selectedOption, setSelectedOption] = useState4(null);
+  const params = parameters;
+  const { yesPrompt, noPrompt } = params;
+  console.log("[ConfirmInteraction] Parameters:", params);
+  const handleOptionClick = (value, buttonText) => {
+    if (isResponseSubmitted) return;
+    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(
+      "button",
+      {
+        onClick: () => handleOptionClick(true, yesPrompt),
+        disabled: isResponseSubmitted,
+        className: `px-4 py-2 rounded-md text-sm transition-colors ${isResponseSubmitted ? selectedOption === yesPrompt ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-blue-100 text-blue-700 hover:bg-blue-200"}`,
+        children: yesPrompt
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        onClick: () => handleOptionClick(false, noPrompt),
+        disabled: isResponseSubmitted,
+        className: `px-4 py-2 rounded-md text-sm transition-colors ${isResponseSubmitted ? selectedOption === noPrompt ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+        children: noPrompt
+      }
+    )
+  ] }) });
+};
+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";
+var SelectInteraction = ({
+  parameters,
+  onResponse,
+  isResponseSubmitted,
+  message
+}) => {
+  const [selectedOption, setSelectedOption] = useState5(null);
+  const [customOption, setCustomOption] = useState5(null);
+  const params = parameters;
+  const { question, options, placeholder } = params;
+  useEffect4(() => {
+    if (isResponseSubmitted && (message == null ? void 0 : message.responseValue)) {
+      const responseValueStr = String(message.responseValue);
+      setSelectedOption(responseValueStr);
+      if (!options.includes(responseValueStr)) {
+        setCustomOption(responseValueStr);
+      }
+    }
+  }, [isResponseSubmitted, message, options]);
+  const handleOptionClick = (option) => {
+    if (isResponseSubmitted) return;
+    setSelectedOption(option);
+    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(
+      "button",
+      {
+        onClick: () => handleOptionClick(option),
+        disabled: isResponseSubmitted,
+        className: `px-4 py-2 rounded-md text-sm transition-colors ${isResponseSubmitted ? selectedOption === option ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-blue-100 text-blue-700 hover:bg-blue-200"}`,
+        children: option
+      },
+      index
+    )) }),
+    customOption && isResponseSubmitted && /* @__PURE__ */ jsxs5("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: [
+        '"',
+        customOption,
+        '"'
+      ] })
+    ] })
+  ] });
+};
+var SelectInteraction_default = SelectInteraction;
+
+// src/ui/react/components/interactive/FormInteraction.tsx
+import { useState as useState6, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs6 } 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 parseParameters = () => {
+    const { prompt, description, submitText = "Submit", cancelText = "Cancel" } = parameters;
+    let fieldsArray = [];
+    if (parameters.fields) {
+      if (Array.isArray(parameters.fields)) {
+        fieldsArray = parameters.fields.map((field) => {
+          if (typeof field === "string") {
+            try {
+              const fieldData = JSON.parse(field);
+              const name = fieldData.name;
+              return {
+                name,
+                label: fieldData.label || name,
+                type: fieldData.type || "string",
+                required: fieldData.required || false,
+                options: fieldData.options || [],
+                placeholder: fieldData.description || fieldData.label || name,
+                defaultValue: fieldData.defaultValue
+              };
+            } catch (error) {
+              console.error(`Error parsing field:`, error);
+              return null;
+            }
+          }
+          return field;
+        }).filter((field) => field !== null);
+      } else if (typeof parameters.fields === "object") {
+        fieldsArray = Object.entries(parameters.fields).map(([name, fieldDataStr]) => {
+          let fieldData = {};
+          try {
+            if (typeof fieldDataStr === "string") {
+              fieldData = JSON.parse(fieldDataStr);
+            } else {
+              fieldData = fieldDataStr;
+            }
+          } catch (error) {
+            console.error(`Error parsing field data for ${name}:`, error);
+          }
+          return {
+            name,
+            label: fieldData.label || name,
+            type: fieldData.type || "string",
+            required: fieldData.required || false,
+            options: fieldData.options || [],
+            placeholder: fieldData.description || fieldData.label || name,
+            defaultValue: fieldData.defaultValue
+          };
+        });
+        console.log("Field arrays: ", fieldsArray);
+      }
+    }
+    return {
+      title: prompt || "Please fill out this form",
+      description,
+      fields: fieldsArray,
+      submitText,
+      cancelText
+    };
+  };
+  const params = parseParameters();
+  useEffect5(() => {
+    const processedParams = parseParameters();
+    setParsedFields(processedParams.fields);
+    const initialValues = {};
+    processedParams.fields.forEach((field) => {
+      if (field.defaultValue !== void 0) {
+        initialValues[field.name] = field.defaultValue;
+      } else if (field.type === "checkbox") {
+        initialValues[field.name] = false;
+      } else {
+        initialValues[field.name] = "";
+      }
+    });
+    setFormValues(initialValues);
+    if (!isResponseSubmitted) {
+      setIsModalOpen(true);
+    }
+  }, [parameters, isResponseSubmitted]);
+  useEffect5(() => {
+    if (isModalOpen && formButtonsRef.current) {
+      setTimeout(() => {
+        var _a;
+        (_a = formButtonsRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 100);
+    }
+  }, [isModalOpen]);
+  const handleInputChange = (field, value) => {
+    setFormValues((prev) => ({
+      ...prev,
+      [field.name]: value
+    }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onResponse(formValues);
+    setIsModalOpen(false);
+  };
+  const handleCancel = () => {
+    onResponse({});
+    setIsModalOpen(false);
+  };
+  const renderField = (field) => {
+    const { name, label, type, required, options, placeholder } = field;
+    switch (type) {
+      case "string":
+      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: [
+            label,
+            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              type: type === "string" ? "text" : type,
+              id: name,
+              name,
+              value: formValues[name] || "",
+              onChange: (e) => handleInputChange(field, e.target.value),
+              placeholder,
+              required,
+              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"
+            }
+          )
+        ] }, 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: [
+            label,
+            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "textarea",
+            {
+              id: name,
+              name,
+              value: formValues[name] || "",
+              onChange: (e) => handleInputChange(field, e.target.value),
+              placeholder,
+              required,
+              disabled: isResponseSubmitted,
+              rows: 4,
+              className: "flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            }
+          )
+        ] }, 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: [
+            label,
+            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs6(
+            "select",
+            {
+              id: name,
+              name,
+              value: formValues[name] || "",
+              onChange: (e) => handleInputChange(field, e.target.value),
+              required,
+              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))
+              ]
+            }
+          )
+        ] }, 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(
+              "input",
+              {
+                type: "checkbox",
+                id: name,
+                name,
+                checked: !!formValues[name],
+                onChange: (e) => handleInputChange(field, e.target.checked),
+                required,
+                disabled: isResponseSubmitted,
+                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: [
+              label,
+              required && /* @__PURE__ */ jsx8("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: [
+            label,
+            required && /* @__PURE__ */ jsx8("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(
+              "input",
+              {
+                id: `${name}-${index}`,
+                name,
+                type: "radio",
+                value: option,
+                checked: formValues[name] === option,
+                onChange: () => handleInputChange(field, option),
+                required,
+                disabled: isResponseSubmitted,
+                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 })
+          ] }, index)) })
+        ] }, name);
+      default:
+        return null;
+    }
+  };
+  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: [
+          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__ */ 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: [
+          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" })
+      ] }, 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: [
+    parsedFields.map((field) => renderField(field)),
+    /* @__PURE__ */ jsxs6("div", { ref: formButtonsRef, className: "flex justify-end mt-4 space-x-2", children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: handleCancel,
+          disabled: isResponseSubmitted,
+          className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500",
+          children: params.cancelText
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "submit",
+          disabled: isResponseSubmitted,
+          className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500",
+          children: params.submitText
+        }
+      )
+    ] })
+  ] }) }) });
+};
+var FormInteraction_default = FormInteraction;
+
+// src/ui/react/components/interactive/PresentInteraction.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var ReactMarkdown2;
+try {
+  ReactMarkdown2 = __require("react-markdown");
+} catch (error) {
+  ReactMarkdown2 = ({ children }) => /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap", children });
+}
+var PresentInteraction = ({
+  parameters
+}) => {
+  const params = parameters;
+  const { title, content, format = "text", level = "info" } = params;
+  const getLevelStyles = () => {
+    switch (level) {
+      case "error":
+        return {
+          container: "bg-red-50 border-red-100",
+          title: "text-red-800",
+          content: "text-red-700"
+        };
+      case "warn":
+      case "warning":
+        return {
+          container: "bg-amber-50 border-amber-100",
+          title: "text-amber-800",
+          content: "text-amber-700"
+        };
+      case "success":
+        return {
+          container: "bg-green-50 border-green-100",
+          title: "text-green-800",
+          content: "text-green-700"
+        };
+      case "info":
+      default:
+        return {
+          container: "bg-blue-50 border-blue-100",
+          title: "text-blue-800",
+          content: "text-blue-700"
+        };
+    }
+  };
+  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 }) })
+  ] });
+};
+var PresentInteraction_default = PresentInteraction;
+
+// src/ui/react/components/interactive/InteractiveMessageHandler.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var InteractiveMessageHandler = ({
+  message,
+  onResponse,
+  isResponseSubmitted,
+  parentMessage
+}) => {
+  const { function: functionType, parameters } = message;
+  const submittedResponse = parentMessage == null ? void 0 : parentMessage.responseValue;
+  switch (functionType) {
+    case "confirm":
+      return /* @__PURE__ */ jsx10(
+        ConfirmInteraction_default,
+        {
+          parameters,
+          onResponse,
+          isResponseSubmitted
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx10(
+        SelectInteraction_default,
+        {
+          parameters,
+          onResponse,
+          isResponseSubmitted,
+          message: parentMessage
+        }
+      );
+    case "form":
+      return /* @__PURE__ */ jsx10(
+        FormInteraction_default,
+        {
+          parameters,
+          onResponse,
+          isResponseSubmitted,
+          submittedValues: submittedResponse
+        }
+      );
+    case "present":
+      return /* @__PURE__ */ jsx10(
+        PresentInteraction_default,
+        {
+          parameters
+        }
+      );
+    case "chat":
+      return null;
+    default:
+      console.warn(`Unknown interactive function type: ${functionType}`);
+      return null;
+  }
+};
+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";
+var ChatMessageList = ({
+  chatHistory,
+  isProcessing,
+  processingHint,
+  currentTask,
+  getContextExample,
+  onInteractiveResponse
+}) => {
+  const chatContainerRef = useRef5(null);
+  const lastMessageRef = useRef5(null);
+  const processingIndicatorRef = useRef5(null);
+  useEffect6(() => {
+    if (isProcessing && processingIndicatorRef.current) {
+      processingIndicatorRef.current.scrollIntoView({ behavior: "smooth" });
+      return;
+    }
+    if (lastMessageRef.current) {
+      lastMessageRef.current.scrollIntoView({ behavior: "smooth" });
+    } else if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+    }
+  }, [chatHistory, isProcessing]);
+  const handleInteractiveResponse = (messageId, response) => {
+    if (onInteractiveResponse) {
+      onInteractiveResponse(messageId, response);
+    }
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref: chatContainerRef,
+      className: "flex-1 overflow-y-auto p-4 space-y-4 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: [
+            "Try asking me something like ",
+            getContextExample()
+          ] })
+        ] }),
+        chatHistory.map((message, index) => {
+          const isLastMessage = index === chatHistory.length - 1;
+          const isUser = message.role === "user";
+          const isError = message.role === "error";
+          return /* @__PURE__ */ jsxs8(
+            "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(
+                  InteractiveMessageHandler_default,
+                  {
+                    message: message.interactiveData,
+                    onResponse: (response) => {
+                      const messageId = message.id || `interactive-${index}-${Date.now()}`;
+                      message.responseValue = response;
+                      handleInteractiveResponse(messageId, response);
+                    },
+                    isResponseSubmitted: !!message.isResponseSubmitted,
+                    parentMessage: message
+                  }
+                ) }) : /* @__PURE__ */ jsx11(
+                  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: [
+                    message.request === "form" && "Response to form submission",
+                    message.request === "select" && "Response to selection prompt",
+                    message.request === "confirm" && "Response to confirmation prompt"
+                  ] })
+                ] })
+              ]
+            },
+            message.id || `message-${index}`
+          );
+        }),
+        isProcessing && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            ref: processingIndicatorRef,
+            className: "flex justify-start",
+            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" } })
+              ] })
+            ] }) })
+          }
+        ),
+        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: [
+            "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(
+            "div",
+            {
+              className: "bg-blue-500 h-2 rounded-full",
+              style: { width: `${currentTask.currentStep / currentTask.steps * 100}%` }
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/ui/react/components/ConnectionStatus.tsx
+import { Wifi, WifiOff, RefreshCw } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs9 } 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" })
+    ] }),
+    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 === "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" })
+      ] }),
+      /* @__PURE__ */ jsxs9(
+        "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" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/ui/react/components/Spinner.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var Spinner = ({
+  size = "md",
+  className = "",
+  color = "text-blue-600"
+}) => {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+    xl: "h-12 w-12"
+  };
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      className: `animate-spin ${sizeClasses[size]} ${color} ${className}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx13(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "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"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/ui/react/services/whisper-client.ts
+async function transcribeAudio(audioBlob, config) {
+  const formData = new FormData();
+  formData.append("audio", audioBlob, "recording.webm");
+  if (config.language) {
+    formData.append("language", config.language);
+  }
+  try {
+    const response = await fetch(config.endpoint, {
+      method: "POST",
+      body: formData,
+      headers: config.headers || {},
+      credentials: "same-origin"
+      // Ensure cookies are sent for same-domain requests
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Transcription failed (${response.status}): ${errorText}`);
+    }
+    const data = await response.json();
+    return data.text;
+  } catch (error) {
+    console.error("Transcription client error:", error);
+    throw error;
+  }
+}
+
+// src/ui/react/utils/voice-utils.ts
+function createWhisperVoiceConfig(config, callbacks) {
+  return {
+    mode: "custom",
+    onVoiceStart: callbacks == null ? void 0 : callbacks.onVoiceStart,
+    onVoiceEnd: callbacks == null ? void 0 : callbacks.onVoiceEnd,
+    /**
+     * The core handler: takes the recorded blob and sends it to the server.
+     */
+    onAudioCapture: async (blob) => {
+      return await transcribeAudio(blob, config);
+    }
+  };
+}
+export {
+  ChatBubble,
+  ChatConfigProvider,
+  ChatHeader,
+  ChatInputArea,
+  ChatMessageList,
+  ConnectionStatus,
+  MessageBubble,
+  Spinner,
+  createWhisperVoiceConfig,
+  transcribeAudio,
+  useAudioRecorder,
+  useChatConfig,
+  useProactiveResize,
+  useSpeechRecognition
+};
+//# sourceMappingURL=index.js.map