Message

A transcript message with role, content, and optional surrounding slots.

This is an Open Code component: it installs into your application, not as a separate Agent runtime package. The names below assume prefix Ui.

Install

In a Flutter application with the project-local CLI configured:

dart run remix_cli:remix init --prefix Ui --preset fortal
dart run remix_cli:remix add message_recipe

Use --preset vanilla when initializing a Vanilla-preset application. Do not reinitialize an existing application with a different preset. Installing message_recipe includes its component and required theme/control dependencies. Use add message instead when you want the bare component and will provide styles.

Import ui/ui.dart from your application and use the scope for your preset:

• Fortal: UiScope(child: ...).
• Default: UiThemeScope(theme: const UiThemeData.light(), child: ...) (or UiThemeData.dark() for a dark theme).

Behavior

Use UiMessage for a row with host-provided content and UiRole.user or .assistant. The recipe also provides collapsibleStyle and toggleStyle for UiMessageCollapsible; those belong on the collapsible component, not the message row. The application retains conversation history and stable widget keys.

align accepts nullable RemixPlacement from package:remix/remix.dart. When omitted, user messages use end and other roles use start. An explicit value overrides the role while keeping avatar order and header/body/footer alignment synchronized, including in RTL. Placeholder avatars reserve the same slot without rendering the supplied avatar.

import 'package:flutter/widgets.dart';
import 'package:remix/remix.dart';
import 'ui/ui.dart';

final message = UiMessage(
  role: UiRole.assistant,
  align: RemixPlacement.end,
  child: const Text('Explicitly end-aligned'),
);

The shared type is never prefixed or copied into installed source. See the alignment API migration table.

Recipe bundle

uiAgentMessageRecipe() returns these styles:

Pass the bundle's styles to the corresponding component parameters. Each factory accepts same-named overrides, merged after the preset defaults. Child-control styles must be passed through unchanged so hover, focus, and disabled styles resolve in the child's context.

Review and customize

The dashboard's Workspace → Chat demonstrates this surface alongside the other Agent components. Its responses and tool activity are simulated locally. Edit your installed source to customize it; dart run remix_cli:remix add message_recipe --diff previews authored-source differences without overwriting local edits.