@kindly/react-chat 2.48.2 → 2.48.4

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

@@ -1,798 +0,0 @@
-import { expect } from '@storybook/jest';
-import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
-import MockDate from 'mockdate';
-import React from 'react';
-
-import { HANDLERS } from 'app/constants';
-
-import { chromaticViewports } from '../../../.storybook/preview';
-import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
-import mockMessage from '../../../testing/mockMessage';
-import settingsJSON from '../../assets/settingsJson';
-import withContainer from '../../decorators/withContainer';
-import withMockProvider from '../../decorators/withProvider';
-import wait from '../../utils/wait';
-
-MockDate.set(0);
-
-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',
-  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:
-            "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',
-        },
-        {
-          id: '2',
-          created,
-          message: 'What is the meaning of life?',
-          status: null,
-        },
-        {
-          session_id: '6061c1d4-54da-4886-85a2-7f555c9cd42c',
-          bot_id: 3875,
-          chat_id: '1',
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          reply_to_id: '2',
-          last_user_message_id: '2',
-          message:
-            'Well... I don\'t have a conclusive answer for what the meaning of life is, but here are some suggestions:\n<ul style="padding-left:12px;">\n<li>To live a good life\n<li>To spread love\n<li>42\n</ul>',
-          message_format: 'txt',
-          exchange_type: 'usersays',
-          exchange_id: '3',
-          title: 'The meaning of life',
-          created,
-          id: '3',
-        },
-      ],
-      messageSentTime: '2020-12-01T12:00:00.000Z',
-      lastMessageSeen: {
-        id: '3',
-        index: 3,
-      },
-    },
-  },
-};
-
-export const Regular = Template.bind({});
-Regular.parameters = {
-  ...defaultParameters,
-  chromatic: { viewports: chromaticViewports },
-};
-
-export const Announcement = Template.bind({});
-Announcement.args = {
-  type: 'WARNING',
-  text: 'You seem to be offline, please check your internet connection',
-  initialStateModifierFromArgs: ({ type, text }) => ({
-    ...defaultParameters.initialStateModifier,
-    announcement: {
-      show: true,
-      type,
-      text,
-    },
-  }),
-};
-Announcement.argTypes = {
-  type: {
-    options: ['WARNING', 'CRITICAL'],
-    control: {
-      type: 'select',
-    },
-  },
-};
-Announcement.parameters = {
-  botSettings: defaultBotSettings,
-};
-
-export const HiddenInput = Template.bind({});
-HiddenInput.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-      hideInputField: true,
-    },
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Here is a button',
-          message_format: 'txt',
-          buttons: [
-            {
-              id: '1',
-              button_type: 'quick_reply',
-              language_code: 'en',
-              label: 'Click here to continue',
-              value: 'clicked',
-              index: 0,
-              created,
-              is_active: true,
-            },
-          ],
-          created,
-          title: 'noinput',
-          chatbubble_hide_input_field: true,
-        },
-      ],
-    },
-  },
-};
-
-export const MimirBotMessage = Template.bind({});
-
-MimirBotMessage.storyName = 'Mimir Message';
-MimirBotMessage.parameters = {
-  ...defaultParameters,
-  botSettings: {
-    ...defaultBotSettings,
-    typing_duration: 0,
-  },
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-  },
-};
-
-MimirBotMessage.args = {
-  gptSearchResultText: settingsJSON.text.gpt_search_result_text.en,
-  gptTooltipDisclaimer: settingsJSON.text.gpt_tooltip_disclaimer.en,
-  initialStateModifierFromArgs: ({ gptSearchResultText, gptTooltipDisclaimer }) => {
-    return {
-      ...defaultParameters.initialStateModifier,
-      bot: {
-        text: {
-          gpt_search_result_text: {
-            en: gptSearchResultText,
-          },
-          gpt_tooltip_disclaimer: {
-            en: gptTooltipDisclaimer,
-          },
-        },
-      },
-      messages: {
-        chatMessages: [
-          {
-            from_bot: true,
-            sender: 'BOT',
-            handler: HANDLERS.MIMIR,
-            message: 'This is a message from Mimir, our KindlyGPT bot.',
-            created,
-            key: '1',
-            id: '1',
-          },
-        ],
-      },
-    };
-  },
-};
-
-MimirBotMessage.argTypes = {
-  gptSearchResultText: 'string',
-  gptTooltipDisclaimer: 'string',
-};
-
-MimirBotMessage.play = async ({ canvasElement }) => {
-  await within(canvasElement).findByTestId('chat-body-container');
-
-  const tooltip = await within(canvasElement).findByTestId('tooltip');
-  fireEvent.mouseEnter(tooltip);
-
-  const tooltipMessage = await within(canvasElement).findByTestId('tooltip-text');
-
-  expect(tooltipMessage).toBeInTheDocument();
-};
-
-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 message',
-};
-MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
-MultilineBotMessage.parameters = {
-  ...Regular.parameters,
-  botSettings: {
-    ...defaultBotSettings,
-    typing_duration: 0,
-  },
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          from_bot: true,
-          sender: 'BOT',
-          message: MESSAGES.single,
-          created,
-          id: '1',
-        },
-        {
-          from_bot: true,
-          sender: 'BOT',
-          message: MESSAGES.double,
-          created,
-          id: '2',
-        },
-        {
-          from_bot: true,
-          sender: 'BOT',
-          message: MESSAGES.multi,
-          created,
-          id: '3',
-        },
-        {
-          from_bot: false,
-          sender: 'USER',
-          message: MESSAGES.single,
-          created,
-          id: '1',
-        },
-        {
-          from_bot: false,
-          sender: 'USER',
-          message: MESSAGES.double,
-          created,
-          id: '2',
-        },
-        {
-          from_bot: false,
-          sender: 'USER',
-          message: MESSAGES.multi,
-          created,
-          id: '3',
-        },
-      ],
-    },
-  },
-};
-
-MultilineBotMessage.play = async ({ canvasElement }) => {
-  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
-  await within(canvasElement).findAllByText('Single-line lonely message');
-  // wait for the auto-scroll to execute
-  await wait(300);
-
-  // Some screen sizes won't have a scrollbar
-  const hasScrollbar = chatBody.scrollTop > 0;
-
-  if (hasScrollbar) {
-    fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
-
-    const chatNewMessage = await within(canvasElement).findByTestId('chat-new-message');
-    expect(chatNewMessage).not.toBeVisible();
-
-    await waitFor(
-      async () => {
-        await expect(chatNewMessage).toBeVisible();
-      },
-      { timeout: 5000 },
-    );
-  }
-};
-
-export const NewUnreadMessages = Template.bind({});
-NewUnreadMessages.parameters = MultilineBotMessage.parameters;
-NewUnreadMessages.play = async ({ canvasElement }) => {
-  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
-  // wait for the auto-scroll to execute
-  await wait(300);
-
-  // Some screen sizes won't have a scrollbar
-  const hasScrollbar = chatBody.scrollTop > 0;
-
-  if (hasScrollbar) {
-    fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
-    const chatNewMessage = await within(canvasElement).findByTestId('chat-new-message');
-
-    await waitFor(
-      async () => {
-        await expect(chatNewMessage).toBeVisible();
-      },
-      { timeout: 5000 },
-    );
-    mockMessage(window.store, 'This is a new message');
-
-    await waitFor(
-      async () => {
-        await expect(chatNewMessage).toHaveTextContent('This is a new message');
-      },
-      { timeout: 5000 },
-    );
-  }
-};
-
-export const GroupsOfMessages = Template.bind({});
-GroupsOfMessages.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          created,
-          message: 'Hipp',
-          status: null,
-        },
-        {
-          id: '2',
-          created,
-          message: 'Hipp',
-          status: null,
-        },
-        {
-          id: '3',
-          created,
-          message: 'Hurra!',
-          status: null,
-        },
-        {
-          id: '4',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Hipp',
-          created,
-        },
-        {
-          id: '5',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Hipp',
-          created,
-        },
-        {
-          id: '6',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Hurra!',
-          created,
-        },
-      ],
-    },
-  },
-};
-
-export const HandoverRequested = Template.bind({});
-HandoverRequested.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    agent: {
-      requestedTakeover: true,
-      takeoverClosed: false,
-    },
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          created,
-          message: 'Could I please talk with a human person?',
-          status: null,
-        },
-      ],
-    },
-  },
-};
-
-export const HandoverCancelled = Template.bind({});
-HandoverCancelled.parameters = HandoverRequested.parameters;
-HandoverCancelled.play = async ({ canvasElement }) => {
-  await within(canvasElement).findByText(defaultBotSettings.text.takeover_queue_text.en);
-  const leaveQueueButton = await within(canvasElement).findByText(defaultBotSettings.text.takeover_queue_link.en);
-  await userEvent.click(leaveQueueButton);
-  await within(canvasElement).findByText(defaultBotSettings.text.leave_queue_text.en);
-};
-
-export const Checkbox = Template.bind({});
-Checkbox.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Check out those checkboxes!',
-          message_format: 'txt',
-          buttons: [
-            {
-              id: '1',
-              button_type: 'checkbox',
-              language_code: 'en',
-              label: 'Checkbox label',
-              value: 'Checkbox value',
-              index: 0,
-              is_active: true,
-            },
-            {
-              id: '2',
-              button_type: 'checkbox',
-              language_code: 'en',
-              label: 'Checkbox label 2',
-              value: 'Checkbox value 2',
-              index: 1,
-              is_active: true,
-            },
-            {
-              id: '3',
-              button_type: 'submit',
-              language_code: 'en',
-              label: 'Submit',
-              index: 2,
-              is_active: true,
-            },
-          ],
-          created,
-        },
-      ],
-    },
-  },
-};
-
-export const Fallback = Template.bind({});
-Fallback.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          id: '0',
-          created,
-          message: 'What does recursive mean?',
-          status: null,
-        },
-        {
-          id: '1',
-          from_bot: true,
-          sender: 'BOT',
-          reply_to_message: 'What does recursive mean?',
-          message: "I didn't quite understand this.",
-          exchange_type: 'fallback_suggestion',
-          title: "I didn't quite understand this.",
-          chatbubble_hide_input_field: true,
-          handler: 'FALLBACK_SUGGESTION',
-          suggestions: [
-            {
-              preface: 'Did you mean:',
-              message: 'What does recursive mean?',
-              buttons: [
-                {
-                  id: '2',
-                  label: 'Yes',
-                  value: '1',
-                  button_type: 'suggestion_dialogue_trigger',
-                  is_active: true,
-                },
-                {
-                  id: '2',
-                  label: 'No',
-                  value: 'SUGGESTION_FALLBACK',
-                  exchange_id: 'SUGGESTION_FALLBACK',
-                  button_type: 'suggestion_dialogue_trigger',
-                  is_active: true,
-                },
-              ],
-            },
-          ],
-          created,
-        },
-        {
-          from_bot: true,
-          sender: 'BOT',
-          reply_to_message: '🙅 [Fallback suggestion dismissed by user]',
-          message:
-            "I'm having trouble understanding what you mean. Feel free to rephrase your question and remember that I understand short and precise sentences the best.",
-          exchange_type: 'fallback',
-          title: '🙅 [Fallback suggestion dismissed by user]',
-          handler: 'FALLBACK',
-          created,
-          id: '2',
-        },
-      ],
-    },
-  },
-};
-
-export const Slider = Template.bind({});
-Slider.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Slide me!',
-          message_format: 'txt',
-          buttons: [
-            {
-              id: '1',
-              button_type: 'slider',
-              language_code: 'en',
-              label: 'Choose a value between 1 and 42',
-              index: 0,
-              slider_details: {
-                id: '1',
-                from_value: 1,
-                to_value: 42,
-                step_value: 1,
-                value: 10,
-                affix: 'SUFFIX',
-                affix_value: '%',
-              },
-            },
-            {
-              id: '2',
-              button_type: 'submit',
-              language_code: 'en',
-              label: 'Submit',
-              value: '1',
-              index: 1,
-            },
-          ],
-          created,
-          title: 'slider',
-          id: '1',
-        },
-      ],
-    },
-  },
-};
-
-const videoSources = [
-  ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
-  ['Vimeo', 'https://vimeo.com/153882097'],
-  ['Self hosted', 'https://www.crockpot.se/wp-content/uploads/2019/02/Comp-1-1.mp4'],
-];
-export const VideoEmbed = Template.bind({});
-VideoEmbed.args = {
-  videoSource: videoSources[0][0],
-  videoSourceList: videoSources,
-  initialStateModifierFromArgs: ({ videoSource, videoSourceList }) => ({
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: 'Here is Video embed',
-          message_format: 'txt',
-          video_source: videoSourceList.find((videoSourceMap) => videoSourceMap[0] === videoSource)[1],
-          title: 'embed',
-          created,
-        },
-      ],
-    },
-  }),
-};
-VideoEmbed.argTypes = {
-  videoSource: {
-    options: videoSources.map((videoSource) => videoSource[0]),
-    control: { type: 'select' },
-  },
-  videoSourceList: {
-    table: {
-      disable: true,
-    },
-  },
-};
-VideoEmbed.parameters = {
-  botSettings: defaultBotSettings,
-};
-
-export const LeaveContactDetails = Template.bind({});
-LeaveContactDetails.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: "Let's get in touch!",
-          message_format: 'txt',
-          buttons: [
-            {
-              id: '1',
-              button_type: 'phone',
-              language_code: 'en',
-              label: 'Call us',
-              value: '69420',
-              index: 0,
-              is_active: true,
-            },
-            {
-              id: '2',
-              button_type: 'email',
-              language_code: 'en',
-              label: 'Email us',
-              value: "contact@kindly.ai?subject=Email%20from%20storybook&body=Don't%20send%20that!",
-              index: 1,
-              is_active: true,
-              email_details: {
-                id: '1',
-                subject: 'Email from storybook',
-                body: "Don't send that!",
-              },
-            },
-            {
-              id: '3',
-              button_type: 'contact_details',
-              label: 'Contact me back',
-              index: 2,
-              is_active: true,
-              contact_details: {
-                id: 'ae14453c-0156-40c9-a13a-0037f46bd14a',
-                contact_type: 'email',
-                label: 'Your email:',
-                edit_text: 'Edit email',
-                placeholder: 'me@example.com',
-              },
-            },
-          ],
-          title: 'Contacts',
-          created,
-        },
-      ],
-    },
-  },
-};
-LeaveContactDetails.play = async ({ canvasElement }) => {
-  const LeaveContactButton = await within(canvasElement).findByText(
-    LeaveContactDetails.parameters.initialStateModifier.messages.chatMessages[0].buttons[2].label,
-  );
-  await userEvent.click(LeaveContactButton);
-  const composer = await within(canvasElement).findByPlaceholderText(
-    LeaveContactDetails.parameters.initialStateModifier.messages.chatMessages[0].buttons[2].contact_details.placeholder,
-  );
-  await userEvent.type(composer, 'contact@example.com');
-  const submitButton = await within(canvasElement).getByTestId('send-contact-details-button');
-  await userEvent.click(submitButton);
-  const EditContactButton = await within(canvasElement).findByText(
-    LeaveContactDetails.parameters.initialStateModifier.messages.chatMessages[0].buttons[2].contact_details.edit_text,
-  );
-  await userEvent.click(EditContactButton);
-};
-
-export const MessageReference = Template.bind({});
-MessageReference.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    messages: {
-      chatMessages: [
-        {
-          ...defaultParameters.initialStateModifier.messages.chatMessages[2],
-          message: 'Kahoot: Fun quizzes, big learning.\n\nPlay, learn, Kahoot!',
-          message_references: [{ url: 'http://example.com', offset: 19 }],
-          from_bot: true,
-          handler: 'MIMIR',
-        },
-        {
-          ...defaultParameters.initialStateModifier.messages.chatMessages[1],
-        },
-        {
-          ...defaultParameters.initialStateModifier.messages.chatMessages[2],
-          message:
-            "As a player in a Kahoot game, you cannot hide the answers of other players 👪🏿🙈. The game is designed to display all answers on the host's screen and on individual player devices for transparency and fairness.",
-          message_references: [
-            {
-              url: 'http://example.com#1',
-              offset: 79,
-            },
-            {
-              url: 'http://example.com#2',
-              offset: 79,
-            },
-            {
-              url: 'http://example.com#3',
-              offset: 79,
-            },
-            {
-              url: 'http://example.com#2',
-              offset: 144,
-            },
-            {
-              url: 'http://example.com#4',
-              offset: 208,
-            },
-            {
-              url: 'http://example.com#1',
-              offset: 208,
-            },
-          ],
-          from_bot: true,
-          handler: 'MIMIR',
-        },
-      ],
-      messageSentTime: '2020-12-01T12:00:00.000Z',
-      lastMessageSeen: {
-        id: '3',
-        index: 3,
-      },
-    },
-  },
-};