@alia.onl/sdk 15.8.0 → 19.0.0

package/src/components/AliaParticipants.tsx

@@ -0,0 +1,202 @@
+/**
+ * The conversation's participants: Bloom's `AgentProfile` with `[lead, ...joined]`, and the
+ * choreography by which a consulted agent joins it (ADR 0020 §7).
+ *
+ * When the lead consults another agent (`alia.agent_start`), the agent's reply appears in the
+ * thread under its own identity (anchor `reply:<agentId>`), and that avatar flies into the header
+ * — Bloom's multi-agent join: `centeredLanding`, merging into the profile, staggered when several
+ * join at once. The header gains the agent only when its flight lands; with reduced motion, or
+ * when there is nothing to measure, it gains it at once. An agent already in the conversation
+ * when the chat opens is simply there.
+ *
+ * This is the ONLY file that draws `AgentProfile` or builds a join flight
+ * (`one-thread.test.tsx` holds it), so the header of the sheet, the screen and the Alia app are
+ * one header.
+ */
+
+import { AgentProfile } from '@oxy.so/bloom/agent-reply';
+import { type AvatarFlights, centeredLanding } from '@oxy.so/bloom/avatar-flight';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { ANCHORS, useAliaFlights } from '../lib/flights';
+import {
+  type AliaChatParticipants,
+  type AliaLead,
+  type AliaParticipant,
+  consultedAgents,
+} from '../lib/participants';
+import type { Message } from '../runtime/types';
+
+/** As Bloom's multi-agent chat flies a waiting agent into its profile. */
+const JOIN_DURATION = 950;
+const JOIN_STAGGER = 120;
+const JOIN_LANDING_SIZE = 14;
+
+/** The flights of agents joining the header: from each one's reply, merging into the profile. */
+export function joinFlights(agents: readonly AliaParticipant[]) {
+  return agents.map((agent, index) => ({
+    key: `join:${agent.id}`,
+    character: agent.character,
+    from: ANCHORS.reply(agent.id),
+    to: ANCHORS.profile,
+    landing: centeredLanding(JOIN_LANDING_SIZE),
+    duration: JOIN_DURATION,
+    delay: index * JOIN_STAGGER,
+    merge: true,
+  }));
+}
+
+/** Two frames: the reply that carries the avatar mounts, then lays out, before it is measured. */
+function afterLayout(run: () => void): () => void {
+  const raf =
+    typeof requestAnimationFrame === 'function'
+      ? requestAnimationFrame
+      : (callback: () => void) => setTimeout(callback, 16) as unknown as number;
+  const cancelRaf =
+    typeof cancelAnimationFrame === 'function'
+      ? cancelAnimationFrame
+      : (id: number) => clearTimeout(id as unknown as ReturnType<typeof setTimeout>);
+  let second: number | undefined;
+  const first = raf(() => {
+    second = raf(run);
+  });
+  return () => {
+    cancelRaf(first);
+    if (second !== undefined) cancelRaf(second);
+  };
+}
+
+export interface UseParticipantsOptions {
+  lead: AliaLead;
+  messages: readonly Message[];
+  /** The chat's flights; `null` draws everybody in place without flying. */
+  flights: AvatarFlights | null;
+}
+
+/**
+ * Who the header shows, and the joins under way.
+ *
+ * One batch flies at a time: agents that start answering while a batch (or the lead's own
+ * welcome flight) is in the air wait for it to land, then fly together, staggered.
+ */
+export function useParticipants({
+  lead,
+  messages,
+  flights,
+}: UseParticipantsOptions): AliaChatParticipants {
+  const consulted = useMemo(() => consultedAgents(messages, lead.id), [messages, lead.id]);
+  const [joined, setJoined] = useState<AliaParticipant[]>([]);
+  /** Agents waiting for a flight, and the batch in the air (`launched` once it took off). */
+  const queue = useRef<AliaParticipant[]>([]);
+  const [batch, setBatch] = useState<{ agents: AliaParticipant[]; launched: boolean } | null>(null);
+  const [queued, setQueued] = useState(0);
+  const flightsRef = useRef(flights);
+  flightsRef.current = flights;
+
+  // A new lead is a new conversation: nobody has joined it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset on the lead alone
+  useEffect(() => {
+    queue.current = [];
+    setJoined([]);
+    setBatch(null);
+  }, [lead.id]);
+
+  // Everybody who answered is in the header, or on the way to it.
+  useEffect(() => {
+    const known = new Set([
+      ...joined.map((agent) => agent.id),
+      ...queue.current.map((agent) => agent.id),
+      ...(batch?.agents.map((agent) => agent.id) ?? []),
+    ]);
+    const already: AliaParticipant[] = [];
+    let waiting = false;
+    for (const { participant, live } of consulted) {
+      if (known.has(participant.id)) continue;
+      if (live && flightsRef.current !== null) {
+        queue.current = [...queue.current, participant];
+        waiting = true;
+      } else {
+        already.push(participant);
+      }
+    }
+    if (already.length > 0) setJoined((current) => [...current, ...already]);
+    if (waiting) setQueued((count) => count + 1);
+  }, [consulted, joined, batch]);
+
+  // A batch takes off once nothing else is landing on the header.
+  const landing = flights?.isLanding(ANCHORS.profile) ?? false;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `queued` signals the queue (a ref) grew
+  useEffect(() => {
+    if (batch !== null || landing || queue.current.length === 0) return;
+    const agents = queue.current;
+    queue.current = [];
+    setBatch({ agents, launched: false });
+  }, [batch, landing, queued]);
+
+  useEffect(() => {
+    if (batch === null || batch.launched) return;
+    let live = true;
+    const cancel = afterLayout(() => {
+      const current = flightsRef.current;
+      void (current ? current.launch(joinFlights(batch.agents)) : Promise.resolve(false)).then(
+        (flying) => {
+          if (!live) return;
+          if (flying) setBatch({ agents: batch.agents, launched: true });
+          else {
+            // Reduced motion, nothing measurable, or superseded: they join without flying.
+            setJoined((current) => [...current, ...batch.agents]);
+            setBatch(null);
+          }
+        },
+      );
+    });
+    return () => {
+      live = false;
+      cancel();
+    };
+  }, [batch]);
+
+  // The batch is in: the header gains its agents as their avatars land.
+  useEffect(() => {
+    if (batch === null || !batch.launched || landing) return;
+    setJoined((current) => [...current, ...batch.agents]);
+    setBatch(null);
+  }, [batch, landing]);
+
+  return useMemo(() => ({ lead, joined }), [lead, joined]);
+}
+
+export interface AliaParticipantsProps {
+  participants: AliaChatParticipants;
+  /** Pressing the profile. Omitted, every avatar in it waves. */
+  onPress?: () => void;
+}
+
+const noop = () => undefined;
+
+/**
+ * The header's participants: the lead's avatar above its name, joined by the agents it consulted
+ * ("Alia + Sindi"). Place it in the chat's chrome; it is the conversation's title.
+ */
+export const AliaParticipants = memo(function AliaParticipants({
+  participants,
+  onPress,
+}: AliaParticipantsProps) {
+  const flights = useAliaFlights();
+  const agents = useMemo(
+    () =>
+      [participants.lead, ...participants.joined].map((agent) => ({
+        id: agent.id,
+        name: agent.name,
+        avatar: agent.character,
+      })),
+    [participants],
+  );
+  return (
+    <AgentProfile
+      agents={agents}
+      onPress={onPress ?? noop}
+      avatarRef={flights?.anchor(ANCHORS.profile)}
+      avatarHidden={flights?.isLanding(ANCHORS.profile)}
+    />
+  );
+});

package/src/components/AliaParticipantsHeader.tsx

@@ -0,0 +1,60 @@
+import { useAiChatShell } from '@oxy.so/bloom/ai-chat';
+import { Button } from '@oxy.so/bloom/button';
+import { RiMenuLine } from '@oxy.so/bloom/icons/RiMenuLine';
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { AliaChatParticipants } from '../lib/participants';
+import { AliaParticipants } from './AliaParticipants';
+
+export interface AliaParticipantsHeaderProps {
+  participants: AliaChatParticipants;
+  /** Pressing the participants. Omitted, every avatar in it waves. */
+  onPress?: () => void;
+}
+
+/**
+ * The conversation's header inside Bloom's AI chat shell: the participants as its title, between
+ * the shell's own buttons — the navigation drawer's on a narrow screen and the panel's below `xl`,
+ * as `AiChatMobileHeader` places them. That header's title is a string; this one is the
+ * conversation's participants, so a host puts this in `chrome.header` instead of drawing a title
+ * of its own. Outside a shell it is the participants alone.
+ */
+export const AliaParticipantsHeader = memo(function AliaParticipantsHeader({
+  participants,
+  onPress,
+}: AliaParticipantsHeaderProps) {
+  const shell = useAiChatShell();
+  const nav = shell?.compact === true && shell.navCollapsed && shell.hasNav;
+  const panel = shell?.compact === true && shell.hasPanel;
+  return (
+    <View className="min-h-12 shrink-0 flex-row items-center justify-between px-3 pt-3">
+      <View className="w-10">
+        {nav && shell ? (
+          <Button
+            size="md"
+            icon={RiMenuLine}
+            accessibilityLabel={shell.labels.openNavigation}
+            onPress={shell.openNav}
+            appearance="plain"
+            tone="neutral"
+          />
+        ) : null}
+      </View>
+      <View className="min-w-0 shrink items-center">
+        <AliaParticipants participants={participants} onPress={onPress} />
+      </View>
+      <View className="w-10 items-end">
+        {panel && shell ? (
+          <Button
+            size="md"
+            icon={shell.panelIcon}
+            accessibilityLabel={shell.labels.openPanel(shell.panelLabel)}
+            onPress={shell.openPanel}
+            appearance="plain"
+            tone="neutral"
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+});

package/src/components/AliaSharedConversation.tsx

@@ -0,0 +1,86 @@
+/**
+ * A conversation somebody shared (`GET /v1/shared/:token`, `docs/agent-embedding.md` §6), read
+ * by anybody with the link, signed in or not. It is the SDK's own thread (`AliaThread`), read-only:
+ * words, pictures and who wrote them — the server never sends a tool's output, which can hold the
+ * person's own data — and nothing to vote on, play, edit or regenerate.
+ */
+
+import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
+import type { AiChatThreadHandle } from '@oxy.so/bloom/ai-chat';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Text } from '@oxy.so/bloom/typography';
+import { useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
+import { type AliaChatLabels, AliaChatLabelsProvider, useLabels } from '../lib/labels';
+import { AliaRuntimeProvider } from '../runtime/config';
+import {
+  SharedConversationGoneError,
+  sharedMessages,
+  useSharedConversation,
+} from '../runtime/sharing';
+import { AliaThread } from './thread/AliaThread';
+
+export interface AliaSharedConversationProps {
+  /** The share link's token. */
+  token: string;
+  /** Alia's API origin; omitted, production. */
+  apiUrl?: string;
+  /** Overrides for the chat's own copy; omitted, English. */
+  labels?: Partial<AliaChatLabels>;
+  /** Where the 3D avatar's runtime is served from; omitted, Alia's shared copy. */
+  characterRuntimeUrl?: string;
+}
+
+function SharedThread({ token }: { token: string }) {
+  const { t } = useLabels();
+  const { data, error, isLoading } = useSharedConversation(token);
+  const threadRef = useRef<AiChatThreadHandle | null>(null);
+  const messages = useMemo(() => (data ? sharedMessages(data) : []), [data]);
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center">
+        <Loading />
+      </View>
+    );
+  }
+  if (error || !data) {
+    return (
+      <View className="flex-1 items-center justify-center px-6">
+        <Text className="text-center text-base text-muted-foreground">
+          {error instanceof SharedConversationGoneError
+            ? t('chat.sharedGone')
+            : t('chat.sharedFailed')}
+        </Text>
+      </View>
+    );
+  }
+  return (
+    <View className="flex-1">
+      {data.title ? (
+        <Text className="px-4 pt-4 text-lg font-semibold text-foreground" numberOfLines={2}>
+          {data.title}
+        </Text>
+      ) : null}
+      <AliaThread messages={messages} isLoading={false} threadRef={threadRef} readOnly />
+    </View>
+  );
+}
+
+export function AliaSharedConversation({
+  token,
+  apiUrl,
+  labels,
+  characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
+}: AliaSharedConversationProps) {
+  return (
+    <AgentAvatarProvider runtimeUrl={characterRuntimeUrl}>
+      <AliaChatLabelsProvider labels={labels}>
+        <AliaRuntimeProvider apiUrl={apiUrl}>
+          <SharedThread token={token} />
+        </AliaRuntimeProvider>
+      </AliaChatLabelsProvider>
+    </AgentAvatarProvider>
+  );
+}

package/src/components/AliaWelcomeMessage.tsx

@@ -1,8 +1,10 @@
+import { AgentAvatar } from '@oxy.so/bloom/agent-avatar';
 import { AvatarAnchor } from '@oxy.so/bloom/avatar-flight';
 import { Text } from '@oxy.so/bloom/typography';
 import { View } from 'react-native';
-import { ALIA_ANCHORS, useAliaFlights } from '../lib/flights';
+import { ANCHORS, useAliaFlights } from '../lib/flights';
 import { greetingLines } from '../lib/greeting';
+import { ALIA_LEAD, type AliaLead } from '../lib/participants';
 import { AliaAvatar } from './AliaAvatar';
 
 export interface AliaWelcomeMessageProps {
@@ -10,24 +12,35 @@ export interface AliaWelcomeMessageProps {
   greeting: string;
   subtitle?: string;
   markSize?: number;
+  /** Who greets: the agent the chat was opened on. Default Alia. */
+  lead?: AliaLead;
 }
 
 /**
- * The empty chat's greeting: the avatar above it, both centred, the address on top ("Hi Nate,")
+ * The empty chat's greeting: the lead's avatar above it, both centred, the address on top ("Hi Nate,")
  * and the rest under it (`greetingLines`). The Alia app and the SDK chat
  * draw exactly this. The greeting has a max width (`max-w-xs`, 20rem) so it sets in two lines at
  * any width, as a headline under a mark rather than one long line across a wide column. The
  * suggestions are not part of it; they sit over the composer (`ComposerSuggestions`).
  */
-export function AliaWelcomeMessage({ greeting, subtitle, markSize = 88 }: AliaWelcomeMessageProps) {
+export function AliaWelcomeMessage({
+  greeting,
+  subtitle,
+  markSize = 88,
+  lead = ALIA_LEAD,
+}: AliaWelcomeMessageProps) {
   const flights = useAliaFlights();
-  const avatar = <AliaAvatar size={markSize} interactive />;
+  const avatar = lead.isAlia ? (
+    <AliaAvatar size={markSize} interactive />
+  ) : (
+    <AgentAvatar character={lead.character} size={markSize} label={lead.name} interactive />
+  );
   return (
     <View className="items-center gap-2">
       <View className="items-center justify-center gap-4">
         {/* It flies up into the header's profile when the conversation begins. */}
         {flights ? (
-          <AvatarAnchor flights={flights} anchor={ALIA_ANCHORS.welcome}>
+          <AvatarAnchor flights={flights} anchor={ANCHORS.welcome}>
             {avatar}
           </AvatarAnchor>
         ) : (

package/src/components/Image.tsx

@@ -0,0 +1,12 @@
+import { Image as ExpoImage, type ImageProps } from 'expo-image';
+import type { ComponentType } from 'react';
+import { styled } from 'react-native-css';
+
+/**
+ * `expo-image` with `className`. On web the class reaches the DOM either way; on native
+ * react-native-css maps classes to styles only for react-native's own primitives, so anything
+ * else drops them silently unless it is wrapped once, here, at module scope.
+ */
+export const Image: ComponentType<ImageProps & { className?: string }> = styled(ExpoImage, {
+  className: 'style',
+});