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

package/dist/cjs/actor/fields.js

@@ -14,15 +14,11 @@ exports.query = query;
 exports.request = request;
 exports.response = response;
 exports.session = session;
-exports.suggestions = suggestions;
 exports.tracker = tracker;
 exports.view = view;
 function session() {
   return 'session';
 }
-function suggestions() {
-  return 'suggestions';
-}
 function completions() {
   return 'completions';
 }

package/dist/cjs/actor/view.js

@@ -9,25 +9,32 @@ 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+//import { triggerMisoAction } from '../element/util/utils.js';
+
 function statesEqual(a, b) {
   return a === b || a && b && a.status === b.status && a.error === b.error && a.value === b.value &&
   // skip deep equals
-  a.ongoing === b.ongoing && sessionEquals(a.session, b.session);
+  a.ongoing === b.ongoing && stateEmptyness(a) === stateEmptyness(b) &&
+  // TODO: ad-hoc
+  sessionEquals(a.session, b.session);
 }
 function sessionEquals(a, b) {
   return a === b || a && b && a.uuid === b.uuid;
 }
+function stateEmptyness(data) {
+  return data && data.meta && data.meta.empty;
+}
 class ViewActor {
   constructor(views, role) {
     this._events = new _commons.EventEmitter({
       target: this
     });
     this._views = views;
+    // TODO: we should pull this up to views, for the results are also used in judging container emptyness
     this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
     (0, _commons.defineValues)(this, {
       role,
@@ -113,6 +120,9 @@ class ViewActor {
     }
     return this._tracker;
   }
+  get workflow() {
+    return this._views._workflow;
+  }
   get workflowOptions() {
     return this._views._options.resolved;
   }
@@ -162,7 +172,7 @@ class ViewActor {
       request,
       meta,
       data: value
-    }, getDataEmptyness(data));
+    }, getDataEmptyness(this.role, data));
 
     // render
     const notifyUpdate = (state = {}, options) => {
@@ -194,15 +204,17 @@ class ViewActor {
       silent
     });
   }
+
+  /*
   triggerAction(data) {
-    const {
-      element
-    } = this;
+    const { element } = this;
     if (!element) {
       return;
     }
-    (0, _utils.triggerMisoAction)(element, data);
+    triggerMisoAction(element, data);
   }
+  */
+
   _sliceData(data) {
     const {
         value,
@@ -219,12 +231,12 @@ class ViewActor {
     if (this.role === _constants.ROLE.CONTAINER) {
       // pass empty/nonempty information
       sliced.meta = Object.assign({}, meta, {
-        empty: this._isContainerEmpty(value)
+        empty: this._isContainerEmpty(data)
       });
     }
     return (0, _commons.trimObj)(sliced);
   }
-  _isContainerEmpty(value) {
+  _isContainerEmpty(data) {
     const {
       element
     } = this;
@@ -239,14 +251,10 @@ class ViewActor {
       if (!(0, _constants.isDataRole)(role)) {
         continue;
       }
-      let sliced = value && value[role];
-      if (role === _constants.ROLE.QUERY_SUGGESTIONS) {
-        // special case: query suggestions -> look up value from hub
-        // TODO: adhoc
-        const data = this.hub.states[fields.suggestions()];
-        sliced = data && data.value;
-      }
-      if (sliced && sliced.length !== 0) {
+      // respect data mapping
+      const mapping = asMappingFunction((this._views._roles.mappings || {})[role] || role);
+      const sliced = mapping(data, this); // TODO: the view passed in should be the view of the role, not container role
+      if (!isDateValueEmpty(role, sliced)) {
         return false;
       }
     }
@@ -289,17 +297,21 @@ function asMappingFunction(fn) {
       throw new Error(`Invalid mapping function: ${fn}`);
   }
 }
-function getDataEmptyness(data) {
+function getDataEmptyness(role, data) {
   return isDataStatusRelevantToEmptyness(data) ? {
-    empty: !!isDateValueEmpty(data)
+    empty: !!isDateValueEmpty(role, data && data.value)
   } : {};
 }
 function isDataStatusRelevantToEmptyness(data) {
   return data.status === _constants.STATUS.READY && !data.ongoing;
 }
-function isDateValueEmpty(data) {
-  const {
-    value
-  } = data;
-  return value === undefined || (Array.isArray(value) || typeof value === 'string') && !value.length;
+function isDateValueEmpty(role, value) {
+  // TODO: ad-hoc
+  switch (role) {
+    case _constants.ROLE.ANSWER:
+    case _constants.ROLE.REASONING:
+      return !value || !value.value;
+    default:
+      return value === undefined || (Array.isArray(value) || typeof value === 'string') && !value.length;
+  }
 }

package/dist/cjs/actor/views.js

@@ -22,7 +22,8 @@ class ViewsActor {
     options
   }) {
     this._hub = hub;
-    this._workflowName = workflow;
+    this._workflow = workflow;
+    this._workflowName = workflow._name;
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
@@ -189,19 +190,6 @@ class ViewsActor {
     data = this._getData(data);
     // container first
     let views = this._getViews(true);
-    if (!force && data._inst) {
-      const {
-        includes,
-        excludes
-      } = data._inst;
-      if (includes) {
-        // always include containers
-        views = views.filter(view => view.role === _constants.ROLE.CONTAINER || includes.includes(view.role));
-      }
-      if (excludes) {
-        views = views.filter(view => !excludes.includes(view.role));
-      }
-    }
     await Promise.all(views.map(view => view.refresh({
       force,
       data

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

@@ -23,11 +23,24 @@ class Sections extends _templates.Sections {
     const {
       container
     } = this._helpers;
-    return [...super.answerGroup(options), container(options, {
+    return [this.question(options), this.reasoning(options), this.answer(options), this.affiliation(options), this.sources(options), container(options, {
       name: 'bottom-spacing',
       visibleWhen: 'ongoing'
     })];
   }
+  question(options) {
+    const {
+      container,
+      phrase
+    } = this._helpers;
+    return container(options, {
+      name: 'question',
+      visibleWhen: 'ready'
+    }, [options.parentQuestionId ? '<hr>' : '', phrase(options, {
+      name: 'question',
+      tag: 'div'
+    }), '<miso-question></miso-question>']);
+  }
   answer(options) {
     const {
       container
@@ -35,28 +48,33 @@ class Sections extends _templates.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>']);
+    }, ['<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
   }
-  reasoning({
-    phrases,
-    reasoning: options = {}
-  } = {}) {
+  reasoning(options = {}) {
+    const {
+      phrases,
+      reasoning: reasoningOptions = {}
+    } = options;
     const {
+      container,
       element,
       phraseText
     } = this._helpers;
     const classes = [];
-    options.hide !== false && classes.push('hidden');
-    options.expand && classes.push('expanded');
-    return element('miso-collapsible', {
+    //reasoningOptions.hide !== false && classes.push('hidden');
+    reasoningOptions.expand && classes.push('expanded');
+    return container(options, {
+      name: 'reasoning',
+      visibleWhen: 'nonempty'
+    }, [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', {
+    }, [`<div class="miso-collapsible__icon">${reasoningOptions.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>'])]);
+    }, ['<miso-reasoning></miso-reasoning>'])])]);
   }
   sources(options) {
     const {

package/dist/cjs/layout/input/option-list.js

@@ -77,16 +77,9 @@ class OptionListLayout extends _template.default {
   }
   initialize(view) {
     const {
-      proxyElement,
-      hub
+      proxyElement
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), hub.on(_index.fields.suggestions(), () => this._handleInput()) // TODO: use data mapping
-    ];
-  }
-  _preprocess() {
-    return super._preprocess({
-      state: this._view.hub.states[_index.fields.suggestions()] // TODO: use data mapping
-    });
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e))];
   }
   _render(element, data, controls) {
     super._render(element, data, controls);

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

@@ -130,7 +130,7 @@ class TypewriterLayout extends _progressive.default {
     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 && finished ? Date.now() : undefined);
+    const doneAt = sameSession && prev && prev.doneAt || (status === _constants.STATUS.READY && finished ? performance.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.1-beta.1';
+var _default = exports.default = '1.12.1-beta.2';

package/dist/cjs/workflow/ask.js

@@ -47,7 +47,10 @@ const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _answerBased.default.DEF
   trackers: DEFAULT_TRACKERS
 }));
 const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_answerBased.default.ROLES_OPTIONS, {
-  members: Object.keys(DEFAULT_LAYOUTS)
+  members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [_constants.ROLE.QUERY_SUGGESTIONS]: _processors.mappingSuggestionsData
+  }
 });
 class Ask extends _answerBased.default {
   constructor(context, parentQuestionId) {
@@ -69,24 +72,8 @@ class Ask extends _answerBased.default {
     });
   }
   _initSubscriptions(args) {
-    this._setSuggestedQuestions();
     super._initSubscriptions(args);
-  }
-  _setSuggestedQuestions() {
-    const {
-      previous
-    } = this;
-    if (!previous) {
-      return;
-    }
-    // TODO: write question_source from payload._meta, so we don't need to write it to session.meta
-    const values = previous.states[_index.fields.data()].value;
-    const value = values.suggested_followup_questions || values.followup_questions || [];
-    this._hub.update(_index.fields.suggestions(), {
-      value: value.map(text => ({
-        text
-      }))
-    });
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.view(_constants.ROLE.REASONING), state => this._onReasoningViewUpdate(state))];
   }
   _initSession(args) {
     // register at context
@@ -153,25 +140,52 @@ class Ask extends _answerBased.default {
   // data //
   _updateData(data) {
     super._updateData(data);
-    this._triggerReasoningShowIfNecessary(data);
+    this._triggerSuggestionsRefreshIfNecessary();
+    this._showReasoningContainerIfNecessary(data);
+  }
+  _triggerSuggestionsRefreshIfNecessary() {
+    const {
+      next
+    } = this;
+    if (!next) {
+      return;
+    }
+    const view = next._views.get(_constants.ROLE.QUERY_SUGGESTIONS);
+    view && view.refresh();
   }
-  _triggerReasoningShowIfNecessary({
+  _showReasoningContainerIfNecessary({
     session,
     value
   } = {}) {
     if (!value || !value.reasoning) {
       return;
     }
+    // TODO: shall we solve this issue with container?
+    // TODO: shall we just look up on the miso-collapse element?
     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"]'
-    });
+    const element = this._getReasoningContainerElement();
+    if (!element) {
+      return;
+    }
+    if (typeof element.show === 'function') {
+      element.show();
+      context.reasoningShown = true;
+    }
+  }
+
+  // view //
+  _onReasoningViewUpdate({
+    status,
+    ongoing
+  }) {
+    if (status !== _constants.STATUS.READY || ongoing) {
+      return;
+    }
+    const element = this._getReasoningContainerElement();
+    element && element.classList.add('done');
   }
 
   // interactions //
@@ -219,6 +233,11 @@ class Ask extends _answerBased.default {
       this._questionId = undefined;
     }
   }
+  _getReasoningContainerElement() {
+    const view = this._views.get(_constants.ROLE.REASONING);
+    const element = view && view.element;
+    return element && element.closest('[data-role="reasoning-container"]');
+  }
 
   // destroy //
   _destroy(options) {

package/dist/cjs/workflow/base.js

@@ -63,7 +63,6 @@ class Workflow extends _commons.Component {
   }
   _initProperties() {}
   _initActors({
-    name,
     roles
   }) {
     const hub = this._hub;
@@ -81,7 +80,7 @@ class Workflow extends _commons.Component {
       layouts,
       roles,
       options,
-      workflow: name
+      workflow: this
     });
     this._interactions = new _index.InteractionsActor(hub, {
       client,

package/dist/cjs/workflow/hybrid-search-views.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _constants = require("../constants.js");
 var _hybridSearchResults = _interopRequireDefault(require("./hybrid-search-results.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function getSubworkflowByRole(role) {

package/dist/cjs/workflow/processors.js

@@ -9,6 +9,7 @@ exports.getRevision = getRevision;
 exports.mappingAnswerData = mappingAnswerData;
 exports.mappingReasoningData = mappingReasoningData;
 exports.mappingSortData = mappingSortData;
+exports.mappingSuggestionsData = mappingSuggestionsData;
 exports.mergeInteraction = mergeInteraction;
 exports.retainFacetCountsInData = retainFacetCountsInData;
 exports.writeAffiliationInfoToInteraction = writeAffiliationInfoToInteraction;
@@ -51,9 +52,17 @@ function mappingSortData(_, {
     });
   });
 }
+function findDefaultSortOption(options) {
+  for (const option of options) {
+    if (option.default) {
+      return option;
+    }
+  }
+  return options[0];
+}
 function mappingAnswerData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   const {
     answer = '',
@@ -68,7 +77,7 @@ function mappingAnswerData(data) {
 }
 function mappingReasoningData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   const {
     reasoning = '',
@@ -80,13 +89,15 @@ function mappingReasoningData(data) {
     finished: !!reasoning_finished
   });
 }
-function findDefaultSortOption(options) {
-  for (const option of options) {
-    if (option.default) {
-      return option;
-    }
-  }
-  return options[0];
+function mappingSuggestionsData(_, {
+  workflow
+} = {}) {
+  const previous = workflow.previous;
+  const values = previous && previous.states[_index.fields.data()].value;
+  const value = values && (values.suggested_followup_questions || values.followup_questions || []);
+  return value && value.map(text => ({
+    text
+  }));
 }
 
 // data //

package/package.json

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

package/src/actor/fields.js

@@ -2,10 +2,6 @@ export function session() {
   return 'session';
 }
 
-export function suggestions() {
-  return 'suggestions';
-}
-
 export function completions() {
   return 'completions';
 }

package/src/actor/view.js

@@ -3,7 +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';
+//import { triggerMisoAction } from '../element/util/utils.js';
 
 function statesEqual(a, b) {
   return a === b || (a && b &&
@@ -11,6 +11,7 @@ function statesEqual(a, b) {
     a.error === b.error &&
     a.value === b.value && // skip deep equals
     a.ongoing === b.ongoing &&
+    stateEmptyness(a) === stateEmptyness(b) && // TODO: ad-hoc
     sessionEquals(a.session, b.session));
 }
 
@@ -18,11 +19,16 @@ function sessionEquals(a, b) {
   return a === b || (a && b && a.uuid === b.uuid);
 }
 
+function stateEmptyness(data) {
+  return data && data.meta && data.meta.empty;
+}
+
 export default class ViewActor {
 
   constructor(views, role) {
     this._events = new EventEmitter({ target: this });
     this._views = views;
+    // TODO: we should pull this up to views, for the results are also used in judging container emptyness
     this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
 
     defineValues(this, {
@@ -103,6 +109,10 @@ export default class ViewActor {
     }
     return this._tracker;
   }
+
+  get workflow() {
+    return this._views._workflow;
+  }
   
   get workflowOptions() {
     return this._views._options.resolved;
@@ -138,7 +148,7 @@ export default class ViewActor {
     }
 
     const { session, status, ongoing, request, meta, value } = data;
-    const baseState = { session, status, ongoing, request, meta, data: value, ...getDataEmptyness(data) };
+    const baseState = { session, status, ongoing, request, meta, data: value, ...getDataEmptyness(this.role, data) };
 
     // render
     const notifyUpdate = (state = {}, options) => {
@@ -160,6 +170,7 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
+  /*
   triggerAction(data) {
     const { element } = this;
     if (!element) {
@@ -167,6 +178,7 @@ export default class ViewActor {
     }
     triggerMisoAction(element, data);
   }
+  */
 
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
@@ -181,13 +193,13 @@ export default class ViewActor {
       // pass empty/nonempty information
       sliced.meta = {
         ...meta,
-        empty: this._isContainerEmpty(value),
+        empty: this._isContainerEmpty(data),
       };
     }
     return trimObj(sliced);
   }
 
-  _isContainerEmpty(value) {
+  _isContainerEmpty(data) {
     const { element } = this;
     if (!element) {
       return false;
@@ -198,14 +210,10 @@ export default class ViewActor {
       if (!isDataRole(role)) {
         continue;
       }
-      let sliced = value && value[role];
-      if (role === ROLE.QUERY_SUGGESTIONS) {
-        // special case: query suggestions -> look up value from hub
-        // TODO: adhoc
-        const data = this.hub.states[fields.suggestions()];
-        sliced = data && data.value;
-      }
-      if (sliced && sliced.length !== 0) {
+      // respect data mapping
+      const mapping = asMappingFunction((this._views._roles.mappings || {})[role] || role);
+      const sliced = mapping(data, this); // TODO: the view passed in should be the view of the role, not container role
+      if (!isDateValueEmpty(role, sliced)) {
         return false;
       }
     }
@@ -257,15 +265,21 @@ function asMappingFunction(fn) {
   }
 }
 
-function getDataEmptyness(data) {
-  return isDataStatusRelevantToEmptyness(data) ? { empty: !!isDateValueEmpty(data) } : {};
+function getDataEmptyness(role, data) {
+  return isDataStatusRelevantToEmptyness(data) ? { empty: !!isDateValueEmpty(role, data && data.value) } : {};
 }
 
 function isDataStatusRelevantToEmptyness(data) {
   return data.status === STATUS.READY && !data.ongoing;
 }
 
-function isDateValueEmpty(data) {
-  const { value } = data;
-  return value === undefined || ((Array.isArray(value) || typeof value === 'string') && !value.length);
+function isDateValueEmpty(role, value) {
+  // TODO: ad-hoc
+  switch (role) {
+    case ROLE.ANSWER:
+    case ROLE.REASONING:
+      return !value || !value.value;
+    default:
+      return value === undefined || ((Array.isArray(value) || typeof value === 'string') && !value.length);
+  }
 }

package/src/actor/views.js

@@ -16,7 +16,8 @@ export default class ViewsActor {
     options,
   }) {
     this._hub = hub;
-    this._workflowName = workflow;
+    this._workflow = workflow;
+    this._workflowName = workflow._name;
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
@@ -193,17 +194,6 @@ export default class ViewsActor {
     // container first
     let views = this._getViews(true);
 
-    if (!force && data._inst) {
-      const { includes, excludes } = data._inst;
-      if (includes) {
-        // always include containers
-        views = views.filter(view => view.role === ROLE.CONTAINER || includes.includes(view.role));
-      }
-      if (excludes) {
-        views = views.filter(view => !excludes.includes(view.role));
-      }
-    }
-
     await Promise.all(views.map(view => view.refresh({ force, data })));
   }
 

package/src/defaults/ask/templates.js

@@ -13,43 +13,56 @@ class Sections extends _Sections {
   answerGroup(options) {
     const { container } = this._helpers;
     return [
-      ...super.answerGroup(options),
+      this.question(options),
+      this.reasoning(options),
+      this.answer(options),
+      this.affiliation(options),
+      this.sources(options),
       container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
     ];
   }
 
+  question(options) {
+    const { container, phrase } = this._helpers;
+    return container(options, { name: 'question', visibleWhen: 'ready' }, [
+      options.parentQuestionId ? '<hr>' : '',
+      phrase(options, { name: 'question', tag: 'div' }),
+      '<miso-question></miso-question>',
+    ]);
+  }
+
   answer(options) {
     const { container } = this._helpers;
     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;
+  reasoning(options = {}) {
+    const { phrases, reasoning: reasoningOptions = {} } = options;
+    const { container, 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'],
+    //reasoningOptions.hide !== false && classes.push('hidden');
+    reasoningOptions.expand && classes.push('expanded');
+    return container(options, { name: 'reasoning', visibleWhen: 'nonempty' }, [
+      element('miso-collapsible', {
+        classes,
+        'data-role': 'reasoning-container',
       }, [
-        '<miso-reasoning></miso-reasoning>',
+        element('div', {
+          classes: ['miso-collapsible__header'],
+          'data-role': 'toggle-expand',
+        }, [
+          `<div class="miso-collapsible__icon">${reasoningOptions.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>',
+        ]),
       ]),
     ]);
   }

package/src/layout/input/option-list.js

@@ -63,20 +63,13 @@ export default class OptionListLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    const { proxyElement, hub } = view;
+    const { proxyElement } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
       proxyElement.on('click', (e) => this._handleClick(e)),
-      hub.on(fields.suggestions(), () => this._handleInput()), // TODO: use data mapping
     ];
   }
 
-  _preprocess() {
-    return super._preprocess({
-      state: this._view.hub.states[fields.suggestions()], // TODO: use data mapping
-    });
-  }
-
   _render(element, data, controls) {
     super._render(element, data, controls);
     const { state } = data;

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

@@ -112,7 +112,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
     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 && finished ? Date.now() : undefined);
+    const doneAt = (sameSession && prev && prev.doneAt) || (status === STATUS.READY && finished ? performance.now() : undefined);
     const done = doneAt !== undefined;
 
     return this._prevState = Object.freeze(trimObj({

package/src/version.js

@@ -1 +1 @@
-export default '1.12.1-beta.1';
+export default '1.12.1-beta.2';

package/src/workflow/ask.js

@@ -1,10 +1,11 @@
 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 { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout, TypewriterLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
+import { mappingSuggestionsData } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -44,6 +45,9 @@ const DEFAULT_OPTIONS = Object.freeze({
 
 const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [ROLE.QUERY_SUGGESTIONS]: mappingSuggestionsData,
+  },
 });
 
 export default class Ask extends AnswerBasedWorkflow {
@@ -65,19 +69,11 @@ export default class Ask extends AnswerBasedWorkflow {
   }
 
   _initSubscriptions(args) {
-    this._setSuggestedQuestions();
     super._initSubscriptions(args);
-  }
-
-  _setSuggestedQuestions() {
-    const { previous } = this;
-    if (!previous) {
-      return;
-    }
-    // TODO: write question_source from payload._meta, so we don't need to write it to session.meta
-    const values = previous.states[fields.data()].value;
-    const value = values.suggested_followup_questions || values.followup_questions || [];
-    this._hub.update(fields.suggestions(), { value: value.map(text => ({ text })) });
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      this._hub.on(fields.view(ROLE.REASONING), state => this._onReasoningViewUpdate(state)),
+    ];
   }
 
   _initSession(args) {
@@ -134,20 +130,46 @@ export default class Ask extends AnswerBasedWorkflow {
   // data //
   _updateData(data) {
     super._updateData(data);
-    this._triggerReasoningShowIfNecessary(data);
+    this._triggerSuggestionsRefreshIfNecessary();
+    this._showReasoningContainerIfNecessary(data);
   }
 
-  _triggerReasoningShowIfNecessary({ session, value } = {}) {
+  _triggerSuggestionsRefreshIfNecessary() {
+    const { next } = this;
+    if (!next) {
+      return;
+    }
+    const view = next._views.get(ROLE.QUERY_SUGGESTIONS);
+    view && view.refresh();
+  }
+
+  _showReasoningContainerIfNecessary({ session, value } = {}) {
     if (!value || !value.reasoning) {
       return;
     }
+    // TODO: shall we solve this issue with container?
+    // TODO: shall we just look up on the miso-collapse element?
     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"]' });
+    const element = this._getReasoningContainerElement();
+    if (!element) {
+      return;
+    }
+    if (typeof element.show === 'function') {
+      element.show();
+      context.reasoningShown = true;
+    }
+  }
+
+  // view //
+  _onReasoningViewUpdate({ status, ongoing }) {
+    if (status !== STATUS.READY || ongoing) {
+      return;
+    }
+    const element = this._getReasoningContainerElement();
+    element && element.classList.add('done');
   }
 
   // interactions //
@@ -197,6 +219,12 @@ export default class Ask extends AnswerBasedWorkflow {
     }
   }
 
+  _getReasoningContainerElement() {
+    const view = this._views.get(ROLE.REASONING);
+    const element = view && view.element;
+    return element && element.closest('[data-role="reasoning-container"]');
+  }
+
   // destroy //
   _destroy(options) {
     const { parentQuestionId, questionId } = this;

package/src/workflow/base.js

@@ -60,7 +60,7 @@ export default class Workflow extends Component {
 
   _initProperties() {}
 
-  _initActors({ name, roles }) {
+  _initActors({ roles }) {
     const hub = this._hub;
     const client = this._client;
     const options = this._options;
@@ -69,7 +69,7 @@ export default class Workflow extends Component {
 
     this._sessions = new SessionMaker(hub);
     this._data = new DataActor(hub, { source: sources.api(client), options });
-    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
+    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: this });
     this._interactions = new InteractionsActor(hub, { client, options });
   }
 

package/src/workflow/hybrid-search-views.js

@@ -1,4 +1,3 @@
-import { ROLE } from '../constants.js';
 import HybridSearchResults from './hybrid-search-results.js';
 
 function getSubworkflowByRole(role) {

package/src/workflow/processors.js

@@ -22,9 +22,18 @@ export function mappingSortData(_, { hub, workflowOptions = {} } = {}) {
   });
 }
 
+function findDefaultSortOption(options) {
+  for (const option of options) {
+    if (option.default) {
+      return option;
+    }
+  }
+  return options[0];
+}
+
 export function mappingAnswerData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   const { answer = '', answer_stage, finished } = data.value;
   return Object.freeze({ value: answer, stage: answer_stage, finished: !!finished });
@@ -32,19 +41,17 @@ export function mappingAnswerData(data) {
 
 export function mappingReasoningData(data) {
   if (!data || !data.value) {
-    return data;
+    return undefined;
   }
   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) {
-      return option;
-    }
-  }
-  return options[0];
+export function mappingSuggestionsData(_, { workflow } = {}) {
+  const previous = workflow.previous;
+  const values = previous && previous.states[fields.data()].value;
+  const value = values && (values.suggested_followup_questions || values.followup_questions || []);
+  return value && value.map(text => ({ text }));
 }
 
 // data //