fix: ensure prompt input attachments render inside header (#178)

* Update prompt-input.tsx

* fix: ensure prompt input attachments render inside header

---------

Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com>

Author: tobiasbueschel

.changeset/cute-candles-float.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+fix: ensure prompt input attachments render inside header

apps/docs/content/docs/components/(chatbot)/prompt-input.mdx

@@ -40,12 +40,14 @@ import {
 import { GlobeIcon } from 'lucide-react';
 
 <PromptInput onSubmit={() => {}} className="mt-4 relative">
-  <PromptInputBody>
+  <PromptInputHeader>
     <PromptInputAttachments>
       {(attachment) => (
         <PromptInputAttachment data={attachment} />
       )}
     </PromptInputAttachments>
+  </PromptInputHeader>
+  <PromptInputBody>
     <PromptInputTextarea onChange={(e) => {}} value={''} />
   </PromptInputBody>
   <PromptInputFooter>
@@ -189,10 +191,13 @@ const InputDemo = () => {
         </Conversation>
 
         <PromptInput onSubmit={handleSubmit} className="mt-4" globalDrop multiple>
-          <PromptInputBody>
+          <PromptInputHeader>
             <PromptInputAttachments>
               {(attachment) => <PromptInputAttachment data={attachment} />}
             </PromptInputAttachments>
+          </PromptInputHeader>
+          <PromptInputBody>
+     
             <PromptInputTextarea
               onChange={(e) => setText(e.target.value)}
               ref={textareaRef}

apps/docs/content/docs/examples/chatbot.mdx

@@ -213,10 +213,12 @@ const ChatBotDemo = () => {
         </Conversation>
 
         <PromptInput onSubmit={handleSubmit} className="mt-4" globalDrop multiple>
-          <PromptInputBody>
+          <PromptInputHeader>
             <PromptInputAttachments>
               {(attachment) => <PromptInputAttachment data={attachment} />}
             </PromptInputAttachments>
+          </PromptInputHeader>
+          <PromptInputBody>
             <PromptInputTextarea
               onChange={(e) => setInput(e.target.value)}
               value={input}

packages/elements/src/prompt-input.tsx

@@ -357,14 +357,21 @@ export type PromptInputAttachmentsProps = Omit<
 
 export function PromptInputAttachments({
   children,
+  className,
 }: PromptInputAttachmentsProps) {
   const attachments = usePromptInputAttachments();
 
-  return attachments?.files.length > 0
-    ? attachments?.files.map((file) => (
+  if (!attachments.files.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-wrap gap-1 p-2.5", className)}>
+      {attachments.files.map((file) => (
         <Fragment key={file.id}>{children(file)}</Fragment>
-      ))
-    : null;
+      ))}
+    </div>
+  );
 }
 
 export type PromptInputActionAddAttachmentsProps = ComponentProps<

packages/examples/src/prompt-input-cursor.tsx

@@ -230,11 +230,11 @@ const Example = () => {
                 </div>
               </PromptInputHoverCardContent>
             </PromptInputHoverCard>
-          </PromptInputHeader>
-          <PromptInputBody>
             <PromptInputAttachments>
               {(attachment) => <PromptInputAttachment data={attachment} />}
             </PromptInputAttachments>
+          </PromptInputHeader>
+          <PromptInputBody>
             <PromptInputTextarea
               placeholder="Plan, search, build anything"
               ref={textareaRef}

packages/examples/src/prompt-input.tsx

@@ -11,6 +11,7 @@ import {
   PromptInputBody,
   PromptInputButton,
   PromptInputFooter,
+  PromptInputHeader,
   type PromptInputMessage,
   PromptInputModelSelect,
   PromptInputModelSelectContent,
@@ -117,10 +118,12 @@ const Example = () => {
     <PromptInputProvider>
       <HeaderControls />
       <PromptInput globalDrop multiple onSubmit={handleSubmit}>
-        <PromptInputBody>
+        <PromptInputHeader>
           <PromptInputAttachments>
             {(attachment) => <PromptInputAttachment data={attachment} />}
           </PromptInputAttachments>
+        </PromptInputHeader>
+        <PromptInputBody>
           <PromptInputTextarea ref={textareaRef} />
         </PromptInputBody>
         <PromptInputFooter>

packages/examples/src/queue-prompt-input.tsx

@@ -11,6 +11,7 @@ import {
   PromptInputBody,
   PromptInputButton,
   PromptInputFooter,
+  PromptInputHeader,
   type PromptInputMessage,
   PromptInputModelSelect,
   PromptInputModelSelectContent,
@@ -179,10 +180,12 @@ const Example = () => {
         )}
       </Queue>
       <PromptInput globalDrop multiple onSubmit={handleSubmit}>
-        <PromptInputBody>
+        <PromptInputHeader>
           <PromptInputAttachments>
             {(attachment) => <PromptInputAttachment data={attachment} />}
           </PromptInputAttachments>
+        </PromptInputHeader>
+        <PromptInputBody>
           <PromptInputTextarea
             onChange={(e) => setText(e.target.value)}
             ref={textareaRef}