@alia.onl/sdk 13.1.0 → 15.2.1

package/src/components/AliaChatContent.tsx

@@ -2,39 +2,37 @@
  * Shared chat content component used by both AliaChatSheet and AliaChatScreen.
  *
  * Owns the text chat; voice is an injected capability (`voiceSession`) so that
- * nothing here reaches `livekit-client` at module-evaluation time. Containers
+ * nothing here reaches the call or its audio engine at module-evaluation time. Containers
  * 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, { Suspense, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { View } from 'react-native';
+import { View, type TextInput } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { turnActivityState } from '../lib/turn-state';
 import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
 import { useTTS } from '../hooks/useTTS';
-import { useSpeechToText } from '../hooks/useSpeechToText';
+import { useFocusWhenPresented } from '../hooks/useFocusWhenPresented';
+import { usePendingQuestions } from '../hooks/usePendingQuestions';
 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 { getAccountDisplayName } from '@oxy.so/core';
 import { useOxy } from '@oxy.so/services/ui/client';
-import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
-import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
-import { pendingQuestions } from '../lib/questions';
 import { AliaChatMessageList } from './AliaChatMessageList';
 import { AliaFlightsProvider, ALIA_TO_PROFILE } from '../lib/flights';
 import { AliaWelcomeMessage } from './AliaWelcomeMessage';
-import { ComposerSuggestions } from './ComposerSuggestions';
+import { AliaComposer } from './AliaComposer';
 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 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';
@@ -42,6 +40,7 @@ import { type AliaChatLabels, AliaChatLabelsProvider, useLabels } from '../lib/l
 import type { AliaAvatarState } from './AliaAvatar';
 import { VoiceModeIcon } from './VoiceModeIcon';
 import type {
+  AliaAttachment,
   AliaSuggestion,
   ChatMessage,
   VoiceMessage,
@@ -137,14 +136,21 @@ export interface AliaChatContentProps {
   flights?: AvatarFlights;
   /** A turn sent once as this chat mounts: the conversation a sheet was opened for. */
   initialTurn?: AliaTurn;
+  /**
+   * The `animatedProgress` of the Bloom sheet this chat is in. The composer takes focus (and on
+   * native opens the keyboard) once it reads `1`, so the person can type as soon as the sheet is
+   * up. Omitted, the chat is not in a sheet and focus is left alone.
+   */
+  presentedProgress?: SharedValue<number>;
   /** 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>;
-  /** Where the 3D avatar's runtime is served from; omitted, Alia's shared copy (`ALIA_CHARACTER_RUNTIME_URL`). */
-  characterRuntimeUrl?: string;
 }
 
+/** The chat API carries photos (`image_url` parts) and nothing else. */
+const PHOTOS_ONLY = ['image'] as const;
+
 /** The add menu: photos are the one attachment the chat API carries (`image_url` parts). */
 function addMenu(labels: AliaChatLabels): ComposerPanelAddMenuGroup[] {
   return [
@@ -192,6 +198,7 @@ function AliaChatContentBody({
   agents: knownAgents,
   flights: sharedFlights,
   initialTurn,
+  presentedProgress,
   onStopReady,
 }: AliaChatContentProps) {
   const ownFlights = useAvatarFlights();
@@ -212,15 +219,7 @@ function AliaChatContentBody({
   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;
+  const asked = usePendingQuestions(messages, isStreaming);
 
   // 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;
@@ -258,9 +257,7 @@ function AliaChatContentBody({
   const [inputValue, setInputValue] = useState('');
 
   // 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; mimeType?: string }>
-  >([]);
+  const [photos, setPhotos] = useState<AliaAttachment[]>([]);
   const { pickImage } = useImagePicker();
 
   const handleAddMenuSelect = useCallback(
@@ -272,8 +269,10 @@ function AliaChatContentBody({
         ...prev,
         ...assets.map((asset) => ({
           id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+          type: 'image' as const,
           name: asset.name,
           uri: asset.uri,
+          size: asset.size,
           mimeType: asset.mimeType,
         })),
       ]);
@@ -323,24 +322,6 @@ function AliaChatContentBody({
     [submitTurn, 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 });
 
@@ -397,12 +378,7 @@ function AliaChatContentBody({
       if (voiceAgentState === 'thinking') return 'thinking';
       return 'idle';
     }
-    if (!isStreaming) return 'idle';
-    const lastMsg = messages[messages.length - 1];
-    if (lastMsg?.role === 'assistant' && lastMsg.toolInvocations?.some((t) => t.state === 'call'))
-      return 'working';
-    if (lastMsg?.thinking) return 'thinking';
-    return 'writing';
+    return turnActivityState(messages, isStreaming);
   }, [messages, isStreaming, isVoiceActive, voiceAgentState]);
 
   const { user } = useOxy();
@@ -452,16 +428,8 @@ function AliaChatContentBody({
     [VoiceSession, activateVoice, labels.startVoice],
   );
 
-  const pillAttachments = useMemo(
-    () =>
-      photos.map((photo) => ({
-        id: photo.id,
-        name: photo.name,
-        kind: 'image' as const,
-        src: photo.uri,
-      })),
-    [photos],
-  );
+  const composerRef = useRef<TextInput | null>(null);
+  useFocusWhenPresented(presentedProgress, () => composerRef.current?.focus());
 
   const composer =
     VoiceSession && isVoiceActive ? (
@@ -470,45 +438,33 @@ function AliaChatContentBody({
         <VoiceSession apiUrl={apiUrl} onStateChange={setVoiceState} onEnd={deactivateVoice} />
       </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}
-            onValueChange={setInputValue}
-            onSubmit={handleSubmit}
-            busy={isStreaming}
-            onStop={stop}
-            emptyAction={voiceActivateButton}
-            placeholder={labels.placeholder}
-            addMenu={addMenuGroups}
-            onAddMenuSelect={handleAddMenuSelect}
-            attachments={pillAttachments}
-            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>
-      </>
+      <AliaComposer
+        apiUrl={apiUrl}
+        inputRef={composerRef}
+        disableKeyboardAvoidance
+        onKeyPress={suggestions.onKeyPress}
+        suggestions={{ ...suggestions, onPick: handlePickSuggestion }}
+        // Asked beside the field, not in the thread: the card docks above the composer.
+        questions={{
+          items: asked.questions,
+          onSubmit: (message) => send(message),
+          onDismiss: asked.dismiss,
+        }}
+        value={inputValue}
+        onValueChange={setInputValue}
+        onSubmit={() => void handleSubmit(inputValue)}
+        busy={isStreaming}
+        onStop={stop}
+        emptyAction={voiceActivateButton}
+        placeholder={labels.placeholder}
+        addMenu={addMenuGroups}
+        onAddMenuSelect={handleAddMenuSelect}
+        attachments={photos}
+        onAddAttachment={(photo) => setPhotos((prev) => [...prev, photo])}
+        onRemoveAttachment={(id) => setPhotos((prev) => prev.filter((p) => p.id !== id))}
+        attachmentKinds={PHOTOS_ONLY}
+        onError={onError}
+      />
     );
 
   const hasMessages = messages.length > 0;
@@ -572,16 +528,10 @@ function AliaChatContentBody({
 }
 
 /** The chat: header, thread and composer, with the host's labels in reach of all of it. */
-export function AliaChatContent({
-  labels,
-  characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
-  ...props
-}: AliaChatContentProps) {
+export function AliaChatContent({ labels, ...props }: AliaChatContentProps) {
   return (
-    <AgentAvatarProvider runtimeUrl={characterRuntimeUrl}>
-      <AliaChatLabelsProvider labels={labels}>
-        <AliaChatContentBody {...props} />
-      </AliaChatLabelsProvider>
-    </AgentAvatarProvider>
+    <AliaChatLabelsProvider labels={labels}>
+      <AliaChatContentBody {...props} />
+    </AliaChatLabelsProvider>
   );
 }

package/src/components/AliaChatMessageList.tsx

@@ -1,13 +1,6 @@
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { View, Pressable, Platform } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-  withSequence,
-  cancelAnimation,
-} from 'react-native-reanimated';
+import { View, Platform } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { Textarea } from '@oxy.so/bloom/textarea';
 import { TaskList } from '@oxy.so/bloom/task-list';
 import { Text } from '@oxy.so/bloom/typography';
@@ -41,7 +34,6 @@ import { AskedQuestions } from './QuestionCard';
 import { askedQuestions, isQuestionInvocation } from '../lib/questions';
 import { extractCitationSources, linkifyCitations } from '../lib/citations';
 import { chatMessageEnter } from '../animations';
-import { getToolLabel, getToolActiveLabel, getResearchActiveLabel } from '../lib/tool-registry';
 import { getTextFromContent, getImagesFromContent } from '../lib/content-utils';
 import type { ChatMessage } from '../types';
 

package/src/components/AliaChatScreen.tsx

@@ -14,12 +14,14 @@
  *
  * Voice is opt-in — pass `voiceSession={VoiceSession}` from
  * `@alia.onl/sdk/voice` to offer calls. Without it the screen is text-only and
- * `livekit-client` never enters the bundle.
+ * `react-native-audio-api` never enters the bundle.
  */
 
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
+import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
 import { KeyboardAvoidingView } from '../lib/keyboard';
 import { AliaChatContent, type AliaChatContentProps } from './AliaChatContent';
 import { AliaChatHeader } from './AliaChatHeader';
@@ -84,7 +86,7 @@ export function AliaChatScreen({
   isDarkMode,
   voiceSession,
   labels,
-  characterRuntimeUrl,
+  characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
 }: AliaChatScreenProps) {
   const insets = useSafeAreaInsets();
   // The screen owns the whole window, so it keeps its composer out of both
@@ -114,28 +116,29 @@ export function AliaChatScreen({
   );
 
   return (
-    <View
-      className="flex-1 bg-background-full"
-      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
-    >
-      <KeyboardAvoidingView behavior="padding" automaticOffset style={{ flex: 1 }}>
-        <AliaChatContent
-          clientContext={clientContext}
-          model={model}
-          apiUrl={apiUrl}
-          welcomeGreeting={welcomeGreeting}
-          welcomeSubtitle={welcomeSubtitle}
-          welcomeSuggestions={welcomeSuggestions}
-          agents={agents}
-          suggestionMatches={suggestionMatches}
-          onSuggestionQuery={onSuggestionQuery}
-          isDarkMode={isDarkMode}
-          voiceSession={voiceSession}
-          labels={labels}
-          characterRuntimeUrl={characterRuntimeUrl}
-          header={header}
-        />
-      </KeyboardAvoidingView>
-    </View>
+    <AgentAvatarProvider runtimeUrl={characterRuntimeUrl}>
+      <View
+        className="flex-1 bg-background-full"
+        style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+      >
+        <KeyboardAvoidingView behavior="padding" automaticOffset style={{ flex: 1 }}>
+          <AliaChatContent
+            clientContext={clientContext}
+            model={model}
+            apiUrl={apiUrl}
+            welcomeGreeting={welcomeGreeting}
+            welcomeSubtitle={welcomeSubtitle}
+            welcomeSuggestions={welcomeSuggestions}
+            agents={agents}
+            suggestionMatches={suggestionMatches}
+            onSuggestionQuery={onSuggestionQuery}
+            isDarkMode={isDarkMode}
+            voiceSession={voiceSession}
+            labels={labels}
+            header={header}
+          />
+        </KeyboardAvoidingView>
+      </View>
+    </AgentAvatarProvider>
   );
 }

package/src/components/AliaChatSheet.tsx

@@ -1,10 +1,13 @@
+import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';
 import { AvatarFlightLayer, useAvatarFlights } from '@oxy.so/bloom/avatar-flight';
 import { BottomSheet, type BottomSheetRef } from '@oxy.so/bloom/bottom-sheet';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { useWindowDimensions, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BREAKPOINTS } from '@oxy.so/bloom/styles';
+import { ALIA_CHARACTER_RUNTIME_URL } from '../lib/character-runtime';
 import type { AliaChatLabels } from '../lib/labels';
 import type { VoiceSessionComponent } from '../types';
 import { AliaChatContent, type AliaChatContentProps, type AliaTurn } from './AliaChatContent';
@@ -46,7 +49,7 @@ export interface AliaChatSheetProps {
   isDarkMode?: boolean;
   /**
    * Voice capability — pass `VoiceSession` from `@alia.onl/sdk/voice` to offer
-   * voice calls. Omitted, the sheet is text-only and `livekit-client` never
+   * voice calls. Omitted, the sheet is text-only and `react-native-audio-api` never
    * enters the bundle.
    */
   voiceSession?: VoiceSessionComponent;
@@ -61,7 +64,12 @@ export interface AliaChatSheetProps {
 }
 
 export interface AliaChatSheetRef {
-  present: () => void;
+  /**
+   * Opens the sheet. Given a `turn`, the conversation opens over it with that message already
+   * sent (an "ask Alia about this" button: a profile, a post, a file); without one, the sheet
+   * opens on its welcome, with the composer focused.
+   */
+  present: (turn?: AliaTurn) => void;
   dismiss: () => void;
 }
 
@@ -80,7 +88,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       isDarkMode,
       voiceSession,
       labels,
-      characterRuntimeUrl,
+      characterRuntimeUrl = ALIA_CHARACTER_RUNTIME_URL,
       onShare,
       headerMenu,
     },
@@ -88,6 +96,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
   ) => {
     // Bloom's resolved mode, not the system's scheme.
     const { isDark } = useTheme();
+    // How far each sheet is presented (0 closed, 1 up): its chat takes the composer's focus at 1.
+    const mainProgress = useSharedValue(0);
+    const conversationProgress = useSharedValue(0);
     const mainRef = useRef<BottomSheetRef>(null);
     const conversationRef = useRef<BottomSheetRef>(null);
     // Each sheet's chat registers its own canceller; closing a sheet stops its own turn.
@@ -131,8 +142,14 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
 
     useImperativeHandle(
       ref,
-      () => ({ present: () => mainRef.current?.present(), dismiss: handleDismiss }),
-      [handleDismiss],
+      () => ({
+        present: (turn) => {
+          mainRef.current?.present();
+          if (turn) startConversation(turn);
+        },
+        dismiss: handleDismiss,
+      }),
+      [handleDismiss, startConversation],
     );
 
     // Closing the main sheet (a drag, backdrop press, Back or Escape) closes what is stacked on it.
@@ -162,16 +179,18 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       voiceSession,
       bottomInset: detached ? 0 : bottom,
       labels,
-      characterRuntimeUrl,
     };
 
+    // The provider wraps the sheets AND the flight layer: both draw avatars, and an avatar drawn
+    // outside it would fall back to the host's own `/bloom-character/runtime.mjs`.
     return (
-      <>
+      <AgentAvatarProvider runtimeUrl={characterRuntimeUrl}>
         <BottomSheet
           ref={mainRef}
           detached={detached}
           scrollable={false}
           manualActivation
+          animatedProgress={mainProgress}
           onDismissAttempt={onMainDismissAttempt}
           onDismiss={() => setConversation(null)}
           style={sheetStyle}
@@ -186,6 +205,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             agents={agents}
             suggestionMatches={suggestionMatches}
             onSuggestionQuery={onSuggestionQuery}
+            presentedProgress={mainProgress}
             onStopReady={registerMainStop}
             onStart={startConversation}
           />
@@ -198,6 +218,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             detached={detached}
             scrollable={false}
             manualActivation
+            animatedProgress={conversationProgress}
             onDismissAttempt={onConversationDismissAttempt}
             onDismiss={() => setConversation(null)}
             style={sheetStyle}
@@ -205,6 +226,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
             <AliaChatContent
               {...shared}
               initialTurn={conversation.turn}
+              presentedProgress={conversationProgress}
               agents={agents}
               onStopReady={registerConversationStop}
               // The bar is the conversation's: back to the main screen, the profile, share and
@@ -225,7 +247,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
           </BottomSheet>
         ) : null}
         <AvatarFlightLayer flights={flights} />
-      </>
+      </AgentAvatarProvider>
     );
   },
 );