@kindly/react-chat 2.42.1 → 2.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.42.1",
+  "version": "2.43.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -69,15 +69,15 @@
     "@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",
@@ -112,7 +112,7 @@
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "16.14.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",
@@ -130,5 +130,5 @@
       "pusher-js": "8.0.1"
     }
   },
-  "gitHead": "b2f0e79ce5be18782b4c66075d1b9830205d4de9"
+  "gitHead": "28c0dccea41ef182224bdbabcd66c85444e81220"
 }

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',
+};