@kindly/react-chat 2.42.1 → 2.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.42.1",
+  "version": "2.44.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -25,30 +25,26 @@
     "test-a11y": "Runs the storybook test-runner. Currently running only axe-core for a11y tests."
   },
   "browserslist": [
-    "> 1% in NO",
-    "not IE 11",
-    "not Edge 18"
+    ">0.2% in alt-eu",
+    ">0.2% in US",
+    "last 4 years",
+    "not dead",
+    "not OperaMini all",
+    "not Edge < 20"
   ],
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.15.4",
-    "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "dompurify": "^2.0.7",
-    "file-saver": "2.0.2",
-    "framer-motion": "^1.11.1",
-    "imagesloaded": "^4.1.4",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.pick": "^4.4.0",
     "phoenix-socket": "^1.2.3",
-    "polished": "^3.4.3",
     "prop-types": "^15.7.2",
     "react-children-utilities": "^2.8.0",
     "react-hook-form": "^7.43.1",
-    "react-idle-timer": "^4.2.12",
-    "react-redux": "^7.1.1",
-    "react-shadow": "^20.0.0",
-    "react-textarea-autosize": "^8.3.2",
+    "react-idle-timer": "^5.5.3",
+    "react-redux": "^8.0.5",
+    "react-textarea-autosize": "^8.4.0",
     "redux": "^4.0.4",
     "redux-localstorage": "^0.4.1",
     "redux-logger": "^3.0.6",
@@ -60,8 +56,8 @@
   "peerDependencies": {
     "pusher-js": ">=8.0.0",
     "pusher-redux": ">=0.5.0",
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
@@ -69,21 +65,21 @@
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-a11y": "^7.0.4",
-    "@storybook/addon-actions": "^7.0.4",
-    "@storybook/addon-essentials": "^7.0.4",
-    "@storybook/addon-interactions": "^7.0.4",
-    "@storybook/addon-links": "^7.0.4",
-    "@storybook/addon-mdx-gfm": "^7.0.4",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/addon-mdx-gfm": "^7.0.11",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.4",
-    "@storybook/react-webpack5": "^7.0.4",
+    "@storybook/react": "^7.0.11",
+    "@storybook/react-webpack5": "^7.0.11",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
-    "@types/react": "^16.14.35",
-    "@types/react-dom": "^16.9.18",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
@@ -102,20 +98,19 @@
     "jest-each": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-junit": "^15.0.0",
+    "jest-webpack-resolver": "^0.3.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.set": "^4.3.2",
     "process": "^0.11.10",
     "pusher-js": "^8.0.1",
     "pusher-redux": "^0.5.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-svg-loader": "^3.0.3",
-    "react-test-renderer": "16.14.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.4",
+    "storybook": "^7.0.11",
     "storybook-addon-mock": "^4.0.0",
     "url-loader": "^4.1.1",
-    "wait-on": "^6.0.1",
     "webpack": "^5.76.1",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
@@ -128,7 +123,25 @@
   "overrides": {
     "pusher-redux": {
       "pusher-js": "8.0.1"
+    },
+    "@storybook/react": {
+      "react-element-to-jsx-string": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+      }
+    },
+    "@storybook/addon-docs": {
+      "@mdx-js/react": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+      }
+    },
+    "@storybook/addon-actions": {
+      "react-inspector": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+      }
     }
   },
-  "gitHead": "b2f0e79ce5be18782b4c66075d1b9830205d4de9"
+  "gitHead": "20fdb46b7c44dd032e74a65f39a1cdfa25ac8236"
 }

package/stories/assets/settingsJson.js

@@ -162,7 +162,7 @@ export default {
   text: {
     placeholder: {
       en: 'Ask me a question…',
-      nb: 'Ask me a question…',
+      nb: 'Still meg et spørsmål…',
     },
     change_language_button: {
       en: 'Change language',
@@ -218,12 +218,6 @@ export default {
       nn: 'Tilbake til chat',
       sv: 'Tillbaka till chat',
     },
-    change_language_text: {
-      en: 'The chat will reset when you change the language',
-      nb: 'Når du endrer språk, starter samtalen på nytt',
-      nn: 'Når du endrer språk, starter samtalen på nytt',
-      sv: 'När du ändrar språk, startar samtalet på nytt',
-    },
     cancel_chat_text: {
       en: 'Would you like to cancel the chat?',
       nb: 'Vil du avslutte samtalen?',
@@ -296,6 +290,24 @@ export default {
       nn: 'Behold plassen i køen',
       sv: 'Behåll platsen i chattkön',
     },
+    gpt_search_result_text: {
+      nb: 'fant dette på nettsiden vår',
+      en: 'found this on our web page',
+      sv: 'hittade detta på vår hemsida',
+      nn: 'fann dette på nettsida vår',
+    },
+    gpt_search_text: {
+      nb: 'søker på nettsiden vår',
+      en: 'is searching our web page',
+      sv: 'söker på vår hemsida',
+      nn: 'søker på nettsida vår',
+    },
+    gpt_tooltip_disclaimer: {
+      nb: 'Dette svaret er generert basert på innhold fra nettsiden vår.',
+      en: 'This reply is generated based on content from our web page.',
+      sv: 'Detta svar är genererat baserat på innehållet från vår hemsida',
+      nn: 'Dette svaret er generert basert på innhald frå nettsida vår.',
+    },
   },
   nudges: {
     form_nudges: [

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

@@ -0,0 +1,174 @@
+import { userEvent, within } from '@storybook/testing-library';
+import React from 'react';
+
+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/Chat/Composer',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const todayTime = new Date();
+todayTime.setHours(13);
+todayTime.setMinutes(37);
+const created = todayTime.toISOString();
+
+const defaultParameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          session_id: '1',
+          bot_id: 1234,
+          chat_id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Why did the calendar get in trouble at work?',
+          message_format: 'txt',
+          exchange_type: 'greeting',
+          exchange_id: '1',
+          reply_type: 'STANDARD',
+          created,
+          id: '1',
+        },
+        {
+          id: '2',
+          created,
+          message: 'Because it took a day off!',
+          status: null,
+        },
+      ],
+      messageSentTime: '2020-12-01T12:00:00.000Z',
+      lastMessageSeen: {
+        id: '2',
+        index: 2,
+      },
+    },
+  },
+};
+
+export const BelowInputLimit = Template.bind({});
+BelowInputLimit.parameters = {
+  ...defaultParameters,
+  botSettings: {
+    ...defaultBotSettings,
+    chatbubble: {
+      ...defaultBotSettings.chatbubble,
+      input_limit_enabled: true,
+      input_limit: 120,
+    },
+  },
+};
+BelowInputLimit.args = {
+  inputLimit: 100,
+  initialStateModifierFromArgs: ({ inputLimit }) => ({
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    bot: {
+      inputLimit,
+    },
+  }),
+};
+BelowInputLimit.argTypes = {
+  inputLimit: {
+    control: { type: 'range', min: 60, max: 200, step: 20, defaultValue: 140 },
+  },
+};
+
+BelowInputLimit.play = async ({ canvasElement }) => {
+  const composer = await within(canvasElement).findByPlaceholderText(defaultBotSettings.text.placeholder.en);
+  await userEvent.type(composer, 'Once upon a time, there was a mischievous dragon named Lorem.');
+};
+
+export const AboveInputLimit = Template.bind({});
+AboveInputLimit.parameters = {
+  ...defaultParameters,
+  botSettings: {
+    ...defaultBotSettings,
+    chatbubble: {
+      ...defaultBotSettings.chatbubble,
+      input_limit_enabled: true,
+      input_limit: 120,
+    },
+  },
+};
+AboveInputLimit.args = {
+  inputLimit: 100,
+  initialStateModifierFromArgs: ({ inputLimit }) => ({
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    bot: {
+      inputLimit,
+    },
+  }),
+};
+AboveInputLimit.argTypes = {
+  inputLimit: {
+    control: { type: 'range', min: 60, max: 200, step: 20, defaultValue: 140 },
+  },
+};
+
+AboveInputLimit.play = async ({ canvasElement }) => {
+  const composer = await within(canvasElement).findByPlaceholderText(defaultBotSettings.text.placeholder.en);
+  await userEvent.type(
+    composer,
+    'Once upon a time, in a land far, far away, there was a mischievous dragon named Lorem who loved to eat apples and play pranks on the villagers.',
+  );
+};
+
+export const NoInputLimit = Template.bind({});
+NoInputLimit.parameters = {
+  ...defaultParameters,
+  botSettings: {
+    ...defaultBotSettings,
+    chatbubble: {
+      ...defaultBotSettings.chatbubble,
+      input_limit_enabled: false,
+      input_limit: 100,
+    },
+  },
+};
+NoInputLimit.play = async ({ canvasElement }) => {
+  const composer = await within(canvasElement).findByPlaceholderText(defaultBotSettings.text.placeholder.en);
+  await userEvent.type(
+    composer,
+    'Once upon a time, in a land far, far away, there was a mischievous dragon named Lorem who loved to eat apples and play pranks on the villagers. One day, a brave knight named Ipsum arrived in the village, seeking to slay the dragon and win the heart of the fair princess.',
+  );
+};

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

@@ -0,0 +1,184 @@
+import React from 'react';
+
+import { DEFAULT_ALERT_TYPES } from '../../../src/constants';
+import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
+import { showInChatNotification } from '../../../src/state/actions';
+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/Chat/Notifications',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Maintenance = Template.bind({});
+Maintenance.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    bot: {
+      maintenanceAlert: {
+        alert_enabled: true,
+        link_text: { en: 'Click here to learn more', nb: '', nn: '', sv: '' },
+        link_location: { en: 'https://example.com', nb: '', nn: '', sv: '' },
+        text_content: { en: 'Maintenance!', nb: '', nn: '', sv: '' },
+      },
+      maintenanceAlertEnabled: true,
+    },
+  },
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+WithIcon.play = async () => {
+  const notification = {
+    content: 'I detected english and switched language. Go to [settings](#settings/language-select) to switch back.',
+    icon: 'language',
+  };
+  window.store.dispatch(showInChatNotification(notification, Math.random()));
+};
+
+export const WithIconAndButton = Template.bind({});
+WithIconAndButton.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+WithIconAndButton.play = async () => {
+  const notification = {
+    content: 'I am a notification',
+    buttonHref: 'https://example.com',
+    buttonText: 'Click me',
+    icon: 'language',
+  };
+  window.store.dispatch(showInChatNotification(notification, Math.random()));
+};
+
+export const StackedNotifications = Template.bind({});
+StackedNotifications.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+StackedNotifications.play = async () => {
+  const notifications = [
+    {
+      content: 'I am a notification',
+      buttonHref: 'https://example.com',
+      buttonText: 'Click me',
+    },
+    {
+      content: 'With a long text that will wrap. I am a notification. I am long. Maybe too long?',
+      buttonHref: 'https://example.com',
+      buttonText: 'With a long text that will wrap. I am a notification. I am long. Maybe too long?',
+    },
+    {
+      content: 'Without a button',
+    },
+  ];
+  notifications.forEach((notification) => {
+    window.store.dispatch(showInChatNotification(notification, Math.random()));
+  });
+  let i = 0;
+  const { store } = window;
+  const interval = setInterval(() => {
+    store.dispatch(showInChatNotification(notifications[(i + 1) % notifications.length], Math.random()));
+    i += 1;
+    if (window.store !== store) {
+      clearInterval(interval);
+    }
+  }, [4000]);
+};
+
+export const OnWelcomePage = Template.bind({});
+OnWelcomePage.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: false,
+      currentLanguage: 'en',
+    },
+  },
+};
+
+OnWelcomePage.play = async () => {
+  const notifications = [
+    {
+      content: 'I am a notification',
+      buttonHref: 'https://example.com',
+      buttonText: 'Click me',
+    },
+  ];
+  notifications.forEach((notification) => {
+    window.store.dispatch(showInChatNotification(notification, Math.random()));
+  });
+};
+
+export const QuickSetting = Template.bind({});
+QuickSetting.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+
+QuickSetting.play = async () => {
+  const notifications = [
+    {
+      content:
+        'I detected [english](and) switched language. Go to [settings](#settings/language-select) to switch back.',
+    },
+  ];
+  notifications.forEach((notification) => {
+    window.store.dispatch(showInChatNotification(notification, DEFAULT_ALERT_TYPES.LANGUAGE_SWITCH));
+  });
+};

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

@@ -0,0 +1,143 @@
+import React from 'react';
+
+import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
+import settingsJSON from '../../assets/settingsJson';
+import withContainer from '../../decorators/withContainer';
+import withMockProvider from '../../decorators/withProvider';
+
+const todayTime = new Date();
+todayTime.setHours(13);
+todayTime.setMinutes(37);
+const created = todayTime.toISOString();
+
+const defaultBotSettings = {
+  welcomePage: settingsJSON.welcome_page,
+  feedbackForm: settingsJSON.feedback_form,
+  maintenanceAlert: settingsJSON.maintenance_alert,
+  ...settingsJSON.settings,
+  ...settingsJSON,
+};
+
+const defaultParameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          session_id: '1',
+          bot_id: 1234,
+          chat_id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message:
+            "Hi! I'm Kindly's Chatbot. I can answer questions about Kindly and our services. How can I help you? 🙂\n<br>\n<br>Feel free to ask me a short and concise question!",
+          message_format: 'txt',
+          exchange_type: 'greeting',
+          exchange_id: '1',
+          reply_type: 'STANDARD',
+          created,
+          id: '1',
+        },
+      ],
+      messageSentTime: '2020-12-01T12:00:00.000Z',
+      lastMessageSeen: {
+        id: '3',
+        index: 3,
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Screen/Chat/TypingIndicator',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+function Template(args, context) {
+  return <KindlyChatButton {...args} {...context} />;
+}
+
+export const BotTypingIndicator = Template.bind({});
+
+BotTypingIndicator.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '2',
+          created,
+          message: 'What is the meaning of life?',
+          status: null,
+        },
+      ],
+    },
+    bot: {
+      isTyping: true,
+    },
+  },
+};
+
+export const MimirTypingIndicator = Template.bind({});
+
+MimirTypingIndicator.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          created,
+          message: 'What is the meaning of life?',
+          status: null,
+        },
+      ],
+    },
+  },
+};
+
+MimirTypingIndicator.args = {
+  text: settingsJSON.text.gpt_search_text.en,
+  initialStateModifierFromArgs: ({ text }) => {
+    return {
+      ...defaultParameters.initialStateModifier,
+      bot: {
+        isMimirTyping: true,
+        text: {
+          gpt_search_text: {
+            en: text,
+          },
+        },
+      },
+    };
+  },
+};
+
+MimirTypingIndicator.argTypes = {
+  text: 'string',
+};