@alia.onl/sdk 1.0.0 → 3.0.0

package/src/components/AliaChatMessageList.tsx

@@ -1,52 +1,95 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import {
   View,
   Text,
+  Pressable,
   StyleSheet,
   Platform,
 } from 'react-native';
 import { BlurView } from 'expo-blur';
-import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withSequence,
+  cancelAnimation,
+  Easing,
+  FadeInUp,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { useAliaColors } from '../theme';
+import { AliaMarkdown } from './Markdown';
+import { ThinkingIndicator } from './ThinkingIndicator';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from './Reasoning';
 import type { ChatMessage, ToolInvocation } from '../types';
 
-interface AliaChatMessageListProps {
+const ENTER_ANIMATION = FadeInUp.duration(200);
+
+type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
+
+export interface AliaChatMessageListProps {
   messages: ChatMessage[];
   isStreaming: boolean;
-  scrollOffsetY: Animated.SharedValue<number>;
+  scrollOffsetY: SharedValue<number>;
+  onReadAloud?: (messageId: string, text: string) => void;
+  ttsActiveMessageId?: string | null;
+  ttsPlaybackState?: PlaybackState;
 }
 
-function ToolStatus({ invocation }: { invocation: ToolInvocation }) {
+// ── Tool Bullet ──
+
+function ToolBullet({ invocation }: { invocation: ToolInvocation }) {
   const colors = useAliaColors();
 
-  // Clean up tool name for display: "oxy_inbox__searchEmails" → "Searching emails"
   const displayName = invocation.toolName
     .replace(/^oxy_\w+__/, '')
     .replace(/([A-Z])/g, ' $1')
     .replace(/^./, (s) => s.toUpperCase())
     .trim();
 
-  const label =
-    invocation.state === 'call'
-      ? `${displayName}...`
-      : displayName;
+  const isActive = invocation.state === 'call' || invocation.state === 'partial-call';
+  const label = isActive ? `${displayName}...` : displayName;
 
   return (
     <View style={styles.toolStatus}>
-      {invocation.state === 'call' && (
-        <View style={[styles.toolDot, { backgroundColor: colors.tint }]} />
-      )}
-      {invocation.state === 'result' && (
-        <Text style={[styles.toolCheckmark, { color: colors.tint }]}>{'✓'}</Text>
+      {isActive ? (
+        <PulsingDot color={colors.tint} />
+      ) : (
+        <Text style={[styles.toolCheckmark, { color: colors.tint }]}>{'\u2713'}</Text>
       )}
       <Text style={[styles.toolLabel, { color: colors.secondaryText }]}>{label}</Text>
     </View>
   );
 }
 
+function PulsingDot({ color }: { color: string }) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.3, { duration: 600, easing: Easing.inOut(Easing.sin) }),
+        withTiming(1, { duration: 600, easing: Easing.inOut(Easing.sin) }),
+      ),
+      -1,
+    );
+    return () => cancelAnimation(opacity);
+  }, []);
+
+  const animStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <Animated.View style={[styles.toolDot, { backgroundColor: color }, animStyle]} />
+  );
+}
+
+// ── User Bubble ──
+
 function UserBubble({ content }: { content: string }) {
   const colors = useAliaColors();
-  const isDark = colors.background === '#000000';
+  const isDark = colors.isDark;
 
   return (
     <View style={styles.userMessage}>
@@ -62,38 +105,166 @@ function UserBubble({ content }: { content: string }) {
   );
 }
 
+// ── Message Actions ──
+
+function MessageActions({
+  message,
+  onReadAloud,
+  ttsActiveMessageId,
+  ttsPlaybackState,
+}: {
+  message: ChatMessage;
+  onReadAloud?: (messageId: string, text: string) => void;
+  ttsActiveMessageId?: string | null;
+  ttsPlaybackState?: PlaybackState;
+}) {
+  const colors = useAliaColors();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      if (Platform.OS === 'web') {
+        await navigator.clipboard.writeText(message.content);
+      } else {
+        const Clipboard = await import('expo-clipboard');
+        await Clipboard.setStringAsync(message.content);
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  }, [message.content]);
+
+  const isThisPlaying = ttsActiveMessageId === message.id && ttsPlaybackState === 'playing';
+  const isThisLoading = ttsActiveMessageId === message.id && ttsPlaybackState === 'loading';
+
+  if (!message.content) return null;
+
+  return (
+    <View style={styles.actionsRow}>
+      {/* Copy */}
+      <Pressable onPress={handleCopy} style={styles.actionBtn} hitSlop={8}>
+        {copied ? (
+          <Text style={[styles.actionIcon, { color: colors.tint }]}>{'\u2713'}</Text>
+        ) : (
+          <CopyIcon color={colors.secondaryText} />
+        )}
+      </Pressable>
+
+      {/* Read aloud */}
+      {onReadAloud && (
+        <Pressable
+          onPress={() => onReadAloud(message.id, message.content)}
+          style={styles.actionBtn}
+          hitSlop={8}
+        >
+          {isThisLoading ? (
+            <Text style={[styles.actionIcon, { color: colors.secondaryText }]}>{'\u2026'}</Text>
+          ) : (
+            <VolumeIcon color={isThisPlaying ? colors.tint : colors.secondaryText} />
+          )}
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+function CopyIcon({ color }: { color: string }) {
+  if (Platform.OS === 'web') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+    );
+  }
+  return <Text style={[styles.actionIcon, { color }]}>{'\u2398'}</Text>;
+}
+
+function VolumeIcon({ color }: { color: string }) {
+  if (Platform.OS === 'web') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} 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" />
+      </svg>
+    );
+  }
+  return <Text style={[styles.actionIcon, { color }]}>{'\u{1F50A}'}</Text>;
+}
+
+// ── Assistant Message ──
+
 function AssistantMessage({
   message,
-  isFirst,
   isStreamingThis,
+  onReadAloud,
+  ttsActiveMessageId,
+  ttsPlaybackState,
 }: {
   message: ChatMessage;
-  isFirst: boolean;
   isStreamingThis: boolean;
+  onReadAloud?: (messageId: string, text: string) => void;
+  ttsActiveMessageId?: string | null;
+  ttsPlaybackState?: PlaybackState;
 }) {
   const colors = useAliaColors();
+  const hasContent = !!message.content;
+  const hasThinking = !!message.thinking;
+  const showThinkingIndicator = isStreamingThis && !hasContent && !message.toolInvocations?.length && !hasThinking;
 
   return (
-    <View style={styles.assistantMessage}>
+    <Animated.View
+      entering={ENTER_ANIMATION}
+      style={styles.assistantMessage}
+    >
+      {/* Extended thinking / reasoning */}
+      {hasThinking && (
+        <Reasoning isStreaming={isStreamingThis && !hasContent}>
+          <ReasoningTrigger />
+          <ReasoningContent>{message.thinking!}</ReasoningContent>
+        </Reasoning>
+      )}
+
       {/* Tool invocations */}
       {message.toolInvocations?.map((tool, i) => (
-        <ToolStatus key={`${tool.toolName}-${i}`} invocation={tool} />
+        <ToolBullet key={`${tool.toolCallId || tool.toolName}-${i}`} invocation={tool} />
       ))}
 
-      {/* Text content */}
-      {(message.content || isStreamingThis) && (
-        <Text style={[styles.assistantText, { color: colors.text }]}>
-          {message.content || (isStreamingThis ? '\u2758' : '')}
-        </Text>
+      {/* Thinking indicator (no content yet) */}
+      {showThinkingIndicator && <ThinkingIndicator />}
+
+      {/* Text content — rendered as markdown */}
+      {hasContent && (
+        <AliaMarkdown content={message.content} />
       )}
-    </View>
+
+      {/* Streaming cursor */}
+      {isStreamingThis && hasContent && (
+        <Text style={[styles.cursor, { color: colors.secondaryText }]}>{'\u2758'}</Text>
+      )}
+
+      {/* Message actions (copy, read aloud) — shown when not streaming */}
+      {!isStreamingThis && hasContent && (
+        <MessageActions
+          message={message}
+          onReadAloud={onReadAloud}
+          ttsActiveMessageId={ttsActiveMessageId}
+          ttsPlaybackState={ttsPlaybackState}
+        />
+      )}
+    </Animated.View>
   );
 }
 
+// ── List ──
+
 export function AliaChatMessageList({
   messages,
   isStreaming,
   scrollOffsetY,
+  onReadAloud,
+  ttsActiveMessageId,
+  ttsPlaybackState,
 }: AliaChatMessageListProps) {
   const scrollRef = useRef<Animated.ScrollView>(null);
 
@@ -130,15 +301,16 @@ export function AliaChatMessageList({
             return <UserBubble key={msg.id} content={msg.content} />;
           }
 
-          const isFirstInGroup = i === 0 || arr[i - 1]?.role === 'user';
           const isStreamingThis = isStreaming && i === arr.length - 1;
 
           return (
             <AssistantMessage
               key={msg.id}
               message={msg}
-              isFirst={isFirstInGroup}
               isStreamingThis={isStreamingThis}
+              onReadAloud={onReadAloud}
+              ttsActiveMessageId={ttsActiveMessageId}
+              ttsPlaybackState={ttsPlaybackState}
             />
           );
         })}
@@ -179,9 +351,9 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     marginBottom: 12,
   },
-  assistantText: {
+  cursor: {
     fontSize: 15,
-    lineHeight: 24,
+    marginTop: -4,
   },
 
   // Tool status
@@ -196,10 +368,6 @@ const styles = StyleSheet.create({
     width: 8,
     height: 8,
     borderRadius: 4,
-    ...Platform.select({
-      web: {} as any,
-      default: {},
-    }),
   },
   toolCheckmark: {
     fontSize: 14,
@@ -208,4 +376,22 @@ const styles = StyleSheet.create({
   toolLabel: {
     fontSize: 13,
   },
+
+  // Message actions
+  actionsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginTop: 6,
+    opacity: 0.7,
+  },
+  actionBtn: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionIcon: {
+    fontSize: 14,
+  },
 });

package/src/components/AliaChatScreen.tsx

@@ -0,0 +1,132 @@
+/**
+ * Full-screen Alia chat component for use as a route/screen in Oxy ecosystem apps.
+ *
+ * Usage:
+ * ```tsx
+ * import { AliaChatScreen } from '@alia.onl/sdk';
+ *
+ * <AliaChatScreen
+ *   clientContext="Notes app — user is viewing note #42"
+ *   suggestions={[{ label: 'Summarize', prompt: 'Summarize this note' }]}
+ *   headerLeft={<BackButton />}
+ * />
+ * ```
+ */
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
+import { AliaFace, type AliaExpression } from './AliaFace';
+import { useAliaColors } from '../theme';
+import type { AliaChatSuggestion } from '../types';
+
+export interface AliaChatScreenProps {
+  /** App context injected into system prompt */
+  clientContext?: string;
+  /** Quick action suggestions shown when chat is empty */
+  suggestions?: AliaChatSuggestion[];
+  /** Alia model (default: 'alia-v1') */
+  model?: string;
+  /** API URL override */
+  apiUrl?: string;
+  /** Optional header left action (e.g., back button) */
+  headerLeft?: React.ReactNode;
+  /** Optional header right action (e.g., settings button) */
+  headerRight?: React.ReactNode;
+}
+
+export function AliaChatScreen({
+  clientContext,
+  suggestions = [],
+  model,
+  apiUrl,
+  headerLeft,
+  headerRight,
+}: AliaChatScreenProps) {
+  const colors = useAliaColors();
+  const insets = useSafeAreaInsets();
+  const contentRef = useRef<AliaChatContentRef>(null);
+
+  const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
+  const [hasMessages, setHasMessages] = useState(false);
+
+  // Poll content ref for header state
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (contentRef.current) {
+        setFaceExpression(contentRef.current.faceExpression);
+        setHasMessages(contentRef.current.messages.length > 0);
+      }
+    }, 200);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    contentRef.current?.clear();
+  }, []);
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background, paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          {headerLeft}
+          <AliaFace size={28} expression={faceExpression} />
+          <Text style={[styles.headerTitle, { color: colors.text }]}>Alia</Text>
+        </View>
+        <View style={styles.headerRight}>
+          {hasMessages && (
+            <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
+              <Text style={[styles.clearText, { color: colors.secondaryText }]}>Clear</Text>
+            </TouchableOpacity>
+          )}
+          {headerRight}
+        </View>
+      </View>
+
+      {/* Chat content */}
+      <AliaChatContent
+        ref={contentRef}
+        clientContext={clientContext}
+        suggestions={suggestions}
+        model={model}
+        apiUrl={apiUrl}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  clearButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  clearText: {
+    fontSize: 14,
+  },
+});

package/src/components/AliaChatSheet.tsx

@@ -27,10 +27,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
-import { AliaChatMessageList } from './AliaChatMessageList';
-import { AliaChatInput } from './AliaChatInput';
-import { AliaChatSuggestions } from './AliaChatSuggestions';
+import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
+import { AliaFace, type AliaExpression } from './AliaFace';
 import { useAliaColors } from '../theme';
 import type { AliaChatSuggestion } from '../types';
 
@@ -61,18 +59,31 @@ export interface AliaChatSheetRef {
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
   ({ clientContext, suggestions = [], model, apiUrl }, ref) => {
     const colors = useAliaColors();
-    const isDark = colors.background === '#000000';
+    const isDark = colors.isDark;
     const insets = useSafeAreaInsets();
 
-    // Chat
-    const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
-    const { messages, send, isStreaming, clear } = useAliaChat(chatOptions);
+    // Content ref for reading state
+    const contentRef = useRef<AliaChatContentRef>(null);
+    const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
+    const [hasMessages, setHasMessages] = useState(false);
 
     // Sheet visibility
     const [rendered, setRendered] = useState(false);
     const hasClosedRef = useRef(false);
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+    // Poll content ref for header state (lightweight, only when rendered)
+    useEffect(() => {
+      if (!rendered) return;
+      const interval = setInterval(() => {
+        if (contentRef.current) {
+          setFaceExpression(contentRef.current.faceExpression);
+          setHasMessages(contentRef.current.messages.length > 0);
+        }
+      }, 200);
+      return () => clearInterval(interval);
+    }, [rendered]);
+
     // Reanimated shared values
     const translateY = useSharedValue(SCREEN_HEIGHT);
     const backdropOpacity = useSharedValue(0);
@@ -147,7 +158,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
     // Pan gesture for swipe-to-dismiss
     const nativeGesture = useMemo(() => Gesture.Native(), []);
 
-    const panGesture = Gesture.Pan()
+    const panGesture = useMemo(() => Gesture.Pan()
       .simultaneousWithExternalGesture(nativeGesture)
       .onStart(() => {
         'worklet';
@@ -181,7 +192,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
         } else {
           translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
         }
-      });
+      }), [nativeGesture, finishDismiss]);
 
     // Animated styles
     const backdropAnimStyle = useAnimatedStyle(() => ({
@@ -199,7 +210,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       [insets.top],
     );
 
-    const showSuggestions = messages.length === 0 && suggestions.length > 0;
+    const handleClear = useCallback(() => {
+      contentRef.current?.clear();
+    }, []);
 
     if (!rendered) return null;
 
@@ -240,16 +253,14 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
               {/* Header */}
               <View style={styles.header}>
                 <View style={styles.headerLeft}>
-                  <View style={[styles.aliaAvatar, { backgroundColor: colors.tint }]}>
-                    <Text style={styles.aliaAvatarText}>A</Text>
-                  </View>
+                  <AliaFace size={28} expression={faceExpression} />
                   <Text style={[styles.headerTitle, { color: colors.text }]}>
                     Alia
                   </Text>
                 </View>
                 <View style={styles.headerRight}>
-                  {messages.length > 0 && (
-                    <TouchableOpacity onPress={clear} style={styles.clearButton}>
+                  {hasMessages && (
+                    <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
                       <Text
                         style={[
                           styles.clearText,
@@ -278,26 +289,17 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                 </View>
               </View>
 
-              {/* Suggestions or Messages */}
+              {/* Chat content */}
               <GestureDetector gesture={nativeGesture}>
-                <View style={styles.chatArea}>
-                  {showSuggestions ? (
-                    <AliaChatSuggestions
-                      suggestions={suggestions}
-                      onSelect={send}
-                    />
-                  ) : (
-                    <AliaChatMessageList
-                      messages={messages}
-                      isStreaming={isStreaming}
-                      scrollOffsetY={scrollOffsetY}
-                    />
-                  )}
-                </View>
+                <AliaChatContent
+                  ref={contentRef}
+                  clientContext={clientContext}
+                  suggestions={suggestions}
+                  model={model}
+                  apiUrl={apiUrl}
+                  scrollOffsetY={scrollOffsetY}
+                />
               </GestureDetector>
-
-              {/* Input */}
-              <AliaChatInput onSend={send} isStreaming={isStreaming} />
             </Animated.View>
           </GestureDetector>
         </GestureHandlerRootView>
@@ -353,18 +355,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 10,
   },
-  aliaAvatar: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  aliaAvatarText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '700',
-  },
   headerTitle: {
     fontSize: 18,
     fontWeight: '600',
@@ -388,7 +378,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: 16,
   },
-  chatArea: {
-    flex: 1,
-  },
 });

package/src/components/AliaChatSuggestions.tsx

@@ -10,7 +10,7 @@ interface AliaChatSuggestionsProps {
 
 export function AliaChatSuggestions({ suggestions, onSelect }: AliaChatSuggestionsProps) {
   const colors = useAliaColors();
-  const isDark = colors.background === '#000000';
+  const isDark = colors.isDark;
 
   if (suggestions.length === 0) return null;