TDesign Vue Next Documentation

TDesign Vue Next provides several specialized upload components 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 (without drag-and-drop).
• ImageCard: Optimized for image uploads, supporting single or multiple images (without drag-and-drop).
• DraggerFile: Supports single file or image uploads via drag-and-drop.
• MultipleFlowList: Designed for batch image or file uploads with drag-and-drop support.

The TDesign Vue Next Starter Kit is designed to provide an out-of-the-box, configuration-style foundation for middle and background projects. Key features include:

• Pre-built Pages: Various ready-to-use pages for development.
• Standardized Structure: A complete directory structure following code specifications.
• Theming: Support for dark mode and custom theme color configuration.
• Layouts: Various space layouts available for different application needs.
• Data Mocking: Built-in mock data schemes to facilitate development.

The @tdesign/vue-next-chat package provides a suite of components for building AI-driven chat interfaces. Key components introduced in 0.5.0 include:

• ChatList: The main container for conversation units (formerly Chat).
• ChatMessage: Displays individual messages within a conversation.
• Chatbot: A high-level component for intelligent dialogue systems (e.g., customer service, Q&A).
• ChatEngine: A headless engine core that supports the AGUI protocol (as of 0.6.0).
• ChatMarkdown: Renders Markdown content with support for advanced streaming and formats like Mermaid.
• ChatThinking: Represents the model's thought process (formerly ChatReasoning).
• Attachments: A component specifically for displaying file attachments.
• ChatSender: An enhanced input component supporting multi-modal input and model switching.

AG-UI (Agent User Interaction Protocol) is a standardized communication protocol designed for interactions between AI Agents and frontend applications. It uses an event-driven model to decouple the frontend from various AI services, providing a unified language for AI applications.

Key features include:

• Unified Interface Standards: Abstracts differences between various AI providers.
• Real-time Streaming: Supports streaming data via SSE or WebSocket.
• Stateful Session Management: Maintains conversation context and shared state.
• Tool Calling Mechanism: Standardizes the definition, invocation, and result handling of tools.

In version 0.20.0, a breaking change was introduced for the Popup component regarding how styles are applied to layers:

• overlayStyle: Now controls the t-popup layer level.
• overlayInnerStyle: A new property introduced to control the t-popup__content layer level. This property provides the same effect that the original overlayStyle used to have.

TDesign supports two ways to trigger notifications: Plugin-style (using this.$notification within a Vue instance) and Functional-style (using the NotifyPlugin directly). Both methods accept the same arguments.

Example:

// Functional call
NotifyPlugin.warning({ title: 'Please enter title', content: 'Please enter content' });

// Plugin call
this.$notification.warning({ title: 'Please enter title', content: 'Please enter content' });

You can extend the icon library by passing a url to the IconSVG component.

Important Rules:

1. Naming: When using a custom URL, the name must be the full name to avoid collisions (e.g., use name="t-icon-home" instead of name="home").
2. Default Icons: To prevent the component from loading the default built-in SVG icons, set loadDefaultIcons to false.