@alia.onl/sdk 10.1.1 → 11.1.0

package/src/components/voice/VoiceControls.tsx

@@ -1,12 +1,12 @@
 /**
  * Bottom voice control bar that replaces the composer when voice mode is active.
- * Contains status text and mute/end buttons.
+ * Contains status text and Bloom's mute/end call controls.
  */
 
-import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
-import Mic from 'lucide-react-native/icons/mic';
-import MicOff from 'lucide-react-native/icons/mic-off';
-import PhoneOff from 'lucide-react-native/icons/phone-off';
+import { CallControls } from '@oxy.so/bloom/call-ui';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
 import type { RoomState, AgentState } from '../../types';
 
 /** Every word the bar shows or announces. An app in another language passes its own. */
@@ -40,8 +40,6 @@ export interface VoiceControlsProps {
   isMuted: boolean;
   onToggleMute: () => void;
   onEnd: () => void;
-  /** Override theme primary color (resolved hex/hsl value, not CSS var) */
-  primaryColor?: string;
   /** Overrides for any of {@link VOICE_CONTROLS_LABELS}. */
   labels?: Partial<VoiceControlsLabels>;
 }
@@ -68,84 +66,35 @@ export function VoiceControls({
   isMuted,
   onToggleMute,
   onEnd,
-  primaryColor,
   labels: labelOverrides,
 }: VoiceControlsProps) {
   const labels = { ...VOICE_CONTROLS_LABELS, ...labelOverrides };
   const statusText = getStatusText(roomState, agentState, isMuted, labels);
 
   return (
-    <View style={styles.container}>
+    <View className="items-center gap-4 pb-6 pt-4">
       {statusText ? (
-        <Text className="text-lg font-medium mb-4 text-foreground" accessibilityLiveRegion="polite" aria-live="polite">
+        <Text
+          className="text-lg font-medium text-text-primary"
+          accessibilityLiveRegion="polite"
+          aria-live="polite"
+        >
           {statusText}
         </Text>
       ) : null}
 
-      {roomState === 'connected' && (
-        <View style={styles.buttonRow}>
-          <View style={styles.buttonWrapper}>
-            <Pressable
-              onPress={onToggleMute}
-              accessibilityRole="button"
-              accessibilityLabel={labels.mute}
-              accessibilityState={{ selected: isMuted }}
-              aria-pressed={isMuted}
-              className={isMuted ? undefined : 'bg-muted'}
-              style={[styles.button, isMuted ? { backgroundColor: '#ef4444' } : undefined]}
-            >
-              {isMuted ? (
-                <MicOff size={24} color="white" />
-              ) : (
-                <Mic size={24} color="white" />
-              )}
-            </Pressable>
-            <Text className="text-xs text-muted-foreground">
-              {isMuted ? labels.unmute : labels.mute}
-            </Text>
-          </View>
-
-          <View style={styles.buttonWrapper}>
-            <Pressable
-              onPress={onEnd}
-              accessibilityRole="button"
-              accessibilityLabel={labels.end}
-              style={[styles.button, { backgroundColor: '#ef4444' }]}
-            >
-              <PhoneOff size={24} color="white" />
-            </Pressable>
-            <Text className="text-xs text-muted-foreground">{labels.end}</Text>
-          </View>
-        </View>
-      )}
+      {roomState === 'connected' ? (
+        <CallControls
+          muted={isMuted}
+          onMutedChange={onToggleMute}
+          onEndCall={onEnd}
+          // TODO(bloom): `CallControls` draws its captions for a dark call stage, so on the
+          // chat's light surface they vanish. The buttons keep their accessible names.
+          labels={{ mute: labels.mute, unmute: labels.unmute, endCall: labels.end }}
+        />
+      ) : null}
 
-      {roomState === 'connecting' && (
-        <ActivityIndicator size="large" className="text-muted-foreground" />
-      )}
+      {roomState === 'connecting' ? <Loading accessibilityLabel={labels.connecting} /> : null}
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    paddingBottom: 24,
-    paddingTop: 16,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 32,
-  },
-  buttonWrapper: {
-    alignItems: 'center',
-    gap: 8,
-  },
-  button: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/components/voice/VoiceSession.tsx

@@ -11,6 +11,7 @@
 
 import { useEffect, useRef } from 'react';
 import { useVoiceRoom } from '../../hooks/useVoiceRoom';
+import { VOICE_ERROR_MESSAGES } from '../../lib/speech-messages';
 import { useAudioLevelMonitor } from '../../hooks/useAudioLevelMonitor';
 import { useAudioLevels } from '../../hooks/useAudioLevels';
 import { VoiceControls } from './VoiceControls';
@@ -57,7 +58,7 @@ export function VoiceSession({ apiUrl, onStateChange, onEnd }: VoiceSessionProps
   useEffect(() => {
     if (roomState === 'connected') reachedRoomRef.current = true;
     if (error || roomState === 'error') {
-      onEnd();
+      onEnd(error ?? VOICE_ERROR_MESSAGES['turn-failed']);
       return;
     }
     if (roomState === 'disconnected' && reachedRoomRef.current) onEnd();

package/src/hooks/useAliaChat.ts

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useOxy } from '@oxy.so/services/ui/client';
 import type { ChatMessage, ToolInvocation } from '../types';
-import { getTextFromContent } from '../lib/content-utils';
+import { getTextFromContent, type MessageContent } from '../lib/content-utils';
 import { resolveModelId } from '../lib/catalogue';
 import { streamAliaChat } from '../lib/chat-transport';
 import type { AliaChatStreamEvent } from '../lib/chat-stream';
@@ -45,10 +45,15 @@ export interface UseAliaChatOptions {
   accessToken?: string;
 }
 
+export interface SendOptions {
+  images?: ReadonlyArray<string>;
+}
+
 export interface UseAliaChatReturn {
   messages: ChatMessage[];
   setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
-  send: (text: string) => void;
+  /** `images` are `data:` or `https:` URLs sent with the turn as `image_url` parts. */
+  send: (text: string, options?: SendOptions) => void;
   isStreaming: boolean;
   stop: () => void;
   clear: () => void;
@@ -112,12 +117,7 @@ function waitWithAbort<T>(promise: Promise<T>, signal: AbortSignal): Promise<T>
  * handler during its recorded compatibility window.
  */
 export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn {
-  const {
-    apiUrl = API_URL,
-    model,
-    clientContext,
-    accessToken: accessTokenProp,
-  } = options;
+  const { apiUrl = API_URL, model, clientContext, accessToken: accessTokenProp } = options;
   const requestUrl = '/v1/chat/completions';
 
   const { oxyServices } = useOxy();
@@ -231,9 +231,10 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
   }, [cancelPendingTimer]);
 
   const send = useCallback(
-    async (text: string) => {
+    async (text: string, options?: SendOptions) => {
       const trimmed = text.trim();
-      if (!trimmed) return;
+      const images = options?.images ?? [];
+      if (!trimmed && images.length === 0) return;
 
       const activeToken = oxyServices.session.accessToken;
       if (accessTokenProp !== undefined && accessTokenProp !== activeToken) {
@@ -253,10 +254,17 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
         flushPendingUpdates(previousPending);
       }
 
+      const userContent: MessageContent =
+        images.length > 0
+          ? [
+              ...(trimmed ? [{ type: 'text', text: trimmed }] : []),
+              ...images.map((url) => ({ type: 'image_url', image_url: { url } })),
+            ]
+          : trimmed;
       const userMessage: ChatMessage = {
         id: generateId(),
         role: 'user',
-        content: trimmed,
+        content: userContent,
         createdAt: Date.now(),
       };
       const assistantMessage: ChatMessage = {
@@ -281,7 +289,7 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
       setError(null);
       setIsStreaming(true);
 
-      const apiMessages: Array<{ role: string; content: string }> = [];
+      const apiMessages: Array<{ role: string; content: MessageContent }> = [];
       if (clientContext) apiMessages.push({ role: 'system', content: clientContext });
       for (const message of history) {
         if (message.role === 'system') continue;
@@ -295,7 +303,7 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
           }
         }
       }
-      apiMessages.push({ role: 'user', content: trimmed });
+      apiMessages.push({ role: 'user', content: userContent });
 
       const pending: PendingUpdates = {
         assistantId: assistantMessage.id,
@@ -351,8 +359,7 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
             updateAssistant(pending.assistantId, (last) => ({
               researchProgress: {
                 ...event.progress,
-                subQuestions:
-                  event.progress.subQuestions ?? last.researchProgress?.subQuestions,
+                subQuestions: event.progress.subQuestions ?? last.researchProgress?.subQuestions,
               },
             }));
             return;

package/src/hooks/useAmbientWave.ts

@@ -60,7 +60,12 @@ const ACTIVE_INTENSITY = 0.35;
  * reanimated-web; the combiner is a pure-read `useDerivedValue`. Effect-free — no
  * React `useEffect`.
  */
-export function useAmbientWave({ voice, isTTSPlaying, ttsWaveAmplitude, isGenerating }: UseAmbientWaveOptions): UseAmbientWaveResult {
+export function useAmbientWave({
+  voice,
+  isTTSPlaying,
+  ttsWaveAmplitude,
+  isGenerating,
+}: UseAmbientWaveOptions): UseAmbientWaveResult {
   // ── Idle breath: subtle 0.04↔0.09 swell (~7s), started once on mount ──
   const idleBreath = useSharedValue(0.04);
   useAnimatedReaction(
@@ -131,14 +136,26 @@ export function useAmbientWave({ voice, isTTSPlaying, ttsWaveAmplitude, isGenera
   // ── Combined amplitude — pure reads only (ticks on web) ──
   const voiceAmplitude = voice?.waveAmplitude;
   const waveAmplitude = useDerivedValue(
-    () => Math.max(idleBreath.value, voiceAmplitude ? voiceAmplitude.value : 0, ttsWaveAmplitude.value, stt.value, thinkingAmp.value),
+    () =>
+      Math.max(
+        idleBreath.value,
+        voiceAmplitude ? voiceAmplitude.value : 0,
+        ttsWaveAmplitude.value,
+        stt.value,
+        thinkingAmp.value,
+      ),
     [voiceAmplitude, ttsWaveAmplitude],
   );
 
   // ── Mode → palette state + overlay intensity (plain derived) ──
   return useMemo<UseAmbientWaveResult>(() => {
     if (voice?.isActive && voice.isConnected) {
-      return { waveAmplitude, agentState: voice.agentState, intensity: ACTIVE_INTENSITY, mode: 'voice' };
+      return {
+        waveAmplitude,
+        agentState: voice.agentState,
+        intensity: ACTIVE_INTENSITY,
+        mode: 'voice',
+      };
     }
     if (isTTSPlaying) {
       return { waveAmplitude, agentState: 'speaking', intensity: ACTIVE_INTENSITY, mode: 'tts' };
@@ -147,8 +164,21 @@ export function useAmbientWave({ voice, isTTSPlaying, ttsWaveAmplitude, isGenera
       return { waveAmplitude, agentState: 'listening', intensity: ACTIVE_INTENSITY, mode: 'stt' };
     }
     if (isGenerating) {
-      return { waveAmplitude, agentState: 'thinking', intensity: THINKING_INTENSITY, mode: 'thinking' };
+      return {
+        waveAmplitude,
+        agentState: 'thinking',
+        intensity: THINKING_INTENSITY,
+        mode: 'thinking',
+      };
     }
     return { waveAmplitude, agentState: 'idle', intensity: IDLE_INTENSITY, mode: 'idle' };
-  }, [waveAmplitude, voice?.isActive, voice?.isConnected, voice?.agentState, isTTSPlaying, sttIsRecording, isGenerating]);
+  }, [
+    waveAmplitude,
+    voice?.isActive,
+    voice?.isConnected,
+    voice?.agentState,
+    isTTSPlaying,
+    sttIsRecording,
+    isGenerating,
+  ]);
 }

package/src/hooks/useSoundEffects.ts

@@ -70,18 +70,21 @@ export function useSoundEffects(enabled: boolean = false, sounds: SoundSources =
     };
   }, [enabled, sounds]);
 
-  const play = useCallback((sound: SoundName) => {
-    if (!enabled) return;
-    const player = playersRef.current.get(sound);
-    if (player) {
-      try {
-        player.seekTo(0);
-        player.play();
-      } catch {
-        // Playback failed — ignore
+  const play = useCallback(
+    (sound: SoundName) => {
+      if (!enabled) return;
+      const player = playersRef.current.get(sound);
+      if (player) {
+        try {
+          player.seekTo(0);
+          player.play();
+        } catch {
+          // Playback failed — ignore
+        }
       }
-    }
-  }, [enabled]);
+    },
+    [enabled],
+  );
 
   return { play };
 }

package/src/hooks/useSpeechToText.ts

@@ -8,7 +8,11 @@ import {
 } from '../lib/speech-recognition';
 import type { SpeechRecognitionSession } from '../lib/speech-recognition-types';
 import type { SpeechRecognizerChoice } from '../lib/speech-recognition-types';
-import { speechFailureCode, VOICE_ERROR_MESSAGES, type VoiceErrorCode } from '../lib/speech-messages';
+import {
+  speechFailureCode,
+  VOICE_ERROR_MESSAGES,
+  type VoiceErrorCode,
+} from '../lib/speech-messages';
 import { defaultSpeechLanguage } from '../lib/speech-language';
 
 // ============== OPTIONS ==============
@@ -81,7 +85,10 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
   const currentTextRef = useRef('');
   const restartsRef = useRef(0);
   /** The recognizer and tag this dictation uses, chosen once when it starts. */
-  const recognizerRef = useRef<{ lang: string; service?: string; silent: boolean }>({ lang, silent: false });
+  const recognizerRef = useRef<{ lang: string; service?: string; silent: boolean }>({
+    lang,
+    silent: false,
+  });
   const endWaitersRef = useRef<Array<() => void>>([]);
   const lastMeteringRef = useRef(0);
   const mountedRef = useRef(true);