DevactionUI.AiPrompt (devaction_ui v0.2.3)

Copy Markdown View Source

The field that talks to the AI: a pill in ink with the amber dot, a text field and a round send button. It is a form, so Enter sends; the LiveView gets event with %{name => text} (%{"prompt" => "..."} by default). The field is required, so an empty send never leaves the browser.

loading marks the form aria-busy and disables the send button while the AI answers; disabled locks the whole field. streaming is the answer arriving: the form is busy and, with on_stop (and its stop_label), the send button becomes a stop button that sends that event; its icon is the stop slot. The attachments slot is what goes with the question (chips of files, a pasted link), drawn by the caller between the amber dot and the field. LiveView does not overwrite a field that has focus, so the text stays after a send: to clear it, render the component with a new id (it remounts empty).

The pill is bg-ink with text-on-primary and the button bg-card text-ink: the tokens swap together, so in the dark theme it is a light pill with a dark button, on purpose (the canvas only draws the light one).

Summary

Functions

ai_prompt(assigns)

Functions

ai_prompt(assigns)

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to "prompt".
  • value (:string) - Defaults to "".
  • label (:string) (required) - what the field is, for assistive technology.
  • placeholder (:string) - Defaults to nil.
  • event (:string) (required)
  • send_label (:string) (required) - the name of the send button.
  • loading (:boolean) - an answer is on its way: the send button is off. Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • streaming (:boolean) - the answer is arriving: busy, and a stop button instead of send when on_stop is set. Defaults to false.
  • on_stop (:string) - the event of the stop button. Defaults to nil.
  • stop_label (:string) - the name of the stop button; on_stop needs it. Defaults to nil.
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon (required) - the arrow of the send button, drawn by the caller.
  • stop - the icon of the stop button, drawn by the caller.
  • attachments - what goes with the question, between the dot and the field.