unmagic-components 0.3.0 → 0.4.0

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat/_live.html.erb

@@ -0,0 +1,53 @@
+<%# The browser has no Action Cable, so the server's reply arrives as a list of
+    flushes in the response, and this driver appends them one at a time. Each is
+    the real stream_markdown action; the last is the settled turn's upsert. A
+    flush for a reply that has been stopped is dropped, as a real one would be
+    refused by the frozen element. %>
+<div class="mx-auto flex max-w-2xl flex-col gap-4">
+  <div id="demo_scroll" class="h-96 overflow-y-auto pr-2">
+    <%= ai_chat id: "demo_entries", scroller: "#demo_scroll" do |chat| %>
+      <% chat.welcome do %>
+        <%= ai_chat_welcome heading: "Ask about your candidates", composer: "demo_composer" do |welcome| %>
+          <% welcome.body "This one only knows one answer, but it streams it properly." %>
+          <% welcome.suggestion "Who hasn't replied yet?", icon: :messages_square %>
+          <% welcome.suggestion "Draft a nudge for…", icon: :pencil, fill: true, value: "Draft a nudge for " %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%= form_with url: ai_chat_messages_path, scope: :message, id: "demo_composer" do |form| %>
+    <%= ai_chat_composer form: form, field: :content, placeholder: "Ask something, or / for a command…",
+          stop_form: "demo_stop" do |composer| %>
+      <% composer.optimistic id: "message[client_id]", container: "#demo_entries" %>
+      <% composer.menu do %>
+        <%= ai_chat_slash_menu above: true do |menu| %>
+          <% menu.item "summarise", description: "Summarise the conversation so far" %>
+          <% menu.item "invite", description: "Invite a candidate to a job", arguments: %w[email job] %>
+          <% menu.item "nudge", description: "Draft a follow-up for someone who hasn't replied", arguments: %w[name] %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= ai_chat_stop_form ai_chat_stop_path, id: "demo_stop" %>
+
+  <div id="demo_driver" hidden></div>
+  <script type="module">
+    const driver = document.getElementById("demo_driver")
+
+    new MutationObserver(() => {
+      for (const list of driver.querySelectorAll("template[data-flushes]")) {
+        list.remove()
+        play(Array.from(list.content.children).filter((child) => child.localName === "template"))
+      }
+    }).observe(driver, { childList: true })
+
+    async function play(frames) {
+      for (const frame of frames) {
+        await new Promise((resolve) => setTimeout(resolve, Number(frame.dataset.delay)))
+        if (document.getElementById(frame.dataset.target)?.hasAttribute("final")) return
+        document.body.append(frame.content.cloneNode(true))
+      }
+    }
+  </script>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="flex w-64 flex-col gap-2 text-xs">
+  <%= ai_chat_message "Who hasn't replied?", role: :user %>
+  <%= ai_chat_tool_call name: "search_invitations", state: :done, icon: :messages_square, timeline: false do |tool| %>
+    <% tool.timing duration: 1.8 %>
+  <% end %>
+  <%= ai_chat_message role: :assistant do %><p>Three candidates haven't replied since Monday.</p><% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat/_welcome.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat id: "welcome_entries", follow: false do |chat| %>
+    <% chat.welcome do %>
+      <%= ai_chat_welcome heading: "What can I help with?", composer: "welcome_composer" do |welcome| %>
+        <% welcome.body "It can search your jobs and candidates, draft messages, and keep track of who has replied." %>
+        <% welcome.suggestion "Who hasn't replied yet?", icon: :messages_square %>
+        <% welcome.suggestion "Which job is getting the most views?", icon: :list_checks %>
+        <% welcome.suggestion "Create a job at Acme", icon: :pencil %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_action_bar/_always.html.erb

@@ -0,0 +1,6 @@
+<%= ai_chat_action_bar for: "bar_reply", reveal: :always do |bar| %>
+  <% bar.copy "Friday at 2pm works for everyone." %>
+  <% bar.action "Try again", "#", icon: :rotate_cw, method: :post, confirm: "Replace this reply?" %>
+  <% bar.action "Edit", "#", icon: :pencil %>
+  <% bar.control { ai_chat_branch_picker index: 1, count: 2, next: "#" } %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_action_bar/_hover.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_message role: :assistant, id: "bar_reply" do |turn| %>
+    <% turn.actions do %>
+      <%= ai_chat_action_bar for: "bar_reply" do |bar| %>
+        <% bar.copy "Friday at 2pm works for everyone." %>
+        <% bar.action "Try again", "#", icon: :rotate_cw, method: :post %>
+        <% bar.action "Edit", "#", icon: :pencil %>
+      <% end %>
+    <% end %>
+    <p>Friday at 2pm works for everyone.</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_action_bar/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<%= ai_chat_action_bar for: "thumb", reveal: :always, class: "rounded-lg border border-neutral-200 bg-white p-1 dark:border-neutral-800 dark:bg-neutral-900" do |bar| %>
+  <% bar.copy "x" %>
+  <% bar.action "Try again", "#", icon: :rotate_cw, method: :post %>
+  <% bar.action "Edit", "#", icon: :pencil %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_attachments/_dropzone.html.erb

@@ -0,0 +1,17 @@
+<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>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_attachments/_sent.html.erb

@@ -0,0 +1,11 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-6">
+  <%= ai_chat_message role: :user, id: "sent_q" do |turn| %>
+    <% turn.attachments do %>
+      <%= ai_chat_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 %>
+    <% end %>
+    Use these for the lantern scene.
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_attachments/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_attachments do |files| %>
+    <% files.file "brief.pdf", size: 204_800 %>
+    <% files.file "notes.md", size: 2_048 %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_branch_picker/_positions.html.erb

@@ -0,0 +1,5 @@
+<div class="flex items-center gap-8">
+  <%= ai_chat_branch_picker index: 1, count: 3, next: "#" %>
+  <%= ai_chat_branch_picker index: 2, count: 3, previous: "#", next: "#" %>
+  <%= ai_chat_branch_picker index: 10, count: 10, previous: "#" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_branch_picker/_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<div class="scale-150">
+  <%= ai_chat_branch_picker index: 2, count: 3, previous: "#", next: "#" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_citation/_compact.html.erb

@@ -0,0 +1,10 @@
+<div class="mx-auto max-w-2xl">
+  <% [ [ "Handbook · Leave", "Four weeks, accruing monthly from the first day." ],
+       [ "Handbook · Remote work", "Anyone can work from anywhere in the same timezone band." ],
+       [ "Contract template §4", "Notice is one month on either side after probation." ] ].each do |source, text| %>
+    <%= ai_chat_citation compact: true do |cite| %>
+      <% cite.who source %>
+      <% cite.quote text %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_citation/_quote.html.erb

@@ -0,0 +1,11 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_message role: :assistant do %>
+    <p>She said as much last week:</p>
+    <%= ai_chat_citation do |cite| %>
+      <% cite.avatar %>
+      <% cite.who "Ana Silva" %>
+      <% cite.when @now - 6.days, url: "#" %>
+      <% cite.quote "I'm keen, but I'm travelling until the 18th.\nCould we talk after that? <b>Thanks!</b>" %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_citation/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_citation class: "text-xs" do |cite| %>
+    <% cite.avatar %>
+    <% cite.who "Ana Silva" %>
+    <% cite.quote "I'm travelling until the 18th." %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_composer/_parts.html.erb

@@ -0,0 +1,14 @@
+<div class="mx-auto max-w-2xl">
+  <%= form_with url: "#", id: "composer_parts", namespace: "composer_parts" do |form| %>
+    <%= ai_chat_composer form: form, field: :content, placeholder: "Message the assistant…", label: "Start chat" do |composer| %>
+      <% composer.attach do %>
+        <button type="button" class="<%= button_classes(:icon) %>" aria-label="Attach a file" title="Attach a file">
+          <%= Unmagic::Components::Icons.svg(self, :paperclip) %>
+        </button>
+      <% end %>
+      <% composer.actions do %>
+        <%= select_tag :model, options_for_select([ "Fast", "Thorough" ]), class: control_classes(:select, size: :small) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_composer/_states.html.erb

@@ -0,0 +1,8 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-4">
+  <% %i[idle running stopping waiting].each do |state| %>
+    <%= form_with url: "#", id: "composer_#{state}", namespace: "composer_#{state}" do |form| %>
+      <%= ai_chat_composer form: form, field: :content, state: state, placeholder: "#{state.to_s.capitalize}…", rows: 1,
+            stop_form: "composer_states_stop" %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_composer/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<div class="w-64 text-xs">
+  <%= form_with url: "#", id: "composer_thumb" do |form| %>
+    <%= ai_chat_composer form: form, field: :content, placeholder: "Message the assistant…", rows: 1 %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_failure/_full.html.erb

@@ -0,0 +1,11 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_message role: :assistant do %>
+    <p>Here's the shortlist so far: Ana Silva, Grace Okafor, and</p>
+  <% end %>
+  <%= ai_chat_failure "The assistant couldn't finish this reply.", class: "mt-2" do |failure| %>
+    <% failure.cause "RubyLLM::ContextLengthExceededError: prompt is too long: 212,408 tokens > 200,000 maximum" %>
+    <% failure.detail "Provider said", { type: "error", error: { type: "invalid_request_error", message: "prompt is too long" } } %>
+    <% failure.detail "Where it happened", "app/models/chat.rb:88:in 'Chat#reply'\napp/jobs/reply_job.rb:6:in 'ReplyJob#perform'", language: :plaintext %>
+    <% failure.retry { button_to "Try again", "#", class: button_classes(size: :small) } %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_failure/_plain.html.erb

@@ -0,0 +1,3 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_failure "Something went wrong before the assistant could start. Nothing was changed." %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_failure/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_failure "The assistant couldn't finish this reply.", class: "text-xs" do |failure| %>
+    <% failure.cause "TimeoutError: execution expired" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_message/_parts.html.erb

@@ -0,0 +1,23 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-6">
+  <%= ai_chat_message role: :user, id: "parts_q" do |turn| %>
+    <% turn.attachments do %>
+      <%= ai_chat_attachments align: :end do |files| %>
+        <% files.file "brief.pdf", size: 204_800 %>
+      <% end %>
+    <% end %>
+    Summarise this brief for the hiring panel.
+  <% end %>
+  <%= ai_chat_message role: :assistant, id: "parts_a" do |turn| %>
+    <% turn.reasoning duration: 7 do %>
+      <p>The brief is four pages. The panel cares about the must-haves and the salary band, so lead with those.</p>
+    <% end %>
+    <% turn.branches { ai_chat_branch_picker index: 2, count: 3, previous: "#", next: "#" } %>
+    <% turn.actions do %>
+      <%= ai_chat_action_bar for: "parts_a" do |bar| %>
+        <% bar.copy "Must-haves: Go, Kubernetes, on-call experience." %>
+        <% bar.action "Try again", "#", icon: :rotate_cw, method: :post %>
+      <% end %>
+    <% end %>
+    <p><strong>Must-haves:</strong> Go, Kubernetes, and on-call experience. <strong>Band:</strong> $180–210k.</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_message/_states.html.erb

@@ -0,0 +1,9 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-6">
+  <%= ai_chat_message role: :assistant, id: "states_thinking", streaming: true %>
+  <%= ai_chat_message role: :assistant, id: "states_stopped", final: true do %>
+    <p class="text-neutral-500">Response stopped.</p>
+  <% end %>
+  <%= ai_chat_message role: :user, id: "states_optimistic", optimistic: { id: "x", text: "y" } %>
+  <p class="text-sm text-neutral-500">Above: an optimistic bubble as its template renders it, before the composer fills it in. Below this line is an empty settled turn, hidden.</p>
+  <%= ai_chat_message role: :assistant, id: "states_empty" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_message/_thumbnail.html.erb

@@ -0,0 +1,4 @@
+<div class="flex w-60 flex-col gap-2 text-xs">
+  <%= ai_chat_message "Move Ana to Friday?", role: :user %>
+  <%= ai_chat_message role: :assistant do %><p>Done — Friday at 2pm.</p><% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_message/_turns.html.erb

@@ -0,0 +1,16 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-6">
+  <%= ai_chat_message "Can you move Thursday's interview with Ana to Friday?\nSame time is fine.", role: :user, id: "turns_q" %>
+  <%= ai_chat_message role: :assistant, id: "turns_a" do %>
+    <p>Done — Ana's interview is now <strong>Friday at 2pm</strong>. I've:</p>
+    <ol>
+      <li>moved the calendar event and kept the same video link,</li>
+      <li>sent Ana an updated invitation, and</li>
+      <li>let <a href="#">the hiring panel</a> know.</li>
+    </ol>
+    <table>
+      <thead><tr><th>Who</th><th>Status</th></tr></thead>
+      <tbody><tr><td>Ana Silva</td><td>Invited</td></tr><tr><td>Panel</td><td>Notified</td></tr></tbody>
+    </table>
+    <p>The event is <code>evt_4821</code> if you need it.</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_payload/_json.html.erb

@@ -0,0 +1,4 @@
+<div class="mx-auto max-w-xl">
+  <%= ai_chat_payload({ query: "red lantern", shelf: "Props", limit: 20, filters: { animated: false } },
+        label: "Asked", duration: 0.064, copy: true) %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_payload/_text.html.erb

@@ -0,0 +1,4 @@
+<div class="mx-auto max-w-xl">
+  <%= ai_chat_payload((1..40).map { |n| "app/models/chat.rb:#{n * 7}:in 'Chat#step_#{n}' — https://example.com/a/very/long/path/that/keeps/going/#{"x" * 40}" }.join("\n"),
+        label: "Where it happened", language: :plaintext) %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_payload/_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<div class="w-60 text-xs">
+  <%= ai_chat_payload({ query: "red lantern", limit: 20 }, label: "Asked", duration: 0.064) %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_permission/_answered.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-auto flex max-w-xl flex-col gap-4">
+  <%= ai_chat_permission tool: "delete_files", state: :granted do |ask| %>
+    <% ask.argument "paths", "drafts/*" %>
+    <% ask.summary { tag.p("Remove the three superseded drafts.") } %>
+  <% end %>
+  <%= ai_chat_permission tool: "send_email", state: :refused do |ask| %>
+    <% ask.argument "to", "grace.okafor@example.com" %>
+  <% end %>
+  <%= ai_chat_permission tool: "read_chat", state: :lapsed do |ask| %>
+    <% ask.argument "chat_id", 4812 %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_permission/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_permission tool: "delete_files", state: :waiting, url: "#", class: "p-3 text-xs" do |ask| %>
+    <% ask.argument "paths", "drafts/*" %>
+    <% ask.allow %>
+    <% ask.refuse %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_permission/_waiting.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-auto max-w-xl">
+  <%= ai_chat_permission tool: "read_chat", state: :waiting, url: "#" do |ask| %>
+    <% ask.argument "chat_id", 4812 %>
+    <% ask.summary { tag.p("Read the conversation where the lantern brief was agreed.") } %>
+    <% ask.reason { tag.p("The brief here refers to decisions made there, and I can't see them.") } %>
+    <% ask.example "“Go with the lit version” — 3 Sept" %>
+    <% ask.example "“Keep it under 3k triangles” — 4 Sept" %>
+    <% ask.allow confirm: "Let this chat read conversation 4812?" %>
+    <% ask.allow "Allow for any chat", params: { widened: true }, confirm: "Let this chat read any conversation?" %>
+    <% ask.refuse %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_plan/_empty.html.erb

@@ -0,0 +1,3 @@
+<div class="w-80 rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+  <%= ai_chat_plan id: "plan_empty", empty: "Nothing planned — the assistant lays one out when a job has steps." %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_plan/_states.html.erb

@@ -0,0 +1,9 @@
+<div class="w-80 rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+  <%= ai_chat_plan id: "plan_states" do |plan| %>
+    <% plan.step "Find the job", state: :completed %>
+    <% plan.step "List who hasn't replied", state: :completed %>
+    <% plan.step "Check the bounced address", state: :in_progress %>
+    <% plan.step "Nudge Grace", state: :waiting do %>Needs your go-ahead to send<% end %>
+    <% plan.step "Remind me about Ana on the 19th" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_plan/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="w-56 rounded-xl border border-neutral-200 bg-white text-xs dark:border-neutral-800 dark:bg-neutral-900">
+  <%= ai_chat_plan class: "p-3" do |plan| %>
+    <% plan.step "Find the job", state: :completed %>
+    <% plan.step "Check the address", state: :in_progress %>
+    <% plan.step "Nudge Grace", state: :waiting %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_proposal/_decided.html.erb

@@ -0,0 +1,11 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_proposal state: :accepted do |offer| %>
+    <% offer.claim "Ana is travelling until the 18th" %>
+    <% offer.meta "About Ana Silva" %>
+    <% offer.outcome "Remembered" %>
+  <% end %>
+  <%= ai_chat_proposal state: :rejected, icon: :list_checks do |offer| %>
+    <% offer.claim "Track notice period for everyone?" %>
+    <% offer.meta "A new kind of detail worth keeping" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_proposal/_inline.html.erb

@@ -0,0 +1,18 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_message role: :assistant do %>
+    <p>Ana mentioned she's travelling, so I'd hold the nudge until she's back.</p>
+    <%= ai_chat_proposal id: "inline_fact" do |offer| %>
+      <% offer.claim "Ana is travelling until the 18th" %>
+      <% offer.meta "About Ana Silva · 80% sure" %>
+      <% offer.accept { button_to "Remember", "#", class: button_classes(:primary, size: :small) } %>
+      <% offer.reject { button_to "Dismiss", "#", class: button_classes(size: :small) } %>
+    <% end %>
+    <%= ai_chat_proposal id: "inline_finder", icon: :list_checks do |offer| %>
+      <% offer.claim { safe_join [ "Track ", tag.strong("notice period"), " for everyone?" ] } %>
+      <% offer.meta "e.g. Ana Silva — one month" %>
+      <% offer.accept { button_to "Track this", "#", class: button_classes(:primary, size: :small) } %>
+      <% offer.reject { button_to "No thanks", "#", class: button_classes(size: :small) } %>
+    <% end %>
+    <p>I'll remind you on the 19th.</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_proposal/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_proposal class: "text-xs" do |offer| %>
+    <% offer.claim "Ana is travelling until the 18th" %>
+    <% offer.accept { tag.span("Remember", class: button_classes(:primary, size: :small)) } %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_reasoning/_settled.html.erb

@@ -0,0 +1,6 @@
+<div class="w-[32rem] max-w-full">
+  <%= ai_chat_reasoning duration: 12.4 do |reasoning| %>
+    <% reasoning.block { tag.p("The user wants candidates who haven't replied. Replies are messages on the invitation, so an invitation with no inbound message counts.") } %>
+    <p>First find the job, since "Platform Engineer" could match two.</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_reasoning/_thinking.html.erb

@@ -0,0 +1,5 @@
+<div class="w-[32rem] max-w-full">
+  <%= ai_chat_reasoning streaming: true, open: true do %>
+    <p>Checking which of the three invitations bounced…</p>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_reasoning/_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<div class="w-60 text-xs">
+  <%= ai_chat_reasoning duration: 12, open: true do %><p>First find the job.</p><% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_request/_answered.html.erb

@@ -0,0 +1,10 @@
+<div class="mx-auto flex max-w-xl flex-col gap-4">
+  <%= ai_chat_request state: :accepted do |request| %>
+    <% request.question "Which candidates should get a nudge?", header: "Who", picked: [ "Ana Silva", "Grace Okafor" ] %>
+    <% request.question "How should it sound?", header: "Tone", picked: [ "Friendly" ] %>
+  <% end %>
+  <%= ai_chat_request state: :declined, prompt: "I need a few details to create the job." %>
+  <%= ai_chat_request state: :timed_out do |request| %>
+    <% request.question "Send it now?", picked: [] %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_request/_choices.html.erb

@@ -0,0 +1,13 @@
+<div class="mx-auto max-w-xl">
+  <%= ai_chat_request state: :waiting, url: "#", prompt: "Before I send anything:" do |request| %>
+    <% request.question "Which candidates should get a nudge?", header: "Who", multiple: true do |q| %>
+      <% q.option "Ana Silva", description: "Opened it twice, hasn't answered" %>
+      <% q.option "Grace Okafor", description: "Hasn't opened it" %>
+    <% end %>
+    <% request.question "How should it sound?", header: "Tone" do |q| %>
+      <% q.option "Friendly", description: "A short, warm check-in" %>
+      <% q.option "Direct", description: "The role closes on Friday" %>
+    <% end %>
+    <% request.aside "Or say something else in the box below." %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_request/_form.html.erb

@@ -0,0 +1,9 @@
+<div class="mx-auto max-w-xl">
+  <%= ai_chat_request state: :waiting, url: "#", prompt: "I need a few details to create the job." do |request| %>
+    <% request.form do |form| %>
+      <%= form.field :title, "Job title", required: true %>
+      <%= form.field :salary, "Salary band", hint: "For example, $180–210k" %>
+    <% end %>
+    <% request.decline %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_request/_thumbnail.html.erb

@@ -0,0 +1,8 @@
+<div class="w-64 text-xs">
+  <%= ai_chat_request state: :waiting, url: "#", class: "p-3 text-xs" do |request| %>
+    <% request.question "How should it sound?" do |q| %>
+      <% q.option "Friendly" %>
+      <% q.option "Direct" %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_slash_menu/_composer.html.erb

@@ -0,0 +1,15 @@
+<div class="mx-auto max-w-2xl pt-56">
+  <%= form_with url: "#", id: "slash_composer" do |form| %>
+    <%= ai_chat_composer form: form, field: :content, placeholder: "Type / for a command…" do |composer| %>
+      <% composer.menu do %>
+        <%= ai_chat_slash_menu above: true do |menu| %>
+          <% menu.item "summarise", description: "Summarise the conversation so far" %>
+          <% menu.item "invite", description: "Invite a candidate to a job", arguments: %w[email job] %>
+          <% menu.item "interview", description: "Schedule an interview", arguments: %w[name] %>
+          <% menu.item "nudge", description: "Draft a follow-up for someone who hasn't replied", arguments: %w[name] %>
+          <% menu.item "export", description: "Export the shortlist as a spreadsheet" %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_slash_menu/_thumbnail.html.erb

@@ -0,0 +1,9 @@
+<div class="relative w-64 text-xs">
+  <div class="UnmagicAIChatSlashMenu static mt-0">
+    <ul class="UnmagicAIChatSlashMenu__list">
+      <li class="UnmagicAIChatSlashMenu__item" aria-selected="true"><span class="UnmagicAIChatSlashMenu__name">/invite <span class="UnmagicAIChatSlashMenu__argument">[email]</span></span><span class="UnmagicAIChatSlashMenu__description">Invite a candidate</span></li>
+      <li class="UnmagicAIChatSlashMenu__item"><span class="UnmagicAIChatSlashMenu__name">/interview</span><span class="UnmagicAIChatSlashMenu__description">Schedule one</span></li>
+    </ul>
+  </div>
+  <div class="UnmagicAIChatComposer__box mt-2"><span class="px-2 py-1 text-sm">/in</span></div>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_tool_call/_made.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_tool_call name: "generate_image", state: :done, icon: :lightbulb do |tool| %>
+    <% tool.summary "a red paper lantern" %>
+    <% tool.timing duration: 14.2 %>
+    <% tool.asked({ prompt: "a red paper lantern, night market, soft glow" }) %>
+    <% tool.made do %>
+      <% %w[from-red-500 from-orange-400 from-rose-500].each do |from| %>
+        <div class="grid h-28 w-40 place-items-center rounded-lg bg-gradient-to-br <%= from %> to-neutral-900 text-xs text-white">lantern.png</div>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_tool_call/_run.html.erb

@@ -0,0 +1,25 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat id: "run_entries", follow: false do %>
+    <%= ai_chat_message role: :assistant do %><p>Let me look through the shelves.</p><% end %>
+    <%= ai_chat_tool_call name: "list_shelves", state: :done, icon: :folder do |tool| %>
+      <% tool.timing duration: 0.09 %>
+      <% tool.asked({}) %>
+      <% tool.answered({ shelves: [ "Backgrounds", "Characters", "Props" ] }) %>
+    <% end %>
+    <div data-ai-chat-timeline="gap" hidden></div>
+    <%= ai_chat_tool_call name: "search_files", state: :done, icon: :file, open: true do |tool| %>
+      <% tool.summary "red lantern" %>
+      <% tool.timing duration: 0.64 %>
+      <% tool.asked({ query: "red lantern", shelf: "Props" }) %>
+      <% tool.answered({ files: [ "props/lantern-red.glb", "props/lantern-red-lit.glb" ] }) %>
+    <% end %>
+    <div data-ai-chat-timeline="gap" hidden></div>
+    <%= ai_chat_tool_call name: "read_file", state: :done, icon: :file do |tool| %>
+      <% tool.summary "props/lantern-red.glb" %>
+      <% tool.timing duration: 2.4 %>
+      <% tool.asked({ path: "props/lantern-red.glb" }) %>
+      <% tool.answered "A 3D model: 2,140 triangles, one material, no animations." %>
+    <% end %>
+    <%= ai_chat_message role: :assistant do %><p>There are two red lanterns; the lit one has an emissive material.</p><% end %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_tool_call/_states.html.erb

@@ -0,0 +1,22 @@
+<div class="mx-auto flex max-w-2xl flex-col gap-4">
+  <%= ai_chat_tool_call name: "render_scene", state: :queued, timeline: false %>
+  <%= ai_chat_tool_call name: "render_scene", state: :running, id: "states_render", timeline: false do |tool| %>
+    <% tool.summary "night market" %>
+    <% tool.timing started_at: @now - 72 %>
+    <% tool.progress "Frame 12 of 40" %>
+  <% end %>
+  <%= ai_chat_tool_call name: "ask_person", state: :waiting, timeline: false do |tool| %>
+    <% tool.summary "which lantern?" %>
+  <% end %>
+  <%= ai_chat_tool_call name: "delete_files", state: :done, icon: :folder, timeline: false do |tool| %>
+    <% tool.timing duration: 3.1 %>
+    <% tool.failures 2 %>
+    <% tool.asked({ paths: [ "a.png", "b.png", "c.png" ] }) %>
+    <% tool.answered({ deleted: 1, errors: [ { path: "b.png", error: "locked" }, { path: "c.png", error: "missing" } ] }) %>
+  <% end %>
+  <%= ai_chat_tool_call name: "fetch_page", state: :failed, timeline: false do |tool| %>
+    <% tool.summary "example.com/pricing" %>
+    <% tool.timing duration: 30 %>
+    <% tool.answered "Timed out after 30 seconds" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_tool_call/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="w-60 text-xs">
+  <%= ai_chat id: "thumb_tools", follow: false do %>
+    <%= ai_chat_tool_call name: "list_shelves", state: :done, icon: :folder do |tool| %><% tool.timing duration: 0.09 %><% end %>
+    <%= ai_chat_tool_call name: "search_files", state: :done, icon: :file do |tool| %><% tool.timing duration: 0.64 %><% end %>
+    <%= ai_chat_tool_call name: "render_scene", state: :running do |tool| %><% tool.timing started_at: @now - 72 %><% end %>
+  <% end %>
+</div>