@opengeni/react 0.42.1 → 0.44.1

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

@@ -101,6 +101,8 @@ export type ComposerTranscriptionControlProps = {
   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;
@@ -119,6 +121,7 @@ export function ComposerTranscriptionControl({
   className,
   createRecordingStore,
   createOwnerId,
+  suppressed = false,
 }: ComposerTranscriptionControlProps) {
   const composer = useChatComposer();
   const messages = { ...defaultMessages, ...overrides };
@@ -126,7 +129,7 @@ export function ComposerTranscriptionControl({
     client,
     workspaceId,
     capability,
-    enabled: workspaceEnabled,
+    enabled: workspaceEnabled && !suppressed,
     value: composer.value,
     setValue: composer.setValue,
     focusInput: composer.focusInput,
@@ -135,6 +138,14 @@ export function ComposerTranscriptionControl({
     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" ||
@@ -181,179 +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}>
-        {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
+    <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-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",
+                      unavailableMessage
+                        ? "cursor-not-allowed opacity-45"
+                        : "hover:bg-og-surface-2 hover:text-og-fg",
                     )}
                   >
-                    <SquareIcon className="size-2.5 fill-current" />
-                  </button>
+                    <MicIcon className="size-4" />
+                  </motion.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"
-              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-11",
-                "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 && !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}
+              {announcement}
+            </span>
           </span>
-        </Tip>
-      ) : null}
-      <span className="sr-only" role={status === "error" ? "alert" : "status"} aria-live="polite">
-        {announcement}
-      </span>
-    </span>
+        </motion.span>
+      )}
+    </AnimatePresence>
   );
 }
 

package/src/components/composer.tsx

@@ -241,25 +241,84 @@ export type UseChatComposerControllerOptions = {
 };
 
 /**
- * Autosize a composer textarea up to `maxPx` without the classic height→0
- * measure collapse (that flash expands the timeline flex sibling and yanks
- * tip-follow while a stream is pinned).
+ * Off-document mirror for shrink/steady measure. Measuring with
+ * `height: auto` on the live `rows={1}` textarea collapses it for a layout
+ * frame, expands the flex timeline sibling, and yanks tip-follow — the
+ * multi-line typing flicker that stops only once the box is capped.
+ */
+let composerHeightMirror: HTMLTextAreaElement | null = null;
+
+function measureComposerContentHeight(textarea: HTMLTextAreaElement): number {
+  if (typeof document === "undefined") {
+    return textarea.scrollHeight;
+  }
+  const width = textarea.clientWidth;
+  if (width <= 0) {
+    return textarea.offsetHeight;
+  }
+
+  let mirror = composerHeightMirror;
+  if (!mirror) {
+    mirror = document.createElement("textarea");
+    mirror.setAttribute("aria-hidden", "true");
+    mirror.tabIndex = -1;
+    mirror.rows = 1;
+    mirror.style.cssText =
+      "position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
+    composerHeightMirror = mirror;
+  }
+
+  const style = getComputedStyle(textarea);
+  mirror.style.width = `${width}px`;
+  mirror.style.boxSizing = style.boxSizing;
+  mirror.style.font = style.font;
+  mirror.style.fontSize = style.fontSize;
+  mirror.style.fontFamily = style.fontFamily;
+  mirror.style.fontWeight = style.fontWeight;
+  mirror.style.fontStyle = style.fontStyle;
+  mirror.style.letterSpacing = style.letterSpacing;
+  mirror.style.lineHeight = style.lineHeight;
+  mirror.style.textTransform = style.textTransform;
+  mirror.style.paddingTop = style.paddingTop;
+  mirror.style.paddingRight = style.paddingRight;
+  mirror.style.paddingBottom = style.paddingBottom;
+  mirror.style.paddingLeft = style.paddingLeft;
+  mirror.style.borderTopWidth = style.borderTopWidth;
+  mirror.style.borderRightWidth = style.borderRightWidth;
+  mirror.style.borderBottomWidth = style.borderBottomWidth;
+  mirror.style.borderLeftWidth = style.borderLeftWidth;
+  mirror.style.borderStyle = style.borderStyle;
+  mirror.style.whiteSpace = style.whiteSpace;
+  mirror.style.wordBreak = style.wordBreak;
+  mirror.style.overflowWrap = style.overflowWrap;
+  mirror.value = textarea.value;
+
+  if (!mirror.isConnected) {
+    document.documentElement.appendChild(mirror);
+  }
+  return mirror.scrollHeight;
+}
+
+/**
+ * Autosize a composer textarea up to `maxPx`. Never writes intermediate
+ * `height: auto` / `0` on the live element — only the final pixel height.
+ *
+ * `measure` is injectable for unit tests; production always uses the off-DOM
+ * mirror so shrink/steady never collapses the laid-out box.
  */
 export function applyComposerTextareaHeight(
   textarea: HTMLTextAreaElement,
   maxPx: number = 220,
+  measure: (el: HTMLTextAreaElement) => number = measureComposerContentHeight,
 ): void {
-  // Grow path: content already overflows — raise height, no measure collapse.
-  if (textarea.scrollHeight > textarea.clientHeight + 1) {
-    textarea.style.height = `${Math.min(textarea.scrollHeight, maxPx)}px`;
-    return;
-  }
-  // Shrink / steady: `auto` measures natural height without flashing empty.
   const before = textarea.offsetHeight;
-  textarea.style.height = "auto";
-  const nextPx = Math.min(textarea.scrollHeight, maxPx);
+  // Overflow: content taller than the box — scrollHeight is the needed size.
+  // Fit/shrink: content fits (or box is oversized) — measure off-DOM.
+  const nextPx = Math.min(
+    textarea.scrollHeight > textarea.clientHeight + 1 ? textarea.scrollHeight : measure(textarea),
+    maxPx,
+  );
   if (Math.abs(nextPx - before) < 1) {
-    textarea.style.height = `${before}px`;
     return;
   }
   textarea.style.height = `${nextPx}px`;
@@ -934,7 +993,8 @@ export const Footer = forwardRef<HTMLDivElement, ComposerFooterProps>(function C
       ref={ref}
       className={cn(
         "flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
-        "max-sm:items-center max-sm:gap-1",
+        // Mobile: one control row — never wrap into a second toolbar line.
+        "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
         className,
       )}
     />
@@ -987,7 +1047,11 @@ export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(functio
     <span
       {...props}
       ref={ref}
-      className={cn("ml-auto flex shrink-0 items-center gap-1.5", className)}
+      className={cn(
+        "ml-auto flex shrink-0 items-center gap-1.5",
+        "max-sm:flex-nowrap max-sm:gap-1",
+        className,
+      )}
     />
   );
 });

package/src/components/model-policy-picker.tsx

@@ -545,7 +545,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "inline-flex h-8 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[9rem] max-sm:px-2",
+            "inline-flex h-8 min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[7.5rem] max-sm:px-2",
             props.className,
           )}
         >
@@ -556,7 +556,12 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             }
             className="text-og-fg"
           />
-          <span className="truncate font-medium text-og-fg">{selected?.label ?? props.model}</span>
+          <span className="min-w-0 truncate font-medium text-og-fg max-sm:hidden">
+            {selected?.label ?? props.model}
+          </span>
+          <span className="min-w-0 truncate font-medium text-og-fg sm:hidden">
+            {selected?.shortLabel ?? selected?.label ?? props.model}
+          </span>
           <span className="max-sm:hidden">{labelReasoningEffort(props.effort)}</span>
           {props.latencyMode === "fast" ? (
             <ZapIcon