@miso.ai/client-sdk-ui 1.9.8 → 1.9.9-beta.1

package/dist/cjs/asset/svgs.js

@@ -24,7 +24,7 @@ function loadSvgSprites() {
 }
 loadSvgSprites();
 function getSvg(name) {
-  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use xlink:href="#${PREFIX}-${name}"></use></svg>`;
+  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 const SEND = exports.SEND = getSvg('send');
 const SEARCH = exports.SEARCH = getSvg('search');

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

@@ -17,6 +17,7 @@ class AskComboElements {
     (0, _commons.defineValues)(this, {
       root,
       followUpsSection: root.querySelector(`.${classPrefix}__follow-ups`),
+      relatedResourcesSection: root.querySelector(`.${classPrefix}__related-resources`),
       relatedResourcesContainer: root.querySelector(`.${classPrefix}__related-resources miso-ask`)
     });
   }

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

@@ -104,10 +104,15 @@ class AskCombo extends _base.default {
   }
   async _setupWorkflows() {
     const {
+      MisoClient,
       client,
       elements,
       resolvedOptions: options
     } = this;
+    const {
+      wireFollowUps,
+      wireRelatedResources
+    } = MisoClient.ui.defaults.ask;
     const {
       templates = {},
       features = {},
@@ -121,34 +126,13 @@ class AskCombo extends _base.default {
 
     // TODO: set placeholder if present in options
 
-    if (elements.followUpsSection && features.followUpQuestions !== false) {
-      // when a answer is fully populated, insert a new section for the follow-up question
-      context.on('done', _ref => {
-        let {
-          workflow
-        } = _ref;
-        elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(Object.assign({}, options, {
-          parentQuestionId: workflow.questionId
-        })));
-      });
-      // if user starts over, clean up current follow-up questions
-      rootWorkflow.on('loading', () => {
-        // clean up the entire follow-ups section
-        elements.followUpsSection.innerHTML = '';
-        // destroy all follow-up workflows
-        context.reset({
-          root: false
-        });
-      });
+    if (features.followUpQuestions !== false) {
+      wireFollowUps(client, elements.followUpsSection, Object.assign({}, options, {
+        template: templates.followUp
+      }));
     }
-    if (elements.relatedResourcesContainer && features.relatedResources !== false && features.followUpQuestions !== false) {
-      // when a new query starts, associate the last section container (for related resources) to that workflow
-      context.on('loading', _ref2 => {
-        let {
-          workflow
-        } = _ref2;
-        elements.relatedResourcesContainer.workflow = workflow;
-      });
+    if (features.relatedResources !== false && features.followUpQuestions !== false) {
+      wireRelatedResources(client, elements.relatedResourcesSection);
     }
 
     // start query if specified in URL

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wireFollowUps = wireFollowUps;
+exports.wireRelatedResources = wireRelatedResources;
+var _templates = require("./templates.js");
+const _excluded = ["template"];
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function wireFollowUps(client, element) {
+  let _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let {
+      template = _templates.followUp
+    } = _ref,
+    options = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (typeof template !== 'function') {
+    throw new Error('template must be a function or undefined');
+  }
+  if (!element) {
+    return;
+  }
+  const context = client.ui.asks;
+  const rootWorkflow = client.ui.ask;
+
+  // 1. when an answer is fully populated, insert a new section for the follow-up question
+  context.on('done', event => {
+    element.insertAdjacentHTML('beforeend', template(Object.assign({}, options, {
+      parentQuestionId: event.workflow.questionId
+    })));
+  });
+  // 2. if user starts over, clean up existing follow-up questions
+  rootWorkflow.on('loading', () => {
+    // clean up the entire follow-ups section
+    element.innerHTML = '';
+    // destroy all follow-up workflows
+    context.reset({
+      root: false
+    });
+  });
+}
+function wireRelatedResources(client, element) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (!element) {
+    return;
+  }
+  client.ui.asks.on('loading', event => {
+    // When a new query starts, associate the last section container (for related resources) to that workflow
+    for (const container of element.querySelectorAll('miso-ask')) {
+      container.workflow = event.workflow;
+    }
+  });
+}

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

@@ -3,10 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  constants: true,
+  phrases: true,
+  templates: true
+};
 exports.templates = exports.phrases = exports.constants = void 0;
 var _constants = _interopRequireWildcard(require("./constants.js"));
 var _phrases = _interopRequireWildcard(require("./phrases.js"));
 var _templates = _interopRequireWildcard(require("./templates.js"));
+var _controls = require("./controls.js");
+Object.keys(_controls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _controls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _controls[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const constants = exports.constants = Object.freeze(_constants);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+exports.sources = exports.relatedResources = exports.question = exports.querySuggestions = void 0;
 /**
  * The phrase displayed right before <miso-question>
  */
@@ -17,7 +17,7 @@ const sources = exports.sources = 'My reply is based on the following';
 /**
  * The phrase displayed right before <miso-query-suggestions>
  */
-const relatedQuestions = exports.relatedQuestions = 'Related questions you can explore';
+const querySuggestions = exports.querySuggestions = 'Related questions you can explore';
 
 /**
  * The phrase displayed right before <miso-related-resources>

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.followUp = followUp;
 exports.root = root;
+var _commons = require("@miso.ai/commons");
 var _constants = require("./constants.js");
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
-const _excluded = ["classPrefix", "circledCitationIndex"],
+const _excluded = ["classPrefix", "circledCitationIndex", "phrases"],
   _excluded2 = ["classes"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,14 +45,35 @@ function normalizeOptions() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let {
       classPrefix = _constants.CLASS_PREFIX,
-      circledCitationIndex = true
+      circledCitationIndex = true,
+      phrases
     } = _ref,
     options = _objectWithoutPropertiesLoose(_ref, _excluded);
+  phrases = normalizePhraseOptions(phrases);
   return Object.assign({
     classPrefix,
-    circledCitationIndex
+    circledCitationIndex,
+    phrases
   }, options);
 }
+function normalizePhraseOptions() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (!options) {
+    return {};
+  }
+  const normalized = {};
+  for (const key in options) {
+    normalized[normalizePhraseOptionKey(key)] = options[key];
+  }
+  return normalized;
+}
+function normalizePhraseOptionKey(key) {
+  key = (0, _commons.kebabOrSnakeToLowerCamel)(key);
+  if (key === 'relatedQuestions') {
+    return 'querySuggestions'; // legacy key
+  }
+  return key;
+}
 
 // sections & containers //
 function followUps(options) {
@@ -86,7 +108,7 @@ function querySuggestions(options) {
     name: 'query-suggestions',
     visibleWhen: 'initial+nonempty'
   }, [phrase(options, {
-    name: 'related-questions',
+    name: 'query-suggestions',
     tag: 'h3'
   }), '<miso-query-suggestions></miso-query-suggestions>']);
 }
@@ -124,7 +146,7 @@ function phrase(options, _ref2) {
   const {
     classPrefix
   } = options;
-  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, (0, _commons.kebabToLowerCamel)(name))}</${tag}>`;
 }
 function phraseText(options, key) {
   const {
@@ -193,14 +215,8 @@ function attrs() {
   for (const name in attributes) {
     const value = attributes[name];
     if (value !== undefined) {
-      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+      str += ` ${(0, _commons.lowerCamelToKebab)(name)}="${value}"`;
     }
   }
   return str;
-}
-function kebabToLowerCamel(str) {
-  return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
-}
-function lowerCamelToKebab(str) {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }

package/dist/cjs/layout/radio/feedback.js

@@ -12,52 +12,53 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const TYPE = 'feedback';
 const DEFAULT_CLASSNAME = 'miso-feedback';
-function root(layout) {
-  const {
-    className,
-    role,
-    templates,
-    options
-  } = layout;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `
-<div class="${className}" ${roleAttr}>
-  ${options.options.map(option => templates.option(layout, option))}
-</div>
-`;
-}
-const OPTIONS = [{
-  text: 'Helpful',
-  value: 'helpful',
-  icon: _svgs.THUMB
-}, {
-  text: 'Not helpful',
-  value: 'unhelpful',
-  icon: _svgs.THUMB
-}];
+const OPTIONS = ['helpful', 'unhelpful'];
 function options(layout) {
   const {
     templates
   } = layout;
-  return OPTIONS.map(data => templates.option(layout, data)).join('');
+  return OPTIONS.map(value => templates.option(layout, {
+    value
+  })).join('');
 }
 function content(layout, _ref) {
   let {
-    text,
-    icon
+    value
   } = _ref;
   const {
     className,
+    templates,
     options = {}
   } = layout;
   return `
-${options.icon !== false ? `<i class="${className}__icon">${icon}</i>` : ''}
-${options.text !== false ? `<span class="${className}__text">${text}</span>` : ''}
+${options.icon !== false ? `<i class="${className}__icon">${templates.icon(layout, value)}</i>` : ''}
+${options.text !== false ? `<span class="${className}__text">${templates.text(layout, value)}</span>` : ''}
 `;
 }
+function icon(layout, value) {
+  switch (value) {
+    case 'helpful':
+    case 'unhelpful':
+      return _svgs.THUMB;
+    default:
+      return '';
+  }
+}
+function text(layout, value) {
+  switch (value) {
+    case 'helpful':
+      return 'Helpful';
+    case 'unhelpful':
+      return 'Not helpful';
+    default:
+      return '';
+  }
+}
 const DEFAULT_TEMPLATES = Object.freeze({
   options,
-  content
+  content,
+  icon,
+  text
 });
 class FeedbackLayout extends _radio.default {
   static get category() {

package/dist/cjs/version.js

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

package/dist/cjs/workflow/ask.js

@@ -229,18 +229,6 @@ class Ask extends _base.default {
       })
     });
   }
-  _onDataUpdate(data) {
-    // TODO: can we just put this in _defaultProcessData?
-    if (this._questionId) {
-      return;
-    }
-    const questionId = data && data.value && data.value.question_id;
-    // capture question ID and register at context
-    if (questionId) {
-      this._questionId = questionId;
-      this._context._byQid.set(questionId, this);
-    }
-  }
   _onAnswerViewUpdate(_ref2) {
     let {
       session,

package/dist/cjs/workflow/base.js

@@ -170,32 +170,6 @@ class Workflow extends _commons.Component {
     return this;
   }
 
-  // configuration //
-  useApi() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    this._options.api = args;
-    return this;
-  }
-  useLayouts() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this._options.layouts = options;
-    return this;
-  }
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
   // trackers //
   get trackers() {
     return this._trackers;
@@ -263,4 +237,5 @@ class Workflow extends _commons.Component {
     }
   }
 }
-exports.default = Workflow;
+exports.default = Workflow;
+(0, _options.makeConfigurable)(Workflow.prototype);

package/dist/cjs/workflow/context.js

@@ -13,28 +13,6 @@ class WorkflowContext extends _commons.Component {
     this._client = client;
     this._options = new _options.WorkflowContextOptions();
   }
-  useApi() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    this._options.api = args;
-    return this;
-  }
-  useLayouts(options) {
-    this._options.layouts = options;
-    return this;
-  }
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
 }
-exports.default = WorkflowContext;
+exports.default = WorkflowContext;
+(0, _options.makeConfigurable)(WorkflowContext.prototype);

package/dist/cjs/workflow/options.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WorkflowOptions = exports.WorkflowContextOptions = void 0;
+exports.makeConfigurable = makeConfigurable;
 exports.mergeApiOptions = mergeApiOptions;
 exports.mergeDataProcessorOptions = mergeDataProcessorOptions;
 exports.mergeInteractionsOptions = mergeInteractionsOptions;
@@ -58,10 +59,15 @@ function normalizeLayoutsOptions() {
   }
   const normalize = {};
   for (const [role, args] of Object.entries(options)) {
-    normalize[role] = normalizeLayoutOptions(args);
+    normalize[normalizeRole(role)] = normalizeLayoutOptions(args);
   }
   return normalize;
 }
+function normalizeRole(role) {
+  role = (0, _commons.lowerCamelToSnake)(role);
+  role = (0, _commons.kebabToSnake)(role);
+  return role;
+}
 function normalizeLayoutOptions(args) {
   // take args:
   // * undefined
@@ -128,8 +134,8 @@ function normalizeInteractionsOptions(options) {
 
 // merge //
 function mergeApiOptions() {
-  for (var _len = arguments.length, optionsList = new Array(_len), _key = 0; _key < _len; _key++) {
-    optionsList[_key] = arguments[_key];
+  for (var _len = arguments.length, optionsList = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
+    optionsList[_key2] = arguments[_key2];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -150,8 +156,8 @@ function mergeObjectValueIfPresent(key, base, overrides) {
   } : {};
 }
 function mergeLayoutsOptions() {
-  for (var _len2 = arguments.length, optionsList = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    optionsList[_key2] = arguments[_key2];
+  for (var _len2 = arguments.length, optionsList = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+    optionsList[_key3] = arguments[_key3];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -177,14 +183,14 @@ function mergeLayoutParameters(base, overrides) {
   });
 }
 function mergeDataProcessorOptions() {
-  for (var _len3 = arguments.length, optionsList = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    optionsList[_key3] = arguments[_key3];
+  for (var _len3 = arguments.length, optionsList = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
+    optionsList[_key4] = arguments[_key4];
   }
   return optionsList.flat().filter(Boolean);
 }
 function mergeTrackersOptions() {
-  for (var _len4 = arguments.length, optionsList = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    optionsList[_key4] = arguments[_key4];
+  for (var _len4 = arguments.length, optionsList = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) {
+    optionsList[_key5] = arguments[_key5];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -201,8 +207,8 @@ function mergeTrackerEventOptions() {
   return overrides === false || base === false ? overrides : Object.assign({}, base, overrides);
 }
 function mergeInteractionsOptions() {
-  for (var _len5 = arguments.length, optionsList = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    optionsList[_key5] = arguments[_key5];
+  for (var _len5 = arguments.length, optionsList = new Array(_len5), _key6 = 0; _key6 < _len5; _key6++) {
+    optionsList[_key6] = arguments[_key6];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -251,20 +257,20 @@ class WorkflowContextOptions {
 exports.WorkflowContextOptions = WorkflowContextOptions;
 class WorkflowOptions {
   constructor() {
-    let globals = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this._events = new _commons.EventEmitter({
       target: this
     });
     this._defaults = defaults;
-    this._globals = globals || {};
+    this._context = context || {};
     this._locals = {};
     (0, _commons.defineValues)(this, {
       resolved: new ResolvedWorkflowOptions(this),
       defaults
     });
-    if (globals && globals.on) {
-      this._unsubscribes = [globals.on('*', event => this._notify(event.name))];
+    if (context && context.on) {
+      this._unsubscribes = [context.on('*', event => this._notify(event.name))];
     }
   }
   _notify(name) {
@@ -281,6 +287,28 @@ class WorkflowOptions {
   }
 }
 exports.WorkflowOptions = WorkflowOptions;
+class WorkflowFeature {
+  constructor(options, store, key, normalize, merge) {
+    this._options = options;
+    this._store = store;
+    this._key = key;
+    this._normalize = value => value !== undefined ? normalize(value) : undefined;
+    this._merge = merge;
+  }
+  get() {
+    return this._store[this._key];
+  }
+  set(value) {
+    this._set(this._normalize(value));
+  }
+  merge(value) {
+    this._set(this._merge(this.get(), this._normalize(value)));
+  }
+  _set(value) {
+    this._store[this._key] = value;
+    this._options._notify(this._key);
+  }
+}
 class ResolvedWorkflowOptions {
   constructor(options) {
     this._options = options;
@@ -292,32 +320,57 @@ for (const {
   merge
 } of FEATURES) {
   Object.defineProperty(WorkflowContextOptions.prototype, key, {
-    set: function (value) {
-      this._globals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function () {
-      return this._globals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._globals, key, normalize, merge));
     }
   });
   Object.defineProperty(WorkflowOptions.prototype, key, {
-    set: function (value) {
-      this._locals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function () {
-      return this._locals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._locals, key, normalize, merge));
     }
   });
   Object.defineProperty(ResolvedWorkflowOptions.prototype, key, {
     get: function () {
       const options = this._options;
-      return merge(options._defaults[key], options._globals[key], options._locals[key]);
+      return merge(options._defaults[key], options._context[key].get(), options._locals[key]);
+    }
+  });
+}
+function makeConfigurable(prototype) {
+  Object.assign(prototype, {
+    useApi() {
+      for (var _len6 = arguments.length, args = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
+        args[_key7] = arguments[_key7];
+      }
+      this._options.api.merge(args);
+      return this;
+    },
+    clearApi() {
+      this._options.api.set();
+      return this;
     }
   });
+  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+    const upperCased = upperCase(feature);
+    Object.assign(prototype, {
+      [`use${upperCased}`](value) {
+        this._options[feature].merge(value);
+        return this;
+      },
+      [`clear${upperCased}`]() {
+        this._options[feature].set();
+        return this;
+      }
+    });
+  }
 }
 
 // helpers //
+function upperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 function concatArrays(a0, a1) {
   return a0 && a0.length ? a1 && a1.length ? [...a0, ...a1] : a0 : a1;
 }

package/package.json

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

package/src/asset/svgs.js

@@ -24,7 +24,7 @@ function loadSvgSprites() {
 loadSvgSprites();
 
 function getSvg(name) {
-  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use xlink:href="#${PREFIX}-${name}"></use></svg>`;
+  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 
 export const SEND = getSvg('send');

package/src/combo/ask/elements.js

@@ -10,6 +10,7 @@ export default class AskComboElements {
     defineValues(this, {
       root,
       followUpsSection: root.querySelector(`.${classPrefix}__follow-ups`),
+      relatedResourcesSection: root.querySelector(`.${classPrefix}__related-resources`),
       relatedResourcesContainer: root.querySelector(`.${classPrefix}__related-resources miso-ask`),
     });
   }

package/src/combo/ask/index.js

@@ -98,7 +98,8 @@ export default class AskCombo extends Combo {
   }
 
   async _setupWorkflows() {
-    const { client, elements, resolvedOptions: options } = this;
+    const { MisoClient, client, elements, resolvedOptions: options } = this;
+    const { wireFollowUps, wireRelatedResources } = MisoClient.ui.defaults.ask;
     const { templates = {}, features = {}, api } = options;
 
     const context = client.ui.asks;
@@ -110,25 +111,11 @@ export default class AskCombo extends Combo {
 
     // TODO: set placeholder if present in options
 
-    if (elements.followUpsSection && features.followUpQuestions !== false) {
-      // when a answer is fully populated, insert a new section for the follow-up question
-      context.on('done', ({ workflow }) => {
-        elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp({ ...options, parentQuestionId: workflow.questionId }));
-      });
-      // if user starts over, clean up current follow-up questions
-      rootWorkflow.on('loading', () => {
-        // clean up the entire follow-ups section
-        elements.followUpsSection.innerHTML = '';
-        // destroy all follow-up workflows
-        context.reset({ root: false });
-      });
+    if (features.followUpQuestions !== false) {
+      wireFollowUps(client, elements.followUpsSection, { ...options, template: templates.followUp });
     }
-
-    if (elements.relatedResourcesContainer && features.relatedResources !== false && features.followUpQuestions !== false) {
-      // when a new query starts, associate the last section container (for related resources) to that workflow
-      context.on('loading', ({ workflow }) => {
-        elements.relatedResourcesContainer.workflow = workflow;
-      });
+    if (features.relatedResources !== false && features.followUpQuestions !== false) {
+      wireRelatedResources(client, elements.relatedResourcesSection);
     }
 
     // start query if specified in URL

package/src/defaults/ask/controls.js

@@ -0,0 +1,42 @@
+import { followUp as followUpTemplate } from './templates.js';
+
+export function wireFollowUps(client, element, { template = followUpTemplate, ...options } = {}) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (typeof template !== 'function') {
+    throw new Error('template must be a function or undefined');
+  }
+  if (!element) {
+    return;
+  }
+  const context = client.ui.asks;
+  const rootWorkflow = client.ui.ask;
+
+  // 1. when an answer is fully populated, insert a new section for the follow-up question
+  context.on('done', (event) => {
+    element.insertAdjacentHTML('beforeend', template({ ...options, parentQuestionId: event.workflow.questionId }));
+  });
+  // 2. if user starts over, clean up existing follow-up questions
+  rootWorkflow.on('loading', () => {
+    // clean up the entire follow-ups section
+    element.innerHTML = '';
+    // destroy all follow-up workflows
+    context.reset({ root: false });
+  });
+}
+
+export function wireRelatedResources(client, element) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (!element) {
+    return;
+  }
+  client.ui.asks.on('loading', (event) => {
+    // When a new query starts, associate the last section container (for related resources) to that workflow
+    for (const container of element.querySelectorAll('miso-ask')) {
+      container.workflow = event.workflow;
+    }
+  });
+}

package/src/defaults/ask/index.js

@@ -2,6 +2,8 @@ import * as _constants from './constants.js';
 import * as _phrases from './phrases.js';
 import * as _templates from './templates.js';
 
+export * from './controls.js';
+
 export const constants = Object.freeze(_constants);
 export const phrases = Object.freeze(_phrases);
 export const templates = Object.freeze(_templates);

package/src/defaults/ask/phrases.js

@@ -11,7 +11,7 @@ export const sources = 'My reply is based on the following';
 /**
  * The phrase displayed right before <miso-query-suggestions>
  */
-export const relatedQuestions = 'Related questions you can explore';
+export const querySuggestions = 'Related questions you can explore';
 
 /**
  * The phrase displayed right before <miso-related-resources>

package/src/defaults/ask/templates.js

@@ -1,3 +1,4 @@
+import { lowerCamelToKebab, kebabToLowerCamel, kebabOrSnakeToLowerCamel } from '@miso.ai/commons';
 import { CLASS_PREFIX } from './constants.js';
 import * as DEFAULT_PHRASES from './phrases.js';
 
@@ -31,9 +32,30 @@ export function followUp(options = {}) {
 function normalizeOptions({
   classPrefix = CLASS_PREFIX,
   circledCitationIndex = true,
+  phrases,
   ...options
 } = {}) {
-  return { classPrefix, circledCitationIndex, ...options };
+  phrases = normalizePhraseOptions(phrases);
+  return { classPrefix, circledCitationIndex, phrases, ...options };
+}
+
+function normalizePhraseOptions(options = {}) {
+  if (!options) {
+    return {};
+  }
+  const normalized = {};
+  for (const key in options) {
+    normalized[normalizePhraseOptionKey(key)] = options[key];
+  }
+  return normalized;
+}
+
+function normalizePhraseOptionKey(key) {
+  key = kebabOrSnakeToLowerCamel(key);
+  if (key === 'relatedQuestions') {
+    return 'querySuggestions'; // legacy key
+  }
+  return key;
 }
 
 // sections & containers //
@@ -55,7 +77,7 @@ function querySuggestions(options) {
   const { features = {} } = options;
   return features.querySuggestions === false ? '' :
     container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
-      phrase(options, { name: 'related-questions', tag: 'h3' }),
+      phrase(options, { name: 'query-suggestions', tag: 'h3' }),
       '<miso-query-suggestions></miso-query-suggestions>',
     ]);
 }
@@ -145,11 +167,3 @@ function attrs({ classes = [], ...attributes } = {}) {
   }
   return str;
 }
-
-function kebabToLowerCamel(str) {
-  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-}
-
-function lowerCamelToKebab(str) {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}

package/src/layout/radio/feedback.js

@@ -5,45 +5,47 @@ import { THUMB } from '../svgs.js';
 const TYPE = 'feedback';
 const DEFAULT_CLASSNAME = 'miso-feedback';
 
-function root(layout) {
-  const { className, role, templates, options } = layout;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `
-<div class="${className}" ${roleAttr}>
-  ${options.options.map((option) => templates.option(layout, option))}
-</div>
-`;
-}
-
-const OPTIONS = [
-  {
-    text: 'Helpful',
-    value: 'helpful',
-    icon: THUMB,
-  },
-  {
-    text: 'Not helpful',
-    value: 'unhelpful',
-    icon: THUMB,
-  },
-];
+const OPTIONS = [ 'helpful', 'unhelpful' ];
 
 function options(layout) {
   const { templates } = layout;
-  return OPTIONS.map((data) => templates.option(layout, data)).join('');
+  return OPTIONS.map(value => templates.option(layout, { value })).join('');
 }
 
-function content(layout, { text, icon }) {
-  const { className, options = {} } = layout;
+function content(layout, { value }) {
+  const { className, templates, options = {} } = layout;
   return `
-${options.icon !== false ? `<i class="${className}__icon">${icon}</i>` : ''}
-${options.text !== false ? `<span class="${className}__text">${text}</span>` : ''}
+${options.icon !== false ? `<i class="${className}__icon">${templates.icon(layout, value)}</i>` : ''}
+${options.text !== false ? `<span class="${className}__text">${templates.text(layout, value)}</span>` : ''}
 `;
 }
 
+function icon(layout, value) {
+  switch (value) {
+    case 'helpful':
+    case 'unhelpful':
+      return THUMB;
+    default:
+      return '';
+  }
+}
+
+function text(layout, value) {
+  switch (value) {
+    case 'helpful':
+      return 'Helpful';
+    case 'unhelpful':
+      return 'Not helpful';
+    default:
+      return '';
+  }
+}
+
 const DEFAULT_TEMPLATES = Object.freeze({
   options,
   content,
+  icon,
+  text,
 });
 
 export default class FeedbackLayout extends RadioLayout {

package/src/version.js

@@ -1 +1 @@
-export default '1.9.8';
+export default '1.9.9-beta.1';

package/src/workflow/ask.js

@@ -190,19 +190,6 @@ export default class Ask extends Workflow {
     };
   }
 
-  _onDataUpdate(data) {
-    // TODO: can we just put this in _defaultProcessData?
-    if (this._questionId) {
-      return;
-    }
-    const questionId = data && data.value && data.value.question_id;
-    // capture question ID and register at context
-    if (questionId) {
-      this._questionId = questionId;
-      this._context._byQid.set(questionId, this);
-    }
-  }
-
   _onAnswerViewUpdate({ session, status, ongoing }) {
     if (status === STATUS.INITIAL) {
       return;

package/src/workflow/base.js

@@ -4,7 +4,7 @@ import * as sources from '../source/index.js';
 import { STATUS, ROLE } from '../constants.js';
 import { ContainerLayout, ErrorLayout } from '../layout/index.js';
 import { injectLogger } from './utils.js';
-import { WorkflowOptions, mergeLayoutsOptions, mergeInteractionsOptions } from './options.js';
+import { WorkflowOptions, mergeLayoutsOptions, mergeInteractionsOptions, makeConfigurable } from './options.js';
 
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.CONTAINER]: ContainerLayout.type,
@@ -150,32 +150,6 @@ export default class Workflow extends Component {
     return this;
   }
 
-  // configuration //
-  useApi(...args) {
-    this._options.api = args;
-    return this;
-  }
-
-  useLayouts(options = {}) {
-    this._options.layouts = options;
-    return this;
-  }
-
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
   // trackers //
   get trackers() {
     return this._trackers;
@@ -241,3 +215,5 @@ export default class Workflow extends Component {
   }
 
 }
+
+makeConfigurable(Workflow.prototype);

package/src/workflow/context.js

@@ -1,5 +1,5 @@
 import { Component } from '@miso.ai/commons';
-import { WorkflowContextOptions } from './options.js';
+import { WorkflowContextOptions, makeConfigurable } from './options.js';
 
 export default class WorkflowContext extends Component {
 
@@ -10,29 +10,6 @@ export default class WorkflowContext extends Component {
     this._options = new WorkflowContextOptions();
   }
 
-  useApi(...args) {
-    this._options.api = args;
-    return this;
-  }
-
-  useLayouts(options) {
-    this._options.layouts = options;
-    return this;
-  }
-
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
 }
+
+makeConfigurable(WorkflowContext.prototype);

package/src/workflow/options.js

@@ -1,4 +1,4 @@
-import { EventEmitter, defineValues, asArray, trimObj } from '@miso.ai/commons';
+import { EventEmitter, defineValues, asArray, trimObj, lowerCamelToSnake, kebabToSnake } from '@miso.ai/commons';
 import { ROLE } from '../constants.js';
 
 // normalize //
@@ -28,11 +28,17 @@ export function normalizeLayoutsOptions(options = {}) {
   }
   const normalize = {};
   for (const [role, args] of Object.entries(options)) {
-    normalize[role] = normalizeLayoutOptions(args);
+    normalize[normalizeRole(role)] = normalizeLayoutOptions(args);
   }
   return normalize;
 }
 
+function normalizeRole(role) {
+  role = lowerCamelToSnake(role);
+  role = kebabToSnake(role);
+  return role;
+}
+
 function normalizeLayoutOptions(args) {
   // take args:
   // * undefined
@@ -232,10 +238,10 @@ export class WorkflowContextOptions {
 
 export class WorkflowOptions {
 
-  constructor(globals = {}, defaults = {}) {
+  constructor(context = {}, defaults = {}) {
     this._events = new EventEmitter({ target: this });
     this._defaults = defaults;
-    this._globals = globals || {};
+    this._context = context || {};
     this._locals = {};
 
     defineValues(this, {
@@ -243,9 +249,9 @@ export class WorkflowOptions {
       defaults,
     });
 
-    if (globals && globals.on) {
+    if (context && context.on) {
       this._unsubscribes = [
-        globals.on('*', event => this._notify(event.name)),
+        context.on('*', event => this._notify(event.name)),
       ];
     }
   }
@@ -263,6 +269,35 @@ export class WorkflowOptions {
 
 }
 
+class WorkflowFeature {
+
+  constructor(options, store, key, normalize, merge) {
+    this._options = options;
+    this._store = store;
+    this._key = key;
+    this._normalize = value => value !== undefined ? normalize(value) : undefined;
+    this._merge = merge;
+  }
+
+  get() {
+    return this._store[this._key];
+  }
+
+  set(value) {
+    this._set(this._normalize(value));
+  }
+
+  merge(value) {
+    this._set(this._merge(this.get(), this._normalize(value)));
+  }
+
+  _set(value) {
+    this._store[this._key] = value;
+    this._options._notify(this._key);
+  }
+
+}
+
 class ResolvedWorkflowOptions {
 
   constructor(options) {
@@ -273,32 +308,58 @@ class ResolvedWorkflowOptions {
 
 for (const { key, normalize, merge } of FEATURES) {
   Object.defineProperty(WorkflowContextOptions.prototype, key, {
-    set: function(value) {
-      this._globals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function() {
-      return this._globals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._globals, key, normalize, merge));
     },
   });
   Object.defineProperty(WorkflowOptions.prototype, key, {
-    set: function(value) {
-      this._locals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function() {
-      return this._locals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._locals, key, normalize, merge));
     },
   });
   Object.defineProperty(ResolvedWorkflowOptions.prototype, key, {
     get: function() {
       const options = this._options;
-      return merge(options._defaults[key], options._globals[key], options._locals[key]);
+      return merge(options._defaults[key], options._context[key].get(), options._locals[key]);
+    },
+  });
+}
+
+export function makeConfigurable(prototype) {
+  Object.assign(prototype, {
+    useApi(...args) {
+      this._options.api.merge(args);
+      return this;
+    },
+    clearApi() {
+      this._options.api.set();
+      return this;
     },
   });
+  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+    const upperCased = upperCase(feature);
+    Object.assign(prototype, {
+      [`use${upperCased}`](value) {
+        (this._options[feature]).merge(value);
+        return this;
+      },
+      [`clear${upperCased}`]() {
+        (this._options[feature]).set();
+        return this;
+      },
+    });
+  }
 }
 
+
+
 // helpers //
+function upperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 function concatArrays(a0, a1) {
   return (a0 && a0.length) ? (a1 && a1.length) ? [...a0, ...a1] : a0 : a1;
 }