feature: improve attachment support on mobile

Author: arnaudpfu

.gitignore

@@ -74,4 +74,7 @@ pnpm-lock.yaml
 .expo
 expo-env.d.ts
 /android
-/ios
+/ios
+
+apps/mobile/android
+apps/mobile/ios

apps/mobile/components/ai-chat/attachment.tsx

@@ -1,15 +1,7 @@
 "use client";
 
-import { type FC, useCallback, useMemo } from "react";
-import {
-  Image as NativeImage,
-  Pressable,
-  ScrollView,
-  View,
-} from "react-native";
-import * as ImagePicker from "expo-image-picker";
-import * as DocumentPicker from "expo-document-picker";
-import { Alert } from "react-native";
+import { type FC, useMemo } from "react";
+import { Image as NativeImage, ScrollView, View } from "react-native";
 import { Icon } from "../ui/icon";
 import { Text } from "../ui/text";
 import { cn } from "~/utils/cn";
@@ -18,87 +10,7 @@ import * as AttachmentPrimitive from "@creatorem/ai-react-native/primitives/atta
 import { useAttachment } from "@creatorem/ai-react-native/primitives/attachment";
 import * as ComposerPrimitive from "@creatorem/ai-react-native/primitives/composer";
 import * as MessagePrimitive from "@creatorem/ai-react-native/primitives/message";
-import { useComposerStore } from "@creatorem/ai-chat/primitives/composer";
-
-const uriToFile = async (
-  uri: string,
-  name: string,
-  type: string,
-): Promise<File> => {
-  const response = await fetch(uri);
-  const blob = await response.blob();
-  return new File([blob], name, { type });
-};
-
-const isImageOnlyAccept = (accept: string): boolean => {
-  if (accept === "*") return false;
-  return accept.split(",").every((item) => item.trim().startsWith("image"));
-};
-
-const useComposerAddAttachment = ({
-  multiple = true,
-}: {
-  multiple?: boolean;
-} = {}) => {
-  const composerStore = useComposerStore();
-
-  return useCallback(async () => {
-    const { attachmentAccept, addAttachment } = composerStore.getState();
-
-    try {
-      if (isImageOnlyAccept(attachmentAccept)) {
-        const { status } =
-          await ImagePicker.requestMediaLibraryPermissionsAsync();
-        if (status !== "granted") {
-          Alert.alert(
-            "Permission required",
-            "Please grant media library access to add attachments.",
-          );
-          return;
-        }
-
-        const result = await ImagePicker.launchImageLibraryAsync({
-          mediaTypes: ["images"],
-          allowsMultipleSelection: multiple,
-          quality: 1,
-        });
-
-        if (result.canceled || !result.assets?.length) return;
-
-        for (const asset of result.assets) {
-          const file = await uriToFile(
-            asset.uri,
-            asset.fileName || `image-${Date.now()}.jpg`,
-            asset.mimeType || "image/jpeg",
-          );
-          await addAttachment(file);
-        }
-        return;
-      }
-
-      const result = await DocumentPicker.getDocumentAsync({
-        multiple,
-        type:
-          attachmentAccept !== "*"
-            ? attachmentAccept.split(",").map((item) => item.trim())
-            : undefined,
-      });
-
-      if (result.canceled || !result.assets?.length) return;
-
-      for (const asset of result.assets) {
-        const file = await uriToFile(
-          asset.uri,
-          asset.name,
-          asset.mimeType || "application/octet-stream",
-        );
-        await addAttachment(file);
-      }
-    } catch {
-      Alert.alert("Error", "Failed to add attachment. Please try again.");
-    }
-  }, [composerStore, multiple]);
-};
+import { useActionSheet } from "../ui/action-sheet";
 
 const useAttachmentImageSrc = () => {
   const attachment = useAttachment();
@@ -133,132 +45,116 @@ const AttachmentThumb: FC = () => {
   );
 };
 
-const AttachmentRemove: FC = () => {
-  return (
-    <View className="absolute top-1 right-1 z-10">
-      <AttachmentPrimitive.Remove
-        size="icon"
-        variant="ghost"
-        className="h-6 w-6 rounded-full bg-background/90 p-1"
-        aria-label="Remove attachment"
-      >
-        <Icon name="X" size={12} />
-      </AttachmentPrimitive.Remove>
-    </View>
-  );
-};
-
-const AttachmentUI: FC = () => {
-  const attachment = useAttachment();
-  const isComposerAttachment = attachment.status.type !== "complete";
-  const tileSizeClass =
-    isComposerAttachment && attachment.type === "image"
-      ? "h-24 w-24"
-      : "h-14 w-14";
-
+const AttachmentUI: FC<{ noRemoveButton?: boolean }> = ({ noRemoveButton }) => {
   return (
     <AttachmentPrimitive.Root className="relative">
       <View
         className={cn(
-          "overflow-hidden rounded-xl border border-border bg-secondary",
-          tileSizeClass,
+          "aspect-square flex-1 overflow-hidden rounded-xl border border-input",
         )}
       >
         <AttachmentThumb />
       </View>
 
-      {isComposerAttachment && <AttachmentRemove />}
-
-      <View className="mt-1 max-w-24">
-        <Text className="text-muted-foreground text-xs" numberOfLines={1}>
-          <AttachmentPrimitive.Name />
-        </Text>
-      </View>
+      {!noRemoveButton && (
+        <View className="absolute top-1.5 right-1.5 z-20">
+          <AttachmentPrimitive.Remove
+            size="icon"
+            variant="ghost"
+            className="size-5 rounded-full bg-background p-0 text-foreground"
+            aria-label="Remove attachment"
+          >
+            <Icon name="X" size={14} strokeWidth={3} />
+          </AttachmentPrimitive.Remove>
+        </View>
+      )}
     </AttachmentPrimitive.Root>
   );
 };
 
 export const UserMessageAttachments: FC = () => {
   return (
-    <View className="col-span-full col-start-1 row-start-1 mb-2 flex w-full flex-row justify-end gap-2">
-      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    <View className="col-span-full col-start-1 row-start-1 mb-2 flex h-32 w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+        componentProps={{ noRemoveButton: true }}
+      />
     </View>
   );
 };
 
 export const ComposerAttachments: FC = () => {
-  return (
+  const attachments = ComposerPrimitive.useComposer((s) => s.attachments);
+  return attachments.length > 0 ? (
     <ScrollView
       horizontal
-      showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ gap: 8, paddingHorizontal: 6, paddingBottom: 4 }}
-      className="mb-2 w-full"
+      className="h-32 w-full p-2"
     >
       <ComposerPrimitive.Attachments
         components={{ Attachment: AttachmentUI }}
       />
     </ScrollView>
-  );
+  ) : null;
 };
 
-// export const ComposerAddAttachment: FC<{ multiple?: boolean }> = ({
-//   multiple = true,
-// }) => {
-//   const onAddAttachment = useComposerAddAttachment({ multiple });
-
-//   return (
-//     <Pressable
-//       onPress={onAddAttachment}
-//       className="size-8 items-center justify-center rounded-full"
-//       accessibilityLabel="Add attachment"
-//     >
-//       <Icon name="Plus" size={18} />
-//     </Pressable>
-//   );
-// };
-
-const ComposerAddAttachmentTakePhoto: FC = () => {
+const ComposerAddAttachmentTakePhoto: FC<{ onAddAttachment?: () => void }> = ({
+  onAddAttachment,
+}) => {
   return (
     <ComposerPrimitive.AddAttachmentTakePhoto
       variant="secondary"
       className="flex h-20 flex-1 flex-col rounded-2xl p-2"
+      onAddAttachment={onAddAttachment}
     >
       <Icon name="Camera" size={20} />
       <Text>Take photo</Text>
     </ComposerPrimitive.AddAttachmentTakePhoto>
   );
 };
 
-const ComposerAddAttachmentImage: FC = () => {
+const ComposerAddAttachmentImage: FC<{ onAddAttachment?: () => void }> = ({
+  onAddAttachment,
+}) => {
   return (
     <ComposerPrimitive.AddAttachmentImage
       variant="secondary"
       className="flex h-20 flex-1 flex-col rounded-2xl p-2"
+      onAddAttachment={onAddAttachment}
     >
       <Icon name="Image" size={20} />
       <Text>Image</Text>
     </ComposerPrimitive.AddAttachmentImage>
   );
 };
 
-const ComposerAddAttachmentFile: FC = () => {
+const ComposerAddAttachmentFile: FC<{ onAddAttachment?: () => void }> = ({
+  onAddAttachment,
+}) => {
   return (
     <ComposerPrimitive.AddAttachmentFile
       variant="secondary"
       className="flex h-20 flex-1 flex-col rounded-2xl p-2"
+      onAddAttachment={onAddAttachment}
     >
       <Icon name="Paperclip" size={20} />
       <Text>Files</Text>
     </ComposerPrimitive.AddAttachmentFile>
   );
 };
 
-export const ComposerAddAttachment: FC = () => {
+export const ComposerAddAttachmentSheet: FC = () => {
+  const { setOpen } = useActionSheet();
+
+  const handleAddAttachment = () => {
+    setOpen(false);
+  };
+
   return (
     <View className="flex flex-row gap-4 p-6 pt-2">
-      <ComposerAddAttachmentTakePhoto />
-      <ComposerAddAttachmentImage />
-      <ComposerAddAttachmentFile />
+      <ComposerAddAttachmentTakePhoto onAddAttachment={handleAddAttachment} />
+      <ComposerAddAttachmentImage onAddAttachment={handleAddAttachment} />
+      <ComposerAddAttachmentFile onAddAttachment={handleAddAttachment} />
     </View>
   );
 };

apps/mobile/components/ai-chat/thread.tsx

@@ -26,7 +26,11 @@ import { ScrollView } from "react-native-gesture-handler";
 import { ToolFallback } from "./tool-fallback";
 import { MarkdownText } from "./markdown-text";
 import { useCSSVariable } from "uniwind";
-import { ComposerAddAttachment } from "./attachment";
+import {
+  ComposerAddAttachmentSheet,
+  ComposerAttachments,
+  UserMessageAttachments,
+} from "./attachment";
 import { WeatherToolRegistration } from "../tools/weather-tool-ui";
 import { Reasoning, ReasoningGroup } from "./reasoning";
 
@@ -53,7 +57,7 @@ export const Thread: React.FC = () => {
             />
           </ThreadPrimitive.ViewportScrollable>
 
-          <View className="mx-auto flex w-full flex-col gap-4 overflow-visible border-border border-t bg-transparent px-6 pt-2 pb-6">
+          <View className="mx-auto flex w-full flex-col gap-4 overflow-visible bg-transparent px-6 pt-2 pb-6">
             <ThreadScrollToBottom />
             <Composer />
           </View>
@@ -172,14 +176,16 @@ const Composer: React.FC = () => {
   return (
     <ComposerPrimitive.Root>
       <View className="flex-row items-end gap-2">
-        {/* <ComposerAttachments /> */}
         <ComposerAction />
-        <ComposerPrimitive.Input
-          placeholder="Send a message..."
-          className="my-auto flex max-h-40 min-h-12 w-full flex-1 flex-row items-center rounded-3xl bg-secondary px-3 py-2 text-base outline-none transition-shadow placeholder:text-muted-foreground"
-          autoFocus
-          aria-label="Message input"
-        />
+        <View className="flex flex-1 items-start rounded-3xl bg-secondary">
+          <ComposerAttachments />
+          <ComposerPrimitive.Input
+            placeholder="Send a message..."
+            className="my-auto flex max-h-40 min-h-12 w-full flex-1 flex-row items-center rounded-3xl bg-secondary px-3 py-2 text-base outline-none transition-shadow placeholder:text-muted-foreground"
+            autoFocus
+            aria-label="Message input"
+          />
+        </View>
         <ComposerSubmit />
       </View>
     </ComposerPrimitive.Root>
@@ -205,7 +211,7 @@ const ComposerAction: FC = () => {
           backgroundColor: backgroundColor,
         }}
       >
-        <ComposerAddAttachment />
+        <ComposerAddAttachmentSheet />
         {/* <View className="h-40 px-4">
           <ComposerAddAttachmentFile />
           <ComposerAddAttachmentImage />
@@ -354,7 +360,7 @@ const UserMessage: FC = () => {
       className="fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
       data-role="user"
     >
-      {/* <UserMessageAttachments /> */}
+      <UserMessageAttachments />
 
       <Animated.View
         entering={FadeIn.duration(320)}

apps/mobile/components/ui/action-sheet.tsx

@@ -115,8 +115,8 @@ export const ActionSheetClose: React.FC<
 interface ThemedActionSheetProps extends RNActionSheetProps {}
 
 const defaultHeaderComponent = (
-  <View className="w-full flex h-4">
-    <View className="h-1 w-10 mx-auto mt-1 rounded-full bg-input" />
+  <View className="flex h-4 w-full">
+    <View className="mx-auto mt-1 h-1 w-10 rounded-full bg-input" />
   </View>
 );