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

package/dist/cjs/trait/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineActions = defineActions;
+exports.defineClickables = defineClickables;
+exports.defineStatusGetters = defineStatusGetters;
+exports.listenToClickables = listenToClickables;
+function defineStatusGetters(prototype, statuses) {
+  for (const status of statuses) {
+    Object.defineProperty(prototype, status, {
+      get() {
+        return this._element && this._element.classList.contains(status);
+      }
+    });
+  }
+}
+function defineActions(prototype, actions) {
+  for (const {
+    action,
+    classAction,
+    className
+  } of actions) {
+    prototype[action] = function () {
+      this._element && this._element.classList[classAction](className);
+      this[`_${action}`] && this[`_${action}`]();
+    };
+  }
+}
+function defineClickables(prototype, clickables) {
+  prototype._handleClick = function (event) {
+    const {
+      target,
+      button
+    } = event;
+    if (button !== 0) {
+      return; // only left click
+    }
+    for (let {
+      role,
+      selector,
+      action
+    } of clickables) {
+      selector = selector || `[data-role="${role}"]`;
+      if (!selector) {
+        continue;
+      }
+      if (target.closest(selector)) {
+        this[action]();
+        event.stopPropagation();
+        return;
+      }
+    }
+  };
+}
+function listenToClickables(addon) {
+  const element = addon._element;
+  if (!element) {
+    return () => {};
+  }
+  const handleClick = event => addon._handleClick(event);
+  element.addEventListener('click', handleClick);
+  return () => element.removeEventListener('click', handleClick);
+}

package/dist/cjs/trait/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CollapsibleTrait", {
+  enumerable: true,
+  get: function () {
+    return _collapsible.default;
+  }
+});
+var _collapsible = _interopRequireDefault(require("./collapsible.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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.3';

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,29 @@ class Ask extends _answerBased.default {
   // data //
   _updateData(data) {
     super._updateData(data);
-    this._triggerReasoningShowIfNecessary(data);
+    this._triggerSuggestionsRefreshIfNecessary();
   }
-  _triggerReasoningShowIfNecessary({
-    session,
-    value
-  } = {}) {
-    if (!value || !value.reasoning) {
+  _triggerSuggestionsRefreshIfNecessary() {
+    const {
+      next
+    } = this;
+    if (!next) {
       return;
     }
-    const context = this._getSessionContext(session);
-    if (context.reasoningShown) {
+    const view = next._views.get(_constants.ROLE.QUERY_SUGGESTIONS);
+    view && view.refresh();
+  }
+
+  // view //
+  _onReasoningViewUpdate({
+    status,
+    ongoing
+  }) {
+    if (status !== _constants.STATUS.READY || ongoing) {
       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._getReasoningBoxElement();
+    element && element.classList.add('done');
   }
 
   // interactions //
@@ -219,6 +210,11 @@ 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

@@ -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.3"
   },
-  "version": "1.12.1-beta.1"
+  "version": "1.12.1-beta.3"
 }

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,6 @@ 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 &&
@@ -11,6 +10,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 +18,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 +108,10 @@ export default class ViewActor {
     }
     return this._tracker;
   }
+
+  get workflow() {
+    return this._views._workflow;
+  }
   
   get workflowOptions() {
     return this._views._options.resolved;
@@ -138,7 +147,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,14 +169,6 @@ 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 = {
@@ -181,13 +182,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 +199,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 +254,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/affiliation/index.js

@@ -12,6 +12,15 @@ export function processData(data) {
 }
 
 function processValue(value) {
+  /*
+  if (value.affiliation_products) {
+    const { affiliation_products, ...rest } = value;
+    value = {
+      ...rest,
+      affiliation: processMisoData(affiliation_products),
+    };
+  } else
+  */
   if (value.sovrn_aff) {
     const { sovrn_aff, ...rest } = value;
     value = {
@@ -48,10 +57,17 @@ function postProcessValue(value) {
   };
 }
 
-function processSovrnData({ products, ...sovrn_aff }) {
+function processMisoData(products) {
+  return {
+    channel: 'miso',
+    products,
+  };
+}
+
+function processSovrnData({ products, ...data }) {
   return {
     channel: 'sovrn',
-    ...sovrn_aff,
+    ...data,
     products: products.map(processSovrnProduct),
   };
 }

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.expand && classes.push('expanded');
+    return container(options, { name: 'reasoning', visibleWhen: 'nonempty' }, [
+      element('miso-stub', {
+        classes,
+        trait: 'collapsible',
+        'data-role': 'reasoning-box',
       }, [
-        '<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/defaults/common/templates.js

@@ -126,10 +126,10 @@ export class Helpers {
     }, body);
   }
 
-  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, logo = false }, body) {
+  container({ classPrefix, circledCitationIndex, parentQuestionId }, { name, visibleWhen, trait, logo = false }, body) {
     const classes = [`${classPrefix}__${name}-container`];
     circledCitationIndex && classes.push('miso-circled-citation-index');
-    return this.element(this._context.CONAINER_TAG, { classes, visibleWhen, logo, parentQuestionId }, body);
+    return this.element(this._context.CONAINER_TAG, { classes, visibleWhen, trait, logo, parentQuestionId }, body);
   }
 
   element(tag, attributes = {}, body = '') {

package/src/element/container/miso-container.js

@@ -1,8 +1,12 @@
+import MisoStubElement from '../util/miso-stub.js';
 import { getClient } from '../utils.js';
 
 const ATTR_LOGO = 'logo';
 const DEFAULT_LOGO_VALUE = 'auto';
-const OBSERVED_ATTRIBUTES = Object.freeze([ATTR_LOGO]);
+const OBSERVED_ATTRIBUTES = Object.freeze([
+  ...MisoStubElement.observedAttributes,
+  ATTR_LOGO,
+]);
 
 function logoAttrToProp(value) {
   if (!value) {
@@ -31,7 +35,7 @@ function logoPropToAttr(value) {
   }
 }
 
-export default class MisoContainerElement extends HTMLElement {
+export default class MisoContainerElement extends MisoStubElement {
 
   static get observedAttributes() {
     return OBSERVED_ATTRIBUTES;
@@ -74,6 +78,7 @@ export default class MisoContainerElement extends HTMLElement {
 
   // lifecycle //
   async connectedCallback() {
+    super.connectedCallback();
     const client = this._client = await getClient(MisoContainerElement);
     if (document.body.contains(this)) { // in case already disconnected
       this._setWorkflow(this._getWorkflow(client));
@@ -82,6 +87,7 @@ export default class MisoContainerElement extends HTMLElement {
 
   disconnectedCallback() {
     this._setWorkflow(undefined);
+    super.disconnectedCallback();
   }
 
   _getWorkflow(client) {
@@ -106,6 +112,8 @@ export default class MisoContainerElement extends HTMLElement {
       case ATTR_LOGO:
         this._handleLogoUpdate(oldValue, newValue);
         break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
     }
   }
 

package/src/element/role/index.js

@@ -11,7 +11,7 @@ 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';
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
-export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';
+export { default as MisoAffiliationElement } from './miso-affiliation.js';
 export { default as MisoKeywordsElement } from './miso-keywords.js';
 export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';

package/src/element/util/index.js

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