@burdenoff/fe-libs 2026.1013.8 → 2026.1013.10

package/dist/shared/assistant/ui/assistantLiveAvatarSeam.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, FC, ReactNode } from 'react';
 import { SpeechEngine } from '../speech/types';
+import { VoiceView } from './voice/AssistantVoiceSession';
 export interface LiveAvatarStageProps {
     /** Full-screen (true) or the in-panel stage (false). */
     expanded: boolean;
@@ -11,6 +12,42 @@ export interface AssistantLiveAvatarSeam {
     decorateSpeechEngine: (base: SpeechEngine) => SpeechEngine;
     /** Drawn by the voice stage instead of the waveform. Optional. */
     Stage?: ComponentType<LiveAvatarStageProps>;
+    /**
+     * The avatar's ON switch. Optional. It is SHOWN only when `Stage` is given,
+     * since without a stage there is nothing to show; told when a voice
+     * conversation is live, and switched OFF at the end of every one, either way.
+     */
+    enabled?: LiveAvatarEnabledStore;
+}
+/**
+ * The avatar's ON flag as a store, read with `useSyncExternalStore`: the voice
+ * session subscribes and nothing above it re-renders. It must be STABLE, and
+ * the flag it reads must be session-only, never persisted (the avatar
+ * preferences' `avatarEnabled`), so every page load starts OFF.
+ *
+ * ★★ ON is only ever the person's own click, on a control the host offers
+ * only while `voiceLive` says a voice conversation is live, and a paid session
+ * starts only then: no avatar after its conversation has ended. The panel
+ * switches the avatar OFF, never ON.
+ */
+export interface LiveAvatarEnabledStore {
+    subscribe: (onChange: () => void) => () => void;
+    getSnapshot: () => boolean;
+    /**
+     * Switch the avatar OFF with the SAME action the host's own Avatar control
+     * takes, so its paid session ends along the one path the host already has.
+     * Called at the end of EVERY voice conversation, even when the avatar is
+     * already OFF; again for any ON while a failed one is still on screen; and
+     * by the compact view's stop. So it must be idempotent and cheap. It touches
+     * no audio: a reply already playing is the speech engine's to finish.
+     */
+    switchOff: () => void;
+    /**
+     * Told `true` once a voice conversation is live and `false` when it is over
+     * (just before that end's `switchOff`). Outside that window the host offers
+     * no ON control and starts no paid session. Idempotent, as `switchOff`.
+     */
+    voiceLive: (live: boolean) => void;
 }
 export declare const LiveAvatarSeamProvider: FC<{
     value?: AssistantLiveAvatarSeam;
@@ -26,3 +63,83 @@ export declare function useLiveAvatarStage(): ComponentType<LiveAvatarStageProps
  * is to the store `AssistantSpeechProvider` already subscribes to.
  */
 export declare function useLiveAvatarSpeechEngine(seam: AssistantLiveAvatarSeam | undefined): SpeechEngine | undefined;
+/**
+ * The voice view to SHOW, given the one the user CHOSE; and the avatar kept to
+ * the live conversation (`ended`: over, but still on screen to say why it
+ * failed; leaving the screen ends it too).
+ *
+ * ★★ Switching the avatar ON must show it, and every session opens in the
+ * compact view (`mini`), which draws no stage. So while the avatar is ON, a
+ * session the user left compact shows the in-panel stage: the same session,
+ * re-rendered with the stage the size button already leads to, so nothing above
+ * the stage remounts. Switched OFF, it shows their choice again.
+ *
+ * ★★ The user's choice is never written, and nothing is stored: the next session
+ * opens compact as before, with the avatar OFF.
+ *
+ * ★ The moment they choose a view themselves while it is held (the size button,
+ * the change chip, an attachment), that view is theirs and stays when the
+ * avatar goes off. A conversation that is over lets go at once too: its
+ * failure is explained in the user's view, not first on a stage going away.
+ *
+ * ★ Adjusted DURING RENDER, as `AIAssistantPanel` adjusts its preview flag: no
+ * frame shows the stale view, and the update is conditional on the state it
+ * replaces, so it cannot loop.
+ */
+export declare function useLiveAvatarVoiceView(chosen: VoiceView, ended: boolean): VoiceView;
+/**
+ * @internal Exported for `VoiceMiniController` alone; not part of the module's
+ * public surface (the assistant barrel star-exports this module).
+ *
+ * Whether the compact strip shows `LiveAvatarMiniIndicator`: an avatar that is
+ * ON and can be shown. `VoiceMiniController` keeps its bottom band for the
+ * chip then, and ONLY then; false, it adds nothing and is the strip it was.
+ */
+export declare function useLiveAvatarMiniIndicatorShown(): boolean;
+/**
+ * The compact strip's sign that a live avatar is ON, with its stop.
+ *
+ * ★★ The strip draws no stage, so a person who chose it while the avatar is on
+ * would not see that a session, billed by the minute, is still running.
+ * Without an avatar that is ON and can be shown it renders nothing, and the
+ * strip is byte for byte what it was.
+ *
+ * ★★ Stop switches the AVATAR off through `switchOff`, the action the host's
+ * own Avatar control takes, called with NO arguments (its contract is
+ * `() => void`, so a host's own optional parameter never receives the click
+ * event). It never ends the voice conversation and never touches audio: the
+ * speech engine stays the only speaker. Focus on it goes to the session's
+ * microphone control (End while that is disabled), never to <body>, whoever
+ * switched the avatar off; to End when the chip goes with its strip.
+ *
+ * ★★ It handles no keys: Escape and Tab stay the session's (BOFF-8065). It
+ * comes after the microphone control, so Tab meets the strip's own control
+ * first.
+ *
+ * ★ "Avatar on" is a state, not a label. The control is an icon named by
+ * `avatar.stop`, so no button is named for the opposite of what it does, and
+ * its name is all of its words (WCAG 2.5.3, as the session's End).
+ *
+ * ★★ In the strip's bottom band, which the strip keeps free while this shows
+ * (`VoiceMiniController`: its caption column stops above the band, and shows
+ * fewer caption lines when two notices leave no room for three), so nothing
+ * on the strip overlaps it. Positioned against the voice session as its
+ * corner controls are, under the caption column: the session's `px-3` plus the
+ * strip's `px-4`, physical `left-*` as `VoiceStatusLine` explains, mirrored
+ * under `rtl:` so it never sits under the microphone. Its padding is logical
+ * (`ps-*`/`pe-*`, as `AssistantUiOfferLink`'s), so the label keeps 10px from
+ * the rounded start and the stop 2px from the end in RTL too. No wider than
+ * that column plus 6px of the gap after it (`max-w-*`: 100% less 3.5rem of
+ * paddings, the 0.75rem gap and the microphone's 10rem `w-40`, plus 0.375rem),
+ * so its stop's target (below) ends at least 6px before the microphone, in
+ * either direction, however long a translation of "Avatar on" is.
+ *
+ * ★ As tall as End in the strip (`h-8`), its stop drawn at 28px; the stop's
+ * TARGET is 44px square (`after:-inset-2`, WCAG 2.5.5), and `bottom-1.5` ends
+ * that target at the strip's own edge. It keeps a logical margin of 6px at its
+ * end (`after:me-1.5`), taken back at its start (`after:-ms-1.5`) so it stays
+ * 44px: it ends 2px past the drawn stop, short of the chip's edge, so a tap at
+ * the microphone's edge never lands on the stop. Logical, as the padding: it
+ * mirrors in RTL.
+ */
+export declare const LiveAvatarMiniIndicator: FC;

package/dist/shared/assistant/ui/assistantLiveAvatarSeam.js

@@ -1,17 +1,105 @@
 import { getSpeechEngine as e, subscribeSpeechEngine as t } from "../speech/createSpeechEngine.js";
-import { createContext as n, useContext as r, useMemo as i, useSyncExternalStore as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { useAvatarCopy as n } from "../avatar/useAvatarCopy.js";
+import { ASSISTANT_VOICE_SESSION_ATTR as r } from "./panelOverlays.js";
+import { createContext as i, useContext as a, useEffect as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
+import { VideoOff as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/shared/assistant/ui/assistantLiveAvatarSeam.tsx
-var s = n(null), c = ({ value: e, children: t }) => /* @__PURE__ */ o(s.Provider, {
+var h = i(null), g = ({ value: e, children: t }) => /* @__PURE__ */ p(h.Provider, {
 	value: e ?? null,
 	children: t
 });
-function l() {
-	return r(s)?.Stage ?? null;
+function _() {
+	return a(h)?.Stage ?? null;
 }
-function u(n) {
-	let r = a(t, e, e), o = n?.decorateSpeechEngine;
-	return i(() => o ? o(r) : void 0, [o, r]);
+function v(n) {
+	let r = d(t, e, e), i = n?.decorateSpeechEngine;
+	return c(() => i ? i(r) : void 0, [i, r]);
 }
+var y = {
+	subscribe: () => () => {},
+	getSnapshot: () => !1,
+	switchOff: () => {},
+	voiceLive: () => {}
+};
+function b(e) {
+	return e?.Stage ? e.enabled : void 0;
+}
+function x(e) {
+	let t = e ?? y;
+	return d(t.subscribe, t.getSnapshot, t.getSnapshot);
+}
+function S(e, t) {
+	let n = a(h);
+	C(n?.enabled, t);
+	let r = b(n), i = x(r), [o, s] = u(() => ({
+		on: i,
+		chosen: e,
+		open: i && e === "mini"
+	}));
+	if (!r) return e;
+	let c = o.open;
+	return (o.on !== i || o.chosen !== e) && (c = o.on !== i && i && e === "mini", s({
+		on: i,
+		chosen: e,
+		open: c
+	})), c && !t ? "panel" : e;
+}
+function C(e, t) {
+	let n = l(0);
+	o(() => {
+		if (!e) return;
+		let r = ++n.current, i = (e) => queueMicrotask(() => {
+			n.current === r && e();
+		}), a = () => i(() => {
+			e.voiceLive(!1), e.switchOff();
+		});
+		if (!t) return i(() => e.voiceLive(!0)), a;
+		a();
+		let o = e.getSnapshot();
+		return e.subscribe(() => {
+			let t = o;
+			o = e.getSnapshot(), o && !t && i(() => e.switchOff());
+		});
+	}, [e, t]);
+}
+function w() {
+	return x(b(a(h)));
+}
+var T = () => {
+	let e = b(a(h)), t = x(e);
+	return e && t ? /* @__PURE__ */ p(O, {
+		onStop: e.switchOff,
+		isOn: e.getSnapshot
+	}) : null;
+}, E = "[data-testid=\"assistant-voice-orb\"]", D = "[data-testid=\"assistant-voice-end\"]", O = ({ onStop: e, isOn: t }) => {
+	let i = n(), a = l(null), o = l(t);
+	return s(() => {
+		let e = a.current, t = o.current;
+		return () => {
+			if (!e?.contains(e.ownerDocument.activeElement)) return;
+			let n = e.closest(`[${r}]`), i = t() ? null : n?.querySelector(E);
+			(i && !i.hasAttribute("disabled") ? i : n?.querySelector(D))?.focus();
+		};
+	}, []), /* @__PURE__ */ m("div", {
+		ref: a,
+		className: "absolute bottom-1.5 left-7 flex h-8 max-w-[calc(100%-13.875rem)] items-center gap-1 rounded-full border border-border-default bg-bg-elevated ps-2.5 pe-0.5 text-xs font-medium text-text-secondary rtl:left-auto rtl:right-7",
+		"data-testid": "assistant-voice-avatar",
+		children: [/* @__PURE__ */ p("span", {
+			className: "truncate",
+			children: i.stateOn
+		}), /* @__PURE__ */ p("button", {
+			type: "button",
+			onClick: () => e(),
+			className: "relative flex size-7 shrink-0 items-center justify-center rounded-full transition-colors after:absolute after:-inset-2 after:-ms-1.5 after:me-1.5 hover:bg-bg-raised hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
+			"aria-label": i.stop,
+			"data-testid": "assistant-voice-avatar-stop",
+			children: /* @__PURE__ */ p(f, {
+				className: "size-4",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+};
 //#endregion
-export { c as LiveAvatarSeamProvider, u as useLiveAvatarSpeechEngine, l as useLiveAvatarStage };
+export { T as LiveAvatarMiniIndicator, g as LiveAvatarSeamProvider, w as useLiveAvatarMiniIndicatorShown, v as useLiveAvatarSpeechEngine, _ as useLiveAvatarStage, S as useLiveAvatarVoiceView };