Press "Enter" to skip to content

A Simple Quick Chat Conversation Component Created with Vue.js

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

nametyperequireddefaultdescription
participantsArraytrue An array of participants. Each participant should be an Object with name and id
myselfObjecttrue Object of my participant. “myself” should be an Object with name and id
messagesArraytrue An array of messages. Each message should be an Object with content, myself, participantId and timestamp
chatTitleStringfalseEmpty StringThe title on chat header
placeholderStringfalse‘type your message here’The placeholder of message text input
colorsObjecttrue Object with the color’s description of style properties
borderStyleObjectfalse{ topLeft: “10px”, topRight: “10px”, bottomLeft: “10px”, bottomRight: “10px”}Object with the description of border style properties
hideCloseButtonBooleanfalsefalseIf true, the ‘Close’ button will be hidden
submitIconSizeintfalse24The submit icon size in pixels.
submitImageIconSizeintfalse24The image submit icon size in pixels.
closeButtonIconSizeStringfalse“15px”The close button icon size in pixels.
asyncModeBooleanfalsefalseIf 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
loadMoreMessagesFunctionfalse() => falseIf 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
scrollBottomObjectfalse{ 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.
displayHeaderBooleanfalsetrueThis prop describes whether the header should be displayed or not
profilePictureConfigObjectfalse{ 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.
timestampConfigObjectfalse{ format: 'HH:mm', relative: false }This prop is a js Object that decribes the timestamp format / relativeness.
linkOptionsObjectfalse{ 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.
acceptImageTypesStringfalseimage/*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

nametyperequireddefaultdescription
onTypeFunctionfalse() => falseEvent called when the user is typing
onMessageSubmitFunctionfalse() => falseEvent called when the user sends a new message
onCloseFunctionfalse() => falseEvent called when the user presses the close icon
onImageClickedFunctionfalse() => falseThis 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.
onImageSelectedFunctionfalse() => falseThis 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.