Tesserae - Action Card

ActionCard

Description

ActionCard<TData> offers actions about one object, such as a company, a contract or a dataset. The left column shows the object's identity (an icon tile, a label, a second line, an optional detail line and key/value facts, the same parts as a ContextCard). The right column lists the actions as rows drawn like a ToolCall header, and activating one calls OnAction with the item, whose Data is typed as TData.

The card fills the width it is given and stacks itself below about 520px through a container query on its own width; Stacked() forces that layout. Loading(), SetError(...) and MaxVisible(...) cover generated actions that are pending, failed or too many, and Compact() draws the card as one wrapping line of pills. ActionCardGroup<TData> draws several cards as one bordered card, a row per object.

Usage

Create a card with ActionCard<TData>(label, icon), add rows with AddAction, and handle them with OnAction. The data argument is returned as item.Data.

action-card-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 lastAction = TextBlock("Nothing chosen yet.").Small();

            var card = ActionCard<string>("Acme Logistics GmbH", UIcons.Building)
                .SetSubLabel("Company · ACC-20931").MonospaceSubLabel()
                .SetDetail("Hamburg · Key account")
                .SetTitle("Ask about this company")
                .AddAction("Which open support tickets mention Acme Logistics?", UIcons.Inbox, data: "tickets:open acme")
                .AddAction("How has their order volume changed this quarter?",  UIcons.ChartLineUp)
                .AddAction("Who are our main contacts there?",                  UIcons.Users)
                .AddAction("Summarize the latest framework contract with Acme", UIcons.FileSignature)
                .MaxVisible(3)
                .OnAction((c, item) => lastAction.Text = $"Chose \"{item.Text}\" on {c.Label} (data: {item.Data ?? "none"})");

            var component = VStack().W(640.px()).Gap(12.px()).Children(card, lastAction);

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

ActionCardGroup takes several cards and one OnAction handler that reaches all of them, including cards added later with Add.

action-card-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 group = ActionCardGroup(
                ActionCard<string>("Acme Logistics", UIcons.Building).IconTint("#248efa").SetSubLabel("Company")
                    .AddAction("How has their order volume changed this quarter?", UIcons.ChartLineUp)
                    .AddAction("Who are our main contacts there?", UIcons.Users),
                ActionCard<string>("Framework Agreement", UIcons.FileSignature).IconTint("#d97706").SetSubLabel("Contract · 42 pp")
                    .AddFact("Renews", "2027-03-31", monospace: true)
                    .AddAction("What are the termination clauses?", UIcons.Search),
                ActionCard<string>("shipments", UIcons.Database).IconTint("#16a34a").SetSubLabel("Dataset · 42,109 rows").MonospaceSubLabel()
                    .Loading())
                .OnAction((card, item) => Toast().Information($"{card.Label}: {item.Text}"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(group.W(640.px()));
        }
    }
}

The third card shows placeholder rows until Loading(false) is called and actions are added.

API reference

class

ActionCard<TData>

public sealed class ActionCard<TData> : ComponentBase<ActionCard<TData>, HTMLElement>

A card offering actions about one object - a company, a contract, a dataset: what to do next with it, or what to ask about it. It is split vertically: on the left the object's identity (an icon tile, a label, a second line, an optional detail line and a few key/value facts), on the right the actions, each one a row drawn like a ToolCall with a small icon saying what kind of action it is. Activating a row calls OnAction, which is where the host acts on it - and the Data it carries, typed as TData, is what it acts with. The card fills the width it is given. Below about 520px (a phone, a side panel) it stacks itself - the identity becomes a header strip and the actions wrap onto several lines - by a container query on its own width, so nothing has to tell it where it is. Compact turns it into one wrapping line of an identity chip followed by action pills, and ActionCardGroup{TData} stacks several cards into one.

Namespace: Tesserae
Inheritance: ComponentBase<ActionCard<TData>, HTMLElement> → ActionCard<TData>

Constructors

Name	Description
ActionCard	Initializes a new instance of this class for the object with the given label and icon.

Constructor

ActionCard

Overload
ActionCard(string, UIcons, UIconsWeight)	Initializes a new instance of this class for the object with the given label and icon.
ActionCard(string, IComponent)	Initializes a new instance of this class for the object with the given label, showing an arbitrary component on the icon tile - an `Icon` with its own color, an emoji, an `Image`.

ActionCard(string, UIcons, UIconsWeight)

public ActionCard(string label, UIcons icon = UIcons.Cube, UIconsWeight weight = UIconsWeight.Regular) : this()

Initializes a new instance of this class for the object with the given label and icon.

Parameters

label string
icon UIcons
weight UIconsWeight

ActionCard(string, IComponent)

public ActionCard(string label, IComponent iconOrImage) : this()

Initializes a new instance of this class for the object with the given label, showing an arbitrary component on the icon tile - an Icon with its own color, an emoji, an Image.

Parameters

label string
iconOrImage IComponent

Properties

Name	Description
Label	Gets the label naming the object.
SubLabel	Gets the secondary line below the label, or null when there is none.
Actions	Gets the actions the card offers, in the order they are shown.
IsLoading	Returns a value indicating whether the card is showing its loading placeholders.
Tag	Gets or sets an arbitrary payload for the card - the record the actions are about.

Property

ActionCard.Label

public string Label

Gets the label naming the object.

Property

ActionCard.SubLabel

public string SubLabel

Gets the secondary line below the label, or null when there is none.

Property

ActionCard.Actions

public IReadOnlyList<Item> Actions

Gets the actions the card offers, in the order they are shown.

Property

ActionCard.IsLoading

public bool IsLoading

Returns a value indicating whether the card is showing its loading placeholders.

Property

ActionCard.Tag

public object Tag { get; set; }

Gets or sets an arbitrary payload for the card - the record the actions are about.

Methods

Name	Description
SetLabel	Sets the label naming the object. It wraps rather than being cut, since the identity column is narrow and the name is the one thing on it that has to be read in full.
SetSubLabel	Sets the line below the label - the kind of object and an id ("Company · ACC-20931"). A null or empty value hides it.
MonospaceSubLabel	Renders the line below the label in the monospace font, for an id, a path or a table name - the treatment `MonospaceSubLabel` gives it.
SetDetail	Sets a quiet line at the foot of the identity column ("Hamburg · Key account"). A null or empty value hides it.
AddFact	Adds a key/value fact to the identity column ("Renews" / "2027-03-31"), for an object whose actions make more sense with a few of its numbers beside them.
ClearFacts	Removes every fact added with `AddFact` or `AddFact`.
SetTitle	Sets the small heading above the actions ("Ask about this company"). A null or empty value hides it.
SetIcon	Sets the icon shown on the tile.
SetImage	Fills the tile with a thumbnail (cropped to cover it) - a logo, a photo, a favicon.
IconBackground	Sets the background color of the icon tile (any CSS color).
IconForeground	Sets the color of the glyph on the icon tile.
IconTint	Tints the icon tile with the given color: a wash of it behind the glyph, the glyph in full strength. The quieter alternative to a saturated tile.
NoIconBackground	Drops the colored square, letting the glyph or image sit on the card.
AddAction	Adds an action. The icon says what kind of action it is - a search, a trend, the people involved, a document - the way a `ToolCall`'s icon names its tool.
AddActions	Adds several actions with the default icon.
RemoveAction	Removes a action.
ClearActions	Removes every action, ready for a fresh set.
OnAction	Registers a callback invoked when an action is clicked (or activated from the keyboard). This is where the host acts on it, usually from `action.Data`.
MaxVisible	Shows only the first `count` actions, with a "Show N more" button for the rest.
ShowAll	Shows every action, as clicking "Show N more" does.
SetTexts	Sets the texts of the "Show N more" button (with `{0}` for the count) and of the retry button, for localisation.
Loading	Shows placeholder rows while the actions are still being generated, in place of the list. The identity column is drawn as usual, since the object is already known.
SetError	Shows an error in place of the actions - generating them failed - with a Retry button when a handler is given. A null or empty message clears it.
ClearError	Clears the error set with `SetError`.
Compact	Draws the card as one wrapping line: the object as a chip, then the actions as pills. For a transcript where a full card under every answer would be too much.
Stacked	Forces the stacked layout - identity on top, actions below - whatever the width. The card already stacks itself below about 520px; this is for a host that wants it everywhere.
Render

Method

ActionCard.SetLabel

public ActionCard<TData> SetLabel(string label)

Sets the label naming the object. It wraps rather than being cut, since the identity column is narrow and the name is the one thing on it that has to be read in full.

Method

ActionCard.SetSubLabel

public ActionCard<TData> SetSubLabel(string subLabel)

Sets the line below the label - the kind of object and an id ("Company · ACC-20931"). A null or empty value hides it.

Method

ActionCard.MonospaceSubLabel

public ActionCard<TData> MonospaceSubLabel(bool value = true)

Renders the line below the label in the monospace font, for an id, a path or a table name - the treatment MonospaceSubLabel gives it.

Method

ActionCard.SetDetail

public ActionCard<TData> SetDetail(string detail)

Sets a quiet line at the foot of the identity column ("Hamburg · Key account"). A null or empty value hides it.

Method

ActionCard.AddFact

Overload
AddFact(string, string, bool)	Adds a key/value fact to the identity column ("Renews" / "2027-03-31"), for an object whose actions make more sense with a few of its numbers beside them.
AddFact(string, IComponent)	Adds a key/value fact whose value is an arbitrary component - a `Badge` tag, a `Link`, an `Icon` with text - in place of plain text.

AddFact(string, string, bool)

public ActionCard<TData> AddFact(string key, string value, bool monospace = false)

Adds a key/value fact to the identity column ("Renews" / "2027-03-31"), for an object whose actions make more sense with a few of its numbers beside them.

Parameters

key string
value string
monospace bool

AddFact(string, IComponent)

public ActionCard<TData> AddFact(string key, IComponent value)

Adds a key/value fact whose value is an arbitrary component - a Badge tag, a Link, an Icon with text - in place of plain text.

Parameters

key string
value IComponent

Method

ActionCard.ClearFacts

public ActionCard<TData> ClearFacts()

Removes every fact added with AddFact or AddFact.

Method

ActionCard.SetTitle

public ActionCard<TData> SetTitle(string title)

Sets the small heading above the actions ("Ask about this company"). A null or empty value hides it.

Method

ActionCard.SetIcon

Overload
SetIcon(UIcons, UIconsWeight)	Sets the icon shown on the tile.
SetIcon(IComponent)	Sets an arbitrary component on the icon tile. A null value empties the tile.

SetIcon(UIcons, UIconsWeight)

public ActionCard<TData> SetIcon(UIcons icon, UIconsWeight weight = UIconsWeight.Regular)

Sets the icon shown on the tile.

Parameters

icon UIcons
weight UIconsWeight

SetIcon(IComponent)

public ActionCard<TData> SetIcon(IComponent iconOrImage)

Sets an arbitrary component on the icon tile. A null value empties the tile.

Parameters

iconOrImage IComponent

Method

ActionCard.SetImage

public ActionCard<TData> SetImage(string url)

Fills the tile with a thumbnail (cropped to cover it) - a logo, a photo, a favicon.

Method

ActionCard.IconBackground

public ActionCard<TData> IconBackground(string color)

Sets the background color of the icon tile (any CSS color).

Method

ActionCard.IconForeground

public ActionCard<TData> IconForeground(string color)

Sets the color of the glyph on the icon tile.

Method

ActionCard.IconTint

public ActionCard<TData> IconTint(string color, int percent = 14)

Tints the icon tile with the given color: a wash of it behind the glyph, the glyph in full strength. The quieter alternative to a saturated tile.

Method

ActionCard.NoIconBackground

public ActionCard<TData> NoIconBackground()

Drops the colored square, letting the glyph or image sit on the card.

Method

ActionCard.AddAction

public ActionCard<TData> AddAction(string text, UIcons icon = UIcons.Bolt, UIconsWeight weight = UIconsWeight.Regular, TData data = default)

Adds an action. The icon says what kind of action it is - a search, a trend, the people involved, a document - the way a ToolCall's icon names its tool.

Method

ActionCard.AddActions

public ActionCard<TData> AddActions(params string[] actions)

Adds several actions with the default icon.

Method

ActionCard.RemoveAction

public ActionCard<TData> RemoveAction(Item action)

Removes a action.

Method

ActionCard.ClearActions

public ActionCard<TData> ClearActions()

Removes every action, ready for a fresh set.

Method

ActionCard.OnAction

Overload
OnAction(Action<ActionCard<TData>, Item>)	Registers a callback invoked when an action is clicked (or activated from the keyboard). This is where the host acts on it, usually from `action.Data`.
OnAction(Action<string>)	Registers a callback invoked with the text of an action when it is clicked.

OnAction(Action<ActionCard<TData>, Item>)

public ActionCard<TData> OnAction(Action<ActionCard<TData>, Item> onAction)

Registers a callback invoked when an action is clicked (or activated from the keyboard). This is where the host acts on it, usually from action.Data.

Parameters

onAction Action<ActionCard<TData>, Item>

OnAction(Action<string>)

public ActionCard<TData> OnAction(Action<string> onAction)

Registers a callback invoked with the text of an action when it is clicked.

Parameters

onAction Action<string>

Method

ActionCard.MaxVisible

public ActionCard<TData> MaxVisible(int count)

Shows only the first count actions, with a "Show N more" button for the rest.

Method

ActionCard.ShowAll

public ActionCard<TData> ShowAll()

Shows every action, as clicking "Show N more" does.

Method

ActionCard.SetTexts

public ActionCard<TData> SetTexts(string moreFormat = null, string retryText = null)

Sets the texts of the "Show N more" button (with {0} for the count) and of the retry button, for localisation.

Method

ActionCard.Loading

public ActionCard<TData> Loading(bool value = true, int placeholders = 3)

Shows placeholder rows while the actions are still being generated, in place of the list. The identity column is drawn as usual, since the object is already known.

Method

ActionCard.SetError

public ActionCard<TData> SetError(string message, Action onRetry = null)

Shows an error in place of the actions - generating them failed - with a Retry button when a handler is given. A null or empty message clears it.

Method

ActionCard.ClearError

public ActionCard<TData> ClearError()

Clears the error set with SetError.

Method

ActionCard.Compact

public ActionCard<TData> Compact(bool value = true)

Draws the card as one wrapping line: the object as a chip, then the actions as pills. For a transcript where a full card under every answer would be too much.

Method

ActionCard.Stacked

public ActionCard<TData> Stacked(bool value = true)

Forces the stacked layout - identity on top, actions below - whatever the width. The card already stacks itself below about 520px; this is for a host that wants it everywhere.

Method

ActionCard.Render

public override HTMLElement Render()

class

ActionCardGroup<TData>

public sealed class ActionCardGroup<TData> : ComponentBase<ActionCardGroup<TData>, HTMLElement>

Several ActionCard{TData} cards drawn as one: a single bordered card with a row per object, each with its identity on the left and its own actions on the right. For an answer that mentions more than one thing - a company, its contract, the dataset behind the numbers. The cards keep working on their own (their actions, states and handlers are theirs); the group only draws them together and can take one OnAction handler for all of them, including cards added later.

Namespace: Tesserae
Inheritance: ComponentBase<ActionCardGroup<TData>, HTMLElement> → ActionCardGroup<TData>

Constructors

Name	Description
ActionCardGroup	Initializes a new instance of this class holding the given cards.

Constructor

ActionCardGroup

public ActionCardGroup(params ActionCard<TData>[] cards)

Initializes a new instance of this class holding the given cards.

Properties

Name	Description
Cards	Gets the cards in the group, in the order they are shown.

Property

ActionCardGroup.Cards

public IReadOnlyList<ActionCard<TData>> Cards

Gets the cards in the group, in the order they are shown.

Methods

Name	Description
Add	Adds a card as the last row. Handlers registered on the group with `OnAction` are attached to it.
Remove	Removes a card from the group.
Clear	Removes every card.
OnAction	Registers a callback invoked when an action on any card in the group is activated - the card it came from is the first argument.
Render

Method

ActionCardGroup.Add

public ActionCardGroup<TData> Add(ActionCard<TData> card)

Adds a card as the last row. Handlers registered on the group with OnAction are attached to it.

Method

ActionCardGroup.Remove

public ActionCardGroup<TData> Remove(ActionCard<TData> card)

Removes a card from the group.

Method

ActionCardGroup.Clear

public ActionCardGroup<TData> Clear()

Removes every card.

Method

ActionCardGroup.OnAction

Overload
OnAction(Action<ActionCard<TData>, ActionCard<TData>.Item>)	Registers a callback invoked when an action on any card in the group is activated - the card it came from is the first argument.
OnAction(Action<string>)	Registers a callback invoked with the text of an action activated on any card in the group.

OnAction(Action<ActionCard<TData>, ActionCard<TData>.Item>)

public ActionCardGroup<TData> OnAction(Action<ActionCard<TData>, ActionCard<TData>.Item> onAction)

Registers a callback invoked when an action on any card in the group is activated - the card it came from is the first argument.

Parameters

onAction Action<ActionCard<TData>, ActionCard<TData>.Item>

OnAction(Action<string>)

public ActionCardGroup<TData> OnAction(Action<string> onAction)

Registers a callback invoked with the text of an action activated on any card in the group.

Parameters

onAction Action<string>

Method

ActionCardGroup.Render

public override HTMLElement Render()

ActionCard

Description

Usage

API reference

Constructors

ActionCard

ActionCard(string, UIcons, UIconsWeight)

Parameters

ActionCard(string, IComponent)

Parameters

Properties

ActionCard.Label

ActionCard.SubLabel

ActionCard.Actions

ActionCard.IsLoading

ActionCard.Tag

Methods

ActionCard.SetLabel

ActionCard.SetSubLabel

ActionCard.MonospaceSubLabel

ActionCard.SetDetail

ActionCard.AddFact

AddFact(string, string, bool)

Parameters

AddFact(string, IComponent)

Parameters

ActionCard.ClearFacts

ActionCard.SetTitle

ActionCard.SetIcon

SetIcon(UIcons, UIconsWeight)

Parameters

SetIcon(IComponent)

Parameters

ActionCard.SetImage

ActionCard.IconBackground

ActionCard.IconForeground

ActionCard.IconTint

ActionCard.NoIconBackground

ActionCard.AddAction

ActionCard.AddActions

ActionCard.RemoveAction

ActionCard.ClearActions

ActionCard.OnAction

OnAction(Action<ActionCard<TData>, Item>)

Parameters

OnAction(Action<string>)

Parameters

ActionCard.MaxVisible

ActionCard.ShowAll

ActionCard.SetTexts

ActionCard.Loading

ActionCard.SetError

ActionCard.ClearError

ActionCard.Compact

ActionCard.Stacked

ActionCard.Render

Constructors

ActionCardGroup

Properties

ActionCardGroup.Cards

Methods

ActionCardGroup.Add

ActionCardGroup.Remove

ActionCardGroup.Clear

ActionCardGroup.OnAction

OnAction(Action<ActionCard<TData>, ActionCard<TData>.Item>)

Parameters

OnAction(Action<string>)

Parameters

ActionCardGroup.Render

See also