{"_id":"@arisng/just-chat","_rev":"3-c545d6cd11b5bcb27d296f7e358e064d","name":"@arisng/just-chat","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.4":{"name":"@arisng/just-chat","version":"0.1.4","keywords":["chat","widget","web-components","typescript"],"author":"","license":"MIT","_id":"@arisng/just-chat@0.1.4","maintainers":[{"name":"arisng","email":"nda1291@outlook.com"}],"homepage":"https://github.com/draphonix/just-chat#readme","bugs":{"url":"https://github.com/draphonix/just-chat/issues"},"dist":{"shasum":"dbe3ea0bbbd862037943ccec1c24697b25dbf421","tarball":"https://registry.npmjs.org/@arisng/just-chat/-/just-chat-0.1.4.tgz","fileCount":5,"integrity":"sha512-I4eT1a1au/psG+4FaeKLafF/fwPedOC4R46+4dtVLzjowAfB36ZdYQ6cHoDJPVo3JSJc7UfhmUt0mn9Db8bcrw==","signatures":[{"sig":"MEUCIEIMV2ARBUocXvTm2q5+x3VbzY0DKGR+hZ2L6JyOnQVXAiEAl2LFm4XrmfE0fPwZX4KVNlCM9UVMHMW3NgIK29I5zFo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38924},"main":"dist/just-chat.umd.js","type":"module","types":"dist/main.d.ts","module":"dist/just-chat.es.js","gitHead":"aa999c81ea678cf64153947fadfb5fbbb5634875","private":false,"scripts":{"dev":"vite","build":"tsc && vite build","start":"pnpm build && node mock-server.js && vite","preview":"vite preview","mock-server":"node mock-server.js"},"_npmUser":{"name":"arisng","email":"nda1291@outlook.com"},"repository":{"url":"git+https://github.com/draphonix/just-chat.git","type":"git"},"_npmVersion":"10.9.2","description":"A lightweight, customizable chat widget that can be easily embedded into any website. Built with Web Components for maximum compatibility and style isolation.","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cors":"^2.8.5","vite":"^5.0.8","express":"^4.18.2","typescript":"^5.2.2"},"_npmOperationalInternal":{"tmp":"tmp/just-chat_0.1.4_1746410123525_0.5667412168197941","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@arisng/just-chat","version":"0.1.5","keywords":["chat","widget","web-components","typescript"],"author":"","license":"MIT","_id":"@arisng/just-chat@0.1.5","maintainers":[{"name":"arisng","email":"nda1291@outlook.com"}],"homepage":"https://github.com/arisng/just-chat#readme","bugs":{"url":"https://github.com/arisng/just-chat/issues"},"dist":{"shasum":"6dac39fbde07dc04dea504ca274730fc386f463c","tarball":"https://registry.npmjs.org/@arisng/just-chat/-/just-chat-0.1.5.tgz","fileCount":5,"integrity":"sha512-WMRQ06+SJMJ9InDG26Fk1UVbiCB86p5XnftNjCf5Jv+kL6OMQ85kSxZYT/whEqm8e9WsyynCJcrgC9tlA+eITw==","signatures":[{"sig":"MEUCIQCu8MsgKNfOHP/Q/QmohIwSMbhlVTnTo/MDrlJRU2z9iwIgZDEf3oazOjj/CYf1M4aY/B+wIbdI7iMGjd2ze7tSn2M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39671},"main":"dist/just-chat.umd.js","type":"module","types":"dist/main.d.ts","module":"dist/just-chat.es.js","gitHead":"05da6db973b8649b2919a014b930bacf7b5c5940","private":false,"scripts":{"dev":"vite","build":"tsc && vite build","start":"pnpm build && node mock-server.js && vite","preview":"vite preview","mock-server":"node mock-server.js"},"_npmUser":{"name":"arisng","email":"nda1291@outlook.com"},"repository":{"url":"git+https://github.com/arisng/just-chat.git","type":"git"},"_npmVersion":"10.9.2","description":"> This repository contains my personal customization of the Just-Chat widget, a lightweight chat solution for websites. I've adapted the original work to better suit my specific needs while maintaining the core functionality and principles of the original","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cors":"^2.8.5","vite":"^5.0.8","express":"^4.18.2","typescript":"^5.2.2"},"_npmOperationalInternal":{"tmp":"tmp/just-chat_0.1.5_1746410600907_0.8975252390360033","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@arisng/just-chat","private":false,"version":"0.1.6","type":"module","main":"dist/just-chat.umd.js","module":"dist/just-chat.es.js","types":"dist/main.d.ts","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","mock-server":"node mock-server.js","start":"pnpm build && node mock-server.js && vite"},"devDependencies":{"typescript":"^5.2.2","vite":"^5.0.8","express":"^4.18.2","cors":"^2.8.5"},"publishConfig":{"access":"public"},"keywords":["chat","widget","web-components","typescript"],"repository":{"type":"git","url":"git+https://github.com/arisng/just-chat.git"},"author":"","license":"MIT","_id":"@arisng/just-chat@0.1.6","gitHead":"36c3cf96764db3d3b2a0aa4c44c895ca25e4d52d","description":"> This repository contains my personal customization of the Just-Chat widget, a lightweight chat solution for websites. I've adapted the original work to better suit my specific needs while maintaining the core functionality and principles of the original","bugs":{"url":"https://github.com/arisng/just-chat/issues"},"homepage":"https://github.com/arisng/just-chat#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-KTyR8LeWxNbmviYRoIwopDWxZfbMtyPMLW6DDOMOcxfpyDUT6EVr+g7RMYRU4OdZx1Gqh9m6v6fO7PcchBgYlw==","shasum":"b6bbbe9aee89400691da79d0914074532e3494cd","tarball":"https://registry.npmjs.org/@arisng/just-chat/-/just-chat-0.1.6.tgz","fileCount":5,"unpackedSize":41338,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDkkWmcNtWlhUn33oNU+jL84wEa/UEv1TMKwSyXK4d2OAIgPiadGjzP+h5/rRR7wKnzOHz24MF2sb4+h/nsUOno67E="}]},"_npmUser":{"name":"arisng","email":"nda1291@outlook.com"},"directories":{},"maintainers":[{"name":"arisng","email":"nda1291@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/just-chat_0.1.6_1746526145961_0.15141536778740683"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-05T01:55:23.414Z","modified":"2025-05-06T10:09:06.354Z","0.1.4":"2025-05-05T01:55:23.718Z","0.1.5":"2025-05-05T02:03:21.088Z","0.1.6":"2025-05-06T10:09:06.162Z"},"bugs":{"url":"https://github.com/arisng/just-chat/issues"},"license":"MIT","homepage":"https://github.com/arisng/just-chat#readme","keywords":["chat","widget","web-components","typescript"],"repository":{"type":"git","url":"git+https://github.com/arisng/just-chat.git"},"description":"> This repository contains my personal customization of the Just-Chat widget, a lightweight chat solution for websites. I've adapted the original work to better suit my specific needs while maintaining the core functionality and principles of the original","maintainers":[{"name":"arisng","email":"nda1291@outlook.com"}],"readme":"# Universal Chat Popup\r\n\r\n## Introduction\r\n\r\n> This repository contains my personal customization of the Just-Chat widget, a lightweight chat solution for websites. I've adapted the original work to better suit my specific needs while maintaining the core functionality and principles of the original project.\r\n> \r\n> Credit goes to the original author, Hoang Kieng (hoang@arisng.io.vn), for creating the foundation of this excellent chat widget. The original repository can be found at [https://github.com/draphonix/just-chat](https://github.com/draphonix/just-chat).\r\n> \r\n> My customizations focus on enhancing specific features while preserving the lightweight nature of the original implementation. This README documents both the original functionality and my additions.\r\n\r\nA lightweight, customizable chat widget that can be easily embedded into any website. Built with Web Components for maximum compatibility and style isolation.\r\n\r\n## Features\r\n\r\n- 🎨 Customizable theme and appearance\r\n- 💾 Local chat history persistence\r\n- 🔌 Simple webhook integration\r\n- 🎯 Zero dependencies\r\n- 🛡️ Style isolation via Shadow DOM\r\n- 📱 Responsive design\r\n- ⌨️ Keyboard accessible\r\n- 🔄 Message status indicators\r\n- ❌ Request cancellation support\r\n- 🔒 Secure by default\r\n- 🌐 Cross-browser compatible\r\n- 🚀 Small bundle size (~4KB gzipped)\r\n\r\n## Installation\r\n\r\n### Via CDN (Recommended)\r\n\r\n```html\r\n<!-- Latest version -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/@arisng/just-chat/dist/just-chat.umd.js\"\r\n        data-webhook-url=\"https://your-backend.com/chat\"\r\n        data-theme-color=\"#1E40AF\"\r\n        data-position=\"bottom-right\"\r\n        data-title=\"Chat with us\"\r\n        data-welcome-message=\"How can we help you today?\"\r\n        data-history-enabled=\"true\"\r\n        data-history-clear-button=\"true\"\r\n        defer>\r\n</script>\r\n\r\n<!-- Specific version -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/@arisng/just-chat@0.1.2/dist/just-chat.umd.js\"\r\n        data-webhook-url=\"https://your-backend.com/chat\"\r\n        defer>\r\n</script>\r\n```\r\n\r\n### Via NPM\r\n\r\n```bash\r\n# Using npm\r\nnpm install @arisng/just-chat\r\n\r\n# Using pnpm\r\npnpm add @arisng/just-chat\r\n\r\n# Using yarn\r\nyarn add @arisng/just-chat\r\n```\r\n\r\n```javascript\r\nimport { initChatPopup } from '@arisng/just-chat';\r\n\r\ninitChatPopup({\r\n  webhookUrl: 'https://your-backend.com/chat',\r\n  themeColor: '#1E40AF',\r\n  position: 'bottom-right',\r\n  title: 'Chat with us',\r\n  welcomeMessage: 'How can we help you today?',\r\n  history: {\r\n    enabled: true,\r\n    clearButton: true\r\n  }\r\n});\r\n```\r\n\r\n## Configuration\r\n\r\n| Option | Type | Default | Description |\r\n|--------|------|---------|-------------|\r\n| webhookUrl | string | - | (Required) Backend endpoint URL for processing messages |\r\n| themeColor | string | '#1E40AF' | Primary color for UI elements |\r\n| position | 'bottom-right' \\| 'bottom-left' | 'bottom-right' | Widget position on screen |\r\n| title | string | 'Chat with us' | Chat window title |\r\n| welcomeMessage | string | '' | Initial message shown when chat opens |\r\n| history.enabled | boolean | true | Enable/disable chat history persistence |\r\n| history.clearButton | boolean | true | Show/hide the clear history button |\r\n\r\n## Features in Detail\r\n\r\n### Message Status Indicators\r\n\r\nMessages show their current status:\r\n- 🔄 Sending: Message is being sent to the webhook\r\n- ✅ Sent: Message was successfully delivered\r\n- ❌ Error: Failed to send message\r\n- ⚪ Cancelled: User cancelled the message\r\n\r\n### History Management\r\n\r\nChat history is stored in LocalStorage:\r\n- Persists across page reloads\r\n- Separate storage per webhook URL\r\n- Optional clear history button\r\n- Automatic loading of previous messages\r\n\r\n### Webhook Integration\r\n\r\nThe widget sends POST requests to your webhook URL with the following JSON payload:\r\n\r\n```typescript\r\n{\r\n  message: string;          // User's message\r\n  timestamp: string;        // ISO8601 timestamp\r\n  sessionId: string;        // Unique session identifier\r\n  context: {\r\n    url: string;           // Current page URL\r\n  };\r\n  history?: Array<{        // Last 10 messages (if any)\r\n    id: string;\r\n    text: string;\r\n    sender: 'user' | 'backend' | 'system';\r\n    timestamp: string;\r\n  }>;\r\n}\r\n```\r\n\r\nExpected response format:\r\n\r\n```typescript\r\n{\r\n  response: string;        // Text message to display to the user\r\n}\r\n```\r\n\r\n### Security Features\r\n\r\n- Content Security Policy (CSP) compatible\r\n- No eval() or inline scripts\r\n- XSS protection for message rendering\r\n- CORS support for webhook requests\r\n- Secure by default configuration\r\n\r\n### Browser Support\r\n\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari (latest)\r\n- Edge (latest)\r\n- Mobile browsers\r\n\r\n### Accessibility\r\n\r\n- ARIA labels and roles\r\n- Keyboard navigation\r\n- Focus management\r\n- Screen reader support\r\n- High contrast support\r\n\r\n## Development\r\n\r\n### Prerequisites\r\n\r\n- Node.js 18+\r\n- pnpm (recommended) or npm\r\n\r\n### Setup\r\n\r\n1. Clone the repository\r\n```bash\r\ngit clone https://github.com/draphonix/just-chat.git\r\ncd just-chat\r\n```\r\n\r\n2. Install dependencies\r\n```bash\r\npnpm install\r\n```\r\n\r\n3. Start development server\r\n```bash\r\npnpm dev\r\n```\r\n\r\n4. Build for production\r\n```bash\r\npnpm build\r\n```\r\n\r\n### Testing the Widget\r\n\r\n1. Start the mock server\r\n```bash\r\npnpm start\r\n```\r\n\r\n2. Open http://localhost:3000 in your browser\r\n3. Try the demo features:\r\n   - Send messages\r\n   - Cancel messages\r\n   - Clear history\r\n   - Change theme color\r\n   - Test responsiveness\r\n\r\n### Project Structure\r\n\r\n```\r\njust-chat/\r\n├── src/\r\n│   ├── components/        # Web Components\r\n│   │   ├── base-component.ts\r\n│   │   ├── chat-widget.ts\r\n│   │   ├── chat-launcher.ts\r\n│   │   └── chat-window.ts\r\n│   ├── services/         # Core services\r\n│   │   ├── storage.ts\r\n│   │   └── webhook.ts\r\n│   └── main.ts          # Entry point\r\n├── dist/                # Built files\r\n├── mock-server.js      # Test server\r\n└── package.json\r\n```\r\n\r\n## Contributing\r\n\r\n1. Fork the repository\r\n2. Create your feature branch\r\n3. Commit your changes\r\n4. Push to the branch\r\n5. Create a Pull Request\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Support\r\n\r\n- GitHub Issues: [Report a bug](https://github.com/draphonix/just-chat/issues)\r\n- Email: nda1291@outlook.com\r\n\r\n## Credits\r\n\r\nBuilt with:\r\n- TypeScript\r\n- Web Components\r\n- Vite\r\n- Express (mock server)# just-chat\r\n","readmeFilename":"README.md"}