Skip to content
EspañolEnglish

AI interfaces and text editor

The pieces of an assistant interface come from the chat of the AMSET assistant, which uses them every day: the input box, the messages, the reasoning, the tool calls, the log of what an agent does, the files it generates and the model picker. There are 16, with no dependencies, one CSS file per component, and everything conveyed with text as well as colour.

The components

Activity log

ActivityLog

The log of what an agent is doing.

Agent workflow

AgentWorkflowEditor

The workflow editor of an AI agent.

AI usage

AIUsageDashboard

The AI usage of an account.

Approve an agent action

AgentApprovalDialog

The dialog for a person to approve or reject what an AI agent wants to do.

Artifact card

ArtifactCard

A file an assistant has generated, with its preview one click away.

Attachment

Attachment

A file attached to a message.

Chat message

ChatMessage

A message in a chat with an assistant.

Engine selector

ModelSelector

What serves what comes next.

Image viewer

ImageViewer

The viewer for an image at almost full screen.

Prompt input

PromptInput

The box where you write to an assistant.

Reasoning

Reasoning

A model's reasoning, folded.

Search the conversation

FindBar

The search bar INSIDE something -a long conversation, a document-.

Suggestions

Suggestions

The quick replies an assistant proposes.

Template editor

PromptTemplateEditor

Edit a text template with variables between double braces.

Tool call

ToolCall

A call to a tool.

Usage and cost

UsageBadge

What a response cost.
  • PromptInput grows with the text up to a limit, sends with Enter and adds a new line with Shift+Enter (without sending while composing with an IME), recalls the last message with the up arrow and accepts files that are pasted, dragged or picked. With busyModes you can keep typing while it answers: add to the turn, stop and correct, or queue.
  • ChatMessage includes copy, regenerate and edit in the same bubble, plus custom actions.
  • ActivityLog follows the end only if you were already at the bottom and groups repeated events; with group, a history of several tasks.
  • FindBar searches within a long conversation, where the browser's find cannot see what has not been loaded.
  • ArtifactFrame isolates the HTML an assistant generates with sandbox="allow-scripts", never with allow-same-origin.

Rich text editor

The library's text editor is RichTextEditor, from @amset/ui/rich-text: our own, with no third-party dependencies, with review, version history and formulas. It has its own page, with demos. The toolbar, RichTextToolbar, can also be used on its own with whatever editing engine you already have; this is what talks to it:

DirectionPropWhat it carries
editor → toolbarstateWhat is applied where the cursor is (active), what cannot be used right now (unavailable) and the link at the cursor (link).
toolbar → editoronCommandThe command: 'bold', 'heading2', 'bulletList', 'undo', 'clearFormatting'...
toolbar → editoronLinkChange{ href, newTab } already checked, or null to remove it.
toolbar → editoronImageInsert{ src, alt } already checked; alt is only empty if the image is marked as decorative.
application → toolbarshortcutsThe editor's shortcuts (Mod+B), which the toolbar announces and shows in its help. The editor listens for them, not the toolbar.
  • A single tab stop for the whole toolbar, arrow keys between buttons and focus memory when you come back.
  • Each format is a ToggleButton with aria-pressed; clicking it with the mouse does not take focus away from the editor, so the selection stays where it was.
  • The link and image panels are only mounted when opened and are not a <form>: the toolbar works inside your application's form.
  • Addresses are checked with normalizeLinkHref and normalizeImageSrc (an allowlist of schemes: a javascript: or a data: does not get through). The toolbar does not clean what the editor stores: that HTML is sanitised on the server before storing or rendering it.