@alia.onl/sdk 20.0.0 → 20.2.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @alia.onl/sdk
 
+## 20.2.0
+
+An app mounts its one sheet at the root without the chat in its entry bundle.
+
+### Added
+
+- **`@alia.onl/sdk/ask`**, a leaf entry with `AliaAskProvider` and `useAskAgent` alone. The root
+  entry still exports both, but brings the whole chat with them.
+
+### Changed
+
+- **`AliaAskProvider` loads its sheet lazily** (`components/AliaAskSheet.tsx`, one `import()`) and
+  mounts it on the first `ask`. Signed in, the module is fetched in the background, so the first
+  `ask` does not wait on the network. `check:entries` holds that `./ask` loads none of the chat
+  with the entry.
+- **Ref and event types are React Native 0.88-ready.** A ref to a `ScrollView` or `TextInput` is
+  typed `ComponentRef<typeof …>` (0.88 types both as function components), and key presses are
+  `TextInputKeyPressEvent` (`TextInputKeyPressEventData` is deprecated since 0.86). Nothing
+  changes on 0.86. The peer ranges stay on Expo 57 / React Native 0.86: Bloom's own `TextInput`
+  ref props are not 0.88-ready yet.
+
+## 20.1.0
+
+The one sheet is the whole surface an app needs for an agent: it picks a conversation up again and
+the app can close it.
+
+### Added
+
+- **`useAskAgent().resume(agentKey, conversationId)`** opens the sheet of that agent on a stored
+  conversation, where the person left it (`AliaChatSheetRef.resume`).
+- **`useAskAgent().dismiss()`**, and `AliaAskProvider` forwards a ref to the same `AliaAsk`, for
+  the code that configures the sheet and so sits above it — a host-tool executor that changed the
+  page under the sheet closes it once the turn is written.
+- **The sheet's recent conversations.** Under the greeting, the person's three latest conversations
+  with the lead (`AliaRecentConversations`; Alia's sheet lists any). `recentConversations={false}`
+  turns it off. New label `recentConversations` (`'Recent'`).
+- **`AliaChatContent` `welcomeAccessory`**, drawn under the empty chat's greeting.
+
 ## 20.0.0
 
 Generic chat UI is Bloom's; the SDK composes it and keeps only what is Alia's. Two copies the SDK

package/README.md

@@ -146,7 +146,7 @@ Every agent — Alia included — is the same agent (ADR 0020), and any Oxy app
 person can reach. The wire contract is [`docs/agent-embedding.md`](../../docs/agent-embedding.md).
 
 ```tsx
-import { AliaAskProvider, useAskAgent } from '@alia.onl/sdk';
+import { AliaAskProvider, useAskAgent } from '@alia.onl/sdk/ask';
 
 <AliaAskProvider
   agents={{ alia: {}, sindi: { id: SINDI_AGENT_ID } }}  // no id = Alia
@@ -163,10 +163,20 @@ import { AliaAskProvider, useAskAgent } from '@alia.onl/sdk';
   {children}
 </AliaAskProvider>;
 
-const { ask } = useAskAgent();
+const { ask, resume, dismiss } = useAskAgent();
 ask('sindi', { text: 'Is this flat a good price?' }); // signed out: Oxy's sign-in instead
+resume('sindi', conversationId); // a stored conversation, where the person left it
+dismiss(); // e.g. after a host tool changed the page under the sheet
 ```
 
+Mount it from `@alia.onl/sdk/ask`: that entry is the provider and its hook alone, and the sheet
+loads with the first `ask` (fetched in the background once the person is signed in), so the chat
+stays out of the app's entry bundle. The root entry exports the same two, with the whole chat.
+
+The sheet offers the person's latest conversations with its lead under the greeting
+(`recentConversations={false}` turns it off). The code that configures the sheet sits above it, so
+`AliaAskProvider` forwards a ref to the same `AliaAsk` for it.
+
 - **The lead.** `agent={{ id }}` (on `AliaChatSheet`, `AliaChatScreen` and `AliaChatContent`) makes
   that agent the conversation's lead: its greeting, name, character and starters
   (`GET /v1/agents/:id/profile`) and the header's first avatar. Omitted, Alia.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "20.0.0",
+  "version": "20.2.0",
   "description": "Alia AI chat SDK — the conversation runtime, chat UI, voice calls and dictation for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
@@ -8,6 +8,7 @@
   "types": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./ask": "./src/ask.ts",
     "./avatar": "./src/avatar.ts",
     "./content": "./src/lib/content-utils.ts",
     "./csp": "./src/csp.ts",

package/src/ask.ts

@@ -0,0 +1,7 @@
+// @alia.onl/sdk/ask — the app's one Alia sheet, without the chat in the entry bundle
+// `AliaAskProvider` and `useAskAgent` alone: the sheet they open is loaded with the first `ask`.
+// An app mounts the provider at its root from here rather than from the root entry, which
+// would bring the whole chat along with it.
+
+export { AliaAskProvider, useAskAgent } from './components/AliaAskProvider';
+export type { AliaAsk, AliaAskAgents, AliaAskProviderProps } from './components/AliaAskProvider';

package/src/components/AliaAskProvider.tsx

@@ -5,21 +5,34 @@
  * once — its host tools, renderers, words, voice, context, upsell and share. A button calls
  * `useAskAgent().ask(key, turn)`. Signed out, the sheet is not mounted (it could not call Alia):
  * `ask` opens Oxy's sign-in instead, and the person asks again once signed in.
+ *
+ * The sheet itself (`AliaAskSheet`) is loaded lazily and mounted on the first `ask`, so an app
+ * that mounts this provider at its root — imported from `@alia.onl/sdk/ask` — keeps the chat out
+ * of its entry bundle. Signed in, its module is fetched in the background so the first `ask`
+ * does not wait on the network.
  */
 
 import { useAuth } from '@oxy.so/services/ui/client';
 import {
   createContext,
+  forwardRef,
+  lazy,
   type ReactNode,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import type { AliaTurn } from '../hooks/useChatComposer';
-import { AliaChatSheet, type AliaChatSheetProps, type AliaChatSheetRef } from './AliaChatSheet';
+import type { AliaChatSheetProps, AliaChatSheetRef } from './AliaChatSheet';
+import type { AliaAskOpening } from './AliaAskSheet';
+
+const loadSheet = () => import('./AliaAskSheet');
+const LazyAskSheet = lazy(() => loadSheet().then((module) => ({ default: module.AliaAskSheet })));
 
 /** The agents an app offers, by its own key. An entry without `id` is Alia. */
 export type AliaAskAgents = Readonly<Record<string, { id?: string }>>;
@@ -38,6 +51,7 @@ export interface AliaAskProviderProps
     | 'apiUrl'
     | 'characterRuntimeUrl'
     | 'headerMenu'
+    | 'recentConversations'
   > {
   /** The agents `ask` opens, by key. Omitted, the sheet only ever opens on Alia. */
   agents?: AliaAskAgents;
@@ -52,6 +66,13 @@ export interface AliaAsk {
    * ("ask Sindi about this listing"). Signed out, opens Oxy's sign-in instead.
    */
   ask: (agentKey?: string, turn?: AliaTurn) => void;
+  /** Open the sheet on the agent `agentKey` (omitted, Alia), on its stored conversation `conversationId`. */
+  resume: (agentKey: string | undefined, conversationId: string) => void;
+  /**
+   * Close the sheet — a host tool that changed the page under it shows the person the result, once
+   * the turn has been written.
+   */
+  dismiss: () => void;
 }
 
 const AskContext = createContext<AliaAsk | null>(null);
@@ -63,29 +84,30 @@ export function useAskAgent(): AliaAsk {
   return ask;
 }
 
-/** Which agent the sheet is on, and the opening that waits for that sheet to mount. */
-interface Opening {
+/** The opening that waits for the sheet of agent `key` to be the one mounted. */
+interface Opening extends AliaAskOpening {
   key: string | undefined;
-  turn: AliaTurn | undefined;
-  /** Changes on every `ask`, so asking the same agent twice opens twice. */
-  serial: number;
 }
 
-export function AliaAskProvider({
-  agents,
-  welcomeSuggestions,
-  children,
-  ...sheet
-}: AliaAskProviderProps) {
+/**
+ * Mounts the app's one sheet. Its ref is the same `AliaAsk` as `useAskAgent()`, for the code that
+ * configures the sheet and so sits above it — a host-tool executor that closes it.
+ */
+export const AliaAskProvider = forwardRef<AliaAsk, AliaAskProviderProps>(function AliaAskProvider(
+  { agents, welcomeSuggestions, children, ...sheet },
+  ref,
+) {
   const { canUsePrivateApi, signIn } = useAuth();
   const sheetRef = useRef<AliaChatSheetRef>(null);
   const [opening, setOpening] = useState<Opening | null>(null);
   const [current, setCurrent] = useState<string | undefined>(undefined);
+  /** Nothing is mounted before the first `ask`. */
+  const [asked, setAsked] = useState(false);
   const agentsRef = useRef(agents);
   agentsRef.current = agents;
 
-  const ask = useCallback(
-    (agentKey?: string, turn?: AliaTurn) => {
+  const open = useCallback(
+    (agentKey: string | undefined, turn?: AliaTurn, conversationId?: string) => {
       if (agentKey !== undefined && agentsRef.current?.[agentKey] === undefined) {
         throw new Error(`AliaAskProvider has no agent "${agentKey}"`);
       }
@@ -93,35 +115,54 @@ export function AliaAskProvider({
         void signIn().catch(() => undefined);
         return;
       }
+      setAsked(true);
       setCurrent(agentKey);
-      setOpening((previous) => ({ key: agentKey, turn, serial: (previous?.serial ?? 0) + 1 }));
+      setOpening((previous) => ({
+        key: agentKey,
+        turn,
+        ...(conversationId === undefined ? {} : { conversationId }),
+        serial: (previous?.serial ?? 0) + 1,
+      }));
     },
     [canUsePrivateApi, signIn],
   );
+  const ask = useCallback((agentKey?: string, turn?: AliaTurn) => open(agentKey, turn), [open]);
+  const resume = useCallback(
+    (agentKey: string | undefined, conversationId: string) =>
+      open(agentKey, undefined, conversationId),
+    [open],
+  );
+  const dismiss = useCallback(() => sheetRef.current?.dismiss(), []);
 
-  // Presented once the sheet for that agent is the one mounted (a different agent is a new sheet).
+  const opened = useCallback(() => setOpening(null), []);
+
+  // Signed in, the sheet's module comes down in the background, ahead of the first `ask`.
   useEffect(() => {
-    if (opening === null || opening.key !== current) return;
-    sheetRef.current?.present(opening.turn);
-    setOpening(null);
-  }, [opening, current]);
+    if (canUsePrivateApi) void loadSheet().catch(() => undefined);
+  }, [canUsePrivateApi]);
 
   const agentId = current === undefined ? undefined : agents?.[current]?.id;
   const agent = useMemo(() => (agentId === undefined ? undefined : { id: agentId }), [agentId]);
-  const value = useMemo<AliaAsk>(() => ({ ask }), [ask]);
+  const value = useMemo<AliaAsk>(() => ({ ask, resume, dismiss }), [ask, resume, dismiss]);
+  useImperativeHandle(ref, () => value, [value]);
 
   return (
     <AskContext.Provider value={value}>
       {children}
-      {canUsePrivateApi ? (
-        <AliaChatSheet
-          key={agentId ?? 'alia'}
-          ref={sheetRef}
-          {...sheet}
-          agent={agent}
-          welcomeSuggestions={agent === undefined ? welcomeSuggestions : undefined}
-        />
+      {canUsePrivateApi && asked ? (
+        <Suspense fallback={null}>
+          <LazyAskSheet
+            key={agentId ?? 'alia'}
+            ref={sheetRef}
+            {...sheet}
+            agent={agent}
+            welcomeSuggestions={agent === undefined ? welcomeSuggestions : undefined}
+            // A different agent is a new sheet: the opening waits for that one to mount.
+            opening={opening !== null && opening.key === current ? opening : null}
+            onOpened={opened}
+          />
+        </Suspense>
       ) : null}
     </AskContext.Provider>
   );
-}
+});

package/src/components/AliaAskSheet.tsx

@@ -0,0 +1,52 @@
+/**
+ * The sheet `AliaAskProvider` mounts, in its own module so the provider can load it lazily: an app
+ * that mounts the provider at its root carries only the provider in its entry bundle, and the
+ * chat — thread, composer, voice, renderers — arrives with the first `ask`.
+ *
+ * It presents the opening it is handed once it is mounted, which is the only moment a lazily
+ * loaded sheet can be presented, and tells the provider the opening is spent.
+ */
+
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import type { AliaTurn } from '../hooks/useChatComposer';
+import { AliaChatSheet, type AliaChatSheetProps, type AliaChatSheetRef } from './AliaChatSheet';
+
+/** What the person asked for: a turn to send, or a stored conversation to pick up again. */
+export interface AliaAskOpening {
+  turn: AliaTurn | undefined;
+  conversationId?: string;
+  /** Changes on every `ask`, so asking the same agent twice opens twice. */
+  serial: number;
+}
+
+export interface AliaAskSheetProps extends AliaChatSheetProps {
+  /** The opening to present once mounted; `null` when there is none waiting. */
+  opening: AliaAskOpening | null;
+  /** The opening was presented. */
+  onOpened: () => void;
+}
+
+export const AliaAskSheet = forwardRef<AliaChatSheetRef, AliaAskSheetProps>(function AliaAskSheet(
+  { opening, onOpened, ...sheet },
+  ref,
+) {
+  const sheetRef = useRef<AliaChatSheetRef>(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      present: (turn?: AliaTurn) => sheetRef.current?.present(turn),
+      resume: (conversationId: string) => sheetRef.current?.resume(conversationId),
+      dismiss: () => sheetRef.current?.dismiss(),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (opening === null) return;
+    if (opening.conversationId !== undefined) sheetRef.current?.resume(opening.conversationId);
+    else sheetRef.current?.present(opening.turn);
+    onOpened();
+  }, [opening, onOpened]);
+
+  return <AliaChatSheet ref={sheetRef} {...sheet} />;
+});

package/src/components/AliaChatContent.tsx

@@ -170,6 +170,8 @@ export interface AliaChatContentProps {
   welcomeSubtitle?: string;
   /** The lines offered over the composer on an empty chat; omitted, the agent's starters. */
   welcomeSuggestions?: AliaSuggestion[];
+  /** Drawn under the empty chat's greeting — the sheet's recent conversations with its lead. */
+  welcomeAccessory?: ReactNode;
   /** 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. */
@@ -279,6 +281,7 @@ function AliaConversationView({
   welcomeGreeting,
   welcomeSubtitle,
   welcomeSuggestions,
+  welcomeAccessory,
   suggestionMatches,
   onSuggestionQuery,
   onSuggestionPicked,
@@ -471,9 +474,12 @@ function AliaConversationView({
   const welcome = useMemo(
     () =>
       profileLoading ? null : (
-        <AliaWelcomeMessage greeting={greeting} subtitle={welcomeSubtitle} lead={lead} />
+        <View className="items-center gap-8">
+          <AliaWelcomeMessage greeting={greeting} subtitle={welcomeSubtitle} lead={lead} />
+          {welcomeAccessory}
+        </View>
       ),
-    [profileLoading, greeting, welcomeSubtitle, lead],
+    [profileLoading, greeting, welcomeSubtitle, lead, welcomeAccessory],
   );
 
   // ── The agent's offer to start the next stretch fresh ──

package/src/components/AliaChatSheet.tsx

@@ -30,6 +30,7 @@ import {
   type AliaChatContentProps,
 } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
+import { AliaRecentConversations } from './AliaRecentConversations';
 import { ThoughtPanel } from './thought/ThoughtPanel';
 import type { AliaSuggestion } from '../types';
 
@@ -88,6 +89,8 @@ export interface AliaChatSheetProps {
   onShare?: (share: AliaConversationShare) => void;
   /** More rows for the header's menu (`DropdownMenuItem`s from `@oxy.so/bloom/dropdown-menu`). */
   headerMenu?: React.ReactNode;
+  /** The person's latest conversations with the lead, under the greeting. Default `true`. */
+  recentConversations?: boolean;
 }
 
 export interface AliaChatSheetRef {
@@ -97,6 +100,9 @@ export interface AliaChatSheetRef {
    * opens on its welcome, with the composer focused.
    */
   present: (turn?: AliaTurn) => void;
+  /** Opens the sheet on a stored conversation with its lead, where the person left it. */
+  resume: (conversationId: string) => void;
+  /** Closes the sheet and what is stacked on it, stopping a turn still being written. */
   dismiss: () => void;
 }
 
@@ -121,6 +127,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
       onShare,
       headerMenu,
+      recentConversations = true,
     },
     ref,
   ) => {
@@ -135,9 +142,13 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
     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);
+    // The conversation sheet, stacked over the main one while a chat is open: begun by a first
+    // turn, or a stored one picked up again. The key makes every opening a fresh chat.
+    const [conversation, setConversation] = useState<{
+      key: number;
+      turn?: AliaTurn;
+      conversationId?: string;
+    } | null>(null);
 
     const registerMainStop = useCallback((stop: (() => void) | null) => {
       mainStopRef.current = stop;
@@ -149,6 +160,13 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
     const startConversation = useCallback((turn: AliaTurn) => {
       setConversation((current) => ({ key: (current?.key ?? 0) + 1, turn }));
     }, []);
+    const resumeConversation = useCallback((conversationId: string) => {
+      setConversation((current) => ({ key: (current?.key ?? 0) + 1, conversationId }));
+    }, []);
+    // The chat inside follows its conversation (a first turn creates it, "start over" leaves it).
+    const followConversation = useCallback((conversationId: string | undefined) => {
+      setConversation((current) => (current ? { ...current, conversationId } : current));
+    }, []);
     useEffect(() => {
       if (conversation) conversationRef.current?.present();
     }, [conversation]);
@@ -197,9 +215,13 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
           mainRef.current?.present();
           if (turn) startConversation(turn);
         },
+        resume: (conversationId) => {
+          mainRef.current?.present();
+          resumeConversation(conversationId);
+        },
         dismiss: handleDismiss,
       }),
-      [handleDismiss, startConversation],
+      [handleDismiss, startConversation, resumeConversation],
     );
 
     // Closing the main sheet (a drag, backdrop press, Back or Escape) closes what is stacked on it.
@@ -282,6 +304,11 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             welcomeSuggestions={welcomeSuggestions}
             suggestionMatches={suggestionMatches}
             onSuggestionQuery={onSuggestionQuery}
+            welcomeAccessory={
+              recentConversations ? (
+                <AliaRecentConversations agentId={agent?.id} onOpen={resumeConversation} />
+              ) : undefined
+            }
             presentedProgress={mainProgress}
             onStopReady={registerMainStop}
             onStart={startConversation}
@@ -303,6 +330,8 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             <AliaChatContent
               {...shared}
               initialTurn={conversation.turn}
+              conversationId={conversation.conversationId}
+              onConversationChange={followConversation}
               presentedProgress={conversationProgress}
               onStopReady={registerConversationStop}
               chrome={conversationChrome}

package/src/components/AliaComposer.tsx

@@ -7,12 +7,7 @@ import {
   type ReactNode,
   type RefObject,
 } from 'react';
-import {
-  View,
-  type NativeSyntheticEvent,
-  type TextInput,
-  type TextInputKeyPressEventData,
-} from 'react-native';
+import { View, type TextInputKeyPressEvent } from 'react-native';
 import {
   ComposerPill,
   type ComposerPanelAddMenuGroup,
@@ -28,6 +23,7 @@ import type { Completion } from '../lib/suggestions';
 import { composerTiles, intakeError } from '../lib/attachment-tiles';
 import type { IntakeKind } from '../lib/attachment-intake';
 import { KeyboardAvoidingView } from '../lib/keyboard';
+import type { TextInputHandle } from '../lib/text-input';
 import { type AliaChatLabels, AliaChatLabelsProvider, useLabels } from '../lib/labels';
 import type { AskedQuestion } from '../lib/questions';
 import type { VoiceErrorCode } from '../lib/speech-messages';
@@ -116,11 +112,11 @@ export interface AliaComposerProps<T extends AliaSuggestion = AliaSuggestion> {
    */
   accessory?: ReactNode;
   /** The field's keys, before the panel's own Enter rule (suggestions over it). */
-  onKeyPress?: (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
+  onKeyPress?: (event: TextInputKeyPressEvent) => void;
   /** The host already avoids the keyboard. */
   disableKeyboardAvoidance?: boolean;
   /** The field itself, for a host that moves focus into it. */
-  inputRef?: RefObject<TextInput | null>;
+  inputRef?: RefObject<TextInputHandle | null>;
   /** Dictation's language, a BCP-47 tag; omitted, the platform's own. */
   speechLanguage?: string;
   /** Alia's API, which transcribes dictation; omitted, `EXPO_PUBLIC_ALIA_API_URL` or production. */

package/src/components/AliaRecentConversations.tsx

@@ -0,0 +1,58 @@
+import { Item } from '@oxy.so/bloom/item';
+import { Text } from '@oxy.so/bloom/typography';
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { useLabels } from '../lib/labels';
+import { useConversations } from '../runtime/conversations';
+
+/** How many of the lead's conversations the sheet offers to pick up again. */
+export const RECENT_CONVERSATIONS_SHOWN = 3;
+
+/**
+ * The person's latest conversations with the sheet's lead, under its greeting: "Ask Sindi" picks
+ * up where it left off instead of every opening being a blank page. Alia's own sheet lists the
+ * person's latest conversations of any kind. Nothing while loading or when there are none.
+ */
+export function AliaRecentConversations({
+  agentId,
+  onOpen,
+}: {
+  /** The lead; omitted, Alia. */
+  agentId?: string;
+  onOpen: (conversationId: string) => void;
+}) {
+  const labels = useLabels();
+  const { data } = useConversations(agentId === undefined ? {} : { agentId });
+  const recent = useMemo(
+    () => data?.pages[0]?.conversations.slice(0, RECENT_CONVERSATIONS_SHOWN) ?? [],
+    [data],
+  );
+  const when = useMemo(
+    () => new Intl.DateTimeFormat(labels.locale, { day: 'numeric', month: 'short' }),
+    [labels.locale],
+  );
+  if (recent.length === 0) return null;
+  return (
+    <View accessibilityRole="list" className="w-full max-w-[480px] self-center gap-1">
+      <Text className="px-3 text-sm text-text-secondary">{labels.recentConversations}</Text>
+      {recent.map((conversation) => {
+        const title = conversation.title || labels.newChat;
+        return (
+          <Item
+            key={conversation.id}
+            density="compact"
+            accessibilityRole="button"
+            accessibilityLabel={title}
+            onPress={() => onOpen(conversation.id)}
+            title={<Text numberOfLines={1}>{title}</Text>}
+            trailing={
+              <Text className="text-xs text-text-tertiary">
+                {when.format(new Date(conversation.updatedAt))}
+              </Text>
+            }
+          />
+        );
+      })}
+    </View>
+  );
+}

package/src/hooks/useChatComposer.ts

@@ -1,10 +1,11 @@
 import type { AvatarFlights } from '@oxy.so/bloom/avatar-flight';
 import { useOxy } from '@oxy.so/services/ui/client';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import type { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+import type { TextInputKeyPressEvent } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { leadToProfile } from '../lib/flights';
 import type { AliaLead } from '../lib/participants';
+import type { TextInputHandle } from '../lib/text-input';
 import { imageUriToDataUrl } from '../lib/image-data-url';
 import {
   useComposerDraft,
@@ -254,7 +255,7 @@ export function useChatComposer({
   });
 
   // ── The field: focus, and its keys ──
-  const inputRef = useRef<TextInput | null>(null);
+  const inputRef = useRef<TextInputHandle | null>(null);
   useFocusWhenPresented(presentedProgress, () => inputRef.current?.focus());
   // Starting an edit puts the caret in the composer that now holds the question: the Edit press
   // left focus on the row's button, so typing went nowhere and Escape could not reach the edit.
@@ -265,7 +266,7 @@ export function useChatComposer({
   const { onKeyPress: onSuggestionKeyPress } = suggestions;
   const cancelEdit = edit.cancel;
   const onKeyPress = useCallback(
-    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    (event: TextInputKeyPressEvent) => {
       // Escape leaves an edit, as its Cancel does: it is the top-most thing open while the
       // question is being rewritten.
       if (editing !== undefined && event.nativeEvent.key === 'Escape') {

package/src/hooks/useComposerSuggestions.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import type { NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native';
+import type { TextInputKeyPressEvent } from 'react-native';
 import {
   type Completion,
   SEARCH_DEBOUNCE_MS,
@@ -62,7 +62,7 @@ export function useComposerSuggestions<T extends AliaSuggestion>({
   );
 
   const onKeyPress = useCallback(
-    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    (event: TextInputKeyPressEvent) => {
       if (completions.length === 0) return;
       const key = event.nativeEvent.key;
       if (key === 'ArrowDown' || key === 'ArrowUp') {

package/src/index.ts

@@ -27,6 +27,7 @@ export type { AliaAddMenu } from './lib/add-menu';
 export type { AliaVoiceOptions } from './hooks/useChatVoice';
 export { AliaChatSheet } from './components/AliaChatSheet';
 export type { AliaChatSheetProps, AliaChatSheetRef } from './components/AliaChatSheet';
+export { AliaRecentConversations } from './components/AliaRecentConversations';
 export type { AliaTurn } from './hooks/useChatComposer';
 export { AliaChatScreen } from './components/AliaChatScreen';
 export type { AliaChatScreenProps } from './components/AliaChatScreen';

package/src/lib/keyboard.tsx

@@ -16,11 +16,14 @@ type KeyboardAwareScrollViewProps = ScrollViewProps & {
   extraKeyboardSpace?: number;
 };
 
-const KeyboardAwareScrollView = React.forwardRef<ScrollView, KeyboardAwareScrollViewProps>(
-  ({ bottomOffset, disableScrollOnKeyboardHide, enabled, extraKeyboardSpace, ...props }, ref) => (
-    <ScrollView ref={ref} {...props} />
-  ),
-);
+// `ComponentRef`, not `ScrollView` itself: React Native 0.88 types `ScrollView` as a function
+// component, so the class is no longer its instance type.
+const KeyboardAwareScrollView = React.forwardRef<
+  React.ComponentRef<typeof ScrollView>,
+  KeyboardAwareScrollViewProps
+>(({ bottomOffset, disableScrollOnKeyboardHide, enabled, extraKeyboardSpace, ...props }, ref) => (
+  <ScrollView ref={ref} {...props} />
+));
 KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
 
 // `automaticOffset` is keyboard-controller's: measure the view's position in

package/src/lib/labels.tsx

@@ -87,6 +87,8 @@ export interface AliaChatLabels {
   // Conversations (the runtime's own words: toasts and the errors it raises)
   /** A conversation's title until it has one. */
   newChat: string;
+  /** Over the sheet's recent conversations with its lead. */
+  recentConversations: string;
   /** A turn could not be sent and the composer got its text back. */
   sendFailed: string;
   /** The session ended mid-request. */
@@ -165,6 +167,7 @@ export const DEFAULT_LABELS: AliaChatLabels = {
   t: englishCopy,
   locale: 'en',
   newChat: 'New chat',
+  recentConversations: 'Recent',
   sendFailed: "Your message couldn't be sent",
   signInRequired: 'Sign in to keep chatting',
   conversationSaveFailed: 'Failed to save conversation',

package/src/lib/text-input.ts

@@ -0,0 +1,9 @@
+import type { ComponentRef } from 'react';
+import type { TextInput } from 'react-native';
+
+/**
+ * What a ref to a `TextInput` holds. `ComponentRef`, not `TextInput` itself: React Native 0.88
+ * types `TextInput` as a function component, so the class is no longer its instance type, and
+ * `focus()` is only on the instance.
+ */
+export type TextInputHandle = ComponentRef<typeof TextInput>;