Implementation:Microsoft Autogen Studio Render Message

Sources	python/packages/autogen-studio/frontend/src/components/views/playground/chat/rendermessage.tsx
Domains	Frontend, React Component, Message Rendering
Last Updated	2026-02-11

Overview

RenderMessage is a React component that intelligently renders different types of agent messages including text, multi-modal content (text + images), tool calls, and tool results with expandable/collapsible sections.

Description

RenderMessage handles the complex task of displaying various message formats from AutoGen agents. Key features include:

Content Type Detection: Automatically identifies message content type (string, array, tool calls, tool results)
Multi-modal Support: Renders text alongside images with navigation controls for multiple items
Image Handling: Supports both URL-based and base64-encoded images with clickable preview
Tool Call Visualization: Expandable panels showing tool names and JSON arguments
Tool Result Display: Collapsible sections for tool execution results
Text Truncation: TruncatableText component for long content with expand/collapse
Icon-based UI: Uses Lucide icons (Bot, User, DraftingCompass) for visual clarity

The component uses helper functions to detect content types, extract image sources from different formats, and manage expansion state. It handles special cases like empty arrays, null values, and mixed content types. The multi-modal renderer supports synchronized navigation between text and image arrays when content includes both.

Usage

RenderMessage is called from the RunView component for each message in the conversation. It receives an AgentMessageConfig object and renders the appropriate UI based on the content structure.

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/playground/chat/rendermessage.tsx

Signature:

interface RenderMessageProps {
  message: AgentMessageConfig;
}

export const RenderMessage: React.FC<RenderMessageProps> = ({ message }) => {
  // Component implementation
}

Key Helper Components:

// Multi-modal content renderer
const RenderMultiModal: React.FC<{
  content: (string | ImageContent)[];
  thumbnail?: boolean;
}> = ({ content, thumbnail = false }) => { /* ... */ }

// Tool call renderer
const RenderToolCall: React.FC<{ content: FunctionCall[] }> = ({ content }) => { /* ... */ }

// Tool result renderer
const RenderToolResult: React.FC<{ content: FunctionExecutionResult[] }> = ({ content }) => { /* ... */ }

Import:

import { RenderMessage } from './rendermessage';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
message	AgentMessageConfig	Yes	Message object containing content and metadata

AgentMessageConfig Structure

interface AgentMessageConfig {
  source: string;
  content: string | (string | ImageContent)[] | FunctionCall[] | FunctionExecutionResult[];
  models_usage?: any;
  media?: any[];
}

interface ImageContent {
  url?: string;
  data?: string;  // base64 encoded
  alt?: string;
}

interface FunctionCall {
  id: string;
  name: string;
  arguments: Record<string, any>;
}

interface FunctionExecutionResult {
  call_id: string;
  content: string;
}

Constants

const TEXT_THRESHOLD = 400;    // Characters before truncation
const JSON_THRESHOLD = 800;    // JSON characters before truncation

Outputs

Output	Type	Description
Rendered Content	JSX.Element	Formatted message UI based on content type

Usage Examples

Basic text message:

const message: AgentMessageConfig = {
  source: "assistant",
  content: "Hello, how can I help you today?",
  models_usage: null
};

<RenderMessage message={message} />
// Renders: Simple text with TruncatableText

Multi-modal message (text + images):

const multiModalMessage: AgentMessageConfig = {
  source: "assistant",
  content: [
    "Here's what I found:",
    { url: "https://example.com/image.jpg", alt: "Example" },
    "Additional context here",
    { data: "base64string...", alt: "Chart" }
  ],
  models_usage: null
};

<RenderMessage message={multiModalMessage} />
// Renders: Text on left, images on right with prev/next buttons

Tool call message:

const toolCallMessage: AgentMessageConfig = {
  source: "assistant",
  content: [
    {
      id: "call_123",
      name: "get_weather",
      arguments: { location: "San Francisco", units: "celsius" }
    }
  ],
  models_usage: null
};

<RenderMessage message={toolCallMessage} />
// Renders: Expandable panel showing "Calling get_weather tool"

Tool result message:

const toolResultMessage: AgentMessageConfig = {
  source: "tool",
  content: [
    {
      call_id: "call_123",
      content: '{"temperature": 18, "condition": "Partly cloudy"}'
    }
  ],
  models_usage: null
};

<RenderMessage message={toolResultMessage} />
// Renders: Expandable panel with tool result content

Iterating through messages:

const MessageList = ({ messages }: { messages: AgentMessageConfig[] }) => {
  return (
    <div className="space-y-4">
      {messages.map((msg, idx) => (
        <div key={idx} className="message-container">
          <div className="message-header">
            {msg.source === "user" ? <User /> : <Bot />}
            <span>{msg.source}</span>
          </div>
          <RenderMessage message={msg} />
        </div>
      ))}
    </div>
  );
};

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment