The UI design language and React library for Conversational UI

Website：https://simmslabs.com

Features

- 😎 Best Practices: The best practice for chat interaction based on our experience of Alime Chatbot
- 🛡 TypeScript: Written in TypeScript with predictable static types
- 📱 Responsive: Responsive design to adapt automatically to whatever device
- ♿ Accessibility: Accessibility support and get the certification from Accessibility Research Association
- 🎨 Theming: Powerful theme customization in every detail
- 🌍 International: Internationalization support for dozens of languages

Environment Support

- Modern browsers (support CSS Variables)
- Internet Explorer 11 (with polyfills and CSS Variables Polyfill / css-vars-ponyfill)

|
Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Android WebView |
| --- | --- | --- | --- | --- | --- |
| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |

Install

``bash
npm install simmslabschatui --save
`

`bash
yarn add simmslabschatui
`

Usage

`jsx
import Chat, { Bubble, useMessages } from 'simmslabschatui';
import 'simmslabschatui/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 ;
}

return (
navbar={{ title: 'Assistant' }}
messages={messages}
renderMessageContent={renderMessageContent}
onSend={handleSend}
/>
);
};
`

![DEMO](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)

$3

`bash
cd storybook
npm i
npm run storybook
``

License

MIT