Attachments
The files that came with a message, as tiles with a glyph or a thumbnail, the name and the size. ai_chat_dropzone takes files before they're sent and draws the same tile for each.
On a message
Tiles with a thumbnail or a glyph, aligned to the message's side, above a bubble.
<div class="mx-auto max-w-md">
<%= message own: true, id: "attachments_sent" do |m| %>
<% m.attachments align: :end do |files| %>
<% files.file "brief.pdf", size: 204_800, url: "#" %>
<% files.file "moodboard.png", size: 1_480_000, thumbnail: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect width='4' height='4' fill='%23f97316'/%3E%3Crect width='2' height='2' fill='%23db2777'/%3E%3C/svg%3E" %>
<% end %>
Use these for the lantern scene.
<% end %>
</div>Dropping and pasting
ai_chat_dropzone around a composer: drag a file over the box, paste one into the field, or use the paperclip. Remove one with its ×.
The whole box is the drop zone.
<div class="mx-auto max-w-2xl">
<%= ai_chat_dropzone input: "#drop_files", chips: "#drop_composer [data-ai-chat-chips]", label: "Drop to attach to your message",
class: "rounded-2xl border border-dashed border-neutral-200 p-4 dark:border-neutral-800" do %>
<p class="mb-4 text-sm text-neutral-500">The whole box is the drop zone.</p>
<%= form_with url: "#", id: "drop_composer", multipart: true do |form| %>
<%= ai_chat_composer form: form, field: :content, placeholder: "Paste an image here, or drop a file…" do |composer| %>
<% composer.attach do %>
<label class="<%= button_classes(:icon) %>" title="Attach a file">
<%= Unmagic::Components::Icons.svg(self, :paperclip) %>
<span class="UnmagicVisuallyHidden">Attach a file</span>
<%= form.file_field :files, multiple: true, id: "drop_files", class: "UnmagicVisuallyHidden" %>
</label>
<% end %>
<% end %>
<% end %>
<% end %>
</div>