{"_id":"@vonage/live-chat","_rev":"43-0eb6d4d0d3d66fd22df7e2cb2d0c64f4","name":"@vonage/live-chat","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@vonage/live-chat","version":"0.0.1","author":{"name":"Vonage"},"license":"MIT","_id":"@vonage/live-chat@0.0.1","maintainers":[{"name":"web-il","email":"web-il@vonage.com"},{"name":"iceberg-team","email":"icebergteam@vonage.com"},{"name":"unified_portal","email":"unified_portal_dev@vonage.com"},{"name":"vreporter-npm","email":"vreporter-support@vonage.com"},{"name":"vbcbe","email":"vbc-be@vonage.com"},{"name":"yuri.guller","email":"gullerya@gmail.com"},{"name":"idanvon","email":"idan.cohen@vonage.com"},{"name":"nexmo-devrel","email":"devrel@vonage.com"},{"name":"vvd","email":"vivid@vonage.com"},{"name":"vonagemeetings","email":"VBC-Meetings@vonage.com"},{"name":"vonage-jenkins","email":"video.api.ops@vonage.com"},{"name":"jeffswartz","email":"jeff.swartz@vonage.com"},{"name":"v-kpheng","email":"Kongpheng.Nanthavongsa@vonage.com"},{"name":"jmoramunoz2","email":"JuanFernando.Mora@vonage.com"},{"name":"vgai-dev","email":"vgai-studio-developers@vonage.com"},{"name":"vonage_client_media_processing","email":"vcp_webrtc@vonage.com"},{"name":"or.cpc","email":"or.abramovich@vonage.com"},{"name":"tabdullah","email":"tyshown.abdullah@vonage.com"},{"name":"deliajolt","email":"delia.ekstrom@vonage.com"},{"name":"llihovodov","email":"lily.lihovodov@vonage.com"},{"name":"daniel-sapir","email":"daniel.sapir@vonage.com"},{"name":"aviadhouri.va","email":"Aviad.Houri@vonage.com"},{"name":"vonage-frontier","email":"frontier@vonage.com"},{"name":"jtiet","email":"jason.tiet@vonage.com"},{"name":"hilakl","email":"hila.klein@vonage.com"},{"name":"saurabh.vonage","email":"Saurabh.Kulkarni@vonage.com"},{"name":"leppelin","email":"tamir.nahum@vonage.com"},{"name":"yonatan.kra","email":"yonatan.kra@vonage.com"},{"name":"gpojula","email":"Gayathri.Pojula@vonage.com"},{"name":"elimenko.vonage","email":"egor.limenko@vonage.com"},{"name":"omrizilber","email":"omri.zilber@vonage.com"},{"name":"molszewski_v","email":"marceli.olszewski@vonage.com"},{"name":"sailusha","email":"sailu.vejella@vonage.com"},{"name":"lallen2","email":"latea.allen@vonage.com"},{"name":"abolles","email":"andrew.bolles@vonage.com"},{"name":"twilliams253","email":"terrence.williams@vonage.com"},{"name":"ilan.aradbilavsky.at.vonage.com","email":"ilan.aradbilavsky@vonage.com"},{"name":"mserranomontes","email":"marina.serranomontes@vonage.com"},{"name":"ariel12955","email":"Ariel.Bar@vonage.com"},{"name":"franbecerra","email":"Francisco.Becerra@vonage.com"},{"name":"urihaim","email":"Uri.Haim@vonage.com"},{"name":"mvera_vonage","email":"manuel.veranieto@vonage.com"},{"name":"mike.zhylevych","email":"mike.zhylevych@vonage.com"},{"name":"mprabhuvonage","email":"mithun.prabhu@vonage.com"},{"name":"sharad-srivastava2","email":"sharad.srivastava@vonage.com"},{"name":"lucas_pilarski","email":"lukasz.pilarski@vonage.com"},{"name":"gputtaswamy","email":"gnanesh.puttaswamy@vonage.com"},{"name":"pradadiya","email":"paresh.radadiya@vonage.com"},{"name":"manish-ranjan07","email":"manish.ranjan@vonage.com"},{"name":"manish-vonage","email":"manish.sharma@vonage.com"},{"name":"ppandey2","email":"priya.pandey@vonage.com"},{"name":"srajput0909","email":"shubham.rajput@vonage.com"},{"name":"pvillenamontes","email":"pablo.villenamontes@vonage.com"}],"homepage":"https://github.com/Vonage-Community/web_components-video_api-javascript/tree/main/live-chat#readme","bugs":{"url":"https://github.com/Vonage-Community/web_components-video_api-javascript/issues"},"dist":{"shasum":"d3cb981222e11ab4124d2c86caf166fa0a1c17de","tarball":"https://registry.npmjs.org/@vonage/live-chat/-/live-chat-0.0.1.tgz","fileCount":11,"integrity":"sha512-fZndxt6wbE+A0qnzxl8kvfWXrVDYtd8cDuGBUm0KEVs3FWeRr3FqHY/kdaw2H5x9hd5in5omTOjC/4Zm0KXAxA==","signatures":[{"sig":"MEUCIGNFq3x0B8bFQYHkE8kisKjTnjwp9D2mNOO0Pldlg6AiAiEAiMFROQjEQAw3ggJE7BpAKkexvHH6P/rlU/jB8R+b3n4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12838},"main":"index.js","type":"module","module":"index.js","exports":{".":"./index.js","./live-chat.js":"./live-chat.js"},"gitHead":"5ad7cfa1607830e3a3d45b7aadbdd1d5e36beca6","scripts":{"start":"web-dev-server","analyze":"cem analyze --litelement"},"_npmUser":{"name":"nexmo-devrel","email":"devrel@vonage.com"},"repository":{"url":"git+https://github.com/Vonage-Community/web_components-video_api-javascript.git#main","type":"git"},"_npmVersion":"11.5.1","description":"live-chat Web Component to be used with Video API following open-wc recommendations","directories":{},"_nodeVersion":"24.7.0","dependencies":{"lit":"^3.1.4"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"@web/dev-server":"^0.4.6","@custom-elements-manifest/analyzer":"^0.10.3"},"_npmOperationalInternal":{"tmp":"tmp/live-chat_0.0.1_1756846063997_0.6970904688251902","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-09-02T20:47:43.904Z","modified":"2026-09-03T04:37:53.079Z","0.0.1":"2025-09-02T20:47:44.211Z"},"bugs":{"url":"https://github.com/Vonage-Community/web_components-video_api-javascript/issues"},"author":{"name":"Vonage"},"license":"MIT","homepage":"https://github.com/Vonage-Community/web_components-video_api-javascript/tree/main/live-chat#readme","repository":{"url":"git+https://github.com/Vonage-Community/web_components-video_api-javascript.git#main","type":"git"},"description":"live-chat Web Component to be used with Video API following open-wc recommendations","maintainers":[{"email":"web-il@vonage.com","name":"web-il"},{"email":"icebergteam@vonage.com","name":"iceberg-team"},{"email":"unified_portal_dev@vonage.com","name":"unified_portal"},{"email":"vreporter-support@vonage.com","name":"vreporter-npm"},{"email":"vbc-be@vonage.com","name":"vbcbe"},{"email":"gullerya@gmail.com","name":"yuri.guller"},{"email":"idan.cohen@vonage.com","name":"idanvon"},{"email":"devrel@vonage.com","name":"nexmo-devrel"},{"email":"vivid@vonage.com","name":"vvd"},{"email":"VBC-Meetings@vonage.com","name":"vonagemeetings"},{"email":"video.api.ops@vonage.com","name":"vonage-jenkins"},{"email":"andreina.dasilvacabral@vonage.com","name":"adasilvacabral"},{"email":"sarvesh.bisht@vonage.com","name":"sarvesh.bisht"},{"email":"vgai-studio-developers@vonage.com","name":"vgai-dev"},{"email":"vcp_webrtc@vonage.com","name":"vonage_client_media_processing"},{"email":"or.abramovich@vonage.com","name":"or.cpc"},{"email":"lily.lihovodov@vonage.com","name":"llihovodov"},{"email":"daniel.sapir@vonage.com","name":"daniel-sapir"},{"email":"Aviad.Houri@vonage.com","name":"aviadhouri.va"},{"email":"ignacio.delacruz@vonage.com","name":"idelacruz"},{"email":"frontier@vonage.com","name":"vonage-frontier"},{"email":"hila.klein@vonage.com","name":"hilakl"},{"email":"Saurabh.Kulkarni@vonage.com","name":"saurabh.vonage"},{"email":"tamir.nahum@vonage.com","name":"leppelin"},{"email":"antoni.silvestrepadros@vonage.com","name":"asilvonage"},{"email":"Gayathri.Pojula@vonage.com","name":"gpojula"},{"email":"egor.limenko@vonage.com","name":"elimenko.vonage"},{"email":"kanav.bhatia@vonage.com","name":"kanav_vonage"},{"email":"omri.zilber@vonage.com","name":"omrizilber"},{"email":"marceli.olszewski@vonage.com","name":"molszewski_v"},{"email":"sailu.vejella@vonage.com","name":"sailusha"},{"email":"ragul.palanisamy@vonage.com","name":"rpalanisamy-vonage"},{"email":"Valentyn.Bohdan@vonage.com","name":"vbohdan_vonage"},{"email":"andrew.bolles@vonage.com","name":"abolles"},{"email":"gorka.revillafernandez@vonage.com","name":"gorka.vonage"},{"email":"bharath.ps@vonage.com","name":"bharath-vonage"},{"email":"mor.tubul@vonage.com","name":"morvonage"},{"email":"ilan.aradbilavsky@vonage.com","name":"ilan.aradbilavsky.at.vonage.com"},{"email":"chuck.reeves@vonage.com","name":"vonreeves"},{"email":"avi.dantes@vonage.com","name":"avi.dantes"},{"email":"michal.galin@vonage.com","name":"mgalin"},{"email":"jakub.hajduk@vonage.com","name":"jhajduk.vonage"},{"email":"Nitsan.unger@vonage.com","name":"nitsanungerfrontier"},{"email":"vladimir.quezada@vonage.com","name":"vquezada"},{"email":"alessio.didomenico@vonage.com","name":"adidomenico"},{"email":"sathish.r@vonage.com","name":"sathishr-vonage"},{"email":"pamu.pravallika@vonage.com","name":"pravallika-pamu"},{"email":"avijit.bagdi@vonage.com","name":"abagdi"},{"email":"anuradh.lankapalli@vonage.com","name":"anuradhlankapalli"},{"email":"hen.rosenberg@vonage.com","name":"hrosenberg"},{"email":"gokul.narayanan@vonage.com","name":"gokul-vonage"},{"email":"alistair.slowe@vonage.com","name":"aslowe-vcc"},{"email":"vbc-web-cicd@vonage.com","name":"vbc-web-cicd-bot"},{"email":"marina.serranomontes@vonage.com","name":"mserranomontes"},{"email":"Ariel.Bar@vonage.com","name":"ariel12955"},{"email":"Francisco.Becerra@vonage.com","name":"franbecerra"},{"email":"Uri.Haim@vonage.com","name":"urihaim"},{"email":"manuel.veranieto@vonage.com","name":"mvera_vonage"},{"email":"mike.zhylevych@vonage.com","name":"mike.zhylevych"},{"email":"mithun.prabhu@vonage.com","name":"mprabhuvonage"},{"email":"sharad.srivastava@vonage.com","name":"sharad-srivastava2"},{"email":"lukasz.pilarski@vonage.com","name":"lucas_pilarski"},{"email":"manish.ranjan@vonage.com","name":"manish-ranjan07"},{"email":"shubham.rajput@vonage.com","name":"srajput0909"},{"email":"pablo.villenamontes@vonage.com","name":"pvillenamontes"},{"email":"diogo.simoes@vonage.com","name":"dsimoes2"},{"email":"manel.jimeno@vonage.com","name":"manel_vonage"},{"email":"joseantonio.oliveraortega@vonage.com","name":"joliveraortega"}],"readme":"# \\<live-chat>\n\nThis Web Component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation and is meant to be used with the [Vonage Video Client SDK](https://developer.vonage.com/en/video/client-sdks/web/overview).\n\n> A [Vonage account](https://ui.idp.vonage.com/ui/auth/registration) will be needed.\n\nA goal is to simplify the code needed to create a real-time, high-quality interactive video application quickly. This Web Component allows for users to chat.\n\n## Installation\n\n```bash\nnpm i @vonage/live-chat\n```\n\n## Usage\n\n```html\n<script type=\"module\">\n  import '@vonage/live-chat/live-chat.js';\n</script>\n```\n\n### OR using a CDN\n```html\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@vonage/live-chat@latest/live-chat.js/+esm\"></script>\n\n```\n\n### place tag in HTML\n\n```html\n<live-chat></live-chat>\n```\n\n### Attributes that can be used (optional):\n\n- `placeholder` : (String) placeholder text for input to enter a message\n- `button-text` : (String) text for the button to send a message\n- `show-button` : (Boolean) place attribute in element if you want the button to send a message to appear.\n\n```html\n<live-chat placeholder=\"Enter your message\" button-text=\"send\" show-button></live-chat>\n```\n\n## Styling\n\nThe Web Component uses the [CSS pseudo-element `::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling. So you can style it the same way you would style a regular button element. Here's an example:\n\nThis is the HTML structure of the Web Component:\n\n```html\n<div id=\"container\" part=\"container\">\n  <p id=\"history\" part=\"history\"></p>\n  <form id=\"form\" part=\"form\">\n    <input type=\"text\" name=\"msgTxt\" placeholder=\"Enter message\" id=\"msgTxt\" part=\"input\"></input>\n    <button type=\"submit\" part=\"button\">send</button>\n  </form>\n</div>\n```\n\nHere is how to apply CSS to a part and some sample values:\n```css\nlive-chat {\n  height: 100%;\n  width: 30vw;\n}\n\nlive-chat::part(history) {\n  height: 300px;\n  overflow-y: auto;\n}\n\nlive-chat::part(form) {\n  display: flex;\n}\n\nlive-chat::part(input) {\n  width: 100%;\n}\n\nlive-chat::part(message) {\n  padding: 15px;\n  margin: 5px;\n}\n\nlive-chat::part(message mine) {\n  text-align: right;\n}\n\nlive-chat::part(message-text) {\n  border-radius: 6px;\n  background-color: #f0f0f0;\n  display: inline-block;\n  padding: 2px 8px;\n  margin: 0;\n  border-radius: 6px 6px 6px 0;\n  font-size: 1.4rem;\n}\n\nlive-chat::part(message-text mine) {\n  background-color: #e0e0ff;\n  border-radius: 6px 6px 0px 6px;\n}\n\nlive-chat::part(message-image mine) {\n  background-color: #e0e0ff;\n  border-radius: 6px 6px 0px 6px;\n}\n\nlive-chat::part(message-sender) {\n  font-size: 0.8rem;\n  margin: 0;\n  padding: 0;\n}\n\nlive-chat::part(message-sender mine) {\n  text-align: right;\n  color: black;\n}\n```\n\n## Tooling configs\n\nFor most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.\n\nIf you customize the configuration a lot, you can consider moving them to individual files.\n\n## Local Demo with `web-dev-server`\n\n```bash\nnpm start\n```\n\nTo run a local development server that serves the basic demo located in `demo/index.html`\n","readmeFilename":"README.md"}