@alia.onl/sdk 1.0.0 → 3.0.0

package/src/components/Reasoning.tsx

@@ -0,0 +1,154 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  withSequence,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useAliaColors } from '../theme';
+
+// Context
+type ReasoningContextType = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+};
+
+const ReasoningContext = createContext<ReasoningContextType | null>(null);
+
+function useReasoning() {
+  const context = useContext(ReasoningContext);
+  if (!context) throw new Error('useReasoning must be used within a Reasoning component');
+  return context;
+}
+
+// Props
+interface ReasoningProps {
+  isStreaming?: boolean;
+  defaultOpen?: boolean;
+  duration?: number;
+  children: React.ReactNode;
+}
+
+interface ReasoningTriggerProps {
+  onPress?: () => void;
+}
+
+interface ReasoningContentProps {
+  children: string;
+}
+
+// Reasoning wrapper — manages open/close state with auto-open during streaming
+export function Reasoning({ isStreaming = false, defaultOpen = true, duration: externalDuration, children }: ReasoningProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [duration, setDuration] = useState<number | undefined>(externalDuration);
+  const startTimeRef = useRef<number | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setIsOpen(true);
+      startTimeRef.current = Date.now();
+      intervalRef.current = setInterval(() => {
+        if (startTimeRef.current) {
+          setDuration(Math.floor((Date.now() - startTimeRef.current) / 1000));
+        }
+      }, 1000);
+    } else {
+      if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; }
+      if (startTimeRef.current !== null) {
+        const t = setTimeout(() => setIsOpen(false), 500);
+        return () => clearTimeout(t);
+      }
+    }
+    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+  }, [isStreaming]);
+
+  useEffect(() => { if (externalDuration !== undefined) setDuration(externalDuration); }, [externalDuration]);
+
+  return (
+    <ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
+      <View>{children}</View>
+    </ReasoningContext.Provider>
+  );
+}
+
+// Trigger — shows "Thinking for Xs..." label with pulsing icon
+export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, setIsOpen, duration } = useReasoning();
+  const colors = useAliaColors();
+  const pulseOpacity = useSharedValue(1);
+
+  useEffect(() => {
+    if (isStreaming) {
+      pulseOpacity.value = withRepeat(withSequence(withTiming(0.4, { duration: 800 }), withTiming(1, { duration: 800 })), -1, false);
+    } else {
+      cancelAnimation(pulseOpacity);
+      pulseOpacity.value = 1;
+    }
+  }, [isStreaming]);
+
+  const pulseStyle = useAnimatedStyle(() => ({ opacity: pulseOpacity.value }));
+
+  const message = isStreaming
+    ? (duration ? `Thinking for ${duration}s...` : 'Thinking...')
+    : (duration ? `Thought for ${duration} seconds` : 'Reasoning');
+
+  const handlePress = onPress || (() => setIsOpen(!isOpen));
+
+  return (
+    <Pressable onPress={handlePress} style={styles.trigger}>
+      <Animated.View style={isStreaming ? pulseStyle : undefined}>
+        <Text style={{ color: '#a855f7', fontSize: 14 }}>{'\u2726'}</Text>
+      </Animated.View>
+      <Text style={[styles.triggerText, { color: '#a855f7' }]}>{message}</Text>
+      <Text style={{ color: '#a855f7', fontSize: 14 }}>{onPress ? '\u203A' : (isOpen ? '\u25BE' : '\u25B8')}</Text>
+    </Pressable>
+  );
+}
+
+// Content — renders thinking text (collapsible)
+export function ReasoningContent({ children }: ReasoningContentProps) {
+  const { isOpen, isStreaming } = useReasoning();
+  const colors = useAliaColors();
+
+  if (!isOpen) return null;
+
+  // Lazy import AliaMarkdown to avoid circular dependency
+  const { AliaMarkdown } = require('./Markdown');
+
+  return (
+    <View style={[styles.contentWrapper, { backgroundColor: '#a855f710', borderColor: '#a855f730' }]}>
+      <View style={{ opacity: isStreaming ? 0.8 : 1 }}>
+        <AliaMarkdown content={children} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+  },
+  triggerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+  contentWrapper: {
+    borderRadius: 8,
+    padding: 12,
+    borderWidth: 1,
+    marginHorizontal: 12,
+    marginBottom: 12,
+  },
+});

package/src/components/ThinkingIndicator.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withSequence,
+  Easing,
+} from "react-native-reanimated";
+import { useAliaColors } from "../theme";
+
+const thinkingPhrases = [
+  "Thinking...",
+  "Crafting...",
+  "Pondering...",
+  "Computing...",
+  "Processing...",
+  "Analyzing...",
+  "Reasoning...",
+  "Cooking...",
+  "Brewing...",
+  "Conjuring...",
+];
+
+const workingPhrases = [
+  "Working...",
+  "Executing...",
+  "Running...",
+  "Building...",
+  "Creating...",
+  "Doing the thing...",
+];
+
+export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking?: boolean; statusText?: string }) {
+  const colors = useAliaColors();
+  const phrases = isWorking ? workingPhrases : thinkingPhrases;
+  const [phraseIndex, setPhraseIndex] = useState(() =>
+    Math.floor(Math.random() * phrases.length)
+  );
+  const [displayText, setDisplayText] = useState("");
+  const [isTyping, setIsTyping] = useState(true);
+
+  // Reset phraseIndex when isWorking changes (arrays have different lengths)
+  useEffect(() => {
+    setPhraseIndex(Math.floor(Math.random() * phrases.length));
+  }, [isWorking]);
+
+  // Spinning asterisk animation
+  const rotation = useSharedValue(0);
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 2000, easing: Easing.linear }),
+      -1
+    );
+  }, [rotation]);
+
+  const spinStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  // Pulsing cursor animation
+  const cursorOpacity = useSharedValue(1);
+  useEffect(() => {
+    cursorOpacity.value = withRepeat(
+      withSequence(
+        withTiming(0.2, { duration: 400 }),
+        withTiming(1, { duration: 400 })
+      ),
+      -1
+    );
+  }, [cursorOpacity]);
+
+  const cursorStyle = useAnimatedStyle(() => ({
+    opacity: cursorOpacity.value,
+  }));
+
+  // Typewriter effect — skipped when statusText is provided (real-time status shown directly)
+  useEffect(() => {
+    if (statusText) return;
+    const phrase = phrases[phraseIndex % phrases.length];
+    let charIndex = 0;
+    setIsTyping(true);
+    setDisplayText("");
+
+    const typeInterval = setInterval(() => {
+      if (charIndex < phrase.length) {
+        setDisplayText(phrase.slice(0, charIndex + 1));
+        charIndex++;
+      } else {
+        clearInterval(typeInterval);
+        setIsTyping(false);
+
+        // Wait then switch to next phrase
+        setTimeout(() => {
+          setPhraseIndex((prev) => (prev + 1) % phrases.length);
+        }, 1500);
+      }
+    }, 40);
+
+    return () => clearInterval(typeInterval);
+  }, [phraseIndex, phrases, statusText]);
+
+  const shownText = statusText || displayText;
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={spinStyle}>
+        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>✱</Text>
+      </Animated.View>
+      <View style={styles.textRow}>
+        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>{shownText}</Text>
+        {(statusText || isTyping) && (
+          <Animated.View style={cursorStyle}>
+            <Text style={{ fontSize: 16, color: colors.mutedForeground }}>|</Text>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 8,
+  },
+  textRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/ui/button.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Pressable, ActivityIndicator } from "react-native";
+import { TextClassContext } from "./text";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "group flex items-center justify-center rounded-xl web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary web:hover:opacity-90 active:opacity-90",
+        destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+        outline:
+          "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+        ghost:
+          "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
+        pill: "text-primary-foreground rounded-full bg-black web:hover:opacity-90 active:opacity-90",
+      },
+      size: {
+        default: "h-9 px-3.5 py-2 native:h-11 native:px-4",
+        sm: "h-8 rounded-lg px-2.5",
+        lg: "h-10 rounded-xl px-6 native:h-12",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonTextVariants = cva(
+  "web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "group-active:text-accent-foreground",
+        secondary:
+          "text-secondary-foreground group-active:text-secondary-foreground",
+        ghost: "group-active:text-accent-foreground",
+        link: "text-primary group-active:underline",
+        pill: "text-primary-foreground",
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "native:text-lg",
+        icon: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants> & {
+    isLoading?: boolean;
+  };
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, isLoading, children, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        props.disabled && "web:pointer-events-none",
+        buttonTextVariants({ variant, size }),
+      )}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && "opacity-50 web:pointer-events-none",
+          isLoading && "web:pointer-events-none",
+          buttonVariants({ variant, size, className }),
+        )}
+        ref={ref}
+        role="button"
+        {...props}
+      >
+        {isLoading ? (
+          <ActivityIndicator
+            color={variant === "outline" ? "black" : "white"}
+          />
+        ) : (
+          children
+        )}
+      </Pressable>
+    </TextClassContext.Provider>
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/src/components/ui/chat-text-input.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+import {
+  TextInput,
+  Platform,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+  type NativeSyntheticEvent as RNSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+} from "react-native";
+import { cn } from "../../lib/utils";
+
+type ChatTextInputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
+  noFocus?: boolean;
+  onEnterPress?: () => void;
+  onCompletionKey?: (key: string) => boolean;
+  maxHeight?: number;
+  minHeight?: number;
+  onHeightChange?: (height: number) => void;
+  disableEnterToSubmit?: boolean;
+  disableAutoHeight?: boolean;
+  onImagePaste?: (files: File[]) => void;
+  fillContainer?: boolean;
+};
+
+const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
+  ({
+    className,
+    noFocus = false,
+    onEnterPress,
+    onCompletionKey,
+    onKeyPress,
+    maxHeight = 200,
+    minHeight = 44,
+    onContentSizeChange,
+    onHeightChange,
+    style,
+    disableEnterToSubmit = false,
+    disableAutoHeight = false,
+    onImagePaste,
+    fillContainer = false,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef<TextInput>(null);
+    const wrapperRef = React.useRef<View>(null);
+
+    React.useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+    // Attach paste event listener (web only)
+    React.useEffect(() => {
+      if (Platform.OS !== 'web' || !onImagePaste) return;
+
+      const handlePaste = (e: Event) => {
+        const clipboardEvent = e as ClipboardEvent;
+
+        // @ts-ignore - web-specific API
+        const activeElement = document.activeElement;
+        // @ts-ignore - web-specific API
+        const wrapper = wrapperRef.current;
+
+        // @ts-ignore - web-specific API
+        const isContained = wrapper && wrapper.contains(activeElement);
+
+        if (!isContained) return;
+
+        const items = clipboardEvent.clipboardData?.items;
+        if (!items) return;
+
+        const imageFiles: File[] = [];
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.type.indexOf('image') !== -1) {
+            const file = item.getAsFile();
+            if (file) {
+              imageFiles.push(file);
+            }
+          }
+        }
+
+        if (imageFiles.length > 0) {
+          clipboardEvent.preventDefault();
+          onImagePaste(imageFiles);
+        }
+      };
+
+      // @ts-ignore - web-specific API
+      document.addEventListener('paste', handlePaste);
+
+      return () => {
+        // @ts-ignore - web-specific API
+        document.removeEventListener('paste', handlePaste);
+      };
+    }, [onImagePaste]);
+
+    const handleKeyPress = (
+      e: NativeSyntheticEvent<TextInputKeyPressEventData>
+    ) => {
+      onKeyPress?.(e);
+
+      const key = e.nativeEvent.key;
+
+      if (onCompletionKey && (key === "ArrowUp" || key === "ArrowDown" || key === "Enter" || key === "Escape")) {
+        if (onCompletionKey(key)) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      if (key === "Enter" && !disableEnterToSubmit) {
+        // @ts-ignore - shiftKey exists on web
+        if (Platform.OS !== 'web' || !e.nativeEvent.shiftKey) {
+          e.preventDefault();
+          onEnterPress?.();
+        }
+      }
+    };
+
+    const handleContentSizeChange = (
+      e: RNSyntheticEvent<TextInputContentSizeChangeEventData>
+    ) => {
+      onContentSizeChange?.(e);
+    };
+
+    return (
+      <View
+        ref={wrapperRef}
+        style={{ width: '100%', ...(fillContainer && { flex: 1 }) }}
+        onLayout={(e) => onHeightChange?.(e.nativeEvent.layout.height)}
+      >
+        <TextInput
+          ref={inputRef}
+          className={cn(
+            "native:text-md native:leading-[1.25] rounded-xl border border-input bg-background px-3.5 text-base text-foreground file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:flex web:w-full web:py-2 lg:text-sm",
+            "web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+            !fillContainer && !props.multiline && "h-9",
+            fillContainer && "h-full",
+            noFocus && "web:focus-visible:ring-0 web:focus-visible:ring-offset-0",
+            props.editable === false && "opacity-50 web:cursor-not-allowed",
+            className
+          )}
+          placeholderClassName={cn("text-muted-foreground", props.placeholderClassName)}
+          onKeyPress={handleKeyPress}
+          onContentSizeChange={handleContentSizeChange}
+          scrollEnabled={fillContainer || props.multiline}
+          style={[
+            style,
+            !fillContainer && props.multiline && !disableAutoHeight && {
+              minHeight,
+              maxHeight,
+              overflow: 'auto' as any,
+              ...(Platform.OS === 'web' ? { fieldSizing: 'content' } : {}),
+            },
+            fillContainer && { flex: 1, height: '100%' },
+          ]}
+          {...props}
+        />
+      </View>
+    );
+  }
+);
+
+ChatTextInput.displayName = "ChatTextInput";
+
+export { ChatTextInput };

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,2 @@
+// Native: re-export zeego's native context menus
+export * from "zeego/dropdown-menu";