@kindly/react-chat 2.48.2 → 2.48.4

package/stories/assets/settingsJson.js

@@ -1,472 +0,0 @@
-export default {
-  style: {
-    color_chat_log_elements: '#333333',
-    color_button_background: '#0069ff',
-    color_button_outline: '#FF0000',
-    color_bubble_button_background: '#0069ff',
-    color_button_text: '#ffffff',
-    color_background: '#ffffff',
-    color_header_background: '#0069ff',
-    color_header_text: '#ffffff',
-    color_input_background: '#edeeef',
-    color_input_text: '#333333',
-    color_user_message_background: '#0069ff',
-    color_user_message_text_color: '#ffffff',
-    color_bot_message_background: '#f5f5f5',
-    color_bot_message_text_color: '#2c2c2c',
-  },
-  notifications: {
-    tab_notification: true,
-    sound_notification: true,
-    bubble_notification: true,
-    use_push_greetings: true,
-    push_greetings: [],
-  },
-  welcome_page: {
-    image: null,
-    type: 'COLOR',
-    header: {
-      en: 'Hi, welcome to our chatbot!',
-      nb: 'Hei, velkommen til chatboten vår!',
-      nn: 'Hei, velkommen til chatboten vår!',
-      sv: 'Hej, välkommen till vår chatbot!',
-    },
-    text: {
-      en: '<p>Our chatbot is trained to answer questions about our product, but is continuously learning.\nTry to make your questions as precise as possible.\nDo not provide the chatbot with any personal information.</p>',
-      nb: '<p>Chatboten vår er opplært til å svare på det meste om  produktet vårt, og lærer kontinuerlig.\nStill helst korte og presise spørsmål.\nIkke oppgi sensitiv informasjon i chatten.</p>',
-      nn: '<p>Chatboten vår er opplært til å svare på det meste om  produktet vårt, og lærer kontinuerlig.\nStill helst korte og presise spørsmål.\nIkke oppgi sensitiv informasjon i chatten.</p>',
-      sv: '<p>Vår chatbot är tränad för att hjälpa dig med de frågor du har om vår produkt, och lärer kontinuerligt.\nStäll korta och precisa frågor.\nGe inte chatboten personlig information.</p>',
-    },
-    start_button: {
-      en: 'Start chat',
-      nb: 'Start chat',
-      nn: 'Start chat',
-      sv: 'Start chat',
-    },
-  },
-  feedback_form: {
-    type: 'EMOJIS',
-    freeform_enabled: true,
-    binary_headline: {
-      en: 'Did you find what you were looking for?',
-      nb: 'Fikk du svar på det du lurte på?',
-      nn: 'Fekk du svar på det du lurte på?',
-      sv: 'Fick du svar på dina frågor?',
-    },
-    binary_1: {
-      en: 'Yes',
-      nb: 'Ja',
-      nn: 'Ja',
-      sv: 'Ja',
-    },
-    binary_0: {
-      en: 'No',
-      nb: 'Nei',
-      nn: 'Nei',
-      sv: 'Nej',
-    },
-    emoji_headline: {
-      en: 'Rate the conversation',
-      nb: 'Vurder samtalen',
-      nn: 'Vurder samtalen',
-      sv: 'Utvärdera samtalet',
-    },
-    emoji_guideline: {
-      en: 'Click on a smiley to give your opinion.',
-      nb: 'Klikk på et smilefjes for å gi din tilbakemelding.',
-      nn: 'Klikk på eit smilefjes for å gi ei tilbakemelding.',
-      sv: 'Klicka på en smiley för att ge din feedback.',
-    },
-    freeform_description: {
-      en: 'We would love to hear your opinion of the conversation, so that we can improve the experience!',
-      nb: 'Gi gjerne en tilbakemelding på samtalen, slik at vi kan gjøre opplevelsen bedre!',
-      nn: 'Gi gjerne ei tilbakemelding på samtalen, slik at vi kan gjere opplevinga betre!',
-      sv: 'Hjälp oss förbättra samtalsupplevelsen. Vi tar gärna emot dina synpunkter.',
-    },
-    freeform_placeholder: {
-      en: 'Write here',
-      nb: 'Skriv her',
-      nn: 'Skriv her',
-      sv: 'Skriv här',
-    },
-    back: {
-      en: 'Back to chat',
-      nb: 'Tilbake til chat',
-      nn: 'Tilbake til chat',
-      sv: 'Tillbaka till chatten',
-    },
-    send: {
-      en: 'Send',
-      nb: 'Send',
-      nn: 'Send',
-      sv: 'Skicka',
-    },
-    thanks: {
-      en: 'Thank you very much!',
-      nb: 'Tusen takk for hjelpen!',
-      nn: 'Tusen takk for hjelpa!',
-      sv: 'Tusen tack för ditt svar!',
-    },
-    external_link_headline: {
-      en: 'Did you find what you were looking for?',
-      nb: 'Fikk du svar på det du lurte på?',
-      nn: 'Fekk du svar på det du lurte på?',
-      sv: 'Fick du svar på det du undrade över?',
-    },
-    external_link_text: {
-      en: 'Give feedback',
-      nb: 'Gi tilbakemelding',
-      nn: 'Gje tilbakemelding',
-      sv: 'Ge synpunkter',
-    },
-    external_link_url: {},
-  },
-  chatbubble: {
-    domains: ['*'],
-    key: 'a74ed93d-2690-4d0c-92bf-7ee84578e43d',
-    realtime_analytics: true,
-    heartbeat_enabled: false,
-    heartbeat_ttl_s: 60,
-    persist_state: true,
-    persist_state_lifespan_seconds: -1,
-    autopopup: false,
-    autopopup_time: 10000,
-    keep_open: false,
-    keep_open_mobile: false,
-    input_limit_enabled: true,
-    input_limit: 140,
-    auth_public_key:
-      '-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyREU15viox0kxWLPQlv6\n8P0rwpyhO5GDLQLU4SalIFr5mNP7gS+mYiKBhOxfsEBGASWp3GlltxeSKN8YsE9k\nsTUvgA/8fDhTDzZ2B+UYD24ANGj+WzbnqDXWRXEL62Nq6NtLEE0hl7H+56klsqo8\nMqeABV9No35fhhwWAPJNi0HnLoGQonn7QbAMNsOTHvuIZcnyyVWbMz4Y66Rn2LF+\nc+5/oetnEQmUXoc/HF+jo8Dh2I3/6Z0y3QqK+xZbiw7jYyuxkvEeWOP9J94Ql2qT\n1AUsA0cF0/W7sGVv7l84htuFJxdtS1gHu6a53Kmh1qZKMZwPdYoQsLKsIhMj8Omg\nwwIDAQAB\n-----END PUBLIC KEY-----',
-  },
-  maintenance_alert: {
-    alert_enabled: false,
-    link_text: {
-      en: '',
-      nb: '',
-      nn: '',
-      sv: '',
-    },
-    link_location: {
-      en: '',
-      nb: '',
-      nn: '',
-      sv: '',
-    },
-    text_content: {
-      en: '',
-      nb: '',
-      nn: '',
-      sv: '',
-    },
-  },
-  text: {
-    placeholder: {
-      en: 'Ask me a question…',
-      nb: 'Still meg et spørsmål…',
-    },
-    change_language_button: {
-      en: 'Change language',
-      nb: 'Endre språk',
-      nn: 'Endre språk',
-      sv: 'Ändra språk',
-    },
-    start_over_button: {
-      en: 'Start over',
-      nb: 'Start på nytt',
-      nn: 'Start på nytt',
-      sv: 'Börja om',
-    },
-    download_button: {
-      en: 'Download chat',
-      nb: 'Last ned samtale',
-      nn: 'Last ned samtalen',
-      sv: 'Ladda ner samtalet',
-    },
-    delete_button: {
-      en: 'Delete chat log',
-      nb: 'Slett chatloggen',
-      nn: 'Slett chatloggen',
-      sv: 'Radera chatloggen',
-    },
-    delete_text: {
-      en: 'Are you sure you want to delete the chat log?',
-      nb: 'Er du sikker på at du vil slette chatloggen?',
-      nn: 'Er du sikker på at du vil sletta chatloggen?',
-      sv: 'Är du säker på att du vill radera chatloggen?',
-    },
-    download_format_text: {
-      en: 'Select the format best suited for you. Not sure? Choose HTML.',
-      nb: 'Velg formatet som passer deg best. Er du usikker, velg HTML.',
-      nn: 'Velg formatet som passar deg best. Er du usikker, velg HTML.',
-      sv: 'Välj vilket format som passar dig bäst. Är du osäker, välj HTML',
-    },
-    chat_deleted_header: {
-      en: 'Your chat has been deleted.',
-      nb: 'Samtalen din er slettet.',
-      nn: 'Din samtale er no sletta.',
-      sv: 'Ditt samtal är raderat.',
-    },
-    chat_deleted_text: {
-      en: 'The chat closes automatically. Click on the chat bubble to start a new conversation.',
-      nb: 'Chatten avsluttes automatisk. Klikk på chatboblen for å starte en ny samtale.',
-      nn: 'Chatten blir automatisk avslutta. Klikk på chatbobla for å starte ein ny samtale.',
-      sv: 'Chatten avslutas automatiskt. Tryck på chattbubblan för att starta ett nytt samtal.',
-    },
-    back_to_chat_button: {
-      en: 'Return to chat',
-      nb: 'Tilbake til chat',
-      nn: 'Tilbake til chat',
-      sv: 'Tillbaka till chat',
-    },
-    cancel_chat_text: {
-      en: 'Would you like to cancel the chat?',
-      nb: 'Vil du avslutte samtalen?',
-      nn: 'Vil du avslutta samtalen?',
-      sv: 'Vill du avsluta samtalet?',
-    },
-    cancel_chat_button: {
-      en: 'Cancel chat',
-      nb: 'Avslutt samtale',
-      nn: 'Avslutt samtalen',
-      sv: 'Avsluta samtalet',
-    },
-    confirm_action_button: {
-      en: 'Confirm',
-      nb: 'Bekreft',
-      nn: 'Bekreft',
-      sv: 'Bekräfta',
-    },
-    disabled_input_text: {
-      en: 'Select any of the buttons above',
-      nb: 'Velg en av knappene over',
-      nn: 'Vel ein av knappane over',
-      sv: 'Välj en av knapparna över',
-    },
-    agent_joined_text: {
-      en: 'joined the conversation',
-      nb: 'har blitt med i samtalen',
-      nn: 'har blitt med i samtala',
-      sv: 'är med i chatten',
-    },
-    agent_left_text: {
-      en: 'left the conversation',
-      nb: 'har forlatt samtalen',
-      nn: 'har forlate samtala',
-      sv: 'har lämnat chatten',
-    },
-    handover_queue_text: {
-      en: 'Waiting for manual chat',
-      nb: 'Venter på manuell chat',
-      nn: 'Ventar på manuell chat',
-      sv: 'Vänta på manuell chatt',
-    },
-    handover_queue_link: {
-      en: 'Leave queue',
-      nb: 'Forlat kø',
-      nn: 'Forlat kø',
-      sv: 'Lämna chattkön',
-    },
-    takeover_queue_text: {
-      en: 'Waiting for manual chat',
-      nb: 'Venter på manuell chat',
-      nn: 'Ventar på manuell chat',
-      sv: 'Vänta på manuell chatt',
-    },
-    takeover_queue_link: {
-      en: 'Leave queue',
-      nb: 'Forlat kø',
-      nn: 'Forlat kø',
-      sv: 'Lämna chattkön',
-    },
-    leave_queue_text: {
-      en: 'Leaving queue',
-      nb: 'Forlater kø',
-      nn: 'Forlater kø',
-      sv: 'lämnar kö',
-    },
-    leave_queue_link: {
-      en: 'Stay in queue',
-      nb: 'Behold plassen i køen',
-      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.',
-    },
-    reference_list_title: {
-      en: 'Reference to reply',
-      nb: 'kilder',
-      sv: 'k\u00e4llor',
-    },
-    read_more_text: {
-      en: 'Read more',
-      nb: 'Les mer',
-      nn: 'Les meir',
-      sv: 'L\u00e4s mer',
-    },
-  },
-  nudges: {
-    form_nudges: [
-      {
-        id: '8b9a745c-d094-4279-8842-a385aeff0b15',
-        type: 'Form',
-        enabled: { en: true },
-        slug: 'form_nudge',
-        title: { en: 'Form nudge title' },
-        body_text: { en: 'Form nudge body' },
-        analytics_completion_page_path: null,
-        input_label: { en: 'Enter your email address' },
-        input_placeholder: { en: 'Email address' },
-        dialogue_id: '076e424b-4752-422a-8781-235df547a6ad',
-        webhook: '',
-      },
-    ],
-    product_nudges: [
-      {
-        id: '9764929d-149a-4fae-ab3a-7a7d6a476ce5',
-        type: 'Product',
-        enabled: {
-          en: true,
-        },
-        slug: 'product_nudge',
-        title: {
-          en: 'Product Nudge',
-        },
-        body_text: {
-          en: 'Find the best product for your needs!',
-        },
-        analytics_completion_page_path: null,
-        button_text: {
-          en: 'Call to action button',
-        },
-        button_link: {
-          en: 'https://google.com',
-        },
-        carousel_title: {
-          en: 'This is a carousel',
-        },
-        image_carousel: {
-          en: [
-            {
-              id: '1',
-              title: 'Image title',
-              alt_text: 'altText',
-              description: 'description',
-              image_url: 'https://i.imgur.com/wcfVY0C.png',
-              product_url: 'https://example.com',
-              link_text: 'Find out more',
-              link_url: 'https://example.com',
-              price: 10,
-            },
-            {
-              id: '2',
-              title: 'Image title',
-              alt_text: 'altText',
-              description: 'description',
-              image_url: 'https://i.imgur.com/wcfVY0C.png',
-              product_url: 'https://example.com',
-              link_text: 'Find out more',
-              link_url: 'https://example.com',
-              price: 10,
-            },
-          ],
-        },
-      },
-    ],
-    text_nudges: [
-      {
-        id: '5d9fd22f-5dae-4d18-bd14-fd2aaace1ff4',
-        type: 'Text',
-        enabled: { en: true },
-        slug: 'text_nudge',
-        title: { en: 'Text nudge title' },
-        body_text: { en: 'Text nudge body' },
-        analytics_completion_page_path: null,
-        link_text: { en: 'Call to action' },
-        link_location: { en: '#' },
-        url_trigger: '',
-        autopopup_time: 1000,
-      },
-    ],
-    custom_nudges: [
-      {
-        id: '89bb6609-e272-4810-b041-7239f53e53bb',
-        type: 'Custom',
-        enabled: { en: true },
-        slug: 'custom_nudge',
-        title: {},
-        body_text: {},
-        analytics_completion_page_path: '/order/',
-        text_blocks: [
-          { value: { en: 'First line' }, slug: 'text' },
-          { value: { en: 'Second line' }, slug: 'text2' },
-          { value: { en: 'Third line' }, slug: 'text3' },
-        ],
-      },
-    ],
-    multiple_choice_nudges: [
-      {
-        id: 'b4d7134e-88c8-40a1-bed4-d238362cfb08',
-        type: 'Multiple choice',
-        enabled: { en: true },
-        slug: 'multiple_choice_nudge',
-        title: { en: 'Multiple choice nudge title' },
-        body_text: { en: 'Multiple choice nudge body' },
-        analytics_completion_page_path: null,
-        button_blocks: [
-          { button_text: { en: 'First button' }, dialogue_id: null },
-          { button_text: { en: 'Second button' }, dialogue_id: null },
-          { button_text: { en: 'Third button' }, dialogue_id: null },
-          { button_text: { en: 'Fourth button' }, dialogue_id: null },
-        ],
-      },
-    ],
-  },
-  settings: {
-    id: 2852,
-    name: 'Storybook',
-    languages: [
-      {
-        code: 'en',
-        name: 'English',
-        active: true,
-      },
-    ],
-    avatar: 'https://i.imgur.com/PUWEkan.png',
-    bubble_size: 'NORMAL',
-    use_bubble_outline: false,
-    typing_indicator: true,
-    typing_duration: 4260,
-    disabled_transports: [],
-    user_idle_timeout_seconds: 1200,
-    updated_at: '2022-05-23T13:20:48+00:00',
-    refreshed_at: '2022-06-01T11:43:52+00:00',
-    show_handover_queue: true,
-    track_utm: true,
-    show_takeover_queue: true,
-    seasonal_appearance: null,
-    no_feedback_after_handover: false,
-    handover_mode: 'PLATFORM',
-    chatbubble_heartbeat_enabled: false,
-    chatbubble_heartbeat_ttl_s: 60,
-    email_enabled: true,
-    conversion_page_url: null,
-    split_test_enabled: false,
-    text_right_to_left: false,
-  },
-};

package/stories/decorators/withContainer.js

@@ -1,13 +0,0 @@
-import React, { Suspense } from 'react';
-
-const withContainer = (Story, options) => {
-  return (
-    <Suspense fallback="">
-      <Story chatSettings={options.parameters.botSettings} />
-    </Suspense>
-  );
-};
-
-withContainer.displayName = 'ContainerDecorator';
-
-export default withContainer;

package/stories/decorators/withProvider.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import MockProvider from '../../testing/MockProvider';
-
-const withMockProvider = (Story, options) => {
-  return (
-    <MockProvider
-      storeData={{
-        botKey: '1234aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
-        settings: options.parameters.botSettings,
-        initialStateModifier: options.args.initialStateModifierFromArgs
-          ? options.args.initialStateModifierFromArgs(options.args)
-          : options.parameters.initialStateModifier,
-        persist: false,
-      }}
-    >
-      <Story {...options} />
-    </MockProvider>
-  );
-};
-
-export default withMockProvider;

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

@@ -1,174 +0,0 @@
-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.',
-  );
-};