@alia.onl/sdk 12.0.0 → 13.1.0

package/src/components/AliaChatScreen.tsx

@@ -23,7 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KeyboardAvoidingView } from '../lib/keyboard';
 import { AliaChatContent, type AliaChatContentProps } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
-import type { WelcomeSuggestion } from './AliaWelcomeMessage';
+import type { AliaSuggestion } from '../types';
 import type { AliaChatLabels } from '../lib/labels';
 import type { VoiceSessionComponent } from '../types';
 
@@ -34,8 +34,14 @@ export interface AliaChatScreenProps {
   model?: string;
   /** API URL override */
   apiUrl?: string;
-  /** Optional header left action (e.g., back button) */
+  /** Draws the header's back button; omit where there is nowhere to go back to. */
+  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;
+  /** 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) */
   headerRight?: React.ReactNode;
   /** Welcome screen greeting */
@@ -43,42 +49,44 @@ export interface AliaChatScreenProps {
   /** Welcome screen subtitle */
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
-  welcomeSuggestions?: WelcomeSuggestion[];
+  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;
   /** 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;
 }
 
 export function AliaChatScreen({
   clientContext,
   model,
   apiUrl,
+  onBack,
   headerLeft,
+  onShare,
+  headerMenu,
   headerRight,
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
+  agents,
+  suggestionMatches,
+  onSuggestionQuery,
   isDarkMode,
   voiceSession,
   labels,
+  characterRuntimeUrl,
 }: AliaChatScreenProps) {
   const insets = useSafeAreaInsets();
-  const header = useCallback<NonNullable<AliaChatContentProps['header']>>(
-    ({ hasMessages, clear, markState }) => (
-      <AliaChatHeader
-        markState={markState}
-        hasMessages={hasMessages}
-        onClear={clear}
-        leading={headerLeft}
-        trailing={headerRight}
-      />
-    ),
-    [headerLeft, headerRight],
-  );
-
   // The screen owns the whole window, so it keeps its composer out of both
   // system bars: the top inset clears the status bar, the bottom one the
   // gesture bar or home indicator an edge-to-edge app draws over.
@@ -89,6 +97,22 @@ 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],
+  );
+
   return (
     <View
       className="flex-1 bg-background-full"
@@ -102,9 +126,13 @@ export function AliaChatScreen({
           welcomeGreeting={welcomeGreeting}
           welcomeSubtitle={welcomeSubtitle}
           welcomeSuggestions={welcomeSuggestions}
+          agents={agents}
+          suggestionMatches={suggestionMatches}
+          onSuggestionQuery={onSuggestionQuery}
           isDarkMode={isDarkMode}
           voiceSession={voiceSession}
           labels={labels}
+          characterRuntimeUrl={characterRuntimeUrl}
           header={header}
         />
       </KeyboardAvoidingView>

package/src/components/AliaChatSheet.tsx

@@ -1,11 +1,15 @@
+import { AvatarFlightLayer, useAvatarFlights } from '@oxy.so/bloom/avatar-flight';
 import { BottomSheet, type BottomSheetRef } from '@oxy.so/bloom/bottom-sheet';
-import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { useColorScheme, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BREAKPOINTS } from '@oxy.so/bloom/styles';
 import type { AliaChatLabels } from '../lib/labels';
 import type { VoiceSessionComponent } from '../types';
-import { AliaChatContent, type AliaChatContentProps } from './AliaChatContent';
+import { AliaChatContent, type AliaChatContentProps, type AliaTurn } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
-import type { WelcomeSuggestion } from './AliaWelcomeMessage';
+import type { AliaSuggestion } from '../types';
 
 /**
  * TODO(bloom): drop this once Bloom's sheet is rounder by default. Its detached
@@ -16,6 +20,9 @@ import type { WelcomeSuggestion } from './AliaWelcomeMessage';
  */
 const SHEET_RADIUS = 40;
 
+/** 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 {
   /** App context injected into system prompt */
   clientContext?: string;
@@ -28,7 +35,13 @@ export interface AliaChatSheetProps {
   /** Welcome screen subtitle */
   welcomeSubtitle?: string;
   /** Welcome screen suggestions */
-  welcomeSuggestions?: WelcomeSuggestion[];
+  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;
   /**
@@ -39,6 +52,12 @@ export interface AliaChatSheetProps {
   voiceSession?: VoiceSessionComponent;
   /** 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;
+  /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
+  headerMenu?: React.ReactNode;
 }
 
 export interface AliaChatSheetRef {
@@ -55,83 +74,158 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       welcomeGreeting,
       welcomeSubtitle,
       welcomeSuggestions,
+      agents,
+      suggestionMatches,
+      onSuggestionQuery,
       isDarkMode,
       voiceSession,
       labels,
+      characterRuntimeUrl,
+      onShare,
+      headerMenu,
     },
     ref,
   ) => {
-    const isDark = useColorScheme() === 'dark';
-    const sheetRef = useRef<BottomSheetRef>(null);
-    const chatStopRef = useRef<(() => void) | null>(null);
+    // Bloom's resolved mode, not the system's scheme.
+    const { isDark } = useTheme();
+    const mainRef = useRef<BottomSheetRef>(null);
+    const conversationRef = useRef<BottomSheetRef>(null);
+    // Each sheet's chat registers its own canceller; closing a sheet stops its own turn.
+    const mainStopRef = useRef<(() => void) | null>(null);
+    const conversationStopRef = useRef<(() => void) | null>(null);
+
+    // The conversation sheet, stacked over the main one while a chat is open. The key makes
+    // every conversation a fresh chat.
+    const [conversation, setConversation] = useState<{ key: number; turn: AliaTurn } | null>(null);
 
-    const stopChat = useCallback(() => {
-      chatStopRef.current?.();
+    const registerMainStop = useCallback((stop: (() => void) | null) => {
+      mainStopRef.current = stop;
+    }, []);
+    const registerConversationStop = useCallback((stop: (() => void) | null) => {
+      conversationStopRef.current = stop;
     }, []);
 
-    const registerChatStop = useCallback((stop: (() => void) | null) => {
-      chatStopRef.current = stop;
+    const startConversation = useCallback((turn: AliaTurn) => {
+      setConversation((current) => ({ key: (current?.key ?? 0) + 1, turn }));
+    }, []);
+    useEffect(() => {
+      if (conversation) conversationRef.current?.present();
+    }, [conversation]);
+
+    // Back, and the menu's Clear: close the conversation, back to the main screen underneath.
+    const closeConversation = useCallback(() => {
+      conversationStopRef.current?.();
+      conversationRef.current?.dismiss();
+    }, []);
+    const onConversationDismissAttempt = useCallback(() => {
+      conversationStopRef.current?.();
+      return true;
     }, []);
 
     const handleDismiss = useCallback(() => {
-      stopChat();
-      sheetRef.current?.dismiss();
-    }, [stopChat]);
+      conversationStopRef.current?.();
+      mainStopRef.current?.();
+      conversationRef.current?.dismiss();
+      mainRef.current?.dismiss();
+    }, []);
 
     useImperativeHandle(
       ref,
-      () => ({ present: () => sheetRef.current?.present(), dismiss: handleDismiss }),
+      () => ({ present: () => mainRef.current?.present(), dismiss: handleDismiss }),
       [handleDismiss],
     );
 
-    // A drag, backdrop press, Back or Escape starts closing here: stop the turn first.
-    const onDismissAttempt = useCallback(() => {
-      stopChat();
+    // Closing the main sheet (a drag, backdrop press, Back or Escape) closes what is stacked on it.
+    const onMainDismissAttempt = useCallback(() => {
+      mainStopRef.current?.();
+      conversationStopRef.current?.();
+      conversationRef.current?.dismiss();
       return true;
-    }, [stopChat]);
-
-    // The top padding clears the 28px drag handle, which Bloom floats over the content instead
-    // of reserving room for. Stable, so the chat's memoised header only re-renders when it must.
-    const header = useCallback<NonNullable<AliaChatContentProps['header']>>(
-      ({ hasMessages, clear, markState }) => (
-        <View className="pt-8">
-          <AliaChatHeader
-            markState={markState}
-            hasMessages={hasMessages}
-            onClear={clear}
-            onClose={handleDismiss}
-          />
-        </View>
-      ),
-      [handleDismiss],
-    );
+    }, []);
+
+    const { width } = 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();
+    const sheetStyle = detached
+      ? { maxWidth: 600, alignSelf: 'center' as const, borderRadius: SHEET_RADIUS }
+      : undefined;
+
+    // The avatars fly between the two sheets: one controller, one layer.
+    const flights = useAvatarFlights();
+    const shared = {
+      flights,
+      clientContext,
+      model,
+      apiUrl,
+      isDarkMode: isDarkMode ?? isDark,
+      voiceSession,
+      bottomInset: detached ? 0 : bottom,
+      labels,
+      characterRuntimeUrl,
+    };
 
     return (
-      <BottomSheet
-        ref={sheetRef}
-        detached
-        scrollable={false}
-        manualActivation
-        onDismissAttempt={onDismissAttempt}
-        onDismiss={stopChat}
-        style={{ maxWidth: 600, alignSelf: 'center', borderRadius: SHEET_RADIUS }}
-      >
-        <AliaChatContent
-          clientContext={clientContext}
-          model={model}
-          apiUrl={apiUrl}
-          welcomeGreeting={welcomeGreeting}
-          welcomeSubtitle={welcomeSubtitle}
-          welcomeSuggestions={welcomeSuggestions}
-          isDarkMode={isDarkMode ?? isDark}
-          voiceSession={voiceSession}
-          labels={labels}
-          onStopReady={registerChatStop}
-          // The top padding clears the 28px drag handle, which Bloom floats over the content
-          // instead of reserving room for.
-          header={header}
-        />
-      </BottomSheet>
+      <>
+        <BottomSheet
+          ref={mainRef}
+          detached={detached}
+          scrollable={false}
+          manualActivation
+          onDismissAttempt={onMainDismissAttempt}
+          onDismiss={() => setConversation(null)}
+          style={sheetStyle}
+        >
+          {/* The main screen: the greeting, the suggestions and the composer. A first turn opens
+              the conversation in its own sheet over this one, so this chat stays empty. */}
+          <AliaChatContent
+            {...shared}
+            welcomeGreeting={welcomeGreeting}
+            welcomeSubtitle={welcomeSubtitle}
+            welcomeSuggestions={welcomeSuggestions}
+            agents={agents}
+            suggestionMatches={suggestionMatches}
+            onSuggestionQuery={onSuggestionQuery}
+            onStopReady={registerMainStop}
+            onStart={startConversation}
+          />
+        </BottomSheet>
+
+        {conversation ? (
+          <BottomSheet
+            key={conversation.key}
+            ref={conversationRef}
+            detached={detached}
+            scrollable={false}
+            manualActivation
+            onDismissAttempt={onConversationDismissAttempt}
+            onDismiss={() => setConversation(null)}
+            style={sheetStyle}
+          >
+            <AliaChatContent
+              {...shared}
+              initialTurn={conversation.turn}
+              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>
+              )}
+            />
+          </BottomSheet>
+        ) : null}
+        <AvatarFlightLayer flights={flights} />
+      </>
     );
   },
 );

package/src/components/AliaWelcomeMessage.tsx

@@ -1,71 +1,44 @@
-import { Item } from '@oxy.so/bloom/item';
+import { AvatarAnchor } from '@oxy.so/bloom/avatar-flight';
 import { Text } from '@oxy.so/bloom/typography';
 import { View } from 'react-native';
-import Animated, { FadeIn } from 'react-native-reanimated';
-import type { WelcomeSuggestion } from '../types';
+import { ALIA_ANCHORS, useAliaFlights } from '../lib/flights';
+import { greetingLines } from '../lib/greeting';
 import { AliaAvatar } from './AliaAvatar';
 
-export type { WelcomeSuggestion };
-
 export interface AliaWelcomeMessageProps {
   /** The greeting, e.g. "Hi Nate, what's on your mind?". */
   greeting: string;
   subtitle?: string;
-  suggestions?: WelcomeSuggestion[];
-  onSuggestionPress?: (text: string) => void;
   markSize?: number;
-  /** Leave the avatar out, where the surrounding header already shows it. */
-  hideMark?: boolean;
 }
 
 /**
- * The empty chat, as the Alia app has it: the avatar beside the greeting at display
- * size, centred (stacked on a phone, side by side from `md`), and the suggestions as
- * compact rows under it.
+ * The empty chat's greeting: the 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,
-  suggestions = [],
-  onSuggestionPress,
-  markSize = 38,
-  hideMark = false,
-}: AliaWelcomeMessageProps) {
+export function AliaWelcomeMessage({ greeting, subtitle, markSize = 88 }: AliaWelcomeMessageProps) {
+  const flights = useAliaFlights();
+  const avatar = <AliaAvatar size={markSize} interactive />;
   return (
-    <View className="flex-1 items-center justify-center gap-6 px-4">
-      <View className="items-center gap-2">
-        <View className="flex-col items-center justify-center gap-3 md:flex-row">
-          {hideMark ? null : <AliaAvatar size={markSize} interactive />}
-          <Text
-            selectable={false}
-            className="text-center text-4xl tracking-tight text-text-primary md:text-left"
-          >
-            {greeting}
-          </Text>
-        </View>
-        {subtitle ? (
-          <Text className="text-center text-lg text-text-secondary">{subtitle}</Text>
-        ) : null}
+    <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}>
+            {avatar}
+          </AvatarAnchor>
+        ) : (
+          avatar
+        )}
+        <Text selectable={false} className="max-w-xs shrink text-center text-4xl text-text-primary">
+          {greetingLines(greeting).join('\n')}
+        </Text>
       </View>
-
-      {suggestions.length > 0 ? (
-        <Animated.View
-          entering={FadeIn.duration(400)}
-          accessibilityRole="list"
-          className="w-full max-w-[768px]"
-        >
-          {suggestions.map((item) => (
-            <Item
-              key={item.id}
-              density="compact"
-              accessibilityRole="button"
-              accessibilityLabel={item.title}
-              onPress={() => onSuggestionPress?.(item.description)}
-              title={<Text numberOfLines={1}>{item.title}</Text>}
-              subtitle={item.description}
-            />
-          ))}
-        </Animated.View>
+      {subtitle ? (
+        <Text className="text-center text-lg text-text-secondary">{subtitle}</Text>
       ) : null}
     </View>
   );

package/src/components/ComposerSuggestions.tsx

@@ -0,0 +1,45 @@
+import { Item } from '@oxy.so/bloom/item';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import type { Completion } from '../lib/suggestions';
+import type { AliaSuggestion } from '../types';
+
+/**
+ * Suggestions over the composer, one line each, the typed part highlighted and the row the
+ * keyboard is on marked. The Alia app and the SDK chat draw exactly this.
+ */
+export function ComposerSuggestions<T extends AliaSuggestion>({
+  completions,
+  selected,
+  onPick,
+}: {
+  completions: readonly Completion<T>[];
+  selected: number;
+  onPick: (suggestion: T) => void;
+}) {
+  if (completions.length === 0) return null;
+  return (
+    <View accessibilityRole="list" className="w-full max-w-[768px] self-center">
+      {completions.map(({ suggestion, matchStart, matchEnd }, index) => {
+        const { text } = suggestion;
+        return (
+          <Item
+            key={suggestion.id}
+            density="compact"
+            highlighted={index === selected}
+            accessibilityRole="button"
+            accessibilityLabel={text}
+            onPress={() => onPick(suggestion)}
+            title={
+              <Text numberOfLines={1}>
+                {text.slice(0, matchStart)}
+                <Text className="font-medium text-primary">{text.slice(matchStart, matchEnd)}</Text>
+                {text.slice(matchEnd)}
+              </Text>
+            }
+          />
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Markdown.tsx

@@ -1,30 +1,15 @@
 import React, { useMemo, type ReactNode } from 'react';
-import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
+import { View, Text, Platform, Linking } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
 import Markdown, { MarkdownIt, type ASTNode } from 'react-native-markdown-display';
 import { CodeBlock } from '@oxy.so/bloom/code';
 import type { AliaColors } from '../theme';
 
 // Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
 // The main app always passes resolved colors via the `colors` prop.
-const FALLBACK_LIGHT: Pick<
-  AliaColors,
-  'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'
-> = {
-  text: '#11181C',
-  muted: '#F4F4F5',
-  border: '#E5E5EA',
-  primary: '#7C3AED',
-  mutedForeground: '#71717A',
-};
-const FALLBACK_DARK: typeof FALLBACK_LIGHT = {
-  text: '#ECEDEE',
-  muted: '#27272A',
-  border: '#2C2C2E',
-  primary: '#A78BFA',
-  mutedForeground: '#A1A1AA',
-};
-
-const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
+/** The body text of a reply: its bubble sets its padding from these. */
+export const MARKDOWN_BODY = { fontSize: 16, lineHeight: 28 } as const;
+const BODY_TEXT = MARKDOWN_BODY;
 const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
 const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
 
@@ -180,7 +165,8 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
           <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>
             {bullet}
           </Text>
-          <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
+          {/* A View, not a Text: a nested list is a View, and inside a Text it runs inline. */}
+          <View style={{ flex: 1 }}>{children}</View>
         </View>
       );
     },
@@ -476,9 +462,17 @@ export function AliaMarkdown({
   fontFamily,
   renderCodeBlock,
 }: AliaMarkdownProps) {
-  const scheme = useColorScheme();
-  const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
-  const colors = { ...fallback, ...colorOverrides } as AliaColors;
+  // Bloom's theme, which follows the app's chosen mode, not the system's scheme: a person who
+  // picked light on a dark OS gets dark text on a light surface, not the reverse.
+  const { colors: theme } = useTheme();
+  const colors = {
+    text: theme.text,
+    muted: theme.backgroundSecondary,
+    border: theme.border,
+    primary: theme.primary,
+    mutedForeground: theme.textSecondary,
+    ...colorOverrides,
+  } as AliaColors;
 
   const customRules = useMemo(
     () => createRules(colors, renderCodeBlock),