Merge pull request #125 from ML-Leonardo/SAPMLCONV-30363-QuickReply-I…

…ssue

Added logic to ignore special hidden type if is the last message to a…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-cai-webchat",
-  "version": "1.4.45",
+  "version": "1.4.46",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/components/Live/index.js

@@ -6,6 +6,8 @@ import pathOr from 'ramda/es/pathOr'
 import Message from 'components/Message'
 import IsTyping from 'components/Message/isTyping'
 
+import { isLastMessageForIndex } from 'helpers'
+
 import './style.scss'
 
 class Live extends Component {
@@ -119,7 +121,7 @@ class Live extends Component {
               sendMessage={sendMessage}
               preferences={preferences}
               onImageLoaded={this.onImageLoaded}
-              isLastMessage={messages.length === index + 1}
+              isLastMessage={isLastMessageForIndex(messages, index)}
               retry={message.retry}
               isSending={message.isSending}
               onRetrySendMessage={() => onRetrySendMessage(message)}

src/helpers.js

@@ -1,4 +1,6 @@
 
+import { pathOr } from 'ramda'
+
 export const truncate = (string, length) => {
 //  console.assert(typeof string === 'string', `Expected a 'string', but got a type:'${typeof string}' - '${string}'`)
   if (typeof string === 'string') {
@@ -81,12 +83,40 @@ export const safeStringValue = (content) => {
 export const validButtonContent = (element) => {
   if (element) {
     const { type, value, title } = element
-    const data = {
+    return {
       type,
       value,
       title,
     }
-    return data
   }
   return element
 }
+
+/**
+ * Determine if this is the last message, ignore client_data types at the end
+ * Only for Quick Replies
+ *
+ * @param {*} messages - Array of messages
+ * @param {*} index - 0 based index to test
+ * @returns
+ */
+export const isLastMessageForIndex = (messages, index) => {
+  if (messages && Array.isArray(messages) && index >= 0 && index < messages.length) {
+    let offset = 1
+    const messageType = pathOr('', ['attachment', 'type'], messages[index])
+    if (typeof messageType === 'string' && messageType.toLowerCase() === 'quickreplies') {
+      // Loop back to the index to adjust offset for client_data type
+      for (let i = messages.length - 1; i > index; --i) {
+        const type = pathOr('', ['attachment', 'type'], messages[i])
+        if (typeof type === 'string' && type.toLowerCase() === 'client_data') {
+          offset++
+        } else {
+          break
+        }
+      }
+    }
+    // Should return true if this is a type client_data and is the last message?
+    return messages.length === index + offset
+  }
+  return false // No messsage or index out of range
+}

src/test/helpers.test.js

@@ -7,6 +7,7 @@ import {
   validButtonContent,
   getCredentialsFromLocalStorage,
   storeCredentialsToLocalStorage,
+  isLastMessageForIndex,
 } from 'helpers'
 
 describe('Test the helper utilities', () => {
@@ -50,5 +51,46 @@ describe('Test the helper utilities', () => {
     storeCredentialsToLocalStorage('chatId', 'conversation-Id', 1, 'channelId')
     assert.propertyVal(getCredentialsFromLocalStorage('channelId', 1), 'conversationId', 'conversation-Id')
   })
+
+  it('Test isLastMessageForIndex', () => {
+    assert.isFalse(isLastMessageForIndex(), 'No params')
+    assert.isFalse(isLastMessageForIndex([], 0), 'Empty params')
+    assert.isTrue(isLastMessageForIndex([{ attachment: { type: 'foo' } }], 0), 'Is first and last message')
+    assert.isTrue(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'client_data' } }], 0), 'Has client data after the first (quickreplies) message')
+    assert.isFalse(isLastMessageForIndex([
+      { attachment: { type: 'text' } },
+      { attachment: { type: 'client_data' } }], 0), 'Has client data after the first (text) message')
+    assert.isTrue(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'client_data' } },
+      { attachment: { type: 'client_data' } }], 0), 'Has two client data after the first message')
+    assert.isTrue(isLastMessageForIndex([{ attachment: { type: 'client_data' } }], 0), 'Only client data')
+    assert.isFalse(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'client_data' } },
+      { attachment: { type: 'buttons' } },
+      { attachment: { type: 'client_data' } }], 0))
+    assert.isFalse(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'client_data' } },
+      { attachment: { type: 'buttons' } },
+      { attachment: { type: 'client_data' } }], 1))
+    assert.isTrue(isLastMessageForIndex([
+      { attachment: { type: 'button' } },
+      { attachment: { type: 'client_data' } },
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'client_data' } }], 2))
+    assert.isFalse(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'buttons' } }], 2), 'Test out of range')
+    assert.isTrue(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'buttons' } }], 1), 'Test is Last one')
+    assert.isFalse(isLastMessageForIndex([
+      { attachment: { type: 'quickreplies' } },
+      { attachment: { type: 'buttons' } }], 0), 'Is First message')
+  })
 })