{"id":13422329,"url":"https://github.com/alibaba/ChatUI","last_synced_at":"2025-03-15T12:30:38.107Z","repository":{"id":37101493,"uuid":"284864176","full_name":"alibaba/ChatUI","owner":"alibaba","description":"The UI design language and React library for Conversational UI","archived":false,"fork":false,"pushed_at":"2024-11-25T12:15:50.000Z","size":743,"stargazers_count":2869,"open_issues_count":36,"forks_count":297,"subscribers_count":38,"default_branch":"next","last_synced_at":"2025-03-12T18:38:45.922Z","etag":null,"topics":["chat","chatbot","react","ui"],"latest_commit_sha":null,"homepage":"https://chatui.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alibaba.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-04T03:09:19.000Z","updated_at":"2025-03-12T12:22:06.000Z","dependencies_parsed_at":"2025-01-02T05:01:07.049Z","dependency_job_id":null,"html_url":"https://github.com/alibaba/ChatUI","commit_stats":{"total_commits":303,"total_committers":6,"mean_commits":50.5,"dds":0.01650165016501648,"last_synced_commit":"4b3ca4ba0c0ec19390a78e2d448bf6f1f23656a2"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2FChatUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2FChatUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2FChatUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2FChatUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba","download_url":"https://codeload.github.com/alibaba/ChatUI/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243428433,"owners_count":20289316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chatbot","react","ui"],"created_at":"2024-07-30T23:00:41.717Z","updated_at":"2025-03-15T12:30:38.088Z","avatar_url":"https://github.com/alibaba.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://chatui.io/\"\u003e\n    \u003cimg width=\"109\" height=\"28\" src=\"https://gw.alicdn.com/tfs/TB1uYH4QoY1gK0jSZFMXXaWcVXa-218-56.svg\" alt=\"ChatUI\"\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eThe UI design language and React library for Conversational UI\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eWebsite：\u003ca href=\"https://chatui.io/\" target=\"_blank\"\u003ehttps://chatui.io\u003c/a\u003e\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![LICENSE](https://img.shields.io/npm/l/@chatui/core?style=flat-square)](https://github.com/alibaba/ChatUI/blob/master/LICENSE)\n[![NPM version](https://img.shields.io/npm/v/@chatui/core?style=flat-square)](https://www.npmjs.com/package/@chatui/core)\n[![NPM downloads](https://img.shields.io/npm/dm/@chatui/core?style=flat-square)](https://www.npmjs.com/package/@chatui/core)\n[![Gzip Size](https://img.badgesize.io/https://unpkg.com/@chatui/core@0.1.0/dist/index.js?compression=gzip)](https://unpkg.com/@chatui/core@0.1.0/dist/index.js)\n[![Jsdelivr Hits](https://img.shields.io/jsdelivr/npm/hm/@chatui/core?style=flat-square)](https://cdn.jsdelivr.net/npm/@chatui/core)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"750\" src=\"https://gw.alicdn.com/tfs/TB1WTl.lQ9l0K4jSZFKXXXFjpXa-1500-833.jpg\"\u003e\n\u003c/p\u003e\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n## Features\n\n- 😎 **Best Practices**: The best practice for chat interaction based on our experience of Alime Chatbot\n- 🛡 **TypeScript**: Written in TypeScript with predictable static types\n- 📱 **Responsive**: Responsive design to adapt automatically to whatever device\n- ♿ **Accessibility**: Accessibility support and get the certification from Accessibility Research Association\n- 🎨 **Theming**: Powerful theme customization in every detail\n- 🌍 **International**: Internationalization support for dozens of languages\n\n## Environment Support\n\n- Modern browsers (support [CSS Variables](https://caniuse.com/css-variables))\n- Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11) and [CSS Variables Polyfill](https://github.com/nuxodin/ie11CustomProperties) / [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill))\n\n| \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eEdge | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eFirefox | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eChrome | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eSafari | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eiOS Safari | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/android-webview/android-webview_48x48.png\" alt=\"Android WebView\" width=\"24px\" height=\"24px\" /\u003e\u003cbr\u003eAndroid WebView |\n| --- | --- | --- | --- | --- | --- |\n| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |\n\n## Install\n\n```bash\nnpm install @chatui/core --save\n```\n\n```bash\nyarn add @chatui/core\n```\n\n## Usage\n\n```jsx\nimport Chat, { Bubble, useMessages } from '@chatui/core';\nimport '@chatui/core/dist/index.css';\n\nconst App = () =\u003e {\n  const { messages, appendMsg, setTyping } = useMessages([]);\n\n  function handleSend(type, val) {\n    if (type === 'text' \u0026\u0026 val.trim()) {\n      appendMsg({\n        type: 'text',\n        content: { text: val },\n        position: 'right',\n      });\n\n      setTyping(true);\n\n      setTimeout(() =\u003e {\n        appendMsg({\n          type: 'text',\n          content: { text: 'Bala bala' },\n        });\n      }, 1000);\n    }\n  }\n\n  function renderMessageContent(msg) {\n    const { content } = msg;\n    return \u003cBubble content={content.text} /\u003e;\n  }\n\n  return (\n    \u003cChat\n      navbar={{ title: 'Assistant' }}\n      messages={messages}\n      renderMessageContent={renderMessageContent}\n      onSend={handleSend}\n    /\u003e\n  );\n};\n```\n\n[![DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n### Development\n\n```bash\ncd demo\nnpm i\nnpm run dev\n```\n\n## Theme\n\nVisit [Customize Theme](https://chatui.io/docs/customize-theme) for detail\n\n## Internationalization\n\nVisit [i18n](https://chatui.io/docs/i18n) for detail\n\n## Discussion\n\n\u003cimg width=\"400\" height=\"515\" src=\"https://img.alicdn.com/imgextra/i1/O1CN01T0kGHu1Ceao2ARz4m_!!6000000000106-0-tps-828-1068.jpg\"\u003e\n\n## License\n\nMIT\n","funding_links":[],"categories":["UI Frameworks","UI Frameworks \u0026 Libraries","TypeScript","目录","前端常见效果库"],"sub_categories":["Responsive","style","\u003ca id=\"ui\"\u003eui\u003c/a\u003e","chat 相关"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2FChatUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba%2FChatUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2FChatUI/lists"}