mikichat

mikichat provides an intercom-like new world chat window that can be included easily in any project for free. It provides no message facilities, alone the view component .
mikichat is porting to vue of react-beautiful-chat ( which you can find here )

Go to FAQ ⬇️

Features

• Customizeable
• Backend agnostic
• Free

Table of Contents

Installation

$ yarn add mikichat

Example

 
import
 
Chat
 
from
 
'
mikichat
'
 
Vue
.
use
(
Chat
)

 
<
template
>
 
  
<
div
>
 
    
<
beautiful-chat
 
      :
participants
=
"
participants
"
 
      :
titleImageUrl
=
"
titleImageUrl
"
 
      :
onMessageWasSent
=
"
onMessageWasSent
"
 
      :
messageList
=
"
messageList
"
 
      :
newMessagesCount
=
"
newMessagesCount
"
 
      :
isOpen
=
"
isChatOpen
"
 
      :
close
=
"
closeChat
"
 
      :
icons
=
"
icons
"
 
      :
open
=
"
openChat
"
 
      :
showEmoji
=
"
true
"
 
      :
showFile
=
"
true
"
 
      :
showTypingIndicator
=
"
showTypingIndicator
"
 
      :
colors
=
"
colors
"
 
      :
alwaysScrollToBottom
=
"
alwaysScrollToBottom
"
 
      :
messageStyling
=
"
messageStyling
"
 
      @
onType
=
"
handleOnType
"
 
      @
edit
=
"
editMessage
"
 /
>
 
  
div
>
 
template
>

 
import
 
CloseIcon
 
from
 
'
mikichat/src/assets/close-icon.png
'
 
import
 
OpenIcon
 
from
 
'
mikichat/src/assets/logo-no-bg.svg
'
 
import
 
FileIcon
 
from
 
'
mikichat/src/assets/file.svg
'
 
import
 
CloseIconSvg
 
from
 
'
mikichat/src/assets/close.svg
'
 
 
 
export
 
default
 
{
 
  name
:
 
'
app
'
,
 
  
data
(
)
 
{
 
    
return
 
{
 
      icons
:
{
 
        open
:
{
 
          img
:
 OpenIcon
,
 
          name
:
 
'
default
'
,
 
        
}
,
 
        close
:
{
 
          img
:
 CloseIcon
,
 
          name
:
 
'
default
'
,
 
        
}
,
 
        file
:
{
 
          img
:
 FileIcon
,
 
          name
:
 
'
default
'
,
 
        
}
,
 
        closeSvg
:
{
 
          img
:
 CloseIconSvg
,
 
          name
:
 
'
default
'
,
 
        
}
,
 
      
}
,
 
      participants
:
 
[
 
        
{
 
          id
:
 
'
user1
'
,
 
          name
:
 
'
Matteo
'
,
 
          imageUrl
:
 
'
https://avatars3.githubusercontent.com/u/1915989?s=230&v=4
'
 
        
}
,
 
        
{
 
          id
:
 
'
user2
'
,
 
          name
:
 
'
Support
'
,
 
          imageUrl
:
 
'
https://avatars3.githubusercontent.com/u/37018832?s=200&v=4
'
 
        
}
 
      
]
,
 
 
      titleImageUrl
:
 
'
https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png
'
,
 
      messageList
:
 
[
 
          
{
 type
:
 
'
text
'
,
 author
:
 
`
me
`
,
 data
:
 
{
 text
:
 
`
Say yes!
`
 
}
 
}
,
 
          
{
 type
:
 
'
text
'
,
 author
:
 
`
user1
`
,
 data
:
 
{
 text
:
 
`
No.
`
 
}
 
}
 
      
]
,
 
 
      newMessagesCount
:
 
,
 
      isChatOpen
:
 
false
,
 
 
      showTypingIndicator
:
 
'
'
,
 
 
      colors
:
 
{
 
        header
:
 
{
 
          bg
:
 
'
#4e8cff
'
,
 
          text
:
 
'
#ffffff
'
 
        
}
,
 
        launcher
:
 
{
 
          bg
:
 
'
#4e8cff
'
 
        
}
,
 
        messageList
:
 
{
 
          bg
:
 
'
#ffffff
'
 
        
}
,
 
        sentMessage
:
 
{
 
          bg
:
 
'
#4e8cff
'
,
 
          text
:
 
'
#ffffff
'
 
        
}
,
 
        receivedMessage
:
 
{
 
          bg
:
 
'
#eaeaea
'
,
 
          text
:
 
'
#222222
'
 
        
}
,
 
        userInput
:
 
{
 
          bg
:
 
'
#f4f7f9
'
,
 
          text
:
 
'
#565867
'
 
        
}
 
      
}
,
 
 
      alwaysScrollToBottom
:
 
false
,
 
 
      messageStyling
:
 
true
 
 
    
}
 
  
}
,
 
  methods
:
 
{
 
    
sendMessage
 
(
text
)
 
{
 
      
if
 
(
text
.
length
 
>
 
)
 
{
 
        
this
.
newMessagesCount
 
=
 
this
.
isChatOpen
 
?
 
this
.
newMessagesCount
 
:
 
this
.
newMessagesCount
 
+
 
1
 
        
this
.
onMessageWasSent
(
{
 author
:
 
'
support
'
,
 type
:
 
'
text
'
,
 data
:
 
Read more: 15 outfits to inspire your workwear wardrobe this January 
{
 text 
}
 
}
)
 
      
}
 
    
}
,
 
    
onMessageWasSent
 
(
message
)
 
{
 
      
 
      
this
.
messageList
 
=
 
[
 
...
this
.
messageList
,
 message 
]
 
    
}
,
 
    
openChat
 
(
)
 
{
 
      
 
      
this
.
isChatOpen
 
=
 
true
 
      
this
.
newMessagesCount
 
=
 
 
    
}
,
 
    
closeChat
 
(
)
 
{
 
      
 
      
this
.
isChatOpen
 
=
 
false
 
    
}
,
 
    
handleScrollToTop
 
(
)
 
{
 
      
 
      
 
  	
}
,
 
    
handleOnType
 
(
)
 
{
 
      
console
.
log
(
'
Emit typing event
'
)
 
    
}
,
 
    
editMessage
(
message
)
{
 
      
const
 
m
 
=
 
this
.
messageList
.
find
(
m
=>
m
.
id
 
===
 
message
.
id
)
;
 
      
m
.
isEdited
 
=
 
true
;
 
      
m
.
data
.
text
 
=
 
message
.
data
.
text
;
 
    
}
 
}

For more detailed examples see the demonstration booklet .

Components

Launcher

Launcher is the only component needed to use mikichat. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the exercise .

Props

prop	type	description
*participants	[agentProfile]	Represents your product or service’s customer service agents. Fields for each agent: id, name, imageUrl
*onMessageWasSent	function(message)	Called when a message a message is sent with a message object as an argument.
*isOpen	Boolean	The bool indicating whether or not the chat window should be open.
*open	Function	The function passed to the component that mutates the above mentioned bool toggle for opening the chat
*close	Function	The function passed to the component that mutates the above mentioned bool toggle for closing the chat
messageList	[message]	An array of message objects to be rendered as a conversation.
showEmoji	Boolean	A bool indicating whether or not to show the emoji button
showFile	Boolean	A bool indicating whether or not to show the file chooser button
showTypingIndicator	Boolean	A bool indicating whether or not to show the typing indicator
colors	Object	An object containing the specs of the colors used to paint the component. See here
messageStyling	Boolean	A bool indicating whether or not to enable msgdown support for message formatting in chat. See here

Events

event	params	description
onType	undefined	Fires when user types on the message input
edit	message	Fires after user edited message

Slots

header

Replacing default option header .

 
<
template
 
v-slot:header
>
 
 
  🤔 Good chat between {{participants.map(m=>m.name).join(' 
&
 ')}} 
 
template
>

Replacing exploiter embodiment. Params : message, user

 
<
template
 
v-slot:user-avatar
=
"
{ message, user }
"
>
 
  
<
div
 
style
=
"
border-radius:50%; color: pink; font-size: 15px; line-height:25px; text-align:center;background: tomato; width: 25px !important; height: 25px !important; min-width: 30px;min-height: 30px;margin: 5px; font-weight:bold
"
 
v-if
=
"
message.type === 'text' 
&
&
 user 
&
&
 user.name
"
>
 
    {{user.name.toUpperCase()[0]}}
 
  
div
>
 
template
>

Change markdown for textbook message. Params : message

 
<
template
 
v-slot:text-message-body
=
"
{ message }
"
>
 
  
<
small
 
style
=
"
background:red
"
 
v-if
=
"
message.meta
"
>
 
    {{message.meta}}
 
  
small
>
 
  {{message.text}}
 
template
>

Change markdown for system message. Params : message

 
<
template
 
v-slot:system-message-body
=
"
{ message }
"
>
 
  [System]: {{message.text}}
 
template
>

Message Objects

message objects are rendered differently depending on their type. presently, alone text, emoji and file types are supported. Each message object has an author field which can have the measure ‘me ‘ or the id of the correspond agent .

 
{
 
  author
:
 
'
support
'
,
 
  type
:
 
'
text
'
,
 
  id
:
 
1
,
 
 
  isEdited
:
 
false
,
 
  data
:
 
{
 
    text
:
 
'
some text
'
,
 
    meta
:
 
'
06-16-2019 12:43
'
 
  
}
 
}
 
 
 
{
 
  author
:
 
'
me
'
,
 
  type
:
 
'
emoji
'
,
 
  id
:
 
1
,
 
 
  isEdited
:
 
false
,
 
  data
:
 
{
 
    code
:
 
'
someCode
'
 
  
}
 
}
 
 
 
{
 
  author
:
 
'
me
'
,
 
  type
:
 
'
file
'
,
 
  id
:
 
1
,
 
 
  isEdited
:
 
false
,
 
  data
:
 
{
 
    file
:
 
{
 
        name
:
 
'
file.mp3
'
,
 
        url
:
 
'
https:123.rf/file.mp3
'
 
      
}
 
    
}
 
}
 
 

Quick replies

When sending a message, you can provide a stage set of sentences that will be displayed in the exploiter chew the fat as quick replies. Adding in the message object a suggestions field with the measure an array of strings will trigger this functionality

 
{
 
  author
:
 
'
support
'
,
 
  type
:
 
'
text
'
,
 
  id
:
 
1
,
 
 
  data
:
 
{
 
    text
:
 
'
some text
'
,
 
    meta
:
 
'
06-16-2019 12:43
'
 
  
}
,
 
  suggestions
:
 
[
'
some quick reply
'
,
 
...
,
 
'
another one
'
]
 
}

FAQ

How to get the demo working?

• cd mikichat
• yarn watch # this starts the compiler so everytime you edit files they get compiled
• cd demo
• yarn dev # this starts a web server on localhost:8080 so the demo shows up – it also watches for the demo files changes

How can I add a feature or fix a bug?

• Fork the repository
• Fix/add your changes
• yarn build on the root to have the library compiled with your latest changes
• create a pull request describing what you did
• discuss the changes with the maintainer
• boom! your changes are added to the main repo
• a release is created almost once per week 😉

How can I customize the colors?

• When initializing the component, pass an object specifying the colors used:

 
 
 
let
 redColors 
=
 
{
 
  header
:
 
{
 
    bg
:
 
'
#D32F2F
'
,
 
    text
:
 
'
#fff
'
 
  
}
,
 
  launcher
:
 
{
 
    bg
:
 
'
#D32F2F
'
 
  
}
,
 
  messageList
:
 
{
 
    bg
:
 
'
#fff
'
 
  
}
,
 
  sentMessage
:
 
{
 
    bg
:
 
'
#F44336
'
,
 
    text
:
 
'
#fff
'
 
  
}
,
 
  receivedMessage
:
 
{
 
    bg
:
 
'
#eaeaea
'
,
 
    text
:
 
'
#222222
'
 
  
}
,
 
  userInput
:
 
{
 
    bg
:
 
'
#fff
'
,
 
    text
:
 
'
#212121
'
 
  
}
 
}
 
 
 
<
beautiful
-
chat
 
      
...
 
      
:
colors
=
"
redColors
"
 
/
>

This is the loss form. Please check this file for the list of variants shown in the demonstration page on-line .
Please eminence that you need to pass an Object containing each one of the semblance properties otherwise the validation will fail .

How can I add message formatting?

beneficial news, message format is already added for you. You can enable it by setting messageStyling to true and you will be using the msgdown library. You can enable/disable the format support at any prison term, or you can let users do it whenever they prefer .

# Join the team Do you want to collaborate ? Join the project at hypertext transfer protocol : //crowdforge.io/projects/581

source : https://usakairali.com
class : Hair