fix: improve ui of the mobile attachment componser UI

Author: arnaudpfu

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

@@ -50,7 +50,7 @@ const AttachmentUI: FC<{ noRemoveButton?: boolean }> = ({ noRemoveButton }) => {
     <AttachmentPrimitive.Root className="relative">
       <View
         className={cn(
-          "aspect-square flex-1 overflow-hidden rounded-xl border border-input",
+          "aspect-square flex-1 overflow-hidden rounded-2xl border border-input",
         )}
       >
         <AttachmentThumb />
@@ -86,15 +86,21 @@ export const UserMessageAttachments: FC = () => {
 export const ComposerAttachments: FC = () => {
   const attachments = ComposerPrimitive.useComposer((s) => s.attachments);
   return attachments.length > 0 ? (
-    <ScrollView
-      horizontal
-      contentContainerStyle={{ gap: 8, paddingHorizontal: 6, paddingBottom: 4 }}
-      className="h-32 w-full p-2"
-    >
-      <ComposerPrimitive.Attachments
-        components={{ Attachment: AttachmentUI }}
-      />
-    </ScrollView>
+    <View className="h-28 w-full">
+      <ScrollView
+        horizontal
+        contentContainerStyle={{
+          gap: 8,
+          paddingHorizontal: 6,
+          paddingBottom: 4,
+        }}
+        className="h-full w-full p-2"
+      >
+        <ComposerPrimitive.Attachments
+          components={{ Attachment: AttachmentUI }}
+        />
+      </ScrollView>
+    </View>
   ) : null;
 };
 

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

@@ -172,19 +172,35 @@ const ThreadSuggestions: FC = () => {
   );
 };
 
+const AttachmentComposer: React.FC = () => {
+  const attachments = ComposerPrimitive.useComposer((s) => s.attachments);
+  return (
+    <>
+      <View className="absolute top-0 left-0 z-1 w-full pl-14">
+        <ComposerAttachments />
+      </View>
+
+      <ComposerPrimitive.Input
+        headerContent={<ComposerAttachments />}
+        placeholder="Send a message..."
+        className={cn(
+          "my-auto flex max-h-50 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",
+          attachments.length > 0 ? "pt-28" : "",
+        )}
+        autoFocus
+        aria-label="Message input"
+      />
+    </>
+  );
+};
+
 const Composer: React.FC = () => {
   return (
     <ComposerPrimitive.Root>
-      <View className="flex-row items-end gap-2">
-        <ComposerAction />
-        <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 className="flex">
+        <View className="flex-row items-end gap-2">
+          <ComposerAction />
+          <AttachmentComposer />
         </View>
         <ComposerSubmit />
       </View>
@@ -223,7 +239,7 @@ const ComposerAction: FC = () => {
 
 const ComposerSubmit: FC = () => {
   return (
-    <View className="absolute right-0 bottom-0 my-auto flex flex-row items-center justify-between pr-2 pb-2">
+    <View className="absolute right-0 bottom-0 z-30 my-auto flex flex-row items-center justify-between pr-2 pb-2">
       <ThreadPrimitive.If running={false}>
         <ComposerPrimitive.Send
           type="submit"

apps/mobile/components/ui/autoresize-textarea.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback } from "react";
 import {
   TextInput,
   type NativeSyntheticEvent,
   type TextInputContentSizeChangeEventData,
+  View,
   type TextInputProps,
 } from "react-native";
 import { cn } from "~/utils/cn";
@@ -24,20 +25,22 @@ export type AutoResizeTextareaProps = Omit<
   "onChange" | "multiline"
 > & {
   onChange?: (value: string, e?: unknown) => void;
-  //   minRows?: number;
-  //   maxRows?: number;
-  //   rowHeight?: number;
-  //   onHeightChange?: (height: number) => void;
-  //   cacheMeasurements?: boolean;
-  //   height?: number;
+  headerContent?: React.ReactNode;
 };
 
 export const AutoResizeTextarea = React.forwardRef<
   TextInput,
   AutoResizeTextareaProps
 >(
   (
-    { onChange, onChangeText, onContentSizeChange, className, ...restProps },
+    {
+      onChange,
+      onChangeText,
+      onContentSizeChange,
+      headerContent,
+      className,
+      ...restProps
+    },
     ref,
   ) => {
     const [displayExpand, setDisplayExpand] = React.useState<boolean>(false);
@@ -59,24 +62,6 @@ export const AutoResizeTextarea = React.forwardRef<
       [onChange, onChangeText],
     );
 
-    // const fadeAnim = useRef(new Animated.Value(0)).current;
-
-    // useEffect(() => {
-    //     if(displayExpand) {
-    //         Animated.timing(fadeAnim, {
-    //           toValue: 1,
-    //           duration: 300,
-    //           useNativeDriver: true,
-    //         }).start();
-    //     } else {
-    //         Animated.timing(fadeAnim, {
-    //           toValue: 0,
-    //           duration: 300,
-    //           useNativeDriver: true,
-    //         }).start();
-    //     }
-    // }, [displayExpand]);
-
     return (
       <ActionSheet>
         <TextInput
@@ -91,10 +76,10 @@ export const AutoResizeTextarea = React.forwardRef<
           <Animated.View
             entering={FadeIn.duration(200)}
             exiting={FadeOut.duration(200)}
-            className="absolute top-2 right-2"
+            className="absolute top-2 right-2 z-20"
           >
             <ActionSheetTrigger asChild>
-              <Button size="sm-icon" variant="ghost">
+              <Button size="sm-icon" variant="ghost" className="bg-secondary">
                 <Icon name="Expand" size={20} color={textMutedForeground} />
               </Button>
             </ActionSheetTrigger>
@@ -112,19 +97,21 @@ export const AutoResizeTextarea = React.forwardRef<
             <Button
               size="sm-icon"
               variant="ghost"
-              className="absolute top-4 right-4 z-10"
+              className="absolute top-4 right-4 z-20"
             >
               <Icon name="Shrink" size={20} />
             </Button>
           </ActionSheetClose>
 
+          {headerContent}
+
           <TextInput
             {...restProps}
             ref={ref}
             multiline
             className={cn("h-full p-4 pt-12 text-base text-foreground")}
             onChangeText={handleChangeText}
-          ></TextInput>
+          />
         </ActionSheetContent>
       </ActionSheet>
     );