@alia.onl/sdk 1.0.0 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "1.0.0",
-  "description": "Alia AI chat SDK — reusable bottom sheet chat component for Oxy apps",
+  "version": "2.0.0",
+  "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
@@ -10,6 +10,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "react-native-markdown-display": "^7.0.2-0",
+    "zustand": ">=4"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.73",
@@ -18,7 +22,15 @@
     "react-native-reanimated": ">=3",
     "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": ">=4",
-    "react-native-keyboard-controller": ">=1"
+    "react-native-keyboard-controller": ">=1",
+    "react-native-svg": ">=13",
+    "livekit-client": ">=2.0.0",
+    "expo-audio": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "livekit-client": { "optional": true },
+    "expo-audio": { "optional": true },
+    "react-native-svg": { "optional": true }
   },
   "devDependencies": {
     "typescript": "^5.9.3"

package/src/components/AliaChatInput.tsx

@@ -19,7 +19,7 @@ export function AliaChatInput({ onSend, isStreaming }: AliaChatInputProps) {
   const [input, setInput] = useState('');
   const colors = useAliaColors();
   const insets = useSafeAreaInsets();
-  const isDark = colors.background === '#000000';
+  const isDark = colors.isDark;
 
   const canSend = input.trim().length > 0 && !isStreaming;
 

package/src/components/AliaChatMessageList.tsx

@@ -3,20 +3,37 @@ import {
   View,
   Text,
   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';
 
+const ENTER_ANIMATION = FadeInUp.duration(200);
+
 interface AliaChatMessageListProps {
   messages: ChatMessage[];
   isStreaming: boolean;
-  scrollOffsetY: Animated.SharedValue<number>;
+  scrollOffsetY: SharedValue<number>;
 }
 
-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"
@@ -26,27 +43,47 @@ function ToolStatus({ invocation }: { invocation: ToolInvocation }) {
     .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,34 +99,56 @@ function UserBubble({ content }: { content: string }) {
   );
 }
 
+// ── Assistant Message ──
+
 function AssistantMessage({
   message,
-  isFirst,
   isStreamingThis,
 }: {
   message: ChatMessage;
-  isFirst: boolean;
   isStreamingThis: boolean;
 }) {
   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>
+      )}
+    </Animated.View>
   );
 }
 
+// ── List ──
+
 export function AliaChatMessageList({
   messages,
   isStreaming,
@@ -130,14 +189,12 @@ 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}
             />
           );
@@ -179,9 +236,9 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     marginBottom: 12,
   },
-  assistantText: {
+  cursor: {
     fontSize: 15,
-    lineHeight: 24,
+    marginTop: -4,
   },
 
   // Tool status
@@ -196,10 +253,6 @@ const styles = StyleSheet.create({
     width: 8,
     height: 8,
     borderRadius: 4,
-    ...Platform.select({
-      web: {} as any,
-      default: {},
-    }),
   },
   toolCheckmark: {
     fontSize: 14,

package/src/components/AliaChatSheet.tsx

@@ -31,6 +31,7 @@ import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
 import { AliaChatMessageList } from './AliaChatMessageList';
 import { AliaChatInput } from './AliaChatInput';
 import { AliaChatSuggestions } from './AliaChatSuggestions';
+import { AliaFace, type AliaExpression } from './AliaFace';
 import { useAliaColors } from '../theme';
 import type { AliaChatSuggestion } from '../types';
 
@@ -61,7 +62,7 @@ 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
@@ -147,7 +148,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 +182,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
         } else {
           translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
         }
-      });
+      }), [nativeGesture, finishDismiss]);
 
     // Animated styles
     const backdropAnimStyle = useAnimatedStyle(() => ({
@@ -199,6 +200,15 @@ 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;
 
     if (!rendered) return null;
@@ -240,9 +250,7 @@ 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>
@@ -353,18 +361,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',

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;