@contentgrowth/llm-service 0.9.0 → 0.9.1

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) {
@@ -642,15 +655,22 @@ 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" : ""}`
               }
             ),
+            isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 animate-spin mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-4 h-4 text-orange-500", 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.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",
@@ -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: [