@alia.onl/sdk 10.1.1 → 11.0.0

package/src/components/ui/prompt-input/autocomplete.tsx

@@ -1,168 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import { View, Pressable } from "react-native";
-import { Text } from "../text";
-import { cn } from "../../../lib/utils";
-import { usePromptInput, type Completion } from "./context";
-
-export type PromptInputAutocompleteProps = {
-  enabled?: boolean;
-  position?: "top" | "bottom";
-  className?: string;
-};
-
-export function PromptInputAutocomplete({
-  enabled = true,
-  position = "top",
-  className,
-}: PromptInputAutocompleteProps) {
-  const { value, setValue, setHandleCompletionKey, useSuggestions, onSuggestionUsed } = usePromptInput();
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const selectedIndexRef = useRef(-1);
-  const completionsRef = useRef<Completion[]>([]);
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-
-  // If no useSuggestions hook is injected, autocomplete is disabled
-  const suggestionsResult = useSuggestions?.(debouncedQuery);
-  const apiResults = suggestionsResult?.data;
-
-  // Debounce the search query (200ms)
-  useEffect(() => {
-    if (!enabled || !useSuggestions) {
-      setDebouncedQuery('');
-      return;
-    }
-    const trimmed = value.trim();
-    if (!trimmed || trimmed.length < 2) {
-      setDebouncedQuery('');
-      return;
-    }
-    const timer = setTimeout(() => setDebouncedQuery(trimmed), 200);
-    return () => clearTimeout(timer);
-  }, [value, enabled, useSuggestions]);
-
-  // Map API results to completions with match highlighting
-  const completions = useMemo<Completion[]>(() => {
-    const trimmed = value.trim();
-    if (!trimmed || trimmed.length < 2 || !apiResults?.length) return [];
-
-    const lower = trimmed.toLowerCase();
-    const results: Completion[] = [];
-    const seen = new Set<string>();
-
-    for (const s of apiResults) {
-      if (results.length >= 6) break;
-      const textLower = s.text.toLowerCase();
-      if (seen.has(textLower)) continue;
-      seen.add(textLower);
-
-      const idx = textLower.indexOf(lower);
-      results.push({
-        text: s.text,
-        matchStart: idx !== -1 ? idx : 0,
-        matchEnd: idx !== -1 ? idx + trimmed.length : 0,
-        suggestionId: s.suggestionId,
-      });
-    }
-
-    return results;
-  }, [apiResults, value]);
-
-  // Keep refs in sync
-  useEffect(() => {
-    completionsRef.current = completions;
-  }, [completions]);
-
-  // Reset selection when completions change
-  useEffect(() => {
-    selectedIndexRef.current = -1;
-    setSelectedIndex(-1);
-  }, [completions]);
-
-  // Arrow key handler — stable callback using refs
-  const handleKey = useCallback((key: string): boolean => {
-    const items = completionsRef.current;
-    if (items.length === 0) return false;
-
-    if (key === "ArrowDown") {
-      const next = selectedIndexRef.current < items.length - 1
-        ? selectedIndexRef.current + 1
-        : 0;
-      selectedIndexRef.current = next;
-      setSelectedIndex(next);
-      return true;
-    }
-
-    if (key === "ArrowUp") {
-      const next = selectedIndexRef.current > 0
-        ? selectedIndexRef.current - 1
-        : items.length - 1;
-      selectedIndexRef.current = next;
-      setSelectedIndex(next);
-      return true;
-    }
-
-    if (key === "Enter") {
-      if (selectedIndexRef.current < 0) return false;
-      const item = items[selectedIndexRef.current];
-      if (item.suggestionId) onSuggestionUsed?.(item.suggestionId);
-      setValue(item.text);
-      return true;
-    }
-
-    if (key === "Escape") {
-      if (selectedIndexRef.current < 0) return false;
-      selectedIndexRef.current = -1;
-      setSelectedIndex(-1);
-      return true;
-    }
-
-    return false;
-  }, [setValue, onSuggestionUsed]);
-
-  // Register/unregister the key handler based on completions
-  useEffect(() => {
-    if (completions.length > 0) {
-      setHandleCompletionKey(() => handleKey);
-    } else {
-      setHandleCompletionKey(null);
-    }
-    return () => setHandleCompletionKey(null);
-  }, [completions.length, handleKey, setHandleCompletionKey]);
-
-  // If no suggestions hook or no completions, render nothing
-  if (!useSuggestions || completions.length === 0) return null;
-
-  return (
-    <View className={className}>
-      <View className={position === "bottom" ? "pt-0.5" : "pb-0.5"}>
-        {completions.map((item, index) => (
-          <Pressable
-            key={item.suggestionId || item.text}
-            onPress={() => {
-              if (item.suggestionId) {
-                onSuggestionUsed?.(item.suggestionId);
-              }
-              setValue(item.text);
-            }}
-            className={cn(
-              "px-3 py-1.5 rounded-lg active:bg-muted/50",
-              index === selectedIndex && "bg-muted"
-            )}
-          >
-            <Text className="text-sm leading-5" numberOfLines={1}>
-              <Text className="text-foreground">
-                {item.text.slice(0, item.matchStart)}
-              </Text>
-              <Text className="text-primary font-medium">
-                {item.text.slice(item.matchStart, item.matchEnd)}
-              </Text>
-              <Text className="text-foreground">
-                {item.text.slice(item.matchEnd)}
-              </Text>
-            </Text>
-          </Pressable>
-        ))}
-      </View>
-    </View>
-  );
-}

package/src/components/ui/prompt-input/context.tsx

@@ -1,71 +0,0 @@
-import React, { createContext, useContext } from "react";
-import type { TextInput as RNTextInput } from "react-native";
-
-export interface Attachment {
-  id: string;
-  uri: string;
-  type: "image" | "document";
-  name: string;
-  size: number;
-  mimeType: string;
-  isLoading?: boolean;
-}
-
-export interface Completion {
-  text: string;
-  matchStart: number;
-  matchEnd: number;
-  suggestionId?: string;
-}
-
-export type PromptInputContextType = {
-  isLoading: boolean;
-  value: string;
-  setValue: (value: string) => void;
-  maxHeight: number;
-  onSubmit?: () => void;
-  disabled?: boolean;
-  textareaRef: React.RefObject<RNTextInput | null>;
-  currentHeight: number;
-  setCurrentHeight: (height: number) => void;
-  isFullscreen: boolean;
-  onImagePaste?: (files: File[]) => void;
-  attachments: Attachment[];
-  addAttachment: (attachment: Attachment) => void;
-  removeAttachment: (id: string) => void;
-  updateAttachment: (id: string, updates: Partial<Attachment>) => void;
-  handleCompletionKey: ((key: string) => boolean) | null;
-  setHandleCompletionKey: React.Dispatch<React.SetStateAction<((key: string) => boolean) | null>>;
-  // Injectable autocomplete hooks
-  useSuggestions?: (query: string) => { data: Completion[] | undefined; isLoading: boolean };
-  onSuggestionUsed?: (suggestionId: string) => void;
-  // Injectable error handler (replaces toast)
-  onError?: (message: string) => void;
-};
-
-export const PromptInputContext = createContext<PromptInputContextType>({
-  isLoading: false,
-  value: "",
-  setValue: () => {},
-  maxHeight: 240,
-  onSubmit: undefined,
-  disabled: false,
-  textareaRef: React.createRef<RNTextInput>(),
-  currentHeight: 44,
-  setCurrentHeight: () => {},
-  isFullscreen: false,
-  attachments: [],
-  addAttachment: () => {},
-  removeAttachment: () => {},
-  updateAttachment: () => {},
-  handleCompletionKey: null,
-  setHandleCompletionKey: () => {},
-});
-
-export function usePromptInput() {
-  return useContext(PromptInputContext);
-}
-
-export function useIsFullscreen() {
-  return useContext(PromptInputContext).isFullscreen;
-}

package/src/components/ui/prompt-input/mic-button.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect } from "react";
-import { Pressable, ActivityIndicator } from "react-native";
-import Mic from "lucide-react-native/icons/mic";
-import MicOff from "lucide-react-native/icons/mic-off";
-import { cn } from "../../../lib/utils";
-import { useSpeechToText } from "../../../hooks/useSpeechToText";
-import { usePromptInput } from "./context";
-
-export type PromptInputMicButtonProps = {
-  className?: string;
-};
-
-export function PromptInputMicButton({ className }: PromptInputMicButtonProps) {
-  const { value, setValue, onError } = usePromptInput();
-  const stt = useSpeechToText();
-
-  useEffect(() => {
-    if (stt.error) {
-      if (onError) onError(stt.error);
-      else console.warn('[PromptInput] STT error:', stt.error);
-    }
-  }, [stt.error, onError]);
-
-  const handlePress = async () => {
-    if (stt.isRecording) {
-      const text = await stt.stopAndTranscribe();
-      if (text) {
-        setValue(value ? `${value} ${text}` : text);
-      }
-    } else if (!stt.isTranscribing) {
-      stt.startRecording();
-    }
-  };
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      disabled={stt.isTranscribing}
-      className={cn(
-        "h-8 w-8 rounded-full items-center justify-center active:opacity-70",
-        className
-      )}
-    >
-      {stt.isTranscribing ? (
-        <ActivityIndicator size="small" color="#6366f1" />
-      ) : stt.isRecording ? (
-        <MicOff size={16} color="#ef4444" />
-      ) : (
-        <Mic size={16} className="text-muted-foreground" />
-      )}
-    </Pressable>
-  );
-}

package/src/components/ui/prompt-input/prompt-input.tsx

@@ -1,279 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  View,
-  Pressable,
-  type TextInput as RNTextInput,
-  type ViewStyle,
-} from "react-native";
-import { KeyboardAvoidingView } from "../../../lib/keyboard";
-import Maximize2 from "lucide-react-native/icons/maximize-2";
-import Minimize2 from "lucide-react-native/icons/minimize-2";
-import { cn } from "../../../lib/utils";
-import { PromptInputContext, type Attachment, type Completion } from "./context";
-import { PromptInputTextarea } from "./textarea";
-import { PromptInputActions } from "./actions";
-import { PromptInputMicButton } from "./mic-button";
-import { PromptInputAutocomplete } from "./autocomplete";
-import { PromptInputAttachments } from "./attachments";
-import { PromptInputSubmitButton } from "./submit-button";
-import { PromptInputAddMenu } from "./add-menu";
-
-export type PromptInputProps = {
-  isLoading?: boolean;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  maxHeight?: number;
-  onSubmit?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-  onImagePaste?: (files: File[]) => void;
-  // Simple mode props (when no children)
-  placeholder?: string;
-  autocomplete?: boolean;
-  autocompletePosition?: "top" | "bottom";
-  // Shows the add menu as a standalone button to the left of the input box
-  leadingAddMenu?: boolean;
-  // Custom left-side actions (replaces default add menu in the actions bar)
-  actionsLeft?: React.ReactNode;
-  // Submit button props
-  onStop?: () => void;
-  emptyAction?: React.ReactNode;
-  // Controlled attachments (optional — uses internal state if omitted)
-  attachments?: Attachment[];
-  onAddAttachment?: (attachment: Attachment) => void;
-  onRemoveAttachment?: (id: string) => void;
-  onUpdateAttachment?: (id: string, updates: Partial<Attachment>) => void;
-  // Injectable autocomplete hooks
-  useSuggestions?: (query: string) => { data: Completion[] | undefined; isLoading: boolean };
-  onSuggestionUsed?: (suggestionId: string) => void;
-  // Injectable error handler (replaces toast)
-  onError?: (message: string) => void;
-} & Omit<React.ComponentProps<typeof View>, "children">;
-
-export function PromptInput({
-  className,
-  isLoading = false,
-  maxHeight = 240,
-  value,
-  onValueChange,
-  onSubmit,
-  children,
-  disabled = false,
-  onImagePaste,
-  placeholder,
-  autocomplete = false,
-  autocompletePosition = "top",
-  leadingAddMenu = false,
-  actionsLeft,
-  onStop,
-  emptyAction,
-  attachments: controlledAttachments,
-  onAddAttachment,
-  onRemoveAttachment,
-  onUpdateAttachment,
-  useSuggestions,
-  onSuggestionUsed,
-  onError,
-  ...props
-}: PromptInputProps) {
-  const [internalValue, setInternalValue] = useState(value || "");
-  const [currentHeight, setCurrentHeight] = useState(44);
-  const [showFullscreen, setShowFullscreen] = useState(false);
-  const [handleCompletionKey, setHandleCompletionKey] = useState<((key: string) => boolean) | null>(null);
-  const textareaRef = useRef<RNTextInput>(null);
-
-  // Internal attachment state (used when no controlled props)
-  const [internalAttachments, setInternalAttachments] = useState<Attachment[]>(
-    []
-  );
-  const attachments = controlledAttachments ?? internalAttachments;
-
-  const addAttachment = useCallback(
-    (a: Attachment) => {
-      if (onAddAttachment) {
-        onAddAttachment(a);
-      } else {
-        setInternalAttachments((prev) => [...prev, a]);
-      }
-    },
-    [onAddAttachment]
-  );
-
-  const removeAttachment = useCallback(
-    (id: string) => {
-      if (onRemoveAttachment) {
-        onRemoveAttachment(id);
-      } else {
-        setInternalAttachments((prev) => prev.filter((a) => a.id !== id));
-      }
-    },
-    [onRemoveAttachment]
-  );
-
-  const updateAttachment = useCallback(
-    (id: string, updates: Partial<Attachment>) => {
-      if (onUpdateAttachment) {
-        onUpdateAttachment(id, updates);
-      } else {
-        setInternalAttachments((prev) =>
-          prev.map((a) => (a.id === id ? { ...a, ...updates } : a))
-        );
-      }
-    },
-    [onUpdateAttachment]
-  );
-
-  const handleChange = (newValue: string) => {
-    setInternalValue(newValue);
-    onValueChange?.(newValue);
-  };
-
-  const handleSubmit = () => {
-    onSubmit?.();
-    // Clicking the send button (as opposed to pressing Enter) shifts DOM focus
-    // to the button on web — restore it so the user can keep typing.
-    textareaRef.current?.focus();
-    if (showFullscreen) setShowFullscreen(false);
-  };
-
-  useEffect(() => {
-    if (!showFullscreen) setCurrentHeight(44);
-  }, [showFullscreen]);
-
-  const showExpandIcon = currentHeight > 100;
-  const isSimpleMode = !children;
-
-  const contextValue = {
-    isLoading,
-    value: value ?? internalValue,
-    setValue: onValueChange ?? handleChange,
-    maxHeight,
-    onSubmit: handleSubmit,
-    disabled,
-    textareaRef,
-    currentHeight,
-    setCurrentHeight,
-    isFullscreen: showFullscreen,
-    onImagePaste,
-    attachments,
-    addAttachment,
-    removeAttachment,
-    updateAttachment,
-    handleCompletionKey,
-    setHandleCompletionKey,
-    useSuggestions,
-    onSuggestionUsed,
-    onError,
-  };
-
-  const content = isSimpleMode ? (
-    <>
-      <PromptInputAttachments />
-      <PromptInputTextarea
-        placeholder={placeholder}
-        className="min-h-[44px] text-base py-3"
-      />
-      <PromptInputActions className="flex-row items-center justify-between gap-2 mt-2 mb-1 px-3">
-        <View className="flex-row items-center gap-1.5">
-          {actionsLeft ?? <PromptInputAddMenu />}
-        </View>
-        <View className="flex-row items-center gap-1.5">
-          <PromptInputMicButton />
-          <PromptInputSubmitButton
-            isLoading={isLoading}
-            onStop={onStop}
-            emptyAction={emptyAction}
-          />
-        </View>
-      </PromptInputActions>
-    </>
-  ) : (
-    children
-  );
-
-  const inputBox = (
-    <Pressable
-      onPress={() => {
-        if (!disabled) textareaRef.current?.focus();
-      }}
-      disabled={disabled}
-    >
-      <View
-        className={cn(
-          "rounded-[24px] border border-border bg-background relative overflow-hidden",
-          disabled && "opacity-60",
-          className
-        )}
-        {...props}
-      >
-        {showExpandIcon && !disabled && (
-          <Pressable
-            onPress={() => setShowFullscreen(true)}
-            className="absolute top-2 right-2 z-10 bg-background rounded-full p-1.5 border border-border active:opacity-70"
-          >
-            <Maximize2 size={16} className="text-muted-foreground" />
-          </Pressable>
-        )}
-        {content}
-      </View>
-    </Pressable>
-  );
-
-  return (
-    <PromptInputContext.Provider value={contextValue}>
-      {autocomplete && autocompletePosition === "top" && !leadingAddMenu && (
-        <PromptInputAutocomplete position="top" />
-      )}
-
-      <KeyboardAvoidingView behavior="padding">
-        {leadingAddMenu ? (
-          <View className="flex-row items-end gap-2">
-            <PromptInputAddMenu
-              iconSize={20}
-              className="h-10 w-10 rounded-full border"
-            />
-            <View className="flex-1">
-              {autocomplete && autocompletePosition === "top" && (
-                <PromptInputAutocomplete position="top" />
-              )}
-              {inputBox}
-              {autocomplete && autocompletePosition === "bottom" && (
-                <PromptInputAutocomplete position="bottom" />
-              )}
-            </View>
-          </View>
-        ) : (
-          inputBox
-        )}
-      </KeyboardAvoidingView>
-
-      {autocomplete && autocompletePosition === "bottom" && !leadingAddMenu && (
-        <PromptInputAutocomplete position="bottom" />
-      )}
-
-      {showFullscreen && (
-        <View
-          style={{
-            // `position: 'fixed'` is a web-only value (NativeWind) not in RN's ViewStyle union.
-            position: "fixed" as unknown as ViewStyle["position"],
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 9998,
-          }}
-          className="bg-background"
-        >
-          <Pressable
-            onPress={() => setShowFullscreen(false)}
-            className="absolute top-4 right-4 z-50 p-2 active:opacity-70 bg-background/80 rounded-full"
-          >
-            <Minimize2 size={20} className="text-foreground" />
-          </Pressable>
-          <View className="flex-1 flex-col">{content}</View>
-        </View>
-      )}
-    </PromptInputContext.Provider>
-  );
-}

package/src/components/ui/prompt-input/submit-button.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import ArrowUp from "lucide-react-native/icons/arrow-up";
-import Square from "lucide-react-native/icons/square";
-import { cn } from "../../../lib/utils";
-import { Button } from "../button";
-import { usePromptInput } from "./context";
-
-export type PromptInputSubmitButtonProps = {
-  isLoading?: boolean;
-  onStop?: () => void;
-  emptyAction?: React.ReactNode;
-  className?: string;
-};
-
-export function PromptInputSubmitButton({
-  isLoading,
-  onStop,
-  emptyAction,
-  className,
-}: PromptInputSubmitButtonProps) {
-  const { onSubmit, value, attachments } = usePromptInput();
-  const hasContent = value.trim() || attachments.length > 0;
-
-  if (isLoading && onStop) {
-    return (
-      <Button
-        size="icon"
-        onPress={onStop}
-        className={cn("h-8 w-8 rounded-full", className)}
-      >
-        <Square size={12} color="white" className="fill-current" />
-      </Button>
-    );
-  }
-
-  if (!hasContent && emptyAction) {
-    return <>{emptyAction}</>;
-  }
-
-  return (
-    <Button
-      size="icon"
-      onPress={onSubmit}
-      disabled={!hasContent}
-      className={cn("h-8 w-8 rounded-full", className)}
-    >
-      <ArrowUp size={16} color="white" />
-    </Button>
-  );
-}

package/src/components/ui/prompt-input/textarea.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { cn } from "../../../lib/utils";
-import { ChatTextInput } from "../chat-text-input";
-import { usePromptInput } from "./context";
-
-export type PromptInputTextareaProps = {
-  placeholder?: string;
-  className?: string;
-} & React.ComponentProps<typeof ChatTextInput>;
-
-export function PromptInputTextarea({
-  className,
-  placeholder,
-  style,
-  ...props
-}: PromptInputTextareaProps) {
-  const {
-    value,
-    setValue,
-    onSubmit,
-    disabled,
-    textareaRef,
-    setCurrentHeight,
-    isFullscreen,
-    maxHeight,
-    onImagePaste,
-    handleCompletionKey,
-  } = usePromptInput();
-
-  const inputStyle = React.useMemo(
-    () => [style, styles.borderless, isFullscreen && styles.fullscreen],
-    [isFullscreen, style],
-  );
-
-  const textInput = (
-    <ChatTextInput
-      ref={textareaRef}
-      value={value}
-      onChangeText={setValue}
-      onSubmitEditing={onSubmit}
-      onEnterPress={onSubmit}
-      onHeightChange={setCurrentHeight}
-      onCompletionKey={handleCompletionKey ?? undefined}
-      disableEnterToSubmit={isFullscreen}
-      disableAutoHeight={isFullscreen}
-      maxHeight={isFullscreen ? 10000 : maxHeight}
-      onImagePaste={onImagePaste}
-      fillContainer={isFullscreen}
-      unstyled
-      className={cn(
-        "w-full border-0 bg-transparent text-foreground web:shadow-none",
-        isFullscreen ? "px-4 pt-4" : "min-h-[44px] py-3",
-        className
-      )}
-      style={inputStyle}
-      underlineColorAndroid="transparent"
-      placeholder={placeholder}
-      multiline
-      editable={!disabled}
-      noFocus={true}
-      {...props}
-    />
-  );
-
-  if (isFullscreen) {
-    return <View style={{ flex: 1 }}>{textInput}</View>;
-  }
-
-  return textInput;
-}
-
-const styles = StyleSheet.create({
-  borderless: {
-    borderWidth: 0,
-  },
-  fullscreen: {
-    paddingBottom: 100,
-  },
-});