@alia.onl/sdk 3.0.0 → 3.1.0

package/src/components/AliaChatScreen.tsx

@@ -19,13 +19,11 @@ 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,15 +32,23 @@ 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();
@@ -89,9 +95,11 @@ export function AliaChatScreen({
       <AliaChatContent
         ref={contentRef}
         clientContext={clientContext}
-        suggestions={suggestions}
         model={model}
         apiUrl={apiUrl}
+        welcomeGreeting={welcomeGreeting}
+        welcomeSubtitle={welcomeSubtitle}
+        welcomeSuggestions={welcomeSuggestions}
       />
     </View>
   );

package/src/components/AliaChatSheet.tsx

@@ -30,7 +30,7 @@ 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,7 +61,7 @@ export interface AliaChatSheetRef {
 }
 
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
-  ({ clientContext, suggestions = [], model, apiUrl }, ref) => {
+  ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions }, ref) => {
     const colors = useAliaColors();
     const isDark = colors.isDark;
     const insets = useSafeAreaInsets();
@@ -294,10 +298,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>

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>
+  );
+}

package/src/components/Markdown.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text, Platform, Linking } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { useAliaColors } from '../theme';
 
-function createRules(isDark: boolean, textColor: string, monoFont: string) {
+const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
+const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
+const SANS_FONT = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' })!;
+const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
+
+function createRules(isDark: boolean, textColor: string) {
   return {
     heading1: (node: any, children: any) => (
       <Text
@@ -16,7 +21,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading2: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -24,7 +29,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading3: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -32,7 +37,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading4: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -40,7 +45,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading5: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -48,7 +53,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading6: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -67,7 +72,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
             padding: 12,
           }}
         >
-          <Text style={{ fontSize: 13, fontFamily: monoFont }}>{children}</Text>
+          <Text style={{ fontSize: 13, fontFamily: MONO_FONT }}>{children}</Text>
         </View>
       ) : (
         <Text
@@ -77,7 +82,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
             paddingHorizontal: 4,
             paddingVertical: 1,
             fontSize: 13,
-            fontFamily: monoFont,
+            fontFamily: MONO_FONT,
             borderRadius: 3,
           }}
         >
@@ -93,8 +98,8 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, color: '#71717A' }}>{bullet}</Text>
-          <Text style={{ flex: 1, color: textColor }}>{children}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: '#71717A' }}>{bullet}</Text>
+          <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
     },
@@ -105,12 +110,12 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
     ),
     strong: (node: any, children: any) => (
-      <Text key={node.key} style={{ fontWeight: '600', color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     link: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline' }}
+        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline', ...BODY_TEXT }}
         onPress={() => {
           if (node.attributes?.href) Linking.openURL(node.attributes.href);
         }}
@@ -119,7 +124,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       </Text>
     ),
     paragraph: (node: any, children: any) => (
-      <Text key={node.key} style={{ marginBottom: 8, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     blockquote: (node: any, children: any) => (
       <View
@@ -157,63 +162,21 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
   };
 }
 
-export function AliaMarkdown({ content }: { content: string }) {
-  const colors = useAliaColors();
-  const isDark = colors.isDark;
-
-  const textColor = isDark ? '#ffffff' : '#0a0a0a';
-  const sansFont = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' });
-  const monoFont = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' });
-
-  const customRules = createRules(isDark, textColor, monoFont);
-
-  const markdownStyles = {
-    body: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    text: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    paragraph: {
-      marginTop: 0,
-      marginBottom: 8,
-    },
-    strong: {
-      fontWeight: '600' as const,
-    },
-    em: {
-      fontStyle: 'italic' as const,
-    },
-    s: {
-      textDecorationLine: 'line-through' as const,
-    },
-    bullet_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    ordered_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    bullet_list_content: {
-      flex: 1,
-    },
-    ordered_list_content: {
-      flex: 1,
-    },
+function createStyles(isDark: boolean, textColor: string, borderColor: string, mutedBg: string) {
+  return {
+    body: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    text: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    paragraph: { marginTop: 0, marginBottom: 8 },
+    strong: { fontWeight: '600' as const },
+    em: { fontStyle: 'italic' as const },
+    s: { textDecorationLine: 'line-through' as const },
+    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
+    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
+    bullet_list_content: { flex: 1 },
+    ordered_list_content: { flex: 1 },
     code_inline: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#27272a' : '#f4f4f5',
       borderWidth: 0,
       borderRadius: 3,
@@ -222,7 +185,7 @@ export function AliaMarkdown({ content }: { content: string }) {
     },
     code_block: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#18181b' : '#f4f4f5',
       borderWidth: 1,
       borderColor: isDark ? '#3f3f46' : '#e4e4e7',
@@ -231,58 +194,39 @@ export function AliaMarkdown({ content }: { content: string }) {
     },
     fence: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#18181b' : '#f4f4f5',
       borderWidth: 1,
       borderColor: isDark ? '#3f3f46' : '#e4e4e7',
       borderRadius: 6,
       padding: 12,
     },
-    table: {
-      borderWidth: 1,
-      borderColor: colors.border,
-      borderRadius: 6,
-      marginVertical: 8,
-    },
-    thead: {
-      backgroundColor: colors.muted,
-    },
-    th: {
-      flex: 1,
-      padding: 8,
-      fontWeight: '600' as const,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    td: {
-      flex: 1,
-      padding: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    tr: {
-      borderBottomWidth: 1,
-      borderColor: colors.border,
-      flexDirection: 'row' as const,
-    },
-    link: {
-      textDecorationLine: 'underline' as const,
-      color: isDark ? '#60a5fa' : '#2563eb',
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    hr: {
-      backgroundColor: isDark ? '#3f3f46' : '#d4d4d8',
-      height: 1,
-      marginVertical: 16,
-    },
+    table: { borderWidth: 1, borderColor, borderRadius: 6, marginVertical: 8 },
+    thead: { backgroundColor: mutedBg },
+    th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT },
+    td: { flex: 1, padding: 8, ...BODY_TEXT },
+    tr: { borderBottomWidth: 1, borderColor, flexDirection: 'row' as const },
+    link: { textDecorationLine: 'underline' as const, color: isDark ? '#60a5fa' : '#2563eb', ...BODY_TEXT },
+    hr: { backgroundColor: isDark ? '#3f3f46' : '#d4d4d8', height: 1, marginVertical: 16 },
     heading1: { fontSize: 18, fontWeight: '600' as const },
-    heading2: { fontSize: 16, fontWeight: '600' as const },
-    heading3: { fontSize: 16, fontWeight: '600' as const },
-    heading4: { fontSize: 16, fontWeight: '500' as const },
-    heading5: { fontSize: 16, fontWeight: '500' as const },
-    heading6: { fontSize: 16, fontWeight: '500' as const },
+    heading2: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading3: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading4: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading5: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading6: { ...HEADING_TEXT, fontWeight: '500' as const },
   };
+}
+
+export function AliaMarkdown({ content }: { content: string }) {
+  const colors = useAliaColors();
+  const isDark = colors.isDark;
+  const textColor = isDark ? '#ffffff' : '#0a0a0a';
+
+  const customRules = useMemo(() => createRules(isDark, textColor), [isDark]);
+  const markdownStyles = useMemo(
+    () => createStyles(isDark, textColor, colors.border, colors.muted),
+    [isDark, colors.border, colors.muted],
+  );
 
   return <Markdown rules={customRules} style={markdownStyles}>{content}</Markdown>;
 }

package/src/components/PlanPreviewCard.tsx

@@ -0,0 +1,76 @@
+import { View, Pressable } from 'react-native';
+import { Text } from './ui/text';
+import { Button } from './ui/button';
+import { Check, X, ListChecks } from 'lucide-react-native';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import type { PlanStep } from '../types';
+
+interface PlanPreviewCardProps {
+  steps: PlanStep[];
+  onApprove: () => void;
+  onReject: () => void;
+  approved?: boolean;
+  rejected?: boolean;
+}
+
+export function PlanPreviewCard({ steps, onApprove, onReject, approved, rejected }: PlanPreviewCardProps) {
+  if (approved) {
+    return (
+      <View className="flex-row items-center gap-1.5 py-1">
+        <Check size={12} className="text-green-500" />
+        <Text className="text-xs text-muted-foreground">Plan approved</Text>
+      </View>
+    );
+  }
+
+  if (rejected) {
+    return (
+      <View className="flex-row items-center gap-1.5 py-1">
+        <X size={12} className="text-red-500" />
+        <Text className="text-xs text-muted-foreground">Plan cancelled</Text>
+      </View>
+    );
+  }
+
+  return (
+    <Animated.View entering={FadeInUp.springify()}>
+      <View className="border border-border rounded-xl bg-card p-4 gap-3 my-2">
+        <View className="flex-row items-center gap-2">
+          <ListChecks size={16} className="text-foreground" />
+          <Text className="text-sm font-semibold text-foreground">Here's my plan</Text>
+        </View>
+
+        <View className="gap-2">
+          {steps.map((step, i) => (
+            <View key={i} className="flex-row items-start gap-2.5">
+              <View className="w-5 h-5 rounded-full bg-muted items-center justify-center mt-0.5">
+                <Text className="text-[10px] font-bold text-muted-foreground">{i + 1}</Text>
+              </View>
+              <View className="flex-1">
+                <Text className="text-[13px] font-medium text-foreground">{step.action}</Text>
+                {step.description ? (
+                  <Text className="text-xs text-muted-foreground">{step.description}</Text>
+                ) : null}
+              </View>
+            </View>
+          ))}
+        </View>
+
+        <View className="flex-row gap-2 pt-1">
+          <Button onPress={onApprove} size="sm" className="flex-1">
+            <View className="flex-row items-center gap-1.5">
+              <Check size={14} className="text-primary-foreground" />
+              <Text className="text-sm font-medium text-primary-foreground">Approve</Text>
+            </View>
+          </Button>
+          <Pressable
+            onPress={onReject}
+            className="flex-1 items-center justify-center py-2 rounded-lg active:opacity-70"
+          >
+            <Text className="text-sm text-muted-foreground">Cancel</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Animated.View>
+  );
+}