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

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, {
+        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,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wireFollowUps = wireFollowUps;
+exports.wireRelatedResources = wireRelatedResources;
+var _templates = require("./templates.js");
+function wireFollowUps(client, element) {
+  let {
+    template = _templates.followUp
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  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({
+      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/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-beta.2';
+var _default = exports.default = '1.9.9-beta.0';

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/package.json

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

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, { 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 } = {}) {
+  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({ 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/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-beta.2';
+export default '1.9.9-beta.0';

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;