@miso.ai/client-sdk-ui 1.10.3 → 1.11.0-beta.0

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

@@ -8,18 +8,112 @@ exports.helpers = void 0;
 exports.root = root;
 exports.sections = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("./constants.js");
+var CONSTANTS = _interopRequireWildcard(require("./constants.js"));
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
-const _excluded = ["classPrefix", "circledCitationIndex", "phrases"],
-  _excluded2 = ["classes"];
+var _templates = require("../common/templates.js");
 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; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-// TODO: rename classPrefix -> rootClass?
-// TODO: placeholder
-
+class Sections extends _templates.Sections {
+  constructor() {
+    super({
+      helpers
+    });
+  }
+  answerGroup(options) {
+    const {
+      container
+    } = this._helpers;
+    return [...super.answerGroup(options), container(options, {
+      name: 'bottom-spacing',
+      visibleWhen: 'ongoing'
+    })];
+  }
+  answer(options) {
+    const {
+      container
+    } = this._helpers;
+    return container(options, {
+      name: 'answer',
+      visibleWhen: 'ready'
+    }, [options.parentQuestionId ? '<hr>' : '', ...this.question(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+  }
+  sources(options) {
+    const {
+      container,
+      phrase
+    } = this._helpers;
+    return container(options, {
+      name: 'sources',
+      visibleWhen: 'nonempty'
+    }, ['<hr>', phrase(options, {
+      name: 'sources',
+      tag: 'h3'
+    }), '<miso-sources></miso-sources>']);
+  }
+  followUps(options) {
+    const {
+      classPrefix,
+      features = {}
+    } = options;
+    return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
+  }
+  relatedResourcesSection(options) {
+    const {
+      container,
+      phrase,
+      section
+    } = this._helpers;
+    const {
+      features = {},
+      logo = true
+    } = options;
+    const body = features.relatedResources === false ? '' : container(options, {
+      name: 'related-resources',
+      visibleWhen: 'nonempty',
+      logo
+    }, [phrase(options, {
+      name: 'related-resources',
+      tag: 'h2'
+    }), '<miso-related-resources></miso-related-resources>']);
+    return section(options, {
+      name: 'related-resources'
+    }, body);
+  }
+  querySuggestions(options) {
+    const {
+      container,
+      phrase
+    } = this._helpers;
+    const {
+      features = {}
+    } = options;
+    return features.querySuggestions === false ? '' : container(options, {
+      name: 'query-suggestions',
+      visibleWhen: 'initial+nonempty'
+    }, [phrase(options, {
+      name: 'query-suggestions',
+      tag: 'h3'
+    }), '<miso-query-suggestions></miso-query-suggestions>']);
+  }
+}
+const helpers = exports.helpers = (0, _commons.externalize)(new _templates.Helpers(Object.assign({}, CONSTANTS, {
+  DEFAULT_PHRASES
+})));
+const sections = exports.sections = (0, _commons.externalize)(new Sections({
+  helpers
+}));
 function root() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    normalizeOptions,
+    section,
+    container
+  } = helpers;
+  const {
+    followUps,
+    relatedResourcesSection,
+    answerGroup
+  } = sections;
   options = normalizeOptions(options);
   return [section(options, {
     name: 'question'
@@ -27,11 +121,20 @@ function root() {
     name: 'query'
   }, '<miso-query></miso-query>')]), section(options, {
     name: 'answer'
-  }, answerGroup(options)), followUps(options), relatedResources(options)].join('');
+  }, answerGroup(options)), followUps(options), relatedResourcesSection(options)].join('');
 }
 ;
 function followUp() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    normalizeOptions,
+    section,
+    container
+  } = helpers;
+  const {
+    querySuggestions,
+    answerGroup
+  } = sections;
   options = normalizeOptions(options);
   return section(options, {
     name: 'follow-up'
@@ -40,214 +143,4 @@ function followUp() {
     visibleWhen: 'initial loading'
   }, '<miso-query></miso-query>'), ...answerGroup(options)]);
 }
-;
-const sections = exports.sections = Object.freeze({
-  followUps,
-  relatedResources,
-  querySuggestions,
-  answerGroup,
-  answer,
-  sources
-});
-const helpers = exports.helpers = Object.freeze({
-  normalizeOptions,
-  normalizePhraseOptions,
-  normalizePhraseOptionKey,
-  phrase,
-  phraseText,
-  section,
-  container,
-  element,
-  attrs
-});
-
-// options //
-function normalizeOptions() {
-  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let {
-      classPrefix = _constants.CLASS_PREFIX,
-      circledCitationIndex = true,
-      phrases
-    } = _ref,
-    options = _objectWithoutPropertiesLoose(_ref, _excluded);
-  phrases = normalizePhraseOptions(phrases);
-  return Object.assign({
-    classPrefix,
-    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) {
-  const {
-    classPrefix,
-    features = {}
-  } = options;
-  return features.followUpQuestions === false ? '' : `<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>`;
-}
-function relatedResources(options) {
-  const {
-    features = {},
-    logo = true
-  } = options;
-  const body = features.relatedResources === false ? '' : container(options, {
-    name: 'related-resources',
-    visibleWhen: 'nonempty',
-    logo
-  }, [phrase(options, {
-    name: 'related-resources',
-    tag: 'h2'
-  }), '<miso-related-resources></miso-related-resources>']);
-  return section(options, {
-    name: 'related-resources'
-  }, body);
-}
-function querySuggestions(options) {
-  const {
-    features = {}
-  } = options;
-  return features.querySuggestions === false ? '' : container(options, {
-    name: 'query-suggestions',
-    visibleWhen: 'initial+nonempty'
-  }, [phrase(options, {
-    name: 'query-suggestions',
-    tag: 'h3'
-  }), '<miso-query-suggestions></miso-query-suggestions>']);
-}
-function answerGroup(options) {
-  return [answer(options), affiliation(options), sources(options), container(options, {
-    name: 'bottom-spacing',
-    visibleWhen: 'ongoing'
-  })];
-}
-function answer(options) {
-  return container(options, {
-    name: 'answer',
-    visibleWhen: 'ready'
-  }, [options.parentQuestionId ? '<hr>' : '', phrase(options, {
-    name: 'question',
-    tag: 'div'
-  }), '<miso-question></miso-question>', '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
-}
-function sources(options) {
-  return container(options, {
-    name: 'sources',
-    visibleWhen: 'nonempty'
-  }, ['<hr>', phrase(options, {
-    name: 'sources',
-    tag: 'h3'
-  }), '<miso-sources></miso-sources>']);
-}
-function affiliation(options) {
-  const {
-    affiliation = true
-  } = options || {};
-  if (!affiliation) {
-    return '';
-  }
-  return container(options, {
-    name: 'affiliation',
-    visibleWhen: 'nonempty'
-  }, ['<miso-affiliation></miso-affiliation>']);
-}
-function phrase(options, _ref2) {
-  let {
-    name,
-    tag = 'div'
-  } = _ref2;
-  const {
-    classPrefix
-  } = options;
-  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, (0, _commons.kebabToLowerCamel)(name))}</${tag}>`;
-}
-function phraseText(options, key) {
-  const {
-    phrases = {}
-  } = options;
-  const fn = phrases[key] || DEFAULT_PHRASES[key];
-  switch (typeof fn) {
-    case 'function':
-      return fn(options);
-    case 'string':
-      return fn;
-    default:
-      return '';
-  }
-}
-function section(_ref3, _ref4, body) {
-  let {
-    classPrefix
-  } = _ref3;
-  let {
-    name
-  } = _ref4;
-  return element('section', {
-    classes: [`${classPrefix}__section`, `${classPrefix}__${name}`]
-  }, body);
-}
-function container(_ref5, _ref6, body) {
-  let {
-    classPrefix,
-    circledCitationIndex,
-    parentQuestionId
-  } = _ref5;
-  let {
-    name,
-    visibleWhen,
-    logo = false
-  } = _ref6;
-  const classes = [`${classPrefix}__${name}-container`];
-  circledCitationIndex && classes.push('miso-circled-citation-index');
-  return element('miso-ask', {
-    classes,
-    visibleWhen,
-    logo,
-    parentQuestionId
-  }, body);
-}
-function element(tag) {
-  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let body = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  if (typeof attributes === 'string' || Array.isArray(attributes)) {
-    body = attributes;
-    attributes = {};
-  }
-  return `<${tag}${attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
-}
-function attrs() {
-  let _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let {
-      classes = []
-    } = _ref7,
-    attributes = _objectWithoutPropertiesLoose(_ref7, _excluded2);
-  let str = ``;
-  if (classes.length) {
-    str += ` class="${classes.join(' ')}"`;
-  }
-  for (const name in attributes) {
-    const value = attributes[name];
-    if (value !== undefined) {
-      str += ` ${(0, _commons.lowerCamelToKebab)(name)}="${value}"`;
-    }
-  }
-  return str;
-}
+;

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

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sections = exports.Helpers = void 0;
+exports.externalize = externalize;
+var _commons = require("@miso.ai/commons");
+const _excluded = ["classPrefix", "circledCitationIndex", "phrases"],
+  _excluded2 = ["classes"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+// TODO: rename classPrefix -> rootClass?
+// TODO: placeholder
+
+class Sections {
+  constructor(_ref) {
+    let {
+      helpers
+    } = _ref;
+    this._helpers = helpers;
+  }
+  errorSection(options) {
+    const {
+      section,
+      container
+    } = this._helpers;
+    return section(options, {
+      name: 'error'
+    }, [container(options, {
+      name: 'error',
+      visibleWhen: 'erroneous'
+    }, '<miso-error></miso-error>')]);
+  }
+  answerGroup(options) {
+    return [this.answer(options), this.affiliation(options), this.sources(options)];
+  }
+  answer(options) {
+    const {
+      container
+    } = this._helpers;
+    return container(options, {
+      name: 'answer',
+      visibleWhen: 'ready'
+    }, [...this.question(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+  }
+  question(options) {
+    const {
+      phrase
+    } = this._helpers;
+    return [phrase(options, {
+      name: 'question',
+      tag: 'div'
+    }), '<miso-question></miso-question>'];
+  }
+  sources(options) {
+    const {
+      container,
+      phrase
+    } = this._helpers;
+    return container(options, {
+      name: 'sources',
+      visibleWhen: 'nonempty'
+    }, [phrase(options, {
+      name: 'sources',
+      tag: 'h3'
+    }), '<miso-sources></miso-sources>']);
+  }
+  affiliation(options) {
+    const {
+      container
+    } = this._helpers;
+    const {
+      affiliation = true
+    } = options || {};
+    if (!affiliation) {
+      return '';
+    }
+    return container(options, {
+      name: 'affiliation',
+      visibleWhen: 'nonempty'
+    }, ['<miso-affiliation></miso-affiliation>']);
+  }
+}
+exports.Sections = Sections;
+class Helpers {
+  constructor(context) {
+    this._context = context;
+    (0, _commons.defineValues)(this, {
+      lowerCamelToKebab: _commons.lowerCamelToKebab,
+      kebabToLowerCamel: _commons.kebabToLowerCamel,
+      kebabOrSnakeToLowerCamel: _commons.kebabOrSnakeToLowerCamel
+    });
+  }
+
+  // options //
+  normalizeOptions() {
+    let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        classPrefix,
+        circledCitationIndex = true,
+        phrases
+      } = _ref2,
+      options = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    classPrefix = classPrefix || this._context.CLASS_PREFIX;
+    phrases = this.normalizePhraseOptions(phrases);
+    return Object.assign({
+      classPrefix,
+      circledCitationIndex,
+      phrases
+    }, options);
+  }
+  normalizePhraseOptions() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!options) {
+      return {};
+    }
+    const normalized = {};
+    for (const key in options) {
+      normalized[this.normalizePhraseOptionKey(key)] = options[key];
+    }
+    return normalized;
+  }
+  normalizePhraseOptionKey(key) {
+    key = (0, _commons.kebabOrSnakeToLowerCamel)(key);
+    if (key === 'relatedQuestions') {
+      return 'querySuggestions'; // legacy key
+    }
+    return key;
+  }
+
+  // html //
+  phrase(options, _ref3) {
+    let {
+      name,
+      tag = 'div',
+      inline = false
+    } = _ref3;
+    const {
+      classPrefix
+    } = options;
+    const mainClass = inline ? `${classPrefix}__phrase-inline` : `${classPrefix}__phrase`;
+    return `<${tag} class="${mainClass} ${classPrefix}__${name}-phrase">${this.phraseText(options, (0, _commons.kebabToLowerCamel)(name))}</${tag}>`;
+  }
+  phraseText(options, key) {
+    const {
+      phrases = {}
+    } = options;
+    const fn = phrases[key] || this._context.DEFAULT_PHRASES[key];
+    switch (typeof fn) {
+      case 'function':
+        return fn(options);
+      case 'string':
+        return fn;
+      default:
+        return '';
+    }
+  }
+  section(_ref4, _ref5, body) {
+    let {
+      classPrefix
+    } = _ref4;
+    let {
+      name
+    } = _ref5;
+    return this.element('section', {
+      classes: [`${classPrefix}__section`, `${classPrefix}__${name}`]
+    }, body);
+  }
+  container(_ref6, _ref7, body) {
+    let {
+      classPrefix,
+      circledCitationIndex,
+      parentQuestionId
+    } = _ref6;
+    let {
+      name,
+      visibleWhen,
+      logo = false
+    } = _ref7;
+    const classes = [`${classPrefix}__${name}-container`];
+    circledCitationIndex && classes.push('miso-circled-citation-index');
+    return this.element(this._context.CONAINER_TAG, {
+      classes,
+      visibleWhen,
+      logo,
+      parentQuestionId
+    }, body);
+  }
+  element(tag) {
+    let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let body = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    return `<${tag}${this.attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
+  }
+  attrs() {
+    let _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        classes = []
+      } = _ref8,
+      attributes = _objectWithoutPropertiesLoose(_ref8, _excluded2);
+    let str = ``;
+    if (classes.length) {
+      str += ` class="${classes.join(' ')}"`;
+    }
+    for (const name in attributes) {
+      const value = attributes[name];
+      if (value !== undefined) {
+        str += ` ${(0, _commons.lowerCamelToKebab)(name)}="${value}"`;
+      }
+    }
+    return str;
+  }
+}
+exports.Helpers = Helpers;
+function externalize(object) {
+  const externalized = {};
+  const props = new Set();
+  for (let o = object; o !== Object.prototype; o = Object.getPrototypeOf(o)) {
+    const descriptors = Object.getOwnPropertyDescriptors(o);
+    for (const key in descriptors) {
+      if (key === 'constructor' || key.startsWith('_') || props.has(key)) {
+        continue;
+      }
+      props.add(key);
+      // TODO: getter, setter
+      const {
+        value
+      } = descriptors[key];
+      if (value) {
+        externalized[key] = typeof value === 'function' ? value.bind(object) : value;
+      }
+    }
+  }
+  return Object.freeze(externalized);
+}

package/dist/cjs/defaults/hybrid-search/answer-box.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./constants.js");
+var _constants2 = require("../../constants.js");
+var _phrases = require("./phrases.js");
+const CLASS_OPEN = 'answer-box-open';
+const CLASS_SHOWN = 'answer-box-shown';
+const TOGGLE_BUTTON_SELECTOR = '[data-role="answer-box-toggle"]';
+class AnswerBox {
+  constructor(client, element) {
+    let {
+      classPrefix = _constants.CLASS_PREFIX,
+      phrases = {}
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    this._client = client;
+    this._workflow = client.ui.hybridSearch;
+    this._element = element;
+    this._classPrefix = classPrefix;
+    this._phrases = phrases;
+    this._init();
+  }
+  _init() {
+    const element = this._element;
+    const workflow = this._workflow;
+
+    // expose widget API
+    workflow.answerBox = this;
+    workflow._unsubscribes.push(() => this.destroy()); // TODO: review
+
+    // handle toggle button clicks
+    const callback = event => this._handleClick(event);
+    element.addEventListener('click', callback);
+
+    // sync state
+    this._syncWofkflowStatus();
+    this._syncButtonText();
+    this._unsubscribes = [() => element.removeEventListener('click', callback), workflow.on('loading', () => this.hide()), workflow.on('error', () => this.show()), workflow.on('ready', () => this.show())];
+  }
+  _handleClick(_ref) {
+    let {
+      target,
+      button
+    } = _ref;
+    // only left click
+    if (button !== 0) {
+      return;
+    }
+    if (target.closest(TOGGLE_BUTTON_SELECTOR)) {
+      this.toggleOpen();
+    }
+  }
+  _syncWofkflowStatus() {
+    const {
+      status
+    } = this._workflow;
+    switch (status) {
+      case _constants2.STATUS.ERRONEOUS:
+      case _constants2.STATUS.READY:
+        this.show();
+        break;
+      default:
+        this.hide();
+    }
+  }
+  _updateBoxStatus(method, className) {
+    this._element.classList[method](`${this._classPrefix}__${className}`);
+  }
+  _syncButtonText() {
+    const phrase = this.isOpen ? this._phrases.showLess || _phrases.showLess : this._phrases.showMore || _phrases.showMore;
+    for (const button of this._element.querySelectorAll(TOGGLE_BUTTON_SELECTOR)) {
+      button.textContent = phrase;
+    }
+  }
+  destroy() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    const workflow = this._workflow;
+    if (workflow && workflow.answerBox === this) {
+      delete workflow.answerBox;
+    }
+  }
+}
+exports.default = AnswerBox;
+const GETTERS = {
+  isOpen: CLASS_OPEN,
+  shown: CLASS_SHOWN
+};
+const METHODS = {
+  toggleOpen: ['toggle', CLASS_OPEN],
+  open: ['open', CLASS_OPEN],
+  close: ['remove', CLASS_OPEN],
+  toggleHidden: ['toggle', CLASS_SHOWN],
+  show: ['add', CLASS_SHOWN],
+  hide: ['remove', CLASS_SHOWN]
+};
+for (const [prop, className] of Object.entries(GETTERS)) {
+  Object.defineProperty(AnswerBox.prototype, prop, {
+    get() {
+      return this._element.classList.contains(`${this._classPrefix}__${className}`);
+    }
+  });
+}
+for (const [method, [action, className]] of Object.entries(METHODS)) {
+  AnswerBox.prototype[method] = function () {
+    this._updateBoxStatus(action, className);
+    if (className === CLASS_OPEN) {
+      this._syncButtonText();
+    }
+  };
+}

package/dist/cjs/defaults/hybrid-search/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CONAINER_TAG = exports.CLASS_PREFIX = void 0;
+const CLASS_PREFIX = exports.CLASS_PREFIX = 'miso-hybrid-search-combo';
+const CONAINER_TAG = exports.CONAINER_TAG = 'miso-hybrid-search';