@alia.onl/sdk 1.0.0 → 2.0.0

package/src/components/voice/VoiceControls.tsx

@@ -0,0 +1,180 @@
+/**
+ * Bottom voice control bar that replaces PromptInput when voice mode is active.
+ * Contains status text, mute/cohost/end buttons, and "Continue" for cohost rounds.
+ */
+
+import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
+import type { RoomState, AgentState } from '../../types';
+import { useAliaColors } from '../../theme';
+
+interface VoiceControlsProps {
+  roomState: RoomState;
+  agentState: AgentState;
+  isMuted: boolean;
+  cohostActive: boolean;
+  currentSpeaker: 'primary' | 'cohost' | 'user' | null;
+  roundComplete: boolean;
+  onToggleMute: () => void;
+  onEnableCohost: () => void;
+  onDisableCohost: () => void;
+  onContinueCohost: () => void;
+  onEnd: () => void;
+}
+
+function getStatusText(
+  roomState: RoomState,
+  agentState: AgentState,
+  isMuted: boolean,
+  cohostActive: boolean,
+  currentSpeaker: string | null,
+): string {
+  if (roomState === 'connecting') return 'Connecting...';
+  if (roomState === 'connected') {
+    if (cohostActive && currentSpeaker === 'cohost') return 'Cohost speaking...';
+    if (cohostActive && currentSpeaker === 'primary') return 'Alia speaking...';
+    if (agentState === 'listening') return isMuted ? 'Muted' : 'Listening...';
+    if (agentState === 'thinking') return 'Thinking...';
+    if (agentState === 'speaking') return 'Speaking...';
+    return 'Connected';
+  }
+  return '';
+}
+
+export function VoiceControls({
+  roomState,
+  agentState,
+  isMuted,
+  cohostActive,
+  currentSpeaker,
+  roundComplete,
+  onToggleMute,
+  onEnableCohost,
+  onDisableCohost,
+  onContinueCohost,
+  onEnd,
+}: 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 }]}>
+          {statusText}
+        </Text>
+      ) : null}
+
+      {roundComplete && (
+        <Pressable
+          onPress={onContinueCohost}
+          style={styles.continueButton}
+        >
+          <Text style={styles.continueText}>Continue conversation</Text>
+        </Pressable>
+      )}
+
+      {roomState === 'connected' && (
+        <View style={styles.buttonRow}>
+          <View style={styles.buttonWrapper}>
+            <Pressable
+              onPress={onToggleMute}
+              style={[
+                styles.button,
+                { backgroundColor: isMuted ? '#ef4444' : 'rgba(255,255,255,0.15)' },
+              ]}
+            >
+              <Text style={styles.buttonIcon}>
+                {isMuted ? '\u{1F507}' : '\u{1F3A4}'}
+              </Text>
+            </Pressable>
+            <Text style={styles.buttonLabel}>
+              {isMuted ? 'Unmute' : 'Mute'}
+            </Text>
+          </View>
+
+          <View style={styles.buttonWrapper}>
+            <Pressable
+              onPress={cohostActive ? onDisableCohost : onEnableCohost}
+              style={[
+                styles.button,
+                { backgroundColor: cohostActive ? '#8b5cf6' : 'rgba(255,255,255,0.15)' },
+              ]}
+            >
+              <Text style={styles.buttonIcon}>{'\u{1F465}'}</Text>
+            </Pressable>
+            <Text style={styles.buttonLabel}>
+              {cohostActive ? 'Solo' : 'Cohost'}
+            </Text>
+          </View>
+
+          <View style={styles.buttonWrapper}>
+            <Pressable
+              onPress={onEnd}
+              style={[styles.button, { backgroundColor: '#ef4444' }]}
+            >
+              <Text style={styles.endIcon}>{'\u2715'}</Text>
+            </Pressable>
+            <Text style={styles.buttonLabel}>End</Text>
+          </View>
+        </View>
+      )}
+
+      {roomState === 'connecting' && (
+        <ActivityIndicator size="large" color="#38bdf8" />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingBottom: 24,
+    paddingTop: 16,
+  },
+  statusText: {
+    fontSize: 18,
+    fontWeight: '500',
+    marginBottom: 16,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 32,
+  },
+  buttonWrapper: {
+    alignItems: 'center',
+    gap: 8,
+  },
+  button: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    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

@@ -0,0 +1,43 @@
+/**
+ * Subtle voice mode overlay that renders the AudioWaveVisualizer
+ * behind the conversation message list. Preserves the normal chat theme
+ * with waves at reduced opacity for a seamless visual experience.
+ */
+
+import { View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { AudioWaveVisualizer } from './AudioWaveVisualizer';
+import type { SharedValue } from 'react-native-reanimated';
+import type { AgentState } from '../../types';
+
+interface VoiceOverlayProps {
+  waveAmplitude: SharedValue<number>;
+  agentState: AgentState;
+  isConnected: boolean;
+}
+
+export function VoiceOverlay({ waveAmplitude, agentState, isConnected }: VoiceOverlayProps) {
+  return (
+    <Animated.View
+      entering={FadeIn.duration(400)}
+      exiting={FadeOut.duration(300)}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 350,
+        zIndex: 5,
+        pointerEvents: 'none',
+      }}
+    >
+      <View style={{ opacity: 0.35 }}>
+        <AudioWaveVisualizer
+          waveAmplitude={waveAmplitude}
+          agentState={agentState}
+          isConnected={isConnected}
+        />
+      </View>
+    </Animated.View>
+  );
+}

package/src/hooks/useAliaChat.ts

@@ -1,11 +1,11 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { useOxy } from '@oxyhq/services';
 import type { ChatMessage, ToolInvocation } from '../types';
 
-const API_URL = process.env.EXPO_PUBLIC_API_URL;
+const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
 export interface UseAliaChatOptions {
-  /** Alia API base URL (default: EXPO_PUBLIC_API_URL) */
+  /** Alia API base URL (default: EXPO_PUBLIC_ALIA_API_URL or https://api.alia.onl) */
   apiUrl?: string;
   /** Alia model to use (default: 'alia-v1') */
   model?: string;
@@ -23,16 +23,19 @@ export interface UseAliaChatReturn {
   error: string | null;
 }
 
-let nextId = 0;
 function generateId(): string {
-  return `msg-${Date.now()}-${nextId++}`;
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return `msg-${crypto.randomUUID()}`;
+  }
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 
 /**
  * SSE streaming chat hook for Alia.
  *
  * Sends messages to Alia's /v1/chat/completions endpoint and streams
- * responses back, including tool invocations.
+ * responses back, including tool invocations, reasoning, research progress,
+ * and plan previews.
  */
 export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn {
   const {
@@ -48,11 +51,98 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
 
+  // Use a ref to read current messages without putting it in send's dep array
+  const messagesRef = useRef<ChatMessage[]>([]);
+  useEffect(() => { messagesRef.current = messages; }, [messages]);
+
+  // Batching: accumulate streaming content and flush at ~20fps
+  const pendingContentRef = useRef('');
+  const pendingReasoningRef = useRef('');
+  const toolInvocationsRef = useRef<ToolInvocation[]>([]);
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushPendingUpdates = useCallback(() => {
+    const content = pendingContentRef.current;
+    const reasoning = pendingReasoningRef.current;
+    const tools = toolInvocationsRef.current;
+    if (!content && !reasoning && tools.length === 0) return;
+
+    pendingContentRef.current = '';
+    pendingReasoningRef.current = '';
+
+    setMessages((prev) => {
+      const updated = [...prev];
+      const last = updated[updated.length - 1];
+      if (last?.role === 'assistant') {
+        const changes: Partial<ChatMessage> = {};
+        if (content) changes.content = last.content + content;
+        if (reasoning) changes.thinking = (last.thinking || '') + reasoning;
+        if (tools.length > 0) changes.toolInvocations = [...tools];
+        updated[updated.length - 1] = { ...last, ...changes };
+      }
+      return updated;
+    });
+  }, []);
+
+  const scheduleFlush = useCallback(() => {
+    if (flushTimerRef.current) return;
+    flushTimerRef.current = setTimeout(() => {
+      flushTimerRef.current = null;
+      flushPendingUpdates();
+    }, 50);
+  }, [flushPendingUpdates]);
+
+  // Cleanup flush timer on unmount
+  useEffect(() => {
+    return () => {
+      flushPendingUpdates();
+      if (flushTimerRef.current) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+    };
+  }, [flushPendingUpdates]);
+
   const getToken = useCallback((): string | null => {
     if (accessTokenProp) return accessTokenProp;
     return oxyServices.httpService.getAccessToken();
   }, [accessTokenProp, oxyServices]);
 
+  /** Update the last assistant message with partial changes (callback receives current message) */
+  const updateAssistant = useCallback(
+    (updater: (msg: ChatMessage) => Partial<ChatMessage>) => {
+      setMessages((prev) => {
+        const updated = [...prev];
+        const last = updated[updated.length - 1];
+        if (last?.role === 'assistant') {
+          updated[updated.length - 1] = { ...last, ...updater(last) };
+        }
+        return updated;
+      });
+    },
+    [],
+  );
+
+  /** Apply a tool result to the last assistant message and sync the ref */
+  const applyToolResult = useCallback(
+    (toolCallId: string, name: string | undefined, output: any) => {
+      updateAssistant((last) => {
+        const invocations = [...(last.toolInvocations || [])];
+        const idx = invocations.findIndex((t) => t.toolCallId === toolCallId);
+        if (idx >= 0) {
+          invocations[idx] = { ...invocations[idx], state: 'result', result: output };
+        } else {
+          invocations.push({ toolCallId, toolName: name || 'unknown', state: 'result', result: output });
+        }
+        return { toolInvocations: invocations };
+      });
+      toolInvocationsRef.current = toolInvocationsRef.current.map((t) =>
+        t.toolCallId === toolCallId ? { ...t, state: 'result' as const, result: output } : t
+      );
+    },
+    [updateAssistant],
+  );
+
   const send = useCallback(
     async (text: string) => {
       const trimmed = text.trim();
@@ -86,26 +176,40 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
       setMessages((prev) => [...prev, userMsg, assistantMsg]);
       setIsStreaming(true);
 
-      // Build messages payload for the API
+      // Build messages payload for the API (read from ref, not closure)
       const apiMessages: Array<{ role: string; content: string }> = [];
 
-      // System context (tells Alia which app the user is in)
       if (clientContext) {
         apiMessages.push({ role: 'system', content: clientContext });
       }
 
-      // Previous conversation history
-      for (const msg of messages) {
+      // Include full conversation history with tool context
+      for (const msg of messagesRef.current) {
         if (msg.role === 'system') continue;
         apiMessages.push({ role: msg.role, content: msg.content });
+        // Include tool results so the AI has full context
+        if (msg.toolInvocations?.length) {
+          for (const tool of msg.toolInvocations) {
+            if (tool.state === 'result' && tool.result != null) {
+              apiMessages.push({
+                role: 'system',
+                content: `[Tool result from ${tool.toolName}: ${JSON.stringify(tool.result).slice(0, 500)}]`,
+              });
+            }
+          }
+        }
       }
 
-      // New user message
       apiMessages.push({ role: 'user', content: trimmed });
 
       const controller = new AbortController();
       abortRef.current = controller;
 
+      // Reset batching state
+      pendingContentRef.current = '';
+      pendingReasoningRef.current = '';
+      toolInvocationsRef.current = [];
+
       try {
         const response = await fetch(`${apiUrl}/v1/chat/completions`, {
           method: 'POST',
@@ -130,23 +234,15 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
         if (!response.body || typeof response.body.getReader !== 'function') {
           const json = await response.json();
           const content = json.choices?.[0]?.message?.content ?? '';
-          setMessages((prev) => {
-            const updated = [...prev];
-            const last = updated[updated.length - 1];
-            if (last?.role === 'assistant') {
-              updated[updated.length - 1] = { ...last, content };
-            }
-            return updated;
-          });
+          updateAssistant(() => ({ content }));
           return;
         }
 
-        // Stream SSE
+        // Stream SSE (supports named events: event: X\ndata: Y)
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
         let buffer = '';
-        let accumulatedContent = '';
-        const toolInvocations: ToolInvocation[] = [];
+        let currentEventType = '';
 
         try {
           while (true) {
@@ -158,72 +254,153 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
             buffer = lines.pop() ?? '';
 
             for (const line of lines) {
+              // Track named SSE event type
+              if (line.startsWith('event: ')) {
+                currentEventType = line.slice(7).trim();
+                continue;
+              }
+
+              // Reset event type on empty line (SSE event boundary)
+              if (line === '') {
+                currentEventType = '';
+                continue;
+              }
+
               const trimmedLine = line.trim();
-              if (!trimmedLine || !trimmedLine.startsWith('data: ')) continue;
+              if (!trimmedLine.startsWith('data: ')) continue;
               const data = trimmedLine.slice(6);
-              if (data === '[DONE]') continue;
+              if (data === '[DONE]') { currentEventType = ''; continue; }
 
               try {
                 const parsed = JSON.parse(data);
 
-                // Standard content delta
-                const delta = parsed.choices?.[0]?.delta?.content;
-                if (delta) {
-                  accumulatedContent += delta;
-                  setMessages((prev) => {
-                    const updated = [...prev];
-                    const last = updated[updated.length - 1];
-                    if (last?.role === 'assistant') {
-                      updated[updated.length - 1] = {
-                        ...last,
-                        content: accumulatedContent,
-                        toolInvocations: toolInvocations.length > 0 ? [...toolInvocations] : undefined,
-                      };
+                // ── Named SSE events (Alia extensions) ──
+                if (currentEventType) {
+                  switch (currentEventType) {
+                    case 'alia.reasoning': {
+                      const content = parsed.content;
+                      if (content) {
+                        pendingReasoningRef.current += content;
+                        scheduleFlush();
+                      }
+                      currentEventType = '';
+                      continue;
+                    }
+                    case 'alia.tool_result': {
+                      const { tool_call_id, name, output } = parsed;
+                      if (tool_call_id) {
+                        applyToolResult(tool_call_id, name, output);
+                      }
+                      currentEventType = '';
+                      continue;
                     }
-                    return updated;
-                  });
+                    case 'alia.research_progress': {
+                      updateAssistant((last) => ({
+                        researchProgress: {
+                          phase: parsed.phase,
+                          message: parsed.message,
+                          subQuestions: parsed.subQuestions || last.researchProgress?.subQuestions,
+                          sourcesFound: parsed.sourcesFound,
+                          currentQuery: parsed.currentQuery,
+                          iteration: parsed.iteration,
+                        },
+                      }));
+                      currentEventType = '';
+                      continue;
+                    }
+                    case 'alia.plan_preview': {
+                      updateAssistant(() => ({
+                        pendingPlan: {
+                          planId: parsed.planId,
+                          intent: parsed.intent,
+                          confidence: parsed.confidence,
+                          steps: parsed.steps || [],
+                          approved: false,
+                          rejected: false,
+                        },
+                      }));
+                      currentEventType = '';
+                      continue;
+                    }
+                    default:
+                      // Unknown named event — skip
+                      currentEventType = '';
+                      continue;
+                  }
+                }
+
+                // ── Standard OpenAI data events ──
+
+                const choice = parsed.choices?.[0];
+                if (!choice) {
+                  // Legacy alia.tool_call event (type-based, not named SSE)
+                  if (parsed.type === 'alia.tool_call') {
+                    toolInvocationsRef.current = [
+                      ...toolInvocationsRef.current,
+                      {
+                        toolName: parsed.tool || 'unknown',
+                        state: 'call',
+                        args: parsed.args,
+                      },
+                    ];
+                    flushPendingUpdates();
+                  }
+                  // Legacy format matches by toolName (no toolCallId), so can't use applyToolResult
+                  if (parsed.type === 'alia.tool_result') {
+                    toolInvocationsRef.current = toolInvocationsRef.current.map((t) =>
+                      t.toolName === parsed.tool && t.state === 'call'
+                        ? { ...t, state: 'result' as const, result: parsed.result }
+                        : t,
+                    );
+                    flushPendingUpdates();
+                  }
+                  continue;
+                }
+
+                const delta = choice.delta;
+                if (!delta) continue;
+
+                // Reasoning/thinking content (batched)
+                if (delta.reasoning) {
+                  pendingReasoningRef.current += delta.reasoning;
+                  scheduleFlush();
+                }
+
+                // Text content (batched)
+                if (delta.content) {
+                  pendingContentRef.current += delta.content;
+                  scheduleFlush();
                 }
 
-                // Alia tool call event
-                if (parsed.type === 'alia.tool_call') {
-                  toolInvocations.push({
-                    toolName: parsed.tool || 'unknown',
-                    state: 'call',
-                    args: parsed.args,
-                  });
-                  setMessages((prev) => {
-                    const updated = [...prev];
-                    const last = updated[updated.length - 1];
-                    if (last?.role === 'assistant') {
-                      updated[updated.length - 1] = {
-                        ...last,
-                        toolInvocations: [...toolInvocations],
-                      };
+                // Tool calls (OpenAI format: delta.tool_calls)
+                if (delta.tool_calls && Array.isArray(delta.tool_calls)) {
+                  for (const tc of delta.tool_calls) {
+                    const toolCallId = tc.id;
+                    const toolName = tc.function?.name;
+                    if (!toolCallId || !toolName) continue;
+
+                    let args: any;
+                    if (tc.function?.arguments) {
+                      try { args = JSON.parse(tc.function.arguments); } catch { args = { _raw: tc.function.arguments }; }
+                    }
+
+                    const invocation: ToolInvocation = { toolCallId, toolName, state: 'call', args };
+                    const idx = toolInvocationsRef.current.findIndex((t) => t.toolCallId === toolCallId);
+                    if (idx >= 0) {
+                      toolInvocationsRef.current[idx] = invocation;
+                    } else {
+                      toolInvocationsRef.current = [...toolInvocationsRef.current, invocation];
                     }
-                    return updated;
-                  });
+                    flushPendingUpdates();
+                  }
                 }
 
-                // Alia tool result event
-                if (parsed.type === 'alia.tool_result') {
-                  const existing = toolInvocations.find(
-                    (t) => t.toolName === parsed.tool && t.state === 'call',
-                  );
-                  if (existing) {
-                    existing.state = 'result';
-                    existing.result = parsed.result;
+                // Tool results (delta.tool_result)
+                if (delta.tool_result) {
+                  const { tool_call_id, name, output } = delta.tool_result;
+                  if (tool_call_id) {
+                    applyToolResult(tool_call_id, name, output);
                   }
-                  setMessages((prev) => {
-                    const updated = [...prev];
-                    const last = updated[updated.length - 1];
-                    if (last?.role === 'assistant') {
-                      updated[updated.length - 1] = {
-                        ...last,
-                        toolInvocations: [...toolInvocations],
-                      };
-                    }
-                    return updated;
-                  });
                 }
               } catch {
                 // Skip malformed chunks
@@ -237,23 +414,21 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
         if (err?.name === 'AbortError') return;
         const errorMessage = err?.message || 'Something went wrong';
         setError(errorMessage);
-        setMessages((prev) => {
-          const updated = [...prev];
-          const last = updated[updated.length - 1];
-          if (last?.role === 'assistant' && !last.content) {
-            updated[updated.length - 1] = {
-              ...last,
-              content: "I'm having trouble connecting right now. Please try again.",
-            };
-          }
-          return updated;
-        });
+        updateAssistant((last) =>
+          !last.content ? { content: "I'm having trouble connecting right now. Please try again." } : {}
+        );
       } finally {
+        // Flush any remaining batched content
+        flushPendingUpdates();
+        if (flushTimerRef.current) {
+          clearTimeout(flushTimerRef.current);
+          flushTimerRef.current = null;
+        }
         setIsStreaming(false);
         abortRef.current = null;
       }
     },
-    [isStreaming, messages, getToken, apiUrl, model, clientContext],
+    [isStreaming, getToken, apiUrl, model, clientContext, scheduleFlush, flushPendingUpdates, updateAssistant, applyToolResult],
   );
 
   const clear = useCallback(() => {
@@ -264,6 +439,9 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
     setMessages([]);
     setIsStreaming(false);
     setError(null);
+    pendingContentRef.current = '';
+    pendingReasoningRef.current = '';
+    toolInvocationsRef.current = [];
   }, []);
 
   return { messages, send, isStreaming, clear, error };