@kindly/react-chat 2.38.0 → 2.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.38.0",
+  "version": "2.38.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -15,10 +15,14 @@
     "build:local": "webpack -p",
     "prepublishOnly": "npm run build",
     "test": "jest src",
+    "test:a11y": "test-storybook",
     "update:browserslist": "npx browserslist@latest --update-db",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
+  "scriptsComments": {
+    "test-a11y": "Runs the storybook test-runner. Currently running only axe-core for a11y tests."
+  },
   "browserslist": [
     "> 1% in NO",
     "not IE 11",
@@ -64,6 +68,7 @@
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -72,11 +77,13 @@
     "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack4": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@storybook/test-runner": "^0.7.0",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@types/react": "^16.14.31",
     "@types/react-dom": "^16.9.16",
+    "axe-playwright": "^1.1.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^1.13.3",
@@ -86,6 +93,7 @@
     "chromatic": "^6.8.0",
     "clean-webpack-plugin": "^3.0.0",
     "compression": "1.7.4",
+    "concurrently": "^7.3.0",
     "dotenv": "8.6.0",
     "exports-loader": "^0.7.0",
     "express": "^4.18.1",
@@ -107,6 +115,7 @@
     "resolve-url-loader": "^5.0.0",
     "storybook-addon-mock": "^2.4.1",
     "url-loader": "2.3.0",
+    "wait-on": "^6.0.1",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.12",
@@ -117,5 +126,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "d58bb8e70b1359a91ea0700f52feefd7f83f9ce3"
+  "gitHead": "a10766ab8e4d989cbebae6522e8586209bab9035"
 }

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

@@ -99,6 +99,31 @@ Regular.parameters = {
   },
 };
 
+export const Annoucement = Template.bind({});
+Annoucement.args = {
+  type: 'WARNING',
+  text: 'You seem to be offline, please check your internet connection',
+  initialStateModifierFromArgs: ({ type, text }) => ({
+    ...Regular.parameters.initialStateModifier,
+    announcement: {
+      show: true,
+      type,
+      text,
+    },
+  }),
+};
+Annoucement.argTypes = {
+  type: {
+    options: ['WARNING', 'CRITICAL'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+Annoucement.parameters = {
+  botSettings: defaultBotSettings,
+};
+
 export const BotIsTyping = Template.bind({});
 BotIsTyping.parameters = {
   botSettings: defaultBotSettings,
@@ -382,9 +407,74 @@ Checkbox.parameters = {
   },
 };
 
+export const Fallback = Template.bind({});
+Fallback.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          id: '0',
+          created: '2022-08-29T07:55:00.923Z',
+          message: 'What does recursive mean?',
+          status: null,
+        },
+        {
+          id: '1',
+          from_bot: true,
+          sender: 'BOT',
+          reply_to_message: 'What does recursive mean?',
+          message: "I didn't quite understand this.",
+          exchange_type: 'fallback_suggestion',
+          title: "I didn't quite understand this.",
+          chatbubble_hide_input_field: true,
+          handler: 'FALLBACK_SUGGESTION',
+          suggestions: [
+            {
+              preface: 'Did you mean:',
+              message: 'What does recursive mean?',
+              buttons: [
+                {
+                  id: '2',
+                  label: 'Yes',
+                  value: '1',
+                  button_type: 'suggestion_dialogue_trigger',
+                  is_active: true,
+                },
+                {
+                  id: '2',
+                  label: 'No',
+                  value: 'SUGGESTION_FALLBACK',
+                  exchange_id: 'SUGGESTION_FALLBACK',
+                  button_type: 'suggestion_dialogue_trigger',
+                  is_active: true,
+                },
+              ],
+            },
+          ],
+          created: '2022-06-11T16:13:00.143Z',
+        },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          reply_to_message: '🙅 [Fallback suggestion dismissed by user]',
+          message:
+            "I'm having trouble understanding what you mean. Feel free to rephrase your question and remember that I understand short and precise sentences the best.",
+          exchange_type: 'fallback',
+          title: '🙅 [Fallback suggestion dismissed by user]',
+          handler: 'FALLBACK',
+          created: '2022-08-29T08:15:42.712Z',
+          id: '2',
+        },
+      ],
+    },
+  },
+};
+
 const videoSources = [
   ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
-  ['Vimeo', 'https://vimeo.com/148751763'],
+  ['Vimeo', 'https://vimeo.com/153882097'],
   ['Self hosted', 'https://www.crockpot.se/wp-content/uploads/2019/02/Comp-1-1.mp4'],
 ];
 export const VideoEmbed = Template.bind({});
@@ -436,9 +526,17 @@ ImageGallery.args = {
   imageCarouselSize: 1000,
   titleSize: 0,
   descriptionSize: 0,
+  imageQuantity: 3,
   hasLink: false,
   newTab: false,
-  initialStateModifierFromArgs: ({ imageCarouselSize, titleSize, descriptionSize, hasLink, newTab }) => ({
+  initialStateModifierFromArgs: ({
+    imageCarouselSize,
+    imageQuantity,
+    titleSize,
+    descriptionSize,
+    hasLink,
+    newTab,
+  }) => ({
     ...Regular.parameters.initialStateModifier,
     messages: {
       chatMessages: [
@@ -457,7 +555,7 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
             {
@@ -466,7 +564,7 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
             {
@@ -475,10 +573,10 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
-          ],
+          ].slice(0, imageQuantity),
           image_carousel_size: imageCarouselSize,
           title: 'Image Gallery',
           created: '2022-06-11T16:44:33.885Z',
@@ -492,6 +590,9 @@ ImageGallery.argTypes = {
     options: Object.keys(IMAGE_SIZE).map((size) => parseInt(size, 10)),
     control: { type: 'radio' },
   },
+  imageQuantity: {
+    control: { type: 'range', min: 1, max: 3, step: 1 },
+  },
   titleSize: {
     control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
   },

package/stories/screens.stories/PushGreeting.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import withFetchMock from 'storybook-addon-mock';
+
+import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
+import settingsJSON from '../assets/settingsJson';
+import withContainer from '../decorators/withContainer';
+import withMockProvider from '../decorators/withProvider';
+
+const defaultBotSettings = {
+  welcomePage: settingsJSON.welcome_page,
+  feedbackForm: settingsJSON.feedback_form,
+  maintenanceAlert: settingsJSON.maintenance_alert,
+  ...settingsJSON.settings,
+  ...settingsJSON,
+};
+
+function Template(args, context) {
+  return <KindlyChatButton {...args} {...context} />;
+}
+
+export default {
+  title: 'Screen/PushGreeting',
+  component: KindlyChatButton,
+  decorators: [withFetchMock, withContainer, withMockProvider],
+};
+
+export const Default = Template.bind({});
+Default.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+  },
+  initialStateModifier: {
+    pushMessages: {
+      dismissedMessages: [],
+      show: true,
+      type: 'message',
+      text: 'This is a push greeting',
+    },
+  },
+};
+
+export const NewMessage = Template.bind({});
+NewMessage.args = {
+  agentName: 'John Doe',
+  avatar: null,
+  text: 'has sent a new message',
+  initialStateModifierFromArgs: ({ agentName, avatar, text }) => ({
+    botSettings: {
+      ...defaultBotSettings,
+    },
+    pushMessages: {
+      dismissedMessages: [],
+      show: true,
+      type: 'takeover',
+      agent: {
+        name: agentName,
+        avatar,
+      },
+      text,
+    },
+  }),
+};
+
+const avatars = {
+  undefined: 'undefined',
+  'https://i.imgur.com/Iz1nJrw.jpg': 'Arash',
+};
+
+NewMessage.argTypes = {
+  avatar: {
+    options: Object.keys(avatars),
+    control: {
+      type: 'select',
+      labels: avatars,
+    },
+  },
+};
+NewMessage.parameters = {
+  botSettings: defaultBotSettings,
+};