@copilotz/chat-ui 0.1.34 → 0.1.35

package/dist/index.cjs

@@ -96,6 +96,8 @@ var defaultChatConfig = {
     voiceFinishing: "Finishing capture...",
     voiceReview: "Ready to send",
     voiceSending: "Sending...",
+    voiceReviewArmedHint: "Still listening. Speak to add more before it sends.",
+    voiceReviewPausedHint: "Tap the mic to keep adding to this message.",
     voiceStart: "Start recording",
     voiceStop: "Stop recording",
     voiceSendNow: "Send now",
@@ -171,6 +173,7 @@ var defaultChatConfig = {
   voiceCompose: {
     enabled: false,
     defaultMode: "text",
+    reviewMode: "manual",
     autoSendDelayMs: 5e3,
     persistComposer: true,
     showTranscriptPreview: true,
@@ -3256,11 +3259,13 @@ var VoiceComposer = ({
   countdownMs,
   autoSendDelayMs,
   isAutoSendActive,
+  reviewMode,
   errorMessage,
   disabled = false,
   labels,
   onStart,
   onStop,
+  onPauseReview,
   onCancelAutoSend,
   onDiscard,
   onRecordAgain,
@@ -3272,9 +3277,26 @@ var VoiceComposer = ({
   const countdownValue = autoSendDelayMs > 0 ? Math.min(100, Math.max(0, (autoSendDelayMs - countdownMs) / autoSendDelayMs * 100)) : 100;
   const isBusy = state === "preparing" || state === "finishing" || state === "sending";
   const isCapturing = state === "waiting_for_speech" || state === "listening";
-  const isReviewing = state === "review";
+  const hasDraft = Boolean(attachment);
+  const isDraftLayout = hasDraft;
+  const isArmedDraft = isDraftLayout && reviewMode === "armed" && (state === "waiting_for_speech" || state === "listening");
   const levelValue = isCapturing || state === "preparing" || state === "finishing" ? Math.max(8, Math.round(audioLevel * 100)) : 0;
-  const headerLabel = state === "error" ? labels?.voiceCaptureError || "Unable to capture audio." : resolveStateLabel(state, labels, errorMessage);
+  const headerLabel = hasDraft && state !== "sending" && state !== "error" ? labels?.voiceReview || "Ready to send" : state === "error" ? labels?.voiceCaptureError || "Unable to capture audio." : resolveStateLabel(state, labels, errorMessage);
+  const reviewHelperText = isArmedDraft ? labels?.voiceReviewArmedHint || "Speak to add more before it sends." : labels?.voiceReviewPausedHint || labels?.voiceRecordAgain || "Tap the mic to continue this message.";
+  const orbIsListening = state === "listening";
+  const orbCanStop = !isDraftLayout && (state === "waiting_for_speech" || state === "listening");
+  const orbIsReviewBusy = state === "preparing" || state === "finishing" || state === "sending";
+  const handleReviewOrbClick = () => {
+    if (state === "listening") {
+      onStop();
+      return;
+    }
+    if (isArmedDraft) {
+      onPauseReview();
+      return;
+    }
+    onRecordAgain();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full max-w-3xl rounded-xl border bg-background p-3 shadow-sm sm:p-4 md:min-w-3xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-2 sm:gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
@@ -3297,7 +3319,7 @@ var VoiceComposer = ({
         }
       )
     ] }),
-    !isReviewing ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-3 rounded-xl border border-dashed border-primary/30 bg-primary/5 px-3 py-3 text-center sm:px-4 sm:py-4", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mx-auto flex w-full max-w-sm flex-col items-center gap-3", children: [
+    !isDraftLayout ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-3 rounded-xl border border-dashed border-primary/30 bg-primary/5 px-3 py-3 text-center sm:px-4 sm:py-4", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mx-auto flex w-full max-w-sm flex-col items-center gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Button,
         {
@@ -3339,6 +3361,27 @@ var VoiceComposer = ({
           }
         )
       ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-4 flex flex-col items-center gap-3 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: orbCanStop ? "destructive" : "outline",
+            className: `h-16 w-16 rounded-full sm:h-20 sm:w-20 ${orbIsListening ? "border-red-500 bg-red-500 text-white hover:bg-red-600" : isArmedDraft ? "border-red-200 bg-red-50 text-red-600 shadow-[0_0_0_10px_rgba(239,68,68,0.08)] hover:bg-red-100 hover:text-red-700" : "border-red-200 bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"}`,
+            onClick: handleReviewOrbClick,
+            disabled: disabled || orbIsReviewBusy,
+            children: orbIsReviewBusy ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Loader2, { className: "h-7 w-7 animate-spin" }) : orbIsListening ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Square, { className: "h-7 w-7" }) : isArmedDraft ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Mic, { className: "h-7 w-7 animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Mic, { className: "h-7 w-7" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full max-w-sm space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Progress, { value: levelValue, className: "h-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: formatDuration(durationMs) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "max-w-[15rem] text-right", children: reviewHelperText })
+          ] })
+        ] })
+      ] }),
       attachment && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-3 rounded-lg bg-background p-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("audio", { controls: true, preload: "metadata", className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("source", { src: attachment.dataUrl, type: attachment.mimeType }) }) }),
       showTranscriptPreview && transcriptMode !== "none" && transcriptText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-3 rounded-lg border bg-background px-3 py-2 text-left text-sm", children: transcriptText }),
       isAutoSendActive && autoSendDelayMs > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-3 space-y-2", children: [
@@ -3350,19 +3393,6 @@ var VoiceComposer = ({
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.X, { className: "h-4 w-4" }),
           labels?.voiceCancel || "Cancel"
         ] }),
-        !isAutoSendActive && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "icon",
-            onClick: onRecordAgain,
-            disabled,
-            "aria-label": labels?.voiceRecordAgain || "Record again",
-            title: labels?.voiceRecordAgain || "Record again",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Mic, { className: "h-4 w-4" })
-          }
-        ),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { type: "button", size: "sm", onClick: onSendNow, disabled, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Send, { className: "h-4 w-4" }),
           labels?.voiceSendNow || "Send now"
@@ -3640,6 +3670,7 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
 }) {
   const voiceComposeEnabled = config?.voiceCompose?.enabled === true;
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
+  const voiceReviewMode = config?.voiceCompose?.reviewMode ?? "manual";
   const voiceAutoSendDelayMs = config?.voiceCompose?.autoSendDelayMs ?? 5e3;
   const voicePersistComposer = config?.voiceCompose?.persistComposer ?? true;
   const voiceShowTranscriptPreview = config?.voiceCompose?.showTranscriptPreview ?? true;
@@ -3874,13 +3905,30 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
     setIsVoiceAutoSendActive(false);
     setVoiceError(null);
   }, []);
+  const armVoiceDraftForAppend = (0, import_react5.useCallback)((segment) => {
+    voiceAppendBaseRef.current = segment;
+    voiceAppendBaseDurationRef.current = segment ? resolveVoiceSegmentDuration(segment) : 0;
+  }, []);
+  const handleVoiceProviderStateChange = (0, import_react5.useCallback)((nextState) => {
+    if (voiceReviewMode === "armed" && (nextState === "waiting_for_speech" || nextState === "listening")) {
+      const currentDraft = voiceDraftRef.current;
+      if (currentDraft) {
+        armVoiceDraftForAppend(currentDraft);
+      }
+    }
+    if (voiceReviewMode === "armed" && nextState === "listening" && voiceDraftRef.current) {
+      setVoiceCountdownMs(voiceAutoSendDelayMs);
+      setIsVoiceAutoSendActive(false);
+    }
+    setVoiceState(nextState);
+  }, [armVoiceDraftForAppend, voiceAutoSendDelayMs, voiceReviewMode]);
   const ensureVoiceProvider = (0, import_react5.useCallback)(async () => {
     if (voiceProviderRef.current) {
       return voiceProviderRef.current;
     }
     const createProvider = resolveVoiceProviderFactory(config?.voiceCompose?.createProvider);
     const provider = await createProvider({
-      onStateChange: setVoiceState,
+      onStateChange: handleVoiceProviderStateChange,
       onAudioLevelChange: setVoiceAudioLevel,
       onDurationChange: (durationMs) => {
         setVoiceDurationMs(voiceAppendBaseDurationRef.current + durationMs);
@@ -3896,8 +3944,6 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
           const previousSegment = voiceAppendBaseRef.current;
           try {
             const nextSegment = previousSegment ? await appendVoiceSegments(previousSegment, segment) : segment;
-            voiceAppendBaseRef.current = null;
-            voiceAppendBaseDurationRef.current = 0;
             voiceDraftRef.current = nextSegment;
             setVoiceDraft(nextSegment);
             setVoiceTranscript(nextSegment.transcript ?? clearVoiceTranscript());
@@ -3906,11 +3952,15 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
             setVoiceCountdownMs(voiceAutoSendDelayMs);
             setIsVoiceAutoSendActive(voiceAutoSendDelayMs > 0);
             setVoiceError(null);
-            setVoiceState("review");
+            if (voiceReviewMode === "armed") {
+              armVoiceDraftForAppend(nextSegment);
+            } else {
+              armVoiceDraftForAppend(null);
+            }
+            setVoiceState((currentState) => voiceReviewMode === "armed" && (currentState === "waiting_for_speech" || currentState === "listening") ? currentState : "review");
           } catch (error) {
             const resolvedError = resolveVoiceErrorMessage(error, config);
-            voiceAppendBaseRef.current = null;
-            voiceAppendBaseDurationRef.current = 0;
+            armVoiceDraftForAppend(null);
             setVoiceAudioLevel(0);
             setVoiceCountdownMs(0);
             setIsVoiceAutoSendActive(false);
@@ -3934,8 +3984,7 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
       },
       onError: (error) => {
         const previousSegment = voiceAppendBaseRef.current;
-        voiceAppendBaseRef.current = null;
-        voiceAppendBaseDurationRef.current = 0;
+        armVoiceDraftForAppend(null);
         setVoiceError(resolveVoiceErrorMessage(error, config));
         setVoiceAudioLevel(0);
         setVoiceCountdownMs(0);
@@ -3959,7 +4008,7 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
     });
     voiceProviderRef.current = provider;
     return provider;
-  }, [config, voiceAutoSendDelayMs, voiceMaxRecordingMs]);
+  }, [armVoiceDraftForAppend, config, handleVoiceProviderStateChange, voiceAutoSendDelayMs, voiceMaxRecordingMs, voiceReviewMode]);
   const closeVoiceComposer = (0, import_react5.useCallback)(async () => {
     voiceAppendBaseRef.current = null;
     voiceAppendBaseDurationRef.current = 0;
@@ -4051,16 +4100,21 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
     void closeVoiceComposer();
   }, [voicePersistComposer, resetVoiceComposerState, closeVoiceComposer]);
   const sendVoiceDraft = (0, import_react5.useCallback)(() => {
-    if (!voiceDraft || disabled || isGenerating) {
-      return;
-    }
-    setVoiceState("sending");
-    setVoiceCountdownMs(0);
-    setIsVoiceAutoSendActive(false);
-    onSubmit("", [...attachments, voiceDraft.attachment]);
-    onChange("");
-    onAttachmentsChange([]);
-    finalizeVoiceComposerAfterSend();
+    void (async () => {
+      if (!voiceDraft || disabled || isGenerating) {
+        return;
+      }
+      setVoiceState("sending");
+      setVoiceCountdownMs(0);
+      setIsVoiceAutoSendActive(false);
+      if (voiceProviderRef.current) {
+        await voiceProviderRef.current.cancel();
+      }
+      onSubmit("", [...attachments, voiceDraft.attachment]);
+      onChange("");
+      onAttachmentsChange([]);
+      finalizeVoiceComposerAfterSend();
+    })();
   }, [
     voiceDraft,
     disabled,
@@ -4072,25 +4126,51 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
     finalizeVoiceComposerAfterSend
   ]);
   const cancelVoiceAutoSend = (0, import_react5.useCallback)(() => {
+    void (async () => {
+      if (voiceReviewMode === "armed" && voiceProviderRef.current) {
+        await voiceProviderRef.current.cancel();
+      }
+      armVoiceDraftForAppend(null);
+      setVoiceAudioLevel(0);
+      setVoiceState("review");
+    })();
     setVoiceCountdownMs(0);
     setIsVoiceAutoSendActive(false);
-  }, []);
+  }, [armVoiceDraftForAppend, voiceReviewMode]);
+  const pauseVoiceReview = (0, import_react5.useCallback)(async () => {
+    if (voiceState === "listening") {
+      await stopVoiceCapture();
+      return;
+    }
+    if (voiceReviewMode === "armed" && voiceProviderRef.current) {
+      await voiceProviderRef.current.cancel();
+    }
+    armVoiceDraftForAppend(null);
+    setVoiceAudioLevel(0);
+    setVoiceState("review");
+  }, [armVoiceDraftForAppend, stopVoiceCapture, voiceReviewMode, voiceState]);
   (0, import_react5.useEffect)(() => {
-    if (voiceState !== "review" || !voiceDraft || voiceAutoSendDelayMs <= 0 || !isVoiceAutoSendActive) {
+    if (!voiceDraft || voiceAutoSendDelayMs <= 0 || !isVoiceAutoSendActive) {
+      return;
+    }
+    const canContinueCounting = voiceState === "review" || voiceReviewMode === "armed" && voiceState === "waiting_for_speech";
+    if (!canContinueCounting) {
       return;
     }
-    const startedAt = Date.now();
-    setVoiceCountdownMs(voiceAutoSendDelayMs);
     const timer = setInterval(() => {
-      const remaining = Math.max(0, voiceAutoSendDelayMs - (Date.now() - startedAt));
-      setVoiceCountdownMs(remaining);
-      if (remaining <= 0) {
-        clearInterval(timer);
-        sendVoiceDraft();
-      }
+      setVoiceCountdownMs((previous) => {
+        const remaining = Math.max(0, previous - 100);
+        if (remaining <= 0) {
+          clearInterval(timer);
+          queueMicrotask(() => {
+            sendVoiceDraft();
+          });
+        }
+        return remaining;
+      });
     }, 100);
     return () => clearInterval(timer);
-  }, [voiceState, voiceDraft, voiceAutoSendDelayMs, isVoiceAutoSendActive, sendVoiceDraft]);
+  }, [voiceState, voiceDraft, voiceReviewMode, voiceAutoSendDelayMs, isVoiceAutoSendActive, sendVoiceDraft]);
   const removeAttachment = (index) => {
     const newAttachments = attachments.filter((_, i) => i !== index);
     onAttachmentsChange(newAttachments);
@@ -4145,6 +4225,7 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
         countdownMs: voiceCountdownMs,
         autoSendDelayMs: voiceAutoSendDelayMs,
         isAutoSendActive: isVoiceAutoSendActive,
+        reviewMode: voiceReviewMode,
         errorMessage: voiceError,
         disabled: disabled || isGenerating,
         labels: config?.labels,
@@ -4154,6 +4235,9 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
         onStop: () => {
           void stopVoiceCapture();
         },
+        onPauseReview: () => {
+          void pauseVoiceReview();
+        },
         onCancelAutoSend: () => {
           cancelVoiceAutoSend();
         },