@miso.ai/client-sdk-ui 1.13.2-beta.1 → 1.14.0-beta.2

package/dist/cjs/asset/svgs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = exports.CHEVRON = exports.BULB = void 0;
 exports.getIcon = getIcon;
+var _commons = require("@miso.ai/commons");
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function trianglePath(r) {
@@ -22,7 +23,12 @@ const ICON_NAME = {
   TRIANGLE_EQ: 'triangle-eq',
   CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative',
-  BULB: 'bulb'
+  BULB: 'bulb',
+  DOTS_VERTICAL: 'dots-vertical',
+  PLUS: 'plus',
+  PENCIL: 'pencil',
+  BELL: 'bell',
+  BELL_FILL: 'bell-fill'
 };
 
 // CC0 SVGs
@@ -36,8 +42,13 @@ const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
 
 // from Bootstrap Icons (MIT)
-const ICON_BULB = `<symbol id="${PREFIX}-${ICON_NAME.BULB}" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/></symbol>`;
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB];
+const ICON_BULB = `<symbol id="${PREFIX}-${ICON_NAME.BULB}" viewBox="0 0 16 16"><path fill="currentColor" d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/></symbol>`;
+const ICON_DOTS_VERTICAL = `<symbol id="${PREFIX}-${ICON_NAME.DOTS_VERTICAL}" viewBox="0 0 16 16"><path fill="currentColor" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></symbol>`;
+const ICON_PLUS = `<symbol id="${PREFIX}-${ICON_NAME.PLUS}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></symbol>`;
+const ICON_PENCIL = `<symbol id="${PREFIX}-${ICON_NAME.PENCIL}" viewBox="0 0 16 16"><path fill="currentColor" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.325-.175"/></symbol>`;
+const ICON_BELL = `<symbol id="${PREFIX}-${ICON_NAME.BELL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/></symbol>`;
+const ICON_BELL_FILL = `<symbol id="${PREFIX}-${ICON_NAME.BELL_FILL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/></symbol>`;
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB, ICON_DOTS_VERTICAL, ICON_PLUS, ICON_PENCIL, ICON_BELL, ICON_BELL_FILL];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -47,7 +58,7 @@ function loadSvgSprites() {
   loaded = true;
   document.head.insertAdjacentHTML('beforeend', SPRITES_SVG);
 }
-loadSvgSprites();
+_commons.isInBrowser && loadSvgSprites();
 function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }

package/dist/cjs/combo/ask/index.js

@@ -117,8 +117,8 @@ class AskCombo extends _base.default {
       features = {},
       api
     } = options;
-    const context = client.ui.asks;
-    const rootWorkflow = client.ui.ask;
+    const context = client.workflows.asks;
+    const rootWorkflow = client.workflows.ask;
     if (api) {
       context.useApi(api);
     }

package/dist/cjs/constants.js

@@ -3,109 +3,129 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WORKFLOW_CONFIGURABLE = exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.REQUEST_TYPE = exports.QUESTION_SOURCE = exports.PERFORMANCE_EVENT_TYPES = exports.EVENT_TYPE = exports.DIRECT_TRACKING_EVENT_TYPES = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
-exports.isDataRole = isDataRole;
-exports.isPerformanceEventType = isPerformanceEventType;
-exports.isProductRole = isProductRole;
-exports.validateEventType = validateEventType;
-exports.validateTrackingStatus = validateTrackingStatus;
+exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
+Object.defineProperty(exports, "DEFAULT_UNIT_ID", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.DEFAULT_UNIT_ID;
+  }
+});
+Object.defineProperty(exports, "DIRECT_TRACKING_EVENT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.DIRECT_TRACKING_EVENT_TYPES;
+  }
+});
+Object.defineProperty(exports, "EVENT_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.EVENT_TYPE;
+  }
+});
+exports.LAYOUT_TYPE = void 0;
+Object.defineProperty(exports, "PERFORMANCE_EVENT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.PERFORMANCE_EVENT_TYPES;
+  }
+});
+Object.defineProperty(exports, "QUESTION_SOURCE", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.QUESTION_SOURCE;
+  }
+});
+Object.defineProperty(exports, "REQUEST_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.REQUEST_TYPE;
+  }
+});
+Object.defineProperty(exports, "ROLE", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.ROLE;
+  }
+});
+Object.defineProperty(exports, "STATUS", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.STATUS;
+  }
+});
+Object.defineProperty(exports, "TRACKING_EVENT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.TRACKING_EVENT_TYPES;
+  }
+});
+Object.defineProperty(exports, "TRACKING_STATUS", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.TRACKING_STATUS;
+  }
+});
+Object.defineProperty(exports, "WORKFLOW_CONFIGURABLE", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.WORKFLOW_CONFIGURABLE;
+  }
+});
+Object.defineProperty(exports, "isDataRole", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.isDataRole;
+  }
+});
+Object.defineProperty(exports, "isPerformanceEventType", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.isPerformanceEventType;
+  }
+});
+Object.defineProperty(exports, "isProductRole", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.isProductRole;
+  }
+});
+Object.defineProperty(exports, "validateEventType", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.validateEventType;
+  }
+});
+Object.defineProperty(exports, "validateTrackingStatus", {
+  enumerable: true,
+  get: function () {
+    return _clientSdkWorkflow.validateTrackingStatus;
+  }
+});
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
+// workflow-level constants live in the workflow package; re-exported here for convenience
+
 const ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = `data-miso-unit-id`;
 const ATTR_DATA_MISO_PRODUCT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = `data-miso-product-id`;
-const DEFAULT_UNIT_ID = exports.DEFAULT_UNIT_ID = 'default';
-const ROLE = exports.ROLE = Object.freeze({
+const LAYOUT_TYPE = exports.LAYOUT_TYPE = Object.freeze({
   CONTAINER: 'container',
+  ERROR: 'error',
   BANNER: 'banner',
-  QUERY: 'query',
-  FEEDBACK: 'feedback',
-  PRODUCTS: 'products',
-  CATEGORIES: 'categories',
-  ATTRIBUTES: 'attributes',
-  RESULTS: 'results',
-  ITEMS: 'items',
-  QUESTION: 'question',
-  ANSWER: 'answer',
-  REASONING: 'reasoning',
-  IMAGES: 'images',
-  SOURCES: 'sources',
-  RELATED_RESOURCES: 'related_resources',
-  FOLLOW_UP_QUESTIONS: 'follow_up_questions',
-  QUERY_SUGGESTIONS: 'query_suggestions',
-  RELATED_QUESTIONS: 'related_questions',
   AFFILIATION: 'affiliation',
-  KEYWORDS: 'keywords',
+  LIST: 'list',
+  THREADS: 'threads',
+  MESSAGES: 'messages',
+  HORIZONTAL: 'horizontal',
+  CARDS: 'cards',
+  CAROUSEL: 'carousel',
+  GALLERY: 'gallery',
+  SEARCH_BOX: 'search-box',
+  OPTION_LIST: 'option-list',
   FACETS: 'facets',
-  TOTAL: 'total',
-  MORE: 'more',
-  SORT: 'sort',
-  ERROR: 'error'
-});
-const DATA_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.CATEGORIES, ROLE.ATTRIBUTES, ROLE.RESULTS, ROLE.ITEMS, ROLE.QUESTION, ROLE.ANSWER, ROLE.REASONING, ROLE.IMAGES, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.FOLLOW_UP_QUESTIONS, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
-function isDataRole(role) {
-  return DATA_ROLE_SET.has(role);
-}
-const PRODUCT_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.IMAGES, ROLE.SOURCES, ROLE.RELATED_RESOURCES]);
-function isProductRole(role) {
-  return PRODUCT_ROLE_SET.has(role);
-}
-const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
-  IMPRESSION: 'impression',
-  VIEWABLE: 'viewable',
-  CLICK: 'click',
-  SUBMIT: 'submit',
+  SELECT: 'select',
+  MORE_BUTTON: 'more-button',
+  BUTTON: 'button',
+  CHECKBOX: 'checkbox',
   FEEDBACK: 'feedback',
-  HEARTBEAT: 'heartbeat',
-  GENERIC_CLICK: 'generic_click'
-});
-const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK, EVENT_TYPE.SUBMIT, EVENT_TYPE.FEEDBACK, EVENT_TYPE.HEARTBEAT];
-const PERFORMANCE_EVENT_TYPES = exports.PERFORMANCE_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK];
-const DIRECT_TRACKING_EVENT_TYPES = exports.DIRECT_TRACKING_EVENT_TYPES = [EVENT_TYPE.SUBMIT, EVENT_TYPE.HEARTBEAT, EVENT_TYPE.GENERIC_CLICK];
-const PERFORMANCE_EVENT_TYPE_SET = new Set(PERFORMANCE_EVENT_TYPES);
-function isPerformanceEventType(type) {
-  return PERFORMANCE_EVENT_TYPE_SET.has(type);
-}
-const TRACKING_STATUS = exports.TRACKING_STATUS = Object.freeze({
-  UNTRACKED: 'untracked',
-  TRACKING: 'tracking',
-  TRIGGERED: 'triggered'
-});
-const STATUS = exports.STATUS = Object.freeze({
-  INITIAL: 'initial',
-  LOADING: 'loading',
-  ERRONEOUS: 'erroneous',
-  READY: 'ready',
-  ONGOING: 'ongoing',
-  DONE: 'done',
-  EMPTY: 'empty',
-  NONEMPTY: 'nonempty',
-  UNANSWERABLE: 'unanswerable'
-});
-const QUESTION_SOURCE = exports.QUESTION_SOURCE = Object.freeze({
-  ORGANIC: '_organic',
-  SUGGESTED_QUESTIONS: '_suggested_questions',
-  INLINE_QUESTION_LINK: '_inline_question_link'
-});
-function validateEventType(value) {
-  if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
-    throw new Error(`Unrecognized event type: ${value}`);
-  }
-}
-function validateTrackingStatus(value) {
-  if (value !== TRACKING_STATUS.UNTRACKED && value !== TRACKING_STATUS.TRACKING && value !== TRACKING_STATUS.TRIGGERED) {
-    throw new Error(`Unrecognized tracking status: ${value}`);
-  }
-}
-const WORKFLOW_CONFIGURABLE = exports.WORKFLOW_CONFIGURABLE = Object.freeze({
-  API: 'api',
-  LAYOUTS: 'layouts',
-  DATA_PROCESSOR: 'dataProcessor',
-  TRACKERS: 'trackers',
-  INTERACTIONS: 'interactions',
-  FILTERS: 'filters',
-  PAGINATION: 'pagination',
-  TEMPLATES: 'templates'
-});
-const REQUEST_TYPE = exports.REQUEST_TYPE = Object.freeze({
-  QUERY: 'query',
-  REFINE: 'refine',
-  MORE: 'more'
+  TEXT: 'text',
+  TYPEWRITER: 'typewriter'
 });

package/dist/cjs/defaults/ask/controls.js

@@ -28,7 +28,7 @@ function setFollowUpTemplate(client, _ref = {}) {
   if (template === _templates.followUp && !hasExtraOptions) {
     return; // same as default
   }
-  client.ui.asks.useTemplates({
+  client.workflows.asks.useTemplates({
     followUp: hasExtraOptions ? args => template(Object.assign({}, options, args)) : template
   });
 }

package/dist/cjs/defaults/hybrid-search/answer-box.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _constants = require("./constants.js");
 var _constants2 = require("../../constants.js");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _phrases = require("./phrases.js");
 const CLASS_OPEN = 'answer-box-open';
 const CLASS_SHOWN = 'answer-box-shown';
@@ -18,7 +18,7 @@ class AnswerBox {
     hideWhenUnanswerable = true
   } = {}) {
     this._client = client;
-    this._workflow = client.ui.hybridSearch;
+    this._workflow = client.workflows.hybridSearch;
     this._element = element;
     this._classPrefix = classPrefix;
     this._phrases = phrases;
@@ -47,7 +47,7 @@ class AnswerBox {
     this._syncButtonText();
     this._unsubscribes = [() => element.removeEventListener('click', callback),
     // cling to data rather than view, as we may miss view event when tab is inactive due to raf
-    workflow._answer._hub.on(_index.fields.data(), () => this._syncWofkflowStatus())];
+    workflow._answer._hub.on(_clientSdkWorkflow.fields.data(), () => this._syncWofkflowStatus())];
   }
   _handleClick({
     target,
@@ -69,7 +69,7 @@ class AnswerBox {
       meta: {
         unanswerable = false
       } = {}
-    } = this._workflow._answer._hub.states[_index.fields.data()];
+    } = this._workflow._answer._hub.states[_clientSdkWorkflow.fields.data()];
     switch (status) {
       case _constants2.STATUS.ERRONEOUS:
       case _constants2.STATUS.READY:

package/dist/cjs/defaults.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultLayouts = void 0;
+var _constants = require("./constants.js");
+var _templates = require("./layout/templates.js");
+/**
+ * Default layout options of each workflow, keyed by workflow name. The UI
+ * plugin seeds the workflow plugin's defaults store with these values at
+ * install. The tables mirror the workflow class hierarchy.
+ */
+
+const BASE_LAYOUTS = {
+  [_constants.ROLE.CONTAINER]: _constants.LAYOUT_TYPE.CONTAINER,
+  [_constants.ROLE.ERROR]: _constants.LAYOUT_TYPE.ERROR
+};
+const ANSWER_BASED_LAYOUTS = Object.assign({}, BASE_LAYOUTS, {
+  [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
+    placeholder: 'Ask a question'
+  }],
+  [_constants.ROLE.QUESTION]: [_constants.LAYOUT_TYPE.TEXT, {
+    tag: 'h2'
+  }],
+  [_constants.ROLE.ANSWER]: _constants.LAYOUT_TYPE.TYPEWRITER,
+  [_constants.ROLE.FEEDBACK]: _constants.LAYOUT_TYPE.FEEDBACK,
+  [_constants.ROLE.IMAGES]: [_constants.LAYOUT_TYPE.GALLERY, {
+    incremental: true,
+    itemType: 'image'
+  }],
+  [_constants.ROLE.SOURCES]: [_constants.LAYOUT_TYPE.LIST, {
+    incremental: true,
+    itemType: 'article',
+    templates: {
+      ordered: true
+    }
+  }],
+  [_constants.ROLE.AFFILIATION]: [_constants.LAYOUT_TYPE.AFFILIATION, {
+    incremental: true,
+    itemType: 'affiliation',
+    link: {
+      rel: 'noopener nofollow'
+    }
+  }]
+});
+function totalContent(layout, {
+  value
+}) {
+  if (value === undefined) {
+    return '';
+  }
+  const {
+    formatNumber
+  } = layout.templates.helpers;
+  const formatted = formatNumber(value);
+  const label = value === 1 ? 'result' : 'results';
+  return `${formatted} ${label}`;
+}
+const SEARCH_BASED_LAYOUTS = Object.assign({}, BASE_LAYOUTS, {
+  [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX],
+  [_constants.ROLE.PRODUCTS]: [_constants.LAYOUT_TYPE.LIST, {
+    incremental: true,
+    infiniteScroll: true
+  }],
+  [_constants.ROLE.KEYWORDS]: [_constants.LAYOUT_TYPE.TEXT, {
+    raw: true
+  }],
+  [_constants.ROLE.TOTAL]: [_constants.LAYOUT_TYPE.TEXT, {
+    raw: true,
+    templates: {
+      content: totalContent
+    }
+  }],
+  [_constants.ROLE.FACETS]: [_constants.LAYOUT_TYPE.FACETS],
+  [_constants.ROLE.SORT]: [_constants.LAYOUT_TYPE.SELECT],
+  [_constants.ROLE.MORE]: [_constants.LAYOUT_TYPE.MORE_BUTTON]
+});
+const defaultLayouts = exports.defaultLayouts = Object.freeze({
+  'ask': Object.freeze(Object.assign({}, ANSWER_BASED_LAYOUTS, {
+    [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
+      templates: {
+        buttonIcon: 'send'
+      }
+    }],
+    [_constants.ROLE.REASONING]: _constants.LAYOUT_TYPE.TYPEWRITER,
+    [_constants.ROLE.RELATED_RESOURCES]: [_constants.LAYOUT_TYPE.LIST, {
+      incremental: true,
+      itemType: 'article'
+    }],
+    [_constants.ROLE.QUERY_SUGGESTIONS]: _constants.LAYOUT_TYPE.OPTION_LIST,
+    [_constants.ROLE.FOLLOW_UP_QUESTIONS]: _constants.LAYOUT_TYPE.OPTION_LIST
+  })),
+  'search': Object.freeze(Object.assign({}, SEARCH_BASED_LAYOUTS)),
+  'hybrid-search': Object.freeze(Object.assign({}, ANSWER_BASED_LAYOUTS, SEARCH_BASED_LAYOUTS, {
+    [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
+      placeholder: ''
+    }],
+    [_constants.ROLE.QUESTION]: [_constants.LAYOUT_TYPE.TEXT, {
+      raw: true
+    }],
+    [_constants.ROLE.SOURCES]: [_constants.LAYOUT_TYPE.HORIZONTAL, {
+      incremental: true,
+      itemType: 'article',
+      templates: {
+        ordered: true,
+        article: _templates.compactArticle,
+        articleInfoBlock: _templates.compactArticleInfoBlock
+      }
+    }]
+  })),
+  'recommendation': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+    [_constants.ROLE.PRODUCTS]: _constants.LAYOUT_TYPE.LIST
+  })),
+  'explore': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+    [_constants.ROLE.RELATED_QUESTIONS]: [_constants.LAYOUT_TYPE.LIST, {
+      itemType: 'question',
+      link: {
+        rel: 'noopener nofollow'
+      }
+    }],
+    // TODO: should define by useLink()
+    [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
+      placeholder: 'Ask a question'
+    }]
+  })),
+  'history': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+    [_constants.ROLE.THREADS]: [_constants.LAYOUT_TYPE.THREADS, {
+      itemType: 'thread',
+      incremental: true
+    }],
+    [_constants.ROLE.NEW_THREAD]: [_constants.LAYOUT_TYPE.BUTTON, {
+      icon: 'plus',
+      text: 'New chat'
+    }]
+  })),
+  'conversation': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+    [_constants.ROLE.MESSAGES]: [_constants.LAYOUT_TYPE.MESSAGES, {
+      itemType: 'message',
+      incremental: true
+    }],
+    [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
+      placeholder: 'Ask a follow-up question',
+      clearOnSubmit: true,
+      blurOnSubmit: false,
+      disableWhenOngoing: true,
+      templates: {
+        buttonIcon: 'send'
+      }
+    }],
+    [_constants.ROLE.TITLE]: [_constants.LAYOUT_TYPE.TEXT, {
+      tag: 'div'
+    }],
+    [_constants.ROLE.RENAME]: [_constants.LAYOUT_TYPE.BUTTON, {
+      icon: 'pencil',
+      prompt: {
+        title: 'Rename thread',
+        placeholder: 'Thread name',
+        confirmText: 'Rename'
+      }
+    }],
+    [_constants.ROLE.SUBSCRIPTION]: [_constants.LAYOUT_TYPE.CHECKBOX, {
+      icon: 'bell',
+      text: 'Subscribe',
+      checkedIcon: 'bell-fill',
+      checkedText: 'Subscribed'
+    }]
+  }))
+});

package/dist/cjs/element/container/index.js

@@ -9,12 +9,24 @@ Object.defineProperty(exports, "MisoAskElement", {
     return _misoAsk.default;
   }
 });
+Object.defineProperty(exports, "MisoConversationElement", {
+  enumerable: true,
+  get: function () {
+    return _misoConversation.default;
+  }
+});
 Object.defineProperty(exports, "MisoExploreElement", {
   enumerable: true,
   get: function () {
     return _misoExplore.default;
   }
 });
+Object.defineProperty(exports, "MisoHistoryElement", {
+  enumerable: true,
+  get: function () {
+    return _misoHistory.default;
+  }
+});
 Object.defineProperty(exports, "MisoHybridSearchElement", {
   enumerable: true,
   get: function () {
@@ -35,6 +47,8 @@ Object.defineProperty(exports, "MisoSearchElement", {
 });
 var _misoAsk = _interopRequireDefault(require("./miso-ask.js"));
 var _misoExplore = _interopRequireDefault(require("./miso-explore.js"));
+var _misoHistory = _interopRequireDefault(require("./miso-history.js"));
+var _misoConversation = _interopRequireDefault(require("./miso-conversation.js"));
 var _misoHybridSearch = _interopRequireDefault(require("./miso-hybrid-search.js"));
 var _misoSearch = _interopRequireDefault(require("./miso-search.js"));
 var _misoRecommendation = _interopRequireDefault(require("./miso-recommendation.js"));

package/dist/cjs/element/container/miso-ask.js

@@ -19,12 +19,12 @@ class MisoAskElement extends _misoContainer.default {
   }
   _getWorkflow(client) {
     if (this.boundToActiveWorkflow) {
-      return client.ui.asks.active;
+      return client.workflows.asks.active;
     }
     return this._getWorkflowByParentQuestionId(client, this.parentQuestionId);
   }
   _getWorkflowByParentQuestionId(client, id) {
-    return client.ui.asks.getByParentQuestionId(id, {
+    return client.workflows.asks.getByParentQuestionId(id, {
       autoCreate: true
     });
   }
@@ -62,7 +62,7 @@ class MisoAskElement extends _misoContainer.default {
     await super.connectedCallback();
     if (document.body.contains(this)) {
       // in case already disconnected
-      const context = this._client.ui.asks;
+      const context = this._client.workflows.asks;
       this._unsubscribes = [...(this._unsubscribes || []), context.on('active', event => {
         if (!this.boundToActiveWorkflow) {
           return;

package/dist/cjs/element/container/miso-conversation.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContainer = _interopRequireDefault(require("./miso-container.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-conversation';
+class MisoConversationElement extends _misoContainer.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return _misoContainer.default.observedAttributes;
+  }
+  _getWorkflow(client) {
+    return client.workflows.conversation;
+  }
+}
+exports.default = MisoConversationElement;

package/dist/cjs/element/container/miso-explore.js

@@ -15,7 +15,7 @@ class MisoExploreElement extends _misoUnit.default {
     return _misoUnit.default.observedAttributes;
   }
   _getWorkflowByUnitId(client, unitId) {
-    return client.ui.explores.get(unitId);
+    return client.workflows.explores.get(unitId);
   }
 }
 exports.default = MisoExploreElement;

package/dist/cjs/element/container/miso-history.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContainer = _interopRequireDefault(require("./miso-container.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-history';
+class MisoHistoryElement extends _misoContainer.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return _misoContainer.default.observedAttributes;
+  }
+  _getWorkflow(client) {
+    return client.workflows.history;
+  }
+}
+exports.default = MisoHistoryElement;

package/dist/cjs/element/container/miso-hybrid-search.js

@@ -15,7 +15,7 @@ class MisoHybridSearchElement extends _misoContainer.default {
     return _misoContainer.default.observedAttributes;
   }
   _getWorkflow(client) {
-    return client.ui.hybridSearch;
+    return client.workflows.hybridSearch;
   }
 }
 exports.default = MisoHybridSearchElement;

package/dist/cjs/element/container/miso-recommendation.js

@@ -15,7 +15,7 @@ class MisoRecommendationElement extends _misoUnit.default {
     return _misoUnit.default.observedAttributes;
   }
   _getWorkflowByUnitId(client, unitId) {
-    return client.ui.recommendations.get(unitId);
+    return client.workflows.recommendations.get(unitId);
   }
 }
 exports.default = MisoRecommendationElement;

package/dist/cjs/element/container/miso-search.js

@@ -15,7 +15,7 @@ class MisoSearchElement extends _misoContainer.default {
     return _misoContainer.default.observedAttributes;
   }
   _getWorkflow(client) {
-    return client.ui.search;
+    return client.workflows.search;
   }
 }
 exports.default = MisoSearchElement;

package/dist/cjs/element/context/miso-follow-ups.js

@@ -20,7 +20,7 @@ class MisoFollowUpsElement extends _misoContext.default {
     this._unsubscribes = [];
   }
   _getContext(client) {
-    return client.ui.asks;
+    return client.workflows.asks;
   }
   _onContext(context, oldContext) {
     if (context === oldContext) {