adjusted documentation for new api

mattmezza · Sep 16, 2018 · d5fdd37 · d5fdd37
1 parent 4f476ff
commit d5fdd37
Showing 1 changed file with 57 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -44,50 +44,92 @@ Vue.use(Chat)
 <template>
   <div>
     <beautiful-chat
-      :participants="[agentProfile]"
-      :title="Support Chat"
-      :titleImageUrl="https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png"
+      :participants="participants"
+      :titleImageUrl="titleImageUrl"
       :onMessageWasSent="onMessageWasSent"
       :messageList="messageList"
       :newMessagesCount="newMessagesCount"
       :isOpen="isChatOpen"
       :close="closeChat"
       :open="openChat"
       :showEmoji="true"
-      :showFile="true" />
-      <a href="#" @click.prevent="openChat()">Open the chat window</a>
+      :showFile="true"
+      :showTypingIndicator="showTypingIndicator"
+      :colors="colors"
+      :alwaysScrollToBottom="alwaysScrollToBottom" />
   </div>
 </template>
 ```
 ```javascript
 export default {
+  name: 'app',
   data() {
     return {
-      agentProfile: {
-        id: 'support',
-        name: 'Support Agent',
-        imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
-      },
-      messageList: [],
+      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
+      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...)
     }
   },
   methods: {
-    sendMessage (message) {
+    sendMessage (text) {
       if (text.length > 0) {
         this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
-        this.onMessageWasSent(message)
+        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
       }
     },
     onMessageWasSent (message) {
-      this.messageList = [...this.messageList, 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
     }
   }