@alia.onl/sdk 2.0.0 → 3.0.0

package/src/components/ui/chat-text-input.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+import {
+  TextInput,
+  Platform,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+  type NativeSyntheticEvent as RNSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+} from "react-native";
+import { cn } from "../../lib/utils";
+
+type ChatTextInputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
+  noFocus?: boolean;
+  onEnterPress?: () => void;
+  onCompletionKey?: (key: string) => boolean;
+  maxHeight?: number;
+  minHeight?: number;
+  onHeightChange?: (height: number) => void;
+  disableEnterToSubmit?: boolean;
+  disableAutoHeight?: boolean;
+  onImagePaste?: (files: File[]) => void;
+  fillContainer?: boolean;
+};
+
+const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
+  ({
+    className,
+    noFocus = false,
+    onEnterPress,
+    onCompletionKey,
+    onKeyPress,
+    maxHeight = 200,
+    minHeight = 44,
+    onContentSizeChange,
+    onHeightChange,
+    style,
+    disableEnterToSubmit = false,
+    disableAutoHeight = false,
+    onImagePaste,
+    fillContainer = false,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef<TextInput>(null);
+    const wrapperRef = React.useRef<View>(null);
+
+    React.useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+    // Attach paste event listener (web only)
+    React.useEffect(() => {
+      if (Platform.OS !== 'web' || !onImagePaste) return;
+
+      const handlePaste = (e: Event) => {
+        const clipboardEvent = e as ClipboardEvent;
+
+        // @ts-ignore - web-specific API
+        const activeElement = document.activeElement;
+        // @ts-ignore - web-specific API
+        const wrapper = wrapperRef.current;
+
+        // @ts-ignore - web-specific API
+        const isContained = wrapper && wrapper.contains(activeElement);
+
+        if (!isContained) return;
+
+        const items = clipboardEvent.clipboardData?.items;
+        if (!items) return;
+
+        const imageFiles: File[] = [];
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.type.indexOf('image') !== -1) {
+            const file = item.getAsFile();
+            if (file) {
+              imageFiles.push(file);
+            }
+          }
+        }
+
+        if (imageFiles.length > 0) {
+          clipboardEvent.preventDefault();
+          onImagePaste(imageFiles);
+        }
+      };
+
+      // @ts-ignore - web-specific API
+      document.addEventListener('paste', handlePaste);
+
+      return () => {
+        // @ts-ignore - web-specific API
+        document.removeEventListener('paste', handlePaste);
+      };
+    }, [onImagePaste]);
+
+    const handleKeyPress = (
+      e: NativeSyntheticEvent<TextInputKeyPressEventData>
+    ) => {
+      onKeyPress?.(e);
+
+      const key = e.nativeEvent.key;
+
+      if (onCompletionKey && (key === "ArrowUp" || key === "ArrowDown" || key === "Enter" || key === "Escape")) {
+        if (onCompletionKey(key)) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      if (key === "Enter" && !disableEnterToSubmit) {
+        // @ts-ignore - shiftKey exists on web
+        if (Platform.OS !== 'web' || !e.nativeEvent.shiftKey) {
+          e.preventDefault();
+          onEnterPress?.();
+        }
+      }
+    };
+
+    const handleContentSizeChange = (
+      e: RNSyntheticEvent<TextInputContentSizeChangeEventData>
+    ) => {
+      onContentSizeChange?.(e);
+    };
+
+    return (
+      <View
+        ref={wrapperRef}
+        style={{ width: '100%', ...(fillContainer && { flex: 1 }) }}
+        onLayout={(e) => onHeightChange?.(e.nativeEvent.layout.height)}
+      >
+        <TextInput
+          ref={inputRef}
+          className={cn(
+            "native:text-md native:leading-[1.25] rounded-xl border border-input bg-background px-3.5 text-base text-foreground file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground web:flex web:w-full web:py-2 lg:text-sm",
+            "web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+            !fillContainer && !props.multiline && "h-9",
+            fillContainer && "h-full",
+            noFocus && "web:focus-visible:ring-0 web:focus-visible:ring-offset-0",
+            props.editable === false && "opacity-50 web:cursor-not-allowed",
+            className
+          )}
+          placeholderClassName={cn("text-muted-foreground", props.placeholderClassName)}
+          onKeyPress={handleKeyPress}
+          onContentSizeChange={handleContentSizeChange}
+          scrollEnabled={fillContainer || props.multiline}
+          style={[
+            style,
+            !fillContainer && props.multiline && !disableAutoHeight && {
+              minHeight,
+              maxHeight,
+              overflow: 'auto' as any,
+              ...(Platform.OS === 'web' ? { fieldSizing: 'content' } : {}),
+            },
+            fillContainer && { flex: 1, height: '100%' },
+          ]}
+          {...props}
+        />
+      </View>
+    );
+  }
+);
+
+ChatTextInput.displayName = "ChatTextInput";
+
+export { ChatTextInput };

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

@@ -0,0 +1,2 @@
+// Native: re-export zeego's native context menus
+export * from "zeego/dropdown-menu";

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