vue-quick-chat-m
v1.1.4
Modified for own project based on [MatheusrdSantos/vue-quick-chat](https://github.com/MatheusrdSantos/vue-quick-chat).
2/weekUpdated 3 years agoMITUnpacked: 12.9 MB
Published by iseesaw
npm install vue-quick-chat-mvue-quick-chat-m
Modified for own project based on MatheusrdSantos/vue-quick-chat.
:boom: Updated
> Just modify components/MessageDisplay.vue.
- Done
- [x] add avatar property
- [x] modify username's style
- Added Component Props
| name | type | required |default |description |
|------|------|----------|--------|------------|
| displayUsername | Boolean | false | true | This prop describes whether the username should be displayed or not |
| displayTime | Boolean | false | true | This prop describes whether the time should be displayed or not |
| avatar | Object | false | { size: "small / medium / large",
shape: "square / circle"} | Object with the description of the size and shape of avatar |
``javascript`
...
participants: [
{
name: 'Arnaldo',
id: 1,
avatar: 'url'
},
{
name: 'José',
id: 2,
avatar: 'url'
}
],
myself: {
name: 'Matheus S.',
id: 3,
avatar: 'url'
},
...
- Images
| vue-quick-chat | vue-quick-chat-m(Our) |
| -- | -- |
| 
| 
|
--------------
--------------
origin readme
Features
- Custom style
- Handle on type event and on message submit
- Chat with multiple participants
- Support for async actions like message uploaded status
Instalation
`
yarn add vue-quick-chat
or with npm
npm install vue-quick-chat --save
Usage
javascript
import { Chat } from 'vue-quick-chat'
import 'vue-quick-chat/dist/vue-quick-chat.css';
export default {
components: {
Chat
},
}
`
html
:myself="myself"
:messages="messages"
:on-type="onType"
:on-message-submit="onMessageSubmit"
:chat-title="chatTitle"
:placeholder="placeholder"
:colors="colors"
:border-style="borderStyle"
:hide-close-button="hideCloseButton"
:close-button-icon-size="closeButtonIconSize"
:on-close="onClose"
:submit-icon-size="submitIconSize"
:load-more-messages="toLoad.length > 0 ? loadMoreMessages : null"
:async-mode="asyncMode"
:scroll-bottom="scrollBottom"
:display-header="displayHeader"/>
`
You can also use a slot to define the header content
html
:myself="myself"
:messages="messages"
:onType="onType"
:onMessageSubmit="onMessageSubmit"
:chatTitle="chatTitle"
:placeholder="placeholder"
:colors="colors"
:borderStyle="borderStyle"
:hideCloseButton="hideCloseButton"
:closeButtonIconSize="closeButtonIconSize"
:submitIconSize="submitIconSize"
:load-more-messages="toLoad.length > 0 ? loadMoreMessages : null"
:asyncMode="asyncMode"
:scroll-bottom="scrollBottom">
{{participant.name}}
`
Bellow we have an example of the component data structure
javascript
import {Chat} from 'vue-quick-chat';
import 'vue-quick-chat/dist/vue-quick-chat.css';export default {
components: {
Chat
},
data() {
return {
visible: true,
participants: [
{
name: 'Arnaldo',
id: 1
},
{
name: 'José',
id: 2
}
],
myself: {
name: 'Matheus S.',
id: 3
},
messages: [
{
content: 'received messages',
myself: false,
participantId: 1,
timestamp: {year: 2019, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123}
},
{
content: 'sent messages',
myself: true,
participantId: 3,
timestamp: {year: 2019, month: 4, day: 5, hour: 19, minute: 10, second: 3, millisecond: 123}
},
{
content: 'other received messages',
myself: false,
participantId: 2,
timestamp: {year: 2019, month: 5, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123}
}
],
chatTitle: 'My chat title',
placeholder: 'send your message',
colors: {
header: {
bg: '#d30303',
text: '#fff'
},
message: {
myself: {
bg: '#fff',
text: '#bdb8b8'
},
others: {
bg: '#fb4141',
text: '#fff'
},
messagesDisplay: {
bg: '#f7f3f3'
}
},
submitIcon: '#b91010'
},
borderStyle: {
topLeft: "10px",
topRight: "10px",
bottomLeft: "10px",
bottomRight: "10px",
},
hideCloseButton: false,
submitIconSize: "30px",
closeButtonIconSize: "20px",
asyncMode: false,
toLoad: [
{
content: 'Hey, John Doe! How are you today?',
myself: false,
participantId: 2,
timestamp: {year: 2011, month: 3, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
},
{
content: "Hey, Adam! I'm feeling really fine this evening.",
myself: true,
participantId: 3,
timestamp: {year: 2010, month: 0, day: 5, hour: 19, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
},
],
scrollBottom: {
messageSent: true,
messageReceived: false
},
displayHeader:true
}
},
methods: {
onType: function (event) {
//here you can set any behavior
},
loadMoreMessages(resolve) {
setTimeout(() => {
resolve(this.toLoad); //We end the loading state and add the messages
//Make sure the loaded messages are also added to our local messages copy or they will be lost
this.messages.unshift(...this.toLoad);
this.toLoad = [];
}, 1000);
},
onMessageSubmit: function (message) {
/*
* example simulating an upload callback.
* It's important to notice that even when your message wasn't send
* yet to the server you have to add the message into the array
*/
this.messages.push(message);
/*
* you can update message state after the server response
*/
// timeout simulating the request
setTimeout(() => {
message.uploaded = true
}, 2000)
},
onClose() {
this.visible = false;
}
}
}
`
Component Props
| name | type | required |default |description |
|------|------|----------|--------|------------|
| participants | Array | true | | An array of participants. Each participant should be an Object with name and id|
| myself | Object | true | | Object of my participant. "myself" should be an Object with name and id|
| messages | Array | true | | An array of messages. Each message should be an Object with content, myself, participantId and timestamp|
| onType | Function | false | () => false | Event called when the user is typing |
| onMessageSubmit | Function | false | () => false | Event called when the user sends a new message |
| onClose | Function | false | () => false | Event called when the user presses the close icon |
| chatTitle | String | false | Empty String | The title on chat header |
| placeholder | String | false | 'type your message here' | The placeholder of message text input |
| colors | Object | true | | Object with the color's description of style properties |
| borderStyle | Object | false | { topLeft: "10px", topRight: "10px", bottomLeft: "10px", bottomRight: "10px"} | Object with the description of border style properties |
| hideCloseButton | Boolean | false | false | If true, the Close button will be hidden |
| submitIconSize | String | false | "15px" | The submit icon size in pixels. |
| closeButtonIconSize | String | false | "15px" | The close button icon size in pixels. |
| asyncMode | Boolean | false | false | If the value is true` the component begins to watch message upload status and displays a visual feedback for each message. If the value is `false` the visual feedback is disabled |
| loadMoreMessages | Function | false | null | If this function is passed and you reach the top of the messages, it will be called and a loading state will be displayed until you resolve it by calling the only parameter passed to it |
| scrollBottom | Object | false | { messageSent: true, messageReceived: false} | This object describes the chat scroll behavior. The two options represent the moment when the chat should scroll to the bottom. If 'messageSent' is `true`, the chat will scroll to bottom aways you send a new message. If 'messageReceived' is `true`, the chat will scroll to bottom always you receive a new message. |
| displayHeader | Boolean | false | true | This prop describes whether the header should be displayed or not |$3
| name | type | description |
|---------|--------|----------------|
| id | int | The user id should be an unique value |
| name | String | The user name that will be displayed |Example
`javascript
{
name: 'Username',
id: 1
},
`
$3
| name | type | description |
|---------|--------|----------------|
| content | String | The message text content |
| myself | boolean | (REMOVED) Whether the message was sent by myself or by other participants. Since version 1.0.8 this property is automatically set by the chat |
| participantId | int | The participant's id who sent the message |
|timestamp| Object| Object describing the year, month, day, hour, minute, second and millisecond that the message was sent |
|uploaded| Boolean| If asyncMode is true` and uploaded is `true`, a visual feedback is displayed bollow the message. If asyncMode is `true` and uploaded is `false`, a visual loading feedback is displayed bollow the message. If asyncMode is `false`, this property is ignored.|Example
`javascript
{
content: 'received messages',
//myself: false,
participantId: 1,
timestamp: {
year: 2019,
month: 3,
day: 5,
hour: 20,
minute: 10,
second: 3,
millisecond: 123
},
uploaded: true,
}
`
$3
| name | type | description |
|---------|--------|----------------|
| header | Object | Object containing the header background and text color |
| message | Object | Object containing the message background and text color. The Object should contains the style for 'myself' and 'others' |
| messagesDisplay | Object | Object containing the background color of mesages container. |
| submitIcon | String | The color applied to the send message button icon |Example
javascript
{
header:{
bg: '#d30303',
text: '#fff'
},
message:{
myself: {
bg: '#fff',
text: '#bdb8b8'
},
others: {
bg: '#fb4141',
text: '#fff'
}
},
messagesDisplay: {
bg: '#f7f3f3'
},
submitIcon: '#b91010'
}
`
Project setup
npm install
$3
npm run serve
$3
npm run build
$3
npm run test
$3
npm run lint
$3
See Configuration Reference.