@alia.onl/sdk 10.1.1 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @alia.onl/sdk
 
+## 11.0.0
+
+The chat UI is Bloom's, not a copy of it. Breaking:
+
+- **Bloom is a peer dependency** (`@oxy.so/bloom ^9.0.0`; with `@oxy.so/services`
+  11.2.0-oxy-one.5 and `@oxy.so/core` 4.5.0-oxy-one.1 it is the newest set that
+  satisfies every peer range). The host must mount `BloomProvider`.
+- **Alia's avatar is Bloom's 3D character.** The host mounts `AgentAvatarProvider`
+  with the URL of the hosted `character-runtime` (see the README). New:
+  `AliaAvatar`. `IdentityMark` stays only for an agent's likeness.
+- **Removed exports:** `Button`, `buttonVariants`, `buttonTextVariants`, `Text`,
+  `TextClassContext` (use `@oxy.so/bloom/button` and `typography`), and
+  `ThinkingIndicator` (`AgentThinking`) and `Reasoning`, `ReasoningTrigger`,
+  `ReasoningContent` (the reasoning block is `AgentThinking` with children). `zeego`, `class-variance-authority` and
+  both `@radix-ui` packages are no longer dependencies.
+- **Composer:** Bloom's `ComposerPill` with a Photos entry in its add menu; the picked photos are its own `attachments`, not a strip mounted above it. Photos are
+  now actually sent, as `image_url` parts: `useAliaChat().send(text, { images })`
+  (the old composer collected attachments and never sent them). The autocomplete
+  props (`useSuggestions`, `onSuggestionUsed`) are gone; nobody passed them.
+- **Sheet:** `AliaChatSheet` is Bloom's `BottomSheet`, detached, radius 40. The
+  header is Bloom's `PageHeader` (avatar over a name capsule; press it for a wave).
+  `AliaChatScreen` uses the same header; `headerLeft` and `headerRight` still work.
+- **Chat parts:** the thread uses `AiChatUserMessage` and `AiChatFeedbackRow`, replies
+  render code through Bloom's `CodeBlock`, research through `WebSearch`, and
+  reasoning through `AgentThinking`. The welcome is the app's: the greeting at
+  display size and the suggestions as compact rows.
+- **Voice controls:** `VoiceControls` is Bloom's `CallControls`; its `primaryColor` prop
+  is gone (Bloom paints from the theme). The plan card is `Card`, `Item` and `Button`;
+  editing a message uses Bloom's `Textarea`; the agent line shows a Bloom `Avatar`.
+  Colours come from Bloom's theme and tokens, not hard-coded values or the host's
+  shadcn classes. `lucide-react-native` and `expo-blur` are no longer used here.
+- **The turn's work is drawn as the app draws it.** Tool calls are Bloom's `TaskList` and
+  `WebSearch`, driven by `revealed` from the calls that have really arrived, through one
+  shared mapping: `webSearchLog`, `taskListLog` and `isWebInvocation` (root entry), and the
+  pure `@alia.onl/sdk/tools` entry (`toolCallStatus`, `extractCitationSources`,
+  `getToolDoneLabel`, `getToolPillLabel`), which the app now imports instead of keeping
+  copies. `ResearchProgressCard` and the `onToolResultPress` prop are gone: research is a
+  step of the `WebSearch` trail, and a tool row is not a button. The words of the log are
+  English unless the host passes `labels.workLog` (a translator keyed like the app's).
+- **One animated background.** The ambient gradient (three blurred, drifting colour fields
+  that answer the live audio level) is the app's `AmbientField`, now exported by the SDK
+  with `PARALLAX_DURATION` and `PARALLAX_EASE`; the chat draws it as its container's
+  background and the app imports it from here. `VoiceOverlay`, `AudioWaveVisualizer` and the
+  `primaryColor` props that fed them are gone.
+- **Errors:** a failed voice call or dictation goes to `onError` when the host gives one and
+  to Bloom's `toast` otherwise (the host needs a `ToastOutlet`; `OxyProvider` mounts one). A
+  voice session reports why it ended: `onEnd(error?)`.
+- **Thread:** the messages are a Bloom `AiChatThread` inside `AiChatContainer` with
+  floating chrome, so the conversation scrolls behind the header and the composer with
+  Bloom's edge fades. The `scrollOffsetY` plumbing is gone.
+- **New:** `labels` on `AliaChatSheet` and `AliaChatScreen` to translate the chat's
+  own copy; `AliaChatLabels` and `DEFAULT_LABELS` are exported.
+
 ## 10.1.1
 
 `ChatTextInput` no longer passes `placeholderClassName`. No styling runtime ever

package/README.md

@@ -22,6 +22,30 @@ listed under `peerDependencies` in `package.json` are yours to install. Metro
 must resolve package `exports` (`resolver.unstable_enablePackageExports = true`,
 the default in Expo SDK 53+), because every icon import is a subpath.
 
+The chat is built from Bloom (`@oxy.so/bloom`, a peer dependency): mount Bloom's
+`BloomProvider` above it, with the one `KeyboardProvider` your app already has.
+
+Alia's avatar is Bloom's 3D character (`AgentAvatar`), which draws through a
+runtime Bloom ships as static files (about 11 MB). Serve the package's
+`assets/character-runtime/` directory unchanged and give the URL of `runtime.mjs`
+to Bloom's provider, once, near the root:
+
+```tsx
+import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
+
+<AgentAvatarProvider runtimeUrl="/bloom-character/runtime.mjs">…</AgentAvatarProvider>
+```
+
+Without it the avatar shows Bloom's "unavailable" state. Native avatars run in a
+WebView, so there the URL must be absolute and reachable from the device.
+
+Failures (a voice call that cannot start, a dictation error) are shown with Bloom's `toast`,
+so the app needs a `ToastOutlet` (`OxyProvider` mounts one), or pass `onError` to handle them.
+
+The chat's own copy is English. Pass `labels` to `AliaChatSheet` or
+`AliaChatScreen` to translate it (`AliaChatLabels`; anything omitted stays
+English). Bloom's own strings follow `BloomProvider`'s `locale`.
+
 Two entry points:
 
 - `@alia.onl/sdk` — text chat, dictation, read-aloud, catalogue, primitives.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "10.1.1",
+  "version": "11.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",
@@ -9,6 +9,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./content": "./src/lib/content-utils.ts",
+    "./tools": "./src/tools.ts",
     "./voice": "./src/voice.ts",
     "./package.json": "./package.json"
   },
@@ -29,19 +30,16 @@
     "check:entries": "node scripts/check-entry-isolation.mjs"
   },
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^2.1.20",
-    "@radix-ui/react-icons": "^1.3.2",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^1.24.0",
     "react-native-markdown-display": "^7.0.2",
     "tailwind-merge": "^3.6.0",
-    "zeego": "^3.0.6",
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
     "react": "^19.2.3",
     "react-native": "^0.86.0",
+    "@expo/vector-icons": "^15.1.1",
+    "@oxy.so/bloom": "^9.0.0",
     "@oxy.so/core": "^3.0.0 || ^4.0.0",
     "@oxy.so/services": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",

package/src/components/AliaAvatar.tsx

@@ -0,0 +1,66 @@
+import { AgentAvatar, type AvatarConfig, DEFAULT_CONFIG } from '@oxy.so/bloom/agent-avatar';
+import { useEffect, useState } from 'react';
+
+/** What Alia is doing; the avatar plays a working turn each time it starts to think or work. */
+export type AliaAvatarState = 'idle' | 'thinking' | 'working' | 'writing';
+
+/**
+ * Alia's likeness in Bloom's 3D character engine: the six-lobed flower in orchid,
+ * plain oval eyes, nothing on its head. The engine ids come from Bloom's catalog
+ * (`character-shapes.ts`, `character-colors.ts`); change them here and nowhere else.
+ */
+const ALIA_AVATAR: AvatarConfig = {
+  ...DEFAULT_CONFIG,
+  character: {
+    preset: 'blue_beret',
+    selections: {
+      shape: 'six_lobed_flower',
+      color: 'orchid',
+      eyes: 'oval',
+      eyewear: 'none',
+      accessory: 'none',
+    },
+  },
+};
+
+const BUSY: ReadonlySet<AliaAvatarState> = new Set(['thinking', 'working']);
+
+export interface AliaAvatarProps {
+  /** Width and height in px. */
+  size: number;
+  /** What Alia is doing. Default `idle`. */
+  state?: AliaAvatarState;
+  /** Follows the pointer and reacts to touch, as Bloom's engine does. Default `false`. */
+  interactive?: boolean;
+  /** Change it to replay the avatar's reaction (a wave) — for a button that wraps it. */
+  reactionKey?: number;
+}
+
+/**
+ * Bloom's `AgentAvatar` dressed as Alia. It draws through the 3D runtime, so the host
+ * app must mount `AgentAvatarProvider` with the URL of the hosted `character-runtime`;
+ * without it Bloom shows its own "unavailable" state.
+ */
+export function AliaAvatar({
+  size,
+  state = 'idle',
+  interactive = false,
+  reactionKey,
+}: AliaAvatarProps) {
+  const [workingKey, setWorkingKey] = useState(0);
+  const busy = BUSY.has(state);
+  useEffect(() => {
+    if (busy) setWorkingKey((key) => key + 1);
+  }, [busy]);
+
+  return (
+    <AgentAvatar
+      config={ALIA_AVATAR}
+      size={size}
+      label="Alia"
+      workingKey={workingKey}
+      interactive={interactive}
+      reactionKey={reactionKey}
+    />
+  );
+}

package/src/components/AliaChatContent.tsx

@@ -3,12 +3,14 @@
  *
  * Owns the text chat; voice is an injected capability (`voiceSession`) so that
  * nothing here reaches `livekit-client` at module-evaluation time. Containers
- * only handle layout chrome (sheet modal, full-screen SafeAreaView) and pass a
- * `header` render prop that receives the live mark state.
+ * only handle layout chrome (sheet modal, full-screen SafeAreaView). The
+ * breadcrumb header is Bloom's `AiChatContainer`, the one the app's conversation uses.
  */
 
 import React, {
+  createContext,
   Suspense,
+  useContext,
   useState,
   useCallback,
   useEffect,
@@ -16,36 +18,30 @@ import React, {
   useRef,
 } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
-import type { SharedValue } from 'react-native-reanimated';
-import Volume2 from 'lucide-react-native/icons/volume-2';
 import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
 import { useTTS } from '../hooks/useTTS';
+import { useSpeechToText } from '../hooks/useSpeechToText';
+import { useImagePicker } from '../hooks/useImagePicker';
+import { imageUriToDataUrl } from '../lib/image-data-url';
 import { useAmbientWave } from '../hooks/useAmbientWave';
-import { VoiceOverlay } from './voice/VoiceOverlay';
+import { AmbientField } from './AmbientField';
 import { AliaChatMessageList } from './AliaChatMessageList';
 import { AliaWelcomeMessage, type WelcomeSuggestion } from './AliaWelcomeMessage';
-import { PromptInput } from './ui/prompt-input/prompt-input';
-import { Button } from './ui/button';
-import type { IdentityMarkState } from './IdentityMark';
-import type {
-  ChatMessage,
-  VoiceMessage,
-  VoiceSessionComponent,
-  VoiceSessionState,
-} from '../types';
-import type { Completion } from './ui/prompt-input/context';
+import { ComposerLoader } from '@oxy.so/bloom/composer-loader';
+import { AiChatContainer } from '@oxy.so/bloom/ai-chat';
+import { ComposerPill, type ComposerPanelAddMenuGroup } from '@oxy.so/bloom/composer-panel';
+import { RiImageLine } from '@oxy.so/bloom/icons';
+import { toast } from '@oxy.so/bloom/toast';
+import { Button } from '@oxy.so/bloom/button';
+import { type AliaChatLabels, AliaChatLabelsProvider, useLabels } from '../lib/labels';
+import { AliaAvatar, type AliaAvatarState } from './AliaAvatar';
+import { VoiceModeIcon } from './VoiceModeIcon';
+import type { ChatMessage, VoiceMessage, VoiceSessionComponent, VoiceSessionState } from '../types';
 
 export interface AliaChatContentProps {
   clientContext?: string;
   model?: string;
   apiUrl?: string;
-  /** Shared value for scroll offset (used by sheet for pan-to-dismiss) */
-  scrollOffsetY?: SharedValue<number>;
-  /** Injectable autocomplete hook */
-  useSuggestions?: (query: string) => { data: Completion[] | undefined; isLoading: boolean };
-  /** Called when a suggestion is selected from autocomplete */
-  onSuggestionUsed?: (suggestionId: string) => void;
   /** Error handler (e.g. toast) */
   onError?: (message: string) => void;
   // Welcome message
@@ -58,13 +54,19 @@ export interface AliaChatContentProps {
   onThumbsDown?: (messageId: string) => void;
   onApprovePlan?: (planId: string) => void;
   onRejectPlan?: (planId: string) => void;
-  onToolResultPress?: (messageId: string) => void;
   /** Override markdown renderer (app passes CustomMarkdown) */
   renderMarkdown?: (content: string) => React.ReactNode;
-  /** Header bar render prop — receives live mark state, message presence, and the clear handler. */
-  header?: (state: { markState: IdentityMarkState; hasMessages: boolean; clear: () => void }) => React.ReactNode;
-  /** Theme primary color hex — forwarded to the ambient wave overlay palette. */
-  primaryColor?: string;
+  /** Breadcrumb title beside the brand mark. Default `Alia`; `null` drops the breadcrumb. */
+  title?: string | null;
+  /**
+   * Above the breadcrumb row — a back button, a menu, or a whole custom header
+   * (given `title={null}`). A function receives the clear handler.
+   */
+  headerLeading?:
+    | React.ReactNode
+    | ((state: { hasMessages: boolean; clear: () => void }) => React.ReactNode);
+  /** Right end of the breadcrumb row; receives the clear handler. Replaces Bloom's share/more. */
+  actions?: (state: { hasMessages: boolean; clear: () => void }) => React.ReactNode;
   /** Dark-mode flag — forwarded to the ambient wave overlay. */
   isDarkMode?: boolean;
   /**
@@ -75,6 +77,31 @@ export interface AliaChatContentProps {
   voiceSession?: VoiceSessionComponent;
   /** 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. */
+  labels?: Partial<AliaChatLabels>;
+}
+
+/** The live state of the chat, read by the avatar wherever the header or welcome draws it. */
+const MarkStateContext = createContext<AliaAvatarState>('idle');
+
+/** Alia's avatar at any size, following the chat's live state. */
+export function AliaChatMark({ size, reactionKey }: { size: number; reactionKey?: number }) {
+  return <AliaAvatar size={size} state={useContext(MarkStateContext)} reactionKey={reactionKey} />;
+}
+
+/** `AiChatContainer`'s `projectIcon` takes a component that is handed its size as `width`. */
+function BreadcrumbMark({ width }: { width?: number }) {
+  return <AliaChatMark size={width ?? 16} />;
+}
+
+/** The add menu: photos are the one attachment the chat API carries (`image_url` parts). */
+function addMenu(labels: AliaChatLabels): ComposerPanelAddMenuGroup[] {
+  return [
+    {
+      label: labels.addMenuGroup,
+      rows: [{ id: 'photos', label: labels.addPhotos, icon: RiImageLine }],
+    },
+  ];
 }
 
 /** Adapt a voice message into the chat message format. */
@@ -90,13 +117,10 @@ function adaptVoiceMessage(vm: VoiceMessage): ChatMessage {
   };
 }
 
-export function AliaChatContent({
+function AliaChatContentBody({
   clientContext,
   model,
   apiUrl,
-  scrollOffsetY: externalScrollOffsetY,
-  useSuggestions,
-  onSuggestionUsed,
   onError,
   welcomeGreeting,
   welcomeSubtitle,
@@ -106,14 +130,25 @@ export function AliaChatContent({
   onThumbsDown,
   onApprovePlan,
   onRejectPlan,
-  onToolResultPress,
   renderMarkdown,
-  header,
-  primaryColor,
+  title = 'Alia',
+  headerLeading,
+  actions,
   isDarkMode,
   voiceSession: VoiceSession,
   onStopReady,
 }: AliaChatContentProps) {
+  const labels = useLabels();
+  const addMenuGroups = useMemo(() => addMenu(labels), [labels]);
+
+  // A failure reaches the host's handler when it has one, and Bloom's toast otherwise.
+  const reportError = useCallback(
+    (message: string, title?: string) => {
+      if (onError) onError(title ? `${title}: ${message}` : message);
+      else toast.error(title ?? message, title ? { description: message } : undefined);
+    },
+    [onError],
+  );
   // ── Chat ──
   const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
   const { messages, setMessages, send, isStreaming, stop, clear } = useAliaChat(chatOptions);
@@ -126,16 +161,64 @@ export function AliaChatContent({
   // ── Input state ──
   const [inputValue, setInputValue] = useState('');
 
-  const handleSubmit = useCallback(() => {
-    const text = inputValue.trim();
-    if (!text) return;
-    send(text);
-    setInputValue('');
-  }, [inputValue, send]);
+  // Picked photos wait here, as tiles above the field, until the turn is sent.
+  const [photos, setPhotos] = useState<Array<{ id: string; name: string; uri: string }>>([]);
+  const { pickImage } = useImagePicker();
+
+  const handleAddMenuSelect = useCallback(
+    async (rowId: string) => {
+      if (rowId !== 'photos') return;
+      const assets = await pickImage();
+      if (!assets?.length) return;
+      setPhotos((prev) => [
+        ...prev,
+        ...assets.map((asset) => ({
+          id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+          name: asset.name,
+          uri: asset.uri,
+        })),
+      ]);
+    },
+    [pickImage],
+  );
 
-  // ── Scroll offset (use external if provided, else internal) ──
-  const internalScrollOffsetY = useSharedValue(0);
-  const scrollOffsetY = externalScrollOffsetY ?? internalScrollOffsetY;
+  const handleSubmit = useCallback(
+    async (value: string) => {
+      const text = value.trim();
+      if (!text && photos.length === 0) return;
+      const pending = photos;
+      setInputValue('');
+      setPhotos([]);
+      try {
+        const images = await Promise.all(pending.map((photo) => imageUriToDataUrl(photo.uri)));
+        send(text, { images });
+      } catch (err) {
+        // Keep the draft: the photos could not be read, nothing was sent.
+        setInputValue(value);
+        setPhotos(pending);
+        reportError(err instanceof Error ? err.message : 'Could not attach the photos');
+      }
+    },
+    [send, photos, reportError],
+  );
+
+  // ── Dictation: the pill's mic toggles it, the transcript lands in the field ──
+  const stt = useSpeechToText();
+  useEffect(() => {
+    if (stt.error) reportError(stt.error);
+  }, [stt.error, reportError]);
+  const sttRef = useRef(stt);
+  sttRef.current = stt;
+  const handleListeningChange = useCallback(async (listening: boolean) => {
+    const current = sttRef.current;
+    if (listening) {
+      if (!current.isRecording && !current.isTranscribing) current.startRecording();
+      return;
+    }
+    if (!current.isRecording) return;
+    const text = await current.stopAndTranscribe();
+    if (text) setInputValue((prev) => (prev ? `${prev} ${text}` : text));
+  }, []);
 
   // ── TTS ──
   const tts = useTTS({ apiUrl });
@@ -162,11 +245,17 @@ export function AliaChatContent({
 
   // Unmounting the session disconnects the room; the transcript merged above
   // stays in the chat.
-  const deactivateVoice = useCallback(() => {
-    setIsVoiceActive(false);
-    setVoiceState(null);
-    textSnapshotRef.current = [];
-  }, []);
+  // A call that fails ends the same way a hang-up does, but the person is told why: a
+  // button that silently does nothing reads as broken.
+  const deactivateVoice = useCallback(
+    (error?: string) => {
+      setIsVoiceActive(false);
+      setVoiceState(null);
+      textSnapshotRef.current = [];
+      if (error) reportError(error, labels.voiceFailed);
+    },
+    [reportError, labels.voiceFailed],
+  );
 
   // ── TTS read aloud handler ──
   const handleReadAloud = useCallback(
@@ -178,7 +267,7 @@ export function AliaChatContent({
 
   // ── Mark state (drives the header brand mark) ──
   const voiceAgentState = voiceState?.agentState;
-  const markState = useMemo<IdentityMarkState>(() => {
+  const markState = useMemo<AliaAvatarState>(() => {
     if (isVoiceActive) {
       if (voiceAgentState === 'speaking') return 'writing';
       if (voiceAgentState === 'thinking') return 'thinking';
@@ -200,6 +289,7 @@ export function AliaChatContent({
         subtitle={welcomeSubtitle}
         suggestions={welcomeSuggestions}
         onSuggestionPress={send}
+        hideMark
       />
     );
   }, [welcomeGreeting, welcomeSubtitle, welcomeSuggestions, send, messages.length]);
@@ -219,81 +309,107 @@ export function AliaChatContent({
     isGenerating: isStreaming,
   });
 
+  // The welcome and a call are the field's moments, so they get the intro's full strength; a
+  // conversation being read keeps the hook's subtle one, so the text stays easy to read.
+  const ambientIntensity = isVoiceActive || messages.length === 0 ? 1 : wave.intensity;
+
   // ── Voice activate button for empty submit (only if voice was provided) ──
   const voiceActivateButton = useMemo(
     () =>
       VoiceSession ? (
         <Button
-          size="icon"
+          iconOnly
+          tone="action"
+          size="md"
+          accessibilityLabel={labels.startVoice}
           onPress={activateVoice}
-          className="h-8 w-8 rounded-full"
-        >
-          <Volume2 size={16} color="white" />
-        </Button>
+          leadingIcon={VoiceModeIcon}
+        />
       ) : undefined,
-    [VoiceSession, activateVoice],
+    [VoiceSession, activateVoice, labels.startVoice],
   );
 
-  return (
-    <View style={styles.container}>
-      {/* Header (render prop) */}
-      {header?.({ markState, hasMessages: messages.length > 0, clear })}
-
-      {/* Persistent ambient wave overlay */}
-      <VoiceOverlay
-        waveAmplitude={wave.waveAmplitude}
-        agentState={wave.agentState}
-        intensity={wave.intensity}
-        primaryColor={primaryColor}
-        isDarkMode={isDarkMode}
-      />
-
-      {/* Welcome or Messages */}
-      <AliaChatMessageList
-        messages={messages}
-        isStreaming={isStreaming}
-        scrollOffsetY={scrollOffsetY}
-        onReadAloud={handleReadAloud}
-        ttsActiveMessageId={tts.activeMessageId}
-        ttsPlaybackState={tts.playbackState}
-        onEditMessage={onEditMessage}
-        onThumbsUp={onThumbsUp}
-        onThumbsDown={onThumbsDown}
-        onApprovePlan={onApprovePlan}
-        onRejectPlan={onRejectPlan}
-        onToolResultPress={onToolResultPress}
-        renderMarkdown={renderMarkdown}
-        welcomeComponent={welcomeComponent}
-      />
-
-      {/* Input or Voice Controls */}
-      {VoiceSession && isVoiceActive ? (
-        /* Suspense so the session may be handed to us as a React.lazy import. */
-        <Suspense fallback={null}>
-          <VoiceSession
-            apiUrl={apiUrl}
-            onStateChange={setVoiceState}
-            onEnd={deactivateVoice}
-          />
-        </Suspense>
-      ) : (
-        <View style={styles.inputContainer}>
-          <PromptInput
+  const composer =
+    VoiceSession && isVoiceActive ? (
+      /* Suspense so the session may be handed to us as a React.lazy import. */
+      <Suspense fallback={null}>
+        <VoiceSession apiUrl={apiUrl} onStateChange={setVoiceState} onEnd={deactivateVoice} />
+      </Suspense>
+    ) : (
+      <>
+        <ComposerLoader active={isStreaming}>
+          <ComposerPill
+            surface={false}
+            frosted={isStreaming}
             value={inputValue}
             onValueChange={setInputValue}
             onSubmit={handleSubmit}
-            isLoading={isStreaming}
+            busy={isStreaming}
             onStop={stop}
             emptyAction={voiceActivateButton}
-            placeholder="Ask Alia..."
-            autocomplete={!!useSuggestions}
-            useSuggestions={useSuggestions}
-            onSuggestionUsed={onSuggestionUsed}
-            onError={onError}
+            placeholder={labels.placeholder}
+            addMenu={addMenuGroups}
+            onAddMenuSelect={handleAddMenuSelect}
+            attachments={photos.map((photo) => ({
+              id: photo.id,
+              name: photo.name,
+              kind: 'image' as const,
+              src: photo.uri,
+            }))}
+            onRemoveAttachment={(id) => setPhotos((prev) => prev.filter((p) => p.id !== id))}
+            voiceState={
+              stt.isTranscribing ? 'transcribing' : stt.isRecording ? 'recording' : 'idle'
+            }
+            onVoiceStateChange={(next) => void handleListeningChange(next === 'recording')}
+          />
+        </ComposerLoader>
+      </>
+    );
+
+  return (
+    <MarkStateContext.Provider value={markState}>
+      <AiChatContainer
+        project={title ?? undefined}
+        projectIcon={BreadcrumbMark}
+        header={
+          typeof headerLeading === 'function'
+            ? headerLeading({ hasMessages: messages.length > 0, clear })
+            : headerLeading
+        }
+        actions={actions?.({ hasMessages: messages.length > 0, clear })}
+        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={
+          <AmbientField
+            waveAmplitude={wave.waveAmplitude}
+            agentState={wave.agentState}
+            intensity={ambientIntensity}
+            isDarkMode={isDarkMode}
+          />
+        }
+      >
+        <View style={styles.body}>
+          {/* 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}
+            renderMarkdown={renderMarkdown}
+            welcomeComponent={welcomeComponent}
           />
         </View>
-      )}
-    </View>
+      </AiChatContainer>
+    </MarkStateContext.Provider>
   );
 }
 
@@ -302,9 +418,16 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'relative',
   },
-  inputContainer: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 8,
+  body: {
+    flex: 1,
   },
 });
+
+/** The chat: header, thread and composer, with the host's labels in reach of all of it. */
+export function AliaChatContent({ labels, ...props }: AliaChatContentProps) {
+  return (
+    <AliaChatLabelsProvider labels={labels}>
+      <AliaChatContentBody {...props} />
+    </AliaChatLabelsProvider>
+  );
+}