Custom Chat recipe

Source: 08_CustomChat/ · a drop-in replacement for the workspace's default chat experience.

How it looks

A custom header with a topic selector, example chips, a transcript, and per-message thumbs-up/down commands. The recipe routes messages to a workspace endpoint; the runnable Tesserae preview below echoes a canned reply so you can try it here.

using System;
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 chatArea = ChatArea();

            void Reply(string text)
            {
                chatArea.Add(ChatMessage(TextBlock(text), Avatar(null, "U")).RightAligned().MaxWidth());
                var like     = Button(UIcons.Check).NoBorder().NoBackground().Tooltip("Good answer");
                var dislike  = Button(UIcons.Cross).NoBorder().NoBackground().Tooltip("Bad answer");
                var commands = HStack().Children(like, dislike);
                chatArea.Add(ChatMessage(TextBlock("Here's what I found for \"" + text + "\"."), Avatar(null, "AI"), commands).MaxWidth());
            }

            var header = HStack().WS().AlignItemsCenter().Children(
                TextBlock("Recipe Chat").SemiBold(),
                Dropdown().Items(DropdownItem("Docs").Selected(), DropdownItem("Support"), DropdownItem("Sales")).ML(12));

            var examples = HStack().PT(8).Children(
                Button("Summarise this project"),
                Button("What changed this week?").ML(8));

            chatArea.Add(ChatMessage(TextBlock("How do I add a custom front-end?"), Avatar(null, "U")).RightAligned().MaxWidth());
            chatArea.Add(ChatMessage(TextBlock("Start from the Hello World recipe, then register your view in App.cs."), Avatar(null, "AI")).MaxWidth());

            var input = OmniBox(new OmniBox.Config(OmniBox.Mode.Chat)
            {
                PlaceholderChat = "Ask anything...",
                IconStop        = UIcons.Stop,
                IconChat        = UIcons.ArrowRight
            })
            .OnChat((sender, msg) =>
            {
                if (!string.IsNullOrWhiteSpace(msg.Text)) Reply(msg.Text);
            });

            var page = VStack().WS().H(10).Grow().Children(
                SectionTitle(UIcons.Comment, "Custom Chat", "Custom backend, header, examples, and message actions"),
                header.PT(12),
                examples,
                chatArea.WS().H(10).Grow().PT(8),
                input.WS().H(110)
            ).P(16);

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

What it teaches

• Calling a custom backend endpoint for PostMessage.
• Rendering a custom header with a topic selector beside the assistant-template dropdown.
• Showing custom empty-state examples that pre-fill the input box on click.
• Adding per-message commands (thumbs up / thumbs down) for assistant replies.

Code shape

var endpoints = new CustomChatView
{
    Title       = "Recipe Chat",
    PostMessage = PostMessageAsync   // ← the only required override for a basic custom chat
};

_chatView = ChatView(endpoints, state)
              .WithCustomHeader(BuildHeader)
              .WithCustomExamples(BuildExamples)
              .WithMessageCommands(BuildMessageCommands);

Other customization points on CustomChatView:

Settings on the chat view itself

Separately from CustomChatView, the view takes a ChatViewConfiguration that decides how the surface behaves for everyone using it — a property of the surface, not a switch the reader has to find:

What a reply can render as

A reply is Markdown, and the chat view renders it as Markdown. Four shapes are more than that, and every one of them is something the assistant writes — a fenced block, or a tool call — not a feature the view switches on. They work on any surface built on ChatView, a custom chat included.

Two more code-block behaviours sit beside these: a fence tagged html gets a fully sandboxed live preview next to its source (unless the workspace enables paranoid message rendering), and a fence in any other language over four line breaks gets a button that opens it in a code editor.

The four skills in the right-hand column are what teach an assistant to produce these. Add the skill to the assistant template rather than restating its rules in a system prompt — the skill is versioned with the product, a pasted copy is not.

Turning a reply into a downloadable file

The Canvas and the deck are the two shapes that become a file, and both go through the same call: POST /api/chatai/render-markdown, which runs the Markdown through the same renderer workspace code reaches as scope.ChatAI.RenderMarkdown(...).

Four things are worth knowing before you build on it:

• The file is named after the document's own title — the first # heading of the Markdown, for a deck the first slide's title. A reply with no heading falls back to Export.docx / Export.pptx. The title is text the assistant wrote, so it is stripped of characters no file name may carry and capped at 80 characters.
• Nothing is stored. The rendered file is streamed straight back to the browser.
• The Markdown comes from the canvas, not from the transcript, because the reader may have edited it in the pane before pressing Download. The chat UID travels with the request and is checked against the caller's own chats, so the endpoint cannot be used as a general-purpose converter.
• Only Documents and Slides render. Any other FilesType is a 400, not a 500 out of the converter.

A deck splits on a line of three or more dashes (---), not on # headings. Nothing else splits it, so a --- used as a horizontal rule inside a slide silently starts a new one.

Suggested follow-up questions

The pills are the one shape that writes back into the composer, so they are worth spelling out. The assistant ends its reply with:

Uptime held at 99.94% for the quarter, against a 99.9% target. Both incidents
were configuration, not capacity.

```next-steps
Show me the two incidents in detail
Which services came closest to breaching the target?
Draft the summary for the quarterly review
```

The fence never renders as text — not even half-written, since the streaming path strips an unterminated fence too — and each line becomes a button under the last assistant message. Clicking one sends that line as the next user message.

• Only the last such block in a message is read, and text after it survives into the reply, so nothing belongs after it.
• One suggestion per line. A leading -, * or • is tolerated and stripped.
• At most four lines are shown. A line shorter than three characters or longer than 199 is dropped. Plain text only — the line renders as a button label, so Markdown, code spans and links do not survive it.
• Each line is sent verbatim, so write it in the user's voice and make it self-contained: "Show me the failed runs from last week", never "I could show you the failed runs" or "and the other ones?".
• Never put anything the reader needs in the block. The pills only appear on the last message of a live chat, they are gone from a read-only transcript, and a view can switch them off with DisableNextStepSuggestions.

How the backend call works

private async Task<UID128> PostMessageAsync(CustomChatView.PostMessageRequest request)
{
    // In a real chat you'd call:
    //     return await Mosaik.API.Endpoints.CallAsync<UID128>(
    //         "recipes/chat/post-message",
    //         new RecipeChatRequest { Message = request.Message, Topic = _topic.Value });

    var reply = await RecipeEndpoints.PostChatMessageAsync(new RecipeChatRequest { ... });

    Toast().Information(reply.Reply);
    return UID128.Empty;   // "I handled it myself"
}

RecipeEndpoints.PostChatMessageAsync lives in src/API/Endpoints.cs and currently returns a hard-coded reply. Once you have a real workspace endpoint, uncomment the Mosaik.API.Endpoints.CallAsync<T> line there and delete the canned fallback.

See also

• TechnicalSupport.FrontEnd/src/SupportChat.cs — fuller example with chat-scoped context state attached to ChatMetadata.
• The chat reference in INSTRUCTIONS.md: custom-front-end/INSTRUCTIONS.md#custom-chat-interface.
• Mosaik.FrontEnd/src/Desktop/ChatAIView/CustomChatView.cs — the full surface of CustomChatView and its request DTOs.