vue beautiful chat
v2.5.0
vue-beautiful-chat fournit une fenêtre de discussion de type interphone qui peut être facilement incluse gratuitement dans n'importe quel projet. Il ne fournit aucune fonctionnalité de messagerie, uniquement le composant d'affichage.
vue-beautiful-chat est porté sur vue de react-beautiful-chat (que vous pouvez trouver ici)
Aller à la FAQ
$ yarn add vue-beautiful-chat
import Chat from 'vue-beautiful-chat'
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 "
:showEdition = " true "
:showDeletion = " true "
:showTypingIndicator = " showTypingIndicator "
:showLauncher = " true "
:showCloseButton = " true "
:colors = " colors "
:alwaysScrollToBottom = " alwaysScrollToBottom "
:disableUserListToggle = " false "
:messageStyling = " messageStyling "
@onType = " handleOnType "
@edit = " editMessage " />
</ div >
</ template > export default {
name : 'app' ,
data ( ) {
return {
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'
}
] , // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
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.` } }
] , // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount : 0 ,
isChatOpen : false , // to determine whether the chat window should be open or closed
showTypingIndicator : '' , // when set to a value matching the participant.id it shows the typing indicator for the specific user
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'
}
} , // specifies the color scheme for the component
alwaysScrollToBottom : false , // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling : true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
} ,
methods : {
sendMessage ( text ) {
if ( text . length > 0 ) {
this . newMessagesCount = this . isChatOpen ? this . newMessagesCount : this . newMessagesCount + 1
this . onMessageWasSent ( { author : 'support' , type : 'text' , data : { text } } )
}
} ,
onMessageWasSent ( message ) {
// called when the user sends a message
this . messageList = [ ... this . messageList , message ]
} ,
openChat ( ) {
// called when the user clicks on the fab button to open the chat
this . isChatOpen = true
this . newMessagesCount = 0
} ,
closeChat ( ) {
// called when the user clicks on the botton to close the chat
this . isChatOpen = false
} ,
handleScrollToTop ( ) {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
} ,
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 ;
}
}
}Pour des exemples plus détaillés, consultez le dossier démo.
Launcher est le seul composant nécessaire pour utiliser vue-beautiful-chat. Il réagira dynamiquement aux changements de messages. Tous les nouveaux messages doivent être ajoutés via un changement d'accessoires, comme indiqué dans l'exemple.
| soutenir | taper | description |
|---|---|---|
| *participants | [profil d'agent] | Représente les agents du service client de votre produit ou service. Champs pour chaque agent : id, nom, imageUrl |
| *onMessageWasSent | fonction (message) | Appelé lorsqu'un message est envoyé avec l'objet message comme argument. |
| *estOuvert | Booléen | Le booléen indiquant si la fenêtre de discussion doit être ouverte ou non. |
| *ouvrir | Fonction | La fonction transmise au composant qui mute la bascule bool mentionnée ci-dessus pour ouvrir le chat |
| *fermer | Fonction | La fonction transmise au composant qui mute la bascule booléenne mentionnée ci-dessus pour fermer le chat |
| liste de messages | [message] | Un tableau d'objets de message à afficher sous forme de conversation. |
| montrerEmoji | Booléen | Un booléen indiquant s'il faut ou non afficher le bouton emoji |
| showFile | Booléen | Un booléen indiquant s'il faut ou non afficher le bouton de sélection de fichier |
| showSuppression | Booléen | Un booléen indiquant s'il faut ou non afficher le bouton d'édition pour un message |
| showEdition | Booléen | Un booléen indiquant s'il faut ou non afficher le bouton Supprimer pour un message |
| showTypingIndicator | Chaîne | Une chaîne qui peut être définie sur participant.id d'un utilisateur pour afficher un indicateur typing pour lui |
| showHeader | Booléen | Un booléen indiquant s'il faut ou non afficher l'en-tête de la fenêtre de discussion |
| désactiverListeUtilisateurToggle | Booléen | Un booléen indiquant s'il faut ou non autoriser l'utilisateur à basculer entre la liste des messages et la liste des participants |
| couleurs | Objet | Un objet contenant les spécifications des couleurs utilisées pour peindre le composant. Voir ici |
| messageStyle | Booléen | Un booléen indiquant s'il faut ou non activer la prise en charge msgdown pour le formatage des messages dans le chat. Voir ici |
| événement | paramètres | description |
|---|---|---|
| surType | indéfini | Se déclenche lorsque l'utilisateur tape sur la saisie du message |
| modifier | message | Se déclenche après la modification du message par l'utilisateur |
Remplacement de l'en-tête par défaut.
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > Remplacement de l'avatar de l'utilisateur. Paramètres : message , user
< template v-slot : user-avatar = " { message , user } " >
< div style = " border-radius : 50 % ; color : pink ; font-size : 15 px ; line-height : 25 px ; text-align : center ; background : tomato ; width : 25 px !important ; height : 25 px !important ; min-width : 30 px ; min-height : 30 px ; margin : 5 px ; font-weight : bold " v-if = " message.type === 'text' && user && user.name " >
{{user.name.toUpperCase()[0]}}
</ div >
</ template > Modifier la démarque pour le message texte. Paramètres : message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template > Modifiez la démarque pour le message système. Paramètres : message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > Les objets de message sont rendus différemment selon leur type. Actuellement, seuls les types de texte, emoji et fichiers sont pris en charge. Chaque objet message possède un champ author qui peut avoir la valeur 'me' ou l'identifiant de l'agent correspondant.
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
}
}
{
author : 'me' ,
type : 'emoji' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
code : 'someCode'
}
}
{
author : 'me' ,
type : 'file' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
file : {
name : 'file.mp3' ,
url : 'https:123.rf/file.mp3'
}
}
} Lors de l'envoi d'un message, vous pouvez fournir un ensemble de phrases qui seront affichées dans le chat de l'utilisateur sous forme de réponses rapides. L'ajout dans l'objet message d'un champ suggestions avec la valeur un tableau de chaînes déclenchera cette fonctionnalité
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
} ,
suggestions : [ 'some quick reply' , ... , 'another one' ]
} git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install # this installs the package dependencies
yarn watch # this watches files to continuously compile them
Ouvrez un nouveau shell dans le même dossier
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build sur la racine pour que la bibliothèque soit compilée avec vos dernières modifications 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 " />Il s'agit de la variante rouge. Veuillez consulter ce fichier pour connaître la liste des variantes affichées sur la page de démonstration en ligne.
Veuillez noter que vous devez transmettre un objet contenant chacune des propriétés de couleur, sinon la validation échouera.
Bonne nouvelle, le formatage des messages est déjà ajouté pour vous. Vous pouvez l'activer en définissant messageStyling sur true et vous utiliserez la bibliothèque msgdown. Vous pouvez activer/désactiver la prise en charge du formatage à tout moment, ou vous pouvez laisser les utilisateurs le faire quand ils le souhaitent.
@a-kriya, @mattmezza
Veuillez nous contacter si vous souhaitez nous rejoindre en tant que contributeur .
