Preferences

Theme Selection

Theme Modes

Mode Selection

Touch

Mouse

Localization

*Translated by Google Translator.

Currency

HOME

Grids
- Data GridUpdated
- Pivot Table
- Tree GridUpdated
- Spreadsheet
Interactive Chat
- AI AssistViewUpdated
- Chat UIpreview
Data Visualization
- ChartUpdated
- 3D Chart
- 3D Circular Chart
- Stock Chart
- Arc Gauge
- Circular Gauge
- DiagramUpdated
- HeatMap Chart
- Linear Gauge
- Maps
- Range Selector
- Smith Charts
- Barcode
- Sparkline Charts
- TreeMap
- Bullet Chart
- Kanban
Viewer & Editors
- PDF ViewerUpdated
- Rich Text Editor
- Markdown Editor
- Word Processor
- Image Editor
- ChipsUpdated
- Button
- In-place Editor
- Floating Action Button
- SpeedDial
Calendars
- SchedulerUpdated
- Gantt ChartUpdated
- Calendar
- DatePickerUpdated
- DateRangePicker
- DateTimePickerUpdated
- TimePicker
Dropdowns
- AutoComplete
- ComboBox
- Dropdown List
- Dropdown Tree
- MultiSelect Dropdown
- List Box
- MentionUpdated
- MultiColumn ComboBox
Navigation
- Accordion
- AppBar
- Breadcrumb
- Carousel
- Context Menu
- File Manager
- Menu Bar
- Sidebar
- Tabs
- Toolbar
- TreeView
- Ribbon
- Stepper
Notification
- Message
- Badge
- Toast
- Progress Bar
- Skeleton
Inputs
- Textbox
- TextArea
- Input Mask
- Numeric Textbox
- Color Picker
- File Upload
- Range Slider
- Signature
- Rating
- OTP Input
- Speech To Textpreview
Layout
- Avatar
- Card
- Dashboard Layout
- Dialog
- Predefined Dialogs
- ListView
- Tooltip
- Splitter
- Timeline
Forms
- Query Builder
Document Processing Libraries
- Word (DocIO)Updated
- PDFUpdated
- PowerPoint (Presentation)Updated
- Excel (XlsIO)

All Controls

Chat UI
Default Functionalities
Load On-Demandnew
Template
API
Integration
Use Case

Example of Template in ASP.NET MVC Chat UI Control

Chat UI

Template

This sample demonstrates the template functionality of the Chat UI control, showing how you can customize various elements of the chat interface. It highlights the ability to adjust the appearance of message items, time breaks, and empty chat screens using templates.

Order Assistant

Today

Hello! I'm the Order tracking bot. how can I help you today?

In this example, a bot provides order tracking updates by customizing each message using the templates. The messageTemplate property controls the layout of messages, including the avatar, message content, and suggestions. The timeBreakTemplate adjusts the display of time breaks, showing either "Today" or the specific date.

The bot sends a default response when a message is sent, and suggestions appear below the message. When a suggestion is clicked, the bot replies with a new message or set of suggestions, demonstrating how templates enhance the interaction flow within the Chat UI control.