Tesserae - Tool Agent Selector

ToolAgentSelector

Description

ToolAgentSelector is a trigger button that opens a searchable popup of checkbox rows for enabling agents and tools, listed under "Agents" and "Tools" headers with an icon, a title and an optional description per row. The trigger shows a badge with the number of selected items, and Compact() hides the descriptions. The popup can also be shown at an explicit viewport position with ShowInlineAt, which is how OmniBox.EnableChatMentions turns typing @ into the same picker.

Usage

Create the selector with ToolAgentSelector(label, icon), fill the two sections with Agents(...) and Tools(...), and read SelectedItems or SelectedCount in OnChange.

tool-agent-selector-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var status = TextBlock("2 enabled").Small();

            var selector = ToolAgentSelector()
                .Agents(
                    ToolAgentSelectorItem("deep-researcher", "Deep Researcher", "Multi-step web research with citations", UIcons.Search),
                    ToolAgentSelectorItem("code-assistant", "Code Assistant", "Plans, writes and debugs code end to end", UIcons.FileCode).Selected())
                .Tools(
                    ToolAgentSelectorItem("web-search", "Web Search", "Search the live web for fresh results", UIcons.Globe),
                    ToolAgentSelectorItem("code-interpreter", "Code Interpreter", "Run Python in a sandbox", UIcons.Terminal).Selected(),
                    ToolAgentSelectorItem("calculator", "Calculator", "Evaluate math expressions", UIcons.Calculator))
                .OnChange(s => status.Text = string.Join(", ", s.SelectedItems.Select(i => i.Id)));

            var component = HStack().AlignItemsCenter().Gap(12.px()).Children(selector, status);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

In a chat composer, put the selector in the OmniBox footer and wire EnableChatMentions to it so @ opens the popup at the caret. Typing filters the list, Arrow Up/Down moves the highlight, and Enter toggles the highlighted item.

tool-agent-selector-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var selector = ToolAgentSelector()
                .Agents(
                    ToolAgentSelectorItem("deep-researcher", "Deep Researcher", "Multi-step web research with citations", UIcons.Search),
                    ToolAgentSelectorItem("data-analyst", "Data Analyst", "Explores data and builds charts", UIcons.ChartHistogram))
                .Tools(
                    ToolAgentSelectorItem("web-search", "Web Search", "Search the live web for fresh results", UIcons.Globe).Selected(),
                    ToolAgentSelectorItem("file-search", "File Search", "Search files in this workspace", UIcons.FolderOpen))
                .Compact();

            var chatBox = OmniBox(new OmniBox.Config(OmniBox.Mode.Chat)
                {
                    PlaceholderChat = "Ask me anything, or type @ to mention a tool or agent",
                    ChatFooter = new OmniBox.FooterItems { LeftSide = new IComponent[] { selector } }
                })
                .OnChat((s, q) => Toast().Information(q.Text))
                .EnableChatMentions(new OmniBox.ChatMention
                {
                    OnShow         = (x, y) => selector.ShowInlineAt(x, y),
                    OnQueryChanged = text    => selector.Filter(text),
                    OnMove         = dir     => selector.MoveHighlight(dir),
                    OnCommit       = ()      => selector.ActivateHighlighted(),
                    OnHide         = ()      => selector.Hide(),
                    IsOpen         = ()      => selector.IsVisible
                });

            document.body.style.overflow = "hidden";
            MountCenteredToBody(chatBox.W(600.px()));
        }
    }
}

API reference

class

ToolAgentSelector

public sealed class ToolAgentSelector : Layer<ToolAgentSelector>

A trigger button with a searchable popup for enabling agents and tools, shown grouped under "Agents" and "Tools" sections. Selecting items updates a count badge on the trigger. Designed to be dropped into one of FooterItems's slots, and can also be driven inline (see ShowInlineAt) to back an "@mention" style picker inside a chat input.

Namespace: Tesserae
Inheritance: Layer<ToolAgentSelector> → ToolAgentSelector

Constructors

Name	Description
ToolAgentSelector	Initializes a new instance of this class.

Constructor

ToolAgentSelector

public ToolAgentSelector(string label = "Tools", UIcons icon = UIcons.Tools)

Initializes a new instance of this class.

Properties

Name	Description
SelectedItems	Gets every currently selected item, agents first, then tools.
SelectedCount	Gets the number of currently selected items.

Property

ToolAgentSelector.SelectedItems

public Item[] SelectedItems

Gets every currently selected item, agents first, then tools.

Property

ToolAgentSelector.SelectedCount

public int SelectedCount

Gets the number of currently selected items.

Methods

Name	Description
Render	Renders the component's root HTML element.
Agents	Sets the items shown under the "Agents" section (replaces any previously set).
Tools	Sets the items shown under the "Tools" section (replaces any previously set).
Compact	Hides item descriptions, rendering a denser list of icon + title rows only.
OnChange	Registers a callback invoked whenever the selection changes.
Show	Shows the popup anchored below the trigger button.
ShowInlineAt	Shows the popup anchored at an explicit viewport position (for example, next to a text caret), without moving focus or toggling the trigger button's pressed state. Used to back an "@mention" style picker.
Hide	Hides the popup.
Filter	Filters the visible items by the given free-text query (matches title or description). Used both by the built-in search box and externally, to drive the popup from an inline "@" mention as the user types.
MoveHighlight	Moves the keyboard-navigation highlight forward (positive) or backward (negative) among the currently visible items, wrapping around at either end.
ActivateHighlighted	Toggles the selection of the currently highlighted item (defaulting to the first visible item if none is highlighted yet). Returns `true` if an item was toggled.

Method

ToolAgentSelector.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

ToolAgentSelector.Agents

public ToolAgentSelector Agents(params Item[] items)

Sets the items shown under the "Agents" section (replaces any previously set).

Method

ToolAgentSelector.Tools

public ToolAgentSelector Tools(params Item[] items)

Sets the items shown under the "Tools" section (replaces any previously set).

Method

ToolAgentSelector.Compact

public ToolAgentSelector Compact(bool value = true)

Hides item descriptions, rendering a denser list of icon + title rows only.

Method

ToolAgentSelector.OnChange

public ToolAgentSelector OnChange(Action<ToolAgentSelector> handler)

Registers a callback invoked whenever the selection changes.

Method

ToolAgentSelector.Show

public override ToolAgentSelector Show()

Shows the popup anchored below the trigger button.

Method

ToolAgentSelector.ShowInlineAt

public ToolAgentSelector ShowInlineAt(double clientX, double clientY)

Shows the popup anchored at an explicit viewport position (for example, next to a text caret), without moving focus or toggling the trigger button's pressed state. Used to back an "@mention" style picker.

Method

ToolAgentSelector.Hide

public override void Hide(Action onHidden = null)

Hides the popup.

Method

ToolAgentSelector.Filter

public ToolAgentSelector Filter(string text)

Filters the visible items by the given free-text query (matches title or description). Used both by the built-in search box and externally, to drive the popup from an inline "@" mention as the user types.

Method

ToolAgentSelector.MoveHighlight

public void MoveHighlight(int direction)

Moves the keyboard-navigation highlight forward (positive) or backward (negative) among the currently visible items, wrapping around at either end.

Method

ToolAgentSelector.ActivateHighlighted

public bool ActivateHighlighted()

Toggles the selection of the currently highlighted item (defaulting to the first visible item if none is highlighted yet). Returns true if an item was toggled.

Events

Name	Description
SelectionChanged	Raised whenever an item's selected state changes.

Event

ToolAgentSelector.SelectionChanged

public event Action<ToolAgentSelector> SelectionChanged

Raised whenever an item's selected state changes.

ToolAgentSelector

Description

Usage

API reference

Constructors

ToolAgentSelector

Properties

ToolAgentSelector.SelectedItems

ToolAgentSelector.SelectedCount

Methods

ToolAgentSelector.Render

ToolAgentSelector.Agents

ToolAgentSelector.Tools

ToolAgentSelector.Compact

ToolAgentSelector.OnChange

ToolAgentSelector.Show

ToolAgentSelector.ShowInlineAt

ToolAgentSelector.Hide

ToolAgentSelector.Filter

ToolAgentSelector.MoveHighlight

ToolAgentSelector.ActivateHighlighted

Events

ToolAgentSelector.SelectionChanged

See also