@copilotz/chat-ui 0.1.34 → 0.1.36

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,
@@ -3269,17 +3274,34 @@ var VoiceComposer = ({
 }) => {
   const transcriptText = resolveTranscriptText(transcript, transcriptMode);
   const countdownSeconds = Math.max(1, Math.ceil(countdownMs / 1e3));
-  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 draftStatusLabel = state === "listening" ? labels?.voiceListening || "Listening..." : state === "waiting_for_speech" ? labels?.voiceWaiting || "Waiting for speech..." : state === "finishing" ? labels?.voiceFinishing || "Finishing capture..." : state === "sending" ? labels?.voiceSending || "Sending..." : labels?.voiceReview || "Ready to send";
   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);
-  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: [
+  const headerLabel = hasDraft && state !== "sending" && state !== "error" ? draftStatusLabel : 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-2xl 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: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: "outline", children: labels?.voiceTitle || "Voice" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-xs sm:text-sm text-muted-foreground", children: headerLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate rounded-full bg-muted px-2.5 py-1 text-[11px] sm:text-xs text-muted-foreground", children: headerLabel })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         Button,
@@ -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,
         {
@@ -3319,11 +3341,8 @@ var VoiceComposer = ({
       ] }),
       showTranscriptPreview && transcriptMode !== "none" && transcriptText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full rounded-lg border bg-background px-3 py-2 text-left text-sm", children: transcriptText })
     ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-3 rounded-xl border bg-muted/20 p-3 sm:p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-sm font-medium text-foreground", children: labels?.voiceReview || "Ready to send" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs text-muted-foreground", children: formatDuration(durationMs) })
-        ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: formatDuration(durationMs) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
@@ -3339,31 +3358,39 @@ var VoiceComposer = ({
           }
         )
       ] }),
-      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: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Progress, { value: countdownValue, className: "h-2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-center text-xs text-muted-foreground", children: interpolateSeconds(labels?.voiceAutoSendIn, countdownSeconds) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-3 flex items-center justify-end gap-2", children: [
-        isAutoSendActive && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancelAutoSend, disabled, children: [
-          /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-4 flex flex-col items-center gap-4 text-center", children: [
+        /* @__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" })
+            variant: orbCanStop ? "destructive" : "outline",
+            className: `h-20 w-20 rounded-full sm:h-24 sm:w-24 ${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)(Button, { type: "button", size: "sm", onClick: onSendNow, disabled, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "max-w-sm space-y-1 px-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-foreground", children: reviewHelperText }),
+          isCapturing && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mx-auto h-1.5 w-32 overflow-hidden rounded-full bg-red-100", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
+            {
+              className: "h-full rounded-full bg-red-500 transition-[width] duration-150",
+              style: { width: `${levelValue}%` }
+            }
+          ) })
+        ] })
+      ] }),
+      attachment && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-4 rounded-lg border bg-background/90 p-2 shadow-sm", 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.jsx)("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "inline-flex items-center rounded-full border bg-background px-3 py-1 text-xs text-muted-foreground", children: interpolateSeconds(labels?.voiceAutoSendIn, countdownSeconds) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-4 grid grid-cols-1 gap-2 sm:flex sm:items-center sm:justify-end", children: [
+        isAutoSendActive && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancelAutoSend, disabled, className: "w-full sm:w-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.X, { className: "h-4 w-4" }),
+          labels?.voiceCancel || "Cancel"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { type: "button", size: "sm", onClick: onSendNow, disabled, className: "w-full sm:w-auto", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Send, { className: "h-4 w-4" }),
           labels?.voiceSendNow || "Send now"
         ] })
@@ -3640,6 +3667,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 +3902,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 +3941,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 +3949,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 +3981,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 +4005,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 +4097,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 +4123,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 +4222,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 +4232,9 @@ var ChatInput = (0, import_react5.memo)(function ChatInput2({
         onStop: () => {
           void stopVoiceCapture();
         },
+        onPauseReview: () => {
+          void pauseVoiceReview();
+        },
         onCancelAutoSend: () => {
           cancelVoiceAutoSend();
         },