@alia.onl/sdk 3.0.0 → 3.1.0

package/src/components/ResearchProgressCard.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { View, Pressable } from 'react-native';
+import { Text } from './ui/text';
+import {
+  Search,
+  BookOpen,
+  CheckCircle,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Loader2,
+} from 'lucide-react-native';
+import { useAliaColors } from '../theme';
+import type { ResearchProgress } from '../types';
+
+interface ResearchProgressCardProps {
+  progress: ResearchProgress;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  decomposing: 'Planning research',
+  searching: 'Searching the web',
+  reading: 'Reading sources',
+  synthesizing: 'Synthesizing report',
+  follow_up: 'Follow-up research',
+  finalizing: 'Polishing report',
+  complete: 'Research complete',
+};
+
+const PHASE_ORDER = ['decomposing', 'searching', 'synthesizing', 'follow_up', 'finalizing', 'complete'];
+
+export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
+  const colors = useAliaColors();
+  const [showSources, setShowSources] = useState(false);
+  const [showQuestions, setShowQuestions] = useState(true);
+
+  const phaseIndex = PHASE_ORDER.indexOf(progress.phase || '');
+  const isComplete = progress.phase === 'complete' || progress.isComplete;
+
+  return (
+    <View className="mx-3 my-2 rounded-xl border border-border bg-card p-4 gap-3">
+      {/* Header */}
+      <View className="flex-row items-center gap-2">
+        <View className="w-8 h-8 rounded-full bg-primary/10 items-center justify-center">
+          {isComplete ? (
+            <CheckCircle size={16} color="#22c55e" />
+          ) : (
+            <Search size={16} color={colors.tint} />
+          )}
+        </View>
+        <View className="flex-1">
+          <Text className="text-sm font-semibold text-foreground">
+            Deep Research
+          </Text>
+          <Text className="text-xs text-muted-foreground">
+            {progress.message || PHASE_LABELS[progress.phase || ''] || 'Researching...'}
+          </Text>
+        </View>
+        {progress.sourcesFound !== undefined && (
+          <View className="bg-muted rounded-full px-2 py-0.5">
+            <Text className="text-[10px] text-muted-foreground">
+              {progress.sourcesFound} sources
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Phase progress */}
+      <View className="flex-row gap-1">
+        {PHASE_ORDER.map((phase, i) => (
+          <View
+            key={phase}
+            className="flex-1 h-1 rounded-full"
+            style={{
+              backgroundColor: i <= phaseIndex
+                ? (isComplete ? '#22c55e' : colors.tint)
+                : colors.muted,
+            }}
+          />
+        ))}
+      </View>
+
+      {/* Sub-questions */}
+      {progress.subQuestions && progress.subQuestions.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowQuestions(!showQuestions)}
+            className="flex-row items-center gap-1 mb-1"
+          >
+            <BookOpen size={12} color={colors.secondaryText} />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Research angles ({progress.subQuestions.length})
+            </Text>
+            {showQuestions ? (
+              <ChevronUp size={12} color={colors.secondaryText} />
+            ) : (
+              <ChevronDown size={12} color={colors.secondaryText} />
+            )}
+          </Pressable>
+          {showQuestions && (
+            <View className="gap-1 pl-4">
+              {progress.subQuestions.map((q, i) => (
+                <Text key={i} className="text-xs text-muted-foreground">
+                  {i + 1}. {q}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Current search query indicator */}
+      {progress.currentQuery && !isComplete && (
+        <View className="flex-row items-center gap-2 bg-muted/50 rounded-lg px-3 py-1.5">
+          <Loader2 size={12} color={colors.secondaryText} />
+          <Text className="text-xs text-muted-foreground flex-1" numberOfLines={1}>
+            {progress.currentQuery}
+          </Text>
+        </View>
+      )}
+
+      {/* Sources list (collapsed by default) */}
+      {progress.sources && progress.sources.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowSources(!showSources)}
+            className="flex-row items-center gap-1"
+          >
+            <ExternalLink size={12} color={colors.secondaryText} />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Sources ({progress.sources.length})
+            </Text>
+            {showSources ? (
+              <ChevronUp size={12} color={colors.secondaryText} />
+            ) : (
+              <ChevronDown size={12} color={colors.secondaryText} />
+            )}
+          </Pressable>
+          {showSources && (
+            <View className="gap-1 pl-4 mt-1">
+              {progress.sources.map((s) => (
+                <Text key={s.id} className="text-xs text-primary" numberOfLines={1}>
+                  [{s.id}] {s.title}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Search count */}
+      {progress.totalSearches !== undefined && isComplete && (
+        <Text className="text-[10px] text-muted-foreground text-right">
+          {progress.totalSearches} searches performed
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/hooks/useAliaChat.ts

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { useOxy } from '@oxyhq/services';
 import type { ChatMessage, ToolInvocation } from '../types';
+import { getTextFromContent } from '../lib/content-utils';
 
 const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
@@ -188,7 +189,7 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
       // 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 });
+        apiMessages.push({ role: msg.role, content: getTextFromContent(msg.content) });
         // Include tool results so the AI has full context
         if (msg.toolInvocations?.length) {
           for (const tool of msg.toolInvocations) {

package/src/hooks/useSpeechToText.ts

@@ -60,18 +60,32 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
     return oxyServices.httpService.getAccessToken();
   }, [options.accessToken, oxyServices]);
 
-  // Push metering to store while recording
+  // Push metering to store while recording (with epsilon guard to avoid thrashing subscribers)
+  const lastMeteringRef = useRef(0);
   useEffect(() => {
-    if (state === 'recording' && recorderState.metering != null) {
-      // dBFS: -160 (silence) to 0 (max). Normalize using -60 as practical floor.
-      const normalized = Math.min(1, Math.max(0, (recorderState.metering + 60) / 60));
-      sttStore.getState().setMetering(normalized);
+    if (state === 'recording') {
+      let target: number;
+      if (recorderState.metering != null) {
+        // dBFS: -160 (silence) to 0 (max). Normalize using -60 as practical floor.
+        target = Math.min(1, Math.max(0, (recorderState.metering + 60) / 60));
+      } else {
+        // Metering unavailable — simulate gentle activity
+        target = 0.12 + Math.random() * 0.18;
+      }
+      if (Math.abs(target - lastMeteringRef.current) >= 0.02) {
+        lastMeteringRef.current = target;
+        sttStore.getState().setMetering(target);
+      }
     }
-  }, [state, recorderState.metering]);
+  }, [state, recorderState.metering, recorderState.durationMillis]);
 
-  // Sync recording state to store
+  // Sync recording state to store + reset metering on stop
   useEffect(() => {
     sttStore.getState().setRecording(state === 'recording');
+    if (state !== 'recording') {
+      lastMeteringRef.current = 0;
+      sttStore.getState().setMetering(0);
+    }
   }, [state]);
 
   const startRecording = useCallback(async () => {

package/src/index.ts

@@ -14,6 +14,9 @@ export type { AliaExpression, AliaFaceProps } from './components/AliaFace';
 export { ThinkingIndicator } from './components/ThinkingIndicator';
 export { AliaMarkdown } from './components/Markdown';
 export { Reasoning, ReasoningTrigger, ReasoningContent } from './components/Reasoning';
+export { AliaWelcomeMessage } from './components/AliaWelcomeMessage';
+export { ResearchProgressCard } from './components/ResearchProgressCard';
+export { PlanPreviewCard } from './components/PlanPreviewCard';
 
 // ── Voice components ──
 export { AudioWaveVisualizer } from './components/voice/AudioWaveVisualizer';
@@ -39,9 +42,11 @@ export type { SoundName, SoundSources } from './hooks/useSoundEffects';
 export type {
   ChatMessage,
   ToolInvocation,
-  AliaChatSuggestion,
+  WelcomeSuggestion,
   ResearchProgress,
+  ResearchSource,
   PendingPlan,
+  PlanStep,
   RoomState,
   AgentState,
   VoiceMessage,
@@ -54,6 +59,8 @@ export type { ButtonProps } from './components/ui/button';
 export { Text, TextClassContext } from './components/ui/text';
 export { ChatTextInput } from './components/ui/chat-text-input';
 export { cn, formatFileSize } from './lib/utils';
+export { getToolLabel, getToolActiveLabel, getResearchActiveLabel } from './lib/tool-registry';
+export { getTextFromContent, getImagesFromContent } from './lib/content-utils';
 
 // ── PromptInput ──
 export { PromptInput } from './components/ui/prompt-input/prompt-input';

package/src/lib/content-utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Extract text from message content, whether it's a string or multi-part array.
+ */
+export function getTextFromContent(content: string | Array<{ type: string; [key: string]: any }> | any): string {
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return content
+      .filter((p: any) => p.type === 'text')
+      .map((p: any) => p.text || '')
+      .join('');
+  }
+  return String(content || '');
+}
+
+/**
+ * Extract image URLs from multi-part message content.
+ */
+export function getImagesFromContent(content: string | Array<{ type: string; [key: string]: any }> | any): string[] {
+  if (!Array.isArray(content)) return [];
+  return content
+    .filter((p: any) => p.type === 'image_url' && p.image_url?.url)
+    .map((p: any) => p.image_url.url);
+}

package/src/lib/tool-registry.ts

@@ -0,0 +1,55 @@
+interface ToolDefinition {
+  label: string;
+  category: 'search' | 'communication' | 'utility' | 'memory';
+}
+
+const TOOL_REGISTRY: Record<string, ToolDefinition> = {
+  // Search
+  webSearch:           { label: 'Searching the web',         category: 'search' },
+  scrapeURL:           { label: 'Reading URL',               category: 'search' },
+  getTimeline:         { label: 'Getting timeline',          category: 'search' },
+  searchKnowledgeBase: { label: 'Searching knowledge base',  category: 'search' },
+  webScraper:          { label: 'Reading web page',          category: 'search' },
+  browse:              { label: 'Browsing the web',          category: 'search' },
+
+  // Communication
+  sendWhatsAppMessage: { label: 'Sending WhatsApp message',  category: 'communication' },
+  getWhatsAppChats:    { label: 'Loading WhatsApp chats',    category: 'communication' },
+  getWhatsAppMessages: { label: 'Reading WhatsApp messages', category: 'communication' },
+  sendTelegram:        { label: 'Sending Telegram message',  category: 'communication' },
+
+  // Utility
+  getCurrentDate:      { label: 'Getting current date',      category: 'utility' },
+  generateFile:        { label: 'Generating file',           category: 'utility' },
+
+  // Memory
+  saveUserMemory:        { label: 'Saving to memory',      category: 'memory' },
+  updateUserPreferences: { label: 'Updating preferences',  category: 'memory' },
+  updateUserContext:     { label: 'Updating context',      category: 'memory' },
+};
+
+export function getToolLabel(toolName: string): string {
+  return TOOL_REGISTRY[toolName]?.label || toolName;
+}
+
+export function getToolActiveLabel(toolName: string): string | undefined {
+  const label = TOOL_REGISTRY[toolName]?.label;
+  if (!label) return undefined;
+  return label + '...';
+}
+
+/** Status strings for the ThinkingIndicator during research phases. */
+const RESEARCH_ACTIVE_LABELS: Record<string, string> = {
+  decomposing: 'Decomposing query...',
+  searching: 'Searching sources...',
+  reading: 'Reading articles...',
+  synthesizing: 'Synthesizing findings...',
+  follow_up: 'Following up...',
+  finalizing: 'Finalizing research...',
+};
+
+export function getResearchActiveLabel(phase: string): string | undefined {
+  return RESEARCH_ACTIVE_LABELS[phase];
+}
+
+export { TOOL_REGISTRY };

package/src/types.ts

@@ -1,5 +1,19 @@
+// ── Welcome / Suggestion Types ──
+
+export interface WelcomeSuggestion {
+  id: string;
+  title: string;
+  description: string;
+}
+
 // ── Chat Message Types ──
 
+export interface ResearchSource {
+  id: number;
+  url: string;
+  title: string;
+}
+
 export interface ResearchProgress {
   phase?: string;
   message?: string;
@@ -7,6 +21,9 @@ export interface ResearchProgress {
   sourcesFound?: number;
   currentQuery?: string;
   iteration?: number;
+  isComplete?: boolean;
+  sources?: ResearchSource[];
+  totalSearches?: number;
 }
 
 export interface PlanStep {
@@ -25,7 +42,7 @@ export interface PendingPlan {
 export interface ChatMessage {
   id: string;
   role: 'user' | 'assistant' | 'system';
-  content: string;
+  content: string | Array<{ type: string; [key: string]: any }>;
   toolInvocations?: ToolInvocation[];
   createdAt: number;
   /** Extended thinking / reasoning content */
@@ -42,6 +59,8 @@ export interface ChatMessage {
   isStreaming?: boolean;
   /** Cached TTS audio URL for read-aloud */
   audioUrl?: string;
+  /** Delegated agent identity */
+  agentInfo?: { id: string; name: string; avatar: string | null };
 }
 
 export interface ToolInvocation {
@@ -53,12 +72,6 @@ export interface ToolInvocation {
   toolCallId?: string;
 }
 
-export interface AliaChatSuggestion {
-  label: string;
-  icon?: string;
-  prompt: string;
-}
-
 // ── Voice Types ──
 
 export type RoomState = 'disconnected' | 'connecting' | 'connected' | 'error';

package/src/components/AliaChatSuggestions.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { useAliaColors } from '../theme';
-import type { AliaChatSuggestion } from '../types';
-
-interface AliaChatSuggestionsProps {
-  suggestions: AliaChatSuggestion[];
-  onSelect: (prompt: string) => void;
-}
-
-export function AliaChatSuggestions({ suggestions, onSelect }: AliaChatSuggestionsProps) {
-  const colors = useAliaColors();
-  const isDark = colors.isDark;
-
-  if (suggestions.length === 0) return null;
-
-  return (
-    <View style={styles.container}>
-      <Text style={[styles.greeting, { color: colors.tint }]}>
-        How can I help you today?
-      </Text>
-      <View style={styles.list}>
-        {suggestions.map((suggestion, i) => (
-          <TouchableOpacity
-            key={i}
-            style={[
-              styles.chip,
-              { backgroundColor: isDark ? colors.card : colors.card },
-            ]}
-            onPress={() => onSelect(suggestion.prompt)}
-            activeOpacity={0.7}
-          >
-            <Text style={[styles.chipText, { color: colors.text }]}>
-              {suggestion.label}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: 16,
-    paddingHorizontal: 16,
-  },
-  greeting: {
-    fontSize: 24,
-    fontWeight: '600',
-    lineHeight: 32,
-    marginBottom: 20,
-    paddingHorizontal: 4,
-  },
-  list: {
-    gap: 8,
-  },
-  chip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    borderRadius: 16,
-  },
-  chipText: {
-    fontSize: 14,
-    flex: 1,
-  },
-});