Chat Component Revamp, Fluent 2 and Theming Improvements
In v12.0.0 the Chat component has been completely redesigned to provide a better user experience for both person-to-person and AI-powered conversations. This release also brings a major update to the Telerik and Kendo UI Fluent theme, aligning it with the Microsoft Fluent 2 design system, delivering a modernized visual experience across all UI components.
Chat Component Revamp
The Chat component update in v12.0.0 includes improved rendering and refined styling, making its interface more intuitive, flexible, and visually appealing.
Key New Features
- Chat Header—provides a customizable header section for Chat conversations.
- Files—Supports both single and multiple files, allowing users to share files seamlessly within the chat.
- Expandable Messages—Enables users to expand messages for better readability and access to long content.
- Full-Width Messages—Supports fill-width message display.
- Pinned Messages and Files—Users can pin important messages and files for quick reference.
- Message Reply—Allows users to reply to specific messages.
- Message Deleted—Clearly indicates when a message has been deleted.
- Message Bubble states—Introduces interactive states for message bubbles, such as hover, active, focused, selected.
- Skeleton Loading—Displays skeleton loader to indicate content is being fetched.
- Animated Typing Indicator—Shows a visually engaging typing indicator with animation to enhance real-time communication.
Enhanced Styling and Usability
In addition to the new features, the Chat component now offers improved styling for several elements:
- Timestamp—Timestamps now feature improved readability and visual consistency.
- Suggestions (Quick Replies)—Suggestions now include interactive states (hover, focus, active), scrolling (default) and wrapping option and different color options.
- Links inside Messages—Links are styled for better visibility and interaction.
Fluent 2 and Theming Improvements
This update replaces Fluent 1 with modern design standards for metrics, layouts, typography and elevation. The update ensures seamless integration with today's Microsoft ecosystem.
What’s New in the Fluent 2 Design
- Color System—Enhanced color tokens with improved contrast ratios.
- Focus Management—Improved and simplified focus indications for better visibility.
- Elevation—The elevation system in Fluent 2 has been refined with more subtle and softer shadows that provide depth without visual clutter.
Differences between the Fluent 2 Design System and the Telerik and Kendo UI Fluent Theme
While we have made every effort to align with the Fluent 2 guidelines, there are a few differences due to the specifics of our components and design system:
- Toolbar Vertical Padding—The vertical paddings for toolbars across all size variants has been set to 6px to ensure optimal visual representation and accommodate special use cases, such as buttons with badges within toolbars.
- Calendar Interactive States—Some interactive states utilize custom color variations that differ from standard Fluent 2 specifications to ensure optimal visual representation and usability within our component ecosystem.
- Light Border Colors—Border colors incorporate opacity adjustments to better integrate with our design system requirements and provide enhanced visual consistency across all components.
Color Swatch for the Fluent 1 Design System
The Telerik and Kendo UI Fluent theme has been updated to align with the Microsoft Fluent 2 design system guidelines, which introduce significant changes in every aspect of the design system compared to the Fluent 1 guidelines. We created a dedicated Fluent 1 color swatch to preserve the familiar color feel of Fluent 1 while benefiting from the modernized design system of Fluent 2.
Replaced Padding-Related Variables with Their -md-Suffixed Equivalents
For consistency with the other themes, all $kendo-[component]-padding-x and $kendo-[component]-padding-y scss variables have been replaced with their -md suffixed equivalents. For example:
$kendo-button-padding-x is now $kendo-button-md-padding-x$kendo-button-padding-y is now $kendo-button-md-padding-yA full list with the variables for each component could be found in the corresponding Styles section.
