@alia.onl/sdk 10.1.1 → 11.0.0

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

@@ -1,383 +0,0 @@
-// Web dropdown menu using Radix UI with Tailwind styling.
-// Provides the same zeego-compatible API as the native dropdown-menu.tsx.
-import { cn } from "../../lib/utils";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon } from "@radix-ui/react-icons";
-import * as React from "react";
-import type { LucideIcon } from "lucide-react-native";
-// Per-icon subpaths, never the `lucide-react-native` barrel: the barrel
-// statically re-exports all ~1500 icons, and Metro has no tree shaking, so a
-// single named import pulls ~1.3 MB of unused icon modules into every consumer
-// bundle.
-import Star from "lucide-react-native/icons/star";
-import Pencil from "lucide-react-native/icons/pencil";
-import Trash2 from "lucide-react-native/icons/trash-2";
-import Share2 from "lucide-react-native/icons/share-2";
-import Download from "lucide-react-native/icons/download";
-import Settings from "lucide-react-native/icons/settings";
-import CircleQuestionMark from "lucide-react-native/icons/circle-question-mark";
-import Image from "lucide-react-native/icons/image";
-import FileText from "lucide-react-native/icons/file-text";
-import Search from "lucide-react-native/icons/search";
-import ShoppingBag from "lucide-react-native/icons/shopping-bag";
-import Ellipsis from "lucide-react-native/icons/ellipsis";
-import ExternalLink from "lucide-react-native/icons/external-link";
-import BookOpen from "lucide-react-native/icons/book-open";
-import Globe from "lucide-react-native/icons/globe";
-import PenTool from "lucide-react-native/icons/pen-tool";
-import Sparkles from "lucide-react-native/icons/sparkles";
-import User from "lucide-react-native/icons/user";
-import CreditCard from "lucide-react-native/icons/credit-card";
-import Bell from "lucide-react-native/icons/bell";
-import LogOut from "lucide-react-native/icons/log-out";
-import Folder from "lucide-react-native/icons/folder";
-import Check from "lucide-react-native/icons/check";
-import Brain from "lucide-react-native/icons/brain";
-import Ghost from "lucide-react-native/icons/ghost";
-import Bot from "lucide-react-native/icons/bot";
-import Bookmark from "lucide-react-native/icons/bookmark";
-import TriangleAlert from "lucide-react-native/icons/triangle-alert";
-import Pin from "lucide-react-native/icons/pin";
-
-// Map iOS SF Symbol names to Lucide icons for web rendering
-const SF_SYMBOL_MAP: Record<string, LucideIcon> = {
-  "star": Star, "star.fill": Star, "pencil": Pencil, "trash": Trash2,
-  "square.and.arrow.up": Share2, "arrow.down.doc": Download,
-  "gearshape": Settings, "questionmark.circle": CircleQuestionMark,
-  "photo": Image, "doc": FileText, "magnifyingglass": Search,
-  "bag": ShoppingBag, "ellipsis": Ellipsis, "link": ExternalLink,
-  "book": BookOpen, "globe": Globe, "pencil.tip": PenTool,
-  "sparkle": Sparkles, "person.circle": User, "creditcard": CreditCard,
-  "bell": Bell, "rectangle.portrait.and.arrow.right": LogOut,
-  "folder": Folder, "checkmark": Check, "brain": Brain,
-  "eye.slash": Ghost, "cpu": Bot,
-  "bookmark": Bookmark, "bookmark.fill": Bookmark,
-  "exclamationmark.triangle": TriangleAlert,
-  "pin": Pin, "pin.fill": Pin,
-};
-
-
-// Singleton registry: only one dropdown menu open at a time.
-const openMenus = new Set<() => void>();
-
-function DropdownMenu({
-  open: controlledOpen,
-  onOpenChange,
-  defaultOpen,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) {
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
-  const open = controlledOpen ?? internalOpen;
-
-  const onOpenChangeRef = React.useRef(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
-
-  const closeRef = React.useRef<() => void>(undefined);
-  if (!closeRef.current) {
-    closeRef.current = () => {
-      setInternalOpen(false);
-      onOpenChangeRef.current?.(false);
-    };
-  }
-
-  React.useEffect(() => {
-    const cb = closeRef.current!;
-    openMenus.add(cb);
-    return () => { openMenus.delete(cb); };
-  }, []);
-
-  const handleOpenChange = (next: boolean) => {
-    if (next) {
-      openMenus.forEach((cb) => {
-        if (cb !== closeRef.current) cb();
-      });
-    }
-    setInternalOpen(next);
-    onOpenChange?.(next);
-  };
-
-  return (
-    <DropdownMenuPrimitive.Root
-      modal={false}
-      open={open}
-      onOpenChange={handleOpenChange}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->((props, ref) => (
-  <DropdownMenuPrimitive.Trigger ref={ref} asChild {...props} />
-));
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuGroup = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> & {
-    horizontal?: boolean;
-  }
->(({ className, horizontal, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Group
-    ref={ref}
-    className={cn(
-      horizontal && "flex flex-row space-x-2 justify-between",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </DropdownMenuPrimitive.Group>
-));
-DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&:focus_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, style, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(
-        "z-[9999] min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground duration-100 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      style={{
-        boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-        border: '1px solid var(--border)',
-        ...style,
-      }}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, align = "start", style, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      align={align}
-      className={cn(
-        "z-[9999] min-w-[8rem] rounded-lg bg-popover p-1 text-popover-foreground duration-100 max-h-[var(--radix-dropdown-menu-content-available-height)] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      style={{
-        boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-        border: '1px solid var(--border)',
-        ...style,
-      }}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    destructive?: boolean;
-    shouldDismissMenuOnSelect?: boolean;
-  }
->(
-  (
-    {
-      className,
-      inset,
-      destructive,
-      shouldDismissMenuOnSelect,
-      onSelect,
-      ...props
-    },
-    ref
-  ) => (
-    <DropdownMenuPrimitive.Item
-      ref={ref}
-      onSelect={(e: Event) => {
-        onSelect?.(e);
-        if (shouldDismissMenuOnSelect === false) {
-          e.preventDefault();
-        }
-      }}
-      className={cn(
-        "relative flex flex-row cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='text-'])]:text-muted-foreground [&:focus_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        inset && "pl-8",
-        destructive &&
-          "text-destructive focus:text-destructive focus:bg-destructive/10 dark:focus:bg-destructive/20 [&_svg]:!text-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    "onSelect" | "checked"
-  > & {
-    value: "mixed" | "on" | "off" | boolean;
-    onValueChange?: (
-      state: "mixed" | "on" | "off",
-      prevState: "mixed" | "on" | "off"
-    ) => void;
-    shouldDismissMenuOnSelect?: boolean;
-  }
->(
-  (
-    {
-      className,
-      value,
-      children,
-      shouldDismissMenuOnSelect,
-      onValueChange,
-      ...props
-    },
-    ref
-  ) => (
-    <DropdownMenuPrimitive.CheckboxItem
-      ref={ref}
-      onSelect={(e: Event) => {
-        const current =
-          value === true ? "on" : value === false ? "off" : value;
-        const next = current === "on" ? "off" : "on";
-        onValueChange?.(next, current);
-        if (shouldDismissMenuOnSelect === false) {
-          e.preventDefault();
-        }
-      }}
-      className={cn(
-        "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground [&:focus_svg:not([class*='text-'])]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={typeof value === "boolean" ? value : value !== "off"}
-      {...props}
-    >
-      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="h-4 w-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-);
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "text-muted-foreground px-1.5 py-1 text-xs font-medium",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName =
-  DropdownMenuPrimitive.Separator.displayName;
-
-export const ItemIcon = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLProps<HTMLSpanElement> & { ios?: { name?: string; [key: string]: unknown }; androidIconName?: string }
->(({ className, ios, androidIconName, children, ...props }, ref) => {
-  const IconComponent = ios?.name ? SF_SYMBOL_MAP[ios.name] : null;
-  return (
-    <span ref={ref} className={cn("inline-flex h-4 w-4 items-center justify-center shrink-0 text-muted-foreground", className)} {...props}>
-      {IconComponent ? <IconComponent size={16} /> : children}
-    </span>
-  );
-});
-ItemIcon.displayName = "ItemIcon";
-
-export const ItemTitle = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLProps<HTMLSpanElement>
->((props, ref) => {
-  return <span ref={ref} {...props} />;
-});
-ItemTitle.displayName = "ItemTitle";
-
-export const ItemSubtitle = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLProps<HTMLSpanElement>
->(({ className, ...props }, ref) => {
-  return (
-    <span
-      ref={ref}
-      className={cn("block text-xs text-muted-foreground mt-0.5", className)}
-      {...props}
-    />
-  );
-});
-ItemSubtitle.displayName = "ItemSubtitle";
-
-export { ItemImage, ItemIndicator, Arrow } from "zeego/dropdown-menu";
-
-export {
-  DropdownMenu as Root,
-  DropdownMenuTrigger as Trigger,
-  DropdownMenuContent as Content,
-  DropdownMenuItem as Item,
-  DropdownMenuCheckboxItem as CheckboxItem,
-  DropdownMenuLabel as Label,
-  DropdownMenuSeparator as Separator,
-  DropdownMenuGroup as Group,
-  DropdownMenuSub as Sub,
-  DropdownMenuSubContent as SubContent,
-  DropdownMenuSubTrigger as SubTrigger,
-};

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

@@ -1,28 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { cn } from "../../../lib/utils";
-import { usePromptInput } from "./context";
-
-export type PromptInputActionsProps = React.ComponentProps<typeof View>;
-
-export function PromptInputActions({
-  children,
-  className,
-  ...props
-}: PromptInputActionsProps) {
-  const { isFullscreen } = usePromptInput();
-
-  return (
-    <View
-      className={cn(
-        "flex-row items-center gap-2",
-        isFullscreen &&
-          "absolute bottom-4 left-4 right-4 max-w-2xl mx-auto rounded-full border border-border bg-background px-4 py-3",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-}

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

@@ -1,83 +0,0 @@
-import React from "react";
-import Plus from "lucide-react-native/icons/plus";
-import { cn } from "../../../lib/utils";
-import { Button } from "../button";
-import * as DropdownMenu from "../dropdown-menu";
-import { useImagePicker } from "../../../hooks/useImagePicker";
-import { useDocumentPicker } from "../../../hooks/useDocumentPicker";
-import { usePromptInput } from "./context";
-
-export type PromptInputAddMenuProps = {
-  className?: string;
-  iconSize?: number;
-};
-
-export function PromptInputAddMenu({ className, iconSize = 16 }: PromptInputAddMenuProps) {
-  const { addAttachment } = usePromptInput();
-  const { pickImage } = useImagePicker();
-  const { pickDocument } = useDocumentPicker();
-
-  const handleAddPhotos = async () => {
-    try {
-      const assets = await pickImage();
-      if (assets && assets.length > 0) {
-        assets.forEach((asset) => {
-          addAttachment({
-            id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-            uri: asset.uri,
-            type: "image",
-            name: asset.name,
-            size: asset.size,
-            mimeType: asset.mimeType,
-          });
-        });
-      }
-    } catch (err) {
-      console.error("Error picking images:", err);
-    }
-  };
-
-  const handleAddDocument = async () => {
-    try {
-      const docs = await pickDocument();
-      if (docs && docs.length > 0) {
-        docs.forEach((doc) => {
-          addAttachment({
-            id: `doc-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-            uri: doc.uri,
-            type: "document",
-            name: doc.name,
-            size: doc.size,
-            mimeType: doc.mimeType,
-          });
-        });
-      }
-    } catch (err) {
-      console.error("Error picking documents:", err);
-    }
-  };
-
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <Button
-          variant="outline"
-          size="icon"
-          className={cn("h-8 w-8 rounded-full border-0", className)}
-        >
-          <Plus size={iconSize} className="text-muted-foreground" />
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content side="top" align="start">
-        <DropdownMenu.Item key="photos" onSelect={handleAddPhotos}>
-          <DropdownMenu.ItemIcon ios={{ name: "photo" }} />
-          <DropdownMenu.ItemTitle>Add photos</DropdownMenu.ItemTitle>
-        </DropdownMenu.Item>
-        <DropdownMenu.Item key="document" onSelect={handleAddDocument}>
-          <DropdownMenu.ItemIcon ios={{ name: "doc" }} />
-          <DropdownMenu.ItemTitle>Add document</DropdownMenu.ItemTitle>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-}

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

@@ -1,181 +0,0 @@
-import React from "react";
-import { View, Pressable, ScrollView, ActivityIndicator } from "react-native";
-import { Image } from "expo-image";
-import FileText from "lucide-react-native/icons/file-text";
-import FileSpreadsheet from "lucide-react-native/icons/file-spreadsheet";
-import FileCode from "lucide-react-native/icons/file-code";
-import FileArchive from "lucide-react-native/icons/file-archive";
-import FileHeadphone from "lucide-react-native/icons/file-headphone";
-import File from "lucide-react-native/icons/file";
-import X from "lucide-react-native/icons/x";
-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: FileHeadphone, 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>
-  );
-}