Implementation:Microsoft Autogen Studio Chat View

Sources	python/packages/autogen-studio/frontend/src/components/views/playground/chat/chat.tsx
Domains	Frontend, React Component, WebSocket, Real-time Communication
Last Updated	2026-02-11

Overview

ChatView is the primary React component for managing real-time multi-agent conversations in AutoGen Studio, handling WebSocket connections, message streaming, run lifecycle, and compare mode functionality.

Description

ChatView orchestrates the complete chat experience with sophisticated state management and real-time communication. Key features include:

WebSocket Management: Establishes and maintains WebSocket connections for live message streaming
Run Lifecycle: Creates runs, handles status transitions (active, awaiting_input, complete, error, stopped)
Message Streaming: Displays real-time content updates with streaming indicators
Session Management: Loads and manages chat history from session runs
Input Timeout Handling: Configurable timeout for awaiting user input
Compare Mode: Side-by-side session comparison with synchronized controls
File Upload Support: Handles file attachments via ChatInput with base64 conversion
Error Handling: Comprehensive error states with user feedback via Ant Design messages

The component uses React hooks for state management (useState, useRef, useContext, useMemo, useEffect) and maintains separate state for existing runs, current run, streaming content, and active socket connections. It implements WebSocket message handlers for different event types (message, message_chunk, status_update, input_request, error, result) and manages cleanup on unmount.

Usage

ChatView is rendered as the main content area in the playground view, typically with a session prop from the parent. It can be used in normal mode or compare mode for side-by-side session viewing.

Code Reference

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

Signature:

interface ChatViewProps {
  session: Session | null;
  isCompareMode?: boolean;
  isSecondaryView?: boolean;
  onCompareClick?: () => void;
  onExitCompare?: () => void;
  onSessionChange?: (session: Session) => void;
  availableSessions?: Session[];
  showCompareButton?: boolean;
}

export default function ChatView({
  session,
  isCompareMode = false,
  isSecondaryView = false,
  onCompareClick,
  onExitCompare,
  onSessionChange,
  availableSessions = [],
  showCompareButton = true,
}: ChatViewProps) { /* ... */ }

Import:

import ChatView from './chat';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
session	null	Yes	Current session object or null
isCompareMode	boolean	No	Enable compare mode UI (default: false)
isSecondaryView	boolean	No	Indicates if this is the right panel in compare mode (default: false)
onCompareClick	() => void	No	Callback when compare button is clicked
onExitCompare	() => void	No	Callback when exiting compare mode
onSessionChange	(session: Session) => void	No	Callback when session is changed in compare mode
availableSessions	Session[]	No	Available sessions for comparison (default: [])
showCompareButton	boolean	No	Show/hide compare button (default: true)

WebSocket Message Types

Message Type	Payload	Description
message	Message	Complete message from agent
message_chunk	ModelClientStreamingChunkEvent	Streaming content chunk
status_update	{ status: RunStatus }	Run status change
input_request	{ prompt: string }	Request for user input
error	{ error: string }	Error message
result	TeamResult	Final run result

Outputs

Event	Type	Description
WebSocket send	{ type: "input_response", response: string }	User input response sent to backend
WebSocket send	{ type: "stop" }	Stop signal sent to backend
Session update	void	Updates parent state when session changes

Usage Examples

Basic usage:

import ChatView from './chat/chat';

const PlaygroundView = () => {
  const [session, setSession] = useState(null);

  return (
    <ChatView
      session={session}
      showCompareButton={true}
    />
  );
};

Compare mode usage:

const CompareView = () => {
  const [leftSession, setLeftSession] = useState(null);
  const [rightSession, setRightSession] = useState(null);

  return (
    <div className="flex">
      <ChatView
        session={leftSession}
        isCompareMode={true}
        isSecondaryView={false}
        onExitCompare={handleExitCompare}
        availableSessions={sessions}
      />
      <ChatView
        session={rightSession}
        isCompareMode={true}
        isSecondaryView={true}
        onSessionChange={setRightSession}
        availableSessions={sessions}
      />
    </div>
  );
};

Handling WebSocket messages:

const handleWebSocketMessage = (message: WebSocketMessage) => {
  switch (message.type) {
    case "message":
      // Add complete message to run
      break;
    case "message_chunk":
      // Update streaming content
      break;
    case "status_update":
      // Update run status
      break;
    case "input_request":
      // Show input request UI
      break;
    case "error":
      // Handle error and close socket
      break;
    case "result":
      // Finalize run with result
      break;
  }
};

Submitting a message with files:

const handleSubmit = async (text: string, files: RcFile[]) => {
  const base64Files = await convertFilesToBase64(files);

  // Create message config
  const messageConfig: AgentMessageConfig = {
    source: "user",
    models_usage: null,
    content: text,
    media: base64Files
  };

  // Create run and send via WebSocket
  const runId = await createRun(session.id);
  // ... WebSocket communication
};

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment