@kindly/react-chat 2.42.1 → 2.43.0

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

@@ -2,7 +2,7 @@ import { expect } from '@storybook/jest';
 import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
 import React from 'react';
 
-import { IMAGE_WIDTH } from 'app/constants';
+import { HANDLERS, IMAGE_WIDTH } from 'app/constants';
 
 import { chromaticViewports } from '../../../.storybook/preview';
 import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
@@ -135,49 +135,6 @@ Annoucement.parameters = {
   botSettings: defaultBotSettings,
 };
 
-export const BotIsTyping = Template.bind({});
-BotIsTyping.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 Maintenance = Template.bind({});
-Maintenance.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    maintenanceAlert: {
-      show: true,
-      textContent: 'Maintenance mode!',
-      linkText: 'Click here to know more',
-      linkLocation: 'https://example.com',
-    },
-  },
-};
-
 export const Announcement = Template.bind({});
 Announcement.parameters = {
   botSettings: defaultBotSettings,
@@ -237,6 +194,69 @@ HiddenInput.parameters = {
   },
 };
 
+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: false,
+            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',
@@ -300,6 +320,7 @@ MultilineBotMessage.parameters = {
     },
   },
 };
+
 MultilineBotMessage.play = async ({ canvasElement }) => {
   const chatBody = await within(canvasElement).findByTestId('chat-body-container');
   await within(canvasElement).findAllByText('Single-line lonely message');

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

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
+import { OPTION_VIEW } from '../../src/features/OptionsScreen/constants';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
 import withMockProvider from '../decorators/withProvider';
@@ -32,7 +33,7 @@ const defaultParameters = {
       active: true,
       chatHasStarted: true,
       currentLanguage: 'en',
-      optionsScreenOpen: true,
+      optionsScreenView: OPTION_VIEW.GENERIC,
     },
   },
 };
@@ -74,7 +75,7 @@ WithLanguageChoice.parameters = {
       active: true,
       chatHasStarted: true,
       currentLanguage: 'en',
-      optionsScreenOpen: true,
+      optionsScreenView: OPTION_VIEW.GENERIC,
     },
   },
 };
@@ -145,7 +146,7 @@ LanguageChoice.args = {
       active: true,
       chatHasStarted: true,
       currentLanguage: 'en',
-      optionsScreenOpen: true,
+      optionsScreenView: OPTION_VIEW.LANGUAGE_SELECT,
     },
     bot: {
       languages: availableLanguages.slice(0, languageQuantity),
@@ -162,10 +163,6 @@ LanguageChoice.parameters = {
     ...defaultBotSettings,
   },
 };
-LanguageChoice.play = async ({ canvasElement }) => {
-  const languageButton = await within(canvasElement).findByText(defaultBotSettings.text.change_language_button.en);
-  await userEvent.click(languageButton);
-};
 
 export const LanguageChoiceConfirm = Template.bind({});
 LanguageChoiceConfirm.args = {
@@ -175,8 +172,6 @@ LanguageChoiceConfirm.args = {
 LanguageChoiceConfirm.argTypes = LanguageChoice.argTypes;
 LanguageChoiceConfirm.parameters = LanguageChoice.parameters;
 LanguageChoiceConfirm.play = async ({ canvasElement }) => {
-  const languageButton = await within(canvasElement).findByText(defaultBotSettings.text.change_language_button.en);
-  await userEvent.click(languageButton);
   const norskButton = await within(canvasElement).findByText(availableLanguages[1].name);
   await userEvent.click(norskButton);
 };