@alia.onl/sdk 2.0.0 → 3.1.0

package/src/components/ui/text.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Text as RNText, type TextProps as RNTextProps } from "react-native";
+import { cn } from "../../lib/utils";
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+export type TextProps = RNTextProps & {
+  className?: string;
+};
+
+const Text = React.forwardRef<RNText, TextProps>(
+  ({ className, ...props }, ref) => {
+    const textClass = React.useContext(TextClassContext);
+    return (
+      <RNText
+        className={cn(
+          "text-base leading-7 text-foreground web:select-text font-sans",
+          textClass,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Text.displayName = "Text";
+
+export { Text, TextClassContext };

package/src/hooks/useAliaChat.ts

@@ -1,6 +1,7 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+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';
 
@@ -17,8 +18,10 @@ export interface UseAliaChatOptions {
 
 export interface UseAliaChatReturn {
   messages: ChatMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
   send: (text: string) => void;
   isStreaming: boolean;
+  stop: () => void;
   clear: () => void;
   error: string | null;
 }
@@ -186,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) {
@@ -312,8 +315,6 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
                       updateAssistant(() => ({
                         pendingPlan: {
                           planId: parsed.planId,
-                          intent: parsed.intent,
-                          confidence: parsed.confidence,
                           steps: parsed.steps || [],
                           approved: false,
                           rejected: false,
@@ -431,18 +432,27 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
     [isStreaming, getToken, apiUrl, model, clientContext, scheduleFlush, flushPendingUpdates, updateAssistant, applyToolResult],
   );
 
-  const clear = useCallback(() => {
+  const stop = useCallback(() => {
     if (abortRef.current) {
       abortRef.current.abort();
       abortRef.current = null;
     }
-    setMessages([]);
+    flushPendingUpdates();
+    if (flushTimerRef.current) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = null;
+    }
     setIsStreaming(false);
+  }, [flushPendingUpdates]);
+
+  const clear = useCallback(() => {
+    stop();
+    setMessages([]);
     setError(null);
     pendingContentRef.current = '';
     pendingReasoningRef.current = '';
     toolInvocationsRef.current = [];
-  }, []);
+  }, [stop]);
 
-  return { messages, send, isStreaming, clear, error };
+  return { messages, setMessages, send, isStreaming, stop, clear, error };
 }

package/src/hooks/useDocumentPicker.ts

@@ -0,0 +1,37 @@
+import * as DocumentPicker from 'expo-document-picker';
+
+export type DocumentPickerResult = {
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+};
+
+type UseDocumentPickerResult = {
+  pickDocument: () => Promise<DocumentPickerResult[] | undefined>;
+};
+
+export function useDocumentPicker(): UseDocumentPickerResult {
+  const pickDocument = async (): Promise<DocumentPickerResult[] | undefined> => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: '*/*',
+        multiple: true,
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled === false && result.assets && result.assets.length > 0) {
+        return result.assets.map((asset: any) => ({
+          uri: asset.uri,
+          name: asset.name,
+          size: asset.size || 0,
+          mimeType: asset.mimeType || 'application/octet-stream',
+        }));
+      }
+    } catch (error) {
+      console.warn('Failed to pick document:', error);
+    }
+  };
+
+  return { pickDocument };
+}

package/src/hooks/useImagePicker.ts

@@ -0,0 +1,38 @@
+import * as ImagePicker from 'expo-image-picker';
+
+export type ImagePickerAsset = {
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+};
+
+type ImagePickerResult = {
+  pickImage: () => Promise<ImagePickerAsset[] | undefined>;
+};
+
+export function useImagePicker(): ImagePickerResult {
+  const pickImage = async (): Promise<ImagePickerAsset[] | undefined> => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        allowsMultipleSelection: true,
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        aspect: [4, 3],
+        quality: 1,
+      });
+
+      if (!result.canceled && result.assets.length > 0) {
+        return result.assets.map((asset: any) => ({
+          uri: asset.uri,
+          name: asset.fileName || `image-${Date.now()}.jpg`,
+          size: asset.fileSize || 0,
+          mimeType: asset.mimeType || 'image/jpeg',
+        }));
+      }
+    } catch (error) {
+      console.warn('Failed to pick image:', error);
+    }
+  };
+
+  return { pickImage };
+}

package/src/hooks/useSpeechToText.ts

@@ -27,7 +27,7 @@ interface STTStoreState {
   setMetering: (v: number) => void;
 }
 
-const useSTTStore = create<STTStoreState>((set) => ({
+export const useSTTStore = create<STTStoreState>((set) => ({
   isRecording: false,
   metering: 0,
   setRecording: (isRecording) => set({ isRecording }),
@@ -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 () => {
@@ -119,6 +133,8 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
       // Read audio file as base64
       const response = await fetch(uri);
       const blob = await response.blob();
+      // Detect actual MIME type (web records webm, native records m4a)
+      const detectedFormat = blob.type?.split(';')[0] || 'audio/m4a';
       const base64 = await new Promise<string>((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => {
@@ -139,7 +155,7 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
         },
         body: JSON.stringify({
           audio: base64,
-          format: 'audio/m4a',
+          format: detectedFormat,
         }),
       });
 

package/src/index.ts

@@ -2,9 +2,11 @@
 // @alia.onl/sdk — Alia AI Chat SDK
 // Reusable chat UI, voice, and streaming components for Oxy apps
 
-// ── Main component ──
+// ── Main components ──
 export { AliaChatSheet } from './components/AliaChatSheet';
 export type { AliaChatSheetProps, AliaChatSheetRef } from './components/AliaChatSheet';
+export { AliaChatScreen } from './components/AliaChatScreen';
+export type { AliaChatScreenProps } from './components/AliaChatScreen';
 
 // ── Chat UI components ──
 export { AliaFace } from './components/AliaFace';
@@ -12,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';
@@ -28,7 +33,7 @@ export { useAudioLevelMonitor } from './hooks/useAudioLevelMonitor';
 export { useAudioLevels } from './hooks/useAudioLevels';
 export { useTTS } from './hooks/useTTS';
 export type { UseTTSOptions } from './hooks/useTTS';
-export { useSpeechToText } from './hooks/useSpeechToText';
+export { useSpeechToText, useSTTStore } from './hooks/useSpeechToText';
 export type { UseSTTOptions } from './hooks/useSpeechToText';
 export { useSoundEffects, useVoiceSoundEffects } from './hooks/useSoundEffects';
 export type { SoundName, SoundSources } from './hooks/useSoundEffects';
@@ -37,15 +42,48 @@ export type { SoundName, SoundSources } from './hooks/useSoundEffects';
 export type {
   ChatMessage,
   ToolInvocation,
-  AliaChatSuggestion,
+  WelcomeSuggestion,
   ResearchProgress,
+  ResearchSource,
   PendingPlan,
+  PlanStep,
   RoomState,
   AgentState,
   VoiceMessage,
   VoiceToolInvocation,
 } from './types';
 
+// ── UI Primitives (NativeWind) ──
+export { Button, buttonVariants, buttonTextVariants } from './components/ui/button';
+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';
+export type { PromptInputProps } from './components/ui/prompt-input/prompt-input';
+export { usePromptInput, useIsFullscreen, PromptInputContext } from './components/ui/prompt-input/context';
+export type { Attachment, Completion, PromptInputContextType } from './components/ui/prompt-input/context';
+export { PromptInputTextarea } from './components/ui/prompt-input/textarea';
+export { PromptInputActions } from './components/ui/prompt-input/actions';
+export { PromptInputSubmitButton } from './components/ui/prompt-input/submit-button';
+export { PromptInputMicButton } from './components/ui/prompt-input/mic-button';
+export { PromptInputAddMenu } from './components/ui/prompt-input/add-menu';
+export { PromptInputAttachments } from './components/ui/prompt-input/attachments';
+export { PromptInputAutocomplete } from './components/ui/prompt-input/autocomplete';
+
+// ── Picker hooks ──
+export { useImagePicker } from './hooks/useImagePicker';
+export type { ImagePickerAsset } from './hooks/useImagePicker';
+export { useDocumentPicker } from './hooks/useDocumentPicker';
+export type { DocumentPickerResult } from './hooks/useDocumentPicker';
+
+// ── Keyboard ──
+export { KeyboardAwareScrollView, KeyboardAvoidingView, KeyboardProvider } from './lib/keyboard';
+
 // ── Theme ──
 export { useAliaColors } from './theme';
 export type { AliaColors } from './theme';

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/keyboard.native.tsx

@@ -0,0 +1,6 @@
+// Native: re-export react-native-keyboard-controller components
+export {
+  KeyboardAwareScrollView,
+  KeyboardAvoidingView,
+  KeyboardProvider,
+} from 'react-native-keyboard-controller';

package/src/lib/keyboard.tsx

@@ -0,0 +1,25 @@
+// Web: re-export React Native built-in components as keyboard-controller substitutes
+import React from 'react';
+import { ScrollView, type ScrollViewProps, KeyboardAvoidingView } from 'react-native';
+
+// Accept native-only props so shared components don't cause TS errors
+type KeyboardAwareScrollViewProps = ScrollViewProps & {
+  bottomOffset?: number;
+  disableScrollOnKeyboardHide?: boolean;
+  enabled?: boolean;
+  extraKeyboardSpace?: number;
+};
+
+const KeyboardAwareScrollView = React.forwardRef<ScrollView, KeyboardAwareScrollViewProps>(
+  ({ bottomOffset, disableScrollOnKeyboardHide, enabled, extraKeyboardSpace, ...props }, ref) => (
+    <ScrollView ref={ref} {...props} />
+  )
+);
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+
+export { KeyboardAwareScrollView, KeyboardAvoidingView };
+
+// No-op provider on web — keyboard-controller is native-only
+export function KeyboardProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

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/lib/utils.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}

package/src/optional-deps.d.ts

@@ -1,6 +1,13 @@
+// NativeWind types — extends RN components with className prop
+/// <reference types="nativewind/types" />
+
 // Type declarations for optional peer dependencies.
 // These prevent TypeScript errors when the deps aren't installed.
 // At runtime, the host app provides the actual packages.
+//
+// NOTE: Only declare modules for packages NOT installed in the monorepo.
+// Installed packages (lucide-react-native, zeego, expo-image, etc.)
+// have their own real types — ambient declarations here would shadow them.
 
 declare module 'livekit-client' {
   export class Room {
@@ -67,3 +74,13 @@ declare module 'expo-audio' {
     uri: string | null;
   }
 }
+
+declare module 'expo-clipboard' {
+  export function setStringAsync(text: string): Promise<boolean>;
+  export function getStringAsync(): Promise<string>;
+}
+
+declare module 'expo-image-picker' {
+  export function launchImageLibraryAsync(options?: any): Promise<any>;
+  export const MediaTypeOptions: { Images: string; Videos: string; All: string };
+}

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,13 +21,20 @@ export interface ResearchProgress {
   sourcesFound?: number;
   currentQuery?: string;
   iteration?: number;
+  isComplete?: boolean;
+  sources?: ResearchSource[];
+  totalSearches?: number;
+}
+
+export interface PlanStep {
+  action: string;
+  description: string;
+  toolName?: string;
 }
 
 export interface PendingPlan {
   planId: string;
-  intent: string;
-  confidence?: number;
-  steps: string[];
+  steps: PlanStep[];
   approved: boolean;
   rejected: boolean;
 }
@@ -21,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 */
@@ -38,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 {
@@ -49,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,
-  },
-});