@telia-ace/widget-conversation 1.0.12 → 1.0.15

package/dist/index2.js

@@ -0,0 +1,1678 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { ComponentPlatform } from "@telia-ace/widget-core";
+import { createStorageWriter, StorageCategory, StorageMedium, StorageScope, readStorage } from "@telia-ace/widget-services";
+import { uuid, lock, appendClassNames } from "@telia-ace/widget-utilities";
+import { FormBuilder, FormComponent } from "@telia-ace/widget-forms";
+import { closeAllModals } from "@telia-ace/widget-plugins";
+import { createReactComponent, Typography, useProperties, SymbolBadge, useComponent, invertedHoverButton, Html, borderTabStyle, List, buttonCss, useDispatch, Icon, Lightbox } from "@telia-ace/widget-ui";
+import React, { lazy, Suspense, Fragment } from "react";
+import styled, { keyframes, css } from "styled-components";
+class Agent {
+  constructor(provider, settings) {
+    this.provider = provider;
+    this.print = (settings2) => {
+      const sender = { name: this.name, avatar: this.avatar };
+      const normalized = getNormalizedMessageSettings(settings2);
+      return this.provider.createEntry(normalized.key, normalized.content, ConversationMessageType.Agent, sender, normalized.timestamp);
+    };
+    this.typing = () => {
+      return this.provider.setTypingState({ name: this.name, avatar: this.avatar });
+    };
+    this.name = settings.name;
+    this.avatar = settings.avatar;
+  }
+  update(settings) {
+    const { name, avatar } = settings;
+    if (avatar === null) {
+      this.avatar = void 0;
+    } else if (avatar) {
+      this.avatar = avatar;
+    }
+    if (name === null) {
+      this.name = void 0;
+    } else if (name) {
+      this.name = name;
+    }
+  }
+}
+class ConversationProvider {
+  constructor(name, container, controller) {
+    this.name = name;
+    this.container = container;
+    this.controller = controller;
+    this.subscriptions = [];
+    this.user = controller == null ? void 0 : controller.user;
+  }
+  static create(name, container, controller) {
+    return new ConversationProvider(name, container, controller);
+  }
+  createAgent(settings = {}) {
+    if (this.controller) {
+      return new Agent(this, settings);
+    }
+  }
+  print(settings) {
+    var _a;
+    return (_a = this.controller) == null ? void 0 : _a.print(settings);
+  }
+  setTypingState(sender, type) {
+    var _a;
+    return (_a = this.controller) == null ? void 0 : _a.setTypingState(sender, type);
+  }
+  loading() {
+    if (!this.controller) {
+      return () => () => {
+      };
+    }
+    return this.controller.loader();
+  }
+  createEntry(key, content, type, sender, timestamp) {
+    var _a;
+    return (_a = this.controller) == null ? void 0 : _a.createEntry(key, content, type, sender, timestamp);
+  }
+  dispose() {
+    var _a;
+    (_a = this.controller) == null ? void 0 : _a.disposeProvider(this);
+    this.controller = null;
+    this.subscriptions.forEach((unsub) => unsub());
+  }
+  onUnreadMessage(fn) {
+    var _a;
+    if (this.controller) {
+      const unsubscribe = (_a = this.controller) == null ? void 0 : _a.onUnreadMessage(fn);
+      this.subscriptions.push(unsubscribe);
+      return () => {
+        unsubscribe();
+      };
+    }
+  }
+  onMounted(fn) {
+    var _a;
+    if (this.controller) {
+      const unsubscribe = (_a = this.controller) == null ? void 0 : _a.events.subscribe("conversation:component-mount-changed", fn);
+      this.subscriptions.push(unsubscribe);
+      fn({}, this.controller.getComponentMountedState());
+      return () => {
+        unsubscribe();
+      };
+    }
+  }
+}
+class User {
+  constructor(controller) {
+    this.controller = controller;
+    this.print = (settings) => {
+      const normalized = getNormalizedMessageSettings(settings);
+      return this.controller.createEntry(normalized.key, normalized.content, ConversationMessageType.User, void 0, normalized.timestamp);
+    };
+  }
+}
+class ConversationEntry {
+  constructor(writer) {
+    this.writer = writer;
+  }
+  update(content) {
+    const normalized = this.getNormalizedSettings(content);
+    this.writer(normalized);
+  }
+  remove() {
+    this.writer(null);
+  }
+  getNormalizedSettings(content) {
+    if (typeof content === "string")
+      return { body: content };
+    else if (content.length > -1 && typeof content === "object")
+      return { items: content };
+    else
+      return content;
+  }
+}
+var ConversationMessageType = /* @__PURE__ */ ((ConversationMessageType2) => {
+  ConversationMessageType2["User"] = "user";
+  ConversationMessageType2["Agent"] = "agent";
+  ConversationMessageType2["System"] = "system";
+  return ConversationMessageType2;
+})(ConversationMessageType || {});
+const getNormalizedMessageSettings = (settings) => {
+  let content;
+  let key = uuid();
+  let timestamp = Date.now();
+  if (Array.isArray(settings) && settings.length > -1) {
+    if (typeof settings[0] === "string") {
+      content = { items: [settings] };
+    } else {
+      content = { items: settings };
+    }
+  } else if (typeof settings === "string") {
+    content = { body: settings };
+  } else {
+    settings = settings || {};
+    if (settings.type) {
+      content = __spreadValues({}, settings);
+    } else {
+      content = {
+        body: settings.body,
+        actions: settings.actions,
+        title: settings.title
+      };
+      if (settings.key) {
+        key = settings.key;
+      }
+      if (settings.timestamp) {
+        timestamp = settings.timestamp;
+      }
+      if (settings.form) {
+        const builder = FormBuilder.create(key);
+        settings.form(builder);
+        const builtForm = builder.get();
+        content.form = builtForm;
+      }
+      if (settings.timestamp === null) {
+        timestamp = null;
+      }
+    }
+  }
+  return { content, key, timestamp };
+};
+const removeTypingState = (typingActors, sender) => {
+  if (!sender) {
+    return;
+  }
+  const senderString = JSON.stringify(sender);
+  const indexToRemove = typingActors.findIndex((item) => {
+    return senderString === JSON.stringify(item);
+  });
+  if (indexToRemove > -1) {
+    return typingActors.splice(indexToRemove, 1);
+  }
+};
+class ConversationController {
+  constructor(container, id) {
+    this.container = container;
+    this.id = id;
+    this.formHandlers = {};
+    this.user = new User(this);
+    this.providers = [];
+    this.active = false;
+    this.registeredProviders = [];
+    this.loaders = 0;
+    this.componentMounted = false;
+    this.messages = [];
+    this.typingActors = [];
+    this.print = (settings) => {
+      const normalized = getNormalizedMessageSettings(settings);
+      return this.createEntry(normalized.key, normalized.content, "system", void 0, normalized.timestamp);
+    };
+    const widget = container.get("$widget");
+    this.events = widget.events.createChild(this);
+  }
+  setProviders(providers) {
+    const removed = [];
+    const added = [];
+    this.providers.reduce((acc, provider) => {
+      if (providers.indexOf(provider) === -1) {
+        acc.push(provider);
+      }
+      return acc;
+    }, []).forEach((providerToRemove) => {
+      const indexToRemove = this.providers.indexOf(providerToRemove);
+      if (indexToRemove > -1) {
+        removed.push(providerToRemove);
+        this.providers.splice(indexToRemove, 1);
+      }
+    });
+    providers.forEach((provider) => {
+      if (this.providers.indexOf(provider) === -1) {
+        added.push(provider);
+        this.providers.push(provider);
+      }
+    });
+    if (added.length || removed.length) {
+      this.events.dispatch("conversation:providers-changed", { added, removed });
+    }
+  }
+  createProvider(name) {
+    const index = this.providerIndex(name);
+    if (index > -1) {
+      return this.registeredProviders[index];
+    }
+    const provider = ConversationProvider.create(name, this.container, this);
+    this.registeredProviders.push(provider);
+    return provider;
+  }
+  providerIndex(name) {
+    return this.registeredProviders.findIndex((p) => p.name === name);
+  }
+  dispose() {
+    this.registeredProviders.forEach((provider) => provider.dispose());
+    this.messages = [];
+    this.events.dispatch("conversation:controller-disposed", this);
+    this.active = false;
+  }
+  onDispose(fn) {
+    return this.events.subscribe("conversation:controller-disposed", fn);
+  }
+  onStarted(fn) {
+    return this.events.subscribe("conversation:started", fn);
+  }
+  disposeProvider(target) {
+    const index = this.providerIndex(target.name);
+    index > -1 && this.registeredProviders.splice(index, 1);
+    this.events.dispatch("conversation:providers-changed", { removed: [target.name] });
+    if (!this.registeredProviders.length) {
+      this.dispose();
+    }
+  }
+  onProvidersChange(fn) {
+    return this.events.subscribe("conversation:providers-changed", fn);
+  }
+  setComponentMountedState(mounted) {
+    if (this.componentMounted === mounted) {
+      return;
+    }
+    this.componentMounted = mounted;
+    if (mounted) {
+      this.events.dispatch("conversation:unread-message", false);
+      this.events.dispatch("conversation:started", true);
+      this.active = true;
+    }
+    this.events.dispatch("conversation:component-mount-changed", mounted);
+  }
+  getComponentMountedState() {
+    return this.componentMounted;
+  }
+  onUnreadMessage(fn) {
+    return this.events.subscribe("conversation:unread-message", fn);
+  }
+  createEntry(key, content, type, sender, timestamp) {
+    const message = {
+      key,
+      content,
+      type,
+      sender: sender || null,
+      timestamp: timestamp || timestamp === null ? timestamp : Date.now()
+    };
+    this.messages.push(message);
+    message.type === "agent" && removeTypingState(this.typingActors, sender);
+    const entry = new ConversationEntry((updated) => {
+      if (updated !== null) {
+        const _a = updated, { timestamp: updatedTimestamp = void 0 } = _a, content2 = __objRest(_a, ["timestamp"]);
+        message.content = content2;
+        if (updatedTimestamp) {
+          message.timestamp = updatedTimestamp;
+        }
+      } else {
+        const indexToRemove = this.messages.indexOf(message);
+        message.content = null;
+        if (indexToRemove > -1) {
+          this.messages.splice(indexToRemove, 1);
+        }
+      }
+      this.events.dispatch("conversation:message-updated", { message });
+      this.update();
+    });
+    this.events.dispatch("conversation:message-created", { message });
+    this.update();
+    if (!this.componentMounted) {
+      this.events.dispatch("conversation:unread-message", true);
+    }
+    return entry;
+  }
+  update() {
+    this.events.dispatch("conversation:updated", {
+      messages: this.messages,
+      loading: this.loaders > 0,
+      typingActors: this.typingActors
+    });
+  }
+  getMessageStream() {
+    return {
+      messages: this.messages,
+      loading: this.loaders > 0,
+      typingActors: this.typingActors
+    };
+  }
+  setTypingState(sender, type) {
+    if (this.typingActors.indexOf(sender) === -1) {
+      this.typingActors.push(sender);
+      this.update();
+    }
+    return () => {
+      removeTypingState(this.typingActors, sender);
+      this.update();
+    };
+  }
+  loader() {
+    this.loaders = this.loaders + 1;
+    let dismissed = false;
+    if (this.loaders === 1) {
+      this.update();
+    }
+    return () => {
+      if (!dismissed) {
+        dismissed = true;
+        this.loaders = this.loaders - 1;
+        if (this.loaders === 0) {
+          this.update();
+        }
+      }
+    };
+  }
+  submitForm(key, handler) {
+    this.formHandlers[key] = __spreadProps(__spreadValues({}, this.formHandlers[key]), { submit: handler });
+  }
+  validateForm(key, handler) {
+    this.formHandlers[key] = __spreadProps(__spreadValues({}, this.formHandlers[key]), { validate: handler });
+  }
+}
+const getParentWidget = (widgetName, implementation) => {
+  const mainWidgetName = widgetName.split("_contact");
+  return implementation.widgets.get(mainWidgetName[0]);
+};
+const getSeparateWidget = (container) => {
+  const originWidget = container.get("$widget");
+  const { name, implementation } = container.get("$widget");
+  const mainWidget = name.indexOf("_contact") > -1 ? getParentWidget(name, implementation) : originWidget;
+  const { data } = container.get("$settings");
+  const { trigger } = mainWidget.container.get("$settings");
+  const chatWidgetName = `${name.replace("_contact-method", "").replace("_contact", "")}_contact-method`;
+  const chatWidget = implementation.widgets.get(chatWidgetName);
+  if (chatWidget && !trigger) {
+    return { chatWidget, mainWidget, data };
+  }
+  return { mainWidget, data };
+};
+const shouldPreventDefault = (container) => {
+  const { chatWidget } = getSeparateWidget(container);
+  return !!chatWidget;
+};
+const openChatWidget = (container, contactMethod, triggerDOMTarget) => {
+  const { mainWidget, data, chatWidget } = getSeparateWidget(container);
+  if (chatWidget) {
+    if (chatWidget.state === "activated") {
+      return chatWidget.invoke("open").then(() => {
+        chatWidget.container.getAsync("conversation").then((conversation) => {
+          conversation.navigateToConversationIfActive(contactMethod.id).then(() => closeAllModals(container));
+        });
+      });
+    }
+    return chatWidget.activate().then(() => {
+      const { trigger } = chatWidget.container.get("$settings");
+      trigger.action = "hide";
+      return chatWidget.invoke("setSettings", () => ({
+        data,
+        trigger,
+        activate: true
+      })).then(() => {
+        return chatWidget.container.getAsync("components").then((components) => {
+          const contactMethodsQuery = components.components().ofType("contact-method");
+          components.write({
+            key: "setContactMethodId",
+            attributes: {
+              properties: {
+                id: contactMethod.id,
+                guideId: contactMethod.guideId
+              }
+            },
+            target: contactMethodsQuery,
+            provider: "localStorage"
+          });
+          const conversationsQuery = components.components().ofType("conversation");
+          components.write({
+            key: "setConversationProvider",
+            attributes: {
+              properties: { providers: [contactMethod.clientName] }
+            },
+            target: conversationsQuery,
+            provider: "localStorage"
+          });
+        });
+      });
+    }).then(() => {
+      return chatWidget.invoke("attach", {
+        key: "contact-method",
+        triggerDOMElement: triggerDOMTarget,
+        withRenderState: "open"
+      });
+    }).then(() => {
+      createStorageWriter(chatWidget.container, "activeStickyWidget", StorageCategory.Necessary, {
+        medium: StorageMedium.Local,
+        scope: StorageScope.Implementation
+      }).then((write) => write(chatWidget.name));
+      return chatWidget.container.getAsync("conversation").then((platform) => {
+        platform.setConversationEndedBehavior(ConversationEndedBehavior.Deactivate);
+      }).then(() => closeAllModals(container)).then(() => false);
+    });
+  }
+  mainWidget.container.getAsync("conversation").then((platform) => {
+    return platform.navigateToConversationIfActive(contactMethod.id).then(() => platform.setConversationEndedBehavior(ConversationEndedBehavior.Navigate));
+  });
+  return chatWidget ? false : true;
+};
+const navigateToConversation = (container, contactMethod, routeName = "conversation") => {
+  const { mainWidget, chatWidget } = getSeparateWidget(container);
+  if (chatWidget) {
+    return chatWidget.container.getAsync("router").then((router) => {
+      router.navigate(routeName, { id: contactMethod.id });
+    });
+  }
+  return mainWidget.container.getAsync("conversation").then((platform) => {
+    var _a;
+    (_a = platform.setConversationEndedBehavior(ConversationEndedBehavior.Navigate)) == null ? void 0 : _a.then(() => {
+      mainWidget.container.getAsync("router").then((router) => {
+        mainWidget.container.getAsync("components").then((components) => {
+          const conversationQuery = components.components().ofType("conversation");
+          components.write({
+            key: "setConversationProvider",
+            attributes: { properties: { providers: [contactMethod.clientName] } },
+            target: conversationQuery,
+            provider: "localStorage"
+          });
+        }).then(() => {
+          router.navigate(routeName, { id: contactMethod.id });
+        });
+      });
+    });
+  });
+};
+const registerCustomMessageComponent = (container, type, component) => {
+  return container.getAsync("componentResolver").then((o) => __async(this, null, function* () {
+    const platform = yield ConversationPlatform.getInstance(container);
+    platform.addSubscription(o.registerComponent(type, lazy(() => component)));
+  }));
+};
+const STORAGE_KEY = "conversations";
+var ConversationEndedBehavior = /* @__PURE__ */ ((ConversationEndedBehavior2) => {
+  ConversationEndedBehavior2["Deactivate"] = "deactivate";
+  ConversationEndedBehavior2["Navigate"] = "navigate";
+  ConversationEndedBehavior2["None"] = "none";
+  return ConversationEndedBehavior2;
+})(ConversationEndedBehavior || {});
+class ConversationPlatform {
+  constructor(container, components) {
+    this.container = container;
+    this.components = components;
+    this.controllers = [];
+    this.providers = [];
+    this.disposeProviders = {};
+    this.subscriptions = [];
+    this.storageWriter = null;
+    this.router = null;
+    this.buttonQuery = null;
+    this.sessionInfo = null;
+    const widget = container.get("$widget");
+    this.events = widget.events.createChild(this);
+  }
+  initialize() {
+    createStorageWriter(this.container, STORAGE_KEY, StorageCategory.Necessary, {
+      medium: StorageMedium.Local
+    }).then((writer) => this.storageWriter = writer);
+    readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((storedSession) => {
+      this.buttonQuery = this.components.components().ofType("conversation-return-button");
+      if (storedSession) {
+        this.sessionInfo = storedSession;
+        if (storedSession.id && storedSession.route) {
+          this.writeToComponents({ active: true, alert: { show: false } });
+        }
+      }
+    });
+    this.container.getAsync("router").then((router) => this.router = router);
+    this.events.subscribe("conversation:ended", (event, data) => {
+      var _a, _b, _c;
+      switch ((_a = this.sessionInfo) == null ? void 0 : _a.conversationEndedBehavior) {
+        case "deactivate":
+          const widget = this.container.get("$widget");
+          widget.deactivate();
+          break;
+        case "navigate":
+          const initialRoute = (_b = this.router) == null ? void 0 : _b.getInitialRoute();
+          if (initialRoute) {
+            (_c = this.router) == null ? void 0 : _c.navigate(initialRoute.name);
+          }
+          break;
+      }
+      this.writeToComponents({ active: false });
+      this.sessionInfo = null;
+      this.storageWriter && this.storageWriter();
+    });
+  }
+  addSubscription(sub) {
+    this.subscriptions.push(sub);
+  }
+  static getInstance(container, key = "conversation") {
+    return lock(container)(() => {
+      return container.getAsync(key).then((value) => {
+        let conversation = value;
+        if (!conversation) {
+          return ComponentPlatform.getInstance(container).then((components) => {
+            conversation = new ConversationPlatform(container, components);
+            conversation.initialize();
+            container.registerAsync(key, () => conversation);
+            return conversation;
+          });
+        }
+        return conversation;
+      });
+    });
+  }
+  navigateToConversationIfActive(id) {
+    return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((storedSession) => {
+      var _a;
+      if (storedSession && storedSession.id === id) {
+        if (storedSession.route) {
+          const { name, params } = storedSession.route;
+          (_a = this.router) == null ? void 0 : _a.navigate(name, params);
+        }
+      }
+    });
+  }
+  setConversationEndedBehavior(behavior) {
+    return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((stored) => {
+      let storedSession = stored;
+      if (storedSession) {
+        storedSession.conversationEndedBehavior = behavior;
+      } else {
+        storedSession = { conversationEndedBehavior: behavior };
+      }
+      this.sessionInfo = storedSession;
+      return this.storageWriter && this.storageWriter(this.sessionInfo) || Promise.resolve();
+    });
+  }
+  createController(id) {
+    const index = this.controllers.findIndex((c) => c.conversation.id === id);
+    if (index > -1) {
+      return this.controllers[index].conversation;
+    }
+    return new ConversationController(this.container, id);
+  }
+  registerConversationItem(name, component) {
+    return registerCustomMessageComponent(this.container, name, component);
+  }
+  registerProvider(name, handler) {
+    const provider = {
+      name,
+      handler
+    };
+    this.providers.push(provider);
+    this.controllers.filter((controller) => controller.conversation.providers.indexOf(name) > -1).forEach((controller) => {
+      this.invokeHandler(provider, controller);
+    });
+  }
+  registerController(conversation, component) {
+    const index = this.controllers.findIndex((c) => c.conversation.id === conversation.id);
+    let controller;
+    if (index < 0) {
+      controller = { conversation, component };
+      this.controllers.push(controller);
+      const invokeHandlers = (providers) => {
+        if (providers) {
+          this.providers.filter((provider) => providers.indexOf(provider.name) > -1).forEach((provider) => {
+            this.invokeHandler(provider, controller);
+          });
+        }
+      };
+      this.subscriptions.push(conversation.onDispose((event, data) => {
+        const index2 = this.controllers.findIndex((c) => c.conversation === data);
+        index2 > -1 && this.controllers.splice(index2, 1);
+        this.components.components().ofType("conversation-return-button").select().writeProperties({ active: false });
+        this.events.dispatch("conversation:ended", {}, { bubbles: true });
+      }));
+      this.subscriptions.push(conversation.onProvidersChange((event, data) => {
+        const { added, removed } = data;
+        removed.forEach((removedProvider) => {
+          this.disposeProviders[removedProvider].forEach((dispose) => {
+            dispose();
+          });
+        });
+        invokeHandlers(added);
+      }));
+      this.subscriptions.push(conversation.onStarted((event, isActive) => {
+        var _a, _b;
+        const session = {
+          id: conversation.id,
+          route: (_a = this.router) == null ? void 0 : _a.getRouteData(),
+          conversationEndedBehavior: (_b = this.sessionInfo) == null ? void 0 : _b.conversationEndedBehavior
+        };
+        this.sessionInfo = session;
+        this.storageWriter && this.storageWriter(session);
+        this.writeToComponents({ active: isActive });
+      }));
+      this.subscriptions.push(conversation.onUnreadMessage((event, data) => {
+        this.events.dispatch("conversation:unread-message", data);
+        this.writeToComponents({ alert: { show: data } });
+      }));
+      invokeHandlers(conversation.providers);
+      return true;
+    }
+    controller = this.controllers[index];
+    return false;
+  }
+  writeToComponents(properties, key = "conversationReturnButtonState") {
+    if (this.buttonQuery) {
+      this.components.write({
+        key: "conversationReturnButtonState",
+        attributes: { properties },
+        target: this.buttonQuery,
+        provider: "localStorage"
+      });
+    }
+  }
+  invokeHandler(provider, controller) {
+    const dispose = provider.handler(controller.conversation.createProvider(provider.name), controller.component);
+    if (dispose) {
+      if (!this.disposeProviders[provider.name]) {
+        this.disposeProviders[provider.name] = [];
+      }
+      this.disposeProviders[provider.name].push(dispose);
+    }
+  }
+  getComponentRoute() {
+    return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((stored) => stored == null ? void 0 : stored.route);
+  }
+  dispose() {
+    Object.keys(this.disposeProviders).forEach((key) => {
+      this.disposeProviders[key].forEach((dispose) => {
+        dispose();
+      });
+    });
+    this.subscriptions.forEach((unsubscribe) => {
+      unsubscribe();
+    });
+    this.controllers = [];
+    this.providers = [];
+  }
+  static handleContactMethodClick(event, container, contactMethod, callback) {
+    return __async(this, null, function* () {
+      if (shouldPreventDefault(container)) {
+        event.preventDefault();
+        let triggerEl = document.getElementById("humany-dynamic-anchor");
+        if (!triggerEl) {
+          triggerEl = document.createElement("a");
+          triggerEl.setAttribute("href", "#");
+          triggerEl.id = "humany-dynamic-anchor";
+          document.body.appendChild(triggerEl);
+        }
+        openChatWidget(container, contactMethod, triggerEl);
+      }
+      openChatWidget(container, contactMethod);
+    });
+  }
+  static handleContactMethodSubmit(container, contactMethod) {
+    return __async(this, null, function* () {
+      return navigateToConversation(container, contactMethod);
+    });
+  }
+}
+var ConversationMessageListItemType = /* @__PURE__ */ ((ConversationMessageListItemType2) => {
+  ConversationMessageListItemType2["Header"] = "header";
+  ConversationMessageListItemType2["LinkList"] = "link-list";
+  ConversationMessageListItemType2["Separator"] = "separator";
+  ConversationMessageListItemType2["NoGoodAlternative"] = "no-good-alternative";
+  ConversationMessageListItemType2["ButtonList"] = "button-list";
+  ConversationMessageListItemType2["Text"] = "text";
+  ConversationMessageListItemType2["HTML"] = "html";
+  ConversationMessageListItemType2["FeedbackList"] = "feedback-list";
+  return ConversationMessageListItemType2;
+})(ConversationMessageListItemType || {});
+const groupedMessages = (messages, timeout) => {
+  return messages.reduce((acc, current, index) => {
+    var _a, _b;
+    const newItem = __spreadProps(__spreadValues({}, current), {
+      content: [__spreadProps(__spreadValues({}, current.content), { key: current.key })]
+    });
+    if (acc.length > 0 && current.type !== ConversationMessageType.System) {
+      const previous = acc[acc.length - 1];
+      if (!timeout && timeout !== 0 || Math.abs(previous.timestamp - current.timestamp) < timeout) {
+        if (((_a = previous.sender) == null ? void 0 : _a.name) === ((_b = current.sender) == null ? void 0 : _b.name) && previous.type === current.type) {
+          previous.timestamp = current.timestamp;
+          previous.content.push(__spreadProps(__spreadValues({}, current.content), { key: current.key }));
+          return acc;
+        }
+      }
+    }
+    acc.push(newItem);
+    return acc;
+  }, []);
+};
+const ConversationComponent = (container) => {
+  return Promise.all([
+    ConversationPlatform.getInstance(container),
+    container.getAsync("router")
+  ]).then(([platform, router]) => {
+    return createReactComponent(container, "conversation", import("./conversation.js"), (component) => {
+      const routeData = router.getRouteData();
+      const name = routeData.params.id || component.node.name || "component";
+      const conversation = platform.createController(name);
+      const isNewController = platform.registerController(conversation, component);
+      const messageGroupingTimeout = 3 * 60 * 1e3;
+      const setProperties = (properties) => {
+        const { providers = [] } = properties;
+        if (providers) {
+          const providerKeys = Array.isArray(providers) ? providers : [providers];
+          conversation.setProviders(providerKeys);
+          return providerKeys;
+        }
+      };
+      setProperties(component.properties(setProperties));
+      conversation.setComponentMountedState(true);
+      const writeMessages = (messageStream) => {
+        const { loading, typingActors, messages } = messageStream;
+        component.writeProperties({
+          loading,
+          typingActors,
+          messages: groupedMessages(messages, messageGroupingTimeout)
+        });
+      };
+      writeMessages(conversation.getMessageStream());
+      if (isNewController) {
+        component.actions.create("user-submit", (data, options) => {
+          if (options) {
+            const { preventDefault, validationPromise } = options;
+            if (preventDefault) {
+              if (validationPromise) {
+                validationPromise().then((text) => {
+                  if (text) {
+                    conversation.user.print(text);
+                  }
+                });
+              }
+              return;
+            }
+          }
+          conversation.user.print(data.text);
+        });
+        component.actions.create("user-typing", (data, options) => {
+        });
+        component.actions.create("form", (data, options) => {
+        });
+        component.actions.create("action", (data, options) => {
+        });
+      }
+      const unsubscribe = conversation.events.subscribe("conversation:updated", (e, conversationData) => {
+        writeMessages(conversationData);
+      });
+      return () => {
+        conversation.setComponentMountedState(false);
+        unsubscribe();
+        if (!conversation.active) {
+          writeMessages({ messages: [], typingActors: [], loading: false });
+        }
+      };
+    }, { reuseController: true });
+  });
+};
+const Avatar = styled.div`
+    width: ${(p) => p.avatarSize || "32px"};
+    height: ${(p) => p.avatarSize || "32px"};
+    border-radius: 50%;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
+}};
+    border: ${(p) => p.theme.border};
+    grid-area: avatar;
+    align-self: flex-end;
+    justify-self: center;
+    overflow: hidden;
+    margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+
+    > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    > svg {
+        width: 90%;
+        height: 90%;
+        padding: 10%;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+
+        line,
+        path,
+        circle,
+        fill {
+            stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        }
+    }
+`;
+const LoaderAnimation = keyframes`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
+const Loader = styled.div`
+    display: flex;
+    justify-content: center;
+    > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        margin: 5px;
+        background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        animation: ${LoaderAnimation} 1s infinite;
+    }
+    > div:nth-child(2) {
+        animation-delay: 100ms;
+    }
+    > div:nth-child(3) {
+        animation-delay: 200ms;
+    }
+`;
+const ContentBundle = styled.div`
+    grid-area: content;
+    max-width: 100%;
+    overflow: hidden;
+`;
+const MessageTitle = styled(Typography)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-weight: normal;
+    margin: 0;
+`;
+const MessageContainer = styled.div`
+    display: flex;
+`;
+const MessageContent = styled.div`
+    background-color: ${(p) => {
+  var _a, _b;
+  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.accent;
+}};
+    color: ${(p) => {
+  var _a, _b;
+  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.accent : (_b = p.theme.colors) == null ? void 0 : _b.text;
+}};
+    border-radius: 5px; // TODO: prop?
+    border: 1px solid rgb(231, 231, 231);
+    padding-top: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} - ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}});
+    padding-bottom: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} - ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}});
+    margin-top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    display: inline-block;
+    && > * {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        hyphens: auto;
+    }
+    max-width: 100%;
+    ${(p) => p.fullWidth && "width: 100%;"}
+
+    ${(p) => !p.user && css`
+            border: ${p.theme.border};
+        `}
+  ${(p) => p.user && "margin-left: auto"};
+
+    ${(p) => p.stacked === "first" && p.user && css`
+            border-bottom-right-radius: 1px; // TODO: Prop?
+        `}
+    ${(p) => p.stacked === "middle" && p.user && css`
+            border-bottom-right-radius: 1px;
+            border-top-right-radius: 1px;
+        `}
+  ${(p) => p.stacked === "last" && p.user && css`
+            border-top-right-radius: 1px;
+        `}
+  ${(p) => p.stacked === "first" && !p.user && css`
+            border-bottom-left-radius: 1px;
+        `}
+  ${(p) => p.stacked === "middle" && !p.user && css`
+            border-bottom-left-radius: 1px;
+            border-top-left-radius: 1px;
+        `}
+  ${(p) => p.stacked === "last" && !p.user && css`
+            border-top-left-radius: 1px;
+        `};
+
+    ${(p) => !p.stacked && css`
+            ${p.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
+        `};
+
+    transition: border-radius 500ms linear;
+`;
+const MessageContentPart = styled.div`
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+
+    ${(p) => p.noPadding && css`
+            padding: 0;
+        `}
+
+    margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`;
+const StyledTimestamp = styled.p`
+    && {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+        font-weight: 300;
+    }
+    padding-top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    margin: 0;
+    line-height: 1.5em;
+    grid-area: info;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+`;
+const getTimestamp = (raw) => {
+  return new Date(raw).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+};
+const Timestamp = ({ className, name, timestamp }) => {
+  if (!name && !timestamp) {
+    return null;
+  }
+  let output = "";
+  if (name) {
+    if (timestamp) {
+      output = `${name}: ${getTimestamp(timestamp)}`;
+    } else {
+      output = name;
+    }
+  } else if (timestamp) {
+    output = getTimestamp(timestamp);
+  }
+  return /* @__PURE__ */ React.createElement(StyledTimestamp, null, output);
+};
+const AgentMessage = ({ className, children, sender, timestamp }) => {
+  const { avatar, name } = sender;
+  const { avatarSize } = useProperties();
+  return /* @__PURE__ */ React.createElement(StyledAgentMessage, {
+    hasAvatar: !!avatar,
+    className: appendClassNames(className, "humany-conversation-agent-message")
+  }, avatar && /* @__PURE__ */ React.createElement(Avatar, {
+    avatarSize
+  }, typeof avatar === "string" ? /* @__PURE__ */ React.createElement("img", {
+    src: avatar
+  }) : /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: avatar
+  })), children, /* @__PURE__ */ React.createElement(Timestamp, {
+    name,
+    timestamp
+  }));
+};
+const StyledAgentMessage = styled.div`
+    display: grid;
+    margin-right: 10%;
+    width: 90%;
+    ${(p) => p.hasAvatar ? css`
+                  grid-template-columns: auto 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'avatar content'
+                      '. info';
+              ` : css`
+                  grid-template-columns: 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'content'
+                      'info';
+              `};
+`;
+const CustomMessage = (props) => {
+  const CustomComponent = useComponent(props.type);
+  if (!CustomComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: null
+  }, /* @__PURE__ */ React.createElement(MessageContent, {
+    user: props.isUser,
+    stacked: !!props.stacked && props.stacked,
+    fullWidth: !!props.content.form || !!props.content.actions
+  }, /* @__PURE__ */ React.createElement(MessageContentPart, {
+    noPadding: !!props.content.noPadding && props.content.noPadding
+  }, /* @__PURE__ */ React.createElement(CustomComponent, __spreadValues({}, props.content)))));
+};
+const SystemMessage = ({
+  className,
+  children,
+  timestamp,
+  discrete,
+  fullWidth
+}) => {
+  return /* @__PURE__ */ React.createElement(StyledSystemMessage, {
+    className: appendClassNames(className, "humany-conversation-system-message"),
+    fullWidth
+  }, discrete ? /* @__PURE__ */ React.createElement(Discrete, {
+    className: "humany-conversation-discrete-message"
+  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
+    timestamp
+  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(Timestamp, {
+    timestamp
+  })));
+};
+const StyledSystemMessage = styled.div`
+    ${(p) => p.fullWidth && "width: 100%"};
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    overflow: auto;
+`;
+const Discrete = styled.div`
+    text-align: center;
+    word-wrap: break-word;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    > p {
+        margin: 0;
+    }
+`;
+const UserMessage = ({ className, children, timestamp }) => {
+  const { userLabel = "" } = useProperties();
+  return /* @__PURE__ */ React.createElement(StyledUserMessage, {
+    className: appendClassNames(className, "humany-conversation-user-message")
+  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
+    name: userLabel,
+    timestamp
+  }));
+};
+const StyledUserMessage = styled.div`
+    margin-left: 10%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+`;
+const CustomMessageListItem = ({ type, content = {} }) => {
+  const Component = useComponent(type);
+  if (!Component || !type) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Component, __spreadValues({}, content));
+};
+const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs
+});
+const htmlParseInstructions = {
+  transform: {
+    img: imageLightboxRenderer
+  }
+};
+const ConversationContent = ({ content, isUser, stacked }) => {
+  const dispatch = useDispatch();
+  const { title, body, actions, form, type, items } = content;
+  if (type)
+    return /* @__PURE__ */ React.createElement(CustomMessage, {
+      type,
+      content,
+      isUser,
+      stacked
+    });
+  return /* @__PURE__ */ React.createElement(MessageContent, {
+    noPadding: true,
+    user: isUser,
+    stacked: !!stacked && stacked,
+    fullWidth: !!form || !!actions
+  }, title && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(MessageTitle, {
+    variant: "h2"
+  }, title)), body && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledHtml, {
+    html: body,
+    htmlParseInstruction: htmlParseInstructions
+  })), form && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledForm, __spreadProps(__spreadValues({}, form), {
+    onChange: (key, data) => {
+      dispatch("form", {
+        data,
+        formKey: form.schema.id,
+        actionKey: key
+      });
+    }
+  }))), actions && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledActionList, {
+    items: Object.keys(actions).map((i) => {
+      return { label: actions[i], actionKey: i };
+    }),
+    renderItem: (item) => {
+      return /* @__PURE__ */ React.createElement("li", {
+        key: item.actionKey
+      }, /* @__PURE__ */ React.createElement(StyledActionButton, {
+        onClick: () => {
+          dispatch("action", item.actionKey);
+        }
+      }, item.label));
+    }
+  })), items && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(MessageContentPart, {
+    key: uuid(),
+    noPadding: true
+  }, /* @__PURE__ */ React.createElement(StyledActionList, {
+    items: items.map(([type2, content2]) => {
+      return { type: type2, content: content2 };
+    }),
+    renderItem: (item) => {
+      const itemKey = uuid();
+      switch (item.type) {
+        case ConversationMessageListItemType.Header: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(HeaderText, null, item.content));
+        }
+        case ConversationMessageListItemType.Text: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement("span", null, item.content));
+        }
+        case ConversationMessageListItemType.HTML: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledHtml, {
+            html: item.content.body,
+            htmlParseInstruction: htmlParseInstructions
+          }));
+        }
+        case ConversationMessageListItemType.Separator: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey,
+            noPadding: true
+          }, /* @__PURE__ */ React.createElement(SeparatorPadding, null, /* @__PURE__ */ React.createElement(Separator, null)));
+        }
+        case ConversationMessageListItemType.LinkList: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledLinkList, {
+            items: Object.keys(item.content.actions).map((i) => {
+              return {
+                label: item.content.actions[i],
+                actionKey: i
+              };
+            }),
+            renderItem: (item2) => {
+              return /* @__PURE__ */ React.createElement("li", {
+                key: item2.actionKey
+              }, /* @__PURE__ */ React.createElement(StyledLinkButton, {
+                help: item2.actionKey === "help",
+                onClick: () => {
+                  dispatch("action", item2.actionKey);
+                }
+              }, item2.label, item2.actionKey === "help" && /* @__PURE__ */ React.createElement(SymbolBadge, {
+                size: 14,
+                symbol: {
+                  type: "Svg",
+                  content: "caret-down"
+                }
+              })));
+            }
+          }));
+        }
+        case ConversationMessageListItemType.ButtonList: {
+          const items2 = Array.isArray(item.content.actions) ? item.content.actions : Object.keys(item.content.actions).map((i) => {
+            return {
+              label: item.content.actions[i],
+              actionKey: i
+            };
+          });
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
+            items: items2,
+            renderItem: (item2) => {
+              return /* @__PURE__ */ React.createElement("li", {
+                key: item2.actionKey
+              }, /* @__PURE__ */ React.createElement(StyledButtonListButton, {
+                onClick: () => {
+                  dispatch("action", item2.actionKey);
+                }
+              }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+                symbol: item2.symbol
+              }), item2.label));
+            }
+          }));
+        }
+        case ConversationMessageListItemType.NoGoodAlternative: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(NoGoodAlternativeWrapper, {
+            onClick: () => {
+              dispatch("action", "help");
+            }
+          }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+            size: 14,
+            symbol: {
+              type: "FontAwesome",
+              content: "meh-o"
+            }
+          }), /* @__PURE__ */ React.createElement("span", null, item.content.body)));
+        }
+        case ConversationMessageListItemType.FeedbackList: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
+            items: Object.keys(item.content.actions).map((i) => {
+              return {
+                label: item.content.actions[i],
+                actionKey: i
+              };
+            }),
+            renderItem: (item2) => {
+              return /* @__PURE__ */ React.createElement(FeedbackItem, {
+                key: item2.actionKey
+              }, /* @__PURE__ */ React.createElement(FeedbackButton, {
+                className: "humany-feedback-button",
+                disabled: false,
+                "aria-pressed": true,
+                "data-selected": true,
+                "data-direction": "vertical",
+                onClick: () => {
+                  dispatch("action", item2.actionKey);
+                }
+              }, /* @__PURE__ */ React.createElement(Icon, {
+                faIcon: item2.actionKey == "yes" ? "smile-o" : "frown-o"
+              }), /* @__PURE__ */ React.createElement("span", null, item2.label)));
+            }
+          }));
+        }
+        default: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey,
+            noPadding: true
+          }, /* @__PURE__ */ React.createElement(CustomMessageListItem, {
+            type: item.type,
+            content: item.content
+          }));
+        }
+      }
+    }
+  }))));
+};
+const StyledForm = styled(FormComponent)`
+    & button.humany-form-component-button {
+        ${(p) => {
+  var _a, _b;
+  return invertedHoverButton({
+    active: false,
+    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
+    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    }
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        }
+    }
+`;
+const StyledHtml = styled(Html)`
+    white-space: pre-wrap;
+    a {
+        color: ${(p) => p.theme.colors.link};
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+        }
+    }
+`;
+const StyledActionList = styled(List)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    > li {
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    }
+`;
+const StyledButtonList = styled(List)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        margin-left: 0;
+        display: inline-block;
+    }
+`;
+const StyledButtonListButton = styled.button`
+    ${buttonCss};
+    display: block;
+    text-align: left;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
+    }
+
+    i,
+    svg {
+        margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    }
+`;
+const StyledLinkList = styled(List)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`;
+const HeaderText = styled.strong`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
+}};
+`;
+const StyledLinkButton = styled.button`
+    display: block;
+    background-color: transparent;
+    text-align: left;
+    border: none;
+    padding: 0;
+    font-weight: 300;
+    font-family: inherit;
+    cursor: pointer;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+
+    ${(p) => {
+  var _a, _b;
+  return p.help && css`
+            color: ${(_a = p.theme.colors) == null ? void 0 : _a.text};
+            text-decoration: underline;
+
+            i,
+            svg {
+                margin-left: ${(_b = p.theme.sizes) == null ? void 0 : _b.small};
+            }
+        `;
+}}
+`;
+const StyledActionButton = styled.button`
+    ${buttonCss};
+    display: block;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    width: 100%;
+    color: #fff;
+    font-family: Lato;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
+}};
+    font-weight: 300;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+const SeparatorPadding = styled.div`
+    padding-top: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} - ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}});
+    padding-bottom: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} - ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}});
+`;
+const Separator = styled.div`
+    background-color: #efefef;
+    height: 1px;
+    width: 100%;
+`;
+const NoGoodAlternativeWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    > i,
+    svg {
+        margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    }
+`;
+const ConversationListItem = styled.li`
+    padding-left: ${(p) => {
+  var _a;
+  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    padding-right: ${(p) => {
+  var _a;
+  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+`;
+const FeedbackItem = styled.li`
+    @media (min-width: 768px) {
+        display: list-item !important;
+        margin-right: 0 !important;
+        margin-top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} !important;
+    }
+`;
+const FeedbackButton = styled.button`
+    @media (min-width: 768px) {
+        min-width: 100%;
+        margin-right: 0;
+    }
+    display: inline-block;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    border-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}} !important;
+    font-weight: 300;
+    && {
+        margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    }
+    ${(p) => {
+  var _a, _b;
+  return p["data-direction"] === "horizontal" && css`
+            width: 225px;
+            max-width: calc(50% - ${(_a = p.theme.sizes) == null ? void 0 : _a.large} - ${(_b = p.theme.sizes) == null ? void 0 : _b.small});
+        `;
+}}
+    ${(p) => p["data-direction"] === "vertical" && css`
+            min-width: 150px;
+        `}
+  ${(p) => {
+  var _a;
+  return invertedHoverButton({
+    primaryColor: `${(_a = p.theme.colors) == null ? void 0 : _a.primary}`,
+    secondaryColor: "#FFFFFF"
+  });
+}}
+    i {
+        margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    }
+    span {
+    }
+`;
+const ConversationReturnButtonComponent = (container) => {
+  return Promise.all([
+    ComponentPlatform.getInstance(container),
+    ConversationPlatform.getInstance(container),
+    container.getAsync("router")
+  ]).then(([components, platform, router]) => {
+    return createReactComponent(container, "conversation-return-button", import("./return-button.js"), (component) => {
+      component.actions.create("toggle", (options = {}) => {
+        var _a;
+        (_a = platform.getComponentRoute()) == null ? void 0 : _a.then((route) => {
+          route && router.navigate(route.name, route.params);
+        });
+      });
+    });
+  });
+};
+export { AgentMessage as A, ContentBundle as C, Loader as L, MessageContainer as M, SystemMessage as S, UserMessage as U, MessageContent as a, ConversationMessageType as b, ConversationContent as c, ConversationPlatform as d, ConversationEndedBehavior as e, ConversationController as f, ConversationEntry as g, ConversationMessageListItemType as h, ConversationComponent as i, ConversationReturnButtonComponent as j, StyledButtonList as k, registerCustomMessageComponent as r };
+//# sourceMappingURL=index2.js.map