{"_id":"@caplipun/ai-chat-widget","_rev":"4-689501788a3272090bc643e1a964ce4f","name":"@caplipun/ai-chat-widget","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@caplipun/ai-chat-widget","version":"0.0.1","keywords":["angular","chat-widget","ai-chat","floating-chat","terminal-theme","chat-bubble"],"license":"MIT","_id":"@caplipun/ai-chat-widget@0.0.1","maintainers":[{"name":"lipunpatel","email":"lipunpatel619@gmail.com"}],"dist":{"shasum":"63b0a5eb68ca769436637d78c82e7a13afbc199d","tarball":"https://registry.npmjs.org/@caplipun/ai-chat-widget/-/ai-chat-widget-0.0.1.tgz","fileCount":15,"integrity":"sha512-/XnQWphcaWZY34EsBpTZ9F90xM5QhAD+sNfOVRUyro7JaBfUwsmt7nq/Fb5fSFdGSLo0Xx/FFnL1PkqChezFkA==","signatures":[{"sig":"MEUCIBF+SECjLH0ex+C8Idra8/M2dCpfaWTi97uvk/xwNmsJAiEAwVyZgwgwASA+TP2gASPyInlpNInGFYGgxaa2EeP8tbE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98770},"module":"fesm2022/caplipun-ai-chat-widget.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/caplipun-ai-chat-widget.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"21620f10a9511dac79bcbf4fbb911c73437ca5cb","typings":"index.d.ts","_npmUser":{"name":"lipunpatel","email":"lipunpatel619@gmail.com"},"_npmVersion":"10.8.2","description":"A floating AI chat bubble widget with a terminal-inspired theme for Angular applications","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.0.0","marked":"^15.0.0","prismjs":"^1.29.0","ngx-markdown":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/animations":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-chat-widget_0.0.1_1774013862208_0.2479882789995005","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@caplipun/ai-chat-widget","version":"0.0.2","keywords":["angular","chat-widget","ai-chat","floating-chat","terminal-theme","chat-bubble"],"license":"MIT","_id":"@caplipun/ai-chat-widget@0.0.2","maintainers":[{"name":"lipunpatel","email":"lipunpatel619@gmail.com"}],"dist":{"shasum":"a077b92140cd5ab2d86fe11312992db617041416","tarball":"https://registry.npmjs.org/@caplipun/ai-chat-widget/-/ai-chat-widget-0.0.2.tgz","fileCount":28,"integrity":"sha512-lgE9/4qtN/WM2tVhudin1+XYiW3/q1be0j7I4dDzzDCV81+tMlB+MA3CjflYQsrD0PHWZyKJAqoNc6O2JPbFrQ==","signatures":[{"sig":"MEUCIBkYbYkvjoYEFmYIJMkMXHMxGi8V8HiFQSylGp2+anqOAiEA7CnhJ+/ew1cz9Rcn85DnqiPOQSlaNuziugF9c3NBJLA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37959},"gitHead":"d842fd00576d2871df750917c75d45c84bc52540","_npmUser":{"name":"lipunpatel","email":"lipunpatel619@gmail.com"},"_npmVersion":"10.8.2","description":"A floating AI chat bubble widget with a terminal-inspired theme for Angular applications","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.0.0","marked":"^15.0.0","prismjs":"^1.29.0","ngx-markdown":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/animations":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-chat-widget_0.0.2_1774077703774_0.01849025676416849","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@caplipun/ai-chat-widget","version":"0.0.3","keywords":["angular","chat-widget","ai-chat","floating-chat","terminal-theme","chat-bubble"],"license":"MIT","_id":"@caplipun/ai-chat-widget@0.0.3","maintainers":[{"name":"lipunpatel","email":"lipunpatel619@gmail.com"}],"dist":{"shasum":"582638e5d4ed406bb9939746e73c2bb1ada34954","tarball":"https://registry.npmjs.org/@caplipun/ai-chat-widget/-/ai-chat-widget-0.0.3.tgz","fileCount":15,"integrity":"sha512-qfDF/P5U39lcv/whL7699HwOTUMLfMtxbUMrNqlUPdUkW7NDJ+D+/Uz4R4I1CDIX0v1Djv48htmEKOCQkIqFqA==","signatures":[{"sig":"MEUCIQDGr3oYy3DHsKYAs6oDkNv1zDbRQrxuaXqE8etSX77LegIgSec+jSYui/2xKpVDstU7DVbI+VJfJVDfU5pZn2bmnLU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98816},"module":"fesm2022/caplipun-ai-chat-widget.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/caplipun-ai-chat-widget.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3517910ec42ff81f7cca0dd86534bc304219616e","typings":"index.d.ts","_npmUser":{"name":"lipunpatel","email":"lipunpatel619@gmail.com"},"_npmVersion":"10.8.2","description":"A floating AI chat bubble widget with a terminal-inspired theme for Angular applications","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.0.0","marked":"^15.0.0","prismjs":"^1.29.0","ngx-markdown":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/animations":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-chat-widget_0.0.3_1774078690745_0.49822603083322137","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"_id":"@caplipun/ai-chat-widget@0.0.4","dist":{"shasum":"e04149b1bf068c91c53d1ab78fcba98e671ad787","tarball":"https://registry.npmjs.org/@caplipun/ai-chat-widget/-/ai-chat-widget-0.0.4.tgz","fileCount":15,"integrity":"sha512-NN3WOKdY6bZ7Id1VffRz19RjznqIKOlpWhqe0PejFfhuM/RJzEmAAbGFWt/L1trmI4AS2rpEFJl++IdBD/FPRg==","signatures":[{"sig":"MEUCIBSMEvMsXz9uW5aTevAKFvbIQLpsbIuxJJSAqMZ5VG9mAiEAlYub2/bNuv43P0kB/gXqv/OJnvUwHL6ciU2aCqO4iAI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBXN8M6ljRE2HaI2sKEBEVeqahNyFMFHYa/LzOyaiE6DAiEA6Zpfhu5S+DZ6YRVRnxWDZ5wW5NfpSPTk6EaK+1jBPfY="}],"unpackedSize":98816},"name":"@caplipun/ai-chat-widget","module":"fesm2022/caplipun-ai-chat-widget.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/caplipun-ai-chat-widget.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"59912acd413a0124d010ec45285bd4283177f01c","license":"MIT","typings":"index.d.ts","version":"0.0.4","_npmUser":{"name":"lipunpatel","email":"lipunpatel619@gmail.com"},"keywords":["angular","chat-widget","ai-chat","floating-chat","terminal-theme","chat-bubble"],"_npmVersion":"10.8.2","description":"A floating AI chat bubble widget with a terminal-inspired theme for Angular applications","directories":{},"maintainers":[{"name":"lipunpatel","email":"lipunpatel619@gmail.com"}],"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.0.0","marked":"^15.0.0","prismjs":"^1.29.0","ngx-markdown":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/animations":"^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-chat-widget_0.0.4_1790280813706_0.45223700973168146"}}},"time":{"created":"2026-03-20T13:37:42.104Z","modified":"2026-09-24T20:13:34.021Z","0.0.1":"2026-03-20T13:37:42.403Z","0.0.2":"2026-03-21T07:21:43.929Z","0.0.3":"2026-03-21T07:38:10.887Z","0.0.4":"2026-09-24T20:13:33.799Z"},"license":"MIT","keywords":["angular","chat-widget","ai-chat","floating-chat","terminal-theme","chat-bubble"],"description":"A floating AI chat bubble widget with a terminal-inspired theme for Angular applications","maintainers":[{"name":"lipunpatel","email":"lipunpatel619@gmail.com"}],"readme":"# @caplipun/ai-chat-widget\n\nA floating AI chat bubble widget for Angular applications with a minimal, terminal-inspired dark theme.\n\n\n\n\n\n## Features\n\n- 🔮 **Floating chat bubble** fixed to bottom-right corner\n- 💬 **Chat window panel** with header, messages, input, and send button\n- 📝 **Markdown rendering** for AI responses (via ngx-markdown)\n- 🎨 **Code syntax highlighting** (via Prism.js)\n- ⚡ **Streaming support** — real-time typewriter effect for AI responses\n- 📱 **Fully responsive** — desktop panel + mobile bottom sheet\n- 🎭 **Smooth animations** — open/close panel, message appearance\n- 💡 **Suggested starter questions** — configurable starter prompts\n- 🖥️ **Terminal-inspired theme** — black background, monospace font, minimal design\n- 🔍 **Expand/collapse** — resize the chat panel on desktop\n- ♿ **Accessible** — ARIA labels, keyboard navigation, focus management\n\n## Installation\n\n```bash\nnpm install @caplipun/ai-chat-widget ngx-markdown marked prismjs\n```\n\n### Peer Dependencies\n\n| Package | Version |\n|---------|---------|\n| `@angular/core` | `^19.0.0` |\n| `@angular/common` | `^19.0.0` |\n| `@angular/animations` | `^19.0.0` |\n| `@angular/forms` | `^19.0.0` |\n| `rxjs` | `^7.0.0` |\n| `ngx-markdown` | `^19.0.0` |\n| `marked` | `^15.0.0` |\n| `prismjs` | `^1.29.0` |\n\n## Setup\n\n### 1. Configure App Providers\n\nIn your `app.config.ts`:\n\n```typescript\nimport { provideAnimations } from '@angular/platform-browser/animations';\nimport { provideMarkdown } from 'ngx-markdown';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n // ... your other providers\n provideAnimations(),\n provideMarkdown(),\n ],\n};\n```\n\n### 2. Add Prism.js Theme\n\nAdd the Prism.js theme CSS to your `angular.json` styles array:\n\n```json\n{\n \"styles\": [\n \"node_modules/prismjs/themes/prism-okaidia.css\",\n \"src/styles.css\"\n ]\n}\n```\n\n### 3. Load Monospace Font (Recommended)\n\nAdd JetBrains Mono to your `index.html`:\n\n```html\n\n\n\n```\n\n## Usage\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ChatWidgetComponent } from '@caplipun/ai-chat-widget';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ChatWidgetComponent],\n template: `\n \n `,\n})\nexport class AppComponent {}\n```\n\n## Configuration Inputs\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `apiUrl` | `string` | **required** | Backend API endpoint URL |\n| `title` | `string` | `'AI Assistant'` | Chat window header title |\n| `placeholder` | `string` | `'Ask a question...'` | Input field placeholder text |\n| `welcomeMessage` | `string` | `'Hello! How can I help you?'` | Initial welcome message |\n| `suggestedQuestions` | `string[]` | `[]` | Starter question chips shown before first message |\n\n## API Contract\n\nThe widget sends `POST` requests to the configured `apiUrl`.\n\n### Request\n\n```json\nPOST /chat\nContent-Type: application/json\n\n{\n \"question\": \"What technologies does Lipun use?\"\n}\n```\n\n### Standard Response (JSON)\n\n```json\nContent-Type: application/json\n\n{\n \"answer\": \"Lipun works with .NET, Angular, SQL Server, and Python...\"\n}\n```\n\n### Streaming Response (SSE)\n\nThe widget also supports Server-Sent Events for real-time streaming:\n\n```\nContent-Type: text/event-stream\n\ndata: {\"answer\": \"Lipun \"}\ndata: {\"answer\": \"works \"}\ndata: {\"answer\": \"with \"}\ndata: [DONE]\n```\n\nEach `data:` line contains a JSON object with an `answer` field containing the next text chunk. The stream ends with `data: [DONE]`.\n\n## Design Theme\n\n| Element | Value |\n|---------|-------|\n| Background | `#000000` |\n| Primary text | `#ffffff` |\n| Secondary text | `#aaaaaa` |\n| Borders | `#2a2a2a` |\n| Font | JetBrains Mono / Fira Code / IBM Plex Mono |\n\n## Responsive Behavior\n\n| Viewport | Behavior |\n|----------|----------|\n| Desktop (≥ 640px) | 380×540px panel (expand button toggles to 520×680px) |\n| Mobile (< 640px) | Full-width bottom sheet (85vh height) with backdrop |\n\n## Building from Source\n\n```bash\n# Clone and install\ngit clone \ncd ai-chat-workspace\nnpm install\n\n# Build the library\nng build ai-chat-widget\n\n# Run the demo app\nng serve demo\n\n# Start mock API server (in another terminal)\nnode mock-server.js # Standard JSON responses\nnode mock-server.js --stream # Streaming SSE responses\n```\n\n## Publishing to NPM\n\n```bash\n# Build production library\nng build ai-chat-widget\n\n# Navigate to dist\ncd dist/ai-chat-widget\n\n# Login to NPM (if not already)\nnpm login\n\n# Publish (--access public required for scoped packages)\nnpm publish --access public\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}