@alia.onl/sdk 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
@@ -25,12 +25,34 @@
     "react-native-keyboard-controller": ">=1",
     "react-native-svg": ">=13",
     "livekit-client": ">=2.0.0",
-    "expo-audio": ">=0.1.0"
+    "expo-audio": ">=0.1.0",
+    "nativewind": ">=4",
+    "clsx": ">=2",
+    "tailwind-merge": ">=2",
+    "class-variance-authority": ">=0.7",
+    "zeego": ">=3",
+    "expo-image": ">=1",
+    "expo-image-picker": ">=15",
+    "expo-document-picker": ">=12",
+    "expo-clipboard": ">=6",
+    "lucide-react-native": ">=0.300",
+    "@radix-ui/react-dropdown-menu": ">=2"
   },
   "peerDependenciesMeta": {
     "livekit-client": { "optional": true },
     "expo-audio": { "optional": true },
-    "react-native-svg": { "optional": true }
+    "react-native-svg": { "optional": true },
+    "nativewind": { "optional": true },
+    "clsx": { "optional": true },
+    "tailwind-merge": { "optional": true },
+    "class-variance-authority": { "optional": true },
+    "zeego": { "optional": true },
+    "expo-image": { "optional": true },
+    "expo-image-picker": { "optional": true },
+    "expo-document-picker": { "optional": true },
+    "expo-clipboard": { "optional": true },
+    "lucide-react-native": { "optional": true },
+    "@radix-ui/react-dropdown-menu": { "optional": true }
   },
   "devDependencies": {
     "typescript": "^5.9.3"

package/src/components/AliaChatContent.tsx

@@ -0,0 +1,313 @@
+/**
+ * Shared chat content component used by both AliaChatSheet and AliaChatScreen.
+ *
+ * Owns all chat + voice state internally. Containers only handle
+ * layout chrome (sheet modal, full-screen SafeAreaView, headers).
+ */
+
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { Volume2 } from 'lucide-react-native';
+import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
+import { useVoiceRoom } from '../hooks/useVoiceRoom';
+import { useAudioLevelMonitor } from '../hooks/useAudioLevelMonitor';
+import { useAudioLevels } from '../hooks/useAudioLevels';
+import { useTTS } from '../hooks/useTTS';
+import { useSTTStore } from '../hooks/useSpeechToText';
+import { VoiceOverlay } from './voice/VoiceOverlay';
+import { VoiceControls } from './voice/VoiceControls';
+import { AliaChatMessageList } from './AliaChatMessageList';
+import { PromptInput } from './ui/prompt-input/prompt-input';
+import { Button } from './ui/button';
+import { AliaChatSuggestions } from './AliaChatSuggestions';
+import type { AliaExpression } from './AliaFace';
+import type { AliaChatSuggestion } from '../types';
+import type { ChatMessage } from '../types';
+import type { Completion } from './ui/prompt-input/context';
+
+export interface AliaChatContentProps {
+  clientContext?: string;
+  suggestions?: AliaChatSuggestion[];
+  model?: string;
+  apiUrl?: string;
+  /** Shared value for scroll offset (used by sheet for pan-to-dismiss) */
+  scrollOffsetY?: SharedValue<number>;
+  /** Injectable autocomplete hook */
+  useSuggestions?: (query: string) => { data: Completion[] | undefined; isLoading: boolean };
+  /** Called when a suggestion is selected from autocomplete */
+  onSuggestionUsed?: (suggestionId: string) => void;
+  /** Error handler (e.g. toast) */
+  onError?: (message: string) => void;
+}
+
+export interface AliaChatContentRef {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  isVoiceActive: boolean;
+  faceExpression: AliaExpression;
+  clear: () => void;
+}
+
+/** Adapt a voice message into the chat message format. */
+function adaptVoiceMessage(vm: any): ChatMessage {
+  return {
+    id: vm.id,
+    role: vm.role,
+    content: vm.content,
+    toolInvocations: vm.toolInvocations,
+    createdAt: Date.now(),
+    source: 'voice' as const,
+    speaker: vm.speaker,
+  };
+}
+
+export const AliaChatContent = forwardRef<AliaChatContentRef, AliaChatContentProps>(
+  ({ clientContext, suggestions = [], model, apiUrl, scrollOffsetY: externalScrollOffsetY, useSuggestions, onSuggestionUsed, onError }, ref) => {
+    // ── Chat ──
+    const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
+    const { messages, setMessages, send, isStreaming, stop, clear } = useAliaChat(chatOptions);
+
+    // ── Input state ──
+    const [inputValue, setInputValue] = useState('');
+
+    const handleSubmit = useCallback(() => {
+      const text = inputValue.trim();
+      if (!text) return;
+      send(text);
+      setInputValue('');
+    }, [inputValue, send]);
+
+    // ── Scroll offset (use external if provided, else internal) ──
+    const internalScrollOffsetY = useSharedValue(0);
+    const scrollOffsetY = externalScrollOffsetY ?? internalScrollOffsetY;
+
+    // ── Voice room ──
+    const voiceRoom = useVoiceRoom({ apiUrl });
+    const { captureLevel, playbackLevel } = useAudioLevelMonitor(voiceRoom.room, voiceRoom.isConnected);
+    const { waveAmplitude } = useAudioLevels({
+      captureLevel,
+      playbackLevel,
+      agentState: voiceRoom.agentState,
+      isConnected: voiceRoom.isConnected,
+    });
+
+    // ── TTS ──
+    const tts = useTTS({ apiUrl });
+
+    // ── STT wave overlay ──
+    const sttIsRecording = useSTTStore((s) => s.isRecording);
+    const sttMetering = useSTTStore((s) => s.metering);
+    const sttWaveAmplitude = useSharedValue(0);
+
+    useEffect(() => {
+      if (!sttIsRecording) {
+        sttWaveAmplitude.value = withTiming(0, { duration: 300 });
+        return;
+      }
+      const target = Math.max(0.08, sttMetering);
+      const duration = target > sttWaveAmplitude.value ? 60 : 200;
+      sttWaveAmplitude.value = withTiming(target, {
+        duration,
+        easing: Easing.bezier(0.33, 1, 0.68, 1),
+      });
+    }, [sttIsRecording, sttMetering]);
+
+    // ── Voice mode state ──
+    const [isVoiceActive, setIsVoiceActive] = useState(false);
+    const textSnapshotRef = useRef<ChatMessage[]>([]);
+
+    // Merge voice messages into chat messages
+    useEffect(() => {
+      if (!isVoiceActive) return;
+      const adapted = voiceRoom.messages.map(adaptVoiceMessage);
+      setMessages([...textSnapshotRef.current, ...adapted]);
+    }, [voiceRoom.messages, isVoiceActive, setMessages]);
+
+    // Auto-deactivate on error
+    useEffect(() => {
+      if (!isVoiceActive) return;
+      if (voiceRoom.error) {
+        deactivateVoice();
+      } else if (voiceRoom.roomState === 'error') {
+        deactivateVoice();
+      }
+    }, [voiceRoom.error, voiceRoom.roomState, isVoiceActive]);
+
+    // Auto-deactivate on unexpected disconnection
+    useEffect(() => {
+      if (!isVoiceActive) return;
+      if (voiceRoom.roomState === 'disconnected' && textSnapshotRef.current.length > 0) {
+        deactivateVoice();
+      }
+    }, [voiceRoom.roomState, isVoiceActive]);
+
+    const activateVoice = useCallback(() => {
+      if (isVoiceActive || voiceRoom.roomState === 'connecting') return;
+      textSnapshotRef.current = [...messages];
+      setIsVoiceActive(true);
+      voiceRoom.connect();
+    }, [isVoiceActive, voiceRoom, messages]);
+
+    const deactivateVoice = useCallback(() => {
+      voiceRoom.disconnect();
+      setIsVoiceActive(false);
+      textSnapshotRef.current = [];
+    }, [voiceRoom]);
+
+    // ── TTS read aloud handler ──
+    const handleReadAloud = useCallback(
+      (messageId: string, text: string) => {
+        tts.readAloud(messageId, text);
+      },
+      [tts],
+    );
+
+    // ── Face expression ──
+    const faceExpression = useMemo<AliaExpression>(() => {
+      if (isVoiceActive) {
+        if (voiceRoom.agentState === 'speaking') return 'Writing E';
+        if (voiceRoom.agentState === 'thinking') return 'Thinking';
+        return 'Idle A';
+      }
+      if (!isStreaming) return 'Idle A';
+      const lastMsg = messages[messages.length - 1];
+      if (lastMsg?.role === 'assistant' && lastMsg.toolInvocations?.some((t) => t.state === 'call'))
+        return 'Searching A';
+      if (lastMsg?.thinking) return 'Thinking';
+      return 'Writing E';
+    }, [messages, isStreaming, isVoiceActive, voiceRoom.agentState]);
+
+    const showSuggestions = messages.length === 0 && suggestions.length > 0;
+
+    // ── Overlay state ──
+    const showVoiceOverlay = isVoiceActive;
+    const showTTSOverlay = !isVoiceActive && tts.playbackState === 'playing';
+    const showSTTOverlay = !isVoiceActive && tts.playbackState !== 'playing' && sttIsRecording;
+
+    // ── Voice activate button for empty submit ──
+    const voiceActivateButton = useMemo(
+      () => (
+        <Button
+          size="icon"
+          onPress={activateVoice}
+          className="h-8 w-8 rounded-full"
+        >
+          <Volume2 size={16} color="white" />
+        </Button>
+      ),
+      [activateVoice],
+    );
+
+    // ── Expose state to container ──
+    useImperativeHandle(
+      ref,
+      () => ({
+        messages,
+        isStreaming,
+        isVoiceActive,
+        faceExpression,
+        clear,
+      }),
+      [messages, isStreaming, isVoiceActive, faceExpression, clear],
+    );
+
+    return (
+      <View style={styles.container}>
+        {/* Voice/TTS/STT wave overlay */}
+        {showVoiceOverlay && (
+          <VoiceOverlay
+            waveAmplitude={waveAmplitude}
+            agentState={voiceRoom.agentState}
+            isConnected={voiceRoom.isConnected}
+          />
+        )}
+        {showTTSOverlay && (
+          <VoiceOverlay
+            waveAmplitude={tts.ttsWaveAmplitude}
+            agentState="speaking"
+            isConnected={true}
+          />
+        )}
+        {showSTTOverlay && (
+          <VoiceOverlay
+            waveAmplitude={sttWaveAmplitude}
+            agentState="listening"
+            isConnected={true}
+          />
+        )}
+
+        {/* Suggestions or Messages */}
+        {showSuggestions ? (
+          <AliaChatSuggestions suggestions={suggestions} onSelect={send} />
+        ) : (
+          <AliaChatMessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            scrollOffsetY={scrollOffsetY}
+            onReadAloud={handleReadAloud}
+            ttsActiveMessageId={tts.activeMessageId}
+            ttsPlaybackState={tts.playbackState}
+          />
+        )}
+
+        {/* Input or Voice Controls */}
+        {isVoiceActive ? (
+          <VoiceControls
+            roomState={voiceRoom.roomState}
+            agentState={voiceRoom.agentState}
+            isMuted={voiceRoom.isMuted}
+            cohostActive={voiceRoom.cohostActive}
+            currentSpeaker={voiceRoom.currentSpeaker}
+            roundComplete={voiceRoom.roundComplete}
+            onToggleMute={voiceRoom.toggleMute}
+            onEnableCohost={voiceRoom.enableCohost}
+            onDisableCohost={voiceRoom.disableCohost}
+            onContinueCohost={voiceRoom.continueCohost}
+            onEnd={deactivateVoice}
+          />
+        ) : (
+          <View style={styles.inputContainer}>
+            <PromptInput
+              value={inputValue}
+              onValueChange={setInputValue}
+              onSubmit={handleSubmit}
+              isLoading={isStreaming}
+              onStop={stop}
+              emptyAction={voiceActivateButton}
+              placeholder="Ask Alia..."
+              apiUrl={apiUrl}
+              autocomplete={!!useSuggestions}
+              useSuggestions={useSuggestions}
+              onSuggestionUsed={onSuggestionUsed}
+              onError={onError}
+            />
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+AliaChatContent.displayName = 'AliaChatContent';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  inputContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+});

package/src/components/AliaChatInput.tsx

@@ -1,33 +1,56 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
   View,
   TextInput,
-  TouchableOpacity,
+  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 }: AliaChatInputProps) {
+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 canSend = input.trim().length > 0 && !isStreaming;
+  const hasText = input.trim().length > 0;
+  const canSend = hasText && !isStreaming;
 
-  const handleSend = () => {
+  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
@@ -55,39 +78,65 @@ export function AliaChatInput({ onSend, isStreaming }: AliaChatInputProps) {
         maxLength={2000}
         onSubmitEditing={handleSend}
         blurOnSubmit={false}
-        editable={!isStreaming}
       />
-      <TouchableOpacity
-        style={[
-          styles.sendButton,
-          { backgroundColor: colors.tint },
-          !canSend && { opacity: 0.4 },
-        ]}
-        onPress={handleSend}
-        disabled={!canSend}
-        activeOpacity={0.7}
+
+      {/* STT mic button */}
+      <Pressable
+        onPress={handleMicPress}
+        disabled={stt.isTranscribing}
+        style={styles.micButton}
       >
-        {isStreaming ? (
-          <ActivityIndicator size="small" color="#FFFFFF" />
+        {stt.isTranscribing ? (
+          <ActivityIndicator size="small" color="#6366f1" />
+        ) : stt.isRecording ? (
+          <MicOffIcon />
         ) : (
-          <ArrowUpIcon />
+          <MicIcon color={colors.secondaryText} />
         )}
-      </TouchableOpacity>
+      </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>
   );
 }
 
-/** Simple arrow-up SVG as a component to avoid icon library dependency */
+// ── Icons (inline SVG on web, View-based on native) ──
+
 function ArrowUpIcon() {
-  // Use a unicode character for simplicity — works cross-platform
   return (
-    <View style={styles.arrowIcon}>
+    <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>
       ) : (
-        // React Native fallback — simple Text arrow
         <View style={styles.arrowIconInner}>
           <View style={[styles.arrowStem, { backgroundColor: '#FFFFFF' }]} />
           <View style={[styles.arrowHead, { borderColor: '#FFFFFF' }]} />
@@ -97,6 +146,74 @@ function ArrowUpIcon() {
   );
 }
 
+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',
@@ -114,14 +231,20 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     maxHeight: 100,
   },
-  sendButton: {
+  micButton: {
+    width: 32,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionButton: {
     width: 40,
     height: 40,
     borderRadius: 20,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  arrowIcon: {
+  iconCenter: {
     width: 18,
     height: 18,
     alignItems: 'center',
@@ -144,4 +267,28 @@ const styles = StyleSheet.create({
     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,
+  },
 });