Agents

TxAgentsList renders a selectable agent list for workflows and AI entry points. Enabled and disabled agents are grouped separately, loading and empty states are built in, and disabled items never emit selection events.

import { ref } from 'vue' const selectedId = ref<string | null>('chat') const loading = ref(false) const agents = [ { id: 'chat', name: 'Chat Agent', description: 'General conversation assistant', iconClass: 'i-carbon-chat', badgeText: 6, }, { id: 'code', name: 'Code Agent', description: 'Code generation & refactor', iconClass: 'i-carbon-code', badgeText: 12, }, { id: 'search', name: 'Search Agent', description: 'Web search & citations', iconClass: 'i-carbon-search', }, { id: 'disabled', name: 'Disabled Agent', description: 'Not available', iconClass: 'i-carbon-bot', disabled: true, }, ]

Basic Usage

AgentsList

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const selectedId = ref<string | null>('chat')
const loading = ref(false)
const agents = [
  { id: 'chat', name: 'Chat Agent', iconClass: 'i-carbon-chat', badgeText: 6 },
  { id: 'code', name: 'Code Agent', iconClass: 'i-carbon-code', badgeText: 12 },
  { id: 'disabled', name: 'Disabled Agent', disabled: true },
]
</script>

<template>
  <TxAgentsList
    :agents="agents"
    :loading="loading"
    :selected-id="selectedId"
    @select="(id) => (selectedId = id)"
  />
</template>

Prop	Type	Default	Description
`agents`	`AgentItemProps[]`	-	Agent records to render. Enabled items are listed before disabled items.
`selectedId`	`string \| null`	`null`	Marks the matching agent as selected.
`loading`	`boolean`	`false`	Shows list item skeletons instead of agent rows.
`enabledTitle`	`string`	`'Enabled'`	Section title for agents where `disabled` is not set.
`disabledTitle`	`string`	`'Disabled'`	Section title for agents where `disabled=true`.
`emptyText`	`string`	`'No agents'`	Message shown when `agents` is empty and the list is not loading.

Events

Event	Params	Description
`select`	`(id: string)`	Emitted with the selected agent id when an enabled item is clicked or activated from the keyboard.

TxAgentItem

Props

Prop	Type	Default	Description
`id`	`string`	-	Stable id emitted by `select`.
`name`	`string`	-	Primary agent label.
`description`	`string`	`''`	Optional secondary text below the name.
`iconClass`	`string`	`'i-carbon-bot'`	Icon class rendered in the avatar area.
`selected`	`boolean`	`false`	Applies active styling and `aria-selected=true`.
`disabled`	`boolean`	`false`	Disables pointer and keyboard selection and applies `aria-disabled=true`.
`badgeText`	`string \| number`	`''`	Optional right-side badge content; empty, `null`, or `undefined` hides the badge.

Events

Event	Params	Description
`select`	`(id: string)`	Emitted only when the item is enabled and activated by click, Enter, or Space.

Slots

Slot	Description
`badge`	Replaces the default right-side badge content when `badgeText` is present.