TDesign React

TDesign React Starter is a configuration-style starter kit designed for middle and background projects. Key features include:

• Exquisite Design: Based on TDesign UI specifications with available design resources (Figma, Sketch, etc.).
• Complete Routing: Supports both configuration-based routing (with deep customization for Menu and Breadcrumb components) and custom routing.
• Dynamic Layout: Built-in layouts such as "Left-Right Layout", "Top-Left-Right Layout", and "Up-Down Layout". Page content uses a 24-grid layout with "Regular" and "Compact" spacing modes.
• Fast HRM: Powered by Vite for ultra-fast Hot Module Replacement (HMR) using browser ES modules.
• Development Specifications: Uses eslint-config-airbnb-base for code quality and follows Angular commit specifications.

The Message component provides a way to display global, non-modal notifications. You can use it via functional calls (e.g., message.info()) or by using the MessagePlugin.

Common use cases include:

• Showing messages with a close button.
• Controlling message visibility using the returned close function.
• Closing all active messages at once.
• Adjusting the display position (placement) and offset.
• Setting a custom duration for the message to appear.

TDesign React provides several specialized upload component variants depending on your required user experience and file types:

• CustomFile: For fully customized file upload implementations.
• NormalFile: Standard file upload supporting single or multiple files (does not support drag-and-drop).
• ImageCard: Optimized for image uploads, supporting single or multiple images (does not support drag-and-drop).
• DraggerFile: Supports single file or image uploads specifically via drag-and-drop.
• MultipleFlowList: Designed for batch uploading of images or files with drag-and-drop support.

TDesign Starter provides several core capabilities for enterprise-level application development:

• Design System: Built on TDesign UI specifications with design resources available for Figma, Sketch, Adobe XD, and Axure.
• Routing: Supports both configuration-based routing and custom routing. For configuration-based routing, it provides deep customization for navigation components like Menu and Breadcrumb without manual route mapping.
• Dynamic Layouts: Includes built-in common layouts such as "Left-Right", "Top-Left-Right", and "Top-Bottom". Page content uses a 24-grid layout with both "Regular" and "Compact" spacing modes.
• Fast Development: Uses Vite for extremely fast HMR by leveraging browser esmodules in development.
• Development Standards: Enforces eslint-config-airbnb-base for code quality and Angular commit standards for git commits.

The following components were introduced in version 0.32.0:

• Card: A new container component.
• ColorPicker: A new component for selecting colors.
• Table: A refactored version supporting header sticking, simple column drag-and-drop sorting, custom column configuration, lazy loading, custom expansion icons, and tree structures.

AG-UI (Agent User Interaction Protocol) is a standardized event-driven protocol designed for interaction between AI Agents and frontend applications. It provides a unified communication specification that allows frontend interfaces to interact with various AI services seamlessly.

Core Concepts:

• Event-Driven Model: Uses standardized event streams to decouple frontend and backend.
• Streaming Communication: Supports real-time data transfer via SSE or WebSocket.
• State Management: Uses a Snapshot + Delta pattern (based on JSON Patch RFC 6902) for synchronizing global state and activities.
• Tool Calling: Provides a standardized lifecycle for defining, calling, and handling tool results.
• Dynamic Rendering: Supports incremental rendering of components to improve user experience.

ChatEngine is a low-level conversational engine designed for AI agents. It provides flexible Hook APIs for deep customization of UI structures and message processing flows.

Key differences from the Chatbot component:

• Chatbot: A high-level component suitable for standard chat interfaces.
• ChatEngine: A low-level engine ideal for complex scenarios like tool calling, multi-step task planning, and state streaming where you need full control over the UI and data lifecycle.

ChatEngine is built on top of the useChat Hook and can be composed using components like ChatList, ChatMessage, and ChatSender.

When implementing UI elements for backend data or agent actions, choose between Activity and ToolCall based on whether you need interaction or just display.

Use Activity when:

• You need purely visual UI (charts, progress bars, data visualizations).
• You need streaming incremental updates (e.g., real-time stock prices, log streams) as it natively supports JSON Patch.

Use ToolCall when:

• You need user interaction for form collection (Human-in-the-Loop) via the respond callback.
• You need to subscribe to the global agentState using subscribeKey.
• You require fine-grained lifecycle control (states like idle, executing, complete, or error).

Summary Rule: If you are only displaying backend data, use Activity. If you need interaction or global state access, use ToolCall.

You can use the Iconfont component to load custom iconfont icons via a URL.

By default, the component imports the standard TDesign iconfont icons. To disable loading these default icons, set loadDefaultIcons to false.

What is Streaming Output?

Streaming output (or streaming transmission) refers to a mechanism where the server continuously pushes data to the client instead of sending it all at once. Once a connection is established, the server can send real-time updates to the client.

Key Differences from Regular HTTP Requests

• Regular HTTP Requests: Based on a request-response model. The client sends a request, the server processes it, sends a single response, and closes the connection.
• Streaming Output (SSE): Keeps the connection open, allowing the server to send multiple responses/data chunks sequentially over time.

Common Use Cases

• Real-time message pushing
• Stock market updates
• Real-time notifications
• Large Language Model (LLM) responses (streaming text generation)