Agentix.Components (Agentix v0.1.0)

Copy Markdown View Source

Default function components for rendering an Agentix.Chat conversation.

Optional sugar over the headless projection (Agentix.Chat): import Agentix.Components and render the assigns, or run mix agentix.gen.components to copy an editable version into your project. message/1 exposes a :bubble slot; the pending controls switch on pending[id].kind (not the executor).

Styling

Tailwind utility classes (stock neutral scale + emerald/red/amber semantics, darkMode: 'class') in a flat, borderless style — full-width turn rows on hairline dividers. Two small extras the host opts into:

  • grouping — give the thread the agentix-thread class to collapse each turn (a user message, or an assistant message with its tool calls) into one block with a single header (the CSS lives in Agentix.Components.css/0);
  • JS hooksAgentixStream (streaming text) and AgentixComposer (auto-grow + Enter-to-send), shipped at priv/static/agentix_stream_hook.js.

Interactive controls emit phx-click/phx-submit events for the host to wire to Agentix.Chat: "send" (composer), "approve"/"deny" (phx-value-id), and "resolve" (a form carrying tool_call_id + answer/result).

Summary

Functions

The message composer: an auto-growing textarea with a send/stop control. Emits phx-submit="send" (text field text); when streaming? it shows a Stop button (phx-click="cancel"). Needs the AgentixComposer JS hook for Enter-to-send.

The CSS for turn grouping and the reasoning chevron. Inline once.

An inline error/warning banner.

Renders one finalized message as a flat row. A :bubble slot replaces the default body. The data-group attribute ("user" for user messages, "agent" for assistant and tool messages) drives turn grouping: every assistant + tool row of one turn collapses under a single header (see css/0). Tool messages render as a headerless card, never their own "Tool" header — they are part of the assistant's turn.

Renders the conversation: a grouped thread of finalized messages, the in-progress assistant turn (running tools + streaming text), and pending controls. messages accepts a Phoenix.LiveView stream or a list of {dom_id, %ReqLLM.Message{}} pairs.

Renders the pending affordance for a tool call, switching on its kind.

A collapsed reasoning panel for a finalized turn's thinking.

The element the JS streaming hook writes into (text + thinking child nodes).

A tool call row. status is :running | :ok | :error; meta (a short progress label) and result (the full result, shown in an expandable inspector) are optional.

Functions

composer(assigns)

The message composer: an auto-growing textarea with a send/stop control. Emits phx-submit="send" (text field text); when streaming? it shows a Stop button (phx-click="cancel"). Needs the AgentixComposer JS hook for Enter-to-send.

Attributes

  • streaming? (:boolean) - Defaults to false.
  • placeholder (:string) - Defaults to "Message the assistant…".

css()

@spec css() :: String.t()

The CSS for turn grouping and the reasoning chevron. Inline once.

error(assigns)

An inline error/warning banner.

Attributes

  • variant (:atom) - Defaults to :error.
  • title (:string) (required)

Slots

  • inner_block

message(assigns)

Renders one finalized message as a flat row. A :bubble slot replaces the default body. The data-group attribute ("user" for user messages, "agent" for assistant and tool messages) drives turn grouping: every assistant + tool row of one turn collapses under a single header (see css/0). Tool messages render as a headerless card, never their own "Tool" header — they are part of the assistant's turn.

Attributes

  • id (:string) - Defaults to nil.
  • message (:map) (required)

Slots

  • bubble

message_list(assigns)

Renders the conversation: a grouped thread of finalized messages, the in-progress assistant turn (running tools + streaming text), and pending controls. messages accepts a Phoenix.LiveView stream or a list of {dom_id, %ReqLLM.Message{}} pairs.

Attributes

  • id (:string) - Defaults to "agentix-messages".
  • messages (:any) - Defaults to [].
  • streaming_message (:map) - Defaults to nil.
  • in_flight_tools (:map) - Defaults to %{}.
  • pending (:map) - Defaults to %{}.
  • assistant_open (:boolean) - true once the current assistant turn has shown a header; continuation rows then render headerless. Defaults to false.

pending(assigns)

Renders the pending affordance for a tool call, switching on its kind.

Attributes

  • id (:string) (required)
  • entry (:map) (required)

reasoning(assigns)

A collapsed reasoning panel for a finalized turn's thinking.

Attributes

  • label (:string) - Defaults to "Reasoning".

Slots

  • inner_block (required)

streaming_message(assigns)

The element the JS streaming hook writes into (text + thinking child nodes).

Attributes

  • message (:map) (required)

tool(assigns)

A tool call row. status is :running | :ok | :error; meta (a short progress label) and result (the full result, shown in an expandable inspector) are optional.

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • status (:atom) - Defaults to :running.
  • meta (:string) - Defaults to nil.
  • result (:string) - Defaults to nil.