@contentgrowth/llm-service 0.9.0 → 0.9.2

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

@@ -98,7 +98,7 @@ var MessageBubble = ({
       )
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex items-start gap-3 my-4 ${isUser ? "justify-end" : "justify-start"}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex items-start gap-3 my-1 ${isUser ? "justify-end" : "justify-start"}`, children: [
     !isUser && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_solid.SparklesIcon, { className: "h-5 w-5" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
@@ -425,6 +425,8 @@ 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 [isTranscribing, setIsTranscribing] = (0, import_react5.useState)(false);
+  const [voiceError, setVoiceError] = (0, import_react5.useState)(null);
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const textareaRef = (0, import_react5.useRef)(null);
   const measurementRef = (0, import_react5.useRef)(null);
@@ -453,6 +455,7 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
     voiceConfigRef.current = voiceConfig;
   }, [voiceConfig]);
   const triggerChange = (0, import_react5.useCallback)((newValue) => {
+    setVoiceError(null);
     if (isControlled && onChangeRef.current) {
       const syntheticEvent = {
         target: { value: newValue },
@@ -497,10 +500,14 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   const customRecorder = useAudioRecorder(async (blob) => {
     var _a2, _b2, _c2;
     setVoiceTrigger(null);
+    setIsTranscribing(true);
+    setVoiceError(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");
+      await new Promise((resolve) => setTimeout(resolve, 1500));
       insertTextAtCursor("This is a simulated transcription for development testing.");
+      setIsTranscribing(false);
       return;
     }
     if ((_c2 = voiceConfigRef.current) == null ? void 0 : _c2.onAudioCapture) {
@@ -509,7 +516,12 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
         if (text) insertTextAtCursor(text);
       } catch (e) {
         console.error("[ChatInputArea] Audio capture failed", e);
+        setVoiceError(e.message || "Transcription failed");
+      } finally {
+        setIsTranscribing(false);
       }
+    } else {
+      setIsTranscribing(false);
     }
   });
   (0, import_react5.useImperativeHandle)(ref, () => ({
@@ -546,8 +558,9 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
   };
   const startRecording = async (trigger) => {
     var _a2;
-    if (voiceTrigger) return;
+    if (voiceTrigger || isTranscribing) return;
     setVoiceTrigger(trigger);
+    setVoiceError(null);
     (_a2 = voiceConfig == null ? void 0 : voiceConfig.onVoiceStart) == null ? void 0 : _a2.call(voiceConfig);
     if ((voiceConfig == null ? void 0 : voiceConfig.mode) === "native") {
       if (!nativeSpeech.isSupported) {
@@ -606,13 +619,17 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
           onClick: () => {
             if (voiceTrigger) {
               stopRecording();
-            } else {
+            } else if (!isTranscribing) {
               startRecording("click");
             }
           },
-          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" })
+          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" : ""}`,
+          disabled: isTranscribing,
+          title: isTranscribing ? "Transcribing..." : voiceTrigger ? "Stop Recording" : "Start Voice Input",
+          children: isTranscribing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "animate-spin w-5 h-5 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-5 h-5 text-white", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_outline.MicrophoneIcon, { className: "w-5 h-5" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -642,13 +659,16 @@ var ChatInputArea = (0, import_react5.forwardRef)(({
                   }
                 },
                 onKeyDown: handleKeyDown,
-                onFocus: () => setIsFocused(true),
+                onFocus: () => {
+                  setIsFocused(true);
+                  setVoiceError(null);
+                },
                 onBlur: () => setIsFocused(false),
                 placeholder: getPlaceholder(),
                 disabled: isInputDisabled,
-                readOnly: !!voiceTrigger,
+                readOnly: !!voiceTrigger || isTranscribing,
                 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" : ""}`
+                className: `flex-grow px-4 py-2 outline-none text-gray-700 placeholder-gray-500 resize-none leading-6 w-full ${isInputDisabled ? "bg-gray-100 cursor-not-allowed" : "bg-transparent"} ${voiceTrigger || isTranscribing ? "cursor-default" : ""}`
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mx-2 flex-shrink-0", children: [
@@ -706,7 +726,10 @@ 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 }),
-    /* @__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...") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ml-[46px] mb-2 mt-0.5 min-h-[0.75rem]", style: { marginLeft: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-[10px] leading-tight transition-all duration-200 ${voiceError ? "text-red-500" : voiceTrigger || isTranscribing ? "text-orange-600 font-medium" : "text-gray-400"}`, children: voiceError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex items-center gap-1 font-semibold italic", children: [
+      "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...") }) })
   ] });
 });
 ChatInputArea.displayName = "ChatInputArea";
@@ -1229,7 +1252,7 @@ var ChatMessageList = ({
     "div",
     {
       ref: chatContainerRef,
-      className: "flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50",
+      className: "flex-1 overflow-y-auto p-4 space-y-8 bg-gray-50",
       children: [
         chatHistory.length === 0 && !isProcessing && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center py-8", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-medium text-gray-700 mb-2", children: "How can I help you today?" }),
@@ -1285,7 +1308,7 @@ var ChatMessageList = ({
           "div",
           {
             ref: processingIndicatorRef,
-            className: "flex justify-start",
+            className: "flex justify-start my-4",
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: processingHint }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ml-2 flex space-x-1", children: [