https://github.com/paraboly/pwc-chat
Fully customizable Chat for web component with StencilJS via Paraboly
https://github.com/paraboly/pwc-chat
Last synced: about 1 year ago
JSON representation
Fully customizable Chat for web component with StencilJS via Paraboly
- Host: GitHub
- URL: https://github.com/paraboly/pwc-chat
- Owner: Paraboly
- License: mit
- Created: 2020-05-13T12:23:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T16:03:10.000Z (over 3 years ago)
- Last Synced: 2025-03-21T21:11:57.479Z (about 1 year ago)
- Language: TypeScript
- Homepage: https:/paraboly.com
- Size: 1.41 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Paraboly/pwc-chat)
[](https://www.npmjs.com/package/@paraboly/pwc-chat)
[](https://www.npmjs.com/package/@paraboly/pwc-chat)
[](https://opensource.org/licenses/MIT)
## Installation
### Script tag
- Put two script tags similar to this in the head of your index.html:
```html
```
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install @paraboly/pwc-chat`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install @paraboly/pwc-chat`
- Add an import to the npm packages `import @paraboly/pwc-chat;`
- Then you can use the element anywhere in your template, JSX, html etc
# Usage
## Basic Usage
Message List should be this format:
```json
[
{
"messageId": "0",
"username": "Tom Chandler",
"message": "Hello World!",
"time": "2 days ago",
"editTime": null,
"editable": true,
"deletable": false
}
]
```
#### Here is the example
```jsx
console.log("onChangeMessage: ", text)}
submitMessage={fullText => console.log("onSubmit: ", fullText)}
messageList={[
{
messageId: "0",
username: "Leo",
message: "No Content",
time: "3 hours ago",
editTime: null,
editable: true,
deletable: true
},
{
messageId: "125",
username: "Mia",
message:
"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.",
time: "1 hour ago",
editTime: "30 minutes ago",
editable: false,
deletable: false
},
{
messageId: "3",
username: "George",
message: "Pellentesque luctus purus magna.",
time: "",
editTime: null,
editable: true,
deletable: false
},
{
messageId: "id-9876",
username: "Leo",
message: "No Content",
time: "3 weeks ago",
editTime: "just now",
editable: false,
deletable: true
}
]}
>
```
## Events
### JS Way
```js
// onChangeMessage
const pwcChat = document.querySelector("pwc-chat");
pwcChat.addEventListener("changeMessage", text => {
console.log("Chat Text: ", text);
});
// onSubmitMessage
pwcChat.addEventListener("submitMessage", fullText => {
console.log("Chat onSubmit: ", fullText);
});;
// onMessageDeleted
pwcChat.addEventListener("messageDeleted", e => {
const deletedMessageId = e.detail.messageId;
console.log("delete messageId:", deletedMessageId);
});
// onMessageEdited
pwcChat.addEventListener("messageEdited", e => {
const editedMessageId = e.detail.messageId;
const newMessage = e.detail.newMessage;
console.log("edit messageId:", editedMessageId, "newMessage:", newMessage);
});
```
## Authors
[FreakyCoder](https://github.com/WrathChaos), kurayogun@gmail.com | kuray.ogun@paraboly.com
[starikcetin](https://github.com/starikcetin), cetinsamedtarik@gmail.com | tarik.cetin@paraboly.com
## License
WebComponent PWC Chat is available under the MIT license.
See the [LICENSE](/LICENCE) file for more info.