feat: improve layout and design of PromptInputAttachments

[tobiasbueschel]

Before

Adding <PromptInputAttachments /> to the <PromptInputBody /> looked a bit out of place given we now have the <PromptInputHeader /> component for all context attachments:

If one tried to render these attachments inside the header, you would have gotten something like the following screenshot where the order is mixed up and the square image preview doesn't fit well with the remaining rectangular attachment buttons.

After
This PR draws inspiration from how it looks in Cursor and improves the attachment previews by (1) ensuring the chips have an similar rectangular design, (2) have a hover preview if available for the file type and (3) automatically wrap to a new line if one adds a lot of attachments.

Hover preview for images

Hover preview for non-image media types

Handles multiple attachments nicely

Here is an animation of how it works:

[vercel]

@tobiasbueschel is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[tobiasbueschel]

I noticed that v0 has the remove button on the right side instead, happy to also implement that if you prefer:

[haydenbleasel]

Thanks @tobiasbueschel 💪