Playground Output Components#

Three components handle generation output rendering in the Playground UI: GenerationCompletionRow (completion/non-chat outputs), GenerationChatRow / GenerationChatRowOutput (chat history outputs), and SharedEditor (the shared display/edit shell used by both). They live under web/oss/src/components/Playground/Components/.

GenerationCompletionRow#

GenerationCompletionRow handles output for non-chat (completion) variants in the Playground. It is the primary row component for single-input runs.

Key behaviors:

• Reads run state (__runs[variantId].__result, __isRunning) from usePlayground via a scoped stateSelector 1.
• Resolves the result lazily via getResponseLazy(resultHash) 2, keeping renders decoupled from raw state.
• Renders different output states:
  • "Running..." text while isRunning is true 3
  • Placeholder "Click run to generate output" when there is no result 4
  • Error state — a read-only SharedEditor with error prop set and an inline GenerationResultUtils footer 5
  • Tool call array response — one SharedEditor per message with codeOnly mode, showing parsed function name/call ID in the header 6
  • Plain / JSON response — a single SharedEditor; JSON content is detected via JSON5.parse and displayed in codeOnly mode 7
• Auto-scrolls to the bottom of the page after new results arrive in chat mode via autoScrollToBottom.
• In single view mode (not focus), wraps its own run/cancel buttons alongside the output area. In comparison/focus modes the layout is handled by the parent 8.
• Props: variantId?, rowId, inputOnly?, view?, plus HTML div props 9.

Entry point: GenerationCompletionRow/index.tsx

GenerationChatRow and GenerationChatRowOutput#

Both are exported from GenerationChatRow/index.tsx and together manage chat-mode generation output.

GenerationChatRowOutput#

GenerationChatRowOutput renders a single chat turn (one history item).

• When isRunning is true, shows a "Generating response…" placeholder via TextControl 10.
• Hidden messages (__hidden === true) are skipped entirely 11.
• Delegates to PromptMessageConfig for the actual message display (role label, content editor, delete/re-run actions). Sets error on PromptMessageConfig when the resolved messageResult has an error 12.
• Appends GenerationResultUtils (token count, latency, cost) as the footer when a result is present 13.

GenerationChatRow#

GenerationChatRow manages the full history loop and run/add controls.

• Reads chat history from usePlayground, resolving per-variant run results via historyItem.__runs[variantId] 14.
• Maps over historyItems and renders a GenerationChatRowOutput for each, computing a canRerun predicate per turn 15.
• Tool messages (role "tool") are never re-runnable 16.
• Comparison view collapses gaps between messages (!gap-0) 17.
• When withControls is true, renders Run/Cancel and "Add Message" buttons below the history 18.
• Uses next/dynamic for GenerationResultUtils to avoid SSR issues 19.

Entry point: GenerationChatRow/index.tsx

SharedEditor#

SharedEditor is a thin, styled wrapper around the Lexical-based EditorWrapper (or an Ant Design Input when useAntdInput is true). It provides a consistent visual shell used throughout the Playground for both editable and read-only content.

Key behaviors:

• Debounces value changes (300 ms) via useDebounceInput before calling handleChange 20.
• Accepts optional header and footer slots for surrounding content (e.g., function-call metadata header, GenerationResultUtils footer) 21.
• Two border styles via editorType: "border" (visible border) or "borderless" (border transparent until hover/focus) 22.
• Error state (error={true}) renders all text in red 23.
• codeOnly mode (passed through editorProps) adjusts layout for code blocks and disables token interpolation .
• A stable editorId is memoized from a UUID + codeOnly flag; changing codeOnly remounts the Lexical editor instance .

Props summary (from SharedEditor/types.d.ts):

Entry point: SharedEditor/index.tsx

Supporting Components#

Component Hierarchy#

Playground view
├── GenerationCompletionRow ← completion (non-chat) output row
│ ├── PlaygroundVariantPropertyControl ← variable inputs
│ ├── RunButton / cancel
│ └── SharedEditor ← output display (plain / JSON / tool call / error)
│ └── GenerationResultUtils (footer)
│
└── GenerationChatRow ← chat output history loop
    └── GenerationChatRowOutput ← single chat turn
        ├── PromptMessageConfig ← message editor
        └── GenerationResultUtils (footer)