[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10675":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":33,"discoverSource":34},10675,"ChatUI","alibaba\u002FChatUI","alibaba","The UI design language and React library for Conversational UI","https:\u002F\u002Fchatui.io",null,"TypeScript",4405,424,44,47,0,1,2,20,3,29.89,"MIT License",false,"master",[26,27,28,29],"chat","chatbot","react","ui","2026-06-12 02:02:25","\u003Ch1 align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fchatui.io\u002F\">\n    \u003Cimg width=\"109\" height=\"28\" src=\"https:\u002F\u002Fgw.alicdn.com\u002Ftfs\u002FTB1uYH4QoY1gK0jSZFMXXaWcVXa-218-56.svg\" alt=\"ChatUI\">\n  \u003C\u002Fa>\n\u003C\u002Fh1>\n\n\u003Cp align=\"center\">The UI design language and React library for Conversational UI\u003C\u002Fp>\n\n\u003Cp align=\"center\">Website：\u003Ca href=\"https:\u002F\u002Fchatui.io\u002F\" target=\"_blank\">https:\u002F\u002Fchatui.io\u003C\u002Fa>\u003C\u002Fp>\n\n\u003Cdiv align=\"center\">\n\n[![LICENSE](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@chatui\u002Fcore?style=flat-square)](https:\u002F\u002Fgithub.com\u002Falibaba\u002FChatUI\u002Fblob\u002Fmaster\u002FLICENSE)\n[![NPM version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@chatui\u002Fcore?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@chatui\u002Fcore)\n[![NPM downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@chatui\u002Fcore?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@chatui\u002Fcore)\n[![Gzip Size](https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002F\u002Funpkg.com\u002F@chatui\u002Fcore@0.1.0\u002Fdist\u002Findex.js?compression=gzip)](https:\u002F\u002Funpkg.com\u002F@chatui\u002Fcore@0.1.0\u002Fdist\u002Findex.js)\n[![Jsdelivr Hits](https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhm\u002F@chatui\u002Fcore?style=flat-square)](https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@chatui\u002Fcore)\n\n\u003C\u002Fdiv>\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"750\" src=\"https:\u002F\u002Fgw.alicdn.com\u002Ftfs\u002FTB1WTl.lQ9l0K4jSZFKXXXFjpXa-1500-833.jpg\">\n\u003C\u002Fp>\n\nEnglish | [简体中文](.\u002FREADME.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:\u002F\u002Fcaniuse.com\u002Fcss-variables))\n- Internet Explorer 11 (with [polyfills](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F57020976\u002Fpolyfills-in-2019-for-ie11) and [CSS Variables Polyfill](https:\u002F\u002Fgithub.com\u002Fnuxodin\u002Fie11CustomProperties) \u002F [css-vars-ponyfill](https:\u002F\u002Fgithub.com\u002Fjhildenbiddle\u002Fcss-vars-ponyfill))\n\n| \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fedge\u002Fedge_48x48.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>Edge | \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Ffirefox\u002Ffirefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>Firefox | \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fchrome\u002Fchrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>Chrome | \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fsafari\u002Fsafari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>Safari | \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fsafari-ios\u002Fsafari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>iOS Safari | \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fandroid-webview\u002Fandroid-webview_48x48.png\" alt=\"Android WebView\" width=\"24px\" height=\"24px\" \u002F>\u003Cbr>Android WebView |\n| --- | --- | --- | --- | --- | --- |\n| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |\n\n## Install\n\n```bash\nnpm install @chatui\u002Fcore --save\n```\n\n```bash\nyarn add @chatui\u002Fcore\n```\n\n## Usage\n\n```jsx\nimport Chat, { Bubble, useMessages } from '@chatui\u002Fcore';\nimport '@chatui\u002Fcore\u002Fdist\u002Findex.css';\n\nconst App = () => {\n  const { messages, appendMsg, setTyping } = useMessages([]);\n\n  function handleSend(type, val) {\n    if (type === 'text' && val.trim()) {\n      appendMsg({\n        type: 'text',\n        content: { text: val },\n        position: 'right',\n      });\n\n      setTyping(true);\n\n      setTimeout(() => {\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} \u002F>;\n  }\n\n  return (\n    \u003CChat\n      navbar={{ title: 'Assistant' }}\n      messages={messages}\n      renderMessageContent={renderMessageContent}\n      onSend={handleSend}\n    \u002F>\n  );\n};\n```\n\n[![DEMO](https:\u002F\u002Fcodesandbox.io\u002Fstatic\u002Fimg\u002Fplay-codesandbox.svg)](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fchatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)\n\n### Development\n\n```bash\ncd demo\nnpm i\nnpm run dev\n```\n\n## Theme\n\nVisit [Customize Theme](https:\u002F\u002Fchatui.io\u002Fdocs\u002Fcustomize-theme) for detail\n\n## Internationalization\n\nVisit [i18n](https:\u002F\u002Fchatui.io\u002Fdocs\u002Fi18n) for detail\n\n## License\n\nMIT\n","ChatUI 是阿里巴巴推出的一套用于会话界面的 UI 设计语言和 React 库。它基于阿里巴巴在 Alime 机器人上的丰富经验，提供了聊天交互的最佳实践。该项目使用 TypeScript 编写，支持响应式设计、无障碍访问，并具备强大的主题定制能力和国际化支持。适用于需要构建高质量对话界面的应用场景，如客服系统、聊天机器人等。ChatUI 在现代浏览器中表现良好，并且通过 polyfills 支持 Internet Explorer 11。","2026-06-11 03:29:39","top_topic"]