@miso.ai/client-sdk-ui 1.12.0 → 1.12.1-beta.0

package/dist/cjs/actor/view.js

@@ -9,6 +9,7 @@ var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _proxy = _interopRequireDefault(require("../util/proxy.js"));
 var _tracker = _interopRequireDefault(require("./tracker.js"));
+var _utils = require("../element/util/utils.js");
 const _excluded = ["value", "error", "status", "meta"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -193,6 +194,15 @@ class ViewActor {
       silent
     });
   }
+  triggerAction(data) {
+    const {
+      element
+    } = this;
+    if (!element) {
+      return;
+    }
+    (0, _utils.triggerMisoAction)(element, data);
+  }
   _sliceData(data) {
     const {
         value,

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = exports.CHEVRON = void 0;
+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 _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,7 +21,8 @@ const ICON_NAME = {
   TRIANGLE: 'triangle',
   TRIANGLE_EQ: 'triangle-eq',
   CHEVRON: 'chevron',
-  CHEVRON_NEGATIVE: 'chevron-negative'
+  CHEVRON_NEGATIVE: 'chevron-negative',
+  BULB: 'bulb'
 };
 
 // CC0 SVGs
@@ -33,7 +34,10 @@ const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
 const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
 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>`;
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
+
+// 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 SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -56,4 +60,5 @@ const SEARCH = exports.SEARCH = _icon(ICON_NAME.SEARCH);
 const TRIANGLE = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 const TRIANGLE_EQ = exports.TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
 const CHEVRON = exports.CHEVRON = _icon(ICON_NAME.CHEVRON);
-const CHEVRON_NEGATIVE = exports.CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);
+const CHEVRON_NEGATIVE = exports.CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);
+const BULB = exports.BULB = _icon(ICON_NAME.BULB);

package/dist/cjs/constants.js

@@ -25,6 +25,7 @@ const ROLE = exports.ROLE = Object.freeze({
   ITEMS: 'items',
   QUESTION: 'question',
   ANSWER: 'answer',
+  REASONING: 'reasoning',
   IMAGES: 'images',
   SOURCES: 'sources',
   RELATED_RESOURCES: 'related_resources',
@@ -38,7 +39,7 @@ const ROLE = exports.ROLE = Object.freeze({
   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.IMAGES, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
+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.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
 function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sources = exports.relatedResources = exports.question = exports.querySuggestions = void 0;
+exports.thoughts = exports.sources = exports.relatedResources = exports.question = exports.querySuggestions = void 0;
 /**
  * The phrase displayed right before <miso-question>
  */
@@ -22,4 +22,5 @@ const querySuggestions = exports.querySuggestions = 'Related questions you can e
 /**
  * The phrase displayed right before <miso-related-resources>
  */
-const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';
+const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';
+const thoughts = exports.thoughts = 'Thoughts';

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

@@ -10,6 +10,7 @@ exports.sections = void 0;
 var _commons = require("@miso.ai/commons");
 var CONSTANTS = _interopRequireWildcard(require("./constants.js"));
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
+var _svgs = require("../../asset/svgs.js");
 var _templates = require("../common/templates.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 class Sections extends _templates.Sections {
@@ -34,7 +35,28 @@ class Sections extends _templates.Sections {
     return container(options, {
       name: 'answer',
       visibleWhen: 'ready'
-    }, [options.parentQuestionId ? '<hr>' : '', ...this.question(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+    }, [options.parentQuestionId ? '<hr>' : '', ...this.question(options), this.reasoning(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+  }
+  reasoning({
+    phrases,
+    reasoning: options = {}
+  } = {}) {
+    const {
+      element,
+      phraseText
+    } = this._helpers;
+    const classes = [];
+    options.hide !== false && classes.push('hidden');
+    options.expand && classes.push('expanded');
+    return element('miso-collapsible', {
+      classes,
+      'data-role': 'reasoning-container'
+    }, [element('div', {
+      classes: ['miso-collapsible__header'],
+      'data-role': 'toggle-expand'
+    }, [`<div class="miso-collapsible__icon">${options.icon || _svgs.BULB}</div>`, `<div class="miso-collapsible__title" data-role="title">${phraseText(phrases, 'thoughts')}</div>`, `<div class="miso-collapsible__toggle">${_svgs.CHEVRON}</div>`]), element('div', {
+      classes: ['miso-collapsible__body']
+    }, ['<miso-reasoning></miso-reasoning>'])]);
   }
   sources(options) {
     const {

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

@@ -116,7 +116,7 @@ const GETTERS = {
 };
 const METHODS = {
   toggleOpen: ['toggle', CLASS_OPEN],
-  open: ['open', CLASS_OPEN],
+  open: ['add', CLASS_OPEN],
   close: ['remove', CLASS_OPEN],
   toggleHidden: ['toggle', CLASS_SHOWN],
   show: ['add', CLASS_SHOWN],

package/dist/cjs/element/index.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "MisoBannerElement", {
-  enumerable: true,
-  get: function () {
-    return _misoBanner.default;
-  }
-});
+var _exportNames = {
+  containers: true,
+  roles: true,
+  combos: true
+};
 exports.roles = exports.containers = exports.combos = void 0;
 var containers = _interopRequireWildcard(require("./container/index.js"));
 exports.containers = containers;
@@ -16,6 +15,16 @@ var roles = _interopRequireWildcard(require("./role/index.js"));
 exports.roles = roles;
 var combos = _interopRequireWildcard(require("./combo/index.js"));
 exports.combos = combos;
-var _misoBanner = _interopRequireDefault(require("./miso-banner.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _index4 = require("./util/index.js");
+Object.keys(_index4).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index4[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index4[key];
+    }
+  });
+});
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

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

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "MisoQuestionElement", {
     return _misoQuestion.default;
   }
 });
+Object.defineProperty(exports, "MisoReasoningElement", {
+  enumerable: true,
+  get: function () {
+    return _misoReasoning.default;
+  }
+});
 Object.defineProperty(exports, "MisoRelatedQuestionsElement", {
   enumerable: true,
   get: function () {
@@ -125,6 +131,7 @@ var _misoResults = _interopRequireDefault(require("./miso-results.js"));
 var _misoProducts = _interopRequireDefault(require("./miso-products.js"));
 var _misoQuestion = _interopRequireDefault(require("./miso-question.js"));
 var _misoAnswer = _interopRequireDefault(require("./miso-answer.js"));
+var _misoReasoning = _interopRequireDefault(require("./miso-reasoning.js"));
 var _misoSources = _interopRequireDefault(require("./miso-sources.js"));
 var _misoImages = _interopRequireDefault(require("./miso-images.js"));
 var _misoRelatedResources = _interopRequireDefault(require("./miso-related-resources.js"));

package/dist/cjs/element/role/miso-reasoning.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoReasoningElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.REASONING
+    });
+  }
+  static get tagName() {
+    return 'miso-reasoning';
+  }
+}
+exports.default = MisoReasoningElement;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MisoBannerElement", {
+  enumerable: true,
+  get: function () {
+    return _misoBanner.default;
+  }
+});
+Object.defineProperty(exports, "MisoCollapsibleElement", {
+  enumerable: true,
+  get: function () {
+    return _misoCollapsible.default;
+  }
+});
+var _misoBanner = _interopRequireDefault(require("./miso-banner.js"));
+var _misoCollapsible = _interopRequireDefault(require("./miso-collapsible.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/util/miso-collapsible.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoUtility = _interopRequireDefault(require("./miso-utility.js"));
+var _utils = require("../utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-collapsible';
+const STATUS_EXPANDED = 'expanded';
+const STATUS_HIDDEN = 'hidden';
+const ACTIONS = {
+  expand: ['add', STATUS_EXPANDED],
+  collapse: ['remove', STATUS_EXPANDED],
+  hide: ['add', STATUS_HIDDEN],
+  show: ['remove', STATUS_HIDDEN]
+};
+const CLICKABLES = [{
+  role: 'expand',
+  action: 'expand'
+}, {
+  role: 'collapse',
+  action: 'collapse'
+}, {
+  role: 'toggle-expand',
+  action: 'toggleExpand'
+}];
+class MisoCollapsibleElement extends _misoUtility.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  constructor() {
+    super({
+      actions: Object.keys(ACTIONS),
+      clickables: CLICKABLES
+    });
+  }
+
+  // lifecycle //
+  toggleExpand() {
+    this.expanded ? this.collapse() : this.expand();
+  }
+}
+exports.default = MisoCollapsibleElement;
+(0, _utils.defineStatusGetters)(MisoCollapsibleElement.prototype, [STATUS_EXPANDED, STATUS_HIDDEN]);
+for (const [method, [action, status]] of Object.entries(ACTIONS)) {
+  MisoCollapsibleElement.prototype[method] = function () {
+    this.classList[action](status);
+    this[`_${method}`] && this[`_${method}`]();
+  };
+}

package/dist/cjs/element/util/miso-utility.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class MisoUtilityElement extends HTMLElement {
+  constructor({
+    actions = [],
+    clickables = []
+  } = {}) {
+    super();
+    this._actions = actions;
+    this._clickables = clickables;
+    this._unsubscribes = [];
+  }
+
+  // lifecycle //
+  async connectedCallback() {
+    const handleAction = event => this._handleAction(event);
+    const handleClick = event => this._handleClick(event);
+    this.addEventListener('miso:action', handleAction);
+    this.addEventListener('click', handleClick);
+    this._unsubscribes = [...this._unsubscribes, () => this.removeEventListener('miso:action', handleAction), () => this.removeEventListener('click', handleClick)];
+  }
+  disconnectedCallback() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
+  _handleAction(event) {
+    const {
+      target,
+      name
+    } = event.detail || {};
+    if (!name || !target || !this.matches(target)) {
+      return;
+    }
+    if (!this._actions.includes(name)) {
+      return;
+    }
+    if (this._doAction({
+      name
+    })) {
+      event.stopPropagation();
+    }
+  }
+  _doAction(args) {
+    const {
+      name
+    } = args;
+    this[name](args);
+    return true;
+  }
+  _handleClick(event) {
+    const {
+      target,
+      button
+    } = event;
+    if (button !== 0) {
+      return; // only left click
+    }
+    for (let {
+      role,
+      selector,
+      action
+    } of this._clickables) {
+      selector = selector || `[data-role="${role}"]`;
+      if (!selector) {
+        continue;
+      }
+      if (target.closest(selector)) {
+        this._doAction({
+          name: action
+        });
+        event.stopPropagation();
+        return;
+      }
+    }
+  }
+}
+exports.default = MisoUtilityElement;

package/dist/cjs/element/util/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerMisoAction = triggerMisoAction;
+function triggerMisoAction(element, data) {
+  element.dispatchEvent(new CustomEvent('miso:action', {
+    bubbles: true,
+    detail: data
+  }));
+}

package/dist/cjs/element/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyCoerce = applyCoerce;
+exports.defineStatusGetters = defineStatusGetters;
 exports.getClient = getClient;
 exports.getContainer = getContainer;
 exports.getMisoClient = getMisoClient;
@@ -84,4 +85,13 @@ function coerceDefault(str) {
     return num;
   }
   return str;
+}
+function defineStatusGetters(prototype, statuses) {
+  for (const status of statuses) {
+    Object.defineProperty(prototype, status, {
+      get() {
+        return this.classList.contains(status);
+      }
+    });
+  }
 }

package/dist/cjs/layout/container/container.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _constants = require("../../constants.js");
 var _raf = _interopRequireDefault(require("../raf.js"));
-var _misoBanner = _interopRequireDefault(require("../../element/miso-banner.js"));
+var _misoBanner = _interopRequireDefault(require("../../element/util/miso-banner.js"));
 var _viewables = _interopRequireDefault(require("../../util/viewables.js"));
 const _excluded = ["logo"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/layout/text/typewriter/index.js

@@ -119,17 +119,18 @@ class TypewriterLayout extends _progressive.default {
   }) {
     const prev = this._prevState;
     const {
-      value = '',
-      meta,
+      value: {
+        value = '',
+        stage,
+        finished
+      } = {},
       session,
-      status,
-      ongoing
+      status
     } = state;
-    const stage = meta && meta.answer_stage || 'result';
     const sameSession = (0, _utils.fromSameSession)(prev, state);
     const sameStreak = sameSession && stage === prev.stage;
     const streak = !prev ? 0 : sameStreak ? prev.streak : prev.streak + 1;
-    const doneAt = sameSession && prev && prev.doneAt || (status === _constants.STATUS.READY && !ongoing ? Date.now() : undefined);
+    const doneAt = sameSession && prev && prev.doneAt || (status === _constants.STATUS.READY && finished ? Date.now() : undefined);
     const done = doneAt !== undefined;
     return this._prevState = Object.freeze((0, _commons.trimObj)({
       session,

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.12.0';
+var _default = exports.default = '1.12.1-beta.0';

package/dist/cjs/workflow/answer-based.js

@@ -81,7 +81,11 @@ const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_OP
 }));
 const ROLES_OPTIONS = (0, _index4.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
   main: _constants.ROLE.ANSWER,
-  members: Object.keys(DEFAULT_LAYOUTS)
+  members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [_constants.ROLE.ANSWER]: _processors.mappingAnswerData,
+    [_constants.ROLE.REASONING]: _processors.mappingReasoningData
+  }
 });
 class AnswerBasedWorkflow extends _base.default {
   // constructor //

package/dist/cjs/workflow/ask.js

@@ -26,6 +26,7 @@ const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _answerBased.default.DEF
       buttonIcon: 'send'
     }
   }],
+  [_constants.ROLE.REASONING]: _index2.TypewriterLayout.type,
   [_constants.ROLE.RELATED_RESOURCES]: [_index2.ListLayout.type, {
     incremental: true,
     itemType: 'article'
@@ -149,6 +150,30 @@ class Ask extends _answerBased.default {
     return payload;
   }
 
+  // data //
+  _updateData(data) {
+    super._updateData(data);
+    this._triggerReasoningShowIfNecessary(data);
+  }
+  _triggerReasoningShowIfNecessary({
+    session,
+    value
+  } = {}) {
+    if (!value || !value.reasoning) {
+      return;
+    }
+    const context = this._getSessionContext(session);
+    if (context.reasoningShown) {
+      return;
+    }
+    context.reasoningShown = true;
+    const view = this._views.get(_constants.ROLE.REASONING);
+    view && view.triggerAction({
+      name: 'show',
+      target: '[data-role="reasoning-container"]'
+    });
+  }
+
   // interactions //
   _writeAskPropertiesToInteraction(payload, args) {
     const root_question_id = this.rootQuestionId;

package/dist/cjs/workflow/processors.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.buildBaseInteraction = buildBaseInteraction;
 exports.concatItemsFromMoreResponse = concatItemsFromMoreResponse;
 exports.getRevision = getRevision;
+exports.mappingAnswerData = mappingAnswerData;
+exports.mappingReasoningData = mappingReasoningData;
 exports.mappingSortData = mappingSortData;
 exports.mergeInteraction = mergeInteraction;
 exports.retainFacetCountsInData = retainFacetCountsInData;
@@ -49,6 +51,35 @@ function mappingSortData(_, {
     });
   });
 }
+function mappingAnswerData(data) {
+  if (!data || !data.value) {
+    return data;
+  }
+  const {
+    answer = '',
+    answer_stage,
+    finished
+  } = data.value;
+  return Object.freeze({
+    value: answer,
+    stage: answer_stage,
+    finished: !!finished
+  });
+}
+function mappingReasoningData(data) {
+  if (!data || !data.value) {
+    return data;
+  }
+  const {
+    reasoning = '',
+    reasoning_finished
+  } = data.value;
+  return Object.freeze({
+    value: reasoning,
+    stage: 'reasoning',
+    finished: !!reasoning_finished
+  });
+}
 function findDefaultSortOption(options) {
   for (const option of options) {
     if (option.default) {

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.12.0"
+    "@miso.ai/commons": "1.12.1-beta.0"
   },
-  "version": "1.12.0"
+  "version": "1.12.1-beta.0"
 }

package/src/actor/view.js

@@ -3,6 +3,7 @@ import { STATUS, ROLE, isDataRole } from '../constants.js';
 import * as fields from './fields.js';
 import ProxyElement from '../util/proxy.js';
 import Tracker from './tracker.js';
+import { triggerMisoAction } from '../element/util/utils.js';
 
 function statesEqual(a, b) {
   return a === b || (a && b &&
@@ -159,6 +160,14 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
+  triggerAction(data) {
+    const { element } = this;
+    if (!element) {
+      return;
+    }
+    triggerMisoAction(element, data);
+  }
+
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
     const sliced = {

package/src/asset/svgs.js

@@ -17,6 +17,7 @@ const ICON_NAME = {
   TRIANGLE_EQ: 'triangle-eq',
   CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative',
+  BULB: 'bulb',
 };
 
 // CC0 SVGs
@@ -25,14 +26,14 @@ const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24
 
 // Custom SVGs
 const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
-
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
-
 const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
-
 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>`;
 
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
+// 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 SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -64,3 +65,4 @@ export const TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 export const TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
 export const CHEVRON = _icon(ICON_NAME.CHEVRON);
 export const CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);
+export const BULB = _icon(ICON_NAME.BULB);

package/src/constants.js

@@ -15,6 +15,7 @@ export const ROLE = Object.freeze({
   ITEMS: 'items',
   QUESTION: 'question',
   ANSWER: 'answer',
+  REASONING: 'reasoning',
   IMAGES: 'images',
   SOURCES: 'sources',
   RELATED_RESOURCES: 'related_resources',
@@ -37,6 +38,7 @@ const DATA_ROLE_SET = new Set([
   ROLE.ITEMS,
   ROLE.QUESTION,
   ROLE.ANSWER,
+  ROLE.REASONING,
   ROLE.IMAGES,
   ROLE.SOURCES,
   ROLE.RELATED_RESOURCES,

package/src/defaults/ask/phrases.js

@@ -17,3 +17,5 @@ export const querySuggestions = 'Related questions you can explore';
  * The phrase displayed right before <miso-related-resources>
  */
 export const relatedResources = 'Go beyond, and learn more about this topic';
+
+export const thoughts = 'Thoughts';

package/src/defaults/ask/templates.js

@@ -1,6 +1,7 @@
 import { externalize } from '@miso.ai/commons';
 import * as CONSTANTS from './constants.js';
 import * as DEFAULT_PHRASES from './phrases.js';
+import { CHEVRON, BULB } from '../../asset/svgs.js';
 import { Helpers, Sections as _Sections } from '../common/templates.js';
 
 class Sections extends _Sections {
@@ -22,11 +23,37 @@ class Sections extends _Sections {
     return container(options, { name: 'answer', visibleWhen: 'ready' }, [
       options.parentQuestionId ? '<hr>' : '',
       ...this.question(options),
+      this.reasoning(options),
       '<miso-answer></miso-answer>',
       '<miso-feedback></miso-feedback>',
     ]);
   }
 
+  reasoning({ phrases, reasoning: options = {} } = {}) {
+    const { element, phraseText } = this._helpers;
+    const classes = [];
+    options.hide !== false && classes.push('hidden');
+    options.expand && classes.push('expanded');
+    return element('miso-collapsible', {
+      classes,
+      'data-role': 'reasoning-container',
+    }, [
+      element('div', {
+        classes: ['miso-collapsible__header'],
+        'data-role': 'toggle-expand',
+      }, [
+        `<div class="miso-collapsible__icon">${options.icon || BULB}</div>`,
+        `<div class="miso-collapsible__title" data-role="title">${phraseText(phrases, 'thoughts')}</div>`,
+        `<div class="miso-collapsible__toggle">${CHEVRON}</div>`,
+      ]),
+      element('div', {
+        classes: ['miso-collapsible__body'],
+      }, [
+        '<miso-reasoning></miso-reasoning>',
+      ]),
+    ]);
+  }
+
   sources(options) {
     const { container, phrase } = this._helpers;
     return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [

package/src/defaults/hybrid-search/answer-box.js

@@ -111,7 +111,7 @@ const GETTERS = {
 
 const METHODS = {
   toggleOpen: ['toggle', CLASS_OPEN],
-  open: ['open', CLASS_OPEN],
+  open: ['add', CLASS_OPEN],
   close: ['remove', CLASS_OPEN],
   toggleHidden: ['toggle', CLASS_SHOWN],
   show: ['add', CLASS_SHOWN],

package/src/element/index.js

@@ -4,4 +4,4 @@ import * as combos from './combo/index.js';
 
 export { containers, roles, combos };
 
-export { default as MisoBannerElement } from './miso-banner.js';
+export * from './util/index.js';

package/src/element/role/index.js

@@ -6,6 +6,7 @@ export { default as MisoResultsElement } from './miso-results.js';
 export { default as MisoProductsElement } from './miso-products.js';
 export { default as MisoQuestionElement } from './miso-question.js';
 export { default as MisoAnswerElement } from './miso-answer.js';
+export { default as MisoReasoningElement } from './miso-reasoning.js';
 export { default as MisoSourcesElement } from './miso-sources.js';
 export { default as MisoImagesElement } from './miso-images.js';
 export { default as MisoRelatedResourcesElement } from './miso-related-resources.js';

package/src/element/role/miso-reasoning.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoReasoningElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.REASONING,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-reasoning';
+  }
+
+}

package/src/element/util/index.js

@@ -0,0 +1,2 @@
+export { default as MisoBannerElement } from './miso-banner.js';
+export { default as MisoCollapsibleElement } from './miso-collapsible.js';

package/src/element/util/miso-collapsible.js

@@ -0,0 +1,49 @@
+import MisoUtilityElement from './miso-utility.js';
+import { defineStatusGetters } from '../utils.js';
+
+const TAG_NAME = 'miso-collapsible';
+
+const STATUS_EXPANDED = 'expanded';
+const STATUS_HIDDEN = 'hidden';
+
+const ACTIONS = {
+  expand: ['add', STATUS_EXPANDED],
+  collapse: ['remove', STATUS_EXPANDED],
+  hide: ['add', STATUS_HIDDEN],
+  show: ['remove', STATUS_HIDDEN],
+};
+
+const CLICKABLES = [
+  { role: 'expand', action: 'expand' },
+  { role: 'collapse', action: 'collapse' },
+  { role: 'toggle-expand', action: 'toggleExpand' },
+];
+
+export default class MisoCollapsibleElement extends MisoUtilityElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  constructor() {
+    super({
+      actions: Object.keys(ACTIONS),
+      clickables: CLICKABLES,
+    });
+  }
+
+  // lifecycle //
+  toggleExpand() {
+    this.expanded ? this.collapse() : this.expand();
+  }
+  
+}
+
+defineStatusGetters(MisoCollapsibleElement.prototype, [STATUS_EXPANDED, STATUS_HIDDEN]);
+
+for (const [method, [action, status]] of Object.entries(ACTIONS)) {
+  MisoCollapsibleElement.prototype[method] = function() {
+    this.classList[action](status);
+    this[`_${method}`] && this[`_${method}`]();
+  };
+}

package/src/element/util/miso-utility.js

@@ -0,0 +1,69 @@
+export default class MisoUtilityElement extends HTMLElement {
+
+  constructor({ actions = [], clickables = [] } = {}) {
+    super();
+    this._actions = actions;
+    this._clickables = clickables;
+    this._unsubscribes = [];
+  }
+
+  // lifecycle //
+  async connectedCallback() {
+    const handleAction = event => this._handleAction(event);
+    const handleClick = event => this._handleClick(event);
+
+    this.addEventListener('miso:action', handleAction);
+    this.addEventListener('click', handleClick);
+
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      () => this.removeEventListener('miso:action', handleAction),
+      () => this.removeEventListener('click', handleClick),
+    ];
+  }
+
+  disconnectedCallback() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
+
+  _handleAction(event) {
+    const { target, name } = event.detail || {};
+    if (!name || !target || !this.matches(target)) {
+      return;
+    }
+    if (!this._actions.includes(name)) {
+      return;
+    }
+    if (this._doAction({ name })) {
+      event.stopPropagation();
+    }
+  }
+
+  _doAction(args) {
+    const { name } = args;
+    this[name](args);
+    return true;
+  }
+
+  _handleClick(event) {
+    const { target, button } = event;
+    if (button !== 0) {
+      return; // only left click
+    }
+    for (let { role, selector, action } of this._clickables) {
+      selector = selector || `[data-role="${role}"]`;
+      if (!selector) {
+        continue;
+      }
+      if (target.closest(selector)) {
+        this._doAction({ name: action });
+        event.stopPropagation();
+        return;
+      }
+    }
+  }
+
+}

package/src/element/util/utils.js

@@ -0,0 +1,3 @@
+export function triggerMisoAction(element, data) {
+  element.dispatchEvent(new CustomEvent('miso:action', { bubbles: true, detail: data }));
+}

package/src/element/utils.js

@@ -83,3 +83,13 @@ function coerceDefault(str) {
   }
   return str;
 }
+
+export function defineStatusGetters(prototype, statuses) {
+  for (const status of statuses) {
+    Object.defineProperty(prototype, status, {
+      get() {
+        return this.classList.contains(status);
+      },
+    });
+  }
+}

package/src/layout/container/container.js

@@ -1,6 +1,6 @@
 import { ROLE, STATUS } from '../../constants.js';
 import RafLayout from '../raf.js';
-import MisoBannerElement from '../../element/miso-banner.js';
+import MisoBannerElement from '../../element/util/miso-banner.js';
 import Viewables from '../../util/viewables.js';
 
 const TYPE = 'container';

package/src/layout/text/typewriter/index.js

@@ -107,13 +107,12 @@ export default class TypewriterLayout extends ProgressiveLayout {
 
   _preprocess({ state }) {
     const prev = this._prevState;
-    const { value = '', meta, session, status, ongoing } = state;
-    const stage = meta && meta.answer_stage || 'result';
+    const { value: { value = '', stage, finished } = {}, session, status } = state;
     const sameSession = fromSameSession(prev, state);
     const sameStreak = sameSession && (stage === prev.stage);
     const streak = !prev ? 0 : sameStreak ? prev.streak : prev.streak + 1;
 
-    const doneAt = (sameSession && prev && prev.doneAt) || (status === STATUS.READY && !ongoing ? Date.now() : undefined);
+    const doneAt = (sameSession && prev && prev.doneAt) || (status === STATUS.READY && finished ? Date.now() : undefined);
     const done = doneAt !== undefined;
 
     return this._prevState = Object.freeze(trimObj({

package/src/version.js

@@ -1 +1 @@
-export default '1.12.0';
+export default '1.12.1-beta.0';

package/src/workflow/answer-based.js

@@ -5,7 +5,7 @@ import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions, autoQuery as autoQueryFn, DEFAULT_AUTO_QUERY_PARAM, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { writeAnswerStageToMeta, writeEventTargetToInteraction, mergeInteraction } from './processors.js';
+import { mappingAnswerData, mappingReasoningData, writeAnswerStageToMeta, writeEventTargetToInteraction, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 import { isTracked, markAsTracked } from '../util/trackers.js';
 
@@ -65,6 +65,10 @@ const DEFAULT_OPTIONS = Object.freeze({
 const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
   main: ROLE.ANSWER,
   members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [ROLE.ANSWER]: mappingAnswerData,
+    [ROLE.REASONING]: mappingReasoningData,
+  },
 });
 
 export default class AnswerBasedWorkflow extends Workflow {

package/src/workflow/ask.js

@@ -2,7 +2,7 @@ import { defineValues, trimObj, API } from '@miso.ai/commons';
 import AnswerBasedWorkflow from './answer-based.js';
 import { fields } from '../actor/index.js';
 import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { OptionListLayout, ListLayout, SearchBoxLayout } from '../layout/index.js';
+import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 
@@ -18,6 +18,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 const DEFAULT_LAYOUTS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_LAYOUTS,
   [ROLE.QUERY]: [SearchBoxLayout.type, { templates: { buttonIcon: 'send' } }],
+  [ROLE.REASONING]: TypewriterLayout.type,
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
 });
@@ -130,6 +131,25 @@ export default class Ask extends AnswerBasedWorkflow {
     return payload;
   }
 
+  // data //
+  _updateData(data) {
+    super._updateData(data);
+    this._triggerReasoningShowIfNecessary(data);
+  }
+
+  _triggerReasoningShowIfNecessary({ session, value } = {}) {
+    if (!value || !value.reasoning) {
+      return;
+    }
+    const context = this._getSessionContext(session);
+    if (context.reasoningShown) {
+      return;
+    }
+    context.reasoningShown = true;
+    const view = this._views.get(ROLE.REASONING);
+    view && view.triggerAction({ name: 'show', target: '[data-role="reasoning-container"]' });
+  }
+
   // interactions //
   _writeAskPropertiesToInteraction(payload, args) {
     const root_question_id = this.rootQuestionId;

package/src/workflow/processors.js

@@ -22,6 +22,22 @@ export function mappingSortData(_, { hub, workflowOptions = {} } = {}) {
   });
 }
 
+export function mappingAnswerData(data) {
+  if (!data || !data.value) {
+    return data;
+  }
+  const { answer = '', answer_stage, finished } = data.value;
+  return Object.freeze({ value: answer, stage: answer_stage, finished: !!finished });
+}
+
+export function mappingReasoningData(data) {
+  if (!data || !data.value) {
+    return data;
+  }
+  const { reasoning = '', reasoning_finished } = data.value;
+  return Object.freeze({ value: reasoning, stage: 'reasoning', finished: !!reasoning_finished });
+}
+
 function findDefaultSortOption(options) {
   for (const option of options) {
     if (option.default) {