Tesserae - ToolCall

ToolCall

Description

Inline tool-call indicator that expands accordion-style to show the associated content. The content component is created lazily the first time the user expands the tool call. Used in chat / assistant UIs to surface tool invocations without taking up vertical space until expanded.

Usage

tool-call-sample.cs

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 tools = ToolsUsed(
                ToolCall(UIcons.Search, "Search documentation",
                    () => TextBlock("query: tesserae popover").Small()),
                ToolCall(UIcons.FileCode, "Read source file",
                    () => TextBlock("Tesserae/src/Components/Popover.cs").Small())
            );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(tools);
        }
    }
}

API reference

class

ToolCall

public sealed class ToolCall : ComponentBase<ToolCall, HTMLElement>

Inline tool-call indicator that expands accordion-style to show the associated content. The content component is created lazily the first time the user expands the tool call.

Namespace: Tesserae
Inheritance: ComponentBase<ToolCall, HTMLElement> → ToolCall

Constructors

Name	Description
ToolCall	Initializes a new instance of this class.

Constructor

ToolCall

Overload
ToolCall(UIcons, string, Func<IComponent>)	Initializes a new instance of this class.
ToolCall(UIcons, string, IComponent)	Initializes a new instance of this class.

ToolCall(UIcons, string, Func<IComponent>)

public ToolCall(UIcons icon, string text, Func<IComponent> contentFactory = null)

Initializes a new instance of this class.

Parameters

icon UIcons
text string
contentFactory Func<IComponent>

ToolCall(UIcons, string, IComponent)

public ToolCall(UIcons icon, string text, IComponent content) : this(icon, text, content != null ? (Func<IComponent>)(() => content) : null)

Initializes a new instance of this class.

Parameters

icon UIcons
text string
content IComponent

Properties

Name	Description
Icon	Gets or sets the icon shown by the component.
Text	Gets or sets the text shown in the component.
IsExpanded	Gets or sets a value indicating whether the component is expanded.
HasContent	Returns a value indicating whether the component has the given content.
Progress	Gets the live progress line shown on the header while the call runs, creating it on first use. The line lives inside the header row, so expanding the call leaves it untouched.

Property

ToolCall.Icon

public UIcons Icon

Gets or sets the icon shown by the component.

Property

ToolCall.Text

public string Text

Gets or sets the text shown in the component.

Property

ToolCall.IsExpanded

public bool IsExpanded

Gets or sets a value indicating whether the component is expanded.

Property

ToolCall.HasContent

public bool HasContent

Returns a value indicating whether the component has the given content.

Property

ToolCall.Progress

public LiveProgress Progress

Gets the live progress line shown on the header while the call runs, creating it on first use. The line lives inside the header row, so expanding the call leaves it untouched.

Methods

Name	Description
CreateContent	Returns a fresh IComponent built from the content factory, or null if no factory was provided. Used by `ToolsUsed` to render the detail pane independently of this inline view.
SetContent	Sets the content of the component.
SetText	Sets the text of the component.
SetIcon	Sets the icon of the component.
SetProgress	Writes the given progress onto the header of this call, next to its name. Meant to be called as often as the progress arrives - only the text of the line changes.
ClearProgress	Clears the progress shown on the header, leaving the call as a plain chip again.
NotExpandable	Configures the not expandable on the component.
Expanded	Expands the component.
Expand	Expands the component.
Collapse	Collapses the component.
Toggle	Toggles the component's state.
OnToggle	Registers a callback invoked when the toggle event fires.
Render	Renders the component's root HTML element.

Method

ToolCall.CreateContent

public IComponent CreateContent()

Returns a fresh IComponent built from the content factory, or null if no factory was provided. Used by ToolsUsed to render the detail pane independently of this inline view.

Method

ToolCall.SetContent

Overload
SetContent(Func<IComponent>)	Sets the content of the component.
SetContent(IComponent)	Sets the content of the component.

SetContent(Func<IComponent>)

public ToolCall SetContent(Func<IComponent> contentFactory)

Sets the content of the component.

Parameters

contentFactory Func<IComponent>

SetContent(IComponent)

public ToolCall SetContent(IComponent content)

Sets the content of the component.

Parameters

content IComponent

Method

ToolCall.SetText

public ToolCall SetText(string text)

Sets the text of the component.

Method

ToolCall.SetIcon

public ToolCall SetIcon(UIcons icon)

Sets the icon of the component.

Method

ToolCall.SetProgress

Overload
SetProgress(string)	Writes the given progress onto the header of this call, next to its name. Meant to be called as often as the progress arrives - only the text of the line changes.
SetProgress(IObservable<string>)	Streams the progress shown on the header from the given observable.

SetProgress(string)

public ToolCall SetProgress(string progress)

Writes the given progress onto the header of this call, next to its name. Meant to be called as often as the progress arrives - only the text of the line changes.

Parameters

progress string

SetProgress(IObservable<string>)

public ToolCall SetProgress(IObservable<string> progress)

Streams the progress shown on the header from the given observable.

Parameters

progress IObservable<string>

Method

ToolCall.ClearProgress

public ToolCall ClearProgress()

Clears the progress shown on the header, leaving the call as a plain chip again.

Method

ToolCall.NotExpandable

public ToolCall NotExpandable()

Configures the not expandable on the component.

Method

ToolCall.Expanded

public ToolCall Expanded(bool value = true)

Expands the component.

Method

ToolCall.Expand

public ToolCall Expand()

Expands the component.

Method

ToolCall.Collapse

public ToolCall Collapse()

Collapses the component.

Method

ToolCall.Toggle

public ToolCall Toggle()

Toggles the component's state.

Method

ToolCall.OnToggle

public ToolCall OnToggle(Action<ToolCall> onToggle)

Registers a callback invoked when the toggle event fires.

Method

ToolCall.Render

public override HTMLElement Render()

Renders the component's root HTML element.

class

ToolsUsed

public sealed class ToolsUsed : ComponentBase<ToolsUsed, HTMLElement>

Compact summary of multiple tool calls that opens a popup showing the list of tools on the left. Clicking a tool slides the list to the left and shows that tool's content on the right with a back button to return to the list. Inline swaps the popup for an in-place disclosure: the summary expands underneath itself into the list of ToolCalls, each one opening its own content inline the way a standalone call does.

Namespace: Tesserae
Inheritance: ComponentBase<ToolsUsed, HTMLElement> → ToolsUsed

Constructors

Name	Description
ToolsUsed	Initializes a new instance of this class.

Constructor

ToolsUsed

public ToolsUsed(IEnumerable<ToolCall> tools = null)

Initializes a new instance of this class.

Properties

Name	Description
IsInline	Returns a value indicating whether the group renders its tools in place rather than in a popup.
IsExpanded	Returns a value indicating whether the inline list is open. Always false while the group opens its tools in the popup instead.
Progress	Gets the live progress line shown on the summary while the group's calls run, creating it on first use.

Property

ToolsUsed.IsInline

public bool IsInline

Returns a value indicating whether the group renders its tools in place rather than in a popup.

Property

ToolsUsed.IsExpanded

public bool IsExpanded

Returns a value indicating whether the inline list is open. Always false while the group opens its tools in the popup instead.

Property

ToolsUsed.Progress

public LiveProgress Progress

Gets the live progress line shown on the summary while the group's calls run, creating it on first use.

Methods

Name	Description
Add	Adds the given item to the component.
AddRange	Adds the given range to the component.
Clear	Clears the component's current state.
SetSummary	Sets the summary of the component.
SetIcon	Sets the icon of the component.
SetTitle	Sets the title of the component.
Inline	Renders the tools in place instead of in a popup: the summary becomes an accordion that expands into the list of `ToolCall`s underneath itself, each one opening its own content inline the way a standalone call does. For a transcript where sending the reader to a modal for a one-line result is too much ceremony.
Expanded	Expands or collapses the group.
Expand	Opens the group: the inline list when `Inline` is set, the popup otherwise.
Collapse	Closes the group: the inline list when `Inline` is set, the popup otherwise.
Toggle	Toggles the group between open and closed.
OnToggle	Registers a callback invoked whenever the inline list is expanded or collapsed.
SetProgress	Writes the given progress onto the summary, next to the count of tools used. Meant to be called as often as the progress arrives - only the text of the line changes.
ClearProgress	Clears the progress shown on the summary.
Show	Shows the component: the popup, or the inline list when `Inline` is set.
Hide	Hides the component: the popup, or the inline list when `Inline` is set.
Render	Renders the component's root HTML element.

Method

ToolsUsed.Add

Overload
Add(ToolCall)	Adds the given item to the component.
Add(UIcons, string, Func<IComponent>)	Adds the given item to the component.
Add(UIcons, string, IComponent)	Adds the given item to the component.

Add(ToolCall)

public ToolsUsed Add(ToolCall tool)

Adds the given item to the component.

Parameters

tool ToolCall

Add(UIcons, string, Func<IComponent>)

public ToolsUsed Add(UIcons icon, string text, Func<IComponent> contentFactory)

Adds the given item to the component.

Parameters

icon UIcons
text string
contentFactory Func<IComponent>

Add(UIcons, string, IComponent)

public ToolsUsed Add(UIcons icon, string text, IComponent content)

Adds the given item to the component.

Parameters

icon UIcons
text string
content IComponent

Method

ToolsUsed.AddRange

public ToolsUsed AddRange(IEnumerable<ToolCall> tools)

Adds the given range to the component.

Method

ToolsUsed.Clear

public ToolsUsed Clear()

Clears the component's current state.

Method

ToolsUsed.SetSummary

public ToolsUsed SetSummary(string label)

Sets the summary of the component.

Method

ToolsUsed.SetIcon

public ToolsUsed SetIcon(UIcons icon)

Sets the icon of the component.

Method

ToolsUsed.SetTitle

public ToolsUsed SetTitle(string title)

Sets the title of the component.

Method

ToolsUsed.Inline

public ToolsUsed Inline(bool value = true)

Renders the tools in place instead of in a popup: the summary becomes an accordion that expands into the list of ToolCalls underneath itself, each one opening its own content inline the way a standalone call does. For a transcript where sending the reader to a modal for a one-line result is too much ceremony.

Method

ToolsUsed.Expanded

public ToolsUsed Expanded(bool value = true)

Expands or collapses the group.

Method

ToolsUsed.Expand

public ToolsUsed Expand()

Opens the group: the inline list when Inline is set, the popup otherwise.

Method

ToolsUsed.Collapse

public ToolsUsed Collapse()

Closes the group: the inline list when Inline is set, the popup otherwise.

Method

ToolsUsed.Toggle

public ToolsUsed Toggle()

Toggles the group between open and closed.

Method

ToolsUsed.OnToggle

public ToolsUsed OnToggle(Action<ToolsUsed> onToggle)

Registers a callback invoked whenever the inline list is expanded or collapsed.

Method

ToolsUsed.SetProgress

Overload
SetProgress(string)	Writes the given progress onto the summary, next to the count of tools used. Meant to be called as often as the progress arrives - only the text of the line changes.
SetProgress(IObservable<string>)	Streams the progress shown on the summary from the given observable.

SetProgress(string)

public ToolsUsed SetProgress(string progress)

Writes the given progress onto the summary, next to the count of tools used. Meant to be called as often as the progress arrives - only the text of the line changes.

Parameters

progress string

SetProgress(IObservable<string>)

public ToolsUsed SetProgress(IObservable<string> progress)

Streams the progress shown on the summary from the given observable.

Parameters

progress IObservable<string>

Method

ToolsUsed.ClearProgress

public ToolsUsed ClearProgress()

Clears the progress shown on the summary.

Method

ToolsUsed.Show

public ToolsUsed Show()

Shows the component: the popup, or the inline list when Inline is set.

Method

ToolsUsed.Hide

public ToolsUsed Hide()

Hides the component: the popup, or the inline list when Inline is set.

Method

ToolsUsed.Render

public override HTMLElement Render()

Renders the component's root HTML element.

ToolCallInspect

The body of a tool-call inspection: the arguments a tool was called with, listed as name/value rows, above the response it returned in a read-only code block. Meant as the content of a ToolCall, inline or in the detail pane of a ToolsUsed modal. The sections scroll independently, with the arguments taking at most half the available height, so inspecting a long response never scrolls the arguments off screen.

class

ToolCallInspect

public sealed class ToolCallInspect : ComponentBase<ToolCallInspect, HTMLElement>

The body of a tool-call inspection: the arguments a tool was called with, listed as name/value rows, above the response it returned, shown in a read-only code block. Meant as the content of a ToolCall - inline, or in the detail pane of a ToolsUsed modal. The sections scroll independently: the arguments take at most half of the height available and the response claims the rest, so inspecting a long response never scrolls the arguments off screen.

Namespace: Tesserae
Inheritance: ComponentBase<ToolCallInspect, HTMLElement> → ToolCallInspect

Constructors

Name	Description
ToolCallInspect	Initializes a new instance of this class.

Constructor

ToolCallInspect

public ToolCallInspect(string arguments = null, string response = null)

Initializes a new instance of this class.

Parameters

arguments: The arguments the tool was called with, as a JSON object.
response: The response the tool returned.

Methods

Name	Description
SetArguments	Sets the arguments shown by the component. A JSON object is listed as one name/value row per property; anything else is shown verbatim. An empty value hides the section.
SetResponse	Sets the response shown by the component. JSON is re-indented for reading; anything else is shown verbatim. An empty value hides the section.
SetError	Sets the error message shown by the component, for a call that failed. An empty value hides the section.
SetArgumentsLabel	Sets the caption shown above the arguments. Defaults to "Arguments".
SetResponseLabel	Sets the caption shown above the response. Defaults to "Response".
SetErrorLabel	Sets the caption shown above the error. Defaults to "Error".
SetEmptyText	Sets the text shown when the component has no arguments, response or error to show.
Render	Renders the component's root HTML element.

Method

ToolCallInspect.SetArguments

public ToolCallInspect SetArguments(string arguments)

Sets the arguments shown by the component. A JSON object is listed as one name/value row per property; anything else is shown verbatim. An empty value hides the section.

Method

ToolCallInspect.SetResponse

public ToolCallInspect SetResponse(string response)

Sets the response shown by the component. JSON is re-indented for reading; anything else is shown verbatim. An empty value hides the section.

Method

ToolCallInspect.SetError

public ToolCallInspect SetError(string error)

Sets the error message shown by the component, for a call that failed. An empty value hides the section.

Method

ToolCallInspect.SetArgumentsLabel

public ToolCallInspect SetArgumentsLabel(string label)

Sets the caption shown above the arguments. Defaults to "Arguments".

Method

ToolCallInspect.SetResponseLabel

public ToolCallInspect SetResponseLabel(string label)

Sets the caption shown above the response. Defaults to "Response".

Method

ToolCallInspect.SetErrorLabel

public ToolCallInspect SetErrorLabel(string label)

Sets the caption shown above the error. Defaults to "Error".

Method

ToolCallInspect.SetEmptyText

public ToolCallInspect SetEmptyText(string text)

Sets the text shown when the component has no arguments, response or error to show.

Method

ToolCallInspect.Render

public override HTMLElement Render()

Renders the component's root HTML element.

LiveProgress

A single quiet line of live progress text ("Reading documents · Encoding 57%") meant to be updated many times a second while a long-running task streams its progress. The line and its tooltip are built once and never rebuilt: an update writes the new text into the elements already on screen, so a stream of updates reads as one line changing rather than a component being replaced.

class

LiveProgress

public sealed class LiveProgress : ComponentBase<LiveProgress, HTMLElement>

A single quiet line of live progress text ("Reading documents · Encoding 57%") meant to be updated many times a second while a long-running task streams its progress. The line, and the tooltip carrying its untruncated text, are built once and never rebuilt: an update writes the new text into the elements already on screen. Nothing fades in or out, so a stream of updates reads as one line changing rather than a component being replaced. It also survives a host that refreshes itself by diffing a freshly built layout onto the DOM already on screen (DeltaComponent, and so ChatMessage): the line element the reader sees is then the one an earlier layout built and the diff keeps patching, so the tooltip follows the text of the element rather than the text a given instance was told to show, and the line opts its subtree out of the fade the diff puts on patched content.

Namespace: Tesserae
Inheritance: ComponentBase<LiveProgress, HTMLElement> → LiveProgress

Constructors

Name	Description
LiveProgress	Initializes a new instance of this class.

Constructor

LiveProgress

public LiveProgress(string text = null)

Initializes a new instance of this class.

Properties

Name	Description
Text	Gets the text currently shown by the component. Read from the element rather than remembered, so it stays true under a host that patches the line's text itself.
IsEmpty	Returns a value indicating whether the component currently shows any progress.

Property

LiveProgress.Text

public string Text

Gets the text currently shown by the component. Read from the element rather than remembered, so it stays true under a host that patches the line's text itself.

Property

LiveProgress.IsEmpty

public bool IsEmpty

Returns a value indicating whether the component currently shows any progress.

Methods

Name	Description
SetText	Writes the given progress into the line already on screen. An empty text hides the line without removing it, so the next update brings back the same element.
Clear	Clears the progress, hiding the line until the next update.
Stream	Streams the progress from the given observable: every value it publishes is written into the line. The subscription is released when the component leaves the DOM, and a second call replaces the source this component follows.
StopStreaming	Stops following the observable passed to `Stream`, keeping the text it last wrote.
WithTooltip	Configures whether hovering the line shows its full text as a tooltip. On by default, as the line is ellipsized to the width it is given.
NoTooltip	Configures the component to show no tooltip when hovered.
Render	Renders the component's root HTML element.

Method

LiveProgress.SetText

public LiveProgress SetText(string text)

Writes the given progress into the line already on screen. An empty text hides the line without removing it, so the next update brings back the same element.

Method

LiveProgress.Clear

public LiveProgress Clear()

Clears the progress, hiding the line until the next update.

Method

LiveProgress.Stream

public LiveProgress Stream(IObservable<string> source)

Streams the progress from the given observable: every value it publishes is written into the line. The subscription is released when the component leaves the DOM, and a second call replaces the source this component follows.

Method

LiveProgress.StopStreaming

public LiveProgress StopStreaming()

Stops following the observable passed to Stream, keeping the text it last wrote.

Method

LiveProgress.WithTooltip

public LiveProgress WithTooltip(bool value = true)

Configures whether hovering the line shows its full text as a tooltip. On by default, as the line is ellipsized to the width it is given.

Method

LiveProgress.NoTooltip

public LiveProgress NoTooltip()

Configures the component to show no tooltip when hovered.

Method

LiveProgress.Render

public override HTMLElement Render()

Renders the component's root HTML element.