@opengeni/react 0.41.0 → 0.44.1

package/src/components/chat-composer.tsx

@@ -1,4 +1,5 @@
 import type { ClientModel, EffectiveSessionControl } from "@opengeni/sdk";
+import { LayoutGroup, motion } from "motion/react";
 import type { ClipboardEvent, ReactNode } from "react";
 import type { SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
@@ -61,6 +62,10 @@ export type ChatComposerProps = {
   attachButtonClassName?: string | undefined;
   /** Provider-neutral speech capability. Provider configuration stays in workspace settings. */
   transcription?: ComposerTranscriptionControlProps | undefined;
+  /** Extra classes on the transcription control. */
+  transcriptionClassName?: string | undefined;
+  /** Soft-hide dictate while realtime voice is active (animated collapse). */
+  transcriptionSuppressed?: boolean | undefined;
   /** Content rendered above the textarea, inside the field chrome. */
   header?: ReactNode | undefined;
   /** Paste hook composed with the attachment paste path. */
@@ -99,6 +104,8 @@ export function ChatComposer({
   actionsStart,
   attachButtonClassName,
   transcription,
+  transcriptionClassName,
+  transcriptionSuppressed = false,
   header,
   onPaste,
   attachments,
@@ -145,25 +152,57 @@ export function ChatComposer({
           {controller.confirmState ? (
             <Confirmation />
           ) : (
-            <Footer className={stackActions ? "flex-wrap" : undefined}>
-              {hasControls ? (
-                <Controls className={stackActions ? "w-full sm:w-auto" : undefined}>
-                  {controlsLeading}
-                  <AttachButton className={attachButtonClassName} />
-                  {transcription ? <ComposerTranscriptionControl {...transcription} /> : null}
-                  {models ? (
-                    <ModelPicker models={models} value={selectedModel} onChange={onSelectModel} />
-                  ) : null}
-                  {controlsStart}
-                </Controls>
-              ) : (
-                <Hint>{hint}</Hint>
-              )}
-              <Actions className={stackActions ? "w-full justify-end sm:w-auto" : undefined}>
-                {actionsStart}
-                <PauseButton />
-                <SendButton />
-              </Actions>
+            <Footer className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}>
+              <LayoutGroup id="og-composer-footer">
+                {hasControls ? (
+                  <Controls
+                    className={stackActions ? "min-w-0 max-sm:flex-1 sm:w-auto" : undefined}
+                  >
+                    {controlsLeading}
+                    <AttachButton className={attachButtonClassName} />
+                    {transcription ? (
+                      <ComposerTranscriptionControl
+                        {...transcription}
+                        suppressed={transcriptionSuppressed}
+                        className={[transcription.className, transcriptionClassName]
+                          .filter(Boolean)
+                          .join(" ")}
+                      />
+                    ) : null}
+                    {models ? (
+                      <motion.span
+                        layout
+                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                        className="inline-flex min-w-0"
+                      >
+                        <ModelPicker
+                          models={models}
+                          value={selectedModel}
+                          onChange={onSelectModel}
+                        />
+                      </motion.span>
+                    ) : null}
+                    {controlsStart ? (
+                      <motion.span
+                        layout
+                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                        className="inline-flex min-w-0 items-center gap-1.5"
+                      >
+                        {controlsStart}
+                      </motion.span>
+                    ) : null}
+                  </Controls>
+                ) : (
+                  <Hint>{hint}</Hint>
+                )}
+                <Actions
+                  className={stackActions ? "max-sm:shrink-0 sm:w-auto sm:justify-end" : undefined}
+                >
+                  {actionsStart}
+                  <PauseButton />
+                  <SendButton />
+                </Actions>
+              </LayoutGroup>
             </Footer>
           )}
         </Surface>

package/src/components/composer-transcription-control.tsx

@@ -4,11 +4,20 @@ import type {
   TranscriptionAdapter,
   WorkspaceTranscriptionPolicy,
 } from "@opengeni/sdk";
-import { LoaderCircleIcon, MicIcon, SquareIcon, XIcon } from "lucide-react";
+import {
+  ClipboardPasteIcon,
+  LoaderCircleIcon,
+  MicIcon,
+  RefreshCwIcon,
+  SquareIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState, type MouseEvent, type ReactElement } from "react";
 import { cn } from "../lib/cn";
 import { useVoiceInput } from "../hooks/use-voice-input";
+import type { VoiceRecordingStore } from "../voice-recording-store";
 import { useChatComposer } from "./composer";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
@@ -28,7 +37,12 @@ export type ComposerTranscriptionMessages = {
   retry: string;
   requestingPermission: string;
   recording: string;
+  saving: string;
   transcribing: string;
+  recovered: string;
+  recoveredTranscript: string;
+  insertRecoveredTranscript: string;
+  discardRecovered: string;
   unavailableDisabled: string;
   unavailable: string;
   errorPermissionDenied: string;
@@ -36,6 +50,9 @@ export type ComposerTranscriptionMessages = {
   errorUnavailable: string;
   errorTooLarge: string;
   errorInvalidAudio: string;
+  errorStorageUnavailable: string;
+  errorRetryable: string;
+  errorHandoffUncertain: string;
   errorUnknown: string;
 };
 
@@ -46,7 +63,12 @@ const defaultMessages: ComposerTranscriptionMessages = {
   retry: "Retry voice input",
   requestingPermission: "Requesting microphone…",
   recording: "Recording. Press Escape to cancel.",
+  saving: "Saving audio locally…",
   transcribing: "Transcribing…",
+  recovered: "Recording recovered and saved locally.",
+  recoveredTranscript: "Transcript saved locally. Check your draft before inserting.",
+  insertRecoveredTranscript: "Insert saved transcript",
+  discardRecovered: "Discard saved recording",
   unavailableDisabled: "Voice input is unavailable while the composer is disabled.",
   unavailable: "Voice input is unavailable for this workspace.",
   errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
@@ -54,6 +76,9 @@ const defaultMessages: ComposerTranscriptionMessages = {
   errorUnavailable: "Voice input is not configured.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
+  errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
+  errorRetryable: "Recording is saved locally. Retry transcription when ready.",
+  errorHandoffUncertain: "Transcript is saved. Check your draft before inserting it again.",
   errorUnknown: "Voice input could not start. Try again.",
 };
 
@@ -72,6 +97,12 @@ export type ComposerTranscriptionControlProps = {
   onDiagnostic?: unknown;
   messages?: Partial<ComposerTranscriptionMessages> | undefined;
   className?: string | undefined;
+  /** Test/embed seam. Production defaults to origin-scoped IndexedDB. */
+  createRecordingStore?: (() => VoiceRecordingStore) | undefined;
+  /** Test/embed seam. Production acquires a coordinated browser-document owner lease. */
+  createOwnerId?: (() => string) | undefined;
+  /** Hide while realtime voice owns the mic — collapses with a layout-friendly exit. */
+  suppressed?: boolean | undefined;
 };
 
 const WAVEFORM_BARS = 18;
@@ -88,6 +119,9 @@ export function ComposerTranscriptionControl({
   workspaceEnabled = false,
   messages: overrides,
   className,
+  createRecordingStore,
+  createOwnerId,
+  suppressed = false,
 }: ComposerTranscriptionControlProps) {
   const composer = useChatComposer();
   const messages = { ...defaultMessages, ...overrides };
@@ -95,20 +129,39 @@ export function ComposerTranscriptionControl({
     client,
     workspaceId,
     capability,
-    enabled: workspaceEnabled,
+    enabled: workspaceEnabled && !suppressed,
     value: composer.value,
     setValue: composer.setValue,
     focusInput: composer.focusInput,
     disabled: composer.disabled,
+    createRecordingStore,
+    createOwnerId,
   });
   const { status } = transcription;
+
+  const cancelTranscription = transcription.cancel;
+  useEffect(() => {
+    if (!suppressed) return;
+    if (status === "recording" || status === "requesting-permission") {
+      cancelTranscription();
+    }
+  }, [cancelTranscription, status, suppressed]);
   const active =
-    status === "requesting-permission" || status === "recording" || status === "transcribing";
+    status === "requesting-permission" ||
+    status === "recording" ||
+    status === "saving" ||
+    status === "transcribing";
+  const recoverable =
+    transcription.hasRecoverableRecording &&
+    (status === "recovered" || status === "transcript-ready" || status === "error");
+  const savedTranscript = status === "transcript-ready" && transcription.savedTranscript !== null;
   const unavailableMessage = composer.disabled
     ? messages.unavailableDisabled
     : !capability?.available || !workspaceEnabled
       ? messages.unavailable
-      : null;
+      : !transcription.available
+        ? messages.errorStorageUnavailable
+        : null;
   const idleLabel = unavailableMessage ?? (status === "error" ? messages.retry : messages.start);
   const errorMessage = transcription.error
     ? transcriptionErrorMessage(transcription.error, messages)
@@ -118,11 +171,17 @@ export function ComposerTranscriptionControl({
       ? messages.requestingPermission
       : status === "recording"
         ? messages.recording
-        : status === "transcribing"
-          ? messages.transcribing
-          : status === "error"
-            ? (errorMessage ?? messages.errorUnknown)
-            : unavailableMessage;
+        : status === "saving"
+          ? messages.saving
+          : status === "transcribing"
+            ? messages.transcribing
+            : status === "recovered"
+              ? messages.recovered
+              : status === "transcript-ready"
+                ? messages.recoveredTranscript
+                : status === "error"
+                  ? (errorMessage ?? messages.errorUnknown)
+                  : unavailableMessage;
 
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
@@ -133,123 +192,197 @@ export function ComposerTranscriptionControl({
   }
 
   return (
-    <span
-      className={cn("inline-flex min-w-0 items-center gap-1.5", className)}
-      data-transcription-status={status}
-    >
-      <AnimatePresence mode="popLayout" initial={false}>
-        {active ? (
-          <motion.span
-            key={status === "transcribing" ? "transcribing" : "capture"}
-            initial={{ opacity: 0, scale: 0.96 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.96 }}
-            transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
-            className={cn(
-              "inline-flex h-8 items-center gap-1 rounded-og-md border border-og-border/80",
-              "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-9",
-            )}
-          >
-            {status === "requesting-permission" ? (
-              <LoaderCircleIcon
-                className="size-3.5 shrink-0 text-og-fg-muted animate-og-spin motion-reduce:animate-none"
-                aria-hidden
-              />
-            ) : (
-              <span className="flex items-center gap-1.5">
-                {status === "recording" ? (
-                  <span
-                    aria-hidden
-                    className="size-1.5 shrink-0 rounded-full bg-og-status-failed animate-og-pulse motion-reduce:animate-none"
-                  />
-                ) : null}
-                <VoiceWaveform
-                  stream={status === "recording" ? transcription.stream : null}
-                  mode={status === "transcribing" ? "transcribing" : "recording"}
-                />
-              </span>
-            )}
-            {status === "recording" ? (
-              <>
-                <Tip tip={messages.cancel}>
-                  <button
+    <AnimatePresence initial={false}>
+      {suppressed ? null : (
+        <motion.span
+          key="composer-dictate"
+          initial={{ opacity: 0, width: 0 }}
+          animate={{ opacity: 1, width: "auto" }}
+          exit={{ opacity: 0, width: 0 }}
+          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+          className={cn("inline-flex min-w-0 overflow-hidden", className)}
+          data-transcription-status={status}
+        >
+          <span className="inline-flex min-w-0 items-center gap-1.5">
+            <AnimatePresence mode="popLayout" initial={false}>
+              {recoverable ? (
+                <motion.span
+                  key="recovered"
+                  initial={{ opacity: 0, scale: 0.96 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.96 }}
+                  transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
+                  className={cn(
+                    "inline-flex h-8 min-w-0 items-center gap-1 rounded-og-md border border-og-border/80",
+                    "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
+                  )}
+                >
+                  <span className="max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
+                    {savedTranscript
+                      ? (errorMessage ?? messages.recoveredTranscript)
+                      : status === "error"
+                        ? (errorMessage ?? messages.errorRetryable)
+                        : messages.recovered}
+                  </span>
+                  <Tip tip={savedTranscript ? messages.insertRecoveredTranscript : messages.retry}>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        savedTranscript
+                          ? void transcription.insertSavedTranscript()
+                          : transcription.retry()
+                      }
+                      aria-label={
+                        savedTranscript ? messages.insertRecoveredTranscript : messages.retry
+                      }
+                      className={cn(
+                        "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+                        "bg-og-fg text-og-bg transition-colors duration-150 motion-reduce:transition-none",
+                        "hover:bg-og-fg-muted pointer-coarse:size-11",
+                      )}
+                    >
+                      {savedTranscript ? (
+                        <ClipboardPasteIcon className="size-3.5" />
+                      ) : (
+                        <RefreshCwIcon className="size-3.5" />
+                      )}
+                    </button>
+                  </Tip>
+                  <Tip tip={messages.discardRecovered}>
+                    <button
+                      type="button"
+                      onClick={() => void transcription.discard()}
+                      aria-label={messages.discardRecovered}
+                      className={cn(
+                        "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+                        "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
+                        "hover:bg-og-surface-3 hover:text-og-status-failed pointer-coarse:size-11",
+                      )}
+                    >
+                      <Trash2Icon className="size-3.5" />
+                    </button>
+                  </Tip>
+                </motion.span>
+              ) : active ? (
+                <motion.span
+                  key={status === "transcribing" || status === "saving" ? "processing" : "capture"}
+                  initial={{ opacity: 0, scale: 0.96 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.96 }}
+                  transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
+                  className={cn(
+                    "inline-flex h-8 items-center gap-1 rounded-og-md border border-og-border/80",
+                    "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
+                  )}
+                >
+                  {status === "requesting-permission" ? (
+                    <LoaderCircleIcon
+                      className="size-3.5 shrink-0 text-og-fg-muted animate-og-spin motion-reduce:animate-none"
+                      aria-hidden
+                    />
+                  ) : (
+                    <span className="flex items-center gap-1.5">
+                      {status === "recording" ? (
+                        <span
+                          aria-hidden
+                          className="size-1.5 shrink-0 rounded-full bg-og-status-failed animate-og-pulse motion-reduce:animate-none"
+                        />
+                      ) : null}
+                      <VoiceWaveform
+                        stream={status === "recording" ? transcription.stream : null}
+                        mode={status === "recording" ? "recording" : "transcribing"}
+                      />
+                    </span>
+                  )}
+                  {status === "recording" ? (
+                    <>
+                      <Tip tip={messages.cancel}>
+                        <button
+                          type="button"
+                          onClick={() => transcription.cancel()}
+                          aria-label={messages.cancel}
+                          aria-keyshortcuts="Escape"
+                          className={cn(
+                            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+                            "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
+                            "hover:bg-og-surface-3 hover:text-og-fg pointer-coarse:size-11",
+                          )}
+                        >
+                          <XIcon className="size-3.5" />
+                        </button>
+                      </Tip>
+                      <Tip tip={messages.stop}>
+                        <button
+                          type="button"
+                          onClick={() => transcription.stop()}
+                          aria-label={messages.stop}
+                          className={cn(
+                            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+                            "bg-og-fg text-og-bg transition-colors duration-150 motion-reduce:transition-none",
+                            "hover:bg-og-fg-muted pointer-coarse:size-11",
+                          )}
+                        >
+                          <SquareIcon className="size-2.5 fill-current" />
+                        </button>
+                      </Tip>
+                    </>
+                  ) : status === "transcribing" || status === "saving" ? (
+                    <span className="og-shimmer-text px-1.5 text-og-xs font-medium whitespace-nowrap">
+                      {status === "saving" ? messages.saving : messages.transcribing}
+                    </span>
+                  ) : (
+                    <span className="px-1.5 text-og-xs text-og-fg-muted whitespace-nowrap">
+                      {messages.requestingPermission}
+                    </span>
+                  )}
+                </motion.span>
+              ) : (
+                <Tip key="idle" tip={idleLabel}>
+                  <motion.button
                     type="button"
-                    onClick={() => transcription.cancel()}
-                    aria-label={messages.cancel}
-                    aria-keyshortcuts="Escape"
+                    data-og-composer-dictate
+                    initial={{ opacity: 0, scale: 0.96 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.96 }}
+                    transition={{ duration: 0.14, ease: [0.22, 1, 0.36, 1] }}
+                    onClick={start}
+                    aria-label={idleLabel}
+                    aria-pressed={false}
+                    aria-disabled={unavailableMessage !== null}
                     className={cn(
-                      "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
+                      "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-11",
                       "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
-                      "hover:bg-og-surface-3 hover:text-og-fg pointer-coarse:size-9",
+                      unavailableMessage
+                        ? "cursor-not-allowed opacity-45"
+                        : "hover:bg-og-surface-2 hover:text-og-fg",
                     )}
                   >
-                    <XIcon className="size-3.5" />
-                  </button>
+                    <MicIcon className="size-4" />
+                  </motion.button>
                 </Tip>
-                <Tip tip={messages.stop}>
-                  <button
-                    type="button"
-                    onClick={() => transcription.stop()}
-                    aria-label={messages.stop}
-                    className={cn(
-                      "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
-                      "bg-og-fg text-og-bg transition-colors duration-150 motion-reduce:transition-none",
-                      "hover:bg-og-fg-muted pointer-coarse:size-9",
-                    )}
-                  >
-                    <SquareIcon className="size-2.5 fill-current" />
-                  </button>
-                </Tip>
-              </>
-            ) : status === "transcribing" ? (
-              <span className="og-shimmer-text px-1.5 text-og-xs font-medium whitespace-nowrap">
-                {messages.transcribing}
-              </span>
-            ) : (
-              <span className="px-1.5 text-og-xs text-og-fg-muted whitespace-nowrap">
-                {messages.requestingPermission}
-              </span>
-            )}
-          </motion.span>
-        ) : (
-          <Tip key="idle" tip={idleLabel}>
-            <motion.button
-              type="button"
-              initial={{ opacity: 0, scale: 0.96 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.96 }}
-              transition={{ duration: 0.14, ease: [0.22, 1, 0.36, 1] }}
-              onClick={start}
-              aria-label={idleLabel}
-              aria-pressed={false}
-              aria-disabled={unavailableMessage !== null}
-              className={cn(
-                "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-9",
-                "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
-                unavailableMessage
-                  ? "cursor-not-allowed opacity-45"
-                  : "hover:bg-og-surface-2 hover:text-og-fg",
               )}
+            </AnimatePresence>
+            {status === "error" && errorMessage && !recoverable ? (
+              <Tip tip={errorMessage}>
+                <span
+                  aria-hidden="true"
+                  className="max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
+                >
+                  {errorMessage}
+                </span>
+              </Tip>
+            ) : null}
+            <span
+              className="sr-only"
+              role={status === "error" ? "alert" : "status"}
+              aria-live="polite"
             >
-              <MicIcon className="size-4" />
-            </motion.button>
-          </Tip>
-        )}
-      </AnimatePresence>
-      {status === "error" && errorMessage ? (
-        <Tip tip={errorMessage}>
-          <span
-            aria-hidden="true"
-            className="max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
-          >
-            {errorMessage}
+              {announcement}
+            </span>
           </span>
-        </Tip>
-      ) : null}
-      <span className="sr-only" role={status === "error" ? "alert" : "status"} aria-live="polite">
-        {announcement}
-      </span>
-    </span>
+        </motion.span>
+      )}
+    </AnimatePresence>
   );
 }
 
@@ -364,6 +497,14 @@ function transcriptionErrorMessage(code: string, messages: ComposerTranscription
       return messages.errorTooLarge;
     case "invalid_audio":
       return messages.errorInvalidAudio;
+    case "storage_unavailable":
+      return messages.errorStorageUnavailable;
+    case "network":
+    case "provider":
+    case "timeout":
+      return messages.errorRetryable;
+    case "handoff_uncertain":
+      return messages.errorHandoffUncertain;
     case "unknown":
       return messages.errorUnknown;
     default: