@kindly/react-chat 2.39.2 → 2.39.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.39.2",
+  "version": "2.39.5",
   "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": "db6fb43b558e667bb6c3124f3e0447bb403592d1"
+  "gitHead": "cff703081966dda917c36b8c8dc60d42e3e61cec"
 }

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

@@ -1,6 +1,7 @@
+import { expect } from '@storybook/jest';
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/prop-types */
-import { screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
@@ -268,6 +269,22 @@ MultilineBotMessage.parameters = {
     },
   },
 };
+MultilineBotMessage.play = async () => {
+  const chatBody = await screen.findByTestId('chat-body-container');
+  await screen.findAllByText('Single-line lonely message');
+  // wait for the auto-scroll to execute
+  await new Promise((resolve) => {
+    setTimeout(resolve, 10);
+  });
+  fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+  const chatNewMessage = await screen.findByTestId('chat-new-message');
+  await waitFor(
+    async () => {
+      await expect(chatNewMessage).toBeVisible();
+    },
+    { timeout: 5000 },
+  );
+};
 
 export const GroupsOfMessages = Template.bind({});
 GroupsOfMessages.parameters = {
@@ -687,191 +704,70 @@ Form.parameters = {
           message_format: 'txt',
           buttons: [],
           created: '2022-06-15T19:03:46.186495Z',
-          title: '',
           id: '1',
           form: {
-            id: 'dddsauhi',
-            dialogue_id: 'ddda',
-            slug: 'ddas', // Auto generated by the backend, possibly humanly readable and unique
+            submission_id: '1',
+            id: '2',
+            dialogue_id: '2',
+            slug: 'this-is-a-form',
             submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
             abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            texts: [
-              {
-                id: 'hoho',
-                languageCode: 'en',
-                title: 'Form Title',
-                abandon_dialogue_message: 'Form exited, please ask something else',
-                unanswered_dialogue_message: 'Form unanswered',
-                cancel_button_text: 'Cancel',
-                send_button_text: 'Submit',
-              },
-            ],
+            languageCode: 'en',
+            texts: {
+              title: 'This is a form',
+              error_text: 'There was an error around here',
+              submit_button_text: 'Submit',
+              cancel_button_text: 'Exit',
+              unanswered_text: 'You failed to answer this form',
+              cancel_text: 'You have cancelled/exited this form',
+            },
             fields: [
               {
-                type: 'text',
+                input_type: 'text',
                 order: 0,
-                slug: 'gigi', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'gfd',
-                    languageCode: 'en',
-                    label: 'Name',
-                    placeholder: 'Your name',
-                    helper_text: 'Please fill in your full name here',
-                  },
-                ],
+                slug: 'first-name-field',
+                texts: {
+                  label: 'First name',
+                  help_text: 'Please input your name here',
+                  placeholder_text: 'First name',
+                  required_text: 'This field is absolutely required',
+                },
+                required: true,
                 validators: [
                   {
-                    required: true,
-                    texts: [
-                      {
-                        id: 'gruh',
-                        languageCode: 'en',
-                        message: undefined,
-                      },
-                    ],
-                  },
-                  {
-                    maxLength: 30,
-                    texts: [
-                      {
-                        id: 'duh',
-                        languageCode: 'en',
-                        message: 'Maximum number of length is 30',
-                      },
-                    ],
+                    max_length: 30,
+                    texts: 'Maximum number of length is 30',
                   },
                 ],
               },
               {
-                type: 'email',
+                input_type: 'text',
                 order: 1,
-                slug: 'bras', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'tigg',
-                    languageCode: 'en',
-                    label: 'Email',
-                    placeholder: 'Your email',
-                    helper_text: 'Please fill in your email address here so we can contact you',
-                  },
-                ],
+                slug: 'text-field',
+                texts: {
+                  label: 'Text field',
+                  placeholder_text: 'Free text',
+                  required_text: 'This field is required',
+                },
+                required: true,
                 validators: [
                   {
-                    required: true,
-                    texts: [
-                      {
-                        id: 'gigu',
-                        languageCode: 'en',
-                        message: 'This field is required',
-                      },
-                    ],
+                    min_length: 5,
+                    text: 'This field should be at least 5 characters long',
                   },
                   {
-                    pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.toString(),
-                    texts: [
-                      {
-                        id: 'dada',
-                        languageCode: 'en',
-                        message: 'Please provide valid email',
-                      },
-                    ],
+                    max_length: 15,
                   },
                 ],
               },
               {
-                type: 'range',
+                input_type: 'email',
                 order: 2,
-                affix: 'PREFIX',
-                min: 10,
-                max: 100,
-                step: 10,
-                slug: 'yoyo', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'blabla',
-                    languageCode: 'en',
-                    label: 'Please select a value',
-                    helper_text: 'Please fill in your full name here',
-                    affix_value: '$',
-                  },
-                ],
-                validators: [],
-              },
-              {
-                type: 'checkbox', // not included in the v1
-                order: 3,
-                slug: 'dodo', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'gogo',
-                    languageCode: 'en',
-                    label: 'What animals do you like?',
-                    helper_text: '',
-                  },
-                ],
-                list: [
-                  {
-                    slug: 'hhh', // Not sure if this needs one
-                    value: 'cows',
-                    order: 0,
-                    texts: [
-                      {
-                        id: 'gras',
-                        languageCode: 'en',
-                        label: 'I like cows',
-                      },
-                    ],
-                  },
-                  {
-                    slug: 'ddsad',
-                    value: 'snakes',
-                    order: 1,
-                    texts: [
-                      {
-                        id: 'grq',
-                        languageCode: 'en',
-                        label: 'I like snakes',
-                      },
-                    ],
-                  },
-                  {
-                    slug: 'abv',
-                    value: 'foxes',
-                    order: 2,
-                    texts: [
-                      {
-                        id: 'abc',
-                        languageCode: 'en',
-                        label: 'I like foxes',
-                      },
-                    ],
-                  },
-                  {
-                    slug: '213',
-                    value: 'owls',
-                    order: 3,
-                    texts: [
-                      {
-                        id: '321',
-                        languageCode: 'en',
-                        label: 'I like owls',
-                      },
-                    ],
-                  },
-                ],
-                validators: [
-                  {
-                    required: true,
-                    texts: [
-                      {
-                        id: '432',
-                        languageCode: 'en',
-                        message: 'This field is required',
-                      },
-                    ],
-                  },
-                ],
+                slug: 'email-field',
+                texts: {
+                  label: 'Email',
+                  placeholder_text: 'Email',
+                },
               },
             ],
           },
@@ -880,6 +776,24 @@ Form.parameters = {
     },
   },
 };
+Form.play = async () => {
+  await screen.findByText('Please input your name here');
+  const textPlaceholderValue = 'Free text';
+  const textInput = await screen.findByPlaceholderText(textPlaceholderValue);
+  await userEvent.type(textInput, 'This');
+  await expect(textInput.value).toBe('This');
+  await fireEvent(await screen.getByRole('button', { name: /submit/i }), new MouseEvent('click'));
+  await screen.findByText('This field is absolutely required');
+  await screen.findByText('This field should be at least 5 characters long');
+  const textInputStyle = window.getComputedStyle(textInput);
+  expect(textInputStyle.border).not.toContain('#00000000');
+  expect(textInputStyle.border).not.toContain('transparent');
+  await userEvent.type(textInput, ' is too long');
+  await expect(textInput.value).toBe('This is too lon');
+  const emailPlaceholderValue = 'Email';
+  const emailInput = await screen.findByPlaceholderText(emailPlaceholderValue);
+  await userEvent.type(emailInput, 'this@is@not@an@email');
+};
 
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {