Chat Message Components#

Agenta uses a layered set of React components to render chat messages across three distinct surfaces: the Playground (prompt configuration and live generation), Evaluations, and general-purpose chat input/display. The components share a common ChatMessage / ChatRole type contract but differ significantly in their responsibilities — from simple readonly display to fully interactive message editing with state-driven playground integration.

Core Types#

ChatMessage and ChatRole (defined in web/oss/src/lib/Types.ts) are the shared primitives used throughout all chat message components:

• ChatRole enum: system, user, assistant, function
• ChatMessage: { role: ChatRole, content: string, id?: string }

Component Overview#

ChatInputs#

ChatInputs is the lowest-level reusable component. It renders a list of ChatMessage objects as role-selector + textarea pairs, with +/− controls to add/remove messages. Key behaviors:

• Supports both controlled (value) and uncontrolled (defaultValue) usage 1
• The readonly prop disables all editing controls (role selector, content area, add/remove buttons) simultaneously 2
• Error state: messages whose content starts with ❌ receive a distinct red background 3
• A copy button floats over the last assistant message 4
• Exported helper getDefaultNewMessage() generates a fresh user message with a UUID

Used as the rendering primitive by EvaluationChatResponse.

EvaluationChatResponse#

EvaluationChatResponse wraps ChatInputs in read-only mode to display a single variant's chat output inside the Evaluation Card view. It:

• Parses outputText with safeParse to extract .content from a JSON-encoded assistant message 5
• Renders a VariantAlphabet badge and color-coded variant name with the revision number 6
• Passes a single hardcoded assistant role message to ChatInputs with readonly 7

Props: variant, outputText, index, showVariantName, evaluation.

PromptMessageConfig#

PromptMessageConfig is the richest of the chat message components. It is the per-message editor inside the Playground's prompt configuration panel and supports three rendering modes based on message type 8:

1. Standard message — role dropdown + Lexical-based SharedEditor for message content
2. Tool/function call — displays function name input and JSON argument editor
3. Function output — renders function call results

It consumes the usePlayground hook for bidirectional state synchronization, meaning edits are propagated into centralized playground state without manual prop threading 9. The component is wrapped by PromptMessageConfigWrapper, which sets up the Lexical editor provider and handles JSON vs. plain-text content detection.

Prop types extend BaseContainerProps and SharedEditorProps 10, and expose callbacks for deleteMessage, rerunMessage, and handleChange 11.

GenerationChatRow / GenerationChatRowOutput#

GenerationChatRow manages the chat conversation history for live generation runs in the Playground. It reads history items from centralized state via usePlayground 12 and renders each turn using GenerationChatRowOutput, which in turn delegates to PromptMessageConfig for message display.

Notable behaviors:

• Supports both single and comparison view modes — comparison view collapses gaps between messages 13
• Handles per-variant run results via __runs[variantId] on history items 14
• Tool messages (role tool) are not re-runnable 15
• The withControls prop enables run/cancel and "Add Message" buttons below the history 16
• Uses dynamic import for GenerationResultUtils to avoid SSR issues 17

Component Hierarchy#

ChatInputs ← standalone editable/readonly list
└── used by EvaluationChatResponse ← readonly evaluation display

PromptMessageConfig ← Lexical editor, playground state
└── used by GenerationChatRowOutput
    └── used by GenerationChatRow ← history loop + run controls
        └── used by Playground views

Related Components#

• PromptMessageContentOptions — action menu (delete, re-run, minimize) integrated inside PromptMessageConfig
• VariantAlphabet — color-coded letter badge used in evaluation display
• GenerationResultUtils — token/latency metadata rendered as a footer inside GenerationChatRowOutput 18