@contentgrowth/llm-service 0.8.4 → 0.8.5

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

@@ -200,6 +200,8 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
   const [error, setError] = (0, import_react2.useState)(null);
   const [isSupported, setIsSupported] = (0, import_react2.useState)(false);
   const recognitionRef = (0, import_react2.useRef)(null);
+  const isSimulatingRef = (0, import_react2.useRef)(false);
+  const simulationTimeoutRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     if (typeof window !== "undefined") {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -214,6 +216,7 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
           setError(null);
         };
         recognition.onend = () => {
+          if (isSimulatingRef.current) return;
           setIsListening(false);
           if (onEnd) onEnd();
         };
@@ -235,15 +238,18 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
         recognition.onerror = (event) => {
           if (event.error === "not-allowed" && process.env.NODE_ENV === "development") {
             console.warn("Speech recognition blocked. Simulating input for development...");
+            isSimulatingRef.current = true;
             setError(null);
             setIsListening(true);
-            setTimeout(() => {
+            simulationTimeoutRef.current = setTimeout(() => {
               const mockText = "This is a simulated voice input for testing.";
               setTranscript((prev) => prev + (prev ? " " : "") + mockText);
               if (onResult) onResult(mockText, true);
+              isSimulatingRef.current = false;
               setIsListening(false);
               if (onEnd) onEnd();
-            }, 1e3);
+              simulationTimeoutRef.current = null;
+            }, 3e3);
             return;
           }
           console.error("Speech recognition error", event.error);
@@ -254,11 +260,13 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
       }
     }
     return () => {
-      if (recognitionRef.current) {
-        recognitionRef.current.stop();
+      if (isSimulatingRef.current && simulationTimeoutRef.current) {
+        clearTimeout(simulationTimeoutRef.current);
+        simulationTimeoutRef.current = null;
       }
+      recognitionRef.current.stop();
     };
-  }, [onResult, onEnd]);
+  }, [onResult, onEnd, language]);
   const start = (0, import_react2.useCallback)(() => {
     if (recognitionRef.current && !isListening) {
       try {
@@ -270,10 +278,23 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
     }
   }, [isListening]);
   const stop = (0, import_react2.useCallback)(() => {
+    if (isSimulatingRef.current) {
+      if (simulationTimeoutRef.current) {
+        clearTimeout(simulationTimeoutRef.current);
+        simulationTimeoutRef.current = null;
+      }
+      const mockText = "This is a simulated voice input for testing.";
+      setTranscript((prev) => prev + (prev ? " " : "") + mockText);
+      if (onResult) onResult(mockText, true);
+      isSimulatingRef.current = false;
+      setIsListening(false);
+      if (onEnd) onEnd();
+      return;
+    }
     if (recognitionRef.current && isListening) {
       recognitionRef.current.stop();
     }
-  }, [isListening]);
+  }, [isListening, onResult, onEnd]);
   const resetTranscript = (0, import_react2.useCallback)(() => {
     setTranscript("");
   }, []);
@@ -371,14 +392,23 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   hintText,
   placeholder,
   value,
-  onChange
+  onChange,
+  defaultInputMode = "text"
 }, ref) => {
   var _a, _b, _c, _d;
   const [internalMessage, setInternalMessage] = (0, import_react5.useState)("");
-  const [isVoiceActive, setIsVoiceActive] = (0, import_react5.useState)(false);
-  const [inputMode, setInputMode] = (0, import_react5.useState)("text");
+  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 isControlled = value !== void 0;
   const message = isControlled ? value : internalMessage;
   const { voice: globalVoice } = useChatConfig();
@@ -396,17 +426,39 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
     }
   };
   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");
+  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();
+      }
+    }
+  };
   const nativeSpeech = useSpeechRecognition((text) => {
     triggerChange(message + (message ? " " : "") + text);
   }, () => {
     var _a2;
-    setIsVoiceActive(false);
+    setVoiceTrigger(null);
     (_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);
+    setVoiceTrigger(null);
     (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceEnd) == null ? void 0 : _a2.call(voiceConfig);
     if (voiceConfig == null ? void 0 : voiceConfig.onAudioCapture) {
       try {
@@ -419,8 +471,12 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   });
   (0, import_react5.useImperativeHandle)(ref, () => ({
     focus: () => {
-      var _a2;
-      (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      var _a2, _b2;
+      if (inputMode === "voice") {
+        (_a2 = voiceContainerRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        (_b2 = textareaRef.current) == null ? void 0 : _b2.focus();
+      }
     },
     setValue: (newValue) => {
       triggerChange(newValue);
@@ -449,15 +505,15 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
       handleSubmit();
     }
   };
-  const startRecording = async () => {
+  const startRecording = async (trigger) => {
     var _a2;
-    if (isVoiceActive) return;
-    setIsVoiceActive(true);
+    if (voiceTrigger) return;
+    setVoiceTrigger(trigger);
     (_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);
+        setVoiceTrigger(null);
         return;
       }
       nativeSpeech.start();
@@ -466,7 +522,7 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
     }
   };
   const stopRecording = () => {
-    if (!isVoiceActive) return;
+    if (!voiceTrigger) return;
     if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
       nativeSpeech.stop();
     } else {
@@ -475,7 +531,7 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   };
   const getPlaceholder = () => {
     if (placeholder) return placeholder;
-    if (isVoiceActive) return "Listening...";
+    if (voiceTrigger) return "Listening...";
     if (currentTask == null ? void 0 : currentTask.complete) {
       return "Task completed!";
     }
@@ -507,7 +563,7 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
         {
           type: "button",
           onClick: () => {
-            if (inputMode === "voice" && isVoiceActive) {
+            if (inputMode === "voice" && voiceTrigger) {
               stopRecording();
             }
             setInputMode((prev) => prev === "text" ? "voice" : "text");
@@ -523,117 +579,149 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (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);
+      /* @__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",
+          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" }
                 }
-              },
-              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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-grow flex justify-center items-center p-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "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__ */ (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",
-            {
-              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__ */ (0, import_jsx_runtime5.jsx)(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__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)(
+                "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",
+              {
+                type: "button",
+                onClick: () => {
+                  if (voiceTrigger === "click") {
+                    stopRecording();
+                  } else if (!voiceTrigger) {
+                    startRecording("click");
                   }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                if (isSending && onStop) {
-                  e.preventDefault();
-                  onStop();
-                } else {
-                  handleSubmit();
+                },
+                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" })
+              }
+            ) }),
+            (inputMode === "text" || isSending) && /* @__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",
+                {
+                  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__ */ (0, import_jsx_runtime5.jsx)(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__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"
+                      }
+                    )
+                  ]
                 }
-              },
-              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__ */ (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" })
-            }
-          )
-        ] })
-      ] })
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    if (isSending && onStop) {
+                      e.preventDefault();
+                      onStop();
+                    } else {
+                      handleSubmit();
+                    }
+                  },
+                  disabled: (currentTask == null ? void 0 : currentTask.complete) || isSending && !onStop || isInputDisabled || !!voiceTrigger,
+                  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" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
     ] }),
     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 })
+    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"
+      }
+    )
   ] });
 });
 ChatInputArea.displayName = "ChatInputArea";