Actions
The controls on a message: reply, react, copy, edit, delete, a menu of more. A toolbar with one Tab stop, shown on hover or focus and never hidden from the keyboard. ai_chat_action_bar is the same thing under its old name.
On hover, and on focus
Hover the row, or Tab into it: the bar floats over its corner. Left and Right move between the controls.
<div class="mx-auto max-w-2xl">
<%= message variant: :row, id: "actions_hover", author: "Ana Silva", avatar: true, time: @now - 5.minutes do |m| %>
<% m.actions do |bar| %>
<% bar.action "Reply", "#", icon: :reply %>
<% bar.action "Add reaction", "#", icon: :smile_plus %>
<% bar.copy "Friday at 2pm works for everyone." %>
<% bar.action "More", "#", icon: :ellipsis %>
<% end %>
<p>Friday at 2pm works for everyone.</p>
<% end %>
</div>Always shown
reveal: :always. A copy button, links, a form with a confirmation, and a menu through bar.control.
<%= message_actions for: "actions_hover", reveal: :always do |bar| %>
<% bar.action "Reply", "#", icon: :reply %>
<% bar.copy "Friday at 2pm works for everyone." %>
<% bar.action "Edit", "#", icon: :pencil %>
<% bar.action "Delete", "#", icon: :trash_2, method: :delete, confirm: "Delete this message?" %>
<% bar.control do %>
<%= menu id: "actions_always_menu" do |menu| %>
<% menu.link "Pin to channel", "#", icon: :flag %>
<% menu.link "Copy link", "#", icon: :external_link %>
<% end %>
<% end %>
<% end %>