@kindly/react-chat 2.36.0 → 2.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.36.0",
+  "version": "2.36.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -15,7 +15,9 @@
     "build:local": "webpack -p",
     "prepublishOnly": "npm run build",
     "test": "jest src",
-    "update:browserslist": "npx browserslist@latest --update-db"
+    "update:browserslist": "npx browserslist@latest --update-db",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "browserslist": [
     "> 1% in NO",
@@ -60,6 +62,15 @@
     "@babel/plugin-transform-runtime": "^7.18.5",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.7",
     "babel-jest": "^26.6.3",
@@ -68,6 +79,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "browserslist": "^4.20.4",
+    "chromatic": "^6.5.6",
     "clean-webpack-plugin": "^3.0.0",
     "compression": "1.7.4",
     "dotenv": "8.6.0",
@@ -81,6 +93,7 @@
     "jest-each": "^26.6.2",
     "jest-junit": "^12.3.0",
     "jest-webpack-resolver": "^0.3.0",
+    "lodash.clonedeep": "^4.5.0",
     "pusher-js": "^5.1.1",
     "pusher-redux": "^0.5.0",
     "react": "^16.14.0",
@@ -88,6 +101,7 @@
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "16.14.0",
     "resolve-url-loader": "^5.0.0",
+    "storybook-addon-mock": "^2.4.1",
     "url-loader": "2.3.0",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^3.9.0",
@@ -99,5 +113,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "81b9fbe6aadac3209a521647ce16e1d466918358"
+  "gitHead": "f3a449ac06dd323091262d35750b73a70c541b97"
 }

package/stories/assets/settingsJson.js

@@ -0,0 +1,449 @@
+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: 'Ask me a question…',
+    },
+    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',
+    },
+    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?',
+      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',
+    },
+  },
+  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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,22 @@
+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;