Tesserae - AI Variants

AI variants

Description

The AI variant marks content a model produced and the controls that ask a model for more. It is not a separate component: Card, TextBlock, Icon, Button, InlineLabel, Skeleton, Badge (and Tag, Chip), Spinner, ProgressIndicator, IconToggle<T> and SegmentedPivot each have an .AI() method that swaps their colours for a purple-to-blue gradient and keeps the geometry, states and size unchanged. Where a glyph is wanted it is UIcons.Sparkles; AIIcon() and AIBadge() are shorthands for a gradient Sparkles icon and a Sparkles-led badge.

TextBlock.AI() paints the words with the gradient and is meant for short strings such as titles; TextBlock.AISurface() keeps the theme's text colour on a tinted panel, for paragraphs. Button.AI() is the filled form (the AI counterpart of Primary()), and Button.AISubtle() is the quiet form for secondary AI actions. Every method takes strongEffect, which adds the tss-ai-strong class; the default theme draws both forms the same, while a custom theme can use it to restore a stronger look.

Usage

Call .AI() on the components that make up an answer. Use one filled AI() button per surface and AISubtle() for the rest.

ai-variants-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 component = Card(VStack().WS().Children(
                    TextBlock("Line 3's brake sensor failures all share one cause: the mount torque is under spec. Tightening to 12 Nm before calibration clears the fault.").AISurface(),
                    HStack().WS().Wrap().Gap(6.px()).MT(12).Children(
                        InlineLabel("Drawn from 12 documents").AI(),
                        InlineLabel("94% confidence").AI(withSparklesIcon: false))))
                .SetTitle(HStack().WS().AlignItemsCenter().Gap(8.px()).Children(
                    AIIcon(),
                    TextBlock("What went wrong on line 3").SemiBold().AI(),
                    AIBadge("AI answer").ML(4)))
                .SetFooter(HStack().WS().AlignItemsCenter().Gap(8.px()).Children(
                    Button("Ask a follow-up").AI().NoMargin().OnClick(() => Toast().Information("Ask a follow-up")),
                    Button("Show sources").AISubtle(withSparklesIcon: false).SetIcon(UIcons.Books).NoMargin().OnClick(() => Toast().Information("Show sources")),
                    Button("Dismiss").NoMargin()))
                .AI()
                .MaxWidth(560.px());

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

While an answer is being generated, the AI Spinner, Skeleton and ProgressIndicator show that the wait is for a model rather than a fetch.

ai-variants-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 component = Card(VStack().WS().Children(
                    Spinner("Reading 12 documents").AI().MB(12),
                    Skeleton().WS().H(12).AI(),
                    Skeleton().W(90.percent()).H(12).MT(8).AI(),
                    Skeleton().W(70.percent()).H(12).MT(8).AI(),
                    ProgressIndicator().Progress(35).AI().WS().MT(16)))
                .AI()
                .W(420.px());

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

The variants read the same CSS variables (--tss-ai-from, --tss-ai-to, --tss-ai-accent, --tss-ai-gradient, --tss-ai-surface and others), declared for light and dark mode, so an app changes the AI hue by overriding those rather than a stylesheet.

API reference

Each AI() method lives on its component (Card.cs, Button.cs, Icon.cs, Badge.cs, and so on). The TextBlock forms are extension methods:

class

TextBlockExtensions

public static class TextBlockExtensions

Extension methods for TextBlock.

Namespace: Tesserae

Methods

Name	Description
Text	Sets the text of the text block.
Title<T>	Sets the title of the text block.
Required<T>	Sets the text block as required.
Wrap<T>	Enables text wrapping.
Ellipsis<T>	Enables ellipsis for overflowing text.
BreakSpaces<T>	Enables break-spaces.
NoWrap<T>	Disables text wrapping.
Disabled<T>	Sets whether the text block is disabled.
NonSelectable<T>	Sets the text as non-selectable.
Primary<T>	Sets the text to primary color.
Success<T>	Sets the text to success color.
Danger<T>	Sets the text to danger color.
Warning<T>	Sets the text to warning color.
Secondary<T>	Sets the text to secondary color.
AI<T>	Paints the text with the AI gradient - what marks a line as a model's words rather than the app's. It is for the short pieces: a title, a heading over generated output, a one-line summary. A paragraph wants `AISurface{T}` instead, which keeps the text readable and marks the block around it.
AISurface<T>	Draws the text as generated prose: the theme's own text colour on a faint purple-to-blue panel with an accent edge down the left. The block is marked as the model's output without making any of the words harder to read, which is what a gradient over a paragraph would do.
Glow<T>	Adds a glow effect to the text.

Method

TextBlockExtensions.Text

Overload
Text<T>(T, string)	Sets the text of the text block.
Text<T>(T, IObservable<string>)	Makes the text follow `source`: every change is written into the same element, so the block is never rebuilt. This is the way to show text that changes; wrapping a `TextBlock` in `DeferSync` builds a new block and swaps the element on every change, which remounts it and flickers. The subscription lives while the block is mounted and needs no cleanup. A later `Text(...)` call, with a value or another observable, replaces this one.
Text<TBlock, TValue>(TBlock, IObservable<TValue>, Func<TValue, string>)	Makes the text follow `source`, formatted by `format`. See `Text{T}`.

Text<T>(T, string)

public static T Text<T>(this T textBlock, string text) where T : TextBlock

Sets the text of the text block.

Parameters

textBlock T: The text block.
text string: The text.

Type Parameters

T: The text block type.

Returns

The text block instance.

Text<T>(T, IObservable<string>)

public static T Text<T>(this T textBlock, IObservable<string> source) where T : TextBlock

Makes the text follow source: every change is written into the same element, so the block is never rebuilt. This is the way to show text that changes; wrapping a TextBlock in DeferSync builds a new block and swaps the element on every change, which remounts it and flickers. The subscription lives while the block is mounted and needs no cleanup. A later Text(...) call, with a value or another observable, replaces this one.

Parameters

textBlock T
source IObservable<string>

Text<TBlock, TValue>(TBlock, IObservable<TValue>, Func<TValue, string>)

public static TBlock Text<TBlock, TValue>(this TBlock textBlock, IObservable<TValue> source, Func<TValue, string> format) where TBlock : TextBlock

Makes the text follow source, formatted by format. See Text{T}.

Parameters

textBlock TBlock
source IObservable<TValue>
format Func<TValue, string>

Method

TextBlockExtensions.Title<T>

public static T Title<T>(this T textBlock, string title) where T : TextBlock

Sets the title of the text block.

Type Parameters

T: The text block type.

Parameters

textBlock: The text block.
title: The title.

Returns

The text block instance.

Method

TextBlockExtensions.Required<T>

public static T Required<T>(this T textBlock) where T : TextBlock

Sets the text block as required.

Method

TextBlockExtensions.Wrap<T>

public static T Wrap<T>(this T textBlock) where T : TextBlock

Enables text wrapping.

Method

TextBlockExtensions.Ellipsis<T>

public static T Ellipsis<T>(this T textBlock) where T : TextBlock

Enables ellipsis for overflowing text.

Method

TextBlockExtensions.BreakSpaces<T>

public static T BreakSpaces<T>(this T textBlock) where T : TextBlock

Enables break-spaces.

Method

TextBlockExtensions.NoWrap<T>

public static T NoWrap<T>(this T textBlock) where T : TextBlock

Disables text wrapping.

Method

TextBlockExtensions.Disabled<T>

public static T Disabled<T>(this T textBlock, bool value = true) where T : TextBlock

Sets whether the text block is disabled.

Method

TextBlockExtensions.NonSelectable<T>

public static T NonSelectable<T>(this T textBlock) where T : TextBlock

Sets the text as non-selectable.

Method

TextBlockExtensions.Primary<T>

public static T Primary<T>(this T textBlock) where T : TextBlock

Sets the text to primary color.

Method

TextBlockExtensions.Success<T>

public static T Success<T>(this T textBlock) where T : TextBlock

Sets the text to success color.

Method

TextBlockExtensions.Danger<T>

public static T Danger<T>(this T textBlock) where T : TextBlock

Sets the text to danger color.

Method

TextBlockExtensions.Warning<T>

public static T Warning<T>(this T textBlock) where T : TextBlock

Sets the text to warning color.

Method

TextBlockExtensions.Secondary<T>

public static T Secondary<T>(this T textBlock) where T : TextBlock

Sets the text to secondary color.

Method

TextBlockExtensions.AI<T>

public static T AI<T>(this T textBlock, bool strongEffect = false) where T : TextBlock

Paints the text with the AI gradient - what marks a line as a model's words rather than the app's. It is for the short pieces: a title, a heading over generated output, a one-line summary. A paragraph wants AISurface{T} instead, which keeps the text readable and marks the block around it.

Parameters

strongEffect: Asks for the louder form of the AI styling. A custom theme that tones the AI look down (e.g. Tesserae.Themes.Curiosity) brings more of it back for this element; the default theme draws both forms the same today. Sets the tss-ai-strong class.

Method

TextBlockExtensions.AISurface<T>

public static T AISurface<T>(this T textBlock, bool strongEffect = false) where T : TextBlock

Draws the text as generated prose: the theme's own text colour on a faint purple-to-blue panel with an accent edge down the left. The block is marked as the model's output without making any of the words harder to read, which is what a gradient over a paragraph would do.

Parameters

strongEffect: Asks for the louder form of the AI styling. A custom theme that tones the AI look down (e.g. Tesserae.Themes.Curiosity) brings more of it back for this element; the default theme draws both forms the same today. Sets the tss-ai-strong class.

Method

TextBlockExtensions.Glow<T>

public static T Glow<T>(this T textBlock, string color = null) where T : TextBlock

Adds a glow effect to the text.

AI variants

Description

Usage

API reference

Methods

TextBlockExtensions.Text

Text<T>(T, string)

Parameters

Type Parameters

Returns

Text<T>(T, IObservable<string>)

Parameters

Text<TBlock, TValue>(TBlock, IObservable<TValue>, Func<TValue, string>)

Parameters

TextBlockExtensions.Title<T>

Type Parameters

Parameters

Returns

TextBlockExtensions.Required<T>

TextBlockExtensions.Wrap<T>

TextBlockExtensions.Ellipsis<T>

TextBlockExtensions.BreakSpaces<T>

TextBlockExtensions.NoWrap<T>

TextBlockExtensions.Disabled<T>

TextBlockExtensions.NonSelectable<T>

TextBlockExtensions.Primary<T>

TextBlockExtensions.Success<T>

TextBlockExtensions.Danger<T>

TextBlockExtensions.Warning<T>

TextBlockExtensions.Secondary<T>

TextBlockExtensions.AI<T>

Parameters

TextBlockExtensions.AISurface<T>

Parameters

TextBlockExtensions.Glow<T>

See also