{"_id":"@ably/chat-react-ui-components","_rev":"6-1503e6b51e0a8be38193f608166da335","name":"@ably/chat-react-ui-components","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@ably/chat-react-ui-components","version":"0.1.0","author":{"name":"Ably Realtime"},"license":"Apache-2.0","_id":"@ably/chat-react-ui-components@0.1.0","maintainers":[{"name":"mschristensen","email":"mike@christensen.codes"},{"name":"ably-realtime","email":"account.owners@ably.com"},{"name":"simonw_ably","email":"simon.woolf@ably.com"},{"name":"owenpearson","email":"owen.pearson@ably.com"},{"name":"hingasellu","email":"hingasellu@gmail.com"},{"name":"ttypic","email":"khokhlov.e.n@gmail.com"},{"name":"andrii.bulat.ably","email":"andrii.bulat@ably.com"},{"name":"andytwf","email":"andyford993@gmail.com"},{"name":"splind06","email":"steven.lindsay@ably.com"},{"name":"zariel-ably","email":"chris.bannister@ably.com"},{"name":"mattheworiordan","email":"matthew.oriordan@gmail.com"},{"name":"vlad.velici.ably","email":"vlad.velici@ably.com"}],"homepage":"https://github.com/ably/ably-chat-react-ui-components#readme","bugs":{"url":"https://github.com/ably/ably-chat-react-ui-components/issues"},"dist":{"shasum":"bcfc1c94dcad60b1d05f226fce35638c41d48523","tarball":"https://registry.npmjs.org/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.0.tgz","fileCount":121,"integrity":"sha512-ZwIxIZUy4oSTguHmPuJvIBMJMZBh3Ae90y2PYNv08MmbhZW0Y593/4myi5nnPNvYGYI13tmaZfQBQYfelOHu/w==","signatures":[{"sig":"MEUCIFrKbFXTyaFU1nBW1gkQ9RZC0CnKGxDSuRdzOvLSqWKRAiEAt8w+kqCoPGMdaOhp6u3vaNFY3ZkqGhte8FPESKzsVMA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@ably%2fchat-react-ui-components@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1533204},"main":"./dist/ably/chat-react-ui-components.cjs","type":"module","style":"dist/style.css","types":"./dist/index.d.ts","module":"./dist/ably/chat-react-ui-components.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ably/chat-react-ui-components.js","require":"./dist/ably/chat-react-ui-components.cjs"},"./dist/style.css":"./dist/style.css"},"gitHead":"a110705a74799197ecb231ff92c06b71695e5cb2","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","test":"vitest run","build":"npm run build:css && vite build && tsc --declaration --emitDeclarationOnly --outDir dist","format":"prettier --write 'src/**/*.{ts,tsx,css}'","prepare":"npm run build","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","build:css":"tailwindcss -i ./src/style.css -o ./dist/style.css --minify","storybook":"storybook dev -p 6006","test:watch":"vitest","format:check":"prettier --check 'src/**/*.{ts,tsx,css}'","build-storybook":"storybook build","test:typescript":"tsc"},"_npmUser":{"name":"splind06","email":"steven.lindsay@ably.com"},"deprecated":"This package has been renamed to @ably/chat-react-ui-kit. Please install @ably/chat-react-ui-kit instead.","repository":{"url":"git+https://github.com/ably/ably-chat-react-ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"A library of configurable components for use with @ably/chat","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.10.0","browserslist":["defaults","not op_mini all","not kaios 2.5"],"dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"ably":"^2.9.0","vite":"^5.4.19","jsdom":"^26.0.0","dequal":"^2.0.3","eslint":"^9.27.0","vitest":"^3.0.8","globals":"^16.2.0","postcss":"^8.4.35","prettier":"^3.5.3","storybook":"^9.0.6","@eslint/js":"^9.28.0","typescript":"^5.5.3","postcss-cli":"^11.0.1","tailwindcss":"^3.4.1","@types/react":"^19.0.10","autoprefixer":"^10.4.18","jsonwebtoken":"^9.0.2","@eslint/compat":"^1.2.9","vite-plugin-dts":"^4.5.4","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^19.0.4","eslint-plugin-node":"^11.1.0","@types/jsonwebtoken":"^9.0.10","eslint-plugin-jsdoc":"^50.8.0","eslint-plugin-react":"^7.37.5","@vitejs/plugin-react":"^4.5.0","eslint-plugin-compat":"^6.0.2","eslint-plugin-import":"^2.31.0","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/react-vite":"^9.0.6","eslint-plugin-unicorn":"^59.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","eslint-plugin-storybook":"^9.0.6","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^8.32.1","eslint-plugin-react-hooks":"^5.2.0","@storybook/addon-onboarding":"^9.0.6","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^8.32.1","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ably/chat":"^0.10.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false},"@ably/chat":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/chat-react-ui-components_0.1.0_1752770320315_0.6519817082005699","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@ably/chat-react-ui-components","version":"0.1.1","author":{"name":"Ably Realtime"},"license":"Apache-2.0","_id":"@ably/chat-react-ui-components@0.1.1","maintainers":[{"name":"mschristensen","email":"mike@christensen.codes"},{"name":"ably-realtime","email":"account.owners@ably.com"},{"name":"simonw_ably","email":"simon.woolf@ably.com"},{"name":"owenpearson","email":"owen.pearson@ably.com"},{"name":"hingasellu","email":"hingasellu@gmail.com"},{"name":"ttypic","email":"khokhlov.e.n@gmail.com"},{"name":"andrii.bulat.ably","email":"andrii.bulat@ably.com"},{"name":"andytwf","email":"andyford993@gmail.com"},{"name":"splind06","email":"steven.lindsay@ably.com"},{"name":"zariel-ably","email":"chris.bannister@ably.com"},{"name":"mattheworiordan","email":"matthew.oriordan@gmail.com"},{"name":"vlad.velici.ably","email":"vlad.velici@ably.com"}],"homepage":"https://github.com/ably/ably-chat-react-ui-components#readme","bugs":{"url":"https://github.com/ably/ably-chat-react-ui-components/issues"},"dist":{"shasum":"102c20c00b110fa26e3663a92eb6767fa9336783","tarball":"https://registry.npmjs.org/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.1.tgz","fileCount":121,"integrity":"sha512-OqpKp2kXKNqkfpSYVomU5R1TIoc/k+HDxQzbtAJtYuH67DEp7JgNi8Xqidv0wwuFfaVPzNIlWwyhbcwIVJY/LQ==","signatures":[{"sig":"MEUCIQDPlAFfEXiKNs+z+KGpjgK8HJ2ZKa4jyRr2XneJH30KWgIgRiDfeCzOiNEBW/nW0baZYBhLPdKvY7izBBL2KB87OlA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@ably%2fchat-react-ui-components@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1532699},"main":"./dist/ably/chat-react-ui-components.cjs","type":"module","style":"dist/style.css","types":"./dist/index.d.ts","module":"./dist/ably/chat-react-ui-components.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ably/chat-react-ui-components.js","require":"./dist/ably/chat-react-ui-components.cjs"},"./dist/style.css":"./dist/style.css"},"gitHead":"186a0478955a9e705fdf5dce0a22f874e73a23dd","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","test":"vitest run","build":"npm run build:css && vite build && tsc --declaration --emitDeclarationOnly --outDir dist","format":"prettier --list-different --write 'src/**/*.{ts,tsx,css}'","prepare":"npm run build","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","build:css":"tailwindcss -i ./src/style.css -o ./dist/style.css --minify","storybook":"storybook dev -p 6006","test:watch":"vitest","format:check":"prettier --check 'src/**/*.{ts,tsx,css}'","build-storybook":"storybook build","test:typescript":"tsc"},"_npmUser":{"name":"splind06","email":"steven.lindsay@ably.com"},"deprecated":"This package has been renamed to @ably/chat-react-ui-kit. Please install @ably/chat-react-ui-kit instead.","repository":{"url":"git+https://github.com/ably/ably-chat-react-ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"A library of configurable components for use with @ably/chat","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.10.0","browserslist":["defaults","not op_mini all","not kaios 2.5"],"dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"ably":"^2.9.0","vite":"^5.4.19","jsdom":"^26.0.0","dequal":"^2.0.3","eslint":"^9.27.0","vitest":"^3.0.8","globals":"^16.2.0","postcss":"^8.4.35","prettier":"^3.5.3","storybook":"^9.0.6","@eslint/js":"^9.28.0","typescript":"^5.5.3","postcss-cli":"^11.0.1","tailwindcss":"^3.4.1","@types/react":"^19.0.10","autoprefixer":"^10.4.18","jsonwebtoken":"^9.0.2","@eslint/compat":"^1.2.9","vite-plugin-dts":"^4.5.4","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^19.0.4","eslint-plugin-node":"^11.1.0","@types/jsonwebtoken":"^9.0.10","eslint-plugin-jsdoc":"^50.8.0","eslint-plugin-react":"^7.37.5","@vitejs/plugin-react":"^4.5.0","eslint-plugin-compat":"^6.0.2","eslint-plugin-import":"^2.31.0","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/react-vite":"^9.0.6","eslint-plugin-unicorn":"^59.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","eslint-plugin-storybook":"^9.0.6","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^8.32.1","eslint-plugin-react-hooks":"^5.2.0","@storybook/addon-onboarding":"^9.0.6","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^8.32.1","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ably/chat":"^0.11.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false},"@ably/chat":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/chat-react-ui-components_0.1.1_1753448313490_0.19757453560758043","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@ably/chat-react-ui-components","version":"0.1.2","author":{"name":"Ably Realtime"},"license":"Apache-2.0","_id":"@ably/chat-react-ui-components@0.1.2","maintainers":[{"name":"mschristensen","email":"mike@christensen.codes"},{"name":"ably-realtime","email":"account.owners@ably.com"},{"name":"simonw_ably","email":"simon.woolf@ably.com"},{"name":"owenpearson","email":"owen.pearson@ably.com"},{"name":"hingasellu","email":"hingasellu@gmail.com"},{"name":"ttypic","email":"khokhlov.e.n@gmail.com"},{"name":"andrii.bulat.ably","email":"andrii.bulat@ably.com"},{"name":"andytwf","email":"andyford993@gmail.com"},{"name":"splind06","email":"steven.lindsay@ably.com"},{"name":"zariel-ably","email":"chris.bannister@ably.com"},{"name":"mattheworiordan","email":"matthew.oriordan@gmail.com"},{"name":"vlad.velici.ably","email":"vlad.velici@ably.com"}],"homepage":"https://github.com/ably/ably-chat-react-ui-components#readme","bugs":{"url":"https://github.com/ably/ably-chat-react-ui-components/issues"},"dist":{"shasum":"692919b0d1e66a0b6267057918a4fd6f4354bd1d","tarball":"https://registry.npmjs.org/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.2.tgz","fileCount":121,"integrity":"sha512-WEEFburLyNieOb3Fvu/KXO1h/M93cUiAo8hsp3EoJOT1y0rFcVLdnDKDm+BPIHCT0PIVMr1sWZJQ9anuqT0y6A==","signatures":[{"sig":"MEUCIFz2UVe9XQVpKzi3vVupOD9uQIeuELNUG+EN9OdRQqJrAiEAx65VkDFRRAlnCPZpJ5qjtAS30vg8IGMJKX0TXgvSkgU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@ably%2fchat-react-ui-components@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1532330},"main":"./dist/ably/chat-react-ui-components.cjs","type":"module","style":"dist/style.css","types":"./dist/index.d.ts","module":"./dist/ably/chat-react-ui-components.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ably/chat-react-ui-components.js","require":"./dist/ably/chat-react-ui-components.cjs"},"./dist/style.css":"./dist/style.css"},"gitHead":"4432e9108d4506c285a3a16a7daca44b05b5fdb9","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","test":"vitest run","build":"npm run build:css && vite build && tsc --declaration --emitDeclarationOnly --outDir dist","format":"prettier --list-different --write 'src/**/*.{ts,tsx,css}' '.storybook/**/*.{ts,tsx}'","prepare":"npm run build","lint:fix":"eslint 'src/**/*.{ts,tsx}'","build:css":"tailwindcss -i ./src/style.css -o ./dist/style.css --minify","storybook":"storybook dev -p 6006","build:full":"npm run build && npm run build-storybook","test:watch":"vitest","format:check":"prettier --check 'src/**/*.{ts,tsx,css}' '.storybook/**/*.{ts,tsx}'","build-storybook":"storybook build","test:typescript":"tsc --project tsconfig.all.json --noEmit"},"_npmUser":{"name":"splind06","email":"steven.lindsay@ably.com"},"deprecated":"This package has been renamed to @ably/chat-react-ui-kit. Please install @ably/chat-react-ui-kit instead.","repository":{"url":"git+https://github.com/ably/ably-chat-react-ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"A library of configurable components for use with @ably/chat","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.10.0","browserslist":["defaults","not op_mini all","not kaios 2.5"],"dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"ably":"^2.13.0","vite":"^5.4.19","jsdom":"^26.0.0","dequal":"^2.0.3","eslint":"^9.27.0","vitest":"^3.0.8","globals":"^16.2.0","postcss":"^8.4.35","prettier":"^3.5.3","storybook":"^9.0.6","@eslint/js":"^9.28.0","typescript":"^5.5.3","postcss-cli":"^11.0.1","tailwindcss":"^3.4.1","@types/react":"^19.0.10","autoprefixer":"^10.4.18","jsonwebtoken":"^9.0.2","@eslint/compat":"^1.2.9","vite-plugin-dts":"^4.5.4","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^19.0.4","eslint-plugin-node":"^11.1.0","@types/jsonwebtoken":"^9.0.10","eslint-plugin-jsdoc":"^50.8.0","eslint-plugin-react":"^7.37.5","@vitejs/plugin-react":"^4.5.0","eslint-plugin-compat":"^6.0.2","eslint-plugin-import":"^2.31.0","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/react-vite":"^9.0.6","eslint-plugin-unicorn":"^59.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","eslint-plugin-storybook":"^9.0.6","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^8.32.1","eslint-plugin-react-hooks":"^5.2.0","@storybook/addon-onboarding":"^9.0.6","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^8.32.1","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ably/chat":"^0.14.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false},"@ably/chat":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/chat-react-ui-components_0.1.2_1759229750956_0.5953697875089179","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-17T16:38:40.214Z","modified":"2026-03-18T18:56:51.497Z","0.1.0":"2025-07-17T16:38:40.524Z","0.1.1":"2025-07-25T12:58:33.746Z","0.1.2":"2025-09-30T10:55:51.176Z"},"bugs":{"url":"https://github.com/ably/ably-chat-react-ui-components/issues"},"author":{"name":"Ably Realtime"},"license":"Apache-2.0","homepage":"https://github.com/ably/ably-chat-react-ui-components#readme","repository":{"url":"git+https://github.com/ably/ably-chat-react-ui-components.git","type":"git"},"description":"A library of configurable components for use with @ably/chat","maintainers":[{"email":"mike@christensen.codes","name":"mschristensen"},{"email":"account.owners@ably.com","name":"ably-realtime"},{"email":"simon.woolf@ably.com","name":"simonw_ably"},{"email":"owen.pearson@ably.com","name":"owenpearson"},{"email":"khokhlov.e.n@gmail.com","name":"ttypic"},{"email":"lawrence.forooghian@ably.com","name":"lawrence.forooghian.ably"},{"email":"andrii.bulat@ably.com","name":"andrii.bulat.ably"},{"email":"andyford993@gmail.com","name":"andytwf"},{"email":"steven.lindsay@ably.com","name":"splind06"},{"email":"chris.bannister@ably.com","name":"zariel-ably"},{"email":"matthew.oriordan@gmail.com","name":"mattheworiordan"},{"email":"vlad.velici@ably.com","name":"vlad.velici.ably"}],"readme":"![Ably Chat Header](images/Chat-UI-Kits-github-v1.0.png)\n\n# Ably Chat React UI Components\n\nA library of configurable UI components for building chat applications with the Ably Chat SDK. This package provides\nready-to-use React components that integrate seamlessly with [`@ably/chat`](https://github.com/ably/ably-chat-js) to\nhandle real-time messaging, presence, typing indicators, and more.\n\n## Getting started\n\nEverything you need to get started with Ably Chat React UI Components:\n\n* [About Ably Chat.](https://ably.com/docs/chat)\n* [Getting started with Ably Chat in JavaScript.](https://ably.com/docs/chat/getting-started/javascript)\n* [Getting started with Ably Chat in React.](https://ably.com/docs/chat/getting-started/react)\n* [Getting started with Ably Chat React UI Components.](https://ably.com/docs/chat/getting-started/react-ui-components)\n* Play with the [livestream chat demo.](https://ably-livestream-chat-demo.vercel.app/)\n\n### Installation\n\n```bash\nnpm install @ably/chat-react-ui-components @ably/chat react react-dom\n```\n\n## Supported Platforms\n\nThis SDK supports the following platforms:\n\n| Platform     | Support                                                                                                    |\n|--------------|------------------------------------------------------------------------------------------------------------|\n| Browsers     | All major desktop browsers, including Chrome, Firefox, Edge and Opera. Internet Explorer is not supported. |\n| Node.js      | Version 18 or newer.                                                                                       |\n| TypeScript   | Fully supported, the library is written in TypeScript.                                                     |\n| React        | Version 18 or newer. Includes providers and hooks for deep integration with the React ecosystem.           |\n\n> [!NOTE] The Chat UI Components SDK can be installed from NPM and requires the core Ably Chat SDK as a peer dependency.\n>\n\n## Core Components\n\n### App Component\n\nFull application component that provides a complete chat interface out of the box:\n- Integrated sidebar for room navigation\n- Chat area with message display and input\n- Theme support (light/dark mode)\n- Avatar management\n\n### ChatWindow\nA comprehensive chat interface for individual rooms featuring:\n- Message history with pagination\n- Real-time message display\n- Message editing and deletion\n- Reactions support\n- Typing indicators\n\n### Sidebar\nA collapsible navigation component for managing multiple chat rooms:\n- Room list with activity indicators\n- Room creation and management\n- Presence and occupancy display\n- Theme toggle integration\n\n## Releases\n\nThe [CHANGELOG.md](./CHANGELOG.md) contains details of the latest releases for this SDK. You can also view all Ably releases on [changelog.ably.com](https://changelog.ably.com).\n\n## Contribute\n\nRead the [MAINTAINERS.md](./MAINTAINERS.md) guidelines to contribute to Ably or [Share feedback or request](https://forms.gle/mBw9M53NYuCBLFpMA) a new feature.\n\n## Support and known issues\n\nFor help or technical support, visit Ably's [support page](https://ably.com/support). You can also view the [community reported Github issues](https://github.com/ably/ably-chat-react-ui-components/issues) or raise one yourself.\n","readmeFilename":"README.md"}