@kindly/react-chat 2.36.1 → 2.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.36.1",
+  "version": "2.37.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -39,6 +39,8 @@
     "phoenix-socket": "^1.2.3",
     "polished": "^3.4.3",
     "prop-types": "^15.7.2",
+    "react-children-utilities": "^2.8.0",
+    "react-hook-form": "^7.32.2",
     "react-idle-timer": "^4.2.12",
     "react-redux": "^7.1.1",
     "react-shadow": "^18.0.1",
@@ -57,29 +59,29 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-runtime": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
     "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.5",
     "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.20.4",
-    "chromatic": "^6.5.6",
+    "browserslist": "^4.21.3",
+    "chromatic": "^6.7.4",
     "clean-webpack-plugin": "^3.0.0",
     "compression": "1.7.4",
     "dotenv": "8.6.0",
@@ -113,5 +115,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "f3a449ac06dd323091262d35750b73a70c541b97"
+  "gitHead": "6cabd3905e7342d5c4a69ba24c30d59eac9969fb"
 }

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

@@ -186,6 +186,12 @@ HiddenInput.parameters = {
 };
 
 export const MultilineBotMessage = Template.bind({});
+const MESSAGES = {
+  single: 'Single-line lonely message',
+  double: "Double-line message \n\n vibin'",
+  multi: 'This is a \n\n three-multiline \n\n bot message',
+};
+MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
 MultilineBotMessage.parameters = {
   ...Regular.parameters,
   initialStateModifier: {
@@ -195,10 +201,45 @@ MultilineBotMessage.parameters = {
         {
           from_bot: true,
           sender: 'BOT',
-          message: 'This is a \n\n multiline \n\n bot message',
+          message: MESSAGES.single,
           created: '2022-06-09T18:46:51.672Z',
           id: '1',
         },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: MESSAGES.double,
+          created: '2022-06-09T18:47:51.672Z',
+          id: '2',
+        },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: MESSAGES.multi,
+          created: '2022-06-09T18:48:51.672Z',
+          id: '3',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.single,
+          created: '2022-06-09T18:46:51.672Z',
+          id: '1',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.double,
+          created: '2022-06-09T18:47:51.672Z',
+          id: '2',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.multi,
+          created: '2022-06-09T18:48:51.672Z',
+          id: '3',
+        },
       ],
     },
   },
@@ -530,6 +571,216 @@ Slider.parameters = {
   },
 };
 
+export const Form = Template.bind({});
+Form.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: '',
+          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
+            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',
+              },
+            ],
+            fields: [
+              {
+                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',
+                  },
+                ],
+                validators: [
+                  {
+                    required: true,
+                    texts: [
+                      {
+                        id: 'gruh',
+                        languageCode: 'en',
+                        message: 'This field is required',
+                      },
+                    ],
+                  },
+                  {
+                    maxLength: 30,
+                    texts: [
+                      {
+                        id: 'duh',
+                        languageCode: 'en',
+                        message: 'Maximum number of length is 30',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: 'email',
+                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',
+                  },
+                ],
+                validators: [
+                  {
+                    required: true,
+                    texts: [
+                      {
+                        id: 'gigu',
+                        languageCode: 'en',
+                        message: 'This field is required',
+                      },
+                    ],
+                  },
+                  {
+                    pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.toString(),
+                    texts: [
+                      {
+                        id: 'dada',
+                        languageCode: 'en',
+                        message: 'Please provide valid email',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: 'range',
+                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',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {
   ...Regular.parameters,

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

@@ -5,7 +5,6 @@ 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';