Shared UI primitives used across the Omni.UI component kit.
Imported automatically by use Omni.UI. These are general-purpose
layout and control components (panels, selects, notifications) used by
both the chat pipeline and the surrounding chrome (sessions sidebar,
files panel).
Summary
Functions
Collapsible section with an icon and optional toggle label.
Stacked toaster for in-app notifications.
Flex column layout with a header and scrollable body.
Three-column header bar with a title and optional left/right action slots.
Dropdown select with support for grouped options.
Formatted time display with tooltip showing full date.
Compact display of token counts and cost.
Prev/next navigation with position indicator (e.g. "2/3").
Functions
Collapsible section with an icon and optional toggle label.
Attributes
label(:string) - text shown as the toggle label when no:toggleslot is given. Defaults tonil.
Slots
icon(required) - shown when collapsed; replaced by a chevron on hover or when expanded.toggle- content shown as the clickable toggle; overrides:label.statusaside- optional content rendered alongside the header, outside the click target.inner_block(required) - the expanded body.
Stacked toaster for in-app notifications.
Renders the LiveView's @streams.notifications stream as a fixed-position
stack in the bottom-right corner. Notifications are pushed via Omni.UI.notify/2,3
and dismissed either manually (X button) or automatically after their timeout.
Attributes
stream(:any) (required) - the @streams.notifications assign.
Flex column layout with a header and scrollable body.
When the :header slot is provided it replaces the default
panel_header/1. Used by AgentLive, SessionsComponent, and
FilesComponent as the top-level section wrapper.
Attributes
title(:string) - Defaults to"".body_class(:string) - Defaults tonil.
Slots
header
Three-column header bar with a title and optional left/right action slots.
The :align attr controls title placement — "center" (default) uses a
three-column grid so the title stays centered regardless of slot widths;
"left" or "right" collapses to a two-column flow.
Attributes
title(:string) (required)align(:string) - Defaults to"center". Must be one of"left","center", or"right".
Slots
leftright
Dropdown select with support for grouped options.
Attributes
id(:string) (required)options(:list) (required)value(:string) - Defaults tonil.prompt(:string) - Defaults to"Select...".name(:string) - Defaults tonil.event(:string) (required)target(:any) - Defaults tonil.position(:string) - Defaults to"below". Must be one of"above", or"below".
Formatted time display with tooltip showing full date.
Attributes
time(DateTime) (required)format(:string) - Defaults to"%Y-%m-%d %H:%M".
Compact display of token counts and cost.
Attributes
usage(Omni.Usage) (required)