@kindly/react-chat 2.39.5 → 2.39.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.39.5",
+  "version": "2.39.6",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -126,5 +126,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "cff703081966dda917c36b8c8dc60d42e3e61cec"
+  "gitHead": "904044d23976aa4fe6dd329b97e52929d3811655"
 }

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

@@ -1,12 +1,13 @@
 import { expect } from '@storybook/jest';
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/prop-types */
-import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
 import { IMAGE_WIDTH } from 'app/constants';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -37,8 +38,7 @@ export default {
   },
 };
 
-export const Regular = Template.bind({});
-Regular.parameters = {
+const defaultParameters = {
   botSettings: defaultBotSettings,
   initialStateModifier: {
     chatbubble: {
@@ -100,12 +100,18 @@ Regular.parameters = {
   },
 };
 
+export const Regular = Template.bind({});
+Regular.parameters = {
+  ...defaultParameters,
+  chromatic: { viewports: chromaticViewports },
+};
+
 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,
+    ...defaultParameters.initialStateModifier,
     announcement: {
       show: true,
       type,
@@ -218,9 +224,9 @@ const MESSAGES = {
 };
 MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
 MultilineBotMessage.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -274,16 +280,19 @@ MultilineBotMessage.play = async () => {
   await screen.findAllByText('Single-line lonely message');
   // wait for the auto-scroll to execute
   await new Promise((resolve) => {
-    setTimeout(resolve, 10);
+    setTimeout(resolve, 50);
   });
   fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+
   const chatNewMessage = await screen.findByTestId('chat-new-message');
-  await waitFor(
-    async () => {
-      await expect(chatNewMessage).toBeVisible();
-    },
-    { timeout: 5000 },
-  );
+
+  // TODO: We used to use `waitFor`, but it seems to fail in Chromatic.
+  // Wait for the newMessage button to be visible
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1400);
+  });
+
+  await expect(chatNewMessage).toBeVisible();
 };
 
 export const GroupsOfMessages = Template.bind({});
@@ -378,9 +387,9 @@ HandoverCancelled.play = async () => {
 
 export const Checkbox = Template.bind({});
 Checkbox.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -426,9 +435,9 @@ Checkbox.parameters = {
 
 export const Fallback = Template.bind({});
 Fallback.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -499,7 +508,7 @@ VideoEmbed.args = {
   videoSource: videoSources[0][0],
   videoSourceList: videoSources,
   initialStateModifierFromArgs: ({ videoSource, videoSourceList }) => ({
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -554,7 +563,7 @@ ImageGallery.args = {
     hasLink,
     newTab,
   }) => ({
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -639,9 +648,9 @@ ImageGalleryWithDescription.parameters = ImageGallery.parameters;
 
 export const Slider = Template.bind({});
 Slider.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -690,9 +699,9 @@ Slider.parameters = {
 
 export const Form = Template.bind({});
 Form.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -797,9 +806,9 @@ Form.play = async () => {
 
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {

package/stories/screens.stories/ClosedButton.stories.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import withMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
 import settings from '../assets/settingsJson';
 
@@ -39,7 +40,10 @@ export default {
 };
 
 export const Regular = Template.bind({});
-Regular.parameters = mockSettings();
+Regular.parameters = {
+  ...mockSettings(),
+  chromatic: { viewports: chromaticViewports },
+};
 
 export const Christmas = Template.bind({});
 Christmas.parameters = mockSettings({

package/stories/screens.stories/Feedback.stories.jsx

@@ -5,6 +5,7 @@ import withFetchMock from 'storybook-addon-mock';
 
 import { feedbackFormTypes } from 'app/constants';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -46,6 +47,7 @@ Emojis.parameters = {
       feedbackFormOpen: true,
     },
   },
+  chromatic: { viewports: chromaticViewports },
 };
 
 export const Binary = Template.bind({});

package/stories/screens.stories/Nudge.stories.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import withMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
 import settings from '../assets/settingsJson';
 
@@ -40,7 +41,7 @@ export default {
 };
 
 export const Product = Template.bind({});
-Product.parameters = mockSettings();
+Product.parameters = { ...mockSettings(), chromatic: { viewports: chromaticViewports } };
 Product.args = {
   slug: settings.nudges.product_nudges[0].slug,
 };

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

@@ -4,6 +4,7 @@ import { screen, userEvent } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -27,8 +28,7 @@ export default {
   decorators: [withFetchMock, withContainer, withMockProvider],
 };
 
-export const Regular = Template.bind({});
-Regular.parameters = {
+const defaultParameters = {
   botSettings: defaultBotSettings,
   initialStateModifier: {
     chatbubble: {
@@ -40,6 +40,12 @@ Regular.parameters = {
   },
 };
 
+export const Regular = Template.bind({});
+Regular.parameters = {
+  ...defaultParameters,
+  chromatic: { viewports: chromaticViewports },
+};
+
 export const WithLanguageChoice = Template.bind({});
 WithLanguageChoice.parameters = {
   botSettings: {
@@ -179,7 +185,7 @@ LanguageChoiceConfirm.play = async () => {
 };
 
 export const DeleteConfirmation = Template.bind({});
-DeleteConfirmation.parameters = Regular.parameters;
+DeleteConfirmation.parameters = defaultParameters;
 DeleteConfirmation.play = async () => {
   const deleteButton = await screen.findByText(defaultBotSettings.text.delete_button.en);
   await userEvent.click(deleteButton);
@@ -187,9 +193,9 @@ DeleteConfirmation.play = async () => {
 
 export const DeleteSuccess = Template.bind({});
 DeleteSuccess.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     privacy: {
       chatDeleted: true,
     },
@@ -197,7 +203,7 @@ DeleteSuccess.parameters = {
 };
 
 export const DownloadChat = Template.bind({});
-DownloadChat.parameters = Regular.parameters;
+DownloadChat.parameters = defaultParameters;
 DownloadChat.play = async () => {
   const downloadButton = await screen.findByText(defaultBotSettings.text.download_button.en);
   await userEvent.click(downloadButton);
@@ -205,7 +211,7 @@ DownloadChat.play = async () => {
 
 export const QuitChat = Template.bind({});
 QuitChat.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
     chatbubble: {
       active: true,

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -39,6 +40,7 @@ Default.parameters = {
       text: 'This is a push greeting',
     },
   },
+  chromatic: { viewports: chromaticViewports },
 };
 
 export const NewMessage = Template.bind({});

package/stories/screens.stories/StartChat.stories.jsx

@@ -2,6 +2,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -34,6 +35,7 @@ export default {
 };
 
 export const Regular = Template.bind({});
+Regular.parameters = { chromatic: { viewports: chromaticViewports } };
 
 export const WithLanguageChoice = Template.bind({});
 WithLanguageChoice.parameters = {