@alia.onl/sdk 15.8.0 → 19.0.0

package/src/components/thread/ToolResultCard.tsx

@@ -0,0 +1,254 @@
+import {
+  type FairCoinCardData,
+  type MarketCardData,
+  type PriceChart,
+  type ScheduledTaskCardData,
+  type TemperatureUnit,
+  type ToolCard,
+  type WeatherCardData,
+  degrees,
+  faircoinChart,
+  forecastWeekday,
+  formatPrice,
+  marketChart,
+  triggerLabel,
+} from '../../runtime/model';
+import { useLabels } from '../../lib/labels';
+import { useAliaRuntime } from '../../runtime/config';
+import { AiChatMessageLine } from '@oxy.so/bloom/ai-chat';
+import { Badge } from '@oxy.so/bloom/badge';
+import { Card, CardBody, CardHeader } from '@oxy.so/bloom/card';
+import { LineChartCard } from '@oxy.so/bloom/chart-cards';
+import { IconCircle } from '@oxy.so/bloom/icon-circle';
+import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
+import { RiCalendarScheduleLine } from '@oxy.so/bloom/icons/RiCalendarScheduleLine';
+import { RiCloudLine } from '@oxy.so/bloom/icons/RiCloudLine';
+import { RiDropLine } from '@oxy.so/bloom/icons/RiDropLine';
+import { RiSnowflakeLine } from '@oxy.so/bloom/icons/RiSnowflakeLine';
+import { RiSunFoggyLine } from '@oxy.so/bloom/icons/RiSunFoggyLine';
+import { RiSunLine } from '@oxy.so/bloom/icons/RiSunLine';
+import { Item } from '@oxy.so/bloom/item';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlItemText,
+} from '@oxy.so/bloom/segmented-control';
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+/**
+ * A tool result drawn inside the assistant turn, each card one block line of
+ * the reply (`AiChatMessageLine block`) so it reveals with the turn.
+ *
+ *  - market, FairCoin → Bloom `LineChartCard`, one range per stored period
+ *  - weather          → `Card` with an `IconCircle` and the forecast as `Item`s
+ *  - scheduled task   → `Card` with an `Item` that opens the automation
+ */
+export function ToolResultCard({ card }: { card: ToolCard }) {
+  switch (card.type) {
+    case 'market':
+      return <MarketResult data={card.data} />;
+    case 'faircoin':
+      return <FairCoinResult data={card.data} />;
+    case 'weather':
+      return <WeatherResult data={card.data} />;
+    case 'scheduled-task':
+      return <ScheduledTaskResult data={card.data} />;
+  }
+}
+
+function PriceLineChart({ chart }: { chart: PriceChart }) {
+  return (
+    <LineChartCard
+      title={chart.title}
+      ranges={chart.ranges}
+      defaultRange={chart.defaultRange}
+      rangesLabel={chart.title}
+      format={chart.format}
+      formatAxisValue={chart.formatAxisValue}
+      accessibilityLabel={chart.title}
+    />
+  );
+}
+
+function Notes({ lines }: { lines: readonly string[] }) {
+  return (
+    <>
+      {lines.map((line) => (
+        <AiChatMessageLine key={line} tone="secondary">
+          {line}
+        </AiChatMessageLine>
+      ))}
+    </>
+  );
+}
+
+/** A quote with no line to draw still says its price, in words. */
+function PriceInWords({ title, price, hint }: { title: string; price: string; hint?: string }) {
+  return (
+    <Card>
+      <CardBody>
+        <Muted>{title}</Muted>
+        <Text variant="title-1-medium">{price}</Text>
+        {hint === undefined ? null : <Muted>{hint}</Muted>}
+      </CardBody>
+    </Card>
+  );
+}
+
+function MarketResult({ data }: { data: MarketCardData }) {
+  const { t, locale } = useLabels();
+  const chart = marketChart(data, t, locale);
+  return (
+    <>
+      <AiChatMessageLine block>
+        {chart !== null ? (
+          <PriceLineChart chart={chart} />
+        ) : (
+          <PriceInWords
+            title={`${data.name} · ${data.symbol}`}
+            price={
+              typeof data.price === 'number'
+                ? formatPrice(data.price, data.currency, locale)
+                : t('market.noPrice')
+            }
+            hint={t('market.noChart')}
+          />
+        )}
+      </AiChatMessageLine>
+      {chart === null ? null : <Notes lines={chart.notes} />}
+    </>
+  );
+}
+
+function FairCoinResult({ data }: { data: FairCoinCardData }) {
+  const { t, locale } = useLabels();
+  const { chart, notes } = faircoinChart(data, t, locale);
+  return (
+    <>
+      <AiChatMessageLine block>
+        {chart !== null ? (
+          <PriceLineChart chart={chart} />
+        ) : (
+          <PriceInWords
+            title={`${t('faircoin.name')} · ${t('faircoin.symbol')}`}
+            price={
+              typeof data.price === 'number' && Number.isFinite(data.price)
+                ? formatPrice(data.price, 'USD', locale)
+                : t('faircoin.noPrice')
+            }
+          />
+        )}
+      </AiChatMessageLine>
+      <Notes lines={notes} />
+    </>
+  );
+}
+
+const CONDITION_ICON: Record<string, typeof RiSunLine> = {
+  clear: RiSunLine,
+  'partly-cloudy': RiSunFoggyLine,
+  cloudy: RiCloudLine,
+  fog: RiSunFoggyLine,
+  drizzle: RiDropLine,
+  rain: RiDropLine,
+  showers: RiDropLine,
+  snow: RiSnowflakeLine,
+  'snow-showers': RiSnowflakeLine,
+  thunderstorm: RiCloudLine,
+};
+
+const conditionIcon = (condition: string) => CONDITION_ICON[condition] ?? RiCloudLine;
+
+function WeatherResult({ data }: { data: WeatherCardData }) {
+  const { t, locale } = useLabels();
+  /** View state, deliberately not persisted: nobody reopens a chat for its unit. */
+  const [unit, setUnit] = useState<TemperatureUnit>('C');
+
+  return (
+    <AiChatMessageLine block>
+      <Card>
+        <CardHeader>
+          <View className="flex-row items-center gap-3">
+            <IconCircle icon={conditionIcon(data.current.condition)} size="lg" />
+            <View className="min-w-0 flex-1">
+              <Muted>{data.place}</Muted>
+              <Text variant="title-1-medium">{degrees(data.current.temperature, unit)}</Text>
+              <Muted>{t(`weather.condition.${data.current.condition}`)}</Muted>
+            </View>
+            <SegmentedControl
+              label={t('weather.toggleUnit')}
+              type="radio"
+              value={unit}
+              onValueChange={(next: string) => setUnit(next === 'F' ? 'F' : 'C')}
+            >
+              <SegmentedControlItem value="C">
+                <SegmentedControlItemText>°C</SegmentedControlItemText>
+              </SegmentedControlItem>
+              <SegmentedControlItem value="F">
+                <SegmentedControlItemText>°F</SegmentedControlItemText>
+              </SegmentedControlItem>
+            </SegmentedControl>
+          </View>
+        </CardHeader>
+        {data.daily.length === 0 ? null : (
+          <CardBody>
+            {data.daily.map((day) => {
+              const Icon = conditionIcon(day.condition);
+              return (
+                <Item
+                  key={day.date}
+                  density="compact"
+                  role="listitem"
+                  leading={<Icon size="sm" />}
+                  title={forecastWeekday(day.date, locale)}
+                  subtitle={t(`weather.condition.${day.condition}`)}
+                  trailing={
+                    <Text variant="body-medium">
+                      {`${degrees(day.high, unit)} / ${degrees(day.low, unit)}`}
+                    </Text>
+                  }
+                />
+              );
+            })}
+          </CardBody>
+        )}
+      </Card>
+    </AiChatMessageLine>
+  );
+}
+
+function ScheduledTaskResult({ data }: { data: ScheduledTaskCardData }) {
+  const { t } = useLabels();
+  const { openAutomation } = useAliaRuntime().host;
+  return (
+    <AiChatMessageLine block>
+      <Card>
+        <Item
+          leading={<RiCalendarScheduleLine size="md" />}
+          title={data.objective}
+          subtitle={triggerLabel(data.trigger, t)}
+          trailing={
+            <View className="flex-row items-center gap-2">
+              <Badge
+                variant="subtle"
+                color={data.enabled ? 'success' : 'default'}
+                content={t(data.enabled ? 'chat.toolCard.scheduled' : 'chat.toolCard.paused')}
+              />
+              {openAutomation === undefined ? null : <RiArrowRightSLine size="sm" />}
+            </View>
+          }
+          // Pressable only where the host has a place to show the task.
+          {...(openAutomation === undefined
+            ? {}
+            : {
+                accessibilityRole: 'link' as const,
+                accessibilityLabel: t('chat.toolCard.openTask', { objective: data.objective }),
+                onPress: () => openAutomation(data.id),
+              })}
+        />
+      </Card>
+    </AiChatMessageLine>
+  );
+}

package/src/components/thread/TurnMenu.tsx

@@ -0,0 +1,54 @@
+import type { AiChatTurnAction } from '@oxy.so/bloom/ai-chat';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@oxy.so/bloom/context-menu';
+import type { ReactNode } from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * The turn's actions as a long-press menu, on native.
+ *
+ * What a turn can do besides being read — copy, read aloud, regenerate, edit — is drawn by the
+ * row with Bloom's turn actions: the feedback row under a reply, the action row under a question.
+ * A phone has no hover, and those rows are small targets under a long reply; a long press anywhere
+ * on the turn is where people look for them. Web keeps the rows alone: there a right-click on a
+ * reply is the browser's own menu, with the text selection in it, and taking that away to show
+ * the same buttons again would be a loss.
+ */
+const STRETCH = { alignSelf: 'stretch' } as const;
+
+export function TurnMenu({
+  actions,
+  label,
+  children,
+}: {
+  actions: ReadonlyArray<AiChatTurnAction>;
+  label: string;
+  children: ReactNode;
+}) {
+  if (Platform.OS === 'web' || actions.length === 0) return <>{children}</>;
+  return (
+    <ContextMenu>
+      {/* Stretched: Bloom's trigger hugs its content by default, and a turn measures the column
+          it is in (a question is half of it). */}
+      <ContextMenuTrigger label={label} style={STRETCH}>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {actions.map(({ key, label: rowLabel, icon: Icon, onPress, disabled }) => (
+          <ContextMenuItem
+            key={key}
+            onPress={onPress}
+            disabled={disabled}
+            leading={<Icon size="sm" />}
+          >
+            {rowLabel}
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/thread/TurnStatusLine.tsx

@@ -0,0 +1,34 @@
+import { AiChatMessageLine } from '@oxy.so/bloom/ai-chat';
+import { Text } from 'react-native';
+
+/**
+ * A turn's status line — "Worked for 5m 32s", "Reasoning" — in the template's
+ * secondary tone, and the way into that turn's thought panel.
+ *
+ * The press target is a nested `Text`, so the line keeps Bloom's paragraph
+ * (its reveal, its tone) and only the words become the control. It works for
+ * any turn, not only the one in flight: the panel is opened on this message,
+ * in the conversation it belongs to.
+ */
+export function TurnStatusLine({
+  label,
+  hint,
+  onPress,
+}: {
+  label: string;
+  /** What pressing it does, for assistive technology. */
+  hint?: string;
+  onPress?: () => void;
+}) {
+  return (
+    <AiChatMessageLine tone="secondary" selectable={false}>
+      {onPress === undefined ? (
+        label
+      ) : (
+        <Text accessibilityRole="button" accessibilityHint={hint} onPress={onPress}>
+          {label}
+        </Text>
+      )}
+    </AiChatMessageLine>
+  );
+}

package/src/components/voice/AliaVoiceCall.tsx

@@ -0,0 +1,21 @@
+/**
+ * The call of a conversation screen: its bar, while a call is open.
+ *
+ * The call and its audio engine load on the first call, not with the chat, so a screen that
+ * never calls never evaluates `react-native-audio-api`.
+ */
+
+import { lazy, Suspense } from 'react';
+import type { VoiceSessionProps } from '../../types';
+
+const VoiceSession = lazy(() =>
+  import('./VoiceSession').then((module) => ({ default: module.VoiceSession })),
+);
+
+export function AliaVoiceCall(props: VoiceSessionProps) {
+  return (
+    <Suspense fallback={null}>
+      <VoiceSession {...props} />
+    </Suspense>
+  );
+}

package/src/components/voice/VoiceControls.tsx

@@ -8,36 +8,10 @@ import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import { VoiceControls as BloomVoiceControls, type VoiceState } from '@oxy.so/bloom/voice';
 import { View } from 'react-native';
+import { VOICE_CONTROLS_LABELS, type VoiceControlsLabels } from '../../lib/voice-controls-labels';
 import type { RoomState, AgentState, VoiceCallState } from '../../types';
 
-/** Every word the bar shows or announces. An app in another language passes its own. */
-export interface VoiceControlsLabels {
-  connecting: string;
-  reconnecting: string;
-  connected: string;
-  listening: string;
-  muted: string;
-  thinking: string;
-  usingTool: string;
-  speaking: string;
-  mute: string;
-  unmute: string;
-  end: string;
-}
-
-export const VOICE_CONTROLS_LABELS: VoiceControlsLabels = {
-  connecting: 'Connecting...',
-  reconnecting: 'Reconnecting...',
-  connected: 'Connected',
-  listening: 'Listening...',
-  muted: 'Muted',
-  thinking: 'Thinking...',
-  usingTool: 'Working on it...',
-  speaking: 'Speaking...',
-  mute: 'Mute',
-  unmute: 'Unmute',
-  end: 'End',
-};
+export { VOICE_CONTROLS_LABELS, type VoiceControlsLabels };
 
 export interface VoiceControlsProps {
   roomState: RoomState;

package/src/components/voice/VoiceSession.tsx

@@ -1,19 +1,20 @@
 /**
  * A live voice call, mounted only while voice mode is on.
  *
- * The chat shell receives it as the `voiceSession` prop rather than importing
- * it, so a text-only consumer never compiles the call, its audio engine or
- * the call UI — which is the reason the `@alia.onl/sdk/voice` entry exists.
- *
  * Mounting starts the call; unmounting ends it (`useVoiceRoom` stops listening
- * and speaking on unmount), so the shell only has to decide whether to render it.
+ * and speaking on unmount), so the screen only has to decide whether to render it.
+ *
+ * It also says what happened, in the chat's language (`labels`): a failure, a call moved to
+ * another device or cut by the server, the time limit near. A hang-up says nothing. Every
+ * surface that offers a call gets this one, so they cannot disagree.
  */
 
 import { useEffect, useRef } from 'react';
 import { useVoiceRoom } from '../../hooks/useVoiceRoom';
-import { VOICE_ERROR_MESSAGES } from '../../lib/speech-messages';
+import { toastNotice } from '../../hooks/useVoiceLauncher';
 import { useAudioLevelMonitor } from '../../hooks/useAudioLevelMonitor';
 import { useAudioLevels } from '../../hooks/useAudioLevels';
+import { useLabels } from '../../lib/labels';
 import { VoiceControls } from './VoiceControls';
 import type { VoiceSessionProps } from '../../types';
 
@@ -23,16 +24,21 @@ export function VoiceSession({
   agentId,
   locale,
   voice,
+  onMessagesSaved,
+  onNotice = toastNotice,
   onStateChange,
   onEnd,
 }: VoiceSessionProps) {
+  const labels = useLabels();
   const {
     room,
     callState,
     roomState,
     agentState,
     isMuted,
-    error,
+    errorCode,
+    endedReason,
+    endingSoonMs,
     messages,
     isConnected,
     connect,
@@ -43,6 +49,7 @@ export function VoiceSession({
     ...(agentId === undefined ? {} : { agentId }),
     ...(locale === undefined ? {} : { lang: locale }),
     ...(voice === undefined ? {} : { voicePreference: voice }),
+    ...(onMessagesSaved === undefined ? {} : { onMessagesSaved }),
   });
 
   const { captureLevel, playbackLevel } = useAudioLevelMonitor(room, isConnected);
@@ -66,18 +73,37 @@ export function VoiceSession({
     onStateChange({ isConnected, agentState, waveAmplitude, messages });
   }, [isConnected, agentState, waveAmplitude, messages, onStateChange]);
 
+  // The call is about to reach its time limit: said once, and shown in the bar.
+  const notice = endingSoonMs === null ? null : labels.voiceEndingSoon;
+  const warnedRef = useRef(false);
+  useEffect(() => {
+    if (notice === null || warnedRef.current) return;
+    warnedRef.current = true;
+    onNotice({ kind: 'warning', text: notice });
+  }, [notice, onNotice]);
+
   // End the call on failure, or once a call we actually reached ends. The
   // "reached" flag is what keeps the pre-connect `disconnected` state — which
   // every session starts in — from ending the call before it begins.
   const reachedRoomRef = useRef(false);
+  const finishedRef = useRef(false);
   useEffect(() => {
+    if (finishedRef.current) return;
     if (roomState !== 'disconnected') reachedRoomRef.current = true;
-    if (error || roomState === 'error') {
-      onEnd(error ?? VOICE_ERROR_MESSAGES['realtime-failed']);
+    if (errorCode !== null || roomState === 'error') {
+      finishedRef.current = true;
+      onNotice({ kind: 'error', text: labels.voiceError(errorCode ?? 'realtime-failed') });
+      onEnd();
       return;
     }
-    if (roomState === 'disconnected' && reachedRoomRef.current) onEnd();
-  }, [error, roomState, onEnd]);
+    if (roomState === 'disconnected' && reachedRoomRef.current) {
+      finishedRef.current = true;
+      // Moved to another device, the time limit, the credits: information. A hang-up: nothing.
+      const text = endedReason === null ? null : labels.voiceEnded(endedReason);
+      if (text !== null) onNotice({ kind: 'info', text });
+      onEnd();
+    }
+  }, [errorCode, endedReason, roomState, onEnd, onNotice, labels]);
 
   return (
     <VoiceControls
@@ -86,7 +112,9 @@ export function VoiceSession({
       isMuted={isMuted}
       onToggleMute={toggleMute}
       onEnd={onEnd}
+      notice={notice}
       callState={callState}
+      labels={labels.voiceControls}
     />
   );
 }

package/src/hooks/useAliaActivity.ts

@@ -6,7 +6,7 @@ import { acquireActivitySocket } from '../lib/activity-socket';
 import { ALIA_API_URL } from '../lib/origins';
 
 export interface UseAliaActivityOptions {
-  /** The API the activity socket connects to. Defaults like `useAliaChat`'s `apiUrl`. */
+  /** The API the activity socket connects to. Defaults to the runtime's `apiUrl`. */
   apiUrl?: string;
 }
 
@@ -14,7 +14,7 @@ export interface UseAliaActivityOptions {
  * What Alia is doing right now, for any surface that wants to show it — an "Ask Alia" button's
  * avatar, a status dot. It is the busiest of:
  *
- * - a turn running in this app (`useAliaChat`, so the sheet drives every button), and
+ * - a turn running in this app (`useConversationThread`, so every chat drives every button), and
  * - her runs for the signed-in person elsewhere, reported by the server over one shared socket
  *   (background work, another device), connected only while someone is signed in AND using this.
  */

package/src/hooks/useAtBottom.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+/** How near the end still counts as being at the bottom, px. */
+export const AT_BOTTOM_THRESHOLD = 50;
+
+/**
+ * Whether the reader is at the end of the thread, for the jump-to-present
+ * button.
+ *
+ * ## What this replaced
+ *
+ * `use-scroll-to-bottom.ts`, 183 lines, which owned four things at once: the
+ * sticky follow, the upward pagination trigger, the anchor that held the
+ * reader's position while a page landed above them, and this. Bloom's
+ * `AiChatThread` owns the first three now — `followThreshold`,
+ * `onStartReached` and `maintainStartPosition`, added in 3.3.0 for exactly
+ * this adoption — and it implements them the same way, measuring the threshold
+ * against the height BEFORE the growth and adding a landed page's delta to the
+ * offset.
+ *
+ * What Bloom does NOT answer is this question, because it is the host's: a
+ * thread has no opinion about whether something should float over it offering
+ * to jump. So the one piece that did not move is the one that was never
+ * Bloom's.
+ *
+ * ## Why it is a ref plus a coarse boolean
+ *
+ * `onScroll` fires at 16ms while an answer streams, and this feeds a button
+ * that has exactly two appearances. Setting state on every event would
+ * re-render the whole screen sixty times a second to change nothing; the ref
+ * holds the live number and the state changes only when the ANSWER changes.
+ */
+export function useAtBottom(threshold: number = AT_BOTTOM_THRESHOLD) {
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const atBottom = useRef(true);
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      const distance = contentSize.height - contentOffset.y - layoutMeasurement.height;
+      const next = distance <= threshold;
+      if (next === atBottom.current) return;
+      atBottom.current = next;
+      setIsAtBottom(next);
+    },
+    [threshold],
+  );
+
+  return { isAtBottom, onScroll };
+}

package/src/hooks/useAttachMenu.ts

@@ -0,0 +1,94 @@
+import { RiFileTextLine } from '@oxy.so/bloom/icons/RiFileTextLine';
+import { RiImageLine } from '@oxy.so/bloom/icons/RiImageLine';
+import { useCallback, useMemo } from 'react';
+import type { AliaAddMenu } from '../lib/add-menu';
+import type { IntakeKind } from '../lib/attachment-intake';
+import { useLabels } from '../lib/labels';
+import { ALIA_FEATURES, type FeatureOffer } from '../runtime/agents';
+import { type DraftAddress, useComposerDraftStore } from '../runtime/composer-draft-store';
+import type { AliaAttachment } from '../types';
+import { useImagePicker } from './useImagePicker';
+
+/** What the chat offers to attach: each attachment feature's offer for this lead and person. */
+export interface AttachOffers {
+  images: FeatureOffer;
+  documents: FeatureOffer;
+}
+
+const attachmentId = (prefix: string) =>
+  `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+/**
+ * The add menu a host that brings none gets: photos and files, each only where the lead offers it
+ * (`featureOffer`). A row the lead's feature gate keeps locked is still shown, and pressing it
+ * hands the feature to the host's upsell (`onFeatureLocked`) instead of opening a picker.
+ */
+export function useAttachMenu(
+  address: DraftAddress,
+  offers: AttachOffers,
+  onFeatureLocked: ((key: string) => void) | undefined,
+): AliaAddMenu & { kinds: readonly IntakeKind[] } {
+  const labels = useLabels();
+  const { pickImage } = useImagePicker();
+
+  const groups = useMemo(() => {
+    const rows = [
+      ...(offers.images === 'absent'
+        ? []
+        : [{ id: 'photos', label: labels.addPhotos, icon: RiImageLine }]),
+      ...(offers.documents === 'absent'
+        ? []
+        : [{ id: 'documents', label: labels.addDocuments, icon: RiFileTextLine }]),
+    ];
+    return rows.length === 0 ? [] : [{ label: labels.addMenuGroup, rows }];
+  }, [offers.images, offers.documents, labels.addMenuGroup, labels.addPhotos, labels.addDocuments]);
+
+  /** Dropped and pasted files are held to the same offer: only an available kind is taken. */
+  const kinds = useMemo<IntakeKind[]>(
+    () => [
+      ...(offers.images === 'available' ? (['image'] as const) : []),
+      ...(offers.documents === 'available' ? (['document'] as const) : []),
+    ],
+    [offers.images, offers.documents],
+  );
+
+  const onSelect = useCallback(
+    async (rowId: string) => {
+      const kind = rowId === 'photos' ? 'images' : rowId === 'documents' ? 'documents' : null;
+      if (kind === null) return;
+      if (offers[kind] === 'locked') {
+        onFeatureLocked?.(ALIA_FEATURES[kind]);
+        return;
+      }
+      const store = useComposerDraftStore.getState();
+      const picked: AliaAttachment[] =
+        kind === 'images'
+          ? ((await pickImage()) ?? []).map((asset) => ({
+              id: attachmentId('img'),
+              type: 'image' as const,
+              name: asset.name,
+              uri: asset.uri,
+              size: asset.size,
+              mimeType: asset.mimeType,
+            }))
+          : // The picker loads with the first document: a chat that never attaches one never does.
+            ((await (await import('../lib/document-picker')).pickDocuments()) ?? []).map(
+              (asset) => ({
+                id: attachmentId('doc'),
+                type: 'document' as const,
+                name: asset.name,
+                uri: asset.uri,
+                size: asset.size,
+                mimeType: asset.mimeType,
+              }),
+            );
+      for (const attachment of picked) store.addAttachment(address, attachment);
+    },
+    [offers, onFeatureLocked, pickImage, address],
+  );
+
+  return useMemo(
+    () => ({ groups, kinds, onSelect: (rowId: string) => void onSelect(rowId) }),
+    [groups, kinds, onSelect],
+  );
+}