Implementation:Microsoft Autogen Studio Chat Input

Sources	python/packages/autogen-studio/frontend/src/components/views/playground/chat/chatinput.tsx
Domains	Frontend, React Component, File Upload, User Input
Last Updated	2026-02-11

Overview

ChatInput is a React component that provides a multi-featured text input interface with file attachment support, paste handling, drag-and-drop, auto-resizing, and file type validation for the AutoGen Studio chat interface.

Description

ChatInput handles user input collection with advanced features for a modern chat experience. Key features include:

Multi-line Text Input: Auto-resizing textarea that grows with content
File Upload Support: Ant Design Upload component with 5MB size limit
Drag and Drop: Visual feedback and file handling for drag-and-drop operations
Paste Detection: Automatically detects and handles pasted images and large text
Large Text Conversion: Converts pasted text over 1500 characters to file attachments
File Type Validation: Restricts uploads to text/plain, image/jpeg, image/png, image/gif, image/svg+xml
Keyboard Shortcuts: Enter to submit, Shift+Enter for new line
Auto-clear on Submit: Resets input and files after successful submission
Loading States: Disables input during message processing

The component uses React hooks for state management (useState for text, fileList, dragOver, notifications) and refs (useRef for textarea DOM access). It implements custom paste event handlers to intercept clipboard data, supports image pasting with automatic file naming, and provides visual feedback for all interactions. File management includes add, remove, and preview capabilities through Ant Design's Upload component.

Usage

ChatInput is rendered at the bottom of the ChatView component. It receives an onSubmit callback that's invoked with the text content and file array when the user submits their message.

Code Reference

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

Signature:

interface ChatInputProps {
  onSubmit: (text: string, files: RcFile[]) => void;
  loading: boolean;
  error: IStatus | null;
  disabled?: boolean;
}

export default function ChatInput({
  onSubmit,
  loading,
  error,
  disabled = false,
}: ChatInputProps) { /* ... */ }

Import:

import ChatInput from './chatinput';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
onSubmit	(text: string, files: RcFile[]) => void	Yes	Callback invoked when user submits message
loading	boolean	Yes	Shows loading state and disables input
error	null	Yes	Error state object (currently unused in UI)
disabled	boolean	No	Additional disable flag (default: false)

Constants

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

const ALLOWED_FILE_TYPES = [
  "text/plain",
  "image/jpeg",
  "image/png",
  "image/gif",
  "image/svg+xml",
];

const LARGE_TEXT_THRESHOLD = 1500; // characters

Outputs

Event	Payload	Description
onSubmit	text: string, files: RcFile[]	Fired when user submits message via Enter key or send button

Usage Examples

Basic usage:

import ChatInput from './chatinput';

const ChatView = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (text: string, files: RcFile[]) => {
    setLoading(true);
    try {
      // Convert files to base64
      const base64Files = await convertFilesToBase64(files);

      // Send message with files
      await sendMessage({ text, media: base64Files });
    } finally {
      setLoading(false);
    }
  };

  return (
    <ChatInput
      onSubmit={handleSubmit}
      loading={loading}
      error={null}
    />
  );
};

Handling file uploads:

const handleSubmit = async (text: string, files: RcFile[]) => {
  console.log('Message text:', text);
  console.log('Number of files:', files.length);

  files.forEach(file => {
    console.log('File:', file.name, file.type, file.size);
  });

  // Process files
  for (const file of files) {
    if (file.type.startsWith('image/')) {
      // Handle image
    } else if (file.type === 'text/plain') {
      // Handle text file
    }
  }
};

Programmatic input control:

// The component auto-clears on successful submit
// If you need to preserve input on error:
const [error, setError] = useState(null);

const handleSubmit = async (text: string, files: RcFile[]) => {
  try {
    await sendMessage(text, files);
    setError(null); // Clear error, input will auto-clear
  } catch (e) {
    setError({ status: false, message: e.message });
    // Input remains populated due to error state
  }
};

<ChatInput
  onSubmit={handleSubmit}
  loading={false}
  error={error}
/>

Handling paste events:

// Component automatically handles:
// 1. Pasted images -> converted to file attachments
// 2. Large text (>1500 chars) -> converted to .txt file
// 3. Normal text -> inserted into textarea

// Users see notifications:
// - "Image pasted successfully"
// - "Large Text Converted to File"
// - "Pasted image is too large. Maximum size is 5MB."

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment