@oxy.so/bloom 7.0.1 → 7.1.1

package/src/agent-avatar/AgentAvatar.tsx

@@ -1,299 +1,19 @@
-import {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  AccessibilityInfo,
-  AppState,
-  PixelRatio,
-  Platform,
-  type View,
-} from 'react-native';
-import { useReducedMotion } from 'react-native-reanimated';
-import { useMessages } from '../locale/messages';
-import { StyledView } from '../styles/styled-primitives';
-import { drawAvatar } from './artwork';
-import { advanceAttention, createAttention } from './attention';
-import { advanceBlink, createBlink } from './blink';
-import { AvatarDrawingObserver } from './context';
-import { DrawingContext } from './drawing';
-import { ENTRANCE_SECONDS } from './entrance';
-import {
-  easeFace,
-  expressionRig,
-  faceAtSize,
-  gazeAngles,
-  type FaceRig,
-} from './face';
-import { AGENT_AVATAR_MESSAGES } from './messages';
-import type { ShapeMorph } from './shape-morph';
-import { Drawing } from './SvgDrawing';
+import { memo, useContext } from 'react';
+import { CharacterAvatar } from './CharacterAvatar';
+import { ProceduralAvatar } from './ProceduralAvatar';
+import { CharacterRuntimeContext } from './context';
+import { legacyRecipeUnsupported } from './legacy-recipe';
 import type { AgentAvatarProps } from './types';
-import { advanceWander, createWander } from './wander';
-import { WORKING_SECONDS } from './working';
 
-const TAU = Math.PI * 2;
-const randomSeed = () => {
-  if (globalThis.crypto?.getRandomValues)
-    return globalThis.crypto.getRandomValues(new Uint32Array(1))[0]!;
-  return Math.floor(Math.random() * 4294967296) >>> 0;
-};
-
-/** Animated procedural artwork; shared geometry, face rig and materials across platforms. */
-export function AgentAvatar({
-  config,
-  size = 64,
-  paused = false,
-  label,
-  locale,
-  entranceKey,
-  workingKey,
-  workingCycles = 1,
-  className,
-  style,
-  accessibilityLabel,
-  testID,
-}: AgentAvatarProps) {
-  const { messages } = useMessages(AGENT_AVATAR_MESSAGES, locale);
-  const initialReduced = useReducedMotion();
-  const [reduced, setReduced] = useState(initialReduced);
-  useEffect(() => {
-    const subscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      setReduced,
-    );
-    const media =
-      Platform.OS === 'web' && typeof matchMedia !== 'undefined'
-        ? matchMedia('(prefers-reduced-motion: reduce)')
-        : undefined;
-    const change = () => setReduced(media!.matches);
-    media?.addEventListener('change', change);
-    if (media) change();
-    return () => {
-      subscription?.remove?.();
-      media?.removeEventListener('change', change);
-    };
-  }, []);
-  const backingSize = Math.round(size * Math.min(PixelRatio.get() || 1, 2));
-  const root = useRef<View>(null);
-  const randomized = useRef(false);
-  const state = useRef<{
-    phase: number;
-    blink: ReturnType<typeof createBlink>;
-    wander: ReturnType<typeof createWander>;
-    attention: ReturnType<typeof createAttention>;
-    shapeMorph: ShapeMorph;
-    expression?: FaceRig;
-    face?: FaceRig;
-    velocity: Partial<FaceRig>;
-    gaze?: [number, number];
-    entrance: { key?: number; elapsed: number };
-    working: { key?: number; elapsed: number };
-  } | null>(null);
-  if (!state.current) {
-    const seed = config.seed >>> 0;
-    state.current = {
-      phase: (seed / 4294967296) * TAU,
-      blink: createBlink(seed),
-      wander: createWander(seed ^ config.seed, config.family === 'fold'),
-      attention: createAttention(seed ^ config.seed),
-      shapeMorph: { started: 0, active: false },
-      velocity: {},
-      entrance: { elapsed: ENTRANCE_SECONDS },
-      working: { elapsed: WORKING_SECONDS },
-    };
-  }
-  const renderDrawing = () => {
-    const context = new DrawingContext(),
-      s = state.current!;
-    const appearance = faceAtSize(config, size),
-      target = expressionRig(appearance);
-    drawAvatar(
-      context,
-      appearance,
-      s.phase,
-      s.face ?? target,
-      s.gaze ?? gazeAngles(appearance, s.phase, target),
-      size,
-      s.entrance.elapsed,
-      s.working.elapsed,
-      undefined,
-      Math.max(1, Math.floor(workingCycles)),
-      backingSize,
-    );
-    return context;
-  };
-  const [drawing, setDrawing] = useState(renderDrawing);
-  const observeDrawing = useContext(AvatarDrawingObserver);
-  useLayoutEffect(() => {
-    observeDrawing?.(drawing);
-  }, [observeDrawing, drawing]);
-  useEffect(() => {
-    const s = state.current!,
-      cycles = Math.max(1, Math.floor(workingCycles));
-    if (!randomized.current) {
-      s.wander = createWander(
-        randomSeed() ^ config.seed,
-        config.family === 'fold',
-      );
-      const seed = randomSeed();
-      s.phase = (seed / 4294967296) * TAU;
-      s.blink = createBlink(seed);
-      s.attention = createAttention(randomSeed() ^ config.seed);
-      randomized.current = true;
-    }
-    const duration = WORKING_SECONDS * cycles,
-      appearance = faceAtSize(config, size),
-      target = expressionRig(appearance);
-    if (s.entrance.key !== entranceKey)
-      s.entrance = {
-        key: entranceKey,
-        elapsed: entranceKey === undefined || paused ? ENTRANCE_SECONDS : 0,
-      };
-    if (s.working.key !== workingKey) {
-      s.working = {
-        key: workingKey,
-        elapsed: workingKey === undefined || paused ? duration : 0,
-      };
-      if (workingKey !== undefined) s.entrance.elapsed = ENTRANCE_SECONDS;
-    }
-    if (config.idle || workingKey === undefined) s.working.elapsed = duration;
-    s.expression ??= s.face ?? target;
-    s.face ??= target;
-    s.gaze ??= gazeAngles(appearance, s.phase, target, s.wander.point);
-    const frozen = paused || reduced || config.motion === 0;
-    if (reduced || config.motion === 0) {
-      s.entrance.elapsed = ENTRANCE_SECONDS;
-      s.working.elapsed = duration;
-    }
-    if (frozen) {
-      s.shapeMorph = { started: 0, active: false };
-      s.face = target;
-      s.expression = target;
-      s.velocity = {};
-      if (!paused || config.lookAt !== 'wander')
-        s.gaze = gazeAngles(appearance, s.phase, target, s.wander.point);
-    }
-    const draw = () => {
-      const context = new DrawingContext();
-      drawAvatar(
-        context,
-        appearance,
-        s.phase,
-        s.face!,
-        s.gaze!,
-        size,
-        s.entrance.elapsed,
-        s.working.elapsed,
-        frozen ? undefined : s.shapeMorph,
-        cycles,
-        backingSize,
-      );
-      setDrawing(context);
-    };
-    let frame = 0,
-      last = 0,
-      visible = true,
-      active = AppState.currentState !== 'background',
-      transitioning = true;
-    const tick = (now: number) => {
-      if (!last) last = now;
-      if (now - last >= (transitioning ? 16 : 32)) {
-        if (visible && active) {
-          const milliseconds = Math.min(now - last, 64),
-            seconds = milliseconds / 1000;
-          s.entrance.elapsed = Math.min(
-            ENTRANCE_SECONDS,
-            s.entrance.elapsed + seconds,
-          );
-          s.working.elapsed = Math.min(duration, s.working.elapsed + seconds);
-          const base = easeFace(
-            s.expression ?? target,
-            target,
-            s.velocity,
-            seconds,
-          );
-          s.expression = base;
-          transitioning =
-            (Object.keys(target) as (keyof FaceRig)[]).some(
-              (key) => base[key] !== target[key],
-            ) || s.shapeMorph.active;
-          s.face =
-            config.family === 'fold' || base.smile > 0.2
-              ? advanceAttention(
-                  s.attention,
-                  (seconds * 8) / config.duration,
-                  base,
-                  appearance,
-                )
-              : base;
-          s.face.blink = config.idle ? 1 : advanceBlink(s.blink, seconds);
-          transitioning ||= s.blink.blinking;
-          s.phase = (s.phase + (seconds * TAU) / config.duration) % TAU;
-          if (!config.idle && config.lookAt === 'wander')
-            advanceWander(
-              s.wander,
-              (seconds * 8) / config.duration,
-              config.family === 'fold',
-            );
-          const aim = gazeAngles(appearance, s.phase, s.face, s.wander.point),
-            ease = 1 - Math.exp(-milliseconds / 85);
-          s.gaze = [
-            s.gaze![0] + (aim[0] - s.gaze![0]) * ease,
-            s.gaze![1] + (aim[1] - s.gaze![1]) * ease,
-          ];
-          draw();
-        }
-        last = now;
-      }
-      frame = requestAnimationFrame(tick);
-    };
-    const subscription = AppState.addEventListener('change', (next) => {
-      active = next === 'active';
-      last = 0;
-    });
-    let observer: IntersectionObserver | undefined;
-    if (
-      Platform.OS === 'web' &&
-      typeof IntersectionObserver !== 'undefined' &&
-      root.current instanceof Element
-    ) {
-      observer = new IntersectionObserver((entries) => {
-        visible = entries[0]?.isIntersecting ?? true;
-      });
-      observer.observe(root.current);
-    }
-    draw();
-    if (!frozen) frame = requestAnimationFrame(tick);
-    return () => {
-      cancelAnimationFrame(frame);
-      subscription?.remove?.();
-      observer?.disconnect();
-    };
-  }, [
-    config,
-    size,
-    backingSize,
-    paused,
-    reduced,
-    entranceKey,
-    workingKey,
-    workingCycles,
-  ]);
-  return (
-    <StyledView
-      ref={root}
-      className={className}
-      style={[{ width: size, height: size, maxWidth: '100%' }, style]}
-      accessible
-      accessibilityRole="image"
-      accessibilityLabel={accessibilityLabel ?? label ?? messages.label}
-      testID={testID}
-    >
-      <Drawing context={drawing} size={size} />
-    </StyledView>
+/** Both catalogs use the recovered engine when their recipe is supported. */
+export const AgentAvatar = memo(function AgentAvatar(props: AgentAvatarProps) {
+  const { runtimeUrl } = useContext(CharacterRuntimeContext);
+  const beta =
+    props.config.character && props.config.character.preset !== 'bloom';
+  const legacy = runtimeUrl && !legacyRecipeUnsupported(props.config);
+  return beta || legacy ? (
+    <CharacterAvatar key={beta ? 'character' : 'legacy'} {...props} />
+  ) : (
+    <ProceduralAvatar {...props} />
   );
-}
+});

package/src/agent-avatar/AgentAvatarProvider.tsx

@@ -0,0 +1,79 @@
+import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import type { AgentAvatarProviderProps } from './types';
+import {
+  type CharacterCapabilities,
+  CharacterRuntimeContext,
+  CharacterCapabilitiesContext,
+} from './context';
+
+const EMPTY_CAPABILITIES: ReadonlyMap<string, CharacterCapabilities> =
+  new Map();
+function sameRecord<T>(left: Record<string, T>, right: Record<string, T>) {
+  const keys = Object.keys(left);
+  return (
+    keys.length === Object.keys(right).length &&
+    keys.every((key) => left[key] === right[key])
+  );
+}
+
+/** Enables the optional character engine without fetching it until an avatar needs it. */
+export function AgentAvatarProvider({
+  runtimeUrl,
+  children,
+}: AgentAvatarProviderProps) {
+  const [cache, setCapabilities] = useState(() => ({
+    runtimeUrl,
+    entries: EMPTY_CAPABILITIES,
+  }));
+  const activeRuntime = useRef(runtimeUrl);
+  activeRuntime.current = runtimeUrl;
+  // An old module's catalog cannot describe the newly selected runtime, even
+  // for the same saved recipe. Hide its cache during the first changed render.
+  const capabilitiesByKey =
+    cache.runtimeUrl === runtimeUrl ? cache.entries : EMPTY_CAPABILITIES;
+  useEffect(() => {
+    setCapabilities((previous) =>
+      previous.runtimeUrl === runtimeUrl
+        ? previous
+        : { runtimeUrl, entries: EMPTY_CAPABILITIES },
+    );
+  }, [runtimeUrl]);
+  const reportCapabilities = useCallback(
+    (next: CharacterCapabilities) => {
+      // A disposed renderer can finish preparing after its runtime was replaced.
+      if (activeRuntime.current !== runtimeUrl) return;
+      setCapabilities((previous) => {
+        if (activeRuntime.current !== runtimeUrl) return previous;
+        const prior =
+          previous.runtimeUrl === runtimeUrl
+            ? previous.entries
+            : EMPTY_CAPABILITIES;
+        const known = prior.get(next.key);
+        if (
+          known &&
+          sameRecord(known.available, next.available) &&
+          sameRecord(known.selected, next.selected)
+        )
+          return previous;
+        const entries = new Map(prior);
+        entries.delete(next.key);
+        entries.set(next.key, next);
+        if (entries.size > 64) entries.delete(entries.keys().next().value!);
+        return { runtimeUrl, entries };
+      });
+    },
+    [runtimeUrl],
+  );
+  const value = useMemo(
+    () => ({ runtimeUrl, reportCapabilities }),
+    [runtimeUrl, reportCapabilities],
+  );
+  const catalog = useMemo(() => ({ capabilitiesByKey }), [capabilitiesByKey]);
+  return (
+    <CharacterRuntimeContext.Provider value={value}>
+      <CharacterCapabilitiesContext.Provider value={catalog}>
+        {children}
+      </CharacterCapabilitiesContext.Provider>
+    </CharacterRuntimeContext.Provider>
+  );
+}

package/src/agent-avatar/CharacterAvatar.tsx

@@ -0,0 +1,260 @@
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, AppState, Platform, type View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+import { useMessages } from '../locale/messages';
+import { StyledView } from '../styles/styled-primitives';
+import { Text } from '../typography';
+import { type CharacterCapabilities, CharacterRuntimeContext } from './context';
+import { characterHtml, scriptJson } from './character-html';
+import { loadCharacterRuntime } from './character-runtime-module';
+import {
+  characterWebView,
+  type CharacterWebViewHandle,
+} from './character-webview';
+import { legacyRecipe } from './legacy-recipe';
+import { AGENT_AVATAR_MESSAGES } from './messages';
+import type { AgentAvatarProps } from './types';
+
+type RenderProps = Pick<
+  AgentAvatarProps,
+  | 'config'
+  | 'paused'
+  | 'portrait'
+  | 'workingKey'
+  | 'workingCycles'
+  | 'interactive'
+  | 'reactionKey'
+  | 'entranceKey'
+> & { reduced: boolean; legacy?: ReturnType<typeof legacyRecipe> };
+type Controller = { update(props: RenderProps): void; dispose(): void };
+type RuntimeModule = {
+  createAvatar(
+    canvas: HTMLCanvasElement,
+    props: RenderProps,
+    callbacks: {
+      onError(): void;
+      onCapabilities?(value: CharacterCapabilities): void;
+    },
+  ): Promise<Controller>;
+};
+function WebCharacter({
+  runtimeUrl,
+  value,
+  onError,
+}: {
+  runtimeUrl: string;
+  value: RenderProps;
+  onError(): void;
+}) {
+  const { reportCapabilities } = useContext(CharacterRuntimeContext);
+  const report = useRef(reportCapabilities);
+  report.current = reportCapabilities;
+  const host = useRef<View>(null),
+    controller = useRef<Controller | null>(null);
+  const latest = useRef(value);
+  latest.current = value;
+  const fail = useRef(onError);
+  fail.current = onError;
+  useEffect(() => {
+    const element = host.current as unknown as HTMLElement;
+    if (!element || typeof document === 'undefined') return;
+    let stopped = false,
+      started = false;
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('aria-hidden', 'true');
+    Object.assign(canvas.style, {
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      touchAction: 'none',
+    });
+    element.appendChild(canvas);
+    const start = async () => {
+      if (started || stopped) return;
+      started = true;
+      try {
+        const module = await loadCharacterRuntime<RuntimeModule>(runtimeUrl);
+        if (stopped) return;
+        const instance = await module.createAvatar(canvas, latest.current, {
+          onError: () => fail.current(),
+          onCapabilities: (info) => report.current?.(info),
+        });
+        if (stopped) instance.dispose();
+        else {
+          controller.current = instance;
+          instance.update(latest.current);
+        }
+      } catch {
+        if (!stopped) fail.current();
+      }
+    };
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) void start();
+    });
+    observer.observe(element);
+    return () => {
+      stopped = true;
+      observer.disconnect();
+      controller.current?.dispose();
+      controller.current = null;
+      canvas.remove();
+    };
+  }, [runtimeUrl]);
+  useEffect(() => {
+    try {
+      controller.current?.update(value);
+    } catch {
+      onError();
+    }
+  }, [value, onError]);
+  return <StyledView ref={host} style={{ flex: 1 }} />;
+}
+function NativeCharacter({
+  runtimeUrl,
+  value,
+  onError,
+}: {
+  runtimeUrl: string;
+  value: RenderProps;
+  onError(): void;
+}) {
+  const { reportCapabilities } = useContext(CharacterRuntimeContext);
+  const WebView = characterWebView();
+  const ref = useRef<CharacterWebViewHandle>(null);
+  const initial = useRef(value);
+  const source = useMemo(
+    () => ({
+      html: characterHtml(runtimeUrl, initial.current),
+      baseUrl: runtimeUrl,
+    }),
+    [runtimeUrl],
+  );
+  useEffect(() => {
+    if (!WebView) onError();
+  }, [WebView, onError]);
+  const send = () =>
+    ref.current?.injectJavaScript(
+      `window.updateCharacter?.(${scriptJson(value)}); true;`,
+    );
+  useEffect(send, [value]);
+  if (!WebView) return null;
+  return (
+    <WebView
+      ref={ref}
+      source={source}
+      style={{ flex: 1, backgroundColor: 'transparent' }}
+      scrollEnabled={false}
+      javaScriptEnabled
+      originWhitelist={['*']}
+      onMessage={(event) => {
+        if (event.nativeEvent.data.startsWith('capabilities:')) {
+          try {
+            reportCapabilities?.(JSON.parse(event.nativeEvent.data.slice(13)));
+          } catch {
+            onError();
+          }
+        } else if (event.nativeEvent.data === 'error') onError();
+        else if (event.nativeEvent.data === 'loaded') send();
+      }}
+    />
+  );
+}
+
+/** Optional binary-backed renderer; the application supplies the hosted runtime URL. */
+export function CharacterAvatar(props: AgentAvatarProps) {
+  const { runtimeUrl } = useContext(CharacterRuntimeContext);
+  const { messages } = useMessages(AGENT_AVATAR_MESSAGES, props.locale);
+  const initialReduced = useReducedMotion();
+  const [reduced, setReduced] = useState(initialReduced);
+  const [active, setActive] = useState(AppState.currentState !== 'background');
+  const [failed, setFailed] = useState(false);
+  const {
+    config,
+    paused,
+    portrait,
+    workingKey,
+    reactionKey,
+    entranceKey,
+    workingCycles,
+    interactive,
+    size = 64,
+  } = props;
+  useEffect(() => {
+    const motion = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduced,
+    );
+    const state = AppState.addEventListener('change', (next) =>
+      setActive(next === 'active'),
+    );
+    const media =
+      Platform.OS === 'web'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)')
+        : undefined;
+    const change = () => setReduced(media!.matches);
+    media?.addEventListener('change', change);
+    if (media) change();
+    return () => {
+      motion?.remove?.();
+      state?.remove?.();
+      media?.removeEventListener('change', change);
+    };
+  }, []);
+  useEffect(() => setFailed(false), [runtimeUrl, config.character]);
+  const legacy = useMemo(
+    () =>
+      !config.character || config.character.preset === 'bloom'
+        ? legacyRecipe(config)
+        : undefined,
+    [config],
+  );
+  const value = useMemo(
+    () => ({
+      config,
+      legacy,
+      paused: paused || !active,
+      portrait,
+      workingKey,
+      reactionKey,
+      entranceKey,
+      workingCycles,
+      interactive,
+      reduced,
+    }),
+    [
+      config,
+      legacy,
+      paused,
+      portrait,
+      active,
+      workingKey,
+      reactionKey,
+      entranceKey,
+      workingCycles,
+      interactive,
+      reduced,
+    ],
+  );
+  const fail = useMemo(() => () => setFailed(true), []);
+  const Renderer = Platform.OS === 'web' ? WebCharacter : NativeCharacter;
+  return (
+    <StyledView
+      className={props.className}
+      style={[{ width: size, height: size }, props.style]}
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={
+        props.accessibilityLabel ?? props.label ?? messages.label
+      }
+      testID={props.testID}
+    >
+      {runtimeUrl && !failed ? (
+        <Renderer runtimeUrl={runtimeUrl} value={value} onError={fail} />
+      ) : (
+        <Text numberOfLines={2} style={{ fontSize: 10 }}>
+          {messages.unavailable}
+        </Text>
+      )}
+    </StyledView>
+  );
+}