@alia.onl/sdk 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
@@ -17,7 +17,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.73",
-    "@oxyhq/services": ">=6.0.0",
+    "@oxyhq/services": "6.10.7",
     "expo-blur": "*",
     "react-native-reanimated": ">=3",
     "react-native-gesture-handler": ">=2",
@@ -39,22 +39,50 @@
     "@radix-ui/react-dropdown-menu": ">=2"
   },
   "peerDependenciesMeta": {
-    "livekit-client": { "optional": true },
-    "expo-audio": { "optional": true },
-    "react-native-svg": { "optional": true },
-    "nativewind": { "optional": true },
-    "clsx": { "optional": true },
-    "tailwind-merge": { "optional": true },
-    "class-variance-authority": { "optional": true },
-    "zeego": { "optional": true },
-    "expo-image": { "optional": true },
-    "expo-image-picker": { "optional": true },
-    "expo-document-picker": { "optional": true },
-    "expo-clipboard": { "optional": true },
-    "lucide-react-native": { "optional": true },
-    "@radix-ui/react-dropdown-menu": { "optional": true }
+    "livekit-client": {
+    "optional": true
   },
-  "devDependencies": {
-    "typescript": "^5.9.3"
-  }
+  "expo-audio": {
+  "optional": true
+},
+"react-native-svg": {
+"optional": true
+},
+"nativewind": {
+"optional": true
+},
+"clsx": {
+"optional": true
+},
+"tailwind-merge": {
+"optional": true
+},
+"class-variance-authority": {
+"optional": true
+},
+"zeego": {
+"optional": true
+},
+"expo-image": {
+"optional": true
+},
+"expo-image-picker": {
+"optional": true
+},
+"expo-document-picker": {
+"optional": true
+},
+"expo-clipboard": {
+"optional": true
+},
+"lucide-react-native": {
+"optional": true
+},
+"@radix-ui/react-dropdown-menu": {
+"optional": true
+}
+},
+"devDependencies": {
+  "typescript": "^5.9.3"
+}
 }

package/src/components/AliaChatMessageList.tsx

@@ -21,7 +21,6 @@ import {
   ThumbsDown,
   Pencil,
 } from 'lucide-react-native';
-import { useAliaColors } from '../theme';
 import { Text } from './ui/text';
 import { AliaMarkdown } from './Markdown';
 import { ThinkingIndicator } from './ThinkingIndicator';

package/src/components/AliaChatScreen.tsx

@@ -14,11 +14,10 @@
  */
 
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity } 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 { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 export interface AliaChatScreenProps {
@@ -50,7 +49,6 @@ export function AliaChatScreen({
   welcomeSubtitle,
   welcomeSuggestions,
 }: AliaChatScreenProps) {
-  const colors = useAliaColors();
   const insets = useSafeAreaInsets();
   const contentRef = useRef<AliaChatContentRef>(null);
 
@@ -73,18 +71,18 @@ export function AliaChatScreen({
   }, []);
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background, paddingTop: insets.top }]}>
+    <View className="flex-1 bg-background" style={{ paddingTop: insets.top }}>
       {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.headerLeft}>
+      <View className="flex-row items-center justify-between px-4 py-3">
+        <View className="flex-row items-center gap-2.5">
           {headerLeft}
           <AliaFace size={28} expression={faceExpression} />
-          <Text style={[styles.headerTitle, { color: colors.text }]}>Alia</Text>
+          <Text className="text-lg font-semibold text-foreground">Alia</Text>
         </View>
-        <View style={styles.headerRight}>
+        <View className="flex-row items-center gap-2">
           {hasMessages && (
-            <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-              <Text style={[styles.clearText, { color: colors.secondaryText }]}>Clear</Text>
+            <TouchableOpacity onPress={handleClear} className="px-2.5 py-1.5">
+              <Text className="text-sm text-muted-foreground">Clear</Text>
             </TouchableOpacity>
           )}
           {headerRight}
@@ -105,36 +103,3 @@ export function AliaChatScreen({
   );
 }
 
-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

@@ -16,6 +16,7 @@ import {
   Pressable,
   Dimensions,
   Platform,
+  useColorScheme,
 } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
@@ -29,7 +30,6 @@ import Animated, {
 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 { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
@@ -62,8 +62,8 @@ export interface AliaChatSheetRef {
 
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
   ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions }, ref) => {
-    const colors = useAliaColors();
-    const isDark = colors.isDark;
+    const scheme = useColorScheme();
+    const isDark = scheme === 'dark';
     const insets = useSafeAreaInsets();
 
     // Content ref for reading state
@@ -237,9 +237,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
           {/* Sheet */}
           <GestureDetector gesture={panGesture}>
             <Animated.View
+              className="bg-background"
               style={[
                 styles.sheet,
-                { backgroundColor: colors.background },
                 sheetAnimStyle,
                 sheetMaxHeightStyle,
               ]}
@@ -258,19 +258,14 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
               <View style={styles.header}>
                 <View style={styles.headerLeft}>
                   <AliaFace size={28} expression={faceExpression} />
-                  <Text style={[styles.headerTitle, { color: colors.text }]}>
+                  <Text className="text-lg font-semibold text-foreground">
                     Alia
                   </Text>
                 </View>
                 <View style={styles.headerRight}>
                   {hasMessages && (
                     <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-                      <Text
-                        style={[
-                          styles.clearText,
-                          { color: colors.secondaryText },
-                        ]}
-                      >
+                      <Text className="text-sm text-muted-foreground">
                         Clear
                       </Text>
                     </TouchableOpacity>
@@ -280,13 +275,7 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                     style={styles.closeButton}
                     hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                   >
-                    <Text
-                      style={{
-                        fontSize: 18,
-                        fontWeight: '600',
-                        color: colors.icon,
-                      }}
-                    >
+                    <Text className="text-lg font-semibold text-muted-foreground">
                       {'\u2715'}
                     </Text>
                   </TouchableOpacity>
@@ -318,7 +307,7 @@ AliaChatSheet.displayName = 'AliaChatSheet';
 
 const styles = StyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0,0,0,0.5)',
   },
   sheet: {
@@ -361,10 +350,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 10,
   },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-  },
   headerRight: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -374,9 +359,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 6,
   },
-  clearText: {
-    fontSize: 14,
-  },
   closeButton: {
     width: 32,
     height: 32,

package/src/components/AliaFace.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { View, Text } from "react-native";
+import React, { useEffect, useMemo } from "react";
+import { View, Text, Image, ImageSourcePropType } from "react-native";
 import Svg, { Path, Ellipse } from "react-native-svg";
 import Animated, {
   useSharedValue,
@@ -12,7 +12,6 @@ import Animated, {
   cancelAnimation,
   Easing,
 } from "react-native-reanimated";
-import { useAliaColors } from "../theme";
 
 // ─── Animated SVG wrappers ──────────────────────────────────────────────────
 
@@ -33,10 +32,19 @@ export type AliaExpression =
   | "Searching F"
   | "Looking Down";
 
+export interface AliaAccessory {
+  layer: 'front' | 'behind';
+  image: ImageSourcePropType;
+  /** Optional position overrides (ratios 0-1, scale multiplier, rotation in degrees) */
+  position?: { x: number; y: number; scale: number; rotation: number };
+}
+
 export interface AliaFaceProps {
   expression?: AliaExpression;
   size?: number;
   showLabel?: boolean;
+  /** Accessory overlays rendered on/around the face circle */
+  accessories?: AliaAccessory[];
 }
 
 // ─── Expression data (numeric decomposition of SVG paths) ───────────────────
@@ -129,11 +137,9 @@ export function AliaFace({
   expression = DEFAULT_EXPRESSION,
   size = 120,
   showLabel = false,
+  accessories,
 }: AliaFaceProps) {
-  const colors = useAliaColors();
-  const strokeColor = colors.isDark ? "#ffffff" : "#000000";
-  const circleBg = colors.background;
-  const circleBorder = colors.border;
+  const strokeColor = 'currentColor';
 
   const initial = EXPRESSIONS[DEFAULT_EXPRESSION];
 
@@ -336,64 +342,108 @@ export function AliaFace({
     transform: [{ translateY: breatheY.value }],
   }));
 
+  // ── Accessories ──
+
+  const { behind, front } = useMemo(() => {
+    if (!accessories?.length) return { behind: [] as AliaAccessory[], front: [] as AliaAccessory[] };
+    const b: AliaAccessory[] = [];
+    const f: AliaAccessory[] = [];
+    for (const acc of accessories) {
+      if (acc.layer === 'behind') b.push(acc);
+      else f.push(acc);
+    }
+    return { behind: b, front: f };
+  }, [accessories]);
+
+  const accessoryStyle = useMemo(
+    () => ({ position: 'absolute' as const, width: size, height: size, top: 0, left: 0 }),
+    [size],
+  );
+
   // ── Render ──
 
   return (
     <View style={{ alignItems: "center" }}>
-      <View
-        style={{
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor: circleBg,
-          alignItems: "center",
-          justifyContent: "center",
-          borderWidth: 1,
-          borderColor: circleBorder,
-        }}
-      >
-        <Animated.View style={breatheStyle}>
-          <Svg
-            width={size * 0.95}
-            height={size * 0.95}
-            viewBox="35 35 250 250"
-          >
-            {/* Left brow */}
-            <AnimatedPath
-              animatedProps={leftBrowProps}
-              stroke={strokeColor}
-              strokeWidth={15}
-              strokeLinecap="round"
-              fill="none"
-            />
-
-            {/* Left eye */}
-            <AnimatedEllipse
-              animatedProps={leftEyeProps}
-              fill={strokeColor}
-            />
-
-            {/* Right eye */}
-            <AnimatedEllipse
-              animatedProps={rightEyeProps}
-              fill={strokeColor}
-            />
-
-            {/* Nose + right brow */}
-            <AnimatedPath
-              animatedProps={noseBrowProps}
-              stroke={strokeColor}
-              strokeWidth={15}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-            />
-          </Svg>
-        </Animated.View>
+      <View style={{ width: size, height: size, overflow: 'visible' as const }}>
+        {/* Behind-layer accessories (e.g. headphones) */}
+        {behind.map((acc, i) => (
+          <Image key={`behind-${i}`} source={acc.image} style={acc.position ? {
+            position: 'absolute',
+            width: size * acc.position.scale,
+            height: size * acc.position.scale,
+            top: (acc.position.y - 0.5) * size + (size - size * acc.position.scale) / 2,
+            left: (acc.position.x - 0.5) * size + (size - size * acc.position.scale) / 2,
+            transform: [{ rotate: `${acc.position.rotation}deg` }],
+          } : accessoryStyle} />
+        ))}
+
+        {/* Face circle */}
+        <View
+          className="bg-background border-primary/20 text-foreground"
+          style={{
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            alignItems: "center",
+            justifyContent: "center",
+            borderWidth: 1,
+          }}
+        >
+          <Animated.View style={breatheStyle}>
+            <Svg
+              width={size * 0.95}
+              height={size * 0.95}
+              viewBox="35 35 250 250"
+            >
+              {/* Left brow */}
+              <AnimatedPath
+                animatedProps={leftBrowProps}
+                stroke={strokeColor}
+                strokeWidth={15}
+                strokeLinecap="round"
+                fill="none"
+              />
+
+              {/* Left eye */}
+              <AnimatedEllipse
+                animatedProps={leftEyeProps}
+                fill={strokeColor}
+              />
+
+              {/* Right eye */}
+              <AnimatedEllipse
+                animatedProps={rightEyeProps}
+                fill={strokeColor}
+              />
+
+              {/* Nose + right brow */}
+              <AnimatedPath
+                animatedProps={noseBrowProps}
+                stroke={strokeColor}
+                strokeWidth={15}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
+            </Svg>
+          </Animated.View>
+        </View>
+
+        {/* Front-layer accessories (e.g. hat, glasses, tie) */}
+        {front.map((acc, i) => (
+          <Image key={`front-${i}`} source={acc.image} style={acc.position ? {
+            position: 'absolute',
+            width: size * acc.position.scale,
+            height: size * acc.position.scale,
+            top: (acc.position.y - 0.5) * size + (size - size * acc.position.scale) / 2,
+            left: (acc.position.x - 0.5) * size + (size - size * acc.position.scale) / 2,
+            transform: [{ rotate: `${acc.position.rotation}deg` }],
+          } : accessoryStyle} />
+        ))}
       </View>
 
       {showLabel && (
-        <Text style={{ fontSize: 10, color: colors.mutedForeground, marginTop: 8, textTransform: 'uppercase', letterSpacing: 3, fontWeight: '700' }}>
+        <Text className="text-muted-foreground" style={{ fontSize: 10, marginTop: 8, textTransform: 'uppercase', letterSpacing: 3, fontWeight: '700' }}>
           {expression}
         </Text>
       )}