@alia.onl/sdk 2.0.0 → 3.0.0

package/src/components/AliaChatMessageList.tsx

@@ -1,8 +1,10 @@
-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, {
@@ -25,10 +27,15 @@ import type { ChatMessage, ToolInvocation } from '../types';
 
 const ENTER_ANIMATION = FadeInUp.duration(200);
 
-interface AliaChatMessageListProps {
+type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
+
+export interface AliaChatMessageListProps {
   messages: ChatMessage[];
   isStreaming: boolean;
   scrollOffsetY: SharedValue<number>;
+  onReadAloud?: (messageId: string, text: string) => void;
+  ttsActiveMessageId?: string | null;
+  ttsPlaybackState?: PlaybackState;
 }
 
 // ── Tool Bullet ──
@@ -36,7 +43,6 @@ interface AliaChatMessageListProps {
 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')
@@ -99,14 +105,107 @@ 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,
   isStreamingThis,
+  onReadAloud,
+  ttsActiveMessageId,
+  ttsPlaybackState,
 }: {
   message: ChatMessage;
   isStreamingThis: boolean;
+  onReadAloud?: (messageId: string, text: string) => void;
+  ttsActiveMessageId?: string | null;
+  ttsPlaybackState?: PlaybackState;
 }) {
   const colors = useAliaColors();
   const hasContent = !!message.content;
@@ -143,6 +242,16 @@ function AssistantMessage({
       {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>
   );
 }
@@ -153,6 +262,9 @@ export function AliaChatMessageList({
   messages,
   isStreaming,
   scrollOffsetY,
+  onReadAloud,
+  ttsActiveMessageId,
+  ttsPlaybackState,
 }: AliaChatMessageListProps) {
   const scrollRef = useRef<Animated.ScrollView>(null);
 
@@ -196,6 +308,9 @@ export function AliaChatMessageList({
               key={msg.id}
               message={msg}
               isStreamingThis={isStreamingThis}
+              onReadAloud={onReadAloud}
+              ttsActiveMessageId={ttsActiveMessageId}
+              ttsPlaybackState={ttsPlaybackState}
             />
           );
         })}
@@ -261,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,7 @@ 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';
@@ -65,15 +62,28 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
     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);
@@ -200,16 +210,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       [insets.top],
     );
 
-    // Derive AliaFace expression from chat state
-    const faceExpression = useMemo<AliaExpression>(() => {
-      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]);
-
-    const showSuggestions = messages.length === 0 && suggestions.length > 0;
+    const handleClear = useCallback(() => {
+      contentRef.current?.clear();
+    }, []);
 
     if (!rendered) return null;
 
@@ -256,8 +259,8 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                   </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,
@@ -286,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>
@@ -384,7 +378,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: 16,
   },
-  chatArea: {
-    flex: 1,
-  },
 });

package/src/components/ui/button.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Pressable, ActivityIndicator } from "react-native";
+import { TextClassContext } from "./text";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "group flex items-center justify-center rounded-xl web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary web:hover:opacity-90 active:opacity-90",
+        destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+        outline:
+          "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+        ghost:
+          "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
+        pill: "text-primary-foreground rounded-full bg-black web:hover:opacity-90 active:opacity-90",
+      },
+      size: {
+        default: "h-9 px-3.5 py-2 native:h-11 native:px-4",
+        sm: "h-8 rounded-lg px-2.5",
+        lg: "h-10 rounded-xl px-6 native:h-12",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonTextVariants = cva(
+  "web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "group-active:text-accent-foreground",
+        secondary:
+          "text-secondary-foreground group-active:text-secondary-foreground",
+        ghost: "group-active:text-accent-foreground",
+        link: "text-primary group-active:underline",
+        pill: "text-primary-foreground",
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "native:text-lg",
+        icon: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants> & {
+    isLoading?: boolean;
+  };
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, isLoading, children, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        props.disabled && "web:pointer-events-none",
+        buttonTextVariants({ variant, size }),
+      )}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && "opacity-50 web:pointer-events-none",
+          isLoading && "web:pointer-events-none",
+          buttonVariants({ variant, size, className }),
+        )}
+        ref={ref}
+        role="button"
+        {...props}
+      >
+        {isLoading ? (
+          <ActivityIndicator
+            color={variant === "outline" ? "black" : "white"}
+          />
+        ) : (
+          children
+        )}
+      </Pressable>
+    </TextClassContext.Provider>
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };