@alia.onl/sdk 2.0.0 → 3.1.0

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

package/src/components/ResearchProgressCard.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { View, Pressable } from 'react-native';
+import { Text } from './ui/text';
+import {
+  Search,
+  BookOpen,
+  CheckCircle,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Loader2,
+} from 'lucide-react-native';
+import { useAliaColors } from '../theme';
+import type { ResearchProgress } from '../types';
+
+interface ResearchProgressCardProps {
+  progress: ResearchProgress;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  decomposing: 'Planning research',
+  searching: 'Searching the web',
+  reading: 'Reading sources',
+  synthesizing: 'Synthesizing report',
+  follow_up: 'Follow-up research',
+  finalizing: 'Polishing report',
+  complete: 'Research complete',
+};
+
+const PHASE_ORDER = ['decomposing', 'searching', 'synthesizing', 'follow_up', 'finalizing', 'complete'];
+
+export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
+  const colors = useAliaColors();
+  const [showSources, setShowSources] = useState(false);
+  const [showQuestions, setShowQuestions] = useState(true);
+
+  const phaseIndex = PHASE_ORDER.indexOf(progress.phase || '');
+  const isComplete = progress.phase === 'complete' || progress.isComplete;
+
+  return (
+    <View className="mx-3 my-2 rounded-xl border border-border bg-card p-4 gap-3">
+      {/* Header */}
+      <View className="flex-row items-center gap-2">
+        <View className="w-8 h-8 rounded-full bg-primary/10 items-center justify-center">
+          {isComplete ? (
+            <CheckCircle size={16} color="#22c55e" />
+          ) : (
+            <Search size={16} color={colors.tint} />
+          )}
+        </View>
+        <View className="flex-1">
+          <Text className="text-sm font-semibold text-foreground">
+            Deep Research
+          </Text>
+          <Text className="text-xs text-muted-foreground">
+            {progress.message || PHASE_LABELS[progress.phase || ''] || 'Researching...'}
+          </Text>
+        </View>
+        {progress.sourcesFound !== undefined && (
+          <View className="bg-muted rounded-full px-2 py-0.5">
+            <Text className="text-[10px] text-muted-foreground">
+              {progress.sourcesFound} sources
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Phase progress */}
+      <View className="flex-row gap-1">
+        {PHASE_ORDER.map((phase, i) => (
+          <View
+            key={phase}
+            className="flex-1 h-1 rounded-full"
+            style={{
+              backgroundColor: i <= phaseIndex
+                ? (isComplete ? '#22c55e' : colors.tint)
+                : colors.muted,
+            }}
+          />
+        ))}
+      </View>
+
+      {/* Sub-questions */}
+      {progress.subQuestions && progress.subQuestions.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowQuestions(!showQuestions)}
+            className="flex-row items-center gap-1 mb-1"
+          >
+            <BookOpen size={12} color={colors.secondaryText} />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Research angles ({progress.subQuestions.length})
+            </Text>
+            {showQuestions ? (
+              <ChevronUp size={12} color={colors.secondaryText} />
+            ) : (
+              <ChevronDown size={12} color={colors.secondaryText} />
+            )}
+          </Pressable>
+          {showQuestions && (
+            <View className="gap-1 pl-4">
+              {progress.subQuestions.map((q, i) => (
+                <Text key={i} className="text-xs text-muted-foreground">
+                  {i + 1}. {q}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Current search query indicator */}
+      {progress.currentQuery && !isComplete && (
+        <View className="flex-row items-center gap-2 bg-muted/50 rounded-lg px-3 py-1.5">
+          <Loader2 size={12} color={colors.secondaryText} />
+          <Text className="text-xs text-muted-foreground flex-1" numberOfLines={1}>
+            {progress.currentQuery}
+          </Text>
+        </View>
+      )}
+
+      {/* Sources list (collapsed by default) */}
+      {progress.sources && progress.sources.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowSources(!showSources)}
+            className="flex-row items-center gap-1"
+          >
+            <ExternalLink size={12} color={colors.secondaryText} />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Sources ({progress.sources.length})
+            </Text>
+            {showSources ? (
+              <ChevronUp size={12} color={colors.secondaryText} />
+            ) : (
+              <ChevronDown size={12} color={colors.secondaryText} />
+            )}
+          </Pressable>
+          {showSources && (
+            <View className="gap-1 pl-4 mt-1">
+              {progress.sources.map((s) => (
+                <Text key={s.id} className="text-xs text-primary" numberOfLines={1}>
+                  [{s.id}] {s.title}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Search count */}
+      {progress.totalSearches !== undefined && isComplete && (
+        <Text className="text-[10px] text-muted-foreground text-right">
+          {progress.totalSearches} searches performed
+        </Text>
+      )}
+    </View>
+  );
+}

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";