@alia.onl/sdk 15.8.0 → 19.1.0

package/src/components/AliaChatHeader.tsx

@@ -7,19 +7,16 @@ import {
 } from '@oxy.so/bloom/dropdown-menu';
 import { RiArrowLeftLine, RiDeleteBin6Line, RiMoreFill, RiShare2Line } from '@oxy.so/bloom/icons';
 import { PageHeader } from '@oxy.so/bloom/page-header';
-import { AgentProfile } from '@oxy.so/bloom/agent-reply';
-import { memo, type ReactNode, useMemo } from 'react';
-import { readAgentCharacter } from '../lib/agent-character';
+import { memo, type ReactNode } from 'react';
 import { useLabels } from '../lib/labels';
-import { ALIA_ANCHORS, useAliaFlights } from '../lib/flights';
-import { ALIA_AVATAR } from './AliaAvatar';
-import type { AliaChatAgent } from './AliaChatContent';
+import type { AliaChatParticipants } from '../lib/participants';
+import { AliaParticipants } from './AliaParticipants';
 
 export interface AliaChatHeaderProps {
   /** The chat has messages: there is something to share and to clear. */
   hasMessages: boolean;
-  /** Delegated agents that have answered: they join Alia in the profile, up to three in all. */
-  agents?: AliaChatAgent[];
+  /** Who is in the conversation (`AliaChatState.participants`): the bar's title. */
+  participants: AliaChatParticipants;
   /** Clears the conversation, from the menu. */
   onClear: () => void;
   /** Draws the back button at the start of the bar; omit where there is nowhere to go back to. */
@@ -32,44 +29,19 @@ export interface AliaChatHeaderProps {
   leading?: ReactNode;
   /** The host's own actions, before share and the menu. */
   trailing?: ReactNode;
-  /** Pressing Alia's avatar or name. Omitted, the avatar waves. */
+  /** Pressing the participants. Omitted, every avatar in it waves. */
   onProfilePress?: () => void;
 }
 
-/**
- * Alia's profile, Bloom's `AgentProfile`: her avatar above a name capsule, joined by the agents
- * that answered ("Alia + Lumi + Atlas"). Pressing it makes every avatar wave.
- */
-function AliaProfile({ agents, onPress }: { agents: AliaChatAgent[]; onPress?: () => void }) {
-  const flights = useAliaFlights();
-  const team = useMemo(
-    () => [
-      { id: 'alia', name: 'Alia', avatar: ALIA_AVATAR },
-      ...agents.map((agent) => ({ ...agent, avatar: readAgentCharacter(agent.character) })),
-    ],
-    [agents],
-  );
-  return (
-    <AgentProfile
-      agents={team}
-      onPress={onPress ?? noop}
-      avatarRef={flights?.anchor(ALIA_ANCHORS.profile)}
-      avatarHidden={flights?.isLanding(ALIA_ANCHORS.profile)}
-    />
-  );
-}
-
-const noop = () => undefined;
-
 /**
  * The chat's top bar: Bloom's `PageHeader`, set up as the shell sets it up for the
- * agents' screens (inline, no scrim, no safe area). Alia's profile is its title only once
- * there is a conversation: the empty chat already shows the avatar beside its greeting,
+ * agents' screens (inline, no scrim, no safe area). The participants are its title only once
+ * there is a conversation: the empty chat already shows the lead's avatar beside its greeting,
  * so the bar carries just its buttons until then.
  */
 export const AliaChatHeader = memo(function AliaChatHeader({
   hasMessages,
-  agents = [],
+  participants,
   onClear,
   onBack,
   onShare,
@@ -98,7 +70,11 @@ export const AliaChatHeader = memo(function AliaChatHeader({
           </ButtonGroup>
         ) : undefined)
       }
-      title={hasMessages ? <AliaProfile agents={agents} onPress={onProfilePress} /> : undefined}
+      title={
+        hasMessages ? (
+          <AliaParticipants participants={participants} onPress={onProfilePress} />
+        ) : undefined
+      }
       titleAlign="center"
       actions={
         <>

package/src/components/AliaChatScreen.tsx

@@ -12,9 +12,9 @@
  * />
  * ```
  *
- * Voice is opt-in — pass `voiceSession={VoiceSession}` from
- * `@alia.onl/sdk/voice` to offer calls. Without it the screen is text-only and
- * `react-native-audio-api` never enters the bundle.
+ * Voice is part of the screen: the button, the call bar, the notices and the transcript in the
+ * thread. `voice={false}` makes it text-only; `voice={{ canStartVoice, onCallEnded, … }}` brings
+ * the host's own callbacks. The call loads on the first one.
  */
 
 import type React from 'react';
@@ -24,16 +24,31 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
 import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
 import { KeyboardAvoidingView } from '../lib/keyboard';
-import { AliaChatContent, type AliaChatContentProps } from './AliaChatContent';
+import {
+  type AliaChatAgentRef,
+  AliaChatContent,
+  type AliaChatContentProps,
+} from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
 import type { AliaSuggestion } from '../types';
 import type { AliaChatLabels } from '../lib/labels';
-import type { VoiceSessionComponent } from '../types';
+import type { AliaToolRenderers } from '../lib/tool-renderers';
+import { useShareHandler } from '../hooks/useShareHandler';
+import type { AliaHostTools } from '../runtime/host-tools';
+import type { AliaConversationShare } from '../runtime/sharing';
 
 export interface AliaChatScreenProps {
+  /** The agent the screen is with, any agent the person can reach; omitted, Alia. */
+  agent?: AliaChatAgentRef;
   /** App context injected into system prompt */
   clientContext?: string;
-  /** Kaana routing profile. Checked against `GET /catalogue`; omitted, the build's preference is used. */
+  /** The UI effects this app performs for the lead (see `AliaChatContentProps.hostTools`). */
+  hostTools?: AliaHostTools;
+  /** The app's own drawing of catalogue tools' results, keyed `<app>:<tool>`. */
+  toolRenderers?: AliaToolRenderers;
+  /** The lead's feature gate refused something: show the app's upsell for `key`. */
+  onFeatureLocked?: (key: string) => void;
+  /** The power level (`auto`, `instant`, `medium`, `high`, `xhigh`, `pro`, `ultra`) or an exact `publisher/model` every turn is sent with; omitted, the server picks. */
   model?: string;
   /** API URL override */
   apiUrl?: string;
@@ -41,8 +56,11 @@ export interface AliaChatScreenProps {
   onBack?: () => void;
   /** Optional header left content instead of the back button (e.g. a drawer's menu button) */
   headerLeft?: React.ReactNode;
-  /** Draws the header's share button once there is a conversation; omitted, no share button. */
-  onShare?: () => void;
+  /**
+   * Draws the header's share button once there is a conversation; omitted, no share button.
+   * Pressed, the conversation's read-only link is minted and handed here for the app to show.
+   */
+  onShare?: (share: AliaConversationShare) => void;
   /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
   headerMenu?: React.ReactNode;
   /** Optional header right action (e.g., settings button) */
@@ -53,16 +71,14 @@ export interface AliaChatScreenProps {
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
   welcomeSuggestions?: AliaSuggestion[];
-  /** The agents the host knows, with their look: a delegation's thinking avatar is drawn from them until the agent answers. */
-  agents?: AliaChatContentProps['agents'];
   /** What the host found for the typed text, shown over the composer (see `onSuggestionQuery`). */
   suggestionMatches?: AliaSuggestion[];
   /** The typed text, once typing has settled, for the host to search suggestions with. */
   onSuggestionQuery?: (query: string) => void;
   /** Dark-mode flag — forwarded to the ambient wave overlay. */
   isDarkMode?: boolean;
-  /** Voice capability — `VoiceSession` from `@alia.onl/sdk/voice`. */
-  voiceSession?: VoiceSessionComponent;
+  /** The chat's voice call: on by default, `false` for text only, an object for the host's callbacks. */
+  voice?: AliaChatContentProps['voice'];
   /** Overrides for the chat's own copy (header, composer, plan, research…); omitted, English. */
   labels?: Partial<AliaChatLabels>;
   /** Where the 3D avatar's runtime is served from; omitted, Alia's shared copy (`ALIA_CHARACTER_RUNTIME_URL`). */
@@ -70,7 +86,11 @@ export interface AliaChatScreenProps {
 }
 
 export function AliaChatScreen({
+  agent,
   clientContext,
+  hostTools,
+  toolRenderers,
+  onFeatureLocked,
   model,
   apiUrl,
   onBack,
@@ -81,11 +101,10 @@ export function AliaChatScreen({
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
-  agents,
   suggestionMatches,
   onSuggestionQuery,
   isDarkMode,
-  voiceSession,
+  voice,
   labels,
   characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
 }: AliaChatScreenProps) {
@@ -100,20 +119,23 @@ export function AliaChatScreen({
   // keyboard's height minus the inset: the composer sits on the keyboard, not
   // one inset above it. (Its parent-relative layout would read as zero overlap
   // this deep in a host's tree, which is why the offset is measured.)
-  const header = useCallback<NonNullable<AliaChatContentProps['header']>>(
-    ({ hasMessages, clear, agents: answered }) => (
-      <AliaChatHeader
-        hasMessages={hasMessages}
-        agents={answered}
-        onClear={clear}
-        onBack={onBack}
-        onShare={onShare}
-        menu={headerMenu}
-        leading={headerLeft}
-        trailing={headerRight}
-      />
-    ),
-    [onBack, onShare, headerMenu, headerLeft, headerRight],
+  const share = useShareHandler(onShare);
+  const chrome = useCallback<NonNullable<AliaChatContentProps['chrome']>>(
+    ({ hasMessages, startOver, participants, conversationId }) => ({
+      header: (
+        <AliaChatHeader
+          hasMessages={hasMessages}
+          participants={participants}
+          onClear={startOver}
+          onBack={onBack}
+          onShare={share && conversationId !== undefined ? () => share(conversationId) : undefined}
+          menu={headerMenu}
+          leading={headerLeft}
+          trailing={headerRight}
+        />
+      ),
+    }),
+    [onBack, share, headerMenu, headerLeft, headerRight],
   );
 
   return (
@@ -124,19 +146,22 @@ export function AliaChatScreen({
       >
         <KeyboardAvoidingView behavior="padding" automaticOffset style={{ flex: 1 }}>
           <AliaChatContent
+            agent={agent}
             clientContext={clientContext}
+            hostTools={hostTools}
+            toolRenderers={toolRenderers}
+            onFeatureLocked={onFeatureLocked}
             model={model}
             apiUrl={apiUrl}
             welcomeGreeting={welcomeGreeting}
             welcomeSubtitle={welcomeSubtitle}
             welcomeSuggestions={welcomeSuggestions}
-            agents={agents}
             suggestionMatches={suggestionMatches}
             onSuggestionQuery={onSuggestionQuery}
             isDarkMode={isDarkMode}
-            voiceSession={voiceSession}
+            voice={voice}
             labels={labels}
-            header={header}
+            chrome={chrome}
           />
         </KeyboardAvoidingView>
       </View>

package/src/components/AliaChatSheet.tsx

@@ -1,7 +1,15 @@
 import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
 import { AvatarFlightLayer, useAvatarFlights } from '@oxy.so/bloom/avatar-flight';
 import { BottomSheet, type BottomSheetRef } from '@oxy.so/bloom/bottom-sheet';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { useWindowDimensions, View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
@@ -9,9 +17,20 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BREAKPOINTS } from '@oxy.so/bloom/styles';
 import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
 import type { AliaChatLabels } from '../lib/labels';
-import type { VoiceSessionComponent } from '../types';
-import { AliaChatContent, type AliaChatContentProps, type AliaTurn } from './AliaChatContent';
+import type { AliaToolRenderers } from '../lib/tool-renderers';
+import { useShareHandler } from '../hooks/useShareHandler';
+import type { AliaRuntimeHost } from '../runtime/config';
+import type { AliaHostTools } from '../runtime/host-tools';
+import type { AliaConversationShare } from '../runtime/sharing';
+import { useThoughtStore } from '../runtime/thought-store';
+import type { AliaTurn } from '../hooks/useChatComposer';
+import {
+  type AliaChatAgentRef,
+  AliaChatContent,
+  type AliaChatContentProps,
+} from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
+import { ThoughtPanel } from './thought/ThoughtPanel';
 import type { AliaSuggestion } from '../types';
 
 /**
@@ -23,13 +42,24 @@ import type { AliaSuggestion } from '../types';
  */
 const SHEET_RADIUS = 40;
 
+/** How much of the screen's height the sheet of a turn's work takes. */
+const THOUGHT_SHEET_HEIGHT = 0.7;
+
 /** The sheet floats (detached) from tablet width up; on a phone it is flush with the screen edges. */
 const DETACHED_FROM = BREAKPOINTS.md;
 
 export interface AliaChatSheetProps {
+  /** The agent the sheet opens on, any agent the person can reach; omitted, Alia. */
+  agent?: AliaChatAgentRef;
   /** App context injected into system prompt */
   clientContext?: string;
-  /** Kaana routing profile. Checked against `GET /catalogue`; omitted, the build's preference is used. */
+  /** The UI effects this app performs for the lead (see `AliaChatContentProps.hostTools`). */
+  hostTools?: AliaHostTools;
+  /** The app's own drawing of catalogue tools' results, keyed `<app>:<tool>`. */
+  toolRenderers?: AliaToolRenderers;
+  /** The lead's feature gate refused something: show the app's upsell for `key`. */
+  onFeatureLocked?: (key: string) => void;
+  /** The power level (`auto`, `instant`, `medium`, `high`, `xhigh`, `pro`, `ultra`) or an exact `publisher/model` every turn is sent with; omitted, the server picks. */
   model?: string;
   /** API URL override */
   apiUrl?: string;
@@ -39,26 +69,23 @@ export interface AliaChatSheetProps {
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
   welcomeSuggestions?: AliaSuggestion[];
-  /** The agents the host knows, with their look: a delegation's thinking avatar is drawn from them until the agent answers. */
-  agents?: AliaChatContentProps['agents'];
   /** What the host found for the typed text, shown over the composer (see `onSuggestionQuery`). */
   suggestionMatches?: AliaSuggestion[];
   /** The typed text, once typing has settled, for the host to search suggestions with. */
   onSuggestionQuery?: (query: string) => void;
   /** Dark-mode flag — forwarded to the ambient wave overlay (defaults to the sheet's own color scheme). */
   isDarkMode?: boolean;
-  /**
-   * Voice capability — pass `VoiceSession` from `@alia.onl/sdk/voice` to offer
-   * voice calls. Omitted, the sheet is text-only and `react-native-audio-api` never
-   * enters the bundle.
-   */
-  voiceSession?: VoiceSessionComponent;
+  /** The chat's voice call: on by default, `false` for text only, an object for the host's callbacks. */
+  voice?: AliaChatContentProps['voice'];
   /** Overrides for the chat's own copy (header, composer, plan, research…); omitted, English. */
   labels?: Partial<AliaChatLabels>;
   /** Where the 3D avatar's runtime is served from; omitted, Alia's shared copy (`ALIA_CHARACTER_RUNTIME_URL`). */
   characterRuntimeUrl?: string;
-  /** Draws the header's share button once there is a conversation; omitted, no share button. */
-  onShare?: () => void;
+  /**
+   * Draws the header's share button once there is a conversation; omitted, no share button.
+   * Pressed, the conversation's read-only link is minted and handed here for the app to show.
+   */
+  onShare?: (share: AliaConversationShare) => void;
   /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
   headerMenu?: React.ReactNode;
 }
@@ -76,17 +103,20 @@ export interface AliaChatSheetRef {
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
   (
     {
+      agent,
       clientContext,
+      hostTools,
+      toolRenderers,
+      onFeatureLocked,
       model,
       apiUrl,
       welcomeGreeting,
       welcomeSubtitle,
       welcomeSuggestions,
-      agents,
       suggestionMatches,
       onSuggestionQuery,
       isDarkMode,
-      voiceSession,
+      voice,
       labels,
       characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
       onShare,
@@ -133,12 +163,32 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       return true;
     }, []);
 
+    // What a turn did — its steps, its sources, its reasoning — opens in a sheet over the
+    // conversation when the reader asks for it. A turn that begins using tools does not open one by
+    // itself: on a phone that would cover the answer being written.
+    const thoughtRef = useRef<BottomSheetRef>(null);
+    const closeThought = useCallback(() => {
+      useThoughtStore.getState().close();
+      thoughtRef.current?.dismiss();
+    }, []);
+    const runtime = useMemo<AliaRuntimeHost>(
+      () => ({
+        showThought: (opening) => {
+          if (opening === 'automatic') return false;
+          thoughtRef.current?.present();
+          return true;
+        },
+      }),
+      [],
+    );
+
     const handleDismiss = useCallback(() => {
       conversationStopRef.current?.();
       mainStopRef.current?.();
       conversationRef.current?.dismiss();
       mainRef.current?.dismiss();
-    }, []);
+      closeThought();
+    }, [closeThought]);
 
     useImperativeHandle(
       ref,
@@ -157,10 +207,11 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       mainStopRef.current?.();
       conversationStopRef.current?.();
       conversationRef.current?.dismiss();
+      closeThought();
       return true;
-    }, []);
+    }, [closeThought]);
 
-    const { width } = useWindowDimensions();
+    const { width, height } = useWindowDimensions();
     const detached = width >= DETACHED_FROM;
     // Flush with the screen edge the sheet runs behind the home indicator: the composer clears it.
     const { bottom } = useSafeAreaInsets();
@@ -170,13 +221,40 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
 
     // The avatars fly between the two sheets: one controller, one layer.
     const flights = useAvatarFlights();
+    // The conversation's bar: back to the main screen, the participants, share and the menu.
+    const share = useShareHandler(onShare);
+    const conversationChrome = useCallback<NonNullable<AliaChatContentProps['chrome']>>(
+      ({ participants, conversationId }) => ({
+        header: (
+          <View className="pt-8">
+            <AliaChatHeader
+              participants={participants}
+              hasMessages
+              onClear={closeConversation}
+              onBack={closeConversation}
+              onShare={
+                share && conversationId !== undefined ? () => share(conversationId) : undefined
+              }
+              menu={headerMenu}
+            />
+          </View>
+        ),
+      }),
+      [closeConversation, share, headerMenu],
+    );
     const shared = {
       flights,
+      layout: 'sheet' as const,
+      agent,
       clientContext,
+      hostTools,
+      toolRenderers,
+      onFeatureLocked,
       model,
       apiUrl,
       isDarkMode: isDarkMode ?? isDark,
-      voiceSession,
+      voice,
+      runtime,
       bottomInset: detached ? 0 : bottom,
       labels,
     };
@@ -202,7 +280,6 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             welcomeGreeting={welcomeGreeting}
             welcomeSubtitle={welcomeSubtitle}
             welcomeSuggestions={welcomeSuggestions}
-            agents={agents}
             suggestionMatches={suggestionMatches}
             onSuggestionQuery={onSuggestionQuery}
             presentedProgress={mainProgress}
@@ -227,25 +304,22 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
               {...shared}
               initialTurn={conversation.turn}
               presentedProgress={conversationProgress}
-              agents={agents}
               onStopReady={registerConversationStop}
-              // The bar is the conversation's: back to the main screen, the profile, share and
-              // the menu.
-              header={({ agents }) => (
-                <View className="pt-8">
-                  <AliaChatHeader
-                    hasMessages
-                    agents={agents}
-                    onClear={closeConversation}
-                    onBack={closeConversation}
-                    onShare={onShare}
-                    menu={headerMenu}
-                  />
-                </View>
-              )}
+              chrome={conversationChrome}
             />
           </BottomSheet>
         ) : null}
+        <BottomSheet
+          ref={thoughtRef}
+          detached={detached}
+          scrollable={false}
+          onDismiss={() => useThoughtStore.getState().close()}
+          style={sheetStyle}
+        >
+          <View style={{ height: height * THOUGHT_SHEET_HEIGHT }}>
+            <ThoughtPanel onClose={closeThought} />
+          </View>
+        </BottomSheet>
         <AvatarFlightLayer flights={flights} />
       </AgentAvatarProvider>
     );

package/src/components/AliaComposer.tsx

@@ -321,7 +321,7 @@ function AliaComposerBody<T extends AliaSuggestion>({
           busy={busy}
           onStop={onStop}
           disabled={disabled || intake.isBusy || !hasContent}
-          placeholder={placeholder ?? labels.placeholder}
+          placeholder={placeholder ?? labels.placeholder('Alia')}
           addMenu={addMenu ?? EMPTY_ADD_MENU}
           onAddMenuSelect={onAddMenuSelect}
           permissions={modes ?? NO_MODES}