@voqalize/avatar 0.2.1 → 0.3.0

package/client/dist/useAvatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAkB,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA+BjD,MAAM,UAAU,SAAS,CAAC,UAA4B,EAAE;IACtD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAE1D,4EAA4E;IAC5E,qCAAqC;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,MAAM,QAAQ,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QAC5E,eAAe,CAAC,OAAO,GAAG,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC;QACrD,SAAS,CAAC,QAAQ,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;QACF,sEAAsE;QACtE,yEAAyE;QACzE,0EAA0E;QAC1E,wDAAwD;QACxD,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC;QACxC,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa;YAAE,OAAO;QACvC,OAAO,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,uEAAuE;QACvE,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;AAClC,CAAC"}

package/client/src/Avatar.tsx

@@ -1,33 +0,0 @@
-/**
- * Avatar — a call-tile-ready wrapper around the widget, and the package's
- * whole public surface.
- *
- *     <Avatar client={session.client} className="avatar-tile" />
- *
- * Two props of its own; everything else is forwarded to the mount `<div>`, so
- * it sizes and styles like the tile it lives in. There is nothing to configure
- * because there is nothing the server does not already say: the
- * `AvatarProcessor` in the pipeline drives the state, the gaze and the mouth.
- *
- * The widget has no hot-swap-avatar API — `createFace` runs once per mount —
- * so `avatar` is read once, at mount. To switch faces at runtime, remount with
- * a `key` prop:
- *
- *     <Avatar key={name} avatar={name} client={session.client} />
- */
-
-import type { HTMLAttributes } from "react";
-import type { PipecatClient } from "@pipecat-ai/client-js";
-import { useAvatar } from "./useAvatar.js";
-
-export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
-  /** The live `PipecatClient`, or `null` before connect. */
-  client?: PipecatClient | null;
-  /** Which face. Omit for the default. Read at mount only — see above. */
-  avatar?: string;
-}
-
-export function Avatar({ client, avatar, ...rest }: AvatarProps) {
-  const { containerRef } = useAvatar({ client, avatar });
-  return <div role="img" aria-label="avatar" {...rest} ref={containerRef} />;
-}

package/client/src/AvatarClient.ts

@@ -1,270 +0,0 @@
-/**
- * AvatarClient — the avatar's server-message dispatcher, turn clock, and cue
- * splice, framework-free (no React; the hook and component wrap this).
- *
- * ## Turn clock anchoring
- *
- * A turn's `t0` is anchored to `performance.now()` **at the moment this client
- * receives the `{cmd:"speech", event:"start"}` message** — cues are
- * client-anchored, not per-cue server-released. That message rides the RTVI
- * data channel, ahead of the jitter-buffered audio path, so the residual error
- * lands on the video-leads side — the side `docs/contract-protocol.md` says
- * perceptual tolerance favours (+125 ms vs -45 ms).
- *
- * We investigated anchoring on pipecat client-js's own `RTVIEvent
- * .BotStartedSpeaking`/`BotStoppedSpeaking` instead (or as a refinement) and
- * chose not to, for two reasons:
- *
- *   1. **No turn correlation.** Those events carry no payload — no `ctx` — so
- *      there is no way to tell which turn a firing belongs to. Our own
- *      `speech` command carries `ctx`, which the splice logic below needs
- *      regardless, so anchoring off it costs nothing extra.
- *   2. **Same source, same path, no accuracy gain.** The `AvatarProcessor`
- *      sits between the TTS service and the output transport and observes the
- *      transport's own `BotStarted/StoppedSpeakingFrame` broadcasts — the exact
- *      frame pipecat's built-in speaking detection is *also* driven from. Both
- *      notifications travel the same data-channel path to the browser. There is
- *      no local "truly audible now" signal cheaply available: the audio arrives
- *      on a `MediaStreamTrack` whose only lifecycle events (`unmute`/`mute`)
- *      fire once per call, not per utterance. Tapping the decoded remote audio
- *      with a WebAudio `AnalyserNode` RMS gate *would* give one, but it adds
- *      its own onset latency and a real audio pipeline to build and tune, and
- *      it would eat into the intentional video-first safety margin rather than
- *      improve it. Left as a documented option, not built.
- *
- * `attach()` therefore subscribes to exactly one pipecat event,
- * `serverMessage`. It used to also subscribe to both speaking events to report
- * a diagnostic drift between our anchor and pipecat's; that hook is gone with
- * the rest of the observability surface (`docs/removed.md` § Client callbacks).
- *
- * ## Cue splice
- *
- * The widget has two cue-track primitives: `speak({cues, clock})` (a full
- * replace) and `pushCues(cues)` (a pure union that can only grow the track,
- * never shrink it). Neither is "discard queued cues at or after `from_ms`,
- * then append" on its own — `pushCues` has no way to drop a stale tail. So
- * this client keeps the turn's canonical cue array itself (kept portion +
- * every appended chunk, spliced on each `cues` message) and picks the cheapest
- * widget call that stays correct:
- *
- *   - if the splice's `from_ms` doesn't reach back into anything already
- *     queued — the common case past a turn's first sentence, since only the
- *     first sentence genuinely plays fast-leg cues — nothing needs discarding:
- *     `pushCues(newCues)` is the cheap, correct append.
- *   - if it does reach back (a real fast→accurate splice), `pushCues` cannot
- *     express the discard; we call `speak()` again with the full spliced
- *     canonical array on the turn's original clock. `speak()` is otherwise
- *     documented as also killing an in-flight spoken interjection and
- *     re-entering `SPEAKING` — both harmless mid-splice (an interjection
- *     should not be running while a server track owns the mouth; re-entering
- *     an unchanged state is a no-op past the profile/gaze reset the widget
- *     already does for a same-name `setState`).
- *
- * Cues commonly arrive **before** `speech start` — the fast leg starts the
- * moment a sentence is handed to TTS, well before `BotStartedSpeakingFrame`.
- * Chunks that arrive before the clock is anchored are spliced into the
- * canonical array but not yet handed to the widget; `speech start` hands over
- * whatever has accumulated as the turn's first `speak()` call. So "the first
- * chunk of a turn starts speak()" means the first *widget* call, not
- * necessarily the first *message*.
- */
-
-import type { PipecatClient, RTVIEvent } from "@pipecat-ai/client-js";
-import type { AvatarApi } from "../../src/avatar.js";
-import {
-  isAvatarMessage,
-  type AvatarCommand,
-  type AvatarCue,
-  type AvatarCuesCmd,
-  type AvatarSpeechCmd,
-  type AvatarStateCmd,
-} from "./types.js";
-
-
-interface Turn {
-  ctx: string;
-  /** The canonical, already-spliced cue track for this turn. */
-  cues: AvatarCue[];
-  /** Whether `speech start` has anchored a clock and issued the first `speak()`. */
-  started: boolean;
-  clock: (() => number) | null;
-}
-
-/**
- * Internal. Not exported from the package — see `index.ts` for the public
- * surface, which is `<Avatar>` and nothing else.
- *
- * There is deliberately no `accept` predicate here any more. Avatar commands
- * travel in one envelope, `{type:"avatar"}`, in both directions and from every
- * source: a `AvatarProcessor` in the pipeline and a brain driving the face
- * out of band emit the same shape. A per-deployment predicate meant the
- * library could not state what an avatar message *is*, which is the one thing
- * a wire format has to be able to say. See docs/removed.md § The accept
- * predicate.
- */
-export interface AvatarClientOptions {
-  /** A dispatch threw (e.g. an unknown state or interjection id, which the
-   * widget throws on). Defaults to `console.warn`. */
-  onError?: (err: unknown, msg: AvatarCommand) => void;
-  /** Override for tests. Defaults to `performance.now`. */
-  now?: () => number;
-}
-
-/**
- * The one `RTVIEvent` member `attach()` subscribes to, spelled as its value.
- *
- * Written out rather than imported because that enum was this module's *only*
- * runtime reference to `@pipecat-ai/client-js`, and one runtime reference makes
- * the whole `/pipecat` subpath fail to load without the peer installed — even
- * for a host that drives `dispatch()` from its own transport and never calls
- * `attach()`. The peer is declared optional; this is what makes that true
- * rather than aspirational.
- *
- * String enums are nominal in TypeScript, so the compiler cannot check these
- * against the real ones from a type-only import. `client/test/AvatarClient.test.ts`
- * does it instead, against the actual enum — the devDependency is present
- * exactly where the check belongs and absent from what we ship.
- */
-export const RTVI_EVENTS = {
-  serverMessage: "serverMessage",
-} as const satisfies Record<string, string>;
-
-/** Defensive unwrap for the `RTVIEvent.ServerMessage` `{ data }` quirk: some
- * transports deliver the payload directly and some wrap it once more. */
-function unwrapServerMessage(raw: unknown): Record<string, unknown> {
-  const obj = (raw ?? {}) as Record<string, unknown>;
-  const inner = obj["data"] as Record<string, unknown> | undefined;
-  return inner && "type" in inner ? inner : obj;
-}
-
-export class AvatarClient {
-  private readonly avatar: AvatarApi;
-  private readonly opts: AvatarClientOptions;
-  private readonly now: () => number;
-  private turn: Turn | null = null;
-
-  constructor(avatar: AvatarApi, opts: AvatarClientOptions = {}) {
-    this.avatar = avatar;
-    this.opts = opts;
-    this.now = opts.now ?? (() => performance.now());
-  }
-
-  /** The active turn's ctx, or `null` between turns. For tests and telemetry. */
-  get turnCtx(): string | null {
-    return this.turn?.ctx ?? null;
-  }
-
-  /** The active turn's canonical (already-spliced) cue track. For tests and telemetry. */
-  get turnCues(): AvatarCue[] {
-    return this.turn ? [...this.turn.cues] : [];
-  }
-
-  /** Dispatch one server message. Anything that isn't in the avatar envelope
-   * is not ours and is ignored; so is an envelope carrying a `cmd` this build
-   * has never heard of, per the wire protocol's forward-compat rule. */
-  dispatch(raw: unknown): void {
-    if (!isAvatarMessage(raw)) return;
-    const msg: AvatarCommand = raw;
-    try {
-      switch (msg.cmd) {
-        case "state":
-          this.handleState(msg);
-          break;
-        case "interject":
-          this.avatar.interject(msg.id);
-          break;
-        case "gesture":
-          this.avatar.gesture(msg.id);
-          break;
-        case "cues":
-          this.handleCues(msg);
-          break;
-        case "speech":
-          this.handleSpeech(msg);
-          break;
-        case "user":
-          this.avatar.setUserSpeaking(msg.speaking);
-          break;
-        // No default: an unknown `cmd` is a newer server talking to an older
-        // widget, and the protocol's forward-compat rule says ignore it. There
-        // is no callback for it — a hook nobody could act on is observability,
-        // not an interface (`docs/removed.md` § Client callbacks).
-      }
-    } catch (err) {
-      if (this.opts.onError) this.opts.onError(err, msg);
-      else console.warn("[avatar] dispatch failed", msg, err);
-    }
-  }
-
-  private handleState(msg: AvatarStateCmd) {
-    // Deliberately no client-side dedup: pass every `state` command straight
-    // through. The widget's own setState already no-ops the parts that matter
-    // for an unchanged name (`changed` gates the blink and the 'state' event in
-    // avatar.js), and a server resending the same state name as a
-    // keepalive/resync must still land so an `emotion`/`gaze` override on this
-    // particular message takes effect.
-    this.avatar.setState(msg.name, { emotion: msg.emotion, gaze: msg.gaze });
-  }
-
-  private ensureTurn(ctx: string): Turn {
-    if (!this.turn || this.turn.ctx !== ctx) {
-      // A different ctx supersedes whatever turn we had — a stale trailing
-      // message for the old ctx will find `this.turn.ctx !== ctx` in
-      // handleSpeech's stop-guard and be ignored, rather than cutting off the
-      // new turn.
-      this.turn = { ctx, cues: [], started: false, clock: null };
-    }
-    return this.turn;
-  }
-
-  private handleCues(msg: AvatarCuesCmd) {
-    const turn = this.ensureTurn(msg.ctx);
-    const kept = turn.cues.filter((c) => c.t < msg.from_ms);
-    const discarded = turn.cues.length - kept.length;
-    turn.cues = [...kept, ...msg.cues].sort((a, b) => a.t - b.t);
-
-    if (!turn.started) {
-      // No clock yet — buffer. `speech start` will hand this over as the turn's
-      // first speak() call.
-      return;
-    }
-    if (discarded === 0) {
-      this.avatar.pushCues(msg.cues);
-    } else {
-      this.avatar.speak({ cues: turn.cues, clock: turn.clock! });
-    }
-  }
-
-  private handleSpeech(msg: AvatarSpeechCmd) {
-    if (msg.event === "start") {
-      const turn = this.ensureTurn(msg.ctx);
-      const t0 = this.now();
-      const clock = () => this.now() - t0;
-      turn.clock = clock;
-      turn.started = true;
-      this.avatar.speak({ cues: turn.cues, clock });
-      return;
-    }
-    // "stop": only act if it names the turn we're actually riding. A stale stop
-    // for an already-superseded ctx must not cut off a newer turn.
-    if (this.turn && this.turn.ctx === msg.ctx) {
-      this.avatar.stopSpeaking();
-      this.turn = null;
-    }
-  }
-
-  /**
-   * Subscribe to a live `PipecatClient`'s server messages and dispatch the
-   * avatar commands among them — the ones in the protocol's own
-   * `{type:"avatar"}` envelope, which `isAvatarMessage` is the definition of.
-   * Never throws on a malformed or irrelevant message.
-   *
-   * @returns an unsubscribe function; call it on unmount or disconnect.
-   */
-  attach(client: PipecatClient): () => void {
-    const onServerMessage = (raw: unknown) => this.dispatch(unwrapServerMessage(raw));
-    const serverMessage = RTVI_EVENTS.serverMessage as RTVIEvent;
-    client.on(serverMessage, onServerMessage);
-    return () => client.off(serverMessage, onServerMessage);
-  }
-}

package/client/src/index.ts

@@ -1,22 +0,0 @@
-/**
- * `@voqalize/avatar` — the avatar as one React component.
- *
- *     import { Avatar } from "@voqalize/avatar";
- *
- *     <Avatar client={pipecatClient} className="avatar-tile" />
- *
- * That is the whole public surface. Put an `AvatarProcessor` in the pipecat
- * pipeline (`pip install voqalize-avatar`), drop this component into the bot's
- * tile, and the face listens, thinks, claims the floor and lipsyncs what the
- * TTS says.
- *
- * The widget underneath is framework-free, and the dispatcher between it and
- * the RTVI data channel is plain TypeScript — but neither is exported. Two
- * consumers wanted a call tile, both are React, and a public API is a promise
- * we have to keep across versions. `docs/removed.md` lists what used to be
- * here and how to get it back if a real third case argues for it.
- *
- * Peers: `react >= 18` and `@pipecat-ai/client-js`.
- */
-
-export { Avatar, type AvatarProps } from "./Avatar.js";

package/client/src/types.ts

@@ -1,104 +0,0 @@
-/**
- * types.ts — the avatar wire vocabulary, client side.
- *
- * The binding definition is `docs/contract-protocol.md`; this file is its
- * TypeScript restatement and must not drift from it. The Python half of the
- * same vocabulary is `py/src/voqalize_avatar/messages.py` — the three are
- * maintained together, and a command added to one without the others is
- * incomplete.
- *
- * A server pushes these as RTVI `server-message`s under the envelope
- * `{ type: "avatar", ...cmd-specific fields }`. {@link AvatarCommand} describes
- * what rides inside that envelope; {@link isAvatarMessage} is the envelope
- * itself, and is the only definition of "this message is for the avatar" the
- * client has. There is no protocol version field — see `docs/removed.md`
- * § The `v` field.
- */
-
-/** A viseme cue: `t` is a ms offset into the utterance's clock, `v` is a Rhubarb A–H (or X) letter. */
-export interface AvatarCue {
-  t: number;
-  v: string;
-  i?: number;
-}
-
-export interface AvatarStateCmd {
-  cmd: "state";
-  name: string;
-  emotion?: string;
-  gaze?: string;
-}
-
-export interface AvatarInterjectCmd {
-  cmd: "interject";
-  id: string;
-}
-
-/**
- * A hand gesture — the hand at the frame edge plus its face half. Separate from
- * `interject` on purpose: `interject("WAVE")` is the face alone and always was,
- * so a server that upgrades gets no hand until it asks for one.
- */
-export interface AvatarGestureCmd {
-  cmd: "gesture";
-  id: string;
-}
-
-export interface AvatarCuesCmd {
-  cmd: "cues";
-  ctx: string;
-  /** Discard queued cues at or after this offset (ms), then append `cues`. */
-  from_ms: number;
-  cues: AvatarCue[];
-  /**
-   * True on the one chunk that completes this turn's track: the TTS context is
-   * closed, so no further chunk will splice into `ctx`. What a client may
-   * assume, exactly — nothing about playout. The audio it describes is still
-   * ahead, and `speech stop` remains the end of the turn. It is safe to release
-   * per-turn cue state (the splice buffer for `ctx`) once the last cue has
-   * played, and safe to stop expecting more.
-   *
-   * Absent on an interrupted turn, deliberately: a turn that was cut never
-   * claims to have completed. Absent chunks are the normal case — the widget's
-   * own track already completes on the trailing `X`, so ignoring `final`
-   * entirely is a correct implementation.
-   */
-  final?: boolean;
-}
-
-export interface AvatarSpeechCmd {
-  cmd: "speech";
-  event: "start" | "stop";
-  ctx: string;
-}
-
-export interface AvatarUserCmd {
-  cmd: "user";
-  speaking: boolean;
-}
-
-export type AvatarCommand =
-  | AvatarStateCmd
-  | AvatarInterjectCmd
-  | AvatarGestureCmd
-  | AvatarCuesCmd
-  | AvatarSpeechCmd
-  | AvatarUserCmd;
-
-/** The full server-message payload: the envelope plus its command. */
-export type AvatarServerMessage = AvatarCommand & { type: "avatar" };
-
-/**
- * Is this server-message payload the avatar's? The envelope is the whole
- * answer: `{type:"avatar"}` with a string `cmd`. It used to be a per-deployment
- * `accept` predicate on the client, which meant the library could not state
- * what an avatar message *is* — see `docs/removed.md` § The accept predicate.
- */
-export function isAvatarMessage(msg: unknown): msg is AvatarServerMessage {
-  if (typeof msg !== "object" || msg === null) return false;
-  const m = msg as Record<string, unknown>;
-  return m.type === AVATAR_MESSAGE_TYPE && typeof m.cmd === "string";
-}
-
-/** The envelope `type` the protocol reserves for avatar traffic. */
-export const AVATAR_MESSAGE_TYPE = "avatar";

package/client/src/useAvatar.ts

@@ -1,85 +0,0 @@
-/**
- * useAvatar — mount the widget, wire it to a live session, dispatch its
- * server-messages, and clean up.
- *
- * Internal: `<Avatar>` is the only thing the package exports. It is a separate
- * module anyway because the two lifecycles genuinely differ — mounting the
- * widget happens once (an avatar swap remounts by design; see the note in the
- * effect), while attaching to the pipecat client re-runs whenever the client
- * identity changes, which a session reconnect makes it do.
- */
-
-import { useEffect, useRef, useState } from "react";
-import type { PipecatClient } from "@pipecat-ai/client-js";
-import { createAvatar, type AvatarApi } from "../../src/avatar.js";
-import { AvatarClient } from "./AvatarClient.js";
-
-export interface UseAvatarOptions {
-  /** Which face. Omit for the widget's own default. */
-  avatar?: string;
-  /** The live `PipecatClient` to dispatch server-messages from, or `null`
-   * before connect. `useAvatar` (dis)connects the subscription as this
-   * changes; it does not create or own the client. */
-  client?: PipecatClient | null;
-}
-
-/**
- * The mount ref's type, written out rather than named as React's `RefObject`.
- *
- * React 18 and 19 declare that alias with different type arguments — 18's
- * `useRef<T>(null)` yields `RefObject<T>`, 19's yields `RefObject<T | null>` —
- * and because both are the *same alias*, TypeScript compares them by variance
- * and rejects whichever one we didn't pick. An anonymous shape forces a
- * structural comparison instead, which both versions satisfy, and which the
- * `ref` prop accepts on both. This is the only place the 18-vs-19 split shows
- * up in the binding; keep it that way.
- */
-export type AvatarMountRef = { current: HTMLDivElement | null };
-
-export interface UseAvatarHandle {
-  /** Attach to the mount element: `<div ref={containerRef} />`. */
-  containerRef: AvatarMountRef;
-  /** The live widget instance once mounted, else `null`. */
-  avatar: AvatarApi | null;
-}
-
-export function useAvatar(options: UseAvatarOptions = {}): UseAvatarHandle {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [avatar, setAvatar] = useState<AvatarApi | null>(null);
-  const avatarClientRef = useRef<AvatarClient | null>(null);
-
-  // Latest-options ref, so the mount effect (which runs once) still reads the
-  // live props without re-subscribing.
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-
-  useEffect(() => {
-    const mount = containerRef.current;
-    if (!mount) return;
-    const instance = createAvatar({ mount, avatar: optionsRef.current.avatar });
-    avatarClientRef.current = new AvatarClient(instance);
-    setAvatar(instance);
-
-    return () => {
-      instance.destroy();
-      avatarClientRef.current = null;
-      setAvatar(null);
-    };
-    // Mount once. `avatar` is read at mount time only — the widget has no
-    // hot-swap-avatar API (`createFace` runs once per mount), so changing it
-    // re-renders nothing here by design; a caller that needs a different face
-    // remounts with a `key` prop (see the component's doc).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    const wrapper = avatarClientRef.current;
-    const pipecatClient = options.client;
-    if (!wrapper || !pipecatClient) return;
-    return wrapper.attach(pipecatClient);
-    // Re-subscribe when the widget mounts or the session's client changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [avatar, options.client]);
-
-  return { containerRef, avatar };
-}