{"_id":"@allem-ui/chat","_rev":"3-56bc28e431200eb58ada749028eccf63","name":"@allem-ui/chat","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@allem-ui/chat","version":"0.0.1","keywords":["allem-ui","chat","ai","chatbot","messaging","react","components"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/chat@0.0.1","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"7512d91c32622cbff11bd5d498313376f9b8ff84","tarball":"https://registry.npmjs.org/@allem-ui/chat/-/chat-0.0.1.tgz","fileCount":7,"integrity":"sha512-jXrgxHMfSBOwqCZG0AIWOSdt+wOGrJfuPb8CEa+hgOmW/Ht8huHLeZlbRozL3hffMHEwm6xwq1tnjqim4PM5uQ==","signatures":[{"sig":"MEUCIQCjEiZM+5jKukhhIUCdCfJcC2QNKOQcazQfIIt7GLsqQwIgSQWF2a/qnRxUaTjYsvX6HeFpShD4cOISv+4qPOFTlbE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76239},"main":"./dist/index.js","_from":"file:allem-ui-chat-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/2d22275eb65b4e04afa0f1f2c2e64231/allem-ui-chat-0.0.1.tgz","_integrity":"sha512-jXrgxHMfSBOwqCZG0AIWOSdt+wOGrJfuPb8CEa+hgOmW/Ht8huHLeZlbRozL3hffMHEwm6xwq1tnjqim4PM5uQ==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/chat"},"_npmVersion":"11.12.1","description":"AI chat interface components for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.8.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/chat_0.0.1_1779396105486_0.8238242444382282","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@allem-ui/chat","version":"0.0.2","keywords":["allem-ui","chat","ai","chatbot","messaging","react","components"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/chat@0.0.2","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"a455a8e65dc8b5fcc8c35db7ab16b8ea1928d4bc","tarball":"https://registry.npmjs.org/@allem-ui/chat/-/chat-0.0.2.tgz","fileCount":8,"integrity":"sha512-yJqJwe/MOKd/UkzUqqRIjrWEPrn7EzPVxiNW+gYjxiBTB1XfH6eXdw5Vds+bCO80QkLbTGvugRRG34L/jbB/MA==","signatures":[{"sig":"MEYCIQCOQ72YDGyimJVO9JxeXkgoSE4TaNv6TQMmuqcgsu0FUwIhANxyeLtJqnz/r2hFLhjI5sFm+JYUBUbmgdz8n1XNU9tT","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79228},"main":"./dist/index.js","_from":"file:allem-ui-chat-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/56d8b5be5097cbb923b1c27b623b00a2/allem-ui-chat-0.0.2.tgz","_integrity":"sha512-yJqJwe/MOKd/UkzUqqRIjrWEPrn7EzPVxiNW+gYjxiBTB1XfH6eXdw5Vds+bCO80QkLbTGvugRRG34L/jbB/MA==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/chat"},"_npmVersion":"11.12.1","description":"AI chat interface components for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/chat_0.0.2_1779493512064_0.03229710069356706","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@allem-ui/chat","version":"0.0.3","description":"AI chat interface components for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/chat"},"keywords":["allem-ui","chat","ai","chatbot","messaging","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/chat@0.0.3","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-AgwPZzkxjxCDY5gGabitHwc0T1IekSeRZGl3MUmQvRc95KbHK99xvdSQRreUertt9/oN9WU9ZesplQ8nQHl6QQ==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/d26bb627091a8e84ae8059375722415d/allem-ui-chat-0.0.3.tgz","_from":"file:allem-ui-chat-0.0.3.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-AgwPZzkxjxCDY5gGabitHwc0T1IekSeRZGl3MUmQvRc95KbHK99xvdSQRreUertt9/oN9WU9ZesplQ8nQHl6QQ==","shasum":"57a85497c52d8682baf37dd9f7fc1a0ea09c47f5","tarball":"https://registry.npmjs.org/@allem-ui/chat/-/chat-0.0.3.tgz","fileCount":8,"unpackedSize":79673,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDsXRolay7xyh7cs8AjRFUVI1D3jEzbnTQ63CVvgr1KQAIhAJVWAFMGn0CfabN9bPDBRfoG9qX9eKJI04NOq4tEMxWF"}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chat_0.0.3_1779581028381_0.7238501252337226"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T20:41:44.937Z","modified":"2026-05-24T00:03:48.713Z","0.0.1":"2026-05-21T20:41:45.618Z","0.0.2":"2026-05-22T23:45:12.227Z","0.0.3":"2026-05-24T00:03:48.558Z"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"license":"MIT","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","chat","ai","chatbot","messaging","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/chat"},"description":"AI chat interface components for Allem UI","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"readme":"<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/kingofmit/allem-ui/main/.github/AllemUI.png\" alt=\"Allem UI Chat\" />\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@allem-ui/chat\"><img src=\"https://img.shields.io/npm/v/@allem-ui/chat.svg\" alt=\"npm version\" /></a>\n  <a href=\"https://github.com/kingofmit/allem-ui/blob/main/LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\" /></a>\n  <img src=\"https://img.shields.io/badge/react-19-61dafb\" alt=\"React 19\" />\n  <img src=\"https://img.shields.io/badge/tailwind-v4-38bdf8\" alt=\"Tailwind v4\" />\n  <img src=\"https://img.shields.io/badge/typescript-strict-blue\" alt=\"TypeScript\" />\n</p>\n\n# @allem-ui/chat\n\nAI chat interface components for Allem UI -- chat bubbles, typing indicators, message groups, and syntax-highlighted code blocks.\n\n## Installation\n\n```bash\nnpm install @allem-ui/chat @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/chat\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport {\n  ChatContainer,\n  ChatList,\n  ChatBubble,\n  ChatInput,\n  TypingIndicator,\n} from \"@allem-ui/chat\";\n\nexport function ChatApp() {\n  return (\n    <ChatContainer>\n      <ChatList>\n        <ChatBubble variant=\"received\">Hello! How can I help?</ChatBubble>\n        <ChatBubble variant=\"sent\">Tell me about Allem UI.</ChatBubble>\n        <TypingIndicator />\n      </ChatList>\n      <ChatInput placeholder=\"Type a message...\" />\n    </ChatContainer>\n  );\n}\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `ChatContainer` | Top-level wrapper for the chat interface |\n| `ChatList` | Scrollable message list container |\n| `ChatBubble` | Individual chat message bubble |\n| `ChatInput` | Message input field with send action |\n| `TypingIndicator` | Animated typing dots indicator |\n| `MessageGroup` | Groups consecutive messages from the same sender |\n| `CodeBlock` | Syntax-highlighted code block for messages |\n\n## Features\n\n- **AI-ready** -- Built for AI chat interfaces with sent/received message variants\n- **Code blocks** -- Syntax-highlighted code rendering inside messages\n- **Typing indicator** -- Animated dots for real-time typing feedback\n- **Message grouping** -- Automatically groups consecutive messages\n- **Dark mode** -- First-class dark mode with `dark:` Tailwind prefix\n- **TypeScript strict** -- Full type safety with exported prop types\n- **Tree-shakeable** -- ESM + CJS builds, import only what you use\n\n## Part of Allem UI\n\nThis is a standalone package in the [Allem UI](https://github.com/kingofmit/allem-ui) monorepo. For core components, see [`@allem-ui/react`](https://www.npmjs.com/package/@allem-ui/react).\n\n## Support\n\nIf you find Allem UI useful, consider supporting its development:\n\n<a href=\"https://buymeacoffee.com/kingofmit\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\" /></a>\n\n## License\n\n[MIT](https://github.com/kingofmit/allem-ui/blob/main/LICENSE) - [Ahmed Allem](https://kingallem.com)\n","readmeFilename":"README.md"}