@oxy.so/bloom 6.4.0 → 7.0.1

package/src/agent-creator/GlossArt.tsx

@@ -0,0 +1,165 @@
+import { useId } from 'react';
+import { Platform } from 'react-native';
+import Svg, {
+  Circle,
+  ClipPath,
+  Defs,
+  Ellipse,
+  FeGaussianBlur,
+  Filter,
+  G,
+  LinearGradient,
+  RadialGradient,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+import { StyledImage, StyledView } from '../styles/styled-primitives';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { RAINBOW_DARK, RAINBOW_LIGHT } from './rainbow-artwork';
+
+/** The original four-layer glossy sphere, with the same 26px reflection geometry. */
+export function GlossArt({
+  center = '#437EF7',
+  edge = '#004DE9',
+  rainbow = false,
+  active = false,
+  size = 26,
+}: {
+  center?: string;
+  edge?: string;
+  rainbow?: boolean;
+  active?: boolean;
+  size?: number;
+}) {
+  const id = useId().replace(/:/g, '');
+  const { isDark } = useTheme();
+  if (rainbow)
+    return (
+      <StyledView
+        aria-hidden
+        pointerEvents="none"
+        className="absolute inset-0 overflow-hidden rounded-full"
+        style={{ width: size, height: size }}
+      >
+        <StyledImage
+          source={{ uri: isDark ? RAINBOW_DARK : RAINBOW_LIGHT }}
+          className="object-cover"
+          resizeMode="cover"
+          style={{ width: size, height: size }}
+        />
+      </StyledView>
+    );
+  if (Platform.OS === 'web') {
+    const fill: WebCssStyle = {
+      backgroundImage: `radial-gradient(closest-side circle at 50% 50%, ${center} 0%, ${edge} 100%)`,
+    };
+    return (
+      <StyledView
+        pointerEvents="none"
+        aria-hidden
+        className="relative overflow-hidden rounded-full"
+        style={[{ width: size, height: size }, fill]}
+      >
+        <StyledView
+          aria-hidden
+          className="absolute inset-0 bg-linear-to-b from-[#ffffff00] to-[#ffffff4d]"
+        />
+        <StyledView
+          aria-hidden
+          className="absolute top-0 left-[7.7%] h-[38.5%] w-[84.6%] rounded-[50%] bg-linear-to-b from-[#ffffff80] to-[#ffffff00] blur-[0.5px]"
+        />
+        <StyledView
+          aria-hidden
+          className="absolute top-0 left-[34.6%] h-[11.5%] w-[30.8%] rounded-[50%] bg-linear-to-b from-[#ffffff80] to-[#ffffff00] blur-[1px]"
+        />
+        <StyledView
+          aria-hidden
+          className="absolute top-[73.1%] left-[-23.1%] h-[53.8%] w-[138.5%] rounded-[50%] bg-linear-to-b from-[#ffffff00] to-[#ffffff80] blur-[0.5px]"
+        />
+        {active && (
+          <StyledView
+            aria-hidden
+            className="pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_0_2px_rgb(0_0_0/0.30)]"
+          />
+        )}
+      </StyledView>
+    );
+  }
+  return (
+    <Svg width={size} height={size} viewBox="0 0 26 26" accessible={false}>
+      <Defs>
+        <ClipPath id={`${id}-clip`}>
+          <Circle cx={13} cy={13} r={13} />
+        </ClipPath>
+        <RadialGradient id={`${id}-base`} cx="50%" cy="50%" r="50%">
+          <Stop offset="0" stopColor={center} />
+          <Stop offset="1" stopColor={edge} />
+        </RadialGradient>
+        <LinearGradient id={`${id}-sheen`} x1="0" y1="0" x2="0" y2="1">
+          <Stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+          <Stop offset="1" stopColor="#ffffff" stopOpacity={0.3} />
+        </LinearGradient>
+        <LinearGradient id={`${id}-reflection`} x1="0" y1="0" x2="0" y2="1">
+          <Stop offset="0" stopColor="#ffffff" stopOpacity={0.5} />
+          <Stop offset="1" stopColor="#ffffff" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient id={`${id}-bounce`} x1="0" y1="0" x2="0" y2="1">
+          <Stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+          <Stop offset="1" stopColor="#ffffff" stopOpacity={0.5} />
+        </LinearGradient>
+        <Filter id={`${id}-soft`} x="-25%" y="-25%" width="150%" height="150%">
+          <FeGaussianBlur stdDeviation={0.5} />
+        </Filter>
+        <Filter
+          id={`${id}-hotspot`}
+          x="-50%"
+          y="-50%"
+          width="200%"
+          height="200%"
+        >
+          <FeGaussianBlur stdDeviation={1} />
+        </Filter>
+      </Defs>
+      <G clipPath={`url(#${id}-clip)`}>
+        <Circle cx={13} cy={13} r={13} fill={`url(#${id}-base)`} />
+        <Rect width={26} height={26} fill={`url(#${id}-sheen)`} />
+        <Ellipse
+          cx={13}
+          cy={5}
+          rx={11}
+          ry={5}
+          fill={`url(#${id}-reflection)`}
+          filter={`url(#${id}-soft)`}
+        />
+        <Ellipse
+          cx={13}
+          cy={1.5}
+          rx={4}
+          ry={1.5}
+          fill={`url(#${id}-reflection)`}
+          filter={`url(#${id}-hotspot)`}
+        />
+        <Ellipse
+          cx={12}
+          cy={26}
+          rx={18}
+          ry={7}
+          fill={`url(#${id}-bounce)`}
+          filter={`url(#${id}-soft)`}
+        />
+        {active && (
+          <Circle
+            cx={13}
+            cy={13}
+            r={12}
+            fill="none"
+            stroke="#000000"
+            strokeOpacity={0.3}
+            strokeWidth={2}
+          />
+        )}
+      </G>
+    </Svg>
+  );
+}

package/src/agent-creator/ScrollSurface.tsx

@@ -0,0 +1,144 @@
+import { useId, useState, type ComponentType, type ReactNode } from 'react';
+import { Platform, ScrollView, type ScrollViewProps } from 'react-native';
+import { styled } from 'react-native-css';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { StyledView } from '../styles/styled-primitives';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+
+const ScrollSurfaceBase: ComponentType<
+  Pick<ScrollViewProps, 'style' | 'contentContainerStyle'>
+> = ScrollView;
+const StyledScrollView: ComponentType<
+  ScrollViewProps & { contentContainerClassName?: string }
+> = styled(ScrollSurfaceBase, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+});
+
+/** Source scroll surface: independent 24px edge fades; the header stays outside. */
+export function ScrollSurface({
+  children,
+  className,
+  contentClassName,
+  surface = 'secondary',
+  label,
+  fadeBottom = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  surface?: 'primary' | 'secondary' | 'full';
+  label?: string;
+  fadeBottom?: boolean;
+}) {
+  const { colors } = useTheme();
+  const id = useId().replace(/:/g, '');
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const fade = Math.min(1, Math.max(0, scrollTop) / 24);
+  const bottomFade = fadeBottom
+    ? Math.min(1, Math.max(0, contentHeight - viewportHeight - scrollTop) / 24)
+    : 0;
+  const background =
+    surface === 'full'
+      ? colors.background
+      : surface === 'secondary'
+        ? colors.backgroundSecondary
+        : colors.card;
+  const scroller: WebCssStyle = {
+    flex: 1,
+    height: '100%',
+    scrollbarWidth: 'none',
+    overscrollBehavior: 'contain',
+  };
+  const edge = (bottom: boolean, opacity: number) => {
+    const mask = `linear-gradient(to ${bottom ? 'top' : 'bottom'}, black, transparent)`;
+    const gradient: WebCssStyle = {
+      opacity,
+      backgroundImage: `linear-gradient(to ${bottom ? 'top' : 'bottom'}, ${background}, transparent)`,
+    };
+    const blur1: WebCssStyle = {
+      opacity,
+      backdropFilter: 'blur(1px)',
+      maskImage: mask,
+    };
+    const blur4: WebCssStyle = {
+      opacity,
+      backdropFilter: 'blur(4px)',
+      maskImage: mask,
+    };
+    return (
+      <StyledView
+        aria-hidden
+        pointerEvents="none"
+        className={`pointer-events-none absolute inset-x-0 ${bottom ? 'bottom-0' : 'top-0'} z-10`}
+        style={{ height: 24 }}
+      >
+        {Platform.OS === 'web' ? (
+          <>
+            <StyledView
+              className={`absolute inset-x-0 ${bottom ? 'bottom-0' : 'top-0'} h-6 backdrop-blur-[1px]`}
+              style={blur1}
+            />
+            <StyledView
+              className={`absolute inset-x-0 ${bottom ? 'bottom-0' : 'top-0'} h-4 backdrop-blur-[4px]`}
+              style={blur4}
+            />
+            <StyledView
+              className={`absolute inset-x-0 ${bottom ? 'bottom-0' : 'top-0'} h-6`}
+              style={gradient}
+            />
+          </>
+        ) : (
+          <Svg width="100%" height={24} accessible={false} opacity={opacity}>
+            <Defs>
+              <LinearGradient
+                id={`${id}-${bottom ? 'bottom' : 'top'}`}
+                x1="0"
+                y1={bottom ? '1' : '0'}
+                x2="0"
+                y2={bottom ? '0' : '1'}
+              >
+                <Stop offset="0" stopColor={background} />
+                <Stop offset="1" stopColor={background} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect
+              width="100%"
+              height={24}
+              fill={`url(#${id}-${bottom ? 'bottom' : 'top'})`}
+            />
+          </Svg>
+        )}
+      </StyledView>
+    );
+  };
+  return (
+    <StyledView
+      className={`relative min-h-0 ${className ?? ''}`}
+      style={{ flex: 1, minHeight: 0 }}
+    >
+      <StyledScrollView
+        className="h-full overflow-y-auto overscroll-contain outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus-ring [scrollbar-width:none]"
+        contentContainerClassName={contentClassName}
+        accessibilityLabel={label}
+        tabIndex={label ? 0 : undefined}
+        showsVerticalScrollIndicator={false}
+        style={Platform.OS === 'web' ? scroller : { flex: 1 }}
+        contentContainerStyle={{
+          paddingBottom: contentClassName === 'pb-4' ? 16 : 0,
+        }}
+        onLayout={(event) => setViewportHeight(event.nativeEvent.layout.height)}
+        onContentSizeChange={(_width, height) => setContentHeight(height)}
+        onScroll={(event) => setScrollTop(event.nativeEvent.contentOffset.y)}
+        scrollEventThrottle={16}
+      >
+        {children}
+      </StyledScrollView>
+      {edge(false, fade)}
+      {fadeBottom && edge(true, bottomFade)}
+    </StyledView>
+  );
+}

package/src/agent-creator/ShapeArc.tsx

@@ -0,0 +1,266 @@
+import { useId, useRef, useState, type ComponentType, type Ref } from 'react';
+import { Platform, type View, type ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from 'react-native-reanimated';
+import Svg, { Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+import { AgentAvatar, FOLD_SHAPES, type AvatarConfig } from '../agent-avatar';
+import { useIsRtl } from '../hooks/use-is-rtl';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { useAgentCreatorMessages } from './context';
+import { wrapShape } from './shared';
+import { useTrackEvents } from './use-track-events';
+
+// RNW supports these listbox properties; native handles equivalent accessibility actions.
+type ListboxViewProps = Omit<ViewProps, 'role'> & {
+  role: 'listbox';
+  'aria-activedescendant'?: string;
+  ref?: Ref<View>;
+};
+const ListboxView = StyledView as unknown as ComponentType<ListboxViewProps>;
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+interface ArcCssStyle extends WebCssStyle {
+  clipPath?: string;
+}
+const trackClip: ArcCssStyle = {
+  maskImage:
+    'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
+  clipPath:
+    'polygon(0 0, 15% 0, 30% 36%, 50% 50%, 70% 36%, 85% 0, 100% 0, 100% 100%, 0 100%)',
+};
+function ShapeSlot({
+  config,
+  slot,
+  position,
+  sign,
+  id,
+  onSelect,
+}: {
+  config: AvatarConfig;
+  slot: number;
+  position: SharedValue<number>;
+  sign: number;
+  id: string;
+  onSelect: (slot: number) => void;
+}) {
+  const messages = useAgentCreatorMessages();
+  const { colors } = useTheme();
+  const shape = FOLD_SHAPES[wrapShape(slot)]!;
+  const active = config.foldShape === shape;
+  const animated = useAnimatedStyle(() => {
+    const angle = (slot - position.value) * 0.34;
+    return {
+      transform: [
+        { translateX: Math.sin(angle) * 210 * sign },
+        { translateY: Math.cos(angle) * 210 - 176 },
+      ],
+    };
+  }, [position, slot, sign]);
+  return (
+    <AnimatedView
+      pointerEvents="auto"
+      className="pointer-events-auto absolute left-1/2 top-[35px] -ml-7 size-14"
+      style={[
+        {
+          position: 'absolute',
+          left: '50%',
+          top: 35,
+          marginLeft: -28,
+          width: 56,
+          height: 56,
+        },
+        animated,
+      ]}
+    >
+      <StyledPressable
+        nativeID={`${id}-${slot}`}
+        role="option"
+        tabIndex={-1}
+        aria-selected={active}
+        accessibilityLabel={messages.shapeLabel(messages.shapes[shape])}
+        onPress={() => onSelect(slot)}
+        className={`flex size-14 cursor-grab items-center justify-center rounded-2xl outline-none transition-colors hover:bg-background-secondary-default active:cursor-grabbing${active ? ' bg-background-secondary-default ring-1 ring-border-button-default' : ''}`}
+        style={{
+          backgroundColor: active ? colors.backgroundSecondary : 'transparent',
+        }}
+      >
+        <AgentAvatar
+          config={{
+            ...config,
+            foldShape: shape,
+            face: false,
+            idle: false,
+            motion: 0,
+            lookAt: 'center',
+          }}
+          size={56}
+          paused
+          label={messages.silhouetteLabel(messages.shapes[shape])}
+        />
+      </StyledPressable>
+    </AnimatedView>
+  );
+}
+
+/** A manually moved, evenly spaced circular track with an unbounded index. */
+export function ShapeArc({
+  config,
+  onChange,
+}: {
+  config: AvatarConfig;
+  onChange: (shape: AvatarConfig['foldShape']) => void;
+}) {
+  const messages = useAgentCreatorMessages();
+  const { colors } = useTheme();
+  const id = useId();
+  const ref = useRef<View>(null);
+  const initial = Math.max(0, FOLD_SHAPES.indexOf(config.foldShape));
+  const target = useSharedValue(initial);
+  const position = useSharedValue(initial);
+  const [center, setCenter] = useState(initial);
+  const reduced = useReducedMotion();
+  const sign = useIsRtl() ? -1 : 1;
+  const dragStart = useSharedValue(initial);
+  const suppressClick = useSharedValue(false);
+  const move = (next: number) => {
+    target.value = next;
+    position.value = reduced
+      ? next
+      : withSpring(next, { stiffness: 180, damping: 28 });
+  };
+  useAnimatedReaction(
+    () => Math.round(position.value),
+    (value, previous) => {
+      if (value !== previous) runOnJS(setCenter)(value);
+    },
+    [position, setCenter],
+  );
+  const select = (slot: number) => {
+    if (suppressClick.value) return;
+    move(slot);
+    onChange(FOLD_SHAPES[wrapShape(slot)]!);
+  };
+  const drag = Gesture.Pan()
+    .activeOffsetX([-5, 5])
+    .failOffsetY([-20, 20])
+    .runOnJS(true)
+    .onBegin(() => {
+      suppressClick.value = false;
+      dragStart.value = target.value;
+    })
+    .onUpdate((event) => {
+      suppressClick.value = true;
+      move(dragStart.value - (event.translationX * sign) / 70);
+    });
+  useTrackEvents(
+    ref,
+    (x, y) =>
+      move(target.value + (Math.abs(x) > Math.abs(y) ? x * sign : y) / 110),
+    (key) => {
+      const step =
+        key === 'ArrowRight'
+          ? sign
+          : key === 'ArrowLeft'
+            ? -sign
+            : key === 'ArrowDown'
+              ? 1
+              : key === 'ArrowUp'
+                ? -1
+                : 0;
+      if (!step && key !== 'Home' && key !== 'End') return false;
+      const next = step
+        ? Math.round(target.value) + step
+        : key === 'Home'
+          ? 0
+          : FOLD_SHAPES.length - 1;
+      move(next);
+      onChange(FOLD_SHAPES[wrapShape(next)]!);
+      return true;
+    },
+  );
+  const slots = Array.from({ length: 9 }, (_, index) => center + index - 4);
+  const selectedSlot = slots.find(
+    (slot) => FOLD_SHAPES[wrapShape(slot)] === config.foldShape,
+  );
+  return (
+    <GestureDetector gesture={drag}>
+      <ListboxView
+        ref={ref}
+        role="listbox"
+        aria-activedescendant={
+          selectedSlot === undefined ? undefined : `${id}-${selectedSlot}`
+        }
+        tabIndex={0}
+        accessibilityLabel={messages.shape}
+        pointerEvents="auto"
+        className="pointer-events-auto relative h-[126px] w-full touch-pan-y select-none overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus-ring"
+        style={Platform.OS === 'web' ? trackClip : undefined}
+        accessibilityActions={[
+          { name: 'increment', label: messages.nextShape },
+          { name: 'decrement', label: messages.previousShape },
+        ]}
+        onAccessibilityAction={(event) => {
+          const next =
+            Math.round(target.value) +
+            (event.nativeEvent.actionName === 'increment' ? 1 : -1);
+          move(next);
+          onChange(FOLD_SHAPES[wrapShape(next)]!);
+        }}
+      >
+        {slots.map((slot) => (
+          <ShapeSlot
+            key={slot}
+            id={id}
+            config={config}
+            slot={slot}
+            position={position}
+            sign={sign}
+            onSelect={select}
+          />
+        ))}
+        {Platform.OS !== 'web' && (
+          <Svg
+            pointerEvents="none"
+            width="100%"
+            height={126}
+            viewBox="0 0 100 126"
+            preserveAspectRatio="none"
+            style={{ position: 'absolute', left: 0, top: 0 }}
+            accessible={false}
+          >
+            <Defs>
+              <LinearGradient id={`${id}-edge`} x1="0" y1="0" x2="1" y2="0">
+                <Stop offset="0" stopColor={colors.background} />
+                <Stop
+                  offset=".08"
+                  stopColor={colors.background}
+                  stopOpacity={0}
+                />
+                <Stop
+                  offset=".92"
+                  stopColor={colors.background}
+                  stopOpacity={0}
+                />
+                <Stop offset="1" stopColor={colors.background} />
+              </LinearGradient>
+            </Defs>
+            <Path
+              d="M0 0H100H85L70 45.36L50 63L30 45.36L15 0Z"
+              fill={colors.background}
+            />
+            <Rect width={100} height={126} fill={`url(#${id}-edge)`} />
+          </Svg>
+        )}
+      </ListboxView>
+    </GestureDetector>
+  );
+}

package/src/agent-creator/constants.ts

@@ -0,0 +1,57 @@
+import type { AgentLanguage, AgentPreferences } from './types';
+export const AGENT_LANGUAGES = [
+  { id: 'auto', label: 'Auto-detect' },
+  { id: 'en', label: 'English' },
+  { id: 'tr', label: 'Turkish' },
+  { id: 'es', label: 'Spanish' },
+  { id: 'fr', label: 'French' },
+  { id: 'de', label: 'German' },
+  { id: 'ja', label: 'Japanese' },
+  { id: 'pt', label: 'Portuguese' },
+] as const;
+export const AGENT_SPEECH_RATES = [0.75, 1, 1.25, 1.5] as const;
+export const DEFAULT_AGENT_PREFERENCES: AgentPreferences = {
+  voice: 'alice',
+  speed: 1,
+  language: 'auto',
+  notifications: true,
+};
+export const AVATAR_COLORS = [
+  [220, 85, 'Blue', '#437EF7', '#004DE9'],
+  [181, 49, 'Teal', '#27b5a2', '#00957c'],
+  [259, 75, 'Violet', '#8554F6', '#3E00CD'],
+  [321, 74, 'Pink', '#E34798', '#D3006D'],
+  [0, 78, 'Red', '#E74241', '#CF0100'],
+  [31, 89, 'Orange', '#f47327', '#d83f00'],
+  [193, 78, 'Cyan', '#1bb4ce', '#0093ad'],
+  [78, 72, 'Lime', '#88c81c', '#6aa400'],
+  [145, 51, 'Green', '#36c15c', '#009f13'],
+] as const;
+export const EMOTION_NAMES = {
+  neutral: 'Neutral',
+  happy: 'Happy',
+  angry: 'Angry',
+  thinking: 'Thinking',
+  shook: 'Shook',
+  curious: 'Curious',
+  wink: 'Wink',
+  sleepy: 'Sleepy',
+  sad: 'Sad',
+  worried: 'Worried',
+  skeptical: 'Skeptical',
+  focused: 'Focused',
+  excited: 'Excited',
+  calm: 'Calm',
+  shy: 'Shy',
+  confused: 'Confused',
+} as const;
+export const PREVIEW_TEXT: Record<AgentLanguage, string> = {
+  auto: 'Hello! Ready when you are.',
+  en: 'Hello! Ready when you are.',
+  tr: 'Merhaba! Hazır olduğunda başlayabiliriz.',
+  es: '¡Hola! Podemos empezar cuando quieras.',
+  fr: 'Bonjour ! Nous pouvons commencer quand vous voulez.',
+  de: 'Hallo! Wir können anfangen, wenn du bereit bist.',
+  ja: 'こんにちは！準備ができたら始めましょう。',
+  pt: 'Olá! Podemos começar quando quiser.',
+};

package/src/agent-creator/context.ts

@@ -0,0 +1,38 @@
+import { createContext, useContext } from 'react';
+import { useMessages } from '../locale/messages';
+import type * as PopoverParts from '../popover/Popover';
+import type * as SelectParts from '../select';
+import { AGENT_CREATOR_MESSAGES, type AgentCreatorMessages } from './messages';
+
+export type AgentCreatorBindings = Pick<
+  typeof SelectParts,
+  | 'Select'
+  | 'SelectTrigger'
+  | 'SelectValue'
+  | 'SelectIcon'
+  | 'SelectContent'
+  | 'SelectItem'
+  | 'SelectItemText'
+> &
+  Pick<typeof PopoverParts, 'Popover' | 'PopoverTrigger' | 'PopoverContent'>;
+export const AgentCreatorContext = createContext<AgentCreatorBindings | null>(
+  null,
+);
+export const AgentCreatorCopyContext = createContext<{
+  locale?: string;
+  labels?: Partial<AgentCreatorMessages>;
+} | null>(null);
+export function useAgentCreatorBindings() {
+  const value = useContext(AgentCreatorContext);
+  if (!value) throw new Error('AgentCreator requires its platform bindings');
+  return value;
+}
+export function useAgentCreatorMessages(overrides?: {
+  locale?: string;
+  labels?: Partial<AgentCreatorMessages>;
+}) {
+  const inherited = useContext(AgentCreatorCopyContext);
+  const configured = overrides ?? inherited;
+  const { messages } = useMessages(AGENT_CREATOR_MESSAGES, configured?.locale);
+  return { ...messages, ...configured?.labels };
+}

package/src/agent-creator/index.ts

@@ -0,0 +1,14 @@
+export { AgentCreator } from './AgentCreator';
+export {
+  AGENT_LANGUAGES,
+  AGENT_SPEECH_RATES,
+  DEFAULT_AGENT_PREFERENCES,
+} from './constants';
+export { normalizeAgentPreferences } from './shared';
+export type {
+  AgentCreatorAgent,
+  AgentCreatorProps,
+  AgentLanguage,
+  AgentPreferences,
+  AgentVoice,
+} from './types';