vue beautiful chat
v2.5.0
vue-beautiful-chatあらゆるプロジェクトに無料で簡単に組み込むことができるインターコムのようなチャット ウィンドウを提供します。メッセージング機能は提供されず、ビュー コンポーネントのみが提供されます。
vue-beautiful-chat react-beautiful-chat (ここで見つけることができます) の vue に移植されています
よくある質問へ行く
$ 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 ;
}
}
}より詳細な例については、デモ フォルダーを参照してください。
vue-Beautiful-chat を使用するために必要なコンポーネントはLauncherだけです。メッセージの変更に動的に反応します。すべての新しいメッセージは、例に示すように props を変更して追加する必要があります。
| 小道具 | タイプ | 説明 |
|---|---|---|
| *参加者 | [エージェントプロフィール] | 製品またはサービスのカスタマー サービス エージェントを表します。各エージェントのフィールド: id、name、imageUrl |
| *メッセージが送信されたとき | 関数(メッセージ) | メッセージ オブジェクトを引数としてメッセージが送信されるときに呼び出されます。 |
| *は開いています | ブール値 | チャット ウィンドウを開くかどうかを示すブール値。 |
| *開ける | 関数 | チャットを開くための上記のブール切り替えを変更するコンポーネントに渡される関数 |
| *近い | 関数 | チャットを閉じるための上記のブール トグルを変更するコンポーネントに渡される関数 |
| メッセージリスト | [メッセージ] | 会話としてレンダリングされるメッセージ オブジェクトの配列。 |
| show絵文字 | ブール値 | 絵文字ボタンを表示するかどうかを示すブール値 |
| ファイルの表示 | ブール値 | ファイル選択ボタンを表示するかどうかを示すブール値 |
| show削除 | ブール値 | メッセージの編集ボタンを表示するかどうかを示すブール値 |
| showEdition | ブール値 | メッセージの削除ボタンを表示するかどうかを示すブール値 |
| showTypingIndicator | 弦 | ユーザーの Participant.id に設定してtypingインジケーターを表示できる文字列 |
| showHeader | ブール値 | チャットウィンドウのヘッダーを表示するかどうかを示すブール値 |
| ユーザーリストの切り替えを無効にする | ブール値 | ユーザーがメッセージ リストと参加者リストを切り替えることを許可するかどうかを示すブール値 |
| 色 | 物体 | コンポーネントのペイントに使用される色の仕様を含むオブジェクト。ここを参照 |
| メッセージスタイリング | ブール値 | チャットでのメッセージ形式のmsgdownサポートを有効にするかどうかを示すブール値。ここを参照 |
| イベント | パラメータ | 説明 |
|---|---|---|
| onType | 未定義 | ユーザーがメッセージ入力を入力すると起動します |
| 編集 | message | ユーザーがメッセージを編集した後に発生します |
デフォルトのヘッダーを置き換えます。
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template >ユーザーのアバターを置き換えます。パラメータ: 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 >テキストメッセージのマークダウンを変更します。パラメータ: message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template >システムメッセージのマークダウンを変更します。パラメータ: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template >メッセージ オブジェクトは、そのタイプに応じて異なる方法で表示されます。現在、テキスト、絵文字、ファイル タイプのみがサポートされています。各メッセージ オブジェクトには、値「me」または対応するエージェントの ID を持つことができるauthorフィールドがあります。
{
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'
}
}
} メッセージを送信するときに、ユーザー チャットにクイック返信として表示される一連の文を提供できます。文字列の配列の値を持つsuggestionsフィールドをメッセージ オブジェクトに追加すると、この機能がトリガーされます。
{
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
同じフォルダーで新しいシェルを開きます
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build 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 " />こちらは赤色のバリエーションです。オンラインのデモ ページに表示されるバリアントのリストについては、このファイルを確認してください。
それぞれの色のプロパティを含むオブジェクトを渡す必要があることに注意してください。そうしないと検証が失敗します。
良いニュースです。メッセージの書式設定はすでに追加されています。 messageStyling trueに設定することでこれを有効にでき、msgdown ライブラリを使用することになります。書式設定のサポートはいつでも有効/無効にすることができます。また、ユーザーがいつでも好きなときに書式設定のサポートを実行できるようにすることもできます。
@a-kriya、@mattmezza
寄稿者として参加したい場合は、お問い合わせください。
