@alia.onl/sdk 2.0.0 → 3.0.0

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

@@ -0,0 +1,183 @@
+import React from "react";
+import { View, Pressable, ScrollView, ActivityIndicator } from "react-native";
+import { Image } from "expo-image";
+import {
+  FileText,
+  FileSpreadsheet,
+  FileCode,
+  FileArchive,
+  FileAudio,
+  File,
+  X,
+} from "lucide-react-native";
+import { Text } from "../text";
+import { formatFileSize } from "../../../lib/utils";
+import { usePromptInput, type Attachment } from "./context";
+
+function getDocumentIcon(mimeType: string, name: string) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+
+  if (mimeType === "application/pdf" || ext === "pdf")
+    return { Icon: FileText, color: "#EF4444", bgColor: "#EF444418" };
+  if (mimeType.includes("word") || ["doc", "docx"].includes(ext))
+    return { Icon: FileText, color: "#3B82F6", bgColor: "#3B82F618" };
+  if (
+    mimeType.includes("spreadsheet") ||
+    mimeType.includes("excel") ||
+    ["xls", "xlsx", "csv"].includes(ext)
+  )
+    return {
+      Icon: FileSpreadsheet,
+      color: "#22C55E",
+      bgColor: "#22C55E18",
+    };
+  if (
+    [
+      "js", "ts", "tsx", "jsx", "py", "rb", "go", "rs", "java", "c", "cpp",
+      "h", "json", "xml", "yaml", "yml", "html", "css", "scss", "sh", "sql",
+    ].includes(ext)
+  )
+    return { Icon: FileCode, color: "#8B5CF6", bgColor: "#8B5CF618" };
+  if (
+    mimeType.includes("zip") ||
+    mimeType.includes("archive") ||
+    ["zip", "rar", "tar", "gz", "7z"].includes(ext)
+  )
+    return { Icon: FileArchive, color: "#EAB308", bgColor: "#EAB30818" };
+  if (
+    mimeType.startsWith("audio/") ||
+    ["mp3", "wav", "ogg", "flac", "aac"].includes(ext)
+  )
+    return { Icon: FileAudio, color: "#EC4899", bgColor: "#EC489918" };
+  if (
+    mimeType === "text/plain" ||
+    ["txt", "md", "rtf"].includes(ext)
+  )
+    return { Icon: FileText, color: "#6B7280", bgColor: "#6B728018" };
+  return { Icon: File, color: "#9CA3AF", bgColor: "#9CA3AF18" };
+}
+
+function truncateFilename(name: string, maxLength = 20): string {
+  if (name.length <= maxLength) return name;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot < 0) return name.slice(0, maxLength - 3) + "...";
+  const ext = name.slice(lastDot);
+  const base = name.slice(0, lastDot);
+  const available = maxLength - ext.length - 3;
+  if (available <= 0) return name.slice(0, maxLength - 3) + "...";
+  return base.slice(0, available) + "..." + ext;
+}
+
+function AttachmentItem({
+  attachment,
+  onRemove,
+}: {
+  attachment: Attachment;
+  onRemove: () => void;
+}) {
+  if (attachment.type === "image") {
+    return (
+      <View
+        className="relative rounded-2xl overflow-hidden bg-muted border border-border"
+        style={{ width: 120, height: 120 }}
+      >
+        {!attachment.isLoading && attachment.uri ? (
+          <Image
+            source={{ uri: attachment.uri }}
+            className="w-full h-full"
+            contentFit="cover"
+          />
+        ) : (
+          <View className="absolute inset-0 items-center justify-center bg-muted">
+            <ActivityIndicator size="small" />
+          </View>
+        )}
+        {attachment.name && !attachment.isLoading && (
+          <View
+            className="absolute bottom-0 left-0 right-0 px-2 py-1"
+            style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+          >
+            <Text className="text-[11px] text-white" numberOfLines={1}>
+              {truncateFilename(attachment.name)}
+            </Text>
+          </View>
+        )}
+        <Pressable
+          onPress={onRemove}
+          className="absolute top-1.5 right-1.5 w-6 h-6 rounded-full items-center justify-center active:opacity-70"
+          style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${attachment.name || "image"}`}
+        >
+          <X size={14} color="white" />
+        </Pressable>
+      </View>
+    );
+  }
+
+  const { Icon, color, bgColor } = getDocumentIcon(
+    attachment.mimeType,
+    attachment.name
+  );
+
+  return (
+    <View
+      className="relative rounded-2xl border border-border overflow-hidden bg-muted/30"
+      style={{ width: 180, height: 80 }}
+    >
+      <View className="flex-1 flex-row items-center px-3 gap-3">
+        <View
+          className="w-10 h-10 rounded-xl items-center justify-center"
+          style={{ backgroundColor: bgColor }}
+        >
+          <Icon size={20} color={color} />
+        </View>
+        <View className="flex-1 pr-4">
+          <Text
+            className="text-xs font-medium text-foreground"
+            numberOfLines={1}
+          >
+            {truncateFilename(attachment.name)}
+          </Text>
+          {attachment.size > 0 && (
+            <Text className="text-[11px] text-muted-foreground mt-0.5">
+              {formatFileSize(attachment.size)}
+            </Text>
+          )}
+        </View>
+      </View>
+      <Pressable
+        onPress={onRemove}
+        className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-muted items-center justify-center active:opacity-70 border border-border"
+        accessibilityRole="button"
+        accessibilityLabel={`Remove ${attachment.name || "document"}`}
+      >
+        <X size={12} className="text-foreground" />
+      </Pressable>
+    </View>
+  );
+}
+
+export function PromptInputAttachments() {
+  const { attachments, removeAttachment } = usePromptInput();
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      className="mb-2 pt-2 flex-none"
+      contentContainerClassName="gap-2.5 px-3"
+    >
+      {attachments.map((attachment) => (
+        <View key={attachment.id} className="relative">
+          <AttachmentItem
+            attachment={attachment}
+            onRemove={() => removeAttachment(attachment.id)}
+          />
+        </View>
+      ))}
+    </ScrollView>
+  );
+}

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