ChatUI: Alibaba open source intelligent conversational UI component library
Alibaba has released an open-source ChatUI component library, which is a new option for building efficient conversational UIs. This helps you quickly develop high-quality chat applications.
Core content:
1. Introduction to ChatUI component library functions and installation methods
2. Basic component preview and environment support instructions
3. Best practices and interaction modes based on Alibaba's Alime Chatbot
// npm
npm install @chatui/core --save
// import
import React from 'react' ;
import Chat, { Bubble, useMessages } from '@chatui/core' ;
import '@chatui/core/dist/index.css' ;
const App = () => {
const { messages, appendMsg, setTyping } = useMessages([]);
function handleSend ( type, val ) {
if (type === 'text' && val.trim()) {
appendMsg({
type : 'text' ,
content : { text : val },
position : 'right' ,
});
setTyping( true );
setTimeout( () => {
appendMsg({
type : 'text' ,
content : { text : 'Bala bala' },
});
}, 1000 );
}
}
function renderMessageContent ( msg ) {
const { content } = msg;
return < Bubble content = {content.text} /> ;
}
return (
< Chat
navbar = {{ title: ' Assistant ' }}
messages = {messages}
renderMessageContent = {renderMessageContent}
onSend = {handleSend}
/>
);
};
export default App;Environmental support:
ChatUI supports modern browsers (supporting CSS variables) as well as Internet Explorer 11 (requires polyfills and the CSS variables polyfill).
Browsers: Edge 16+, Firefox 31+, Chrome 49+, Safari 9.1+, iOS Safari 9.3+, Android WebView 6+.
1. Best Practices
ChatUI is based on the best practices of chat interaction of Alibaba's Alime Chatbot, providing proven interaction patterns and design languages. This enables developers to quickly build chat applications that are in line with user habits.
2. TypeScript support
ChatUI is written in TypeScript, which provides predictable static types. This not only helps the maintainability of the code, but also provides better type checking and code hints during the development process.
3. Responsive Design
ChatUI uses a responsive design that automatically adapts to various devices, including desktop browsers, mobile devices, etc. This ensures that users have a consistent experience on different devices.
4. Accessibility support
ChatUI has been certified by the Accessibility Research Association and supports accessibility features. This allows chat applications to better serve users with disabilities and improve the inclusiveness of applications.
5. Theme Customization
ChatUI provides a powerful theme customization function, developers can customize the style of the interface in every detail. This enables developers to adjust the appearance of the application according to brand requirements or user preferences.
6. Internationalization support
ChatUI supports internationalization in multiple languages to meet the needs of users in different regions. Developers can translate the application into multiple languages through simple configuration to improve the global applicability of the application.
