@alia.onl/sdk 12.0.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # @alia.onl/sdk
 
+## 13.0.0
+
+Fixes found by driving the sheet end to end (the sheet shows plans, links citations, nests lists):
+
+- **A plan is drawn.** `plan_preview` was parsed but the sheet passed no handlers, so the card
+  never showed. `useAliaChat` now returns `approvePlan` / `rejectPlan` (approve collapses the
+  card to "approved"; reject collapses it and stops the turn) and `AliaChatContent` uses them
+  unless the host passes its own.
+- **Citations link.** `[n]` markers in a reply link to their sources (`linkifyCitations`,
+  `normalizeCitationMarkers`, `citationLabel` are exported from `@alia.onl/sdk/tools`; the app
+  re-exports them instead of keeping a copy).
+- **Nested lists** draw under their parent instead of inline beside it.
+- A finished research step reads "Researched", not "Researching".
+- A turn that ends at a question card with no sentence before it counts as answered.
+
+- **BREAKING: an agent is drawn with the look the server stores for it.** `agentCharacter(id)` (a
+  look hashed from the id) is removed; `readAgentCharacter(value)` parses a stored character
+  (Bloom's `parseAvatarCharacter`) and falls back on `DEFAULT_AGENT_CHARACTER`. The `alia.agent`
+  event carries `agentCharacter`, and `agentInfo` has `character`. `AliaChatAgent` has `character`;
+  `AliaChatSheet` / `AliaChatScreen` take `agents` (the host's directory) so a delegation's
+  thinking avatar is the agent's own before its answer arrives. Needs a server that sends
+  `agentCharacter`; release this SDK first, since the stream parser rejects unknown keys.
+- **The one who answers thinks with its own avatar, and it is the same avatar that settles under
+  the reply** (Bloom's `AgentReplyIdentity`, as in the multi-agent chat). While Alia works, her
+  avatar is the indicator, large with "Thinking…", where the `AgentThinking` line was; when her
+  text starts it shrinks under it with her name. A call to an agent (`delegateToAgent` /
+  `askAgent`, its `agentId` and `agentName` or `agent` arguments) opens the agent's message at
+  once, empty and thinking, and its answer fills that same message, so the avatar never remounts;
+  an agent that never answers leaves no message. Alia's reply now carries her identity row, as the
+  agents' do.
+  The reasoning is part of that same component (`AgentReplyIdentity`'s `reasoning`): while the
+  turn thinks, "Thinking… ⌃" folds it under the avatar's row, and once the reply starts it is the
+  closed "Thought for N seconds" block above it (`ThinkingBlock` draws nothing while it streams, so
+  there is one thinking indicator, not two).
+- **No jumps of height, and no flash of the wrong thinker.** A reply, a new row, the reasoning and
+  a thinking agent's avatar open and close with their height eased (Bloom's `Collapsible`, now
+  with `appear`) instead of popping. Alia is shown thinking only once she has for a moment, so a
+  turn she hands to an agent at once shows the agent thinking, not Alia for an instant first.
+- **Bubbles are equal on every side as the eye reads them.** An agent's bubble sets its top and
+  bottom padding from the reply's text metrics (`AgentReplyBubble`'s `text`, 16 on 28 here), so
+  the gap from the edge to the text is the same above, below and at the sides. Nothing is cut:
+  an open `Collapsible` no longer clips.
+- **The greeting's avatar flies up into the header's profile** as the conversation begins
+  (Bloom's `avatar-flight`: `useAvatarFlights`, `AvatarAnchor`, `AvatarFlightLayer`), across the
+  main and conversation sheets. `AgentProfile`'s new `avatarHidden` keeps the header's avatar
+  waiting for it. Needs a Bloom with `avatar-flight` (after 10.3).
+- **`AliaChatSheet` opens the conversation in a second sheet stacked over the main one.** The
+  main sheet stays on the greeting, the suggestions and the composer; the first turn (typed or a
+  suggestion) opens a fresh conversation sheet on top, whose back button (and the menu's Clear)
+  closes just that sheet, back to the main screen. A phone gets sheets flush with the screen
+  edges, with the composer clearing the home indicator; from tablet width (768 px) they float.
+  `AliaChatContent` gains `onStart` (hand an empty chat's first turn to the host) and
+  `initialTurn` (a turn sent once on mount).
+- **The empty chat looks and behaves like the Alia app's, from the same code.** The avatar sits
+  beside the greeting (`AliaWelcomeMessage`, now just the greeting: always side by side, no
+  `hideMark`, no suggestions) and the header shows Alia's profile only once there is a
+  conversation. The suggestions are one-line rows **over the composer** (`ComposerSuggestions`),
+  and from two typed characters they become matches with the typed part highlighted, arrows /
+  Enter / Escape through the composer's `onKeyPress`. The app now draws its greeting and its
+  suggestions with these same components and only supplies its API's data.
+- **Several agents in one turn.** A delegated agent's answer (`alia.agent`) is now its own
+  message with its name and avatar, placed before Alia's reply as the app places it, so a turn
+  with Lumi, Atlas and Sol shows three speakers. Before, every answer was merged into one message
+  under the last agent's name. Alia's reply is dropped when she said nothing after handing over.
+- **A delegated agent shows its 3D avatar.** The speaker line of an agent's message is Bloom's
+  `AgentAvatar`, not an image (an agent's account has none): the character comes from the agent's
+  id (`agentCharacter(id)`, exported), so the same agent looks the same everywhere and two agents
+  in a turn are told apart. The app draws its agents' messages with the same avatar.
+- **Agents are bubbles, and the header holds the team.** As in Bloom's multi-agent chat, a
+  delegated agent's reply is a tinted bubble with its avatar and name beneath it. Once agents have
+  answered, the header profile stacks Alia with up to two of them and names them together
+  ("Alia + Lumi + Atlas"). `headerLeading` / `actions` receive `agents` in their state
+  (`AliaChatState`, `AliaChatAgent`), and `AliaChatHeader` takes `agents`.
+- **The row under every reply is Bloom's multi-agent one**: helpful, unhelpful and copy as 22px
+  tiles with 12px icons (read aloud is a fourth tile where the host reads), replacing the
+  `AiChatFeedbackRow`. New label keys `helpful` and `unhelpful`.
+- **Built on Bloom's `agent-reply`** (peer `@oxy.so/bloom ^10.1.1`): replies, their identity line and
+  action tiles, and the header profile are Bloom's `AgentReply`, `AgentReplyBubble`,
+  `AgentReplyIdentity`, `AgentReplyActions` and `AgentProfile`, the pieces `MultiAgentChat` is made
+  of, not copies. Pressing the profile makes every avatar in it wave.
+- **Questions are asked above the composer, not in the thread.** What Alia asks in her last turn
+  (`askUserQuestion`) docks above the composer as Bloom's `Questionnaire`, with a dismiss; typing a
+  reply answers just as well. The thread keeps the questions as plain lines (`AskedQuestions`).
+  **Breaking:** `QuestionCard` is now the docked questionnaire (`onSubmit` required, new
+  `onDismiss`) and no longer draws a read-only variant; the `onAnswerQuestions` prop of the message
+  list is gone. `pendingQuestions` joins `@alia.onl/sdk/tools`.
+- **The voice bar is Bloom's voice controls.** `VoiceControls` draws Bloom's `@oxy.so/bloom/voice`
+  `VoiceControls` (microphone and end) under the status text, instead of `CallControls`, which is
+  made for a dark call stage and lost its captions on the chat's light surface.
+- **The header is back, the profile, share and a menu.** Bloom's `PageHeader` with a back button at
+  its start, and at its end share and a three-dots menu (Bloom's `DropdownMenu`, aligned to its
+  button) holding Clear and the host's rows. Over the empty chat there is no bar: nothing to do
+  there. In the sheet, back returns to the main screen (a fresh chat) and the sheet stays open.
+  **Breaking:** `AliaChatHeader` / `AliaChatSheet` / `AliaChatScreen` lose `onClose`; they take
+  `onBack` (screen), `onShare` and `headerMenu`; the labels `close` becomes `back`, `share`,
+  `more`.
+- **The chat follows Bloom's theme, not the system's scheme.** `AliaMarkdown` and the sheet read
+  the app's resolved mode: a person who chose light on a dark OS got white text on a light surface.
+- **Every icon is Bloom's.** The voice button is `RiVolumeUpLine` (it was Entypo); the app's clock,
+  robot and connector glyphs are `RiTimeLine`, `RiRobot2Line`, `RiPlugLine` and the SVG generator
+  is gone; `@expo/vector-icons` is no longer a peer of the SDK.
+- **Greeting.** The avatar (88px) above the text, both centred; `max-w-xs`, so it always sets in two lines; more room above than below. The Alia app draws the same.
+- Peer `@oxy.so/bloom ^10.2.1` (scrollbar, pill groups, header scrim, voice controls).
+- **Breaking:** `WelcomeSuggestion { id, title, description }` becomes `AliaSuggestion { id, text }`
+  (`text` is what is shown and what is sent). New optional props on the sheet, screen and content:
+  `suggestionMatches` and `onSuggestionQuery(query)`, so a host can search as the person types.
+  New exports: `ComposerSuggestions`, `useComposerSuggestions`, `useSuggestionQuery`,
+  `composerCompletions`, `Completion`, `AliaSuggestion`.
+
 ## 12.0.0
 
 Breaking: Bloom 10 peer; the `header` render prop replaces the breadcrumb path (`title`, `actions`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
@@ -39,7 +39,7 @@
     "react": "^19.2.3",
     "react-native": "^0.86.0",
     "@expo/vector-icons": "^15.1.1",
-    "@oxy.so/bloom": ">=10.0.0",
+    "@oxy.so/bloom": ">=10.4.0",
     "@oxy.so/core": ">=3.0.0",
     "@oxy.so/services": ">=8.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",

package/src/components/AliaAvatar.tsx

@@ -9,7 +9,11 @@ export type AliaAvatarState = 'idle' | 'thinking' | 'working' | 'writing';
  * eyes, nothing on its head. It is `blue_beret` with the hat taken off and the paint changed,
  * so Bloom retargets that preset's animation onto it; change it here and nowhere else.
  */
-const ALIA_AVATAR: AvatarCharacter = { preset: 'blue_beret', accessory: 'none', color: 'orchid' };
+export const ALIA_AVATAR: AvatarCharacter = {
+  preset: 'blue_beret',
+  accessory: 'none',
+  color: 'orchid',
+};
 
 const BUSY: ReadonlySet<AliaAvatarState> = new Set(['thinking', 'working']);
 

package/src/components/AliaChatContent.tsx

@@ -16,10 +16,20 @@ import { useImagePicker } from '../hooks/useImagePicker';
 import { imageUriToDataUrl } from '../lib/image-data-url';
 import { useAmbientWave } from '../hooks/useAmbientWave';
 import { AmbientField } from './AmbientField';
+import { QuestionCard } from './QuestionCard';
+import { pendingQuestions } from '../lib/questions';
 import { AliaChatMessageList } from './AliaChatMessageList';
-import { AliaWelcomeMessage, type WelcomeSuggestion } from './AliaWelcomeMessage';
+import { AliaFlightsProvider, ALIA_TO_PROFILE } from '../lib/flights';
+import { AliaWelcomeMessage } from './AliaWelcomeMessage';
+import { ComposerSuggestions } from './ComposerSuggestions';
+import { useComposerSuggestions, useSuggestionQuery } from '../hooks/useComposerSuggestions';
 import { ComposerLoader } from '@oxy.so/bloom/composer-loader';
 import { AiChatContainer } from '@oxy.so/bloom/ai-chat';
+import {
+  AvatarFlightLayer,
+  useAvatarFlights,
+  type AvatarFlights,
+} from '@oxy.so/bloom/avatar-flight';
 import { ComposerPill, type ComposerPanelAddMenuGroup } from '@oxy.so/bloom/composer-panel';
 import { RiImageLine } from '@oxy.so/bloom/icons';
 import { toast } from '@oxy.so/bloom/toast';
@@ -27,7 +37,46 @@ import { Button } from '@oxy.so/bloom/button';
 import { type AliaChatLabels, AliaChatLabelsProvider, useLabels } from '../lib/labels';
 import type { AliaAvatarState } from './AliaAvatar';
 import { VoiceModeIcon } from './VoiceModeIcon';
-import type { ChatMessage, VoiceMessage, VoiceSessionComponent, VoiceSessionState } from '../types';
+import type {
+  AliaSuggestion,
+  ChatMessage,
+  VoiceMessage,
+  VoiceSessionComponent,
+  VoiceSessionState,
+} from '../types';
+
+/** The distinct delegated agents among `messages`, in the order they first answered. */
+function participatingAgents(messages: readonly ChatMessage[]): AliaChatAgent[] {
+  const seen = new Map<string, AliaChatAgent>();
+  for (const { agentInfo } of messages) {
+    if (agentInfo && !seen.has(agentInfo.id)) seen.set(agentInfo.id, agentInfo);
+  }
+  return [...seen.values()];
+}
+
+/** An agent that answered in the conversation, as the header shows it beside Alia. */
+export interface AliaChatAgent {
+  id: string;
+  name: string;
+  /** Its look, as the server stores it (JSON); absent, the default look. */
+  character?: unknown;
+}
+
+/** What the chat tells its header and actions: whether there is a conversation to clear, and who took part. */
+export interface AliaChatState {
+  hasMessages: boolean;
+  clear: () => void;
+  /** What Alia is doing; the header's avatar shows it. */
+  markState: AliaAvatarState;
+  /** The delegated agents that have answered, in the order they first did. */
+  agents: AliaChatAgent[];
+}
+
+/** A turn of the person's: the text, and the photos (`data:` or `https:` URLs) sent with it. */
+export interface AliaTurn {
+  text: string;
+  images?: ReadonlyArray<string>;
+}
 
 export interface AliaChatContentProps {
   clientContext?: string;
@@ -38,7 +87,12 @@ export interface AliaChatContentProps {
   // Welcome message
   welcomeGreeting?: string;
   welcomeSubtitle?: string;
-  welcomeSuggestions?: WelcomeSuggestion[];
+  /** The lines offered over the composer on an empty chat. */
+  welcomeSuggestions?: AliaSuggestion[];
+  /** What the host found for the typed text (see `onSuggestionQuery`). */
+  suggestionMatches?: AliaSuggestion[];
+  /** The typed text, once typing has settled, for the host to search suggestions with. */
+  onSuggestionQuery?: (query: string) => void;
   // Message action callbacks
   onEditMessage?: (messageId: string, newContent: string) => void;
   onThumbsUp?: (messageId: string) => void;
@@ -47,12 +101,11 @@ export interface AliaChatContentProps {
   onRejectPlan?: (planId: string) => void;
   /** Override markdown renderer (app passes CustomMarkdown) */
   renderMarkdown?: (content: string) => React.ReactNode;
-  /** The chat's top bar. Receives what it needs from the chat: whether there is anything to clear, how, and what Alia is doing. */
-  header?: (state: {
-    hasMessages: boolean;
-    clear: () => void;
-    markState: AliaAvatarState;
-  }) => React.ReactNode;
+  /**
+   * The chat's top bar. Receives what it needs from the chat: whether there is anything to clear,
+   * how, who took part, and what Alia is doing.
+   */
+  header?: (state: AliaChatState) => React.ReactNode;
   /** Dark-mode flag — forwarded to the ambient wave overlay. */
   isDarkMode?: boolean;
   /**
@@ -61,6 +114,25 @@ export interface AliaChatContentProps {
    * from this module. May be a `React.lazy` component.
    */
   voiceSession?: VoiceSessionComponent;
+  /**
+   * Space the composer keeps clear at the bottom edge, in px — the home indicator, when the
+   * chat is flush with the screen (a phone sheet). The ambient background still runs behind it.
+   */
+  bottomInset?: number;
+  /**
+   * Hands the first turn of an empty chat to the host instead of sending it here — a sheet opens
+   * the conversation in a new sheet over this one. Omitted, the chat sends it itself.
+   */
+  onStart?: (turn: AliaTurn) => void;
+  /** The agents the host knows, with their look: a delegation's thinking avatar is drawn from them. */
+  agents?: UseAliaChatOptions['agents'];
+  /**
+   * The avatar flights this chat takes part in, when a sheet shares them across its chats (the
+   * greeting's avatar flies into a header in another sheet). Omitted, the chat has its own.
+   */
+  flights?: AvatarFlights;
+  /** A turn sent once as this chat mounts: the conversation a sheet was opened for. */
+  initialTurn?: AliaTurn;
   /** Internal sheet lifecycle bridge: receives the live request canceller. */
   onStopReady?: (stop: (() => void) | null) => void;
   /** Overrides for the chat's own copy; anything omitted is English. */
@@ -98,6 +170,8 @@ function AliaChatContentBody({
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
+  suggestionMatches,
+  onSuggestionQuery,
   onEditMessage,
   onThumbsUp,
   onThumbsDown,
@@ -107,8 +181,15 @@ function AliaChatContentBody({
   header,
   isDarkMode,
   voiceSession: VoiceSession,
+  bottomInset = 0,
+  onStart,
+  agents: knownAgents,
+  flights: sharedFlights,
+  initialTurn,
   onStopReady,
 }: AliaChatContentProps) {
+  const ownFlights = useAvatarFlights();
+  const flights = sharedFlights ?? ownFlights;
   const labels = useLabels();
   const addMenuGroups = useMemo(() => addMenu(labels), [labels]);
 
@@ -121,8 +202,46 @@ function AliaChatContentBody({
     [onError],
   );
   // ── Chat ──
-  const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
-  const { messages, setMessages, send, isStreaming, stop, clear } = useAliaChat(chatOptions);
+  const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext, agents: knownAgents };
+  const { messages, setMessages, send, isStreaming, stop, clear, approvePlan, rejectPlan } =
+    useAliaChat(chatOptions);
+  const agents = useMemo(() => participatingAgents(messages), [messages]);
+  // What Alia asked in her last turn and the person has not answered: asked above the composer,
+  // not in the thread. Any later message, typed or sent from the card, is the answer.
+  const lastMessage = messages.at(-1);
+  const questionsAsked = useMemo(
+    () => pendingQuestions(messages, isStreaming),
+    [messages, isStreaming],
+  );
+  const [dismissedQuestionsOf, setDismissedQuestionsOf] = useState<string | null>(null);
+  const asking = questionsAsked.length > 0 && dismissedQuestionsOf !== lastMessage?.id;
+
+  // The first turn of an empty chat goes to the host when it asked for it; every other turn is sent here.
+  const startsElsewhere = onStart !== undefined && messages.length === 0;
+  const firstTurn = messages.length === 0;
+  const submitTurn = useCallback(
+    async (text: string, images?: ReadonlyArray<string>) => {
+      if (startsElsewhere) {
+        // The host's conversation sheet opens first so that the flight, drawn when it launches,
+        // is above it; this chat stays on the greeting, so the avatar can still be measured.
+        onStart({ text, images });
+        await flights.launch([ALIA_TO_PROFILE]);
+        return;
+      }
+      // The greeting leaves with the first turn: measure it before it does.
+      if (firstTurn) await flights.launch([ALIA_TO_PROFILE]);
+      send(text, images ? { images } : undefined);
+    },
+    [startsElsewhere, onStart, firstTurn, flights, send],
+  );
+
+  // The conversation this chat was opened for, sent once.
+  const initialSent = useRef(false);
+  useEffect(() => {
+    if (!initialTurn || initialSent.current) return;
+    initialSent.current = true;
+    send(initialTurn.text, initialTurn.images ? { images: initialTurn.images } : undefined);
+  }, [initialTurn, send]);
 
   useEffect(() => {
     onStopReady?.(stop);
@@ -156,6 +275,26 @@ function AliaChatContentBody({
     [pickImage],
   );
 
+  // Suggestions over the composer on an empty chat, as the Alia app has them.
+  const suggestionQuery = useSuggestionQuery(inputValue, messages.length === 0);
+  useEffect(() => {
+    onSuggestionQuery?.(suggestionQuery);
+  }, [suggestionQuery, onSuggestionQuery]);
+  const handlePickSuggestion = useCallback(
+    (suggestion: AliaSuggestion) => {
+      setInputValue('');
+      submitTurn(suggestion.text);
+    },
+    [submitTurn],
+  );
+  const suggestions = useComposerSuggestions({
+    draft: inputValue,
+    enabled: messages.length === 0,
+    welcome: welcomeSuggestions,
+    matches: suggestionMatches,
+    onPick: handlePickSuggestion,
+  });
+
   const handleSubmit = useCallback(
     async (value: string) => {
       const text = value.trim();
@@ -167,7 +306,7 @@ function AliaChatContentBody({
         const images = await Promise.all(
           pending.map((photo) => imageUriToDataUrl(photo.uri, photo.mimeType)),
         );
-        send(text, { images });
+        submitTurn(text, images);
       } catch (err) {
         // Keep the draft: the photos could not be read, nothing was sent.
         setInputValue(value);
@@ -175,7 +314,7 @@ function AliaChatContentBody({
         reportError(err instanceof Error ? err.message : 'Could not attach the photos');
       }
     },
-    [send, photos, reportError],
+    [submitTurn, photos, reportError],
   );
 
   // ── Dictation: the pill's mic toggles it, the transcript lands in the field ──
@@ -263,15 +402,11 @@ function AliaChatContentBody({
   const welcomeComponent = useMemo(() => {
     if (!welcomeGreeting || messages.length > 0) return undefined;
     return (
-      <AliaWelcomeMessage
-        greeting={welcomeGreeting}
-        subtitle={welcomeSubtitle}
-        suggestions={welcomeSuggestions}
-        onSuggestionPress={send}
-        hideMark
-      />
+      <View className="flex-1 items-center justify-center px-4 py-10">
+        <AliaWelcomeMessage greeting={welcomeGreeting} subtitle={welcomeSubtitle} />
+      </View>
     );
-  }, [welcomeGreeting, welcomeSubtitle, welcomeSuggestions, send, messages.length]);
+  }, [welcomeGreeting, welcomeSubtitle, messages.length]);
 
   // ── Ambient wave — one persistent overlay across idle/voice/TTS/STT ──
   const wave = useAmbientWave({
@@ -327,8 +462,24 @@ function AliaChatContentBody({
       </Suspense>
     ) : (
       <>
+        <ComposerSuggestions
+          completions={suggestions.completions}
+          selected={suggestions.selected}
+          onPick={handlePickSuggestion}
+        />
+        {/* Beside the loader, not inside the pill: its light traces the box it wraps. */}
+        {asking ? (
+          <View className="mb-2">
+            <QuestionCard
+              questions={questionsAsked}
+              onSubmit={(message) => send(message)}
+              onDismiss={() => setDismissedQuestionsOf(lastMessage?.id ?? null)}
+            />
+          </View>
+        ) : null}
         <ComposerLoader active={isStreaming}>
           <ComposerPill
+            onKeyPress={suggestions.onKeyPress}
             surface={false}
             frosted={isStreaming}
             value={inputValue}
@@ -353,8 +504,8 @@ function AliaChatContentBody({
 
   const hasMessages = messages.length > 0;
   const headerNode = useMemo(
-    () => header?.({ hasMessages, clear, markState }),
-    [header, hasMessages, clear, markState],
+    () => header?.({ hasMessages, clear, markState, agents }),
+    [header, hasMessages, clear, markState, agents],
   );
   const background = useMemo(
     () => (
@@ -370,34 +521,44 @@ function AliaChatContentBody({
   );
 
   return (
-    <AiChatContainer
-      header={headerNode}
-      composer={composer}
-      // The thread scrolls behind the header and the composer, which fade in over it — as
-      // in the app's conversation. The wave is the container's background layer, between
-      // its surface and the turns.
-      floatingChrome
-      background={background}
-    >
-      <View className="flex-1">
-        {/* Welcome or Messages */}
-        <AliaChatMessageList
-          messages={messages}
-          isStreaming={isStreaming}
-          onReadAloud={handleReadAloud}
-          ttsActiveMessageId={tts.activeMessageId}
-          ttsPlaybackState={tts.playbackState}
-          onEditMessage={onEditMessage}
-          onThumbsUp={onThumbsUp}
-          onThumbsDown={onThumbsDown}
-          onApprovePlan={onApprovePlan}
-          onRejectPlan={onRejectPlan}
-          onAnswerQuestions={(message) => send(message)}
-          renderMarkdown={renderMarkdown}
-          welcomeComponent={welcomeComponent}
-        />
-      </View>
-    </AiChatContainer>
+    <AliaFlightsProvider value={flights}>
+      <AiChatContainer
+        header={headerNode}
+        composer={
+          bottomInset > 0 ? (
+            <View style={{ paddingBottom: bottomInset }}>{composer}</View>
+          ) : (
+            composer
+          )
+        }
+        // The thread scrolls behind the header and the composer, which fade in over it — as
+        // in the app's conversation. The wave is the container's background layer, between
+        // its surface and the turns.
+        floatingChrome
+        // The sheet or screen around it owns the fill and the shape; the container adds neither.
+        surface={false}
+        background={background}
+      >
+        <View className="flex-1">
+          {/* Welcome or Messages */}
+          <AliaChatMessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            onReadAloud={handleReadAloud}
+            ttsActiveMessageId={tts.activeMessageId}
+            ttsPlaybackState={tts.playbackState}
+            onEditMessage={onEditMessage}
+            onThumbsUp={onThumbsUp}
+            onThumbsDown={onThumbsDown}
+            onApprovePlan={onApprovePlan ?? approvePlan}
+            onRejectPlan={onRejectPlan ?? rejectPlan}
+            renderMarkdown={renderMarkdown}
+            welcomeComponent={welcomeComponent}
+          />
+        </View>
+      </AiChatContainer>
+      {sharedFlights ? null : <AvatarFlightLayer flights={ownFlights} />}
+    </AliaFlightsProvider>
   );
 }