@alia.onl/sdk 3.0.0 → 3.1.1

package/src/components/AliaChatScreen.tsx

@@ -14,18 +14,15 @@
  */
 
 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 { AliaChatSuggestion } from '../types';
+import type { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 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 */
@@ -34,17 +31,24 @@ export interface AliaChatScreenProps {
   headerLeft?: React.ReactNode;
   /** Optional header right action (e.g., settings button) */
   headerRight?: React.ReactNode;
+  /** Welcome screen greeting */
+  welcomeGreeting?: string;
+  /** Welcome screen subtitle */
+  welcomeSubtitle?: string;
+  /** Welcome screen suggestions */
+  welcomeSuggestions?: WelcomeSuggestion[];
 }
 
 export function AliaChatScreen({
   clientContext,
-  suggestions = [],
   model,
   apiUrl,
   headerLeft,
   headerRight,
+  welcomeGreeting,
+  welcomeSubtitle,
+  welcomeSuggestions,
 }: AliaChatScreenProps) {
-  const colors = useAliaColors();
   const insets = useSafeAreaInsets();
   const contentRef = useRef<AliaChatContentRef>(null);
 
@@ -67,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}
@@ -89,44 +93,13 @@ export function AliaChatScreen({
       <AliaChatContent
         ref={contentRef}
         clientContext={clientContext}
-        suggestions={suggestions}
         model={model}
         apiUrl={apiUrl}
+        welcomeGreeting={welcomeGreeting}
+        welcomeSubtitle={welcomeSubtitle}
+        welcomeSuggestions={welcomeSuggestions}
       />
     </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

@@ -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,8 +30,7 @@ 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 { AliaChatSuggestion } from '../types';
+import type { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -43,12 +43,16 @@ const SPRING_CONFIG = {
 export interface AliaChatSheetProps {
   /** 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;
+  /** Welcome screen greeting */
+  welcomeGreeting?: string;
+  /** Welcome screen subtitle */
+  welcomeSubtitle?: string;
+  /** Welcome screen suggestions */
+  welcomeSuggestions?: WelcomeSuggestion[];
 }
 
 export interface AliaChatSheetRef {
@@ -57,9 +61,9 @@ export interface AliaChatSheetRef {
 }
 
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
-  ({ clientContext, suggestions = [], model, apiUrl }, ref) => {
-    const colors = useAliaColors();
-    const isDark = colors.isDark;
+  ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions }, ref) => {
+    const scheme = useColorScheme();
+    const isDark = scheme === 'dark';
     const insets = useSafeAreaInsets();
 
     // Content ref for reading state
@@ -233,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,
               ]}
@@ -254,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>
@@ -276,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>
@@ -294,10 +287,12 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                 <AliaChatContent
                   ref={contentRef}
                   clientContext={clientContext}
-                  suggestions={suggestions}
                   model={model}
                   apiUrl={apiUrl}
                   scrollOffsetY={scrollOffsetY}
+                  welcomeGreeting={welcomeGreeting}
+                  welcomeSubtitle={welcomeSubtitle}
+                  welcomeSuggestions={welcomeSuggestions}
                 />
               </GestureDetector>
             </Animated.View>
@@ -312,7 +307,7 @@ AliaChatSheet.displayName = 'AliaChatSheet';
 
 const styles = StyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0,0,0,0.5)',
   },
   sheet: {
@@ -355,10 +350,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 10,
   },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-  },
   headerRight: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -368,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>
       )}

package/src/components/AliaWelcomeMessage.tsx

@@ -0,0 +1,75 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { Text } from './ui/text';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import { AliaFace } from './AliaFace';
+import type { WelcomeSuggestion } from '../types';
+
+export type { WelcomeSuggestion };
+
+export interface AliaWelcomeMessageProps {
+  greeting: string;
+  subtitle?: string;
+  suggestions?: WelcomeSuggestion[];
+  onSuggestionPress?: (text: string) => void;
+  faceSize?: number;
+}
+
+export function AliaWelcomeMessage({
+  greeting,
+  subtitle,
+  suggestions = [],
+  onSuggestionPress,
+  faceSize = 64,
+}: AliaWelcomeMessageProps) {
+  return (
+    <View className="flex-1 items-center justify-center px-4">
+      <View className="w-full max-w-2xl">
+        {/* Face + Title */}
+        <View className="items-start mb-8">
+          <View className="mb-4">
+            <AliaFace size={faceSize} expression="Greeting" />
+          </View>
+          <View className="space-y-2">
+            <Text className="text-3xl font-bold tracking-tight text-foreground">
+              {greeting}
+            </Text>
+            {subtitle ? (
+              <Text className="text-xl font-medium text-muted-foreground">
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        {/* Suggestion Grid */}
+        {suggestions.length > 0 && (
+          <Animated.View entering={FadeIn.duration(400)}>
+            <View className="flex-row flex-wrap gap-2">
+              {suggestions.map((item) => (
+                <Pressable
+                  key={item.id}
+                  className="flex-1 min-w-[35%] flex-col items-start rounded-3xl border border-border overflow-hidden active:bg-muted/50"
+                  onPress={() => onSuggestionPress?.(item.description)}
+                >
+                  <BlurView intensity={60} tint="default" style={StyleSheet.absoluteFill} />
+                  <View className="p-4 w-full">
+                    <Text className="text-sm font-medium text-surface-foreground mb-1" numberOfLines={1}>
+                      {item.title}
+                    </Text>
+                    <Text
+                      className="text-xs text-muted-foreground line-clamp-1"
+                      numberOfLines={1}
+                    >
+                      {item.description}
+                    </Text>
+                  </View>
+                </Pressable>
+              ))}
+            </View>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+}