Vue Quick Chat component is a simple chat that can be easily imported and used in your project.
live chat javascript code, live chat api free, javascript chat library, vue chat component, create a chatting app by using vue
Features
- Custom pattern
- Handling event type and sending a message
- Chat with multiple participants
- Support asynchronous actions such as message upload status
- Send Photos (Released in version 1.1.0)
- Support for profile pictures (released in version 1.1.1)
- Luxon is used instead of the moment. Added event functionality (released in version 1.2.0)
- Support for timestamp configuration (released in version 1.2.1)
How to make use of it:
Install and download:
yarn add vue-quick-chat npm install vue-quick-chat --save
1. Import the component and stylesheet into your project.
import { Chat } from 'vue-quick-chat'
import '/path/to/vue-quick-chat.css';2. Add the chat component to your template.
<template>
<div id="app">
<div class="content">
<div class="chat-container">
<Chat v-if="visible"
:participants="participants"
:myself="myself"
:messages="messages"
:chat-title="chatTitle"
:placeholder="placeholder"
:colors="colors"
:border-style="borderStyle"
:hide-close-button="hideCloseButton"
:close-button-icon-size="closeButtonIconSize"
:submit-icon-size="submitIconSize"
:submit-image-icon-size="submitImageIconSize"
:load-more-messages="toLoad.length > 0 ? loadMoreMessages : null"
:async-mode="asyncMode"
:scroll-bottom="scrollBottom"
:display-header="true"
:send-images="true"
:profile-picture-config="profilePictureConfig"
@onImageClicked="onImageClicked"
@onImageSelected="onImageSelected"
@onMessageSubmit="onMessageSubmit"
@onType="onType"
@onClose="onClose('param value')"/>
</div>
<div class="external-controller">
<div class="controller-btn-container">
<button class="btn-message" @click="addMessage">Add menssage</button>
<button class="btn-participant" @click="addParticipant">Add participant</button>
<button class="btn-participant" @click="changeAllProps">Change All Props</button>
</div>
<div class="message-list">
<ol>
<li v-for="(message, index) in messages" :key="index">
{{message.content}}
</li>
</ol>
</div>
</div>
</div>
</div>
</template>3. Register the component and configure your data as follows:
export default {
name: 'app',
components: {
Chat
},
data() {
return {
visible: true,
participants: [
{
name: 'Arnaldo',
id: 1,
profilePicture: ''
},
{
name: 'Adam',
id: 2,
profilePicture: ''
}
],
myself: {
name: 'John Doe',
id: 3,
profilePicture: ''
},
messages: [
{
content: "Really?! I don't care! Haha",
participantId: 1,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
{
content: "Really?! I don't care! Haha",
participantId: 1,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
{
content: "Really?! I don't care! Haha",
participantId: 1,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
{
content: "Hey, Jhon Doe! How are you today",
participantId: 1,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
{
content: "Hey, Adam! I'm felling really fine this evening.",
participantId: 3,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
{
content: "Really?! I don't care! Haha",
participantId: 1,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true,
type: 'text'
},
],
chatTitle: 'My chat title',
placeholder: 'send your message',
colors: {
header: {
bg: '#d30303',
text: '#fff'
},
message: {
myself: {
bg: '#fff',
text: '#525252'
},
others: {
bg: '#fb4141',
text: '#fff'
},
messagesDisplay: {
//bg: 'rgb(247, 243, 243)',
//bg: '#f7f3f3'
bg: '#f7f3f3'
}
},
submitIcon: '#b91010',
submitImageIcon: '#b91010',
},
borderStyle: {
topLeft: "10px",
topRight: "10px",
bottomLeft: "10px",
bottomRight: "10px",
},
hideCloseButton: false,
submitIconSize: 24,
submitImageIconSize: 24,
closeButtonIconSize: "20px",
asyncMode: true,
toLoad: [
{
content: 'Hey, John Doe! How are you today?',
participantId: 2,
timestamp: { year: 2016, 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.",
participantId: 3,
timestamp: { year: 2016, month: 1, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 },
uploaded: true,
viewed: true
},
],
scrollBottom: {
messageSent: true,
messageReceived: false
},
profilePictureConfig: {
others: true,
myself: true,
styles: {
width: '30px',
height: '30px',
borderRadius: '50%'
}
}
}
},
methods: {
// eslint-disable-next-line
onType: function (e) {
// eslint-disable-next-line
console.log('typing');
},
loadMoreMessages(resolve) {
setTimeout(() => {
resolve(this.toLoad);
//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(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
message.viewed = true
}, 2000)
},
onClose(param) {
console.log(param)
this.visible = false;
},
addMessage() {
/* this.messages.push(
{
content: "Update state",
// myself: false,
participantId: 1,
timestamp: {year: 2014, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
}
) */
this.messages.push(
{
type: 'image',
preview: null,
src: '',
content: 'image',
participantId: 1,
timestamp: {year: 2014, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: false
}
)
},
addParticipant() {
let participant = {
name: 'Karl',
id: 4
};
this.participants.push(participant)
},
changeAllProps() {
this.myself = {
name: 'I Qanah',
id: 3
};
this.participants = [
{
name: 'Ibrahim',
id: 5
},
{
name: 'Ana',
id: 6
}
];
this.messages = [
{
content: "Really?! I don't care! Haha",
participantId: 5,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
},
{
content: "Really?! I don't care! Haha",
participantId: 6,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
},
{
content: "Really?! I don't care! Haha",
participantId: 3,
timestamp: {year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123},
uploaded: true,
viewed: true
}
];
this.toLoad = [
{
content: 'Hey, John Doe! How are you today?',
participantId: 6,
timestamp: { year: 2016, 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.",
participantId: 3,
timestamp: { year: 2016, month: 10, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 },
uploaded: true,
viewed: true
},
];
this.chatTitle = 'Change All Participants';
this.placeholder = 'اكتب رسالتك هنا';
},
onImageSelected({file, message}){
let src = ''
this.messages.push(message);
/**
* This timeout simulates a requisition that uploads the image file to the server.
* It's up to you implement the request and deal with the response in order to
* update the message status and the message URL
*/
setTimeout((res) => {
message.uploaded = true
message.src = res.src
}, 3000, {src});
},
onImageClicked(message){
/**
* This is the callback function that is going to be executed when some image is clicked.
* You can add your code here to do whatever you need with the image clicked. A common situation is to display the image clicked in full screen.
*/
console.log('Image clicked', message.src)
}
}
}4. All possible props.
participants: {
type: Array,
required: true
},
messages: {
type: Array,
required: true
},
myself: {
type: Object,
required: true
},
chatTitle: {
type: String,
required: false,
default: ''
},
placeholder: {
type: String,
required: false,
default: 'type your message here'
},
colors: {
type: Object,
required: true
},
borderStyle: {
type: Object,
required: false,
default: () => {
return {
topLeft: "10px",
topRight: "10px",
bottomLeft: "10px",
bottomRight: "10px",
}
}
},
hideCloseButton: {
type: Boolean,
required: false,
default: false
},
submitIconSize: {
type: Number,
required: false,
default: 24
},
submitImageIconSize: {
type: Number,
required: false,
default: 24
},
closeButtonIconSize: {
type: String,
required: false,
default: "15px"
},
asyncMode: {
type: Boolean,
required: false,
default: false
},
loadMoreMessages: {
type: Function,
required: false,
default: null
},
scrollBottom:{
type: Object,
required: false,
default: () => {
return {
messageSent: true,
messageReceived: false
}
}
},
displayHeader: {
type: Boolean,
required: false,
default: true
},
sendImages: {
type: Boolean,
required: false,
default: true
},
profilePictureConfig: {
type: Object,
required: false,
default: () => {
return {
others: true,
myself: false,
styles: {
width: '25px',
height: '25px',
borderRadius: '50%'
}
}
}
}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 | |
| 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 | int | false | 24 | The submit icon size in pixels. |
| submitImageIconSize | int | false | 24 | The image 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 | () => false | 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 |
| profilePictureConfig | Object | false | { others: true, myself: false, styles: { width: '25px', height: '25px', borderRadius: '50%'} } | This prop is a js Object that decribes the style and the behavoir of the chat regards to the users profile picture. |
| timestampConfig | Object | false | { format: 'HH:mm', relative: false } | This prop is a js Object that decribes the timestamp format / relativeness. |
| linkOptions | Object | false | { myself: {}, others: {} } | This prop is an Object that configures the links that may appear on the messages’ content. myself defines the config for links in sent messages. others defines the config for links in received messages. This functionality relies on linkifyjs. You can find the full doc of this prop. |
| acceptImageTypes | String | false | image/* | This prop defines the image types that are accepted to be uploaded. The image types should be separated by a comma (e.g. '.png, .jpeg, .jpg') |
Events
| name | type | required | default | description |
|---|---|---|---|---|
| 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 |
| onImageClicked | Function | false | () => false | This prop is a callback function that is called after the user clicks on an image. This function may receive the message that represents the image clicked. You have many possibilities of implementations, one of them, is to display the clicked image on full-screen mode. |
| onImageSelected | Function | false | () => false | This prop is a callback function that is called after the user selects an image from the computer. This is the function that should upload the image to the server and update the message status to uploaded and the src to the uploaded image URL. |
Custom Live Conversation Component, vue-quick-chat Plugin/Github
See Demo And Download
Official Website(MatheusrdSantos): Click Here
This superior jQuery/javascript plugin is developed by MatheusrdSantos. For extra Advanced Usages, please go to the official website.
