@miso.ai/client-sdk-ui 1.12.7 → 1.13.0-beta.1

package/dist/cjs/actor/index.js

@@ -3,6 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  fields: true,
+  Hub: true,
+  SessionMaker: true,
+  DataActor: true,
+  ViewsActor: true,
+  FeedbackActor: true,
+  InteractionsActor: true
+};
 Object.defineProperty(exports, "DataActor", {
   enumerable: true,
   get: function () {
@@ -33,12 +42,6 @@ Object.defineProperty(exports, "SessionMaker", {
     return _sessions.default;
   }
 });
-Object.defineProperty(exports, "TrackersActor", {
-  enumerable: true,
-  get: function () {
-    return _trackers.default;
-  }
-});
 Object.defineProperty(exports, "ViewsActor", {
   enumerable: true,
   get: function () {
@@ -53,7 +56,18 @@ var _sessions = _interopRequireDefault(require("./sessions.js"));
 var _data = _interopRequireDefault(require("./data.js"));
 var _views = _interopRequireDefault(require("./views.js"));
 var _feedback = _interopRequireDefault(require("./feedback.js"));
-var _trackers = _interopRequireDefault(require("./trackers.js"));
 var _interactions = _interopRequireDefault(require("./interactions.js"));
+var _trackers = require("./trackers.js");
+Object.keys(_trackers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _trackers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _trackers[key];
+    }
+  });
+});
 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); }

package/dist/cjs/actor/trackers.js

@@ -3,25 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TrackersActor = void 0;
+exports.proxyTrackers = proxyTrackers;
 var _constants = require("../constants.js");
 var _tracker = _interopRequireDefault(require("./tracker.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class TrackersActor {
   constructor(hub, {
+    roles,
     options
   }) {
     this._hub = hub;
+    this._roles = roles;
     this._options = options;
     this._trackers = {};
   }
   get(role) {
+    if (!this._roles.members.includes(role)) {
+      throw new Error(`Role "${role}" is not a member of this workflow.`);
+    }
     if (!this._trackers[role]) {
-      const itemless = role === _constants.ROLE.CONTAINER;
       this._trackers[role] = new _tracker.default({
         hub: this._hub,
         role,
-        itemless,
+        itemless: role === _constants.ROLE.CONTAINER,
         options: () => this._getTrackerOptions(role)
       });
     }
@@ -34,4 +39,14 @@ class TrackersActor {
     };
   }
 }
-exports.default = TrackersActor;
+exports.TrackersActor = TrackersActor;
+function proxyTrackers(trackers) {
+  return new Proxy(trackers, {
+    get: (target, prop) => {
+      try {
+        return target.get(prop);
+      } catch (_) {}
+      return undefined;
+    }
+  });
+}

package/dist/cjs/actor/view.js

@@ -8,7 +8,6 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _proxy = _interopRequireDefault(require("../util/proxy.js"));
-var _tracker = _interopRequireDefault(require("./tracker.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); }
@@ -99,24 +98,7 @@ class ViewActor {
     });
   }
   get tracker() {
-    const {
-      role
-    } = this;
-    if (role === _constants.ROLE.CONTAINER) {
-      return this._views._getContainerTracker();
-    }
-    // TODO: we should move this to workflow level, as there could be multiple view of the same role in the future
-    if (!this._tracker) {
-      const {
-        hub
-      } = this;
-      this._tracker = new _tracker.default({
-        hub,
-        role,
-        options: () => this.trackerOptions
-      });
-    }
-    return this._tracker;
+    return this._views.trackers[this.role];
   }
   get workflow() {
     return this._views._workflow;
@@ -223,6 +205,8 @@ class ViewActor {
     }
     return (0, _commons.trimObj)(sliced);
   }
+
+  // TODO: move this to workflow
   _isContainerEmpty(data) {
     const {
       element
@@ -260,6 +244,10 @@ class ViewActor {
       this._error(e);
     }
   }
+  _emit(name, data) {
+    this._events.emit(name, data);
+    this._views._events.emit(`${this.role}:${name}`, data);
+  }
   _error(e) {
     this._views._error(e);
   }

package/dist/cjs/actor/views.js

@@ -9,8 +9,6 @@ var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _view = _interopRequireDefault(require("./view.js"));
 var _filters = _interopRequireDefault(require("./filters.js"));
-var _tracker = _interopRequireDefault(require("./tracker.js"));
-var _trackers = require("../util/trackers.js");
 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); }
 class ViewsActor {
@@ -29,18 +27,11 @@ class ViewsActor {
     this._options = options;
     this._roles = roles;
     this._containers = new Map();
-    this._containerTracker = undefined;
-    this._views = {};
+    this._components = new Map();
     this._filters = new _filters.default(this);
-    for (const role of roles.members) {
-      if (role === _constants.ROLE.CONTAINER) {
-        continue;
-      }
-      this._views[role] = new _view.default(this, role);
-    }
+    this._events = new _commons.EventEmitter();
     (0, _commons.defineValues)(this, {
-      interface: new Views(this),
-      trackers: new Trackers(this, roles.members)
+      interface: new Views(this)
     });
     const syncSize = () => this.syncSize();
     window.addEventListener('resize', syncSize);
@@ -52,15 +43,19 @@ class ViewsActor {
   get filters() {
     return this._filters;
   }
+  get trackers() {
+    return this._workflow.trackers;
+  }
+  on(role, name, fn) {
+    return this._events.on(`${role}:${name}`, fn);
+  }
 
   // elements //
   addContainer(element) {
     if (this._containers.has(element)) {
       return;
     }
-    const view = new _view.default(this, _constants.ROLE.CONTAINER);
-    view.layout = this._createLayout(_constants.ROLE.CONTAINER);
-    view.element = element;
+    const view = this._createView(element);
     this._containers.set(element, view);
     const {
       components
@@ -84,77 +79,50 @@ class ViewsActor {
     this._containers.delete(element);
   }
   addComponent(element) {
-    this._getViewByElement(element).element = element;
+    if (this._components.has(element)) {
+      return;
+    }
+    const view = this._createView(element);
+    this._components.set(element, view);
   }
   removeComponent(element) {
-    this._getViewByElement(element).element = undefined;
+    const view = this._components.get(element);
+    if (!view) {
+      return;
+    }
+    view._destroy();
+    this._components.delete(element);
   }
   updateComponentRole(element, oldRole, newRole) {
     // TODO
   }
   containsElement(element) {
-    return this._containers.has(element) || this._views[element.role];
+    return this._containers.has(element) || this._components.has(element);
   }
   refreshElement(element) {
-    const view = element.isContainer ? this._containers.get(element) : this._getViewByElement(element);
+    const view = element.isContainer ? this._containers.get(element) : this._components.get(element);
     view && view.refresh({
       force: true
     });
   }
-  _getViewByElement(element) {
-    let {
-      role
-    } = element;
-    if (!role) {
-      throw new Error('Component must have a role');
-    }
-    return this.get(role);
-  }
-
-  /*
-  _requestSyncLayouts() {
-    this._setLayoutRequested = true;
-    setTimeout(() => {
-      if (!this._setLayoutRequested) {
-        return;
-      }
-      this._setLayoutRequested = false;
-      this._syncLayouts();
-    });
+  _createView(element) {
+    const view = new _view.default(this, element.role);
+    view.layout = this._createLayout(element.role);
+    view.element = element;
+    return view;
   }
-  */
-
   _syncLayouts() {
     // TODO: put a debug event here
     const {
       layouts
     } = this._options.resolved;
     if (layouts === false) {
-      // containers
-      for (const view of this._containers.values()) {
-        view.layout = undefined;
-      }
-      // components
-      for (const view of Object.values(this._views)) {
+      for (const view of [...this._containers.values(), ...this._components.values()]) {
         view.layout = undefined;
       }
     } else {
-      for (let [role, [name, options]] of Object.entries(layouts)) {
-        // TODO: try to omit if unchanged
-        const fn = () => this._layoutFactory.create(name, Object.assign({}, options, {
-          role,
-          workflow: this._workflowName
-        }));
-        if (role === _constants.ROLE.CONTAINER) {
-          for (const view of this._containers.values()) {
-            view.layout = fn();
-          }
-        } else {
-          const view = this.get(role);
-          if (view) {
-            view.layout = fn();
-          }
-        }
+      for (const view of [...this._containers.values(), ...this._components.values()]) {
+        view.layout = this._createLayout(view.role);
       }
     }
   }
@@ -170,16 +138,20 @@ class ViewsActor {
     }));
   }
   get(role) {
-    return this._views[role];
+    return this.getAll(role)[0];
+  }
+  getAll(role) {
+    return role === _constants.ROLE.CONTAINER ? this._containers.values() : this._components.values().filter(view => view.role === role);
   }
   get views() {
     return this._getViews(true);
   }
   _getViews(containerFirst = true) {
-    return containerFirst ? [...this._containers.values(), ...Object.values(this._views)] : [...Object.values(this._views), ...this._containers.values()];
+    return containerFirst ? [...this._containers.values(), ...this._components.values()] : [...this._components.values(), ...this._containers.values()];
   }
   syncSize() {
-    for (const view of Object.values(this._views)) {
+    // TODO: containers?
+    for (const view of this._components.values()) {
       view._syncSize();
     }
   }
@@ -198,24 +170,6 @@ class ViewsActor {
   _getData(data) {
     return data || this._hub.states[fields.data()];
   }
-  _getTrackerOptions(role) {
-    const allTrackerOptions = this._options.resolved.trackers;
-    // TODO: don't need this anymore
-    return (0, _trackers.normalizeTrackerOptions)(allTrackerOptions && allTrackerOptions[role] || false);
-  }
-  _getContainerTracker() {
-    if (!this._containerTracker) {
-      const hub = this._hub;
-      const role = _constants.ROLE.CONTAINER;
-      this._containerTracker = new _tracker.default({
-        hub,
-        role,
-        itemless: true,
-        options: () => this._getTrackerOptions(role)
-      });
-    }
-    return this._containerTracker;
-  }
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -247,20 +201,4 @@ class Views {
   get all() {
     return this._actor.views.map(view => view.interface);
   }
-}
-class Trackers {
-  constructor(views, roles) {
-    this._views = views;
-    for (const role of roles) {
-      if (role === _constants.ROLE.CONTAINER) {
-        continue;
-      }
-      Object.defineProperty(this, role, {
-        get: () => views.get(role).tracker
-      });
-    }
-    Object.defineProperty(this, _constants.ROLE.CONTAINER, {
-      get: () => views._getContainerTracker()
-    });
-  }
 }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _misoStub = _interopRequireDefault(require("../util/miso-stub.js"));
 var _utils = require("../utils.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -49,6 +50,9 @@ class MisoContainerElement extends _misoStub.default {
   get isContainer() {
     return true;
   }
+  get role() {
+    return _constants.ROLE.CONTAINER;
+  }
   get workflow() {
     return this._workflow;
   }

package/dist/cjs/layout/affiliation/affiliation.js

@@ -306,7 +306,7 @@ class AffiliationLayout extends _collection.default {
     this._displayedIndex = index;
     listElement.style.left = `${-index * 100}%`;
     this._viewable.display(index);
-    this._view._events.emit('display', {
+    this._view._emit('display', {
       index
     });
   }

package/dist/cjs/layout/button/more-button.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _constants = require("../../constants.js");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _templates = require("../templates.js");
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -22,7 +23,7 @@ function root(layout, state) {
   const disabledAttr = state.status !== _constants.STATUS.READY ? ' disabled' : '';
   return `
 <div class="${className}"${roleAttr}${disabledAttr}>
-  ${templates.text(layout)}
+  ${_templates.helpers.asFunction(templates.text)(layout)}
 </div>
 `;
 }

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

@@ -8,6 +8,7 @@ var _constants = require("../../constants.js");
 var _raf = _interopRequireDefault(require("../raf.js"));
 var _misoBanner = _interopRequireDefault(require("../../element/util/miso-banner.js"));
 var _viewables = _interopRequireDefault(require("../../util/viewables.js"));
+var _dom = require("../../util/dom.js");
 const _excluded = ["logo"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -70,8 +71,10 @@ class ContainerLayout extends _raf.default {
     if (!element) {
       return;
     }
+    // TODO: ad-hoc for non-general status/attributes
     const {
       status,
+      data,
       ongoing,
       meta: {
         miso_id,
@@ -79,6 +82,10 @@ class ContainerLayout extends _raf.default {
         unanswerable = false
       } = {}
     } = state;
+    const {
+      blocked_reason,
+      finish_reason
+    } = data || {};
     const statuses = [status, empty ? _constants.STATUS.EMPTY : _constants.STATUS.NONEMPTY];
     if (status === _constants.STATUS.READY) {
       statuses.push(ongoing ? _constants.STATUS.ONGOING : _constants.STATUS.DONE);
@@ -87,11 +94,9 @@ class ContainerLayout extends _raf.default {
       statuses.push(_constants.STATUS.UNANSWERABLE);
     }
     element.setAttribute('status', statuses.join(' '));
-    if (miso_id) {
-      element.setAttribute('miso-id', miso_id);
-    } else {
-      element.removeAttribute('miso-id');
-    }
+    (0, _dom.setOrRemoveAttribute)(element, 'miso-id', miso_id);
+    (0, _dom.setOrRemoveAttribute)(element, 'blocked-reason', blocked_reason);
+    (0, _dom.setOrRemoveAttribute)(element, 'finish-reason', finish_reason);
   }
   _trackInteractions(element, state) {
     const {

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

@@ -128,7 +128,7 @@ class OptionListLayout extends _template.default {
     if (!value) {
       return;
     }
-    this._view._events.emit('select', {
+    this._view._emit('select', {
       value
     });
   }

package/dist/cjs/layout/input/search-box.js

@@ -352,7 +352,7 @@ class SearchBoxLayout extends _template.default {
           if (inputElement) {
             inputElement.value = value;
           }
-          this._view._events.emit('select', Object.freeze({
+          this._view._emit('select', Object.freeze({
             value: item,
             index,
             domEvent: event
@@ -365,7 +365,7 @@ class SearchBoxLayout extends _template.default {
         return;
       }
       if (element.matches('[data-role="product-item"]')) {
-        this._view._events.emit('select', Object.freeze({
+        this._view._emit('select', Object.freeze({
           value: item,
           index,
           domEvent: event

package/dist/cjs/layout/input/select.js

@@ -136,7 +136,7 @@ class SelectLayout extends _template.default {
       return;
     }
     // TODO: reflect selection right away
-    this._view._events.emit('select', {
+    this._view._emit('select', {
       value
     });
   }

package/dist/cjs/layout/list/collection.js

@@ -225,7 +225,7 @@ class CollectionLayout extends _template.default {
       value,
       element
     } = binding;
-    this._view._events.emit('click', {
+    this._view._emit('click', {
       session,
       value,
       element,

package/dist/cjs/layout/mixin/swipeable.js

@@ -140,7 +140,7 @@ class SwipeableMixin {
       return;
     }
     context.displayEventIndex = index;
-    this._view._events.emit('display', {
+    this._view._emit('display', {
       index
     });
   }

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

@@ -186,7 +186,7 @@ class TypewriterLayout extends _progressive.default {
     if (citationLinkElement) {
       const index = parseInt(citationLinkElement.dataset.index);
       if (!Number.isNaN(index)) {
-        this._view._events.emit('citation-click', {
+        this._view._emit('citation-click', {
           event,
           index
         });
@@ -202,7 +202,7 @@ class TypewriterLayout extends _progressive.default {
       } = followUpLinkElement.dataset;
       q = q ? q.trim() : undefined;
       if (q) {
-        this._view._events.emit('follow-up-click', {
+        this._view._emit('follow-up-click', {
           event,
           q
         });
@@ -221,7 +221,7 @@ class TypewriterLayout extends _progressive.default {
           className
         } = anchorElement;
         if (href) {
-          this._view._events.emit('link-click', (0, _commons.trimObj)({
+          this._view._emit('link-click', (0, _commons.trimObj)({
             event,
             url: href,
             text: innerText ? innerText.trim() : '',

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.7';
+var _default = exports.default = '1.13.0-beta.1';

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

@@ -100,7 +100,7 @@ class AnswerBasedWorkflow extends _base.default {
   }
   _initSubscriptions(args) {
     super._initSubscriptions(args);
-    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._views.get(_constants.ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event)), this._views.get(_constants.ROLE.ANSWER).on('link-click', event => this._onAnswerLinkClick(event))];
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._views.on(_constants.ROLE.ANSWER, 'citation-click', event => this._onCitationClick(event)), this._views.on(_constants.ROLE.ANSWER, 'link-click', event => this._onAnswerLinkClick(event))];
   }
 
   // lifecycle //
@@ -131,6 +131,7 @@ class AnswerBasedWorkflow extends _base.default {
     const done = status === _constants.STATUS.READY && !state.ongoing;
     const erroneous = status === _constants.STATUS.ERRONEOUS;
     const eventName = done ? 'done' : erroneous ? 'error' : status;
+
     // answer-stage
     const context = this._getSessionContext(session);
     const oldAnswerStage = context.answerStage;
@@ -141,6 +142,23 @@ class AnswerBasedWorkflow extends _base.default {
       })));
       context.answerStage = newAnswerStage;
     }
+
+    // blocked reason
+    const data = this._hub.states[_index.fields.data()] || {};
+    const {
+      value
+    } = data;
+    if (value) {
+      const {
+        blocked_reason
+      } = value;
+      if (blocked_reason) {
+        this._emitLifecycleEvent('blocked', Object.assign({}, state, {
+          blockedReason: blocked_reason
+        }));
+      }
+    }
+
     // ready, done, or error
     this._emitLifecycleEvent(eventName, state);
     if (done || erroneous) {

package/dist/cjs/workflow/ask.js

@@ -80,7 +80,7 @@ class Ask extends _answerBased.default {
   }
   _initSubscriptions(args) {
     super._initSubscriptions(args);
-    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.view(_constants.ROLE.REASONING), state => this._onReasoningViewUpdate(state)), this._views.get(_constants.ROLE.ANSWER).on('follow-up-click', event => this._onFollowUpClick(event)), this._views.get(_constants.ROLE.FOLLOW_UP_QUESTIONS).on('select', event => this._onFollowUpQuestionSelect(event)), this._views.get(_constants.ROLE.QUERY_SUGGESTIONS).on('select', event => this._onQuerySuggestionSelect(event))];
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.view(_constants.ROLE.REASONING), state => this._onReasoningViewUpdate(state)), this._views.on(_constants.ROLE.ANSWER, 'follow-up-click', event => this._onFollowUpClick(event)), this._views.on(_constants.ROLE.FOLLOW_UP_QUESTIONS, 'select', event => this._onFollowUpQuestionSelect(event)), this._views.on(_constants.ROLE.QUERY_SUGGESTIONS, 'select', event => this._onQuerySuggestionSelect(event))];
   }
   _initSession(args) {
     // register at context
@@ -167,8 +167,9 @@ class Ask extends _answerBased.default {
     if (!next) {
       return;
     }
-    const view = next._views.get(_constants.ROLE.QUERY_SUGGESTIONS);
-    view && view.refresh();
+    for (const view of next._views.getAll(_constants.ROLE.QUERY_SUGGESTIONS)) {
+      view.refresh();
+    }
   }
 
   // view //
@@ -179,8 +180,10 @@ class Ask extends _answerBased.default {
     if (status !== _constants.STATUS.READY || ongoing) {
       return;
     }
-    const element = this._getReasoningBoxElement();
-    element && element.classList.add('done');
+    for (const view of this._views.getAll(_constants.ROLE.REASONING)) {
+      const element = view.element && view.element.closest('[data-role="reasoning-box"]');
+      element && element.classList.add('done');
+    }
   }
 
   // interactions //
@@ -283,11 +286,6 @@ class Ask extends _answerBased.default {
       this._questionId = undefined;
     }
   }
-  _getReasoningBoxElement() {
-    const view = this._views.get(_constants.ROLE.REASONING);
-    const element = view && view.element;
-    return element && element.closest('[data-role="reasoning-box"]');
-  }
 
   // destroy //
   _destroy(options) {

package/dist/cjs/workflow/base.js

@@ -73,6 +73,11 @@ class Workflow extends _commons.Component {
     const extensions = this._extensions;
     const layouts = this._plugin.layouts;
     this._sessions = new _index.SessionMaker(hub);
+    this._trackers = new _index.TrackersActor(hub, {
+      roles,
+      options
+    });
+    this._proxyTrackers = (0, _index.proxyTrackers)(this._trackers);
     this._data = new _index.DataActor(hub, Object.assign({
       source: sources.api(client),
       options
@@ -84,7 +89,6 @@ class Workflow extends _commons.Component {
       options,
       workflow: this
     });
-    //this._trackers = new TrackersActor(hub, { options });
     this._interactions = new _index.InteractionsActor(hub, {
       client,
       options
@@ -280,7 +284,7 @@ class Workflow extends _commons.Component {
 
   // trackers //
   get trackers() {
-    return this._views.trackers;
+    return this._proxyTrackers;
   }
   _onTracker(args) {
     const workflow = this;