Render attachments & actions within Message component

[tobiasbueschel]

Now that we have an improved attachment layout for our <PromptInput /> component as per this PR #151, it would be great to also include an example of how attachments would look inside a user message in our documentation.

We could also consider adding a new component e.g., MessageAttachments that can render file parts automatically. Then it could look like this:

 <Message from={message.role}> 
   <MessageContent> 
     <Response> 
       {part.text} 
     </Response> 
   </MessageContent> 
  <MessageAttachments>
    {(attachment) => <MessageAttachment data={attachment} />}
  </MessageAttachments>
 </Message> 

References:

Which could work well with what we do in PromptInput too:

ai-elements/apps/docs/content/docs/examples/chatbot.mdx

Lines 216 to 220 in 2631a83

	<PromptInputHeader>
	<PromptInputAttachments>
	{(attachment) => <PromptInputAttachment data={attachment} />}
	</PromptInputAttachments>
	</PromptInputHeader>

And we might need something like a Message Header / Footer / Actions so that one can trigger things such as edit user message and so on. Our current approach described in the docs renders actions outside the message component and only for assistant messages:

ai-elements/apps/docs/content/docs/examples/chatbot.mdx

Lines 166 to 191 in 2631a83

	<Message from={message.role}>
	<MessageContent>
	<Response>
	{part.text}
	</Response>
	</MessageContent>
	</Message>
	{message.role === 'assistant' && i === messages.length - 1 && (
	<Actions className="mt-2">
	<Action
	onClick={() => regenerate()}
	label="Retry"
	>
	<RefreshCcwIcon className="size-3" />
	</Action>
	<Action
	onClick={() =>
	navigator.clipboard.writeText(part.text)
	}
	label="Copy"
	>
	<CopyIcon className="size-3" />
	</Action>
	</Actions>
	)}
	</Fragment>

Slightly related issue: #183