defmodule OpenAgentsWeb.AI.PromptInput do

  @moduledoc """

  The composer: everything between a reader's cursor and a submitted turn.

  Ported from Vercel's AI Elements (MIT) — `prompt-input.tsx`, `attachments.tsx`,

  `speech-input.tsx`, `mic-selector.tsx`, `model-selector.tsx`, and `queue.tsx`.

  The Tailwind is the point of the port and is carried across close to

  verbatim; the React around it is not. Four things changed on the way, and

  each one is a rule of this repo rather than a preference:

    * **No React, no Radix, no client state library.** The source keeps input

      text, attachment lists, recording state, and menu state in hooks and

      contexts. Here the caller owns all of it: components take what to draw

      and emit events. The three behaviors markup cannot express — auto-resize

      with Enter-to-submit, microphone capture, and incremental filtering — are

      colocated LiveView hooks, per `AGENTS.md`.

    * **Forms are Phoenix's.** `prompt_input/1` is `Phoenix.Component.form/1`

      driven by a `to_form/2` assign with a required DOM id, and

      `prompt_input_textarea/1` takes a `Phoenix.HTML.FormField`. It renders

      `OpenAgentsWeb.UI.textarea/1` rather than `UI.input/1` because `input/1`

      wraps its control in a `.field` with a bottom margin, and the input group

      needs the control to be a direct flex child.

    * **`bg-accent` means something else here.** In shadcn, `--accent` is a

      quiet hover surface. In OpenAgents it is the indigo brand color (see the

      deliberate name collision noted in `assets/css/app.css`), so every

      `hover:bg-accent` in the source is `hover:bg-muted` here, and

      `hover:text-accent-foreground` is `hover:text-foreground`. Keeping the

      source class would have painted indigo on every hover.

    * **`dark:` is dead in this bundle.** Basecoat declares the variant as

      `&:is(html.dark *)`, and this app themes by `data-theme` on `:root`, so

      every `dark:` utility in the source would compile to a selector that

      never matches. They are dropped rather than left as noise; the palette

      already inverts through the token ladder.

  Icons go through `OpenAgentsWeb.UI.icon/1` and the vendored Apps SDK set

  only. The `lucide-react` glyphs map as: `CornerDownLeft` to

  `arrow-curved-left`, `Square` to `stop`, `X` to `x`, `Spinner` to `spin`,

  `Plus` to `plus`, `Image` to `image-square`, `Monitor` to `desktop`, `Mic` to

  `mic`, `Paperclip` to `paperclip`, `FileText` to `file-document`, `Globe` to

  `globe`, `Music2` to `music`, `Video` to `video`, `ChevronDown` to

  `chevron-down`, and `ChevronsUpDown` to `chevron-up-down`. No Heroicons

  fallback was needed, so `docs/ICONS.md` gains no inventory entry.

  """

  use Phoenix.Component

  alias OpenAgentsWeb.UI

  # ── Shared class recipes ──────────────────────────────────────────────────

  # The shadcn `input-group` primitive is not vendored into this app's CSS

  # bundle (`assets/css/app.css` imports Basecoat components one at a time and

  # `input-group` is not on the list), so its structure lives here as the same

  # utilities the primitive composes. That is what the port asked for anyway.

  @input_group """

  group/input-group relative flex w-full min-w-0 items-center rounded-md border \

  border-input shadow-xs outline-none transition-[color,box-shadow] \

  h-9 has-[>textarea]:h-auto \

  has-[>[data-align=inline-start]]:[&>input]:pl-2 \

  has-[>[data-align=inline-end]]:[&>input]:pr-2 \

  has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col \

  has-[>[data-align=block-start]]:[&>input]:pb-3 \

  has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col \

  has-[>[data-align=block-end]]:[&>input]:pt-3 \

  has-[[data-slot=input-group-control]:focus-visible]:border-ring \

  has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 \

  has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] \

  has-[[data-slot][aria-invalid=true]]:border-destructive \

  has-[[data-slot][aria-invalid=true]]:ring-destructive/20\

  """

  @addon """

  flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 \

  text-sm font-medium text-muted-foreground \

  [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] \

  group-data-[disabled=true]/input-group:opacity-50 \

  order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 \

  group-has-[>input]/input-group:pb-2.5\

  """

  @button_base "flex min-w-0 items-center gap-2 text-sm shadow-none"

  @command_item """

  flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 \

  text-sm outline-none hover:bg-muted hover:text-foreground \

  aria-selected:bg-muted aria-selected:text-foreground \

  data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 \

  [&>svg:not([class*='size-'])]:size-4\

  """

  @statuses [:ready, :submitted, :streaming, :error]

  @variants [:grid, :inline, :list]

  @sizes [:xs, :sm, :icon_xs, :icon_sm]

  # ── PromptInput: the form shell ───────────────────────────────────────────

  @doc """

  The composer form: a `Phoenix.Component.form/1` wrapping the input group.

  The source renders a hidden `<input type="file">` beside the form and drives

  it from React context. The same input is rendered here and driven by the

  colocated `.PromptInput` hook, which also carries the two behaviors the

  source keeps in JavaScript for the same reason: dropped and pasted files are

  written onto the file input through a `DataTransfer` so a normal

  `phx-change` upload sees them, and drag state is published as `data-dragging`

  on the form so the `drop_overlay` slot can appear.

  `accept`, `multiple`, and the upload name are attributes because the file

  transport is the LiveView's business, not this component's.

  """

  attr :id, :string, required: true

  attr :for, :any, required: true, doc: "a `to_form/2` result"

  attr :accept, :string, default: nil, doc: ~s(such as "image/*")

  attr :multiple, :boolean, default: true

  attr :file_input_name, :string, default: nil, doc: "name for the hidden file input"

  attr :submit_on_enter, :boolean,

    default: true,

    doc: "Enter submits and Shift+Enter inserts a newline"

  attr :backspace_event, :string,

    default: nil,

    doc: """

    pushed when Backspace is pressed in an empty textarea, which is how the

    source removes the last attachment

    """

  attr :class, :any, default: nil

  attr :group_class, :any, default: nil

  attr :rest, :global, include: ~w(method action)

  slot :inner_block, required: true

  slot :drop_overlay, doc: "shown while files are dragged over the composer"

  def prompt_input(assigns) do

    ~H"""

    <div class="contents">

      <input

        type="file"

        id={"#{@id}-files"}

        name={@file_input_name}

        accept={@accept}

        multiple={@multiple}

        aria-label="Upload files"

        title="Upload files"

        class="hidden"

      />

      <.form

        for={@for}

        id={@id}

        class={["group/prompt-input relative w-full", @class]}

        phx-hook=".PromptInput"

        data-file-input={"#{@id}-files"}

        data-submit-on-enter={to_string(@submit_on_enter)}

        data-backspace-event={@backspace_event}

        data-dragging="false"

        {@rest}

      >

        <div

          role="group"

          data-slot="input-group"

          class={[input_group(), "overflow-hidden", @group_class]}

        >

          {render_slot(@inner_block)}

        </div>

        <div

          :if={@drop_overlay != []}

          aria-hidden="true"

          class={[

            "pointer-events-none absolute inset-0 hidden items-center justify-center",

            "rounded-md bg-background/80 text-muted-foreground text-sm backdrop-blur-sm",

            "group-data-[dragging=true]/prompt-input:flex"

          ]}

        >

          {render_slot(@drop_overlay)}

        </div>

      </.form>

    </div>

    <script :type={Phoenix.LiveView.ColocatedHook} name=".PromptInput">

      export default {

        mounted() {

          this.textarea = this.el.querySelector("textarea[data-slot='input-group-control']")

          this.fileInput = document.getElementById(this.el.dataset.fileInput)

          this.composing = false

          this.dragDepth = 0

          this.resize = () => {

            const el = this.textarea

            if (!el) return

            // `field-sizing-content` already does this where it is supported.

            // This keeps the control honest everywhere else, and the reset to

            // "auto" must run before scrollHeight is read or the box grows

            // without ever shrinking again.

            el.style.height = "auto"

            el.style.height = `${el.scrollHeight}px`

          }

          this.onCompositionStart = () => { this.composing = true }

          this.onCompositionEnd = () => { this.composing = false }

          this.onKeyDown = (event) => {

            if (event.key === "Enter" && this.el.dataset.submitOnEnter === "true") {

              if (this.composing || event.isComposing || event.shiftKey) return

              event.preventDefault()

              const submit = this.el.querySelector("button[type='submit']")

              if (submit && submit.disabled) return

              this.el.requestSubmit()

              return

            }

            const backspaceEvent = this.el.dataset.backspaceEvent

            if (event.key === "Backspace" && backspaceEvent && event.currentTarget.value === "") {

              event.preventDefault()

              this.pushEvent(backspaceEvent, {})

            }

          }

          this.adopt = (fileList) => {

            if (!this.fileInput || !fileList || fileList.length === 0) return false

            const transfer = new DataTransfer()

            if (this.fileInput.multiple) {

              for (const file of this.fileInput.files) transfer.items.add(file)

            }

            for (const file of fileList) transfer.items.add(file)

            this.fileInput.files = transfer.files

            this.fileInput.dispatchEvent(new Event("input", { bubbles: true }))

            this.fileInput.dispatchEvent(new Event("change", { bubbles: true }))

            return true

          }

          this.onPaste = (event) => {

            const files = []

            for (const item of event.clipboardData?.items ?? []) {

              if (item.kind !== "file") continue

              const file = item.getAsFile()

              if (file) files.push(file)

            }

            if (files.length > 0 && this.adopt(files)) event.preventDefault()

          }

          this.onDragEnter = (event) => {

            if (!event.dataTransfer?.types?.includes("Files")) return

            this.dragDepth += 1

            this.el.dataset.dragging = "true"

          }

          this.onDragOver = (event) => {

            if (event.dataTransfer?.types?.includes("Files")) event.preventDefault()

          }

          this.onDragLeave = () => {

            this.dragDepth = Math.max(0, this.dragDepth - 1)

            if (this.dragDepth === 0) this.el.dataset.dragging = "false"

          }

          this.onDrop = (event) => {

            if (!event.dataTransfer?.types?.includes("Files")) return

            event.preventDefault()

            this.dragDepth = 0

            this.el.dataset.dragging = "false"

            this.adopt(event.dataTransfer.files)

          }

          if (this.textarea) {

            this.textarea.addEventListener("input", this.resize)

            this.textarea.addEventListener("keydown", this.onKeyDown)

            this.textarea.addEventListener("paste", this.onPaste)

            this.textarea.addEventListener("compositionstart", this.onCompositionStart)

            this.textarea.addEventListener("compositionend", this.onCompositionEnd)

            this.resize()

          }

          this.el.addEventListener("dragenter", this.onDragEnter)

          this.el.addEventListener("dragover", this.onDragOver)

          this.el.addEventListener("dragleave", this.onDragLeave)

          this.el.addEventListener("drop", this.onDrop)

        },

        updated() { this.resize() },

        destroyed() {

          if (this.textarea) {

            this.textarea.removeEventListener("input", this.resize)

            this.textarea.removeEventListener("keydown", this.onKeyDown)

            this.textarea.removeEventListener("paste", this.onPaste)

            this.textarea.removeEventListener("compositionstart", this.onCompositionStart)

            this.textarea.removeEventListener("compositionend", this.onCompositionEnd)

          }

          this.el.removeEventListener("dragenter", this.onDragEnter)

          this.el.removeEventListener("dragover", this.onDragOver)

          this.el.removeEventListener("dragleave", this.onDragLeave)

          this.el.removeEventListener("drop", this.onDrop)

        },

      }

    </script>

    """

  end

  @doc """

  A transparent grouping wrapper, so a caller can compose the composer's parts

  in one block without adding a box to the flex layout.

  """

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_body(assigns) do

    ~H"""

    <div class={["contents", @class]} {@rest}>{render_slot(@inner_block)}</div>

    """

  end

  @doc """

  The message control.

  Takes a `Phoenix.HTML.FormField` so the id, name, and value come from the

  form the shell is already driving. The class strip is the source's

  `field-sizing-content max-h-48 min-h-16` on top of the input-group control

  recipe, which flattens the vendored `.textarea` border, radius, background,

  and focus ring — in an input group the *group* carries all four.

  """

  attr :id, :string, default: nil

  attr :field, Phoenix.HTML.FormField, default: nil

  attr :name, :string, default: nil

  attr :value, :string, default: nil

  attr :placeholder, :string, default: "What would you like to know?"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(autocomplete disabled maxlength readonly required rows)

  def prompt_input_textarea(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do

    assigns

    |> assign(:field, nil)

    |> assign(:id, assigns.id || field.id)

    |> assign(:name, field.name)

    |> assign(:value, Phoenix.HTML.Form.normalize_value("textarea", field.value))

    |> prompt_input_textarea()

  end

  def prompt_input_textarea(assigns) do

    ~H"""

    <UI.textarea

      id={@id}

      name={@name}

      value={@value}

      placeholder={@placeholder}

      data-slot="input-group-control"

      class={[

        "field-sizing-content max-h-48 min-h-16",

        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none",

        "focus-visible:ring-0",

        @class

      ]}

      {@rest}

    />

    """

  end

  @doc """

  The strip above the control. Attachments live here.

  The source aligns this addon `block-end` and then reorders it with

  `order-first`, which is the shape kept below: the input group's flex-column

  branch keys off `data-align`, and `order-first` is what actually lifts it.

  """

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_header(assigns) do

    ~H"""

    <div

      role="group"

      data-slot="input-group-addon"

      data-align="block-end"

      class={[addon(), "order-first flex-wrap gap-1", @class]}

      {@rest}

    >

      {render_slot(@inner_block)}

    </div>

    """

  end

  @doc "The strip below the control: tools on one side, submit on the other."

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_footer(assigns) do

    ~H"""

    <div

      role="group"

      data-slot="input-group-addon"

      data-align="block-end"

      class={[addon(), "justify-between gap-1", @class]}

      {@rest}

    >

      {render_slot(@inner_block)}

    </div>

    """

  end

  @doc """

  The composer toolbar. The same shape as `prompt_input_footer/1`, which is the

  name the current source gives it; `toolbar` is kept because that is what the

  part is called everywhere else in AI Elements.

  """

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_toolbar(assigns) do

    ~H"""

    <.prompt_input_footer class={@class} {@rest}>

      {render_slot(@inner_block)}

    </.prompt_input_footer>

    """

  end

  @doc "A run of controls inside the toolbar."

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_tools(assigns) do

    ~H"""

    <div class={["flex min-w-0 items-center gap-1", @class]} {@rest}>

      {render_slot(@inner_block)}

    </div>

    """

  end

  @doc """

  A composer control.

  Renders `OpenAgentsWeb.UI.button/1` with the source's input-group button

  sizing on top, so the product's own button grammar keeps the color and focus

  treatment while the composer keeps AI Elements' geometry.

  The source wraps this in a Radix tooltip. There is no Radix here and the repo

  has no tooltip primitive, so `tooltip` becomes the native `title` attribute:

  the same text, reachable by pointer but not by keyboard. An icon-only control

  still needs its own `aria-label`.

  """

  attr :variant, :atom,

    values: [:primary, :secondary, :outline, :ghost, :destructive],

    default: :ghost

  attr :size, :atom, values: @sizes, default: :icon_sm

  attr :tooltip, :string, default: nil

  attr :type, :string, default: "button"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled form name value popovertarget popovertargetaction)

  slot :inner_block, required: true

  def prompt_input_button(assigns) do

    ~H"""

    <UI.button

      type={@type}

      variant={@variant}

      title={@tooltip}

      class={[button_base(), button_size_class(@size), @class]}

      {@rest}

    >

      {render_slot(@inner_block)}

    </UI.button>

    """

  end

  @doc """

  The send control, and the stop control while a turn is in flight.

  `status` is the caller's: `:ready`, `:submitted`, `:streaming`, or `:error` —

  the same four `ChatStatus` values the source reads. `:submitted` and

  `:streaming` are "generating", which renames the control to **Stop**; given

  `on_stop`, the control also stops being a submit button, exactly as the

  source does, so pressing it aborts rather than sending a second turn.

  """

  attr :id, :string, default: nil

  attr :status, :atom, values: @statuses, default: :ready

  attr :on_stop, :any, default: nil, doc: "a `Phoenix.LiveView.JS` command or event name"

  attr :label, :string, default: nil, doc: "overrides the derived accessible name"

  attr :size, :atom, values: @sizes, default: :icon_sm

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled form name value)

  slot :inner_block

  def prompt_input_submit(assigns) do

    generating? = assigns.status in [:submitted, :streaming]

    assigns =

      assigns

      |> assign(:generating?, generating?)

      |> assign(:stopping?, generating? and not is_nil(assigns.on_stop))

    ~H"""

    <UI.button

      id={@id}

      type={if @stopping?, do: "button", else: "submit"}

      variant={:primary}

      phx-click={@stopping? && @on_stop}

      aria-label={@label || if(@generating?, do: "Stop", else: "Submit")}

      data-status={@status}

      class={[button_base(), button_size_class(@size), "justify-center", @class]}

      {@rest}

    >

      <%= if @inner_block != [] do %>

        {render_slot(@inner_block)}

      <% else %>

        <UI.icon :if={@status == :ready} name="arrow-curved-left" class="size-4" />

        <UI.icon :if={@status == :submitted} name="spin" class="size-4 animate-spin" />

        <UI.icon :if={@status == :streaming} name="stop" class="size-4" />

        <UI.icon :if={@status == :error} name="x" class="size-4" />

      <% end %>

    </UI.button>

    """

  end

  # ── Action menu ───────────────────────────────────────────────────────────

  @doc """

  The composer's add menu.

  A native `popover`, the same bounded disclosure `OpenAgentsWeb.UI.menu/1`

  documents, rather than a port of Radix's dropdown. Render the trigger with

  `prompt_input_action_menu_trigger/1` and give it this menu's id.

  """

  attr :id, :string, required: true

  attr :label, :string, default: "Composer actions"

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_action_menu(assigns) do

    ~H"""

    <UI.menu id={@id} label={@label} class={["min-w-56 p-1", @class]} {@rest}>

      {render_slot(@inner_block)}

    </UI.menu>

    """

  end

  @doc "Opens the action menu. Defaults to the source's plus glyph."

  attr :id, :string, default: nil

  attr :menu, :string, required: true, doc: "the `prompt_input_action_menu/1` id"

  attr :label, :string, default: "Open composer actions"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled)

  slot :inner_block

  def prompt_input_action_menu_trigger(assigns) do

    ~H"""

    <.prompt_input_button

      id={@id}

      aria-label={@label}

      popovertarget={@menu}

      popovertargetaction="toggle"

      class={@class}

      {@rest}

    >

      <%= if @inner_block != [] do %>

        {render_slot(@inner_block)}

      <% else %>

        <UI.icon name="plus" class="size-4" />

      <% end %>

    </.prompt_input_button>

    """

  end

  @doc "The action menu's own body, for grouping items."

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def prompt_input_action_menu_content(assigns) do

    ~H"""

    <div class={["flex flex-col gap-0.5", @class]} {@rest}>{render_slot(@inner_block)}</div>

    """

  end

  @doc "One action in the menu."

  attr :id, :string, default: nil

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled form name value popovertarget popovertargetaction)

  slot :inner_block, required: true

  def prompt_input_action_menu_item(assigns) do

    ~H"""

    <button id={@id} type="button" role="menuitem" class={[command_item(), @class]} {@rest}>

      {render_slot(@inner_block)}

    </button>

    """

  end

  @doc """

  The menu item that opens the file dialog.

  The source calls `attachments.openFileDialog()` through React context. Here

  the item is a label pointing at the composer's hidden file input, so the

  browser opens the dialog and no JavaScript is involved at all.

  """

  attr :id, :string, default: nil

  attr :for, :string, required: true, doc: "the `prompt_input/1` id"

  attr :label, :string, default: "Add photos or files"

  attr :class, :any, default: nil

  attr :rest, :global

  def prompt_input_action_add_attachments(assigns) do

    ~H"""

    <label

      id={@id}

      role="menuitem"

      tabindex="0"

      for={"#{@for}-files"}

      class={[command_item(), "cursor-pointer", @class]}

      {@rest}

    >

      <UI.icon name="image-square" class="mr-2 size-4" />{@label}

    </label>

    """

  end

  @doc """

  The menu item that captures the screen.

  Screen capture is `getDisplayMedia`, which only a user gesture on the client

  can start, so the item carries `phx-click` for the LiveView to hear and the

  capture stays the caller's to wire. The source's inline canvas capture is

  deliberately not reimplemented: it produces a `File`, and file transport

  belongs to the LiveView's uploader.

  """

  attr :id, :string, default: nil

  attr :label, :string, default: "Take screenshot"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled)

  def prompt_input_action_add_screenshot(assigns) do

    ~H"""

    <button id={@id} type="button" role="menuitem" class={[command_item(), @class]} {@rest}>

      <UI.icon name="desktop" class="mr-2 size-4" />{@label}

    </button>

    """

  end

  # ── Model select, in the composer toolbar ─────────────────────────────────

  @doc """

  The model picker that sits in the composer toolbar.

  A native `<select>`. Radix's Select splits into Trigger, Value, Content, and

  Item so that a `<div>` can pretend to be a control; a real `<select>` is one

  element that already has the keyboard behavior, the typeahead, and the mobile

  treatment, so the split has nothing left to describe. The source's trigger

  classes are carried onto it, minus `bg-accent` — see the module note.

  """

  attr :id, :string, default: nil

  attr :name, :string, default: nil

  attr :value, :any, default: nil

  attr :label, :string, default: "Model"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled form required)

  slot :inner_block, required: true

  def prompt_input_model_select(assigns) do

    ~H"""

    <select

      id={@id}

      name={@name}

      aria-label={@label}

      class={[

        "h-8 rounded-md border-none bg-transparent px-2 font-medium text-muted-foreground text-sm",

        "shadow-none transition-colors",

        "hover:bg-muted hover:text-foreground",

        "aria-expanded:bg-muted aria-expanded:text-foreground",

        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",

        @class

      ]}

      {@rest}

    >

      {render_slot(@inner_block, @value)}

    </select>

    """

  end

  @doc "One model in `prompt_input_model_select/1`."

  attr :value, :string, required: true

  attr :selected, :boolean, default: false

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled)

  slot :inner_block, required: true

  def prompt_input_model_select_item(assigns) do

    ~H"""

    <option value={@value} selected={@selected} class={@class} {@rest}>

      {render_slot(@inner_block)}

    </option>

    """

  end

  # ── Attachments ───────────────────────────────────────────────────────────

  @doc """

  The list of things attached to the next turn.

  `variant` is the source's: `:grid` for the thumbnail strip above the control,

  `:inline` for chips beside it, `:list` for a stacked review. Each child

  `attachment/1` must be told the same variant — React passed it down through

  context, and HEEx has no context.

  """

  attr :id, :string, default: nil

  attr :variant, :atom, values: @variants, default: :grid

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def attachments(assigns) do

    ~H"""

    <div

      id={@id}

      data-slot="attachments"

      data-variant={@variant}

      class={[

        "flex items-start",

        @variant == :list && "flex-col gap-2",

        @variant != :list && "flex-wrap gap-2",

        @variant == :grid && "ml-auto w-fit",

        @class

      ]}

      {@rest}

    >

      {render_slot(@inner_block)}

    </div>

    """

  end

  @doc "One attachment."

  attr :id, :string, default: nil

  attr :variant, :atom, values: @variants, default: :grid

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block, required: true

  def attachment(assigns) do

    ~H"""

    <div

      id={@id}

      data-slot="attachment"

      data-variant={@variant}

      class={[

        "group/attachment relative",

        @variant == :grid && "size-24 overflow-hidden rounded-lg",

        @variant == :inline &&

          [

            "flex h-8 cursor-pointer select-none items-center gap-1.5",

            "rounded-md border border-border px-1.5",

            "font-medium text-sm transition-all",

            "hover:bg-muted hover:text-foreground"

          ],

        @variant == :list &&

          [

            "flex w-full items-center gap-3 rounded-lg border p-3",

            "hover:bg-muted/50"

          ],

        @class

      ]}

      {@rest}

    >

      {render_slot(@inner_block)}

    </div>

    """

  end

  @doc """

  The attachment's thumbnail.

  An image or a video poster when `src` is given and the media category can

  show one; otherwise the glyph for the category, which is how the source

  distinguishes an audio file from a document at a glance.

  """

  attr :variant, :atom, values: @variants, default: :grid

  attr :media_category, :atom,

    values: [:image, :video, :audio, :document, :source, :unknown],

    default: :unknown

  attr :src, :string, default: nil

  attr :filename, :string, default: nil

  attr :class, :any, default: nil

  attr :rest, :global

  def attachment_preview(assigns) do

    ~H"""

    <div

      data-slot="attachment-preview"

      class={[

        "flex shrink-0 items-center justify-center overflow-hidden",

        @variant == :grid && "size-full bg-muted",

        @variant == :inline && "size-5 rounded bg-background",

        @variant == :list && "size-12 rounded bg-muted",

        @class

      ]}

      {@rest}

    >

      <img

        :if={@media_category == :image and @src}

        src={@src}

        alt={@filename || "Image"}

        width={if @variant == :grid, do: "96", else: "20"}

        height={if @variant == :grid, do: "96", else: "20"}

        class={["size-full object-cover", @variant != :grid && "rounded"]}

      />

      <video

        :if={@media_category == :video and @src}

        src={@src}

        muted

        class="size-full object-cover"

      />

      <UI.icon

        :if={is_nil(@src) or @media_category not in [:image, :video]}

        name={media_icon(@media_category)}

        class={[if(@variant == :inline, do: "size-3", else: "size-4"), "text-muted-foreground"]}

      />

    </div>

    """

  end

  @doc """

  The attachment's name, and optionally its media type.

  Renders nothing in the `:grid` variant, where the thumbnail is the whole

  item — the same early return the source makes.

  """

  attr :label, :string, required: true

  attr :variant, :atom, values: @variants, default: :inline

  attr :media_type, :string, default: nil

  attr :class, :any, default: nil

  attr :rest, :global

  def attachment_info(assigns) do

    ~H"""

    <div

      :if={@variant != :grid}

      data-slot="attachment-info"

      class={["min-w-0 flex-1", @class]}

      {@rest}

    >

      <span class="block truncate">{@label}</span>

      <span :if={@media_type} class="block truncate text-muted-foreground text-xs">

        {@media_type}

      </span>

    </div>

    """

  end

  @doc """

  Removes one attachment.

  In `:grid` and `:inline` the control is revealed on hover, as in the source.

  That hides a control from a pointer user until they look for it, and it must

  not hide it from anyone else, so the visible label stays `sr-only`, the

  button keeps its own `aria-label`, and `focus-visible` reveals it as well.

  """

  attr :id, :string, default: nil

  attr :variant, :atom, values: @variants, default: :grid

  attr :label, :string, default: "Remove"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled form name value)

  slot :inner_block

  def attachment_remove(assigns) do

    ~H"""

    <UI.button

      id={@id}

      type="button"

      variant={:ghost}

      aria-label={@label}

      data-slot="attachment-remove"

      class={[

        @variant == :grid &&

          [

            "absolute top-2 right-2 size-6 rounded-full p-0",

            "bg-background/80 backdrop-blur-sm",

            "opacity-0 transition-opacity group-hover/attachment:opacity-100 focus-visible:opacity-100",

            "hover:bg-background",

            "[&>svg]:size-3"

          ],

        @variant == :inline &&

          [

            "size-5 rounded p-0",

            "opacity-0 transition-opacity group-hover/attachment:opacity-100 focus-visible:opacity-100",

            "[&>svg]:size-2.5"

          ],

        @variant == :list && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],

        @class

      ]}

      {@rest}

    >

      <%= if @inner_block != [] do %>

        {render_slot(@inner_block)}

      <% else %>

        <UI.icon name="x" />

      <% end %>

      <span class="sr-only">{@label}</span>

    </UI.button>

    """

  end

  @doc "What stands in for the attachment list when nothing is attached."

  attr :id, :string, default: nil

  attr :class, :any, default: nil

  attr :rest, :global

  slot :inner_block

  def attachment_empty(assigns) do

    ~H"""

    <div

      id={@id}

      data-slot="attachment-empty"

      class={["flex items-center justify-center p-4 text-muted-foreground text-sm", @class]}

      {@rest}

    >

      <%= if @inner_block != [] do %>

        {render_slot(@inner_block)}

      <% else %>

        No attachments

      <% end %>

    </div>

    """

  end

  # ── Speech input ──────────────────────────────────────────────────────────

  @doc """

  Push-to-talk.

  The source detects the Web Speech API, falls back to `MediaRecorder`, and

  disables itself when neither exists. All three live in the colocated

  `.SpeechInput` hook, which publishes what it found as `data-mode` and its

  state as `data-recording` and `data-processing` on the wrapper, so the whole

  visual treatment — including the three staggered ping rings — is CSS keyed

  off attributes rather than a React render.

  Recognized text is pushed to the LiveView as `transcript_event` with a

  `"text"` key. Recorded audio cannot travel in a LiveView event, so in the

  `MediaRecorder` fallback the hook writes the blob onto the file input named

  by `audio_input` and lets the caller's uploader carry it. Without one, the

  control disables itself in that fallback, which is what the source does when

  no `onAudioRecorded` callback is given.

  """

  attr :id, :string, required: true

  attr :transcript_event, :string, required: true

  attr :audio_input, :string, default: nil, doc: "id of a file input for the recorded audio"

  attr :lang, :string, default: "en-US"

  attr :label, :string, default: "Start voice input"

  attr :stop_label, :string, default: "Stop voice input"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(disabled)

  def speech_input(assigns) do

    ~H"""

    <div

      id={@id}

      class="group/speech relative inline-flex items-center justify-center"

      phx-hook=".SpeechInput"

      data-recording="false"

      data-processing="false"

      data-lang={@lang}

      data-transcript-event={@transcript_event}

      data-audio-input={@audio_input}

    >

      <div

        :for={index <- 0..2}

        aria-hidden="true"

        class={[

          "absolute inset-0 hidden animate-ping rounded-full border-2 border-destructive/30",

          "group-data-[recording=true]/speech:block"

        ]}

        style={"animation-delay: #{index * 0.3}s; animation-duration: 2s"}

      >

      </div>

      <UI.button

        id={"#{@id}-button"}

        type="button"

        variant={:primary}

        aria-label={@label}

        data-label={@label}

        data-stop-label={@stop_label}

        class={[

          "relative z-10 size-8 justify-center rounded-full p-0 transition-all duration-300",

          "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",

          "group-data-[recording=true]/speech:bg-destructive",

          "group-data-[recording=true]/speech:text-white",

          "group-data-[recording=true]/speech:hover:bg-destructive/80",

          @class