@kindly/react-chat 2.46.1 → 2.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.46.1",
+  "version": "2.47.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -41,10 +41,10 @@
     "phoenix-socket": "^1.2.3",
     "prop-types": "^15.8.1",
     "react-children-utilities": "^2.9.0",
-    "react-hook-form": "^7.44.3",
+    "react-hook-form": "^7.45.0",
     "react-idle-timer": "^5.7.2",
-    "react-redux": "^8.0.7",
-    "react-textarea-autosize": "^8.4.1",
+    "react-redux": "^8.1.1",
+    "react-textarea-autosize": "^8.5.0",
     "redux": "^4.2.1",
     "redux-localstorage": "^0.4.1",
     "redux-logger": "^3.0.6",
@@ -60,39 +60,39 @@
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-a11y": "^7.0.20",
-    "@storybook/addon-actions": "^7.0.20",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-mdx-gfm": "^7.0.20",
+    "@babel/plugin-transform-runtime": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@storybook/addon-a11y": "^7.0.23",
+    "@storybook/addon-actions": "^7.0.23",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-interactions": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/addon-mdx-gfm": "^7.0.23",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-webpack5": "^7.0.20",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/react": "^7.0.23",
+    "@storybook/react-webpack5": "^7.0.23",
+    "@storybook/test-runner": "^0.11.0",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^1.13.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "browserslist": "^4.21.5",
-    "chromatic": "^6.17.1",
+    "browserslist": "^4.21.9",
+    "chromatic": "^6.19.9",
     "clean-webpack-plugin": "^4.0.0",
     "dotenv": "8.6.0",
     "express": "^4.18.2",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.3",
     "husky": "3.1.0",
     "jest": "^29.5.0",
     "jest-each": "^29.5.0",
@@ -101,21 +101,22 @@
     "jest-webpack-resolver": "^0.3.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.set": "^4.3.2",
+    "mockdate": "^3.0.5",
     "process": "^0.11.10",
-    "pusher-js": "^8.0.1",
+    "pusher-js": "^8.2.0",
     "pusher-redux": "^0.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "18.2.0",
     "resolve-url-loader": "^5.0.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.0.23",
     "storybook-addon-mock": "^4.0.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.76.1",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.12.0",
-    "webpack-merge": "^5.8.0"
+    "webpack": "^5.88.0",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
   },
   "engines": {
     "npm": ">=8.3.0"
@@ -143,5 +144,5 @@
       }
     }
   },
-  "gitHead": "4a93a9f4b70c0690e7a71c1da8d4a1360549db74"
+  "gitHead": "6868be8097a32a761e858682fe987e21e290e2b4"
 }

package/stories/screens.stories/Chat/FormStates.stories.jsx

@@ -393,6 +393,7 @@ FormActive2.play = async ({ canvasElement }) => {
   const selectInputStyle = window.getComputedStyle(selectInput);
   expect(selectInputStyle.border).not.toContain('#00000000');
   expect(selectInputStyle.border).not.toContain('transparent');
+  await wait(10); // This fixes inconsistent test results due to composer autofocus
   await userEvent.selectOptions(selectInput, 'Very long message');
   await expect(selectInputStyle.border).toContain('rgba(0, 0, 0, 0)');
 

package/stories/screens.stories/Chat/index.stories.jsx

@@ -1,5 +1,6 @@
 import { expect } from '@storybook/jest';
 import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import MockDate from 'mockdate';
 import React from 'react';
 
 import { HANDLERS, IMAGE_WIDTH } from 'app/constants';
@@ -12,6 +13,8 @@ import withContainer from '../../decorators/withContainer';
 import withMockProvider from '../../decorators/withProvider';
 import wait from '../../utils/wait';
 
+MockDate.set(0);
+
 const defaultBotSettings = {
   welcomePage: settingsJSON.welcome_page,
   feedbackForm: settingsJSON.feedback_form,
@@ -110,8 +113,8 @@ Regular.parameters = {
   chromatic: { viewports: chromaticViewports },
 };
 
-export const Annoucement = Template.bind({});
-Annoucement.args = {
+export const Announcement = Template.bind({});
+Announcement.args = {
   type: 'WARNING',
   text: 'You seem to be offline, please check your internet connection',
   initialStateModifierFromArgs: ({ type, text }) => ({
@@ -123,7 +126,7 @@ Annoucement.args = {
     },
   }),
 };
-Annoucement.argTypes = {
+Announcement.argTypes = {
   type: {
     options: ['WARNING', 'CRITICAL'],
     control: {
@@ -131,26 +134,8 @@ Annoucement.argTypes = {
     },
   },
 };
-Annoucement.parameters = {
-  botSettings: defaultBotSettings,
-};
-
-export const Announcement = Template.bind({});
 Announcement.parameters = {
   botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    announcement: {
-      show: true,
-      text: 'Maintenance mode!',
-      url: 'https://example.com',
-      type: 'WARNING',
-    },
-  },
 };
 
 export const HiddenInput = Template.bind({});
@@ -227,7 +212,7 @@ MimirBotMessage.args = {
       messages: {
         chatMessages: [
           {
-            from_bot: false,
+            from_bot: true,
             sender: 'BOT',
             handler: HANDLERS.MIMIR,
             message: 'This is a message from Mimir, our KindlyGPT bot.',
@@ -366,8 +351,13 @@ NewUnreadMessages.play = async ({ canvasElement }) => {
       { timeout: 5000 },
     );
     mockMessage(window.store, 'This is a new message');
-    await wait(200);
-    await expect(chatNewMessage).toHaveTextContent('This is a new message');
+
+    await waitFor(
+      async () => {
+        await expect(chatNewMessage).toHaveTextContent('This is a new message');
+      },
+      { timeout: 5000 },
+    );
   }
 };
 
@@ -774,6 +764,77 @@ Slider.parameters = {
   },
 };
 
+export const Buttons = Template.bind({});
+Buttons.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Button list!',
+          message_format: 'txt',
+          buttons: [
+            {
+              id: '1',
+              button_type: 'EXTERNAL_LINK',
+              language_code: 'en',
+              label: 'Open a link',
+              value: 'https://example.com',
+              index: 0,
+            },
+            {
+              id: '2',
+              button_type: 'QUICK_REPLY',
+              language_code: 'en',
+              label: 'Quick reply',
+              value: 'This is a quick reply',
+              index: 1,
+            },
+            {
+              id: '3',
+              button_type: 'EMAIL',
+              language_code: 'en',
+              label: 'Email',
+              value: 'support@example.com',
+              index: 2,
+            },
+            {
+              id: '4',
+              button_type: 'PHONE',
+              language_code: 'en',
+              label: 'Phone',
+              value: '+46 070-174 06 05',
+              index: 3,
+            },
+            {
+              id: '5',
+              button_type: 'UPLOAD_ATTACHMENT',
+              language_code: 'en',
+              label: 'Upload attachment',
+              index: 4,
+            },
+            {
+              id: '6',
+              button_type: 'DIALOGUE_TRIGGER',
+              language_code: 'en',
+              label: 'Trigger another dialogue',
+              value: 'dialogue_id',
+              index: 5,
+            },
+          ],
+          created,
+          id: '1',
+        },
+      ],
+    },
+  },
+};
+
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {
   ...defaultParameters,
@@ -875,31 +936,31 @@ MessageReference.parameters = {
         {
           ...defaultParameters.initialStateModifier.messages.chatMessages[2],
           message:
-            "As a player in a Kahoot game, you cannot hide the answers of other players. The game is designed to display all answers on the host's screen and on individual player devices for transparency and fairness.",
+            "As a player in a Kahoot game, you cannot hide the answers of other players 👪🏿🙈. The game is designed to display all answers on the host's screen and on individual player devices for transparency and fairness.",
           message_references: [
             {
               url: 'http://example.com#1',
-              offset: 75,
+              offset: 79,
             },
             {
               url: 'http://example.com#2',
-              offset: 75,
+              offset: 79,
             },
             {
               url: 'http://example.com#3',
-              offset: 75,
+              offset: 79,
             },
             {
               url: 'http://example.com#2',
-              offset: 140,
+              offset: 144,
             },
             {
               url: 'http://example.com#4',
-              offset: 204,
+              offset: 208,
             },
             {
               url: 'http://example.com#1',
-              offset: 204,
+              offset: 208,
             },
           ],
           from_bot: true,

package/stories/screens.stories/Options.stories.jsx

@@ -7,6 +7,7 @@ import { OPTION_VIEW } from '../../src/features/OptionsScreen/constants';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
 import withMockProvider from '../decorators/withProvider';
+import wait from '../utils/wait';
 
 const defaultBotSettings = {
   welcomePage: settingsJSON.welcome_page,
@@ -173,6 +174,7 @@ LanguageChoiceConfirm.argTypes = LanguageChoice.argTypes;
 LanguageChoiceConfirm.parameters = LanguageChoice.parameters;
 LanguageChoiceConfirm.play = async ({ canvasElement }) => {
   const norskButton = await within(canvasElement).findByText(availableLanguages[1].name);
+  await wait(10); // This fixes inconsistent test results due to composer autofocus
   await userEvent.click(norskButton);
 };