@alia.onl/sdk 3.1.0 → 3.1.2

package/src/components/voice/VoiceControls.tsx

@@ -4,8 +4,8 @@
  */
 
 import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
+import { Mic, MicOff, PhoneOff, Users } from 'lucide-react-native';
 import type { RoomState, AgentState } from '../../types';
-import { useAliaColors } from '../../theme';
 
 interface VoiceControlsProps {
   roomState: RoomState;
@@ -19,6 +19,8 @@ interface VoiceControlsProps {
   onDisableCohost: () => void;
   onContinueCohost: () => void;
   onEnd: () => void;
+  /** Override theme primary color (resolved hex/hsl value, not CSS var) */
+  primaryColor?: string;
 }
 
 function getStatusText(
@@ -52,14 +54,14 @@ export function VoiceControls({
   onDisableCohost,
   onContinueCohost,
   onEnd,
+  primaryColor,
 }: VoiceControlsProps) {
-  const colors = useAliaColors();
   const statusText = getStatusText(roomState, agentState, isMuted, cohostActive, currentSpeaker);
 
   return (
     <View style={styles.container}>
       {statusText ? (
-        <Text style={[styles.statusText, { color: colors.text }]}>
+        <Text className="text-lg font-medium mb-4 text-foreground">
           {statusText}
         </Text>
       ) : null}
@@ -67,9 +69,12 @@ export function VoiceControls({
       {roundComplete && (
         <Pressable
           onPress={onContinueCohost}
-          style={styles.continueButton}
+          className="bg-primary/30"
+          style={[styles.continueButton, primaryColor ? { backgroundColor: primaryColor + '4D' } : undefined]}
         >
-          <Text style={styles.continueText}>Continue conversation</Text>
+          <Text className="text-sm font-medium text-primary" style={primaryColor ? { color: primaryColor } : undefined}>
+            Continue conversation
+          </Text>
         </Pressable>
       )}
 
@@ -78,16 +83,16 @@ export function VoiceControls({
           <View style={styles.buttonWrapper}>
             <Pressable
               onPress={onToggleMute}
-              style={[
-                styles.button,
-                { backgroundColor: isMuted ? '#ef4444' : 'rgba(255,255,255,0.15)' },
-              ]}
+              className={isMuted ? undefined : 'bg-muted'}
+              style={[styles.button, isMuted ? { backgroundColor: '#ef4444' } : undefined]}
             >
-              <Text style={styles.buttonIcon}>
-                {isMuted ? '\u{1F507}' : '\u{1F3A4}'}
-              </Text>
+              {isMuted ? (
+                <MicOff size={24} color="white" />
+              ) : (
+                <Mic size={24} color="white" />
+              )}
             </Pressable>
-            <Text style={styles.buttonLabel}>
+            <Text className="text-xs text-muted-foreground">
               {isMuted ? 'Unmute' : 'Mute'}
             </Text>
           </View>
@@ -95,14 +100,15 @@ export function VoiceControls({
           <View style={styles.buttonWrapper}>
             <Pressable
               onPress={cohostActive ? onDisableCohost : onEnableCohost}
+              className={cohostActive ? 'bg-primary' : 'bg-muted'}
               style={[
                 styles.button,
-                { backgroundColor: cohostActive ? '#8b5cf6' : 'rgba(255,255,255,0.15)' },
+                cohostActive && primaryColor ? { backgroundColor: primaryColor } : undefined,
               ]}
             >
-              <Text style={styles.buttonIcon}>{'\u{1F465}'}</Text>
+              <Users size={24} color="white" />
             </Pressable>
-            <Text style={styles.buttonLabel}>
+            <Text className="text-xs text-muted-foreground">
               {cohostActive ? 'Solo' : 'Cohost'}
             </Text>
           </View>
@@ -112,15 +118,15 @@ export function VoiceControls({
               onPress={onEnd}
               style={[styles.button, { backgroundColor: '#ef4444' }]}
             >
-              <Text style={styles.endIcon}>{'\u2715'}</Text>
+              <PhoneOff size={24} color="white" />
             </Pressable>
-            <Text style={styles.buttonLabel}>End</Text>
+            <Text className="text-xs text-muted-foreground">End</Text>
           </View>
         </View>
       )}
 
       {roomState === 'connecting' && (
-        <ActivityIndicator size="large" color="#38bdf8" />
+        <ActivityIndicator size="large" className="text-muted-foreground" />
       )}
     </View>
   );
@@ -132,11 +138,6 @@ const styles = StyleSheet.create({
     paddingBottom: 24,
     paddingTop: 16,
   },
-  statusText: {
-    fontSize: 18,
-    fontWeight: '500',
-    marginBottom: 16,
-  },
   buttonRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -153,28 +154,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  buttonIcon: {
-    fontSize: 24,
-  },
-  endIcon: {
-    fontSize: 24,
-    color: '#ffffff',
-    fontWeight: '700',
-  },
-  buttonLabel: {
-    color: '#8E8E93',
-    fontSize: 12,
-  },
   continueButton: {
     marginBottom: 16,
     paddingHorizontal: 20,
     paddingVertical: 8,
     borderRadius: 24,
-    backgroundColor: 'rgba(139, 92, 246, 0.3)',
-  },
-  continueText: {
-    color: '#a78bfa',
-    fontSize: 14,
-    fontWeight: '500',
   },
 });

package/src/components/voice/VoiceOverlay.tsx

@@ -14,9 +14,11 @@ interface VoiceOverlayProps {
   waveAmplitude: SharedValue<number>;
   agentState: AgentState;
   isConnected: boolean;
+  primaryColor?: string;
+  isDarkMode?: boolean;
 }
 
-export function VoiceOverlay({ waveAmplitude, agentState, isConnected }: VoiceOverlayProps) {
+export function VoiceOverlay({ waveAmplitude, agentState, isConnected, primaryColor, isDarkMode }: VoiceOverlayProps) {
   return (
     <Animated.View
       entering={FadeIn.duration(400)}
@@ -36,6 +38,8 @@ export function VoiceOverlay({ waveAmplitude, agentState, isConnected }: VoiceOv
           waveAmplitude={waveAmplitude}
           agentState={agentState}
           isConnected={isConnected}
+          primaryColor={primaryColor}
+          isDarkMode={isDarkMode}
         />
       </View>
     </Animated.View>

package/src/hooks/useVoiceRoom.ts

@@ -21,6 +21,10 @@ import type { RoomState, AgentState, VoiceMessage, VoiceToolInvocation } from '.
 
 const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
+/** On web, audio tracks must be attached to a DOM element to play.
+ *  On native (React Native), the WebRTC layer plays them automatically. */
+const hasDOM = typeof document !== 'undefined';
+
 // ============== OPTIONS ==============
 
 export interface UseVoiceRoomOptions {
@@ -106,12 +110,14 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
 
   const cleanup = useCallback(() => {
     if (roomRef.current) {
-      // Detach all remote audio tracks before disconnecting
-      roomRef.current.remoteParticipants.forEach((p) => {
-        p.trackPublications.forEach((pub) => {
-          pub.track?.detach();
+      // On web, detach all remote audio tracks before disconnecting
+      if (hasDOM) {
+        roomRef.current.remoteParticipants.forEach((p) => {
+          p.trackPublications.forEach((pub) => {
+            pub.track?.detach();
+          });
         });
-      });
+      }
       roomRef.current.disconnect();
       roomRef.current = null;
     }
@@ -274,6 +280,13 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
       setError(null);
       setRoomState('connecting');
 
+      // Guard: WebRTC must be available (requires registerGlobals on RN)
+      if (typeof globalThis.RTCPeerConnection === 'undefined') {
+        setError('Voice is not available on this device');
+        setRoomState('error');
+        return;
+      }
+
       const token = getToken();
       if (!token) {
         setError('Not authenticated');
@@ -309,15 +322,18 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
       const room = new Room();
       roomRef.current = room;
 
-      // Event: remote audio tracks (agent speaking) — must attach to play
+      // Event: remote audio tracks (agent speaking)
+      // On web, must attach to a DOM element to play. On native, WebRTC plays audio automatically.
       room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
-        if (track.kind === Track.Kind.Audio) {
+        if (track.kind === Track.Kind.Audio && hasDOM) {
           track.attach();
         }
       });
 
       room.on(RoomEvent.TrackUnsubscribed, (track) => {
-        track.detach();
+        if (hasDOM && track.kind === Track.Kind.Audio) {
+          track.detach();
+        }
       });
 
       // Event: data messages from agent

package/src/index.ts

@@ -10,9 +10,10 @@ export type { AliaChatScreenProps } from './components/AliaChatScreen';
 
 // ── Chat UI components ──
 export { AliaFace } from './components/AliaFace';
-export type { AliaExpression, AliaFaceProps } from './components/AliaFace';
+export type { AliaAccessory, AliaExpression, AliaFaceProps } from './components/AliaFace';
 export { ThinkingIndicator } from './components/ThinkingIndicator';
 export { AliaMarkdown } from './components/Markdown';
+export type { AliaMarkdownProps } from './components/Markdown';
 export { Reasoning, ReasoningTrigger, ReasoningContent } from './components/Reasoning';
 export { AliaWelcomeMessage } from './components/AliaWelcomeMessage';
 export { ResearchProgressCard } from './components/ResearchProgressCard';
@@ -85,5 +86,4 @@ export type { DocumentPickerResult } from './hooks/useDocumentPicker';
 export { KeyboardAwareScrollView, KeyboardAvoidingView, KeyboardProvider } from './lib/keyboard';
 
 // ── Theme ──
-export { useAliaColors } from './theme';
 export type { AliaColors } from './theme';

package/src/theme.ts

@@ -1,35 +1,4 @@
-import { useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-
-const COLORS = {
-  light: {
-    text: '#11181C',
-    background: '#fff',
-    card: '#F2F2F7',
-    inputBackground: '#F5F5F5',
-    border: '#E5E5EA',
-    secondaryText: '#8E8E93',
-    icon: '#687076',
-    tint: '#0a7ea4',
-    muted: '#F4F4F5',
-    mutedForeground: '#71717A',
-    primary: '#0a7ea4',
-  },
-  dark: {
-    text: '#ECEDEE',
-    background: '#000000',
-    card: '#1C1C1E',
-    inputBackground: '#333333',
-    border: '#2C2C2E',
-    secondaryText: '#8E8E93',
-    icon: '#9BA1A6',
-    tint: '#fff',
-    muted: '#27272A',
-    mutedForeground: '#A1A1AA',
-    primary: '#38BDF8',
-  },
-} as const;
-
+/** Color interface used by SDK components that need resolved color values (e.g., Markdown renderer). */
 export interface AliaColors {
   text: string;
   background: string;
@@ -42,14 +11,6 @@ export interface AliaColors {
   muted: string;
   mutedForeground: string;
   primary: string;
+  primary10: string;
   isDark: boolean;
 }
-
-export function useAliaColors(): AliaColors {
-  const scheme = useColorScheme();
-  const key = scheme === 'dark' ? 'dark' : 'light';
-  return useMemo(() => ({
-    ...COLORS[key],
-    isDark: key === 'dark',
-  }), [key]);
-}

package/src/components/AliaChatInput.tsx

@@ -1,294 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  TextInput,
-  Pressable,
-  StyleSheet,
-  ActivityIndicator,
-  Platform,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useSpeechToText } from '../hooks/useSpeechToText';
-import { useAliaColors } from '../theme';
-
-interface AliaChatInputProps {
-  onSend: (text: string) => void;
-  isStreaming: boolean;
-  onStop: () => void;
-  onVoiceActivate: () => void;
-  apiUrl?: string;
-}
-
-export function AliaChatInput({
-  onSend,
-  isStreaming,
-  onStop,
-  onVoiceActivate,
-  apiUrl,
-}: AliaChatInputProps) {
-  const [input, setInput] = useState('');
-  const colors = useAliaColors();
-  const insets = useSafeAreaInsets();
-  const isDark = colors.isDark;
-  const stt = useSpeechToText({ apiUrl });
-
-  const hasText = input.trim().length > 0;
-  const canSend = hasText && !isStreaming;
-
-  const handleSend = useCallback(() => {
-    if (!canSend) return;
-    onSend(input.trim());
-    setInput('');
-  }, [canSend, input, onSend]);
-
-  const handleMicPress = useCallback(async () => {
-    if (stt.isRecording) {
-      const text = await stt.stopAndTranscribe();
-      if (text) {
-        setInput((prev) => (prev ? `${prev} ${text}` : text));
-      }
-    } else if (!stt.isTranscribing) {
-      stt.startRecording();
-    }
-  }, [stt]);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          borderTopColor: colors.border,
-          paddingBottom: Math.max(insets.bottom, 12),
-        },
-      ]}
-    >
-      <TextInput
-        style={[
-          styles.input,
-          {
-            color: colors.text,
-            backgroundColor: isDark ? colors.inputBackground : colors.card,
-          },
-        ]}
-        value={input}
-        onChangeText={setInput}
-        placeholder="Ask Alia..."
-        placeholderTextColor={colors.secondaryText}
-        multiline
-        maxLength={2000}
-        onSubmitEditing={handleSend}
-        blurOnSubmit={false}
-      />
-
-      {/* STT mic button */}
-      <Pressable
-        onPress={handleMicPress}
-        disabled={stt.isTranscribing}
-        style={styles.micButton}
-      >
-        {stt.isTranscribing ? (
-          <ActivityIndicator size="small" color="#6366f1" />
-        ) : stt.isRecording ? (
-          <MicOffIcon />
-        ) : (
-          <MicIcon color={colors.secondaryText} />
-        )}
-      </Pressable>
-
-      {/* Three-state submit button */}
-      {isStreaming ? (
-        <Pressable
-          style={[styles.actionButton, { backgroundColor: colors.tint }]}
-          onPress={onStop}
-        >
-          <StopIcon />
-        </Pressable>
-      ) : hasText ? (
-        <Pressable
-          style={[
-            styles.actionButton,
-            { backgroundColor: colors.tint },
-            !canSend && { opacity: 0.4 },
-          ]}
-          onPress={handleSend}
-          disabled={!canSend}
-        >
-          <ArrowUpIcon />
-        </Pressable>
-      ) : (
-        <Pressable
-          style={[styles.actionButton, { backgroundColor: colors.tint }]}
-          onPress={onVoiceActivate}
-        >
-          <SoundIcon />
-        </Pressable>
-      )}
-    </View>
-  );
-}
-
-// ── Icons (inline SVG on web, View-based on native) ──
-
-function ArrowUpIcon() {
-  return (
-    <View style={styles.iconCenter}>
-      {Platform.OS === 'web' ? (
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M12 19V5M5 12l7-7 7 7" />
-        </svg>
-      ) : (
-        <View style={styles.arrowIconInner}>
-          <View style={[styles.arrowStem, { backgroundColor: '#FFFFFF' }]} />
-          <View style={[styles.arrowHead, { borderColor: '#FFFFFF' }]} />
-        </View>
-      )}
-    </View>
-  );
-}
-
-function StopIcon() {
-  return (
-    <View style={styles.iconCenter}>
-      {Platform.OS === 'web' ? (
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="white">
-          <rect x="4" y="4" width="16" height="16" rx="2" />
-        </svg>
-      ) : (
-        <View style={styles.stopSquare} />
-      )}
-    </View>
-  );
-}
-
-function SoundIcon() {
-  return (
-    <View style={styles.iconCenter}>
-      {Platform.OS === 'web' ? (
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M11 5L6 9H2v6h4l5 4V5z" />
-          <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
-          <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
-        </svg>
-      ) : (
-        <View style={styles.soundBars}>
-          <View style={[styles.soundBar, styles.soundBarShort]} />
-          <View style={[styles.soundBar, styles.soundBarMed]} />
-          <View style={[styles.soundBar, styles.soundBarTall]} />
-        </View>
-      )}
-    </View>
-  );
-}
-
-function MicIcon({ color }: { color: string }) {
-  return (
-    <View style={styles.iconCenter}>
-      {Platform.OS === 'web' ? (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="9" y="1" width="6" height="12" rx="3" />
-          <path d="M5 10a7 7 0 0 0 14 0" />
-          <line x1="12" y1="17" x2="12" y2="21" />
-          <line x1="8" y1="21" x2="16" y2="21" />
-        </svg>
-      ) : (
-        <View style={[styles.micDot, { backgroundColor: color }]} />
-      )}
-    </View>
-  );
-}
-
-function MicOffIcon() {
-  return (
-    <View style={styles.iconCenter}>
-      {Platform.OS === 'web' ? (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="9" y="1" width="6" height="12" rx="3" />
-          <path d="M5 10a7 7 0 0 0 14 0" />
-          <line x1="12" y1="17" x2="12" y2="21" />
-          <line x1="1" y1="1" x2="23" y2="23" />
-        </svg>
-      ) : (
-        <View style={[styles.micDot, { backgroundColor: '#ef4444' }]} />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    gap: 8,
-    borderTopWidth: StyleSheet.hairlineWidth,
-  },
-  input: {
-    flex: 1,
-    fontSize: 15,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderRadius: 20,
-    maxHeight: 100,
-  },
-  micButton: {
-    width: 32,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  actionButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconCenter: {
-    width: 18,
-    height: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  arrowIconInner: {
-    alignItems: 'center',
-  },
-  arrowStem: {
-    width: 2,
-    height: 12,
-    borderRadius: 1,
-  },
-  arrowHead: {
-    position: 'absolute',
-    top: -1,
-    width: 10,
-    height: 10,
-    borderTopWidth: 2.5,
-    borderLeftWidth: 2.5,
-    transform: [{ rotate: '45deg' }],
-  },
-  stopSquare: {
-    width: 12,
-    height: 12,
-    borderRadius: 2,
-    backgroundColor: '#FFFFFF',
-  },
-  soundBars: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    gap: 2,
-  },
-  soundBar: {
-    width: 3,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 1.5,
-  },
-  soundBarShort: { height: 6 },
-  soundBarMed: { height: 10 },
-  soundBarTall: { height: 14 },
-  micDot: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});