@alia.onl/sdk 1.0.0 → 3.0.0

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

@@ -0,0 +1,168 @@
+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 as any)(() => 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

@@ -0,0 +1,71 @@
+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: (fn: ((key: string) => boolean) | null) => 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;
+};
+
+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

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { Pressable, ActivityIndicator } from "react-native";
+import { Mic, MicOff } from "lucide-react-native";
+import { cn } from "../../../lib/utils";
+import { useSpeechToText } from "../../../hooks/useSpeechToText";
+import { usePromptInput } from "./context";
+
+export type PromptInputMicButtonProps = {
+  className?: string;
+  apiUrl?: string;
+};
+
+export function PromptInputMicButton({ className, apiUrl }: PromptInputMicButtonProps) {
+  const { value, setValue, onError } = usePromptInput();
+  const stt = useSpeechToText({ apiUrl });
+
+  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

@@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  View,
+  Pressable,
+  type TextInput as RNTextInput,
+} from "react-native";
+import { KeyboardAvoidingView } from "../../../lib/keyboard";
+import { Maximize2, Minimize2 } from "lucide-react-native";
+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;
+  // Mic button API URL
+  apiUrl?: string;
+} & 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,
+  apiUrl,
+  ...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?.();
+    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 apiUrl={apiUrl} />
+          <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" as any,
+            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

@@ -0,0 +1,49 @@
+import React from "react";
+import { ArrowUp, Square } from "lucide-react-native";
+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

@@ -0,0 +1,64 @@
+import React from "react";
+import { 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 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}
+      className={cn(
+        "w-full border-0 bg-transparent text-foreground shadow-none",
+        isFullscreen ? "px-4 pt-4" : "min-h-[44px] py-3",
+        className
+      )}
+      style={[style, isFullscreen && { paddingBottom: 100 }]}
+      placeholder={placeholder}
+      multiline
+      editable={!disabled}
+      noFocus={true}
+      {...props}
+    />
+  );
+
+  if (isFullscreen) {
+    return <View style={{ flex: 1 }}>{textInput}</View>;
+  }
+
+  return textInput;
+}