add link to show in history

1FF · Oct 6, 2023 · be29a30 · be29a30
1 parent ffafd21
commit be29a30
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 33 deletions.
diff --git a/__tests__/unit/chat-ui.spec.js b/__tests__/unit/chat-ui.spec.js
@@ -5,13 +5,16 @@ import { loadingDots, messageIncrementor } from '../__mocks__/htmlFixtures';
 import { loadingDots as loadingDotsObj } from '../../src/lib/utils';
 import { customEventTypes } from '../../src/lib/custom/tracking-events';
 import { actionService } from '../../src/lib/action-service';
+import { getStringInAngleBrackets } from '../../src/lib/helpers';
+
 const chatWidgets = require('../../src/lib/chat-widgets');
 
 jest.mock('../../src/lib/helpers', () => {
   const originalModule = jest.requireActual('../../src/lib/helpers');
   const mockHelpers = {
     __esModule: true,
     ...originalModule,
+    getStringInAngleBrackets: jest.fn().mockReturnValue(['https://mysite.com']),
   };
 
   // Define the different return values for getAnswerConfig
@@ -387,17 +390,78 @@ describe('ChatUi', () => {
       user_id: 'userID',
     });
   });
-  test('historyTraverse iterates over the history', () => {
-    // Arrange
-    sut.appendHtml = jest.fn();
-    actionService.clearButtonCodes = jest.fn().mockReturnValue('element2', true);
 
-    sut.historyTraverse([{ content: 'element1' }, { content: 'element2' }]);
+  describe('historyTraverse', () => {
+    test('iterates over the history with one element', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+
+      sut.historyTraverse([{ content: 'element1' }]);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.initMedia).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, true);
+    });
+
+    test('iterates over the history without action data with 2 elements', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+
+      actionService.clearButtonCodes = jest.fn().mockReturnValue('element2', true);
 
-    expect(sut.appendHtml).toBeCalledTimes(2);
-    expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
-    expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
-    expect(actionService.clearButtonCodes).toBeCalled();
+      sut.historyTraverse([{ content: 'element1' }, { content: 'element2' }]);
+
+      expect(sut.initMedia).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledTimes(2);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
+      expect(actionService.clearButtonCodes).toBeCalled();
+    });
+
+    test('iterates over the history with two element with caret', () => {
+      sut.appendHtml = jest.fn();
+      sut.initMedia = jest.fn();
+      sut.initNewLine = jest.fn();
+
+      sut.historyTraverse([{ content: 'elem^ent1' }, { content: 'element2' }]);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element2' }, true);
+      expect(sut.initNewLine).toBeCalledTimes(1);
+      expect(sut.initMedia).toBeCalledTimes(1);
+    });
+  });
+
+  describe('initNewLine', () => {
+    test('adds new line in case of no caret', () => {
+      sut.appendHtml = jest.fn();
+
+      sut.initNewLine({ content: 'element1' }, false);
+
+      expect(sut.appendHtml).toBeCalledTimes(1);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'element1' }, false);
+    });
+
+    test('adds new line in case of caret', () => {
+      sut.appendHtml = jest.fn();
+
+      sut.initNewLine({ content: 'elem^ent1' }, false);
+
+      expect(sut.appendHtml).toBeCalledTimes(2);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'elem' }, false);
+      expect(sut.appendHtml).toBeCalledWith({ content: 'ent1' }, false);
+    });
+  });
+
+  describe('initMedia', () => {
+    test('appends the media link to the dom', () => {
+      sut.appendMedia = jest.fn();
+
+      sut.initMedia(`Hi! I'm here to assist you. {Are you ready?} <https://mylink.com> [Let's start]`);
+
+      expect(getStringInAngleBrackets).toBeCalledTimes(1);
+      expect(sut.appendMedia).toBeCalledWith('https://mysite.com');
+    });
   });
 
   test('that processMessageInCaseOfCaret formats the string in the correct format', () => {

diff --git a/src/lib/chat-ui.js b/src/lib/chat-ui.js
@@ -218,7 +218,10 @@ const ChatUi = {
   historyTraverse(history) {
     let counter = 1;
     let isLastMessage = false;
+
     history.forEach((data) => {
+      let appended = false;
+
       if (counter > 1) {
         let updatedContent = actionService.clearButtonCodes(data.content);
         updatedContent = clearCarets(updatedContent);
@@ -228,34 +231,39 @@ const ChatUi = {
         isLastMessage = true;
       }
       if (counter === 1) {
-        const link = getStringInAngleBrackets(data.content);
-        const extractedLink = link[0];
-        if (extractedLink) {
-          this.appendMedia(extractedLink);
-        }
-
+        this.initMedia(data.content);
         if (data.content.includes('^')) {
-          const splittedContent = splitText(data.content, '^');
-
-          for (let i = 0; i < splittedContent.length; i++) {
-            data.content = splittedContent[i];
-            const newData = {
-              ...data,
-              content: splittedContent[i],
-            };
-            this.appendHtml(newData, isLastMessage);
-          }
-        } else {
-          if (extractedLink) {
-            this.appendHtml(newData, isLastMessage);
-          }
+          appended = true;
+          this.initNewLine(data, isLastMessage);
         }
-      } else {
+      }
+      if(!appended){
         this.appendHtml(data, isLastMessage);
       }
+
       counter++;
     });
   },
+  initNewLine(data, isLastMessage) {
+    const splittedContent = splitText(data.content, '^');
+
+    for (let i = 0; i < splittedContent.length; i++) {
+      data.content = splittedContent[i];
+      const newData = {
+        ...data,
+        content: splittedContent[i],
+      };
+      this.appendHtml(newData, isLastMessage);
+    }
+  },
+  initMedia(content) {
+    const link = getStringInAngleBrackets(content);
+
+    const extractedLink = link[0];
+    if (extractedLink) {
+      this.appendMedia(extractedLink);
+    }
+  },
   appendUnsentMessage() {
     const data = {
       content: localStorage.getItem(UNSENT_MESSAGES_KEY),
@@ -549,15 +557,15 @@ const ChatUi = {
     const data = {
       content: updatedMessage,
       ...this.assistant.initialMessage,
-      extractedLink,
     };
     this.elements.messageIncrementor.appendChild(timeMarkup(data.time));
+    if (extractedLink) {
+      this.appendMedia(extractedLink);
+    }
     if (data.content.includes('^')) {
-      this.appendMedia(data.extractedLink);
       const splitMessage = splitText(data.content, '^');
       await this.appendHtmlInChunks(splitMessage, data);
     } else {
-      this.appendMedia(data.extractedLink);
       this.appendHtml(data);
     }
 

diff --git a/src/lib/helpers.js b/src/lib/helpers.js
@@ -171,6 +171,7 @@ export function getStringInAngleBrackets(input) {
   while ((match = pattern.exec(input)) !== null) {
     matches.push(match[1]);
   }
+
   return matches;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -171,6 +171,7 @@ export function getStringInAngleBrackets(input) { @@
       while ((match = pattern.exec(input)) !== null) {
         matches.push(match[1]);
       }
       return matches;
     }
@@ Expand Down @@