ruby_llm 2.1.0 → 2.2.0

data/lib/generators/ruby_llm/chat_ui/templates/controllers/chats_controller.rb.tt

@@ -1,5 +1,5 @@
 class <%= chat_controller_class_name %> < ApplicationController
-  before_action :set_<%= chat_variable_name %>, only: [ :show, :destroy ]
+  before_action :set_<%= chat_variable_name %>, only: [ :show, :destroy, :cancel ]
 
   def index
     @<%= chat_table_name %> = <%= chat_model_name %>.order(created_at: :desc)
@@ -13,10 +13,11 @@ class <%= chat_controller_class_name %> < ApplicationController
 
   def create
     prompt = params.dig(:<%= chat_variable_name %>, :prompt)
-    if prompt.present?
+    if prompt.present? || attachments
       provider, model = params.dig(:<%= chat_variable_name %>, :model).to_s.split(":", 2)
-      @<%= chat_variable_name %> = <%= chat_model_name %>.create!(model: model.presence, provider: provider.presence)
-      <%= chat_job_class_name %>.perform_later(@<%= chat_variable_name %>.id, prompt)
+      @<%= chat_variable_name %> = <%= chat_agent_class_name %>.create!(**{ model: model.presence, provider: provider.presence }.compact)
+      @<%= chat_variable_name %>.ask_later(prompt.presence, with: attachments)
+      <%= chat_job_class_name %>.set(wait: 1.second).perform_later(@<%= chat_variable_name %>.id)
 
       redirect_to @<%= chat_variable_name %>, notice: "<%= chat_model_name.humanize %> was successfully created."
     else
@@ -31,6 +32,12 @@ class <%= chat_controller_class_name %> < ApplicationController
 
   def show
     @<%= message_variable_name %> = <%= message_model_name %>.new
+    @chat_models = available_chat_models
+  end
+
+  def cancel
+    @<%= chat_variable_name %>.cancel if @<%= chat_variable_name %>.running?
+    redirect_to @<%= chat_variable_name %>, status: :see_other
   end
 
   def destroy
@@ -40,7 +47,11 @@ class <%= chat_controller_class_name %> < ApplicationController
 
   private
 
+  def attachments
+    Array(params.dig(:<%= chat_variable_name %>, :attachments)).grep(ActionDispatch::Http::UploadedFile).presence
+  end
+
   def set_<%= chat_variable_name %>
-    @<%= chat_variable_name %> = <%= chat_model_name %>.find(params[:id])
+    @<%= chat_variable_name %> = <%= chat_agent_class_name %>.find(params[:id])
   end
 end

data/lib/generators/ruby_llm/chat_ui/templates/controllers/messages_controller.rb.tt

@@ -1,10 +1,16 @@
 class <%= message_controller_class_name %> < ApplicationController
   before_action :set_<%= chat_variable_name %>
 
+  rescue_from RubyLLM::PendingToolCallsError do
+    redirect_to @<%= chat_variable_name %>, notice: "Answer the questions above to continue.", status: :see_other
+  end
+
   def create
-    content = params.dig(:<%= message_variable_name %>, :content)
-    if content.present?
-      <%= chat_job_class_name %>.perform_later(@<%= chat_variable_name %>.id, content)
+    @chat_models = available_chat_models
+    if content || attachments
+      switch_model
+      @<%= chat_variable_name %>.ask_later(content, with: attachments)
+      <%= chat_job_class_name %>.perform_later(@<%= chat_variable_name %>.id)
 
       respond_to do |format|
         format.turbo_stream
@@ -13,17 +19,29 @@ class <%= message_controller_class_name %> < ApplicationController
     else
       @<%= message_variable_name %> = @<%= chat_variable_name %>.<%= message_table_name %>.build
       @<%= message_variable_name %>.errors.add(:content, "can't be blank")
-
-      respond_to do |format|
-        format.turbo_stream { render :create, status: <%= unprocessable_content_status.inspect %> }
-        format.html { render "<%= chat_model_name.underscore.pluralize %>/show", status: <%= unprocessable_content_status.inspect %> }
-      end
+      render "<%= chat_model_name.underscore.pluralize %>/show", status: <%= unprocessable_content_status.inspect %>
     end
   end
 
   private
 
+  def content
+    params.dig(:<%= message_variable_name %>, :content).presence
+  end
+
+  def attachments
+    Array(params.dig(:<%= message_variable_name %>, :attachments)).grep(ActionDispatch::Http::UploadedFile).presence
+  end
+
+  def switch_model
+    selected = params.dig(:<%= message_variable_name %>, :model)
+    return if selected.nil? || selected == [ @<%= chat_variable_name %>.provider, @<%= chat_variable_name %>.model_id ].compact.join(":")
+
+    provider, model = selected.split(":", 2)
+    @<%= chat_variable_name %>.with_model(model, provider: provider)
+  end
+
   def set_<%= chat_variable_name %>
-    @<%= chat_variable_name %> = <%= chat_model_name %>.find(params[:<%= chat_model_name.include?('::') ? chat_model_name.demodulize.underscore : chat_variable_name %>_id])
+    @<%= chat_variable_name %> = <%= chat_agent_class_name %>.find(params[:<%= chat_model_name.include?('::') ? chat_model_name.demodulize.underscore : chat_variable_name %>_id])
   end
 end

data/lib/generators/ruby_llm/chat_ui/templates/controllers/models_controller.rb.tt

@@ -4,7 +4,7 @@ class <%= model_controller_class_name %> < ApplicationController
   end
 
   def show
-    @<%= model_variable_name %> = RubyLLM.models.find(params[:id], params[:provider])
+    @<%= model_variable_name %> = RubyLLM.models.find(params[:id], provider: params[:provider])
   end
 
   def refresh

data/lib/generators/ruby_llm/chat_ui/templates/controllers/queued_messages_controller.rb.tt

@@ -0,0 +1,14 @@
+class <%= queued_message_controller_class_name %> < ApplicationController
+  before_action :set_<%= chat_variable_name %>
+
+  def destroy
+    @<%= chat_variable_name %>.queued_messages.find_by(id: params[:id])&.withdraw
+    redirect_to @<%= chat_variable_name %>, status: :see_other
+  end
+
+  private
+
+  def set_<%= chat_variable_name %>
+    @<%= chat_variable_name %> = <%= chat_agent_class_name %>.find(params[:<%= chat_model_name.include?('::') ? chat_model_name.demodulize.underscore : chat_variable_name %>_id])
+  end
+end

data/lib/generators/ruby_llm/chat_ui/templates/javascript/chat_message_controller.js

@@ -0,0 +1 @@
+export { default } from "ruby_llm/chat_message_controller"

data/lib/generators/ruby_llm/chat_ui/templates/jobs/chat_response_job.rb.tt

@@ -1,12 +1,9 @@
 class <%= chat_job_class_name %> < ApplicationJob
-  def perform(<%= chat_variable_name %>_id, content)
-    <%= chat_variable_name %> = <%= chat_model_name %>.find(<%= chat_variable_name %>_id)
+  discard_on RubyLLM::CancelledError
 
-    <%= chat_variable_name %>.ask(content) do |chunk|
-      if chunk.content && !chunk.content.empty?
-        <%= message_variable_name %> = <%= chat_variable_name %>.<%= message_table_name %>.last
-        <%= message_variable_name %>.broadcast_append_chunk(chunk.content)
-      end
-    end
+  def perform(<%= chat_variable_name %>_id)
+    <%= chat_variable_name %> = <%= chat_agent_class_name %>.find(<%= chat_variable_name %>_id)
+    <%= chat_variable_name %>.complete(&:broadcast)
+    retry_job wait: 1.minute if <%= chat_variable_name %>.running?
   end
 end

data/lib/generators/ruby_llm/chat_ui/templates/jobs/resume_interrupted_chats_job.rb.tt

@@ -0,0 +1,7 @@
+class <%= resume_job_class_name %> < ApplicationJob
+  def perform(boot: false)
+    <%= chat_model_name %>.interrupted.find_each { |<%= chat_variable_name %>| <%= chat_job_class_name %>.perform_later(<%= chat_variable_name %>.id) }
+    expiry = <%= chat_model_name %>.where(claimed_until: Time.current..).maximum(:claimed_until) if boot
+    self.class.set(wait_until: expiry + 1.second).perform_later if expiry
+  end
+end

data/lib/generators/ruby_llm/chat_ui/templates/migrations/add_reply_error_migration.rb.tt

@@ -0,0 +1,5 @@
+class AddReplyErrorTo<%= chat_table_name.camelize %> < ActiveRecord::Migration<%= migration_version %>
+  def change
+    add_column :<%= chat_table_name %>, :reply_error, :string
+  end
+end

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/chats/_files.html.erb.tt

@@ -0,0 +1,15 @@
+<%%# The files every store of the chat sees. Files a store wrote for an owner stay theirs: add them with .or(...where(owner: Current.user)). %>
+<%% files = <%= chat_model_name.demodulize.underscore %>.ruby_llm_chat_files.where(owner_id: nil).with_attached_file %>
+<%% if files.any? %>
+  <section id="<%= chat_variable_name %>_<%%= <%= chat_model_name.demodulize.underscore %>.id %>_files" class="my-5">
+    <h2 class="font-bold text-lg mb-2">Files</h2>
+    <div class="flex flex-wrap gap-3">
+      <%% files.each do |file| %>
+        <%%= link_to rails_blob_path(file.file, disposition: "attachment"), class: "inline-flex items-center gap-2 rounded-md px-3 py-2 bg-white border border-gray-200 hover:bg-gray-50 text-sm" do %>
+          <span class="font-medium text-blue-600"><%%= file.path %></span>
+          <span class="text-gray-600"><%%= number_to_human_size(file.byte_size) %></span>
+        <%% end %>
+      <%% end %>
+    </div>
+  </section>
+<%% end %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/chats/_form.html.erb.tt

@@ -11,13 +11,7 @@
     </div>
   <%% end %>
 
-  <div class="my-5">
-    <%%= form.label :model, "Select AI model:" %>
-    <%%= form.select :model,
-        options_for_select(@chat_models.map { |model| [model.label, [model.provider, model.id].join(":")] }.unshift([default_model_display_name, nil]), @selected_model),
-        {},
-        class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= chat_variable_name %>.errors[:model].none?, "border-red-400 focus:outline-red-600": <%= chat_variable_name %>.errors[:model].any?}] %>
-  </div>
+  <%%= render "<%= chat_model_name.underscore.pluralize %>/model_select", form: form, selected: @selected_model %>
 
   <div class="my-5">
     <%%= form.label :prompt, "Prompt" %>
@@ -26,6 +20,10 @@
   </div>
 
   <div class="inline">
+    <%%= form.file_field :attachments, multiple: true %>
+  </div>
+
+  <div>
     <%%= form.submit "Start new <%= chat_table_name.singularize.humanize.downcase %>", class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <%% end %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/chats/_model_select.html.erb.tt

@@ -0,0 +1,7 @@
+<div class="my-5">
+  <%%= form.label :model, "Select AI model:" %>
+  <%%= form.select :model,
+      @chat_models.map { |model| [model.label, [model.provider, model.id].join(":")] }.unshift([default_model_display_name, nil]),
+      { selected: selected },
+      class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": form.object.errors[:model].none?, "border-red-400 focus:outline-red-600": form.object.errors[:model].any?}] %>
+</div>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/chats/show.html.erb.tt

@@ -1,6 +1,7 @@
 <%% content_for :title, "Showing <%= chat_table_name.singularize.humanize.downcase %>" %>
 
-<%%= turbo_stream_from "<%= chat_variable_name %>_#{@<%= chat_variable_name %>.id}" %>
+<%% turbo_refreshes_with method: :morph, scroll: :preserve %>
+<%%= turbo_stream_from @<%= chat_variable_name %>, data: { chat_stream: true } %>
 
 <%# Keep layout conventions aligned with tailwindcss-rails scaffold (top-left, md:w-2/3). -%>
 <div class="md:w-2/3 w-full">
@@ -15,13 +16,41 @@
     <%%= @<%= chat_variable_name %>.model&.label || default_model_display_name %>
   </div>
 
+  <%% if @<%= chat_variable_name %>.cost.total&.positive? %>
+    <div class="my-5">
+      <strong class="block font-medium mb-1">Cost so far:</strong>
+      <%%= cost_label(@<%= chat_variable_name %>.cost) %>
+    </div>
+  <%% end %>
+
   <div id="<%= message_table_name %>" class="min-w-full divide-y divide-gray-200 space-y-5 my-5">
-    <%% @<%= chat_variable_name %>.<%= message_table_name %>.each do |<%= message_variable_name %>| %>
+    <%% @<%= chat_variable_name %>.<%= message_table_name %>.includes(:ruby_llm_usages).each do |<%= message_variable_name %>| %>
       <%%= render <%= message_variable_name %> %>
     <%% end %>
   </div>
 
-  <%%= render "<%= message_model_name.underscore.pluralize %>/form", <%= chat_variable_name %>: @<%= chat_variable_name %>, <%= message_variable_name %>: @<%= message_variable_name %> %>
+  <div id="queued_<%= message_table_name %>" class="space-y-5 my-5">
+    <%% @<%= chat_variable_name %>.queued_messages.each do |queued_message| %>
+      <%%= render "<%= message_model_name.underscore.pluralize %>/queued_message",
+        queued_message: queued_message, <%= chat_model_name.demodulize.underscore %>: @<%= chat_variable_name %> %>
+    <%% end %>
+  </div>
+
+  <%%= render "<%= chat_model_name.underscore.pluralize %>/questions", <%= chat_model_name.demodulize.underscore %>: @<%= chat_variable_name %> %>
+
+  <%%= render "<%= chat_model_name.underscore.pluralize %>/files", <%= chat_model_name.demodulize.underscore %>: @<%= chat_variable_name %> %>
+
+  <%% if @<%= chat_variable_name %>.reply_error.present? %>
+    <p id="reply_error" class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-md inline-block"><%%= @<%= chat_variable_name %>.reply_error %></p>
+  <%% end %>
+
+  <%% if @<%= chat_variable_name %>.running? %>
+    <%%= button_to "Stop", cancel_<%= chat_variable_name %>_path(@<%= chat_variable_name %>), class: "rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium cursor-pointer" %>
+  <%% end %>
+
+  <%%= turbo_frame_tag "<%= message_variable_name %>_form" do %>
+    <%%= render "<%= message_model_name.underscore.pluralize %>/form", <%= chat_variable_name %>: @<%= chat_variable_name %>, <%= message_variable_name %>: @<%= message_variable_name %> %>
+  <%% end %>
 
   <%%= link_to "Back to <%= chat_table_name.humanize.downcase %>", <%= chat_table_name %>_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
 </div>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_assistant.html.erb.tt

@@ -1,14 +1,29 @@
 <%% assistant ||= local_assigns[:<%= message_model_name.demodulize.underscore %>] %>
-<div id="<%= message_variable_name %>_<%%= assistant.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-green-50">
+<%% streaming = assistant.content.blank? && assistant.<%= chat_table_name.singularize %>.running? %>
+<div id="<%%= dom_id(assistant, (:text if local_assigns[:nested])) %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-green-50"<%%= " data-streaming" if streaming %>
+     data-controller="chat-message" data-action="turbo:morph-element->chat-message#restore">
   <div>
     <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700">
       Assistant
     </span>
   </div>
 
-  <div id="<%= message_variable_name %>_<%%= assistant.id %>_content" class="whitespace-pre-wrap"><%%= assistant.content %></div>
+  <div id="<%%= dom_id(assistant) %>_<%%= streaming ? "stream" : "content" %>" data-chat-message-target="source" class="peer whitespace-pre-wrap"><%%= assistant.content %></div>
+  <%% if streaming %>
+    <div class="hidden peer-empty:block text-gray-500">Thinking…</div>
+  <%% end %>
+  <div data-chat-message-target="output" class="space-y-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6 [&_code]:font-mono [&_code]:text-sm [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-white [&_pre]:p-2 [&_a]:text-blue-600 [&_a]:underline"></div>
+
+  <%% if assistant.content.blank? && !streaming && assistant.tool_calls.none? && !assistant.attachments.attached? %>
+    <p class="text-gray-500">The model returned no reply.</p>
+  <%% end %>
+
+  <%%= render "<%= message_model_name.underscore.pluralize %>/attachments", message: assistant %>
 
   <div>
     <span class="text-sm text-gray-600"><%%= assistant.created_at&.strftime("%I:%M %p") %></span>
+    <%% if assistant.cost.total&.positive? %>
+      <span class="text-sm text-gray-600">· <%%= cost_label(assistant.cost) %></span>
+    <%% end %>
   </div>
 </div>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_attachments.html.erb.tt

@@ -0,0 +1,14 @@
+<%% if message.respond_to?(:attachments) && message.attachments.attached? %>
+  <div class="flex flex-wrap gap-3">
+    <%% message.attachments.each do |attachment| %>
+      <%% if ActiveStorage.web_image_content_types.include?(attachment.content_type) %>
+        <%%= link_to image_tag(attachment, alt: attachment.filename.to_s, class: "block max-w-full max-h-80 rounded-md border border-gray-200"), rails_blob_path(attachment) %>
+      <%% else %>
+        <%%= link_to rails_blob_path(attachment, disposition: "attachment"), class: "inline-flex items-center gap-2 rounded-md px-3 py-2 bg-white border border-gray-200 hover:bg-gray-50 text-sm" do %>
+          <span class="font-medium text-blue-600"><%%= attachment.filename %></span>
+          <span class="text-gray-600"><%%= number_to_human_size(attachment.byte_size) %></span>
+        <%% end %>
+      <%% end %>
+    <%% end %>
+  </div>
+<%% end %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_error.html.erb.tt

@@ -1,4 +1,4 @@
-<div id="<%= message_variable_name %>_<%%= <%= message_model_name.demodulize.underscore %>.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-red-50 border border-red-200">
+<div id="<%%= dom_id(<%= message_model_name.demodulize.underscore %>) %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-red-50 border border-red-200">
   <div>
     <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700">
       <%%= title.presence || "Error" %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_form.html.erb.tt

@@ -1,23 +1,33 @@
-<%%= form_with(model: <%= message_variable_name %>, url: <%= chat_model_name.include?('::') ? "#{chat_model_name.split('::').first.underscore}_#{chat_model_name.demodulize.underscore}_#{message_model_name.demodulize.underscore.pluralize}_path(@#{chat_variable_name})" : "[@#{chat_variable_name}, #{message_variable_name}]" %>, id: "new_<%= message_variable_name %>", class: "contents") do |form| %>
-  <%% if <%= message_variable_name %>.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
-      <h2><%%= pluralize(<%= message_variable_name %>.errors.count, "error") %> prohibited this <%= message_table_name.singularize.humanize.downcase %> from being saved:</h2>
+<%% if <%= chat_variable_name %>.pending_questions.any? %>
+  <p id="new_<%= message_variable_name %>" class="my-5 py-2 px-3 bg-amber-50 text-amber-800 font-medium rounded-md">Answer the questions above to continue.</p>
+<%% else %>
+  <%%= form_with(model: <%= message_variable_name %>, url: <%= chat_model_name.include?('::') ? "#{chat_variable_name}_#{message_model_name.demodulize.underscore.pluralize}_path(#{chat_variable_name})" : "[#{chat_variable_name}, #{message_variable_name}]" %>, id: "new_<%= message_variable_name %>", data: { chat_draft: true }, class: "contents") do |form| %>
+    <%% if <%= message_variable_name %>.errors.any? %>
+      <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
+        <h2><%%= pluralize(<%= message_variable_name %>.errors.count, "error") %> prohibited this <%= message_table_name.singularize.humanize.downcase %> from being saved:</h2>
 
-      <ul class="list-disc ml-6">
-        <%% <%= message_variable_name %>.errors.each do |error| %>
-          <li><%%= error.full_message %></li>
-        <%% end %>
-      </ul>
+        <ul class="list-disc ml-6">
+          <%% <%= message_variable_name %>.errors.each do |error| %>
+            <li><%%= error.full_message %></li>
+          <%% end %>
+        </ul>
+      </div>
+    <%% end %>
+
+    <%%= render "<%= chat_model_name.underscore.pluralize %>/model_select", form: form, selected: [ <%= chat_variable_name %>.provider, <%= chat_variable_name %>.model_id ].compact.join(":") %>
+
+    <div class="my-5">
+      <%%= form.label :content, "Message" %>
+      <%%= form.text_area :content, rows: 4, placeholder: "Message...", autofocus: true,
+          class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= message_variable_name %>.errors[:content].none?, "border-red-400 focus:outline-red-600": <%= message_variable_name %>.errors[:content].any?}] %>
     </div>
-  <%% end %>
 
-  <div class="my-5">
-    <%%= form.label :content, "Message" %>
-    <%%= form.text_area :content, rows: 4, placeholder: "Message...", autofocus: true,
-        class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= message_variable_name %>.errors[:content].none?, "border-red-400 focus:outline-red-600": <%= message_variable_name %>.errors[:content].any?}] %>
-  </div>
+    <div class="my-5">
+      <%%= form.file_field :attachments, multiple: true %>
+    </div>
 
-  <div class="inline">
-    <%%= form.submit "Send <%= message_table_name.singularize.humanize.downcase %>", class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
-  </div>
+    <div class="inline">
+      <%%= form.submit "Send <%= message_table_name.singularize.humanize.downcase %>", class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
+    </div>
+  <%% end %>
 <%% end %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_queued_message.html.erb.tt

@@ -0,0 +1,18 @@
+<div id="queued_message_<%%= queued_message.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-blue-50 opacity-60">
+  <div>
+    <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-700">
+      User
+    </span>
+    <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600">
+      Queued
+    </span>
+  </div>
+
+  <div class="whitespace-pre-wrap"><%%= queued_message.content %></div>
+
+  <%%= render "<%= message_model_name.underscore.pluralize %>/attachments", message: queued_message %>
+
+  <%%= button_to "Cancel", <%= chat_variable_name %>_queued_message_path(<%= chat_model_name.demodulize.underscore %>, queued_message),
+    method: :delete,
+    class: "rounded-md px-3 py-1.5 bg-gray-100 hover:bg-gray-50 text-sm font-medium cursor-pointer" %>
+</div>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_system.html.erb.tt

@@ -1,5 +1,5 @@
 <%% system ||= local_assigns[:<%= message_model_name.demodulize.underscore %>] %>
-<div id="<%= message_variable_name %>_<%%= system.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-gray-50 border border-gray-200">
+<div id="<%%= dom_id(system) %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-gray-50 border border-gray-200">
   <div>
     <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-gray-200 text-gray-700">
       System

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_tool_calls.html.erb.tt

@@ -1,5 +1,8 @@
 <%% message = local_assigns[:<%= message_model_name.demodulize.underscore %>] || tool_calls %>
-<div id="<%= message_variable_name %>_<%%= message.id %>">
+<div id="<%%= dom_id(message) %>">
+  <%% if message.content.present? %>
+    <%%= render "<%= message_model_name.underscore.pluralize %>/assistant", assistant: message, nested: true %>
+  <%% end %>
   <%% message.<%= tool_call_variable_name.pluralize %>.each_value do |tool_call| %>
     <%%= render tool_call_partial(tool_call), message: message, tool_call: tool_call %>
   <%% end %>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/_user.html.erb.tt

@@ -1,12 +1,14 @@
 <%% user ||= local_assigns[:<%= message_model_name.demodulize.underscore %>] %>
-<div id="<%= message_variable_name %>_<%%= user.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-blue-50">
+<div id="<%%= dom_id(user) %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-blue-50">
   <div>
     <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-700">
       User
     </span>
   </div>
 
-  <div id="<%= message_variable_name %>_<%%= user.id %>_content" class="whitespace-pre-wrap"><%%= user.content %></div>
+  <div class="whitespace-pre-wrap"><%%= user.content %></div>
+
+  <%%= render "<%= message_model_name.underscore.pluralize %>/attachments", message: user %>
 
   <div>
     <span class="text-sm text-gray-600"><%%= user.created_at&.strftime("%I:%M %p") %></span>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/tool_calls/_default.html.erb.tt

@@ -1,7 +1,7 @@
 <div id="<%= message_variable_name %>_tool_call_<%%= tool_call.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-gray-50 border border-gray-200">
   <div>
     <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-gray-200 text-gray-700">
-      Tool Call
+      <%%= tool_label(tool_call.name) %> call
     </span>
   </div>
 

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/messages/tool_results/_default.html.erb.tt

@@ -5,15 +5,17 @@
     title: "Tool Result Error",
     error_message: error_message %>
 <%% else %>
-  <div id="<%= message_variable_name %>_<%%= tool.id %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-gray-50 border border-gray-200">
+  <div id="<%%= dom_id(tool) %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-gray-50 border border-gray-200">
     <div>
       <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-gray-200 text-gray-700">
-        Tool
+        <%%= tool_result_label(tool) %> result
       </span>
     </div>
 
     <pre class="whitespace-pre-wrap text-gray-700 text-sm overflow-x-auto"><%%= tool.content.presence || "(no output)" %></pre>
 
+    <%%= render "<%= message_model_name.underscore.pluralize %>/attachments", message: tool %>
+
     <div>
       <span class="text-sm text-gray-600"><%%= tool.created_at&.strftime("%I:%M %p") %></span>
     </div>

data/lib/generators/ruby_llm/chat_ui/templates/tailwind/views/questions/_question.html.erb.tt

@@ -0,0 +1,101 @@
+<%% answers_path = <%= chat_variable_name %>_answers_path(<%= chat_model_name.demodulize.underscore %>) %>
+<%% card = "question_#{question.id.parameterize}" %>
+<%% single = question.fields.first if question.fields.one? %>
+<%% choices = single&.choices&.to_h { |choice| [choice, choice] } %>
+<%% choices = { "Yes" => true, "No" => false } if single&.type == "boolean" %>
+<%% steps = { "integer" => 1, "number" => "any" } %>
+<%% primary = "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium cursor-pointer" %>
+<%% secondary = "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 font-medium cursor-pointer" %>
+<div id="<%%= card %>" class="w-full sm:w-auto my-5 space-y-3 rounded-md px-3 py-2 bg-amber-50 border border-amber-200">
+  <%% if question.approval? %>
+    <%% arguments = question.tool_call.arguments %>
+    <%% sandbox = arguments["sandbox"].presence if question.tool_call.name == "run_code" %>
+    <div>
+      <span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800">
+        Approve <%%= question.tool_call.name %>?
+      </span>
+    </div>
+
+    <%% if sandbox %>
+      <p><%%= arguments["reason"] %></p>
+      <pre class="whitespace-pre-wrap text-gray-700 text-sm overflow-x-auto"><%%= arguments["code"] %></pre>
+      <p class="text-sm text-gray-700">Runs in the <strong class="font-medium text-gray-900"><%%= sandbox %></strong> sandbox. <%%= <%= chat_model_name.demodulize.underscore %>.tools[:run_code]&.summary(sandbox) %></p>
+    <%% else %>
+      <dl class="space-y-2 text-sm">
+        <%% arguments.each do |name, value| %>
+          <div>
+            <dt class="font-medium text-gray-900"><%%= name.to_s.humanize %></dt>
+            <dd><pre class="whitespace-pre-wrap text-gray-700 overflow-x-auto"><%%= value.is_a?(String) ? value : value.to_json %></pre></dd>
+          </div>
+        <%% end %>
+      </dl>
+    <%% end %>
+
+    <div class="flex flex-col sm:flex-row gap-2">
+      <%%= button_to "Approve", answers_path, params: { question_id: question.id }, class: primary %>
+      <%%= button_to "Deny", answers_path, params: { question_id: question.id, decline: true }, class: secondary %>
+    </div>
+  <%% else %>
+    <p class="font-medium text-gray-900"><%%= question.message %></p>
+
+    <%% if question.form? && !choices %>
+      <%%= form_with url: answers_path, class: "space-y-3" do |form| %>
+        <%%= form.hidden_field :question_id, value: question.id %>
+        <%% if question.fields.one? %>
+          <div>
+            <%%= form.text_field :answer, value: single.default, required: single.required?, id: "#{card}_answer",
+              type: steps.key?(single.type) ? "number" : "text", step: steps[single.type], "aria-label": question.message, class: "block shadow-sm rounded-md border border-gray-400 px-3 py-2 w-full" %>
+            <%% if single.description %>
+              <p class="mt-1 text-xs text-gray-600"><%%= single.description %></p>
+            <%% end %>
+          </div>
+        <%% else %>
+          <%% question.fields.each do |field| %>
+            <%% field_id = "#{card}_#{field.name.to_s.parameterize(separator: "_")}" %>
+            <%% caption = field.title || field.name.to_s.humanize %>
+            <%% list = field.type == "array" %>
+            <div>
+              <%% if field.type == "boolean" %>
+                <div class="flex items-center gap-2">
+                  <%%= form.check_box "answer[#{field.name}]", { checked: field.default, id: field_id }, "true", "false" %>
+                  <%%= label_tag field_id, caption, class: "text-sm font-medium" %>
+                </div>
+              <%% else %>
+                <%%= label_tag field_id, caption, class: "block text-sm font-medium" %>
+                <%% if field.choices %>
+                  <%%= form.select "answer[#{field.name}]", field.choices, { selected: field.default, include_blank: !field.required? && !list },
+                    id: field_id, multiple: list, required: list && field.required?, class: "block shadow-sm rounded-md border border-gray-400 px-3 py-2 mt-1 w-full" %>
+                <%% else %>
+                  <%%= form.text_field "answer[#{field.name}]", value: field.default, required: field.required?, id: field_id,
+                    type: steps.key?(field.type) ? "number" : "text", step: steps[field.type],
+                    class: "block shadow-sm rounded-md border border-gray-400 px-3 py-2 mt-1 w-full" %>
+                <%% end %>
+              <%% end %>
+              <%% if field.description %>
+                <p class="mt-1 text-xs text-gray-600"><%%= field.description %></p>
+              <%% end %>
+            </div>
+          <%% end %>
+        <%% end %>
+        <div class="flex flex-col sm:flex-row gap-2">
+          <%%= form.submit "Send", class: primary %>
+          <%%= form.button "Decline", name: :decline, value: true, formnovalidate: true, class: secondary %>
+        </div>
+      <%% end %>
+    <%% else %>
+      <%% if question.url? %>
+        <p class="text-sm [overflow-wrap:anywhere]"><%%= link_to question.url, question.url, target: "_blank", rel: "noopener noreferrer", class: "text-blue-600 hover:underline" %></p>
+      <%% end %>
+      <div class="flex flex-col sm:flex-row sm:flex-wrap gap-2">
+        <%% if question.url? %>
+          <%%= button_to "Done", answers_path, params: { question_id: question.id }, class: primary %>
+        <%% else %>
+          <%% choices.each do |label, value| %>
+            <%%= button_to label, answers_path, params: { question_id: question.id, answer: value }, class: primary %>
+          <%% end %>
+        <%% end %>
+        <%%= button_to "Decline", answers_path, params: { question_id: question.id, decline: true }, class: secondary %>
+      </div>
+    <%% end %>
+  <%% end %>
+</div>

data/lib/generators/ruby_llm/chat_ui/templates/test/agents/chat_agent_test.rb.tt

@@ -0,0 +1,28 @@
+require "test_helper"
+require "ruby_llm/test_helper"
+
+class <%= chat_agent_class_name %>Test < ActiveSupport::TestCase
+  include RubyLLM::TestHelper
+
+  class LogsTool < RubyLLM::Tool
+    description "Returns the application's logs"
+
+    def execute = "A log line\n" * 100_000
+  end
+
+  test "cuts a tool result that would fill the context window" do
+    stub_replies tool_call(LogsTool.tool_name), "The logs look fine."
+    chat = <%= chat_agent_class_name %>.create!.with_tools(LogsTool)
+    budget = chat.context_budget
+    assert_not_nil budget
+    window = 100_000
+    chat.with_context_budget(**budget, window:)
+
+    chat.ask "What do the logs say?"
+
+    result = chat.<%= message_table_name %>.find_by(role: :tool).content
+    assert result.start_with?("A log line")
+    # The budget counts two characters a token.
+    assert_operator result.length, :<=, window * budget[:per_result] * 2
+  end
+end

data/lib/generators/ruby_llm/chat_ui/templates/test/application_system_test_case.rb.tt

@@ -0,0 +1,5 @@
+require "test_helper"
+
+class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ]
+end