@contentgrowth/llm-service 0.9.3 → 0.9.5

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

@@ -149,7 +149,7 @@ function ChatHeader({
 
 // src/ui/react/components/ChatInputArea.tsx
 import { useState as useState3, useRef as useRef3, useImperativeHandle, forwardRef, useEffect as useEffect3, useCallback as useCallback3, useLayoutEffect } from "react";
-import { MicrophoneIcon, StopIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { MicrophoneIcon, StopIcon, PaperAirplaneIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 // src/ui/react/hooks/useSpeechRecognition.ts
 import { useState, useEffect, useCallback, useRef } from "react";
@@ -161,6 +161,12 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
   const recognitionRef = useRef(null);
   const isSimulatingRef = useRef(false);
   const simulationTimeoutRef = useRef(null);
+  const onResultRef = useRef(onResult);
+  const onEndRef = useRef(onEnd);
+  useEffect(() => {
+    onResultRef.current = onResult;
+    onEndRef.current = onEnd;
+  }, [onResult, onEnd]);
   useEffect(() => {
     if (typeof window !== "undefined") {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -179,7 +185,7 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
             return;
           }
           setIsListening(false);
-          if (onEnd) onEnd();
+          if (onEndRef.current) onEndRef.current();
         };
         recognition.onresult = (event) => {
           let interimTranscript = "";
@@ -188,10 +194,10 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
             const result = event.results[i];
             if (result.isFinal) {
               finalTranscript += result[0].transcript;
-              if (onResult) onResult(finalTranscript, true);
+              if (onResultRef.current) onResultRef.current(finalTranscript, true);
             } else {
               interimTranscript += result[0].transcript;
-              if (onResult) onResult(interimTranscript, false);
+              if (onResultRef.current) onResultRef.current(interimTranscript, false);
             }
           }
           setTranscript((prev) => prev + finalTranscript);
@@ -206,10 +212,10 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
             simulationTimeoutRef.current = setTimeout(() => {
               const mockText = "This is a simulated voice input for testing.";
               setTranscript((prev) => prev + (prev ? " " : "") + mockText);
-              if (onResult) onResult(mockText, true);
+              if (onResultRef.current) onResultRef.current(mockText, true);
               isSimulatingRef.current = false;
               setIsListening(false);
-              if (onEnd) onEnd();
+              if (onEndRef.current) onEndRef.current();
               simulationTimeoutRef.current = null;
             }, 3e3);
             return;
@@ -226,9 +232,11 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
         clearTimeout(simulationTimeoutRef.current);
         simulationTimeoutRef.current = null;
       }
-      recognitionRef.current.stop();
+      if (recognitionRef.current) {
+        recognitionRef.current.stop();
+      }
     };
-  }, [onResult, onEnd, language]);
+  }, [language]);
   const start = useCallback(() => {
     if (recognitionRef.current && !isListening) {
       try {
@@ -248,10 +256,10 @@ var useSpeechRecognition = (onResult, onEnd, language = "en-US") => {
       }
       const mockText = "This is a simulated voice input for testing.";
       setTranscript((prev) => prev + (prev ? " " : "") + mockText);
-      if (onResult) onResult(mockText, true);
+      if (onResultRef.current) onResultRef.current(mockText, true);
       isSimulatingRef.current = false;
       setIsListening(false);
-      if (onEnd) onEnd();
+      if (onEndRef.current) onEndRef.current();
       return;
     }
     if (recognitionRef.current && isListening) {
@@ -387,6 +395,42 @@ var ChatInputArea = forwardRef(({
   const [isTranscribing, setIsTranscribing] = useState3(false);
   const [voiceError, setVoiceError] = useState3(null);
   const [isFocused, setIsFocused] = useState3(false);
+  const [showDebug, setShowDebug] = useState3(false);
+  const [logs, setLogs] = useState3([]);
+  const tapCountRef = useRef3({ count: 0, lastTap: 0 });
+  useEffect3(() => {
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const addLog = (type, args) => {
+      try {
+        const msg = args.map((arg) => {
+          if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+          if (typeof arg === "object") return JSON.stringify(arg);
+          return String(arg);
+        }).join(" ");
+        setLogs((prev) => [`[${type}] ${msg}`, ...prev].slice(0, 50));
+      } catch (e) {
+      }
+    };
+    console.log = (...args) => {
+      originalLog(...args);
+      addLog("LOG", args);
+    };
+    console.warn = (...args) => {
+      originalWarn(...args);
+      addLog("WRN", args);
+    };
+    console.error = (...args) => {
+      originalError(...args);
+      addLog("ERR", args);
+    };
+    return () => {
+      console.log = originalLog;
+      console.warn = originalWarn;
+      console.error = originalError;
+    };
+  }, []);
   const textareaRef = useRef3(null);
   const measurementRef = useRef3(null);
   const pendingSelectionRef = useRef3(null);
@@ -456,6 +500,12 @@ var ChatInputArea = forwardRef(({
     (_b2 = (_a2 = voiceConfigRef.current) == null ? void 0 : _a2.onVoiceEnd) == null ? void 0 : _b2.call(_a2);
   }, []);
   const nativeSpeech = useSpeechRecognition(handleVoiceResult, handleVoiceEnd, voiceConfig == null ? void 0 : voiceConfig.language);
+  useEffect3(() => {
+    if (nativeSpeech.error) {
+      setVoiceError(nativeSpeech.error);
+      console.error("[ChatInputArea] Native Speech Error:", nativeSpeech.error);
+    }
+  }, [nativeSpeech.error]);
   const customRecorder = useAudioRecorder(async (blob) => {
     var _a2, _b2, _c2;
     setVoiceTrigger(null);
@@ -569,20 +619,40 @@ var ChatInputArea = forwardRef(({
   if (!showInputForm) {
     return null;
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col w-full relative", children: [
+    showDebug && /* @__PURE__ */ jsxs3("div", { className: "absolute bottom-full left-0 right-0 mb-2 p-2 bg-black/80 text-green-400 text-xs font-mono h-48 overflow-y-auto rounded z-50 pointer-events-auto", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ jsx5("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ jsx5("button", { onClick: () => setShowDebug(false), className: "text-white hover:text-red-400", children: /* @__PURE__ */ jsx5(XMarkIcon, { className: "w-4 h-4" }) })
+      ] }),
+      logs.map((log, i) => /* @__PURE__ */ jsx5("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ jsx5("div", { children: "No logs yet..." })
+    ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
       voiceConfig && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
           onClick: () => {
+            const now = Date.now();
+            if (now - tapCountRef.current.lastTap < 500) {
+              tapCountRef.current.count++;
+            } else {
+              tapCountRef.current.count = 1;
+            }
+            tapCountRef.current.lastTap = now;
+            if (tapCountRef.current.count >= 5) {
+              setShowDebug((prev) => !prev);
+              tapCountRef.current.count = 0;
+              return;
+            }
             if (voiceTrigger) {
               stopRecording();
             } else if (!isTranscribing) {
               startRecording("click");
             }
           },
-          className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border ${voiceTrigger || isTranscribing ? "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg" : "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100"} ${voiceTrigger ? "animate-pulse" : ""} ${isTranscribing ? "cursor-wait" : ""}`,
+          className: `mb-1 p-2 rounded-full transition-all duration-300 flex-shrink-0 border ${isTranscribing ? "text-white border-indigo-500 bg-indigo-600 scale-110 shadow-lg" : voiceTrigger ? "text-white border-orange-400 bg-orange-500 scale-110 shadow-lg" : "text-gray-500 border-gray-300 bg-white hover:text-gray-700 hover:bg-gray-100"} ${voiceTrigger ? "animate-pulse" : ""} ${isTranscribing ? "cursor-wait" : ""}`,
           disabled: isTranscribing,
           title: isTranscribing ? "Transcribing..." : voiceTrigger ? "Stop Recording" : "Start Voice Input",
           children: isTranscribing ? /* @__PURE__ */ jsx5("div", { className: "animate-spin w-5 h-5 flex items-center justify-center", children: /* @__PURE__ */ jsxs3("svg", { className: "w-5 h-5 text-white", viewBox: "0 0 24 24", children: [
@@ -685,17 +755,17 @@ var ChatInputArea = forwardRef(({
       )
     ] }),
     inputHint && /* @__PURE__ */ jsx5("div", { className: "text-sm text-red-500 bg-red-50 py-1 px-4 rounded-lg mt-1", children: inputHint }),
-    /* @__PURE__ */ jsx5("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ jsx5("p", { className: `text-[10px] leading-tight transition-all duration-200 ${voiceError ? "text-red-500" : voiceTrigger || isTranscribing ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceError ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1 font-semibold italic", children: [
+    /* @__PURE__ */ jsx5("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ jsx5("p", { className: `text-[10px] leading-tight transition-all duration-200 ${voiceError ? "text-red-500" : isTranscribing ? "text-indigo-600 font-bold" : voiceTrigger ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceError ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1 font-semibold italic", children: [
       "Error: ",
       voiceError
-    ] }) : isTranscribing ? "Transcribing, please wait..." : voiceTrigger ? "Listening... tap mic icon again to stop" : hintText || (voiceConfig ? "Type in text or tap mic icon to talk" : "Type your message...") }) })
+    ] }) : isTranscribing ? "Transcribing... please wait" : voiceTrigger ? "Transcribing, please wait..." : voiceTrigger ? "Listening... tap mic icon again to stop" : hintText || (voiceConfig ? "Type in text or tap mic icon to talk" : "Type your message...") }) })
   ] });
 });
 ChatInputArea.displayName = "ChatInputArea";
 
 // src/ui/react/components/TapToTalk.tsx
-import { useState as useState4, useCallback as useCallback4 } from "react";
-import { MicrophoneIcon as MicrophoneIcon2 } from "@heroicons/react/24/outline";
+import React3, { useState as useState4, useCallback as useCallback4, useRef as useRef4 } from "react";
+import { MicrophoneIcon as MicrophoneIcon2, XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var TapToTalk = ({
   onResult,
@@ -712,6 +782,42 @@ var TapToTalk = ({
   const [isTranscribing, setIsTranscribing] = useState4(false);
   const [voiceTrigger, setVoiceTrigger] = useState4(null);
   const [errorMsg, setErrorMsg] = useState4(null);
+  const [showDebug, setShowDebug] = useState4(false);
+  const [logs, setLogs] = useState4([]);
+  const tapCountRef = useRef4({ count: 0, lastTap: 0 });
+  React3.useEffect(() => {
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const addLog = (type, args) => {
+      try {
+        const msg = args.map((arg) => {
+          if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+          if (typeof arg === "object") return JSON.stringify(arg);
+          return String(arg);
+        }).join(" ");
+        setLogs((prev) => [`[${type}] ${msg}`, ...prev].slice(0, 50));
+      } catch (e) {
+      }
+    };
+    console.log = (...args) => {
+      originalLog(...args);
+      addLog("LOG", args);
+    };
+    console.warn = (...args) => {
+      originalWarn(...args);
+      addLog("WRN", args);
+    };
+    console.error = (...args) => {
+      originalError(...args);
+      addLog("ERR", args);
+    };
+    return () => {
+      console.log = originalLog;
+      console.warn = originalWarn;
+      console.error = originalError;
+    };
+  }, []);
   const handleVoiceResult = useCallback4((text, isFinal) => {
     if (isFinal) {
       onResult(text);
@@ -723,6 +829,12 @@ var TapToTalk = ({
     setVoiceTrigger(null);
   }, []);
   const nativeSpeech = useSpeechRecognition(handleVoiceResult, handleVoiceEnd, voiceConfig == null ? void 0 : voiceConfig.language);
+  React3.useEffect(() => {
+    if (nativeSpeech.error) {
+      setErrorMsg(nativeSpeech.error);
+      console.error("[TapToTalk] Native Speech Error:", nativeSpeech.error);
+    }
+  }, [nativeSpeech.error]);
   const customRecorder = useAudioRecorder(async (blob) => {
     setVoiceTrigger(null);
     setIsTranscribing(true);
@@ -751,6 +863,18 @@ var TapToTalk = ({
   const isListening = !!voiceTrigger || nativeSpeech.isListening || customRecorder.isRecording;
   const isActive = isListening || isTranscribing;
   const toggleVoice = async () => {
+    const now = Date.now();
+    if (now - tapCountRef.current.lastTap < 500) {
+      tapCountRef.current.count++;
+    } else {
+      tapCountRef.current.count = 1;
+    }
+    tapCountRef.current.lastTap = now;
+    if (tapCountRef.current.count >= 5) {
+      setShowDebug((prev) => !prev);
+      tapCountRef.current.count = 0;
+      return;
+    }
     if (isActive) {
       if (isTranscribing && !isListening) return;
       if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
@@ -788,30 +912,43 @@ var TapToTalk = ({
     label = "Listening ... Tap to stop";
     Icon = /* @__PURE__ */ jsx6(MicrophoneIcon2, { className: "h-5 w-5 animate-pulse" });
   } else if (isTranscribing) {
-    bgColor = "bg-orange-500";
+    bgColor = "bg-indigo-600";
     label = "Transcribing ...";
     Icon = /* @__PURE__ */ jsxs4("svg", { className: "animate-spin h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
       /* @__PURE__ */ jsx6("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ jsx6("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
     ] });
   }
-  return /* @__PURE__ */ jsxs4(
-    "button",
-    {
-      onClick: toggleVoice,
-      disabled: disabled || isTranscribing && !isListening,
-      className: `flex items-center justify-center gap-3 px-6 py-3 rounded-xl transition-all duration-300 w-full font-medium shadow-md active:scale-[0.98]
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col w-full relative", children: [
+    showDebug && /* @__PURE__ */ jsxs4("div", { className: "absolute bottom-full left-0 right-0 mb-2 p-2 bg-black/80 text-green-400 text-xs font-mono h-48 overflow-y-auto rounded z-50 pointer-events-auto", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center bg-gray-800 p-1 mb-1", children: [
+        /* @__PURE__ */ jsx6("span", { children: "Debug Logs" }),
+        /* @__PURE__ */ jsx6("button", { onClick: (e) => {
+          e.stopPropagation();
+          setShowDebug(false);
+        }, className: "text-white hover:text-red-400", children: /* @__PURE__ */ jsx6(XMarkIcon2, { className: "w-4 h-4" }) })
+      ] }),
+      logs.map((log, i) => /* @__PURE__ */ jsx6("div", { className: "mb-0.5 border-b border-gray-700/50 pb-0.5 break-all", children: log }, i)),
+      logs.length === 0 && /* @__PURE__ */ jsx6("div", { children: "No logs yet..." })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: toggleVoice,
+        disabled: disabled || isTranscribing && !isListening,
+        className: `flex items-center justify-center gap-3 px-6 py-3 rounded-xl transition-all duration-300 w-full font-medium shadow-md active:scale-[0.98]
                 ${bgColor} text-white
                 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                 ${className}`,
-      title: label,
-      children: [
-        /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center shrink-0", children: Icon }),
-        /* @__PURE__ */ jsx6("span", { className: "truncate", children: label }),
-        errorMsg && /* @__PURE__ */ jsx6("span", { className: "text-[10px] bg-white/20 px-1.5 py-0.5 rounded text-red-100 animate-in fade-in slide-in-from-right-1", children: errorMsg })
-      ]
-    }
-  );
+        title: label,
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center shrink-0", children: Icon }),
+          /* @__PURE__ */ jsx6("span", { className: "truncate", children: label }),
+          errorMsg && /* @__PURE__ */ jsx6("span", { className: "text-[10px] bg-white/20 px-1.5 py-0.5 rounded text-red-100 animate-in fade-in slide-in-from-right-1", children: errorMsg })
+        ]
+      }
+    )
+  ] });
 };
 
 // src/ui/react/components/ChatMessageList.tsx