@alia.onl/sdk 2.0.0 → 3.1.0

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

@@ -0,0 +1,355 @@
+// 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 {
+  Star, Pencil, Trash2, Share2, Download, Settings, HelpCircle,
+  Image, FileText, Search, ShoppingBag, MoreHorizontal, ExternalLink,
+  BookOpen, Globe, PenTool, Sparkles, User, CreditCard, Bell, LogOut,
+  Folder, Check, Brain, Ghost, Bot, Bookmark, AlertTriangle, Pin,
+} from "lucide-react-native";
+
+// Map iOS SF Symbol names to Lucide icons for web rendering
+const SF_SYMBOL_MAP: Record<string, React.ComponentType<any>> = {
+  "star": Star, "star.fill": Star, "pencil": Pencil, "trash": Trash2,
+  "square.and.arrow.up": Share2, "arrow.down.doc": Download,
+  "gearshape": Settings, "questionmark.circle": HelpCircle,
+  "photo": Image, "doc": FileText, "magnifyingglass": Search,
+  "bag": ShoppingBag, "ellipsis": MoreHorizontal, "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": AlertTriangle,
+  "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 hsl(var(--border))',
+        ...style as any,
+      }}
+      {...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 hsl(var(--border))',
+        ...style as any,
+      }}
+      {...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: any) => {
+        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: any) => {
+        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]: any }; 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

@@ -0,0 +1,28 @@
+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

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

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