{"id":18348683,"url":"https://github.com/paraboly/pwc-chat","last_synced_at":"2025-04-06T09:31:44.067Z","repository":{"id":43946921,"uuid":"263622374","full_name":"Paraboly/pwc-chat","owner":"Paraboly","description":"Fully customizable Chat for web component with StencilJS via Paraboly","archived":false,"fork":false,"pushed_at":"2023-03-03T16:03:10.000Z","size":1475,"stargazers_count":2,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T21:11:57.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https:/paraboly.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Paraboly.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-13T12:23:50.000Z","updated_at":"2024-12-15T09:32:59.000Z","dependencies_parsed_at":"2023-02-05T11:16:52.469Z","dependency_job_id":null,"html_url":"https://github.com/Paraboly/pwc-chat","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"Paraboly/pwc-web-component-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fpwc-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fpwc-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fpwc-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fpwc-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paraboly","download_url":"https://codeload.github.com/Paraboly/pwc-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463744,"owners_count":20942935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T21:18:48.789Z","updated_at":"2025-04-06T09:31:43.399Z","avatar_url":"https://github.com/Paraboly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=for-the-badge)\n\n\u003cimg alt=\"WebComponent PWC Chat\" src=\"assets/logo.png\" /\u003e\n\n[![Fully customizable Chat for web component with StencilJS via Paraboly](https://img.shields.io/badge/-Fully%20customizable%20Chat%20for%20web%20component%20with%20StencilJS%20via%20Paraboly-lightgrey?style=for-the-badge)](https://github.com/Paraboly/pwc-chat)\n\n[![npm version](https://img.shields.io/npm/v/@paraboly/pwc-chat.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/pwc-chat)\n[![npm](https://img.shields.io/npm/dt/@paraboly/pwc-chat.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/pwc-chat)\n![Platform - Platform Free Web](https://img.shields.io/badge/-Web%20%7C%20Platform%20Free-blue?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"WebComponent PWC Chat\"\n        src=\"assets/Screenshots/example.png\" /\u003e\n  \u003cimg alt=\"WebComponent PWC Chat\"\n        src=\"assets/Screenshots/example.gif\" /\u003e\n\n\u003c/p\u003e\n\n\u003c!-- ## [Live Codepen Example](https://codepen.io/wrathchaos/pen/dyyvRzM) --\u003e\n\n## Installation\n\n### Script tag\n\n- Put two script tags similar to this in the head of your index.html:\n\n```html\n\u003cscript\n  type=\"module\"\n  src=\"https://unpkg.com/@paraboly/pwc-chat@latest/dist/pwc-chat/pwc-chat.esm.js\"\n\u003e\u003c/script\u003e\n\u003cscript\n  nomodule\n  src=\"https://unpkg.com/@paraboly/pwc-chat@latest/dist/pwc-chat/pwc-chat.js\"\n\u003e\u003c/script\u003e\n```\n\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### Node Modules\n\n- Run `npm install @paraboly/pwc-chat`\n- Put a script tag similar to this `\u003cscript src='node_modules/@paraboly/pwc-chat/dist/pwc-chat.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n\n- Run `npm install @paraboly/pwc-chat`\n- Add an import to the npm packages `import @paraboly/pwc-chat;`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n# Usage\n\n## Basic Usage\n\nMessage List should be this format:\n\n```json\n[\n  {\n    \"messageId\": \"0\",\n    \"username\": \"Tom Chandler\",\n    \"message\": \"Hello World!\",\n    \"time\": \"2 days ago\",\n    \"editTime\": null,\n    \"editable\": true,\n    \"deletable\": false\n  }\n]\n```\n\n#### Here is the example\n\n```jsx\n\u003cpwc-chat\n  changeMessage={text =\u003e console.log(\"onChangeMessage: \", text)}\n  submitMessage={fullText =\u003e console.log(\"onSubmit: \", fullText)}\n  messageList={[\n    {\n      messageId: \"0\",\n      username: \"Leo\",\n      message: \"No Content\",\n      time: \"3 hours ago\",\n      editTime: null,\n      editable: true,\n      deletable: true\n    },\n    {\n      messageId: \"125\",\n      username: \"Mia\",\n      message:\n        \"Aliquam tempor, mi a elementum molestie, mauris augue congue ipsum, eget suscipit ligula eros a tortor. Nullam dictum ac nibh at eleifend. Fusce iaculis mauris turpis, eu facilisis ante porta sed. Quisque faucibus felis id justo aliquet, ut viverra purus ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut elit elit, imperdiet ac eros sit amet, tincidunt euismod leo. Ut consectetur nulla a mauris vehicula, in ultrices nisl semper.\",\n      time: \"1 hour ago\",\n      editTime: \"30 minutes ago\",\n      editable: false,\n      deletable: false\n    },\n    {\n      messageId: \"3\",\n      username: \"George\",\n      message: \"Pellentesque luctus purus magna.\",\n      time: \"\",\n      editTime: null,\n      editable: true,\n      deletable: false\n    },\n    {\n      messageId: \"id-9876\",\n      username: \"Leo\",\n      message: \"No Content\",\n      time: \"3 weeks ago\",\n      editTime: \"just now\",\n      editable: false,\n      deletable: true\n    }\n  ]}\n\u003e\u003c/pwc-chat\u003e\n```\n\n## Events\n\n### JS Way\n\n```js\n// onChangeMessage\nconst pwcChat = document.querySelector(\"pwc-chat\");\npwcChat.addEventListener(\"changeMessage\", text =\u003e {\n  console.log(\"Chat Text: \", text);\n});\n\n// onSubmitMessage\npwcChat.addEventListener(\"submitMessage\", fullText =\u003e {\n  console.log(\"Chat onSubmit: \", fullText);\n});;\n\n// onMessageDeleted\npwcChat.addEventListener(\"messageDeleted\", e =\u003e {\n  const deletedMessageId = e.detail.messageId;\n  console.log(\"delete messageId:\", deletedMessageId);\n});\n\n// onMessageEdited\npwcChat.addEventListener(\"messageEdited\", e =\u003e {\n  const editedMessageId = e.detail.messageId;\n  const newMessage = e.detail.newMessage;\n  console.log(\"edit messageId:\", editedMessageId, \"newMessage:\", newMessage);\n});\n```\n\n## Authors\n\n[FreakyCoder](https://github.com/WrathChaos), kurayogun@gmail.com | kuray.ogun@paraboly.com\n\n[starikcetin](https://github.com/starikcetin), cetinsamedtarik@gmail.com | tarik.cetin@paraboly.com\n\n## License\n\nWebComponent PWC Chat is available under the MIT license.\n\nSee the [LICENSE](/LICENCE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Fpwc-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparaboly%2Fpwc-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Fpwc-chat/lists"}