@alia.onl/sdk 1.0.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@alia.onl/sdk",
+  "version": "1.0.0",
+  "description": "Alia AI chat SDK — reusable bottom sheet chat component for Oxy apps",
+  "main": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "@oxyhq/services": ">=6.0.0",
+    "expo-blur": "*",
+    "react-native-reanimated": ">=3",
+    "react-native-gesture-handler": ">=2",
+    "react-native-safe-area-context": ">=4",
+    "react-native-keyboard-controller": ">=1"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/components/AliaChatInput.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import {
+  View,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  Platform,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAliaColors } from '../theme';
+
+interface AliaChatInputProps {
+  onSend: (text: string) => void;
+  isStreaming: boolean;
+}
+
+export function AliaChatInput({ onSend, isStreaming }: AliaChatInputProps) {
+  const [input, setInput] = useState('');
+  const colors = useAliaColors();
+  const insets = useSafeAreaInsets();
+  const isDark = colors.background === '#000000';
+
+  const canSend = input.trim().length > 0 && !isStreaming;
+
+  const handleSend = () => {
+    if (!canSend) return;
+    onSend(input.trim());
+    setInput('');
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderTopColor: colors.border,
+          paddingBottom: Math.max(insets.bottom, 12),
+        },
+      ]}
+    >
+      <TextInput
+        style={[
+          styles.input,
+          {
+            color: colors.text,
+            backgroundColor: isDark ? colors.inputBackground : colors.card,
+          },
+        ]}
+        value={input}
+        onChangeText={setInput}
+        placeholder="Ask Alia..."
+        placeholderTextColor={colors.secondaryText}
+        multiline
+        maxLength={2000}
+        onSubmitEditing={handleSend}
+        blurOnSubmit={false}
+        editable={!isStreaming}
+      />
+      <TouchableOpacity
+        style={[
+          styles.sendButton,
+          { backgroundColor: colors.tint },
+          !canSend && { opacity: 0.4 },
+        ]}
+        onPress={handleSend}
+        disabled={!canSend}
+        activeOpacity={0.7}
+      >
+        {isStreaming ? (
+          <ActivityIndicator size="small" color="#FFFFFF" />
+        ) : (
+          <ArrowUpIcon />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+/** Simple arrow-up SVG as a component to avoid icon library dependency */
+function ArrowUpIcon() {
+  // Use a unicode character for simplicity — works cross-platform
+  return (
+    <View style={styles.arrowIcon}>
+      {Platform.OS === 'web' ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 19V5M5 12l7-7 7 7" />
+        </svg>
+      ) : (
+        // React Native fallback — simple Text arrow
+        <View style={styles.arrowIconInner}>
+          <View style={[styles.arrowStem, { backgroundColor: '#FFFFFF' }]} />
+          <View style={[styles.arrowHead, { borderColor: '#FFFFFF' }]} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    gap: 8,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  input: {
+    flex: 1,
+    fontSize: 15,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 20,
+    maxHeight: 100,
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  arrowIcon: {
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  arrowIconInner: {
+    alignItems: 'center',
+  },
+  arrowStem: {
+    width: 2,
+    height: 12,
+    borderRadius: 1,
+  },
+  arrowHead: {
+    position: 'absolute',
+    top: -1,
+    width: 10,
+    height: 10,
+    borderTopWidth: 2.5,
+    borderLeftWidth: 2.5,
+    transform: [{ rotate: '45deg' }],
+  },
+});

package/src/components/AliaChatMessageList.tsx

@@ -0,0 +1,211 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { BlurView } from 'expo-blur';
+import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import { useAliaColors } from '../theme';
+import type { ChatMessage, ToolInvocation } from '../types';
+
+interface AliaChatMessageListProps {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  scrollOffsetY: Animated.SharedValue<number>;
+}
+
+function ToolStatus({ 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')
+    .replace(/^./, (s) => s.toUpperCase())
+    .trim();
+
+  const label =
+    invocation.state === 'call'
+      ? `${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>
+      )}
+      <Text style={[styles.toolLabel, { color: colors.secondaryText }]}>{label}</Text>
+    </View>
+  );
+}
+
+function UserBubble({ content }: { content: string }) {
+  const colors = useAliaColors();
+  const isDark = colors.background === '#000000';
+
+  return (
+    <View style={styles.userMessage}>
+      <View style={[styles.userBubble, { borderColor: colors.border }]}>
+        <BlurView
+          intensity={60}
+          tint={isDark ? 'dark' : 'light'}
+          style={StyleSheet.absoluteFill}
+        />
+        <Text style={[styles.userText, { color: colors.text }]}>{content}</Text>
+      </View>
+    </View>
+  );
+}
+
+function AssistantMessage({
+  message,
+  isFirst,
+  isStreamingThis,
+}: {
+  message: ChatMessage;
+  isFirst: boolean;
+  isStreamingThis: boolean;
+}) {
+  const colors = useAliaColors();
+
+  return (
+    <View style={styles.assistantMessage}>
+      {/* Tool invocations */}
+      {message.toolInvocations?.map((tool, i) => (
+        <ToolStatus key={`${tool.toolName}-${i}`} invocation={tool} />
+      ))}
+
+      {/* Text content */}
+      {(message.content || isStreamingThis) && (
+        <Text style={[styles.assistantText, { color: colors.text }]}>
+          {message.content || (isStreamingThis ? '\u2758' : '')}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+export function AliaChatMessageList({
+  messages,
+  isStreaming,
+  scrollOffsetY,
+}: AliaChatMessageListProps) {
+  const scrollRef = useRef<Animated.ScrollView>(null);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (messages.length > 0) {
+      const timer = setTimeout(() => {
+        (scrollRef.current as any)?.scrollToEnd?.({ animated: true });
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [messages]);
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollOffsetY.value = event.contentOffset.y;
+    },
+  });
+
+  return (
+    <Animated.ScrollView
+      ref={scrollRef}
+      style={styles.scrollView}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      onScroll={scrollHandler}
+      scrollEventThrottle={16}
+    >
+      {messages
+        .filter((m) => m.role !== 'system')
+        .map((msg, i, arr) => {
+          if (msg.role === 'user') {
+            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}
+            />
+          );
+        })}
+    </Animated.ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    padding: 16,
+    paddingTop: 4,
+    flexGrow: 1,
+  },
+
+  // User bubble — frosted glass
+  userMessage: {
+    alignItems: 'flex-end',
+    marginBottom: 12,
+  },
+  userBubble: {
+    maxWidth: '85%',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 24,
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+  },
+  userText: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+
+  // Assistant message — no bubble
+  assistantMessage: {
+    alignItems: 'flex-start',
+    marginBottom: 12,
+  },
+  assistantText: {
+    fontSize: 15,
+    lineHeight: 24,
+  },
+
+  // Tool status
+  toolStatus: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 6,
+    paddingVertical: 2,
+  },
+  toolDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    ...Platform.select({
+      web: {} as any,
+      default: {},
+    }),
+  },
+  toolCheckmark: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  toolLabel: {
+    fontSize: 13,
+  },
+});

package/src/components/AliaChatSheet.tsx

@@ -0,0 +1,394 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useCallback,
+  useState,
+  useEffect,
+  useMemo,
+} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Pressable,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useKeyboardHandler } from 'react-native-keyboard-controller';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  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 { useAliaColors } from '../theme';
+import type { AliaChatSuggestion } from '../types';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const SPRING_CONFIG = {
+  damping: 25,
+  stiffness: 300,
+  mass: 0.8,
+};
+
+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;
+}
+
+export interface AliaChatSheetRef {
+  present: () => void;
+  dismiss: () => void;
+}
+
+export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
+  ({ clientContext, suggestions = [], model, apiUrl }, ref) => {
+    const colors = useAliaColors();
+    const isDark = colors.background === '#000000';
+    const insets = useSafeAreaInsets();
+
+    // Chat
+    const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
+    const { messages, send, isStreaming, clear } = useAliaChat(chatOptions);
+
+    // Sheet visibility
+    const [rendered, setRendered] = useState(false);
+    const hasClosedRef = useRef(false);
+    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Reanimated shared values
+    const translateY = useSharedValue(SCREEN_HEIGHT);
+    const backdropOpacity = useSharedValue(0);
+    const scrollOffsetY = useSharedValue(0);
+    const allowPanClose = useSharedValue(true);
+    const keyboardHeight = useSharedValue(0);
+    const panContext = useSharedValue({ y: 0 });
+
+    useKeyboardHandler(
+      {
+        onMove: (e) => {
+          'worklet';
+          keyboardHeight.value = e.height;
+        },
+        onEnd: (e) => {
+          'worklet';
+          keyboardHeight.value = e.height;
+        },
+      },
+      [],
+    );
+
+    // Dismiss helpers
+    const finishDismiss = useCallback(() => {
+      if (hasClosedRef.current) return;
+      hasClosedRef.current = true;
+      setRendered(false);
+    }, []);
+
+    const handlePresent = useCallback(() => {
+      hasClosedRef.current = false;
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      setRendered(true);
+      backdropOpacity.value = withTiming(1, { duration: 250 });
+      translateY.value = withSpring(0, SPRING_CONFIG);
+    }, []);
+
+    const handleDismiss = useCallback(() => {
+      backdropOpacity.value = withTiming(0, { duration: 250 }, (finished) => {
+        if (finished) runOnJS(finishDismiss)();
+      });
+      translateY.value = withSpring(SCREEN_HEIGHT, {
+        ...SPRING_CONFIG,
+        stiffness: 250,
+      });
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = setTimeout(() => {
+        finishDismiss();
+        closeTimeoutRef.current = null;
+      }, 350);
+    }, [finishDismiss]);
+
+    useEffect(
+      () => () => {
+        if (closeTimeoutRef.current) {
+          clearTimeout(closeTimeoutRef.current);
+          closeTimeoutRef.current = null;
+        }
+      },
+      [],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({ present: handlePresent, dismiss: handleDismiss }),
+      [handlePresent, handleDismiss],
+    );
+
+    // Pan gesture for swipe-to-dismiss
+    const nativeGesture = useMemo(() => Gesture.Native(), []);
+
+    const panGesture = Gesture.Pan()
+      .simultaneousWithExternalGesture(nativeGesture)
+      .onStart(() => {
+        'worklet';
+        panContext.value = { y: translateY.value };
+        allowPanClose.value = scrollOffsetY.value <= 8;
+      })
+      .onUpdate((event) => {
+        'worklet';
+        if (!allowPanClose.value) return;
+        if (event.translationY > 0 && scrollOffsetY.value > 8) return;
+        const newY = panContext.value.y + event.translationY;
+        translateY.value = Math.max(0, newY);
+      })
+      .onEnd((event) => {
+        'worklet';
+        if (!allowPanClose.value) return;
+        const velocity = event.velocityY;
+        const distance = translateY.value;
+        const closeThreshold = Math.max(140, SCREEN_HEIGHT * 0.25);
+        const shouldClose =
+          velocity > 900 || (distance > closeThreshold && velocity > -300);
+
+        if (shouldClose) {
+          translateY.value = withSpring(SCREEN_HEIGHT, {
+            ...SPRING_CONFIG,
+            velocity,
+          });
+          backdropOpacity.value = withTiming(0, { duration: 250 }, (finished) => {
+            if (finished) runOnJS(finishDismiss)();
+          });
+        } else {
+          translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
+        }
+      });
+
+    // Animated styles
+    const backdropAnimStyle = useAnimatedStyle(() => ({
+      opacity: backdropOpacity.value,
+    }));
+
+    const sheetAnimStyle = useAnimatedStyle(() => ({
+      transform: [{ translateY: translateY.value - keyboardHeight.value }],
+    }));
+
+    const sheetMaxHeightStyle = useAnimatedStyle(
+      () => ({
+        maxHeight: SCREEN_HEIGHT - keyboardHeight.value - insets.top,
+      }),
+      [insets.top],
+    );
+
+    const showSuggestions = messages.length === 0 && suggestions.length > 0;
+
+    if (!rendered) return null;
+
+    return (
+      <Modal
+        visible={rendered}
+        transparent
+        animationType="none"
+        statusBarTranslucent
+        onRequestClose={handleDismiss}
+      >
+        <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+          {/* Backdrop */}
+          <Animated.View style={[styles.backdrop, backdropAnimStyle]}>
+            <Pressable style={StyleSheet.absoluteFill} onPress={handleDismiss} />
+          </Animated.View>
+
+          {/* Sheet */}
+          <GestureDetector gesture={panGesture}>
+            <Animated.View
+              style={[
+                styles.sheet,
+                { backgroundColor: colors.background },
+                sheetAnimStyle,
+                sheetMaxHeightStyle,
+              ]}
+            >
+              {/* Drag handle */}
+              <View style={styles.dragHandle}>
+                <View
+                  style={[
+                    styles.dragHandlePill,
+                    { backgroundColor: isDark ? '#444' : '#C7C7CC' },
+                  ]}
+                />
+              </View>
+
+              {/* Header */}
+              <View style={styles.header}>
+                <View style={styles.headerLeft}>
+                  <View style={[styles.aliaAvatar, { backgroundColor: colors.tint }]}>
+                    <Text style={styles.aliaAvatarText}>A</Text>
+                  </View>
+                  <Text style={[styles.headerTitle, { color: colors.text }]}>
+                    Alia
+                  </Text>
+                </View>
+                <View style={styles.headerRight}>
+                  {messages.length > 0 && (
+                    <TouchableOpacity onPress={clear} style={styles.clearButton}>
+                      <Text
+                        style={[
+                          styles.clearText,
+                          { color: colors.secondaryText },
+                        ]}
+                      >
+                        Clear
+                      </Text>
+                    </TouchableOpacity>
+                  )}
+                  <TouchableOpacity
+                    onPress={handleDismiss}
+                    style={styles.closeButton}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                  >
+                    <Text
+                      style={{
+                        fontSize: 18,
+                        fontWeight: '600',
+                        color: colors.icon,
+                      }}
+                    >
+                      {'\u2715'}
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+
+              {/* Suggestions or Messages */}
+              <GestureDetector gesture={nativeGesture}>
+                <View style={styles.chatArea}>
+                  {showSuggestions ? (
+                    <AliaChatSuggestions
+                      suggestions={suggestions}
+                      onSelect={send}
+                    />
+                  ) : (
+                    <AliaChatMessageList
+                      messages={messages}
+                      isStreaming={isStreaming}
+                      scrollOffsetY={scrollOffsetY}
+                    />
+                  )}
+                </View>
+              </GestureDetector>
+
+              {/* Input */}
+              <AliaChatInput onSend={send} isStreaming={isStreaming} />
+            </Animated.View>
+          </GestureDetector>
+        </GestureHandlerRootView>
+      </Modal>
+    );
+  },
+);
+
+AliaChatSheet.displayName = 'AliaChatSheet';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  sheet: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: 'hidden',
+    maxWidth: 600,
+    alignSelf: 'center',
+    ...Platform.select({
+      web: {
+        marginHorizontal: 'auto',
+        boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
+      } as any,
+      default: { elevation: 16 },
+    }),
+  },
+  dragHandle: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 4,
+  },
+  dragHandlePill: {
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    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',
+  },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  clearButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  clearText: {
+    fontSize: 14,
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+  },
+  chatArea: {
+    flex: 1,
+  },
+});

package/src/components/AliaChatSuggestions.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useAliaColors } from '../theme';
+import type { AliaChatSuggestion } from '../types';
+
+interface AliaChatSuggestionsProps {
+  suggestions: AliaChatSuggestion[];
+  onSelect: (prompt: string) => void;
+}
+
+export function AliaChatSuggestions({ suggestions, onSelect }: AliaChatSuggestionsProps) {
+  const colors = useAliaColors();
+  const isDark = colors.background === '#000000';
+
+  if (suggestions.length === 0) return null;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.greeting, { color: colors.tint }]}>
+        How can I help you today?
+      </Text>
+      <View style={styles.list}>
+        {suggestions.map((suggestion, i) => (
+          <TouchableOpacity
+            key={i}
+            style={[
+              styles.chip,
+              { backgroundColor: isDark ? colors.card : colors.card },
+            ]}
+            onPress={() => onSelect(suggestion.prompt)}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.chipText, { color: colors.text }]}>
+              {suggestion.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+  },
+  greeting: {
+    fontSize: 24,
+    fontWeight: '600',
+    lineHeight: 32,
+    marginBottom: 20,
+    paddingHorizontal: 4,
+  },
+  list: {
+    gap: 8,
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 16,
+  },
+  chipText: {
+    fontSize: 14,
+    flex: 1,
+  },
+});

package/src/hooks/useAliaChat.ts

@@ -0,0 +1,270 @@
+import { useState, useRef, useCallback } from 'react';
+import { useOxy } from '@oxyhq/services';
+import type { ChatMessage, ToolInvocation } from '../types';
+
+const API_URL = process.env.EXPO_PUBLIC_API_URL;
+
+export interface UseAliaChatOptions {
+  /** Alia API base URL (default: EXPO_PUBLIC_API_URL) */
+  apiUrl?: string;
+  /** Alia model to use (default: 'alia-v1') */
+  model?: string;
+  /** App context injected as system message so Alia knows which app the user is in */
+  clientContext?: string;
+  /** Access token override — if not provided, fetched from useOxy() */
+  accessToken?: string;
+}
+
+export interface UseAliaChatReturn {
+  messages: ChatMessage[];
+  send: (text: string) => void;
+  isStreaming: boolean;
+  clear: () => void;
+  error: string | null;
+}
+
+let nextId = 0;
+function generateId(): string {
+  return `msg-${Date.now()}-${nextId++}`;
+}
+
+/**
+ * SSE streaming chat hook for Alia.
+ *
+ * Sends messages to Alia's /v1/chat/completions endpoint and streams
+ * responses back, including tool invocations.
+ */
+export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn {
+  const {
+    apiUrl = API_URL,
+    model = 'alia-v1',
+    clientContext,
+    accessToken: accessTokenProp,
+  } = options;
+
+  const { oxyServices } = useOxy();
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const getToken = useCallback((): string | null => {
+    if (accessTokenProp) return accessTokenProp;
+    return oxyServices.httpService.getAccessToken();
+  }, [accessTokenProp, oxyServices]);
+
+  const send = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || isStreaming) return;
+
+      const token = getToken();
+      if (!token) {
+        setError('Not authenticated');
+        return;
+      }
+
+      setError(null);
+
+      // Add user message
+      const userMsg: ChatMessage = {
+        id: generateId(),
+        role: 'user',
+        content: trimmed,
+        createdAt: Date.now(),
+      };
+
+      // Prepare assistant placeholder
+      const assistantMsg: ChatMessage = {
+        id: generateId(),
+        role: 'assistant',
+        content: '',
+        toolInvocations: [],
+        createdAt: Date.now(),
+      };
+
+      setMessages((prev) => [...prev, userMsg, assistantMsg]);
+      setIsStreaming(true);
+
+      // Build messages payload for the API
+      const apiMessages: Array<{ role: string; content: string }> = [];
+
+      // System context (tells Alia which app the user is in)
+      if (clientContext) {
+        apiMessages.push({ role: 'system', content: clientContext });
+      }
+
+      // Previous conversation history
+      for (const msg of messages) {
+        if (msg.role === 'system') continue;
+        apiMessages.push({ role: msg.role, content: msg.content });
+      }
+
+      // New user message
+      apiMessages.push({ role: 'user', content: trimmed });
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      try {
+        const response = await fetch(`${apiUrl}/v1/chat/completions`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            model,
+            messages: apiMessages,
+            stream: true,
+          }),
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          const body = await response.text().catch(() => '');
+          throw new Error(`API error ${response.status}: ${body.slice(0, 200)}`);
+        }
+
+        // Non-streaming fallback
+        if (!response.body || typeof response.body.getReader !== 'function') {
+          const json = await response.json();
+          const content = json.choices?.[0]?.message?.content ?? '';
+          setMessages((prev) => {
+            const updated = [...prev];
+            const last = updated[updated.length - 1];
+            if (last?.role === 'assistant') {
+              updated[updated.length - 1] = { ...last, content };
+            }
+            return updated;
+          });
+          return;
+        }
+
+        // Stream SSE
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let accumulatedContent = '';
+        const toolInvocations: ToolInvocation[] = [];
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() ?? '';
+
+            for (const line of lines) {
+              const trimmedLine = line.trim();
+              if (!trimmedLine || !trimmedLine.startsWith('data: ')) continue;
+              const data = trimmedLine.slice(6);
+              if (data === '[DONE]') continue;
+
+              try {
+                const parsed = JSON.parse(data);
+
+                // Standard content delta
+                const delta = parsed.choices?.[0]?.delta?.content;
+                if (delta) {
+                  accumulatedContent += delta;
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const last = updated[updated.length - 1];
+                    if (last?.role === 'assistant') {
+                      updated[updated.length - 1] = {
+                        ...last,
+                        content: accumulatedContent,
+                        toolInvocations: toolInvocations.length > 0 ? [...toolInvocations] : undefined,
+                      };
+                    }
+                    return updated;
+                  });
+                }
+
+                // Alia tool call event
+                if (parsed.type === 'alia.tool_call') {
+                  toolInvocations.push({
+                    toolName: parsed.tool || 'unknown',
+                    state: 'call',
+                    args: parsed.args,
+                  });
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const last = updated[updated.length - 1];
+                    if (last?.role === 'assistant') {
+                      updated[updated.length - 1] = {
+                        ...last,
+                        toolInvocations: [...toolInvocations],
+                      };
+                    }
+                    return updated;
+                  });
+                }
+
+                // Alia tool result event
+                if (parsed.type === 'alia.tool_result') {
+                  const existing = toolInvocations.find(
+                    (t) => t.toolName === parsed.tool && t.state === 'call',
+                  );
+                  if (existing) {
+                    existing.state = 'result';
+                    existing.result = parsed.result;
+                  }
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const last = updated[updated.length - 1];
+                    if (last?.role === 'assistant') {
+                      updated[updated.length - 1] = {
+                        ...last,
+                        toolInvocations: [...toolInvocations],
+                      };
+                    }
+                    return updated;
+                  });
+                }
+              } catch {
+                // Skip malformed chunks
+              }
+            }
+          }
+        } finally {
+          reader.releaseLock();
+        }
+      } catch (err: any) {
+        if (err?.name === 'AbortError') return;
+        const errorMessage = err?.message || 'Something went wrong';
+        setError(errorMessage);
+        setMessages((prev) => {
+          const updated = [...prev];
+          const last = updated[updated.length - 1];
+          if (last?.role === 'assistant' && !last.content) {
+            updated[updated.length - 1] = {
+              ...last,
+              content: "I'm having trouble connecting right now. Please try again.",
+            };
+          }
+          return updated;
+        });
+      } finally {
+        setIsStreaming(false);
+        abortRef.current = null;
+      }
+    },
+    [isStreaming, messages, getToken, apiUrl, model, clientContext],
+  );
+
+  const clear = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setMessages([]);
+    setIsStreaming(false);
+    setError(null);
+  }, []);
+
+  return { messages, send, isStreaming, clear, error };
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+// @alia.onl/sdk — Alia AI Chat SDK
+// Reusable bottom sheet chat component for any Oxy ecosystem app
+
+// Main component
+export { AliaChatSheet } from './components/AliaChatSheet';
+export type { AliaChatSheetProps, AliaChatSheetRef } from './components/AliaChatSheet';
+
+// Hook (for custom UIs)
+export { useAliaChat } from './hooks/useAliaChat';
+export type { UseAliaChatOptions, UseAliaChatReturn } from './hooks/useAliaChat';
+
+// Types
+export type { ChatMessage, ToolInvocation, AliaChatSuggestion } from './types';
+
+// Theme
+export { useAliaColors } from './theme';
+export type { AliaColors } from './theme';

package/src/theme.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+
+const COLORS = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    card: '#F2F2F7',
+    inputBackground: '#F5F5F5',
+    border: '#E5E5EA',
+    secondaryText: '#8E8E93',
+    icon: '#687076',
+    tint: '#0a7ea4',
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#000000',
+    card: '#1C1C1E',
+    inputBackground: '#333333',
+    border: '#2C2C2E',
+    secondaryText: '#8E8E93',
+    icon: '#9BA1A6',
+    tint: '#fff',
+  },
+} as const;
+
+export type AliaColors = (typeof COLORS)['light'];
+
+export function useAliaColors(): AliaColors {
+  const scheme = useColorScheme();
+  return useMemo(() => COLORS[scheme ?? 'light'], [scheme]);
+}

package/src/types.ts

@@ -0,0 +1,20 @@
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  toolInvocations?: ToolInvocation[];
+  createdAt: number;
+}
+
+export interface ToolInvocation {
+  toolName: string;
+  state: 'call' | 'result';
+  args?: Record<string, any>;
+  result?: any;
+}
+
+export interface AliaChatSuggestion {
+  label: string;
+  icon?: string;
+  prompt: string;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}