@contentgrowth/llm-service 0.8.9 → 0.9.0

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

@@ -318,12 +318,23 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
 var import_react3 = require("react");
 var useAudioRecorder = (onStop) => {
   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 start = (0, import_react3.useCallback)(async () => {
     try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("[useAudioRecorder] MediaDevices not available. Entering simulation mode...");
+          setIsRecording(true);
+          setIsSimulated(true);
+          setError(null);
+          return;
+        }
+        throw new Error("Media devices not available. Ensure you are using HTTPS or localhost.");
+      }
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream);
       mediaRecorderRef.current = mediaRecorder;
@@ -351,12 +362,21 @@ var useAudioRecorder = (onStop) => {
     }
   }, [onStop]);
   const stop = (0, import_react3.useCallback)(() => {
+    if (isSimulated) {
+      setIsRecording(false);
+      setIsSimulated(false);
+      const simulatedBlob = new Blob(["simulated speech"], { type: "audio/simulated" });
+      setBlob(simulatedBlob);
+      if (onStop) onStop(simulatedBlob);
+      return;
+    }
     if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
       mediaRecorderRef.current.stop();
     }
-  }, []);
+  }, [isSimulated, onStop]);
   return {
     isRecording,
+    isSimulated,
     start,
     stop,
     blob,
@@ -405,21 +425,22 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   var _a, _b, _c, _d;
   const [internalMessage, setInternalMessage] = (0, import_react5.useState)("");
   const [voiceTrigger, setVoiceTrigger] = (0, import_react5.useState)(null);
-  const [inputMode, setInputMode] = (0, import_react5.useState)(defaultInputMode);
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const textareaRef = (0, import_react5.useRef)(null);
   const measurementRef = (0, import_react5.useRef)(null);
-  const voiceContainerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
-    var _a2;
-    if (inputMode === "voice") {
-      (_a2 = voiceContainerRef.current) == null ? void 0 : _a2.focus();
-    }
-  }, [inputMode]);
+  const pendingSelectionRef = (0, import_react5.useRef)(null);
   const isControlled = value !== void 0;
   const message = isControlled ? value : internalMessage;
   const messageRef = (0, import_react5.useRef)(message);
   messageRef.current = message;
+  (0, import_react5.useLayoutEffect)(() => {
+    if (pendingSelectionRef.current && textareaRef.current) {
+      const { start, end } = pendingSelectionRef.current;
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(start, end);
+      pendingSelectionRef.current = null;
+    }
+  }, [message]);
   const onChangeRef = (0, import_react5.useRef)(onChange);
   (0, import_react5.useEffect)(() => {
     onChangeRef.current = onChange;
@@ -443,34 +464,30 @@ var ChatInputArea = (0, import_react5.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 || inputMode === "voice");
-  const handleVoiceKeyDown = (e) => {
-    if (inputMode !== "voice" || isInputDisabled) return;
-    if (e.code !== "Space") return;
-    const activeElement = document.activeElement;
-    const isInputActive = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement instanceof HTMLElement && activeElement.isContentEditable);
-    if (isInputActive) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (voiceTrigger === "click") return;
-    if (!e.repeat && !voiceTrigger) {
-      startRecording("space");
-    }
-  };
-  const handleVoiceKeyUp = (e) => {
-    if (inputMode !== "voice" || isInputDisabled) return;
-    if (e.code === "Space") {
-      if (voiceTrigger === "space") {
-        e.preventDefault();
-        stopRecording();
-      }
+  useProactiveResize(textareaRef, measurementRef, message, isInputDisabled || !!voiceTrigger);
+  const insertTextAtCursor = (0, import_react5.useCallback)((text) => {
+    const textarea = textareaRef.current;
+    const currentVal = messageRef.current || "";
+    if (!textarea) {
+      triggerChange(currentVal + (currentVal ? " " : "") + text);
+      return;
     }
-  };
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const before = currentVal.substring(0, start);
+    const after = currentVal.substring(end);
+    const prefix = start > 0 && !/\s$/.test(before) ? " " : "";
+    const newText = before + prefix + text + after;
+    const selectionStart = start + prefix.length;
+    const selectionEnd = selectionStart + text.length;
+    pendingSelectionRef.current = { start: selectionStart, end: selectionEnd };
+    triggerChange(newText);
+  }, [triggerChange]);
   const handleVoiceResult = (0, import_react5.useCallback)((text, isFinal) => {
     if (isFinal) {
-      triggerChange(messageRef.current + (messageRef.current ? " " : "") + text);
+      insertTextAtCursor(text);
     }
-  }, []);
+  }, [insertTextAtCursor]);
   const handleVoiceEnd = (0, import_react5.useCallback)(() => {
     var _a2, _b2;
     setVoiceTrigger(null);
@@ -481,10 +498,15 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
     var _a2, _b2, _c2;
     setVoiceTrigger(null);
     (_b2 = (_a2 = voiceConfigRef.current) == null ? void 0 : _a2.onVoiceEnd) == null ? void 0 : _b2.call(_a2);
+    if (blob.type === "audio/simulated") {
+      console.log("[ChatInputArea] Handling simulated audio capture");
+      insertTextAtCursor("This is a simulated transcription for development testing.");
+      return;
+    }
     if ((_c2 = voiceConfigRef.current) == null ? void 0 : _c2.onAudioCapture) {
       try {
         const text = await voiceConfigRef.current.onAudioCapture(blob);
-        if (text) triggerChange(messageRef.current + (messageRef.current ? " " : "") + text);
+        if (text) insertTextAtCursor(text);
       } catch (e) {
         console.error("[ChatInputArea] Audio capture failed", e);
       }
@@ -492,12 +514,8 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   });
   (0, import_react5.useImperativeHandle)(ref, () => ({
     focus: () => {
-      var _a2, _b2;
-      if (inputMode === "voice") {
-        (_a2 = voiceContainerRef.current) == null ? void 0 : _a2.focus();
-      } else {
-        (_b2 = textareaRef.current) == null ? void 0 : _b2.focus();
-      }
+      var _a2;
+      (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
     },
     setValue: (newValue) => {
       triggerChange(newValue);
@@ -541,6 +559,10 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
     } else {
       await customRecorder.start();
     }
+    setTimeout(() => {
+      var _a3;
+      return (_a3 = textareaRef.current) == null ? void 0 : _a3.focus();
+    }, 0);
   };
   const stopRecording = () => {
     if (!voiceTrigger) return;
@@ -553,9 +575,7 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   const getPlaceholder = () => {
     if (placeholder) return placeholder;
     if (voiceTrigger) return "Listening...";
-    if (currentTask == null ? void 0 : currentTask.complete) {
-      return "Task completed!";
-    }
+    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) {
@@ -584,85 +604,54 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
         {
           type: "button",
           onClick: () => {
-            if (inputMode === "voice" && voiceTrigger) {
+            if (voiceTrigger) {
               stopRecording();
+            } else {
+              startRecording("click");
             }
-            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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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" }) })
-          )
+          className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border ${voiceTrigger ? "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg animate-pulse" : "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100"}`,
+          title: voiceTrigger ? "Stop Recording" : "Start Voice Input",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.MicrophoneIcon, { className: "w-5 h-5" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
-          ref: voiceContainerRef,
-          tabIndex: inputMode === "voice" ? 0 : -1,
-          onKeyDown: handleVoiceKeyDown,
-          onKeyUp: handleVoiceKeyUp,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          className: "flex-1 flex items-center border border-gray-300 rounded-lg overflow-hidden outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500 bg-white min-h-[42px] mb-1",
+          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: [
-            inputMode === "text" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "span",
-                {
-                  ref: measurementRef,
-                  className: "absolute invisible whitespace-pre-wrap p-0 m-0 text-gray-700 leading-6",
-                  style: { fontSize: "1rem" }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value: message,
-                  onChange: (e) => {
-                    if (isControlled && onChange) {
-                      onChange(e);
-                    } else {
-                      setInternalMessage(e.target.value);
-                    }
-                  },
-                  onKeyDown: handleKeyDown,
-                  placeholder: getPlaceholder(),
-                  disabled: isInputDisabled || !!voiceTrigger,
-                  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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-grow flex flex-col justify-center items-center p-1 relative", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "button",
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                ref: measurementRef,
+                className: "absolute invisible whitespace-pre-wrap p-0 m-0 text-gray-700 leading-6",
+                style: { fontSize: "1rem" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "textarea",
               {
-                type: "button",
-                onClick: () => {
-                  if (voiceTrigger === "click") {
-                    stopRecording();
-                  } else if (!voiceTrigger) {
-                    startRecording("click");
+                ref: textareaRef,
+                value: message,
+                onChange: (e) => {
+                  if (isControlled && onChange) {
+                    onChange(e);
+                  } else {
+                    setInternalMessage(e.target.value);
                   }
                 },
-                disabled: isInputDisabled || voiceTrigger === "space",
-                className: `w-full py-2 text-center font-medium rounded-md transition-all select-none flex items-center justify-center gap-2 ${voiceTrigger ? "bg-red-50 text-red-600 animate-pulse border border-red-200" : "bg-gray-50 text-gray-700 hover:bg-gray-100"} ${voiceTrigger === "space" ? "opacity-90 cursor-default" : ""}`,
-                children: voiceTrigger ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-2 h-2 rounded-full bg-red-500 animate-ping mr-2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
-                    "Listening... ",
-                    voiceTrigger === "space" ? "(Release Space to send)" : "Tap to send"
-                  ] })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Tap to Talk" })
+                onKeyDown: handleKeyDown,
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                placeholder: getPlaceholder(),
+                disabled: isInputDisabled,
+                readOnly: !!voiceTrigger,
+                rows: 1,
+                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 ? "cursor-default" : ""}`
               }
-            ) }),
-            (inputMode === "text" || isSending) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mx-2 flex-shrink-0", children: [
+            ),
+            /* @__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)(
                 "svg",
                 {
@@ -705,24 +694,10 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
                       handleSubmit();
                     }
                   },
-                  disabled: (currentTask == null ? void 0 : currentTask.complete) || isSending && !onStop || isInputDisabled || !!voiceTrigger,
+                  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" }) : (
-                    // 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__ */ (0, import_jsx_runtime5.jsx)(import_outline.StopIcon, { className: "h-5 w-5" })
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.PaperAirplaneIcon, { className: "h-5 w-5" })
+                  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" })
                 }
               )
             ] })
@@ -731,18 +706,7 @@ var ChatInputArea = (0, import_react5.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 }),
-    hintText && inputMode === "text" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-gray-500 ml-12 mb-2 mt-1", children: hintText }),
-    inputMode === "voice" && !voiceTrigger && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "p",
-      {
-        className: "text-[10px] text-gray-400 font-medium ml-12 text-center -mt-1 mb-1 cursor-pointer hover:text-gray-600 transition-colors",
-        onClick: () => {
-          var _a2;
-          return (_a2 = voiceContainerRef.current) == null ? void 0 : _a2.focus();
-        },
-        children: isFocused ? "Click to talk or hold space to talk" : "Tap to talk or click here to focus and push space to talk"
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "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-colors duration-200 ${voiceTrigger ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceTrigger ? "Listening... tap mic icon again to stop" : hintText || (voiceConfig ? "Type in text or tap mic icon to talk" : "Type your message...") }) })
   ] });
 });
 ChatInputArea.displayName = "ChatInputArea";