@miso.ai/client-sdk-ui 1.9.0 → 1.9.1-beta.0

package/dist/cjs/actor/views.js

@@ -218,7 +218,7 @@ class Views {
   get(role) {
     return this._actor.get(role).interface;
   }
-  get views() {
+  get all() {
     return this._actor.views.map(view => view.interface);
   }
 }

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

@@ -13,13 +13,9 @@ class AskComboElements {
     }
     (0, _commons.defineValues)(this, {
       root,
-      rootQuery: root.querySelector(`#${_constants.PREFIX}__question miso-query`),
       followUpsSection: root.querySelector(`#${_constants.PREFIX}__follow-ups`),
       relatedResourcesContainer: root.querySelector(`#${_constants.PREFIX}__related-resources miso-ask`)
     });
-    if (!this.rootQuery) {
-      throw new Error(`Root question query element not found.`);
-    }
     if (!this.followUpsSection) {
       throw new Error(`Follow-ups section element not found.`);
     }
@@ -27,8 +23,5 @@ class AskComboElements {
       throw new Error(`Related resources container element not found.`);
     }
   }
-  get rootInput() {
-    return this.rootQuery.querySelector(`[data-role="input"]`);
-  }
 }
 exports.default = AskComboElements;

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
-var _constants = require("../../constants.js");
 var _base = _interopRequireDefault(require("../base.js"));
 var _options = _interopRequireDefault(require("./options.js"));
 var _elements = _interopRequireDefault(require("./elements.js"));
@@ -122,9 +120,9 @@ class AskCombo extends _base.default {
       let {
         workflow
       } = _ref;
-      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(options, {
+      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(Object.assign({}, options, {
         parentQuestionId: workflow.questionId
-      }));
+      })));
     });
 
     // when a new query starts, associate the last section container (for related resources) to that workflow
@@ -145,24 +143,8 @@ class AskCombo extends _base.default {
       });
     });
 
-    // wait for miso-query content to be populated
-    const QUERY = _index.fields.view(_constants.ROLE.QUERY);
-    if (!rootWorkflow.states[QUERY]) {
-      await rootWorkflow._hub.once(QUERY);
-    }
-
     // start query if specified in URL
-    const {
-      q
-    } = options;
-    if (q) {
-      elements.rootInput.value = q;
-      rootWorkflow.query({
-        q
-      });
-    } else {
-      elements.rootInput.focus();
-    }
+    rootWorkflow.autoQuery();
   }
 }
 exports.default = AskCombo;

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

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var templates = _interopRequireWildcard(require("./templates.js"));
-var phrases = _interopRequireWildcard(require("./phrases.js"));
+var _index = require("../../defaults/ask/index.js");
 const _excluded = ["api_key", "api_host", "templates", "phrases"];
-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 && Object.prototype.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(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; }
 // TODO: generalize
 
@@ -17,8 +14,7 @@ const {
   currentScript
 } = document;
 const DEFAULT_OPTIONS = Object.freeze({
-  templates,
-  phrases,
+  templates: _index.templates,
   autostart: true
 });
 class AskComboOptions {
@@ -62,7 +58,7 @@ function normalizeOptions() {
     apiKey,
     apiHost,
     templates: templateAsFunction(templates),
-    phrases: templateAsFunction(phrases)
+    phrases
   }, options));
 }
 

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: 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"));
+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 && Object.prototype.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);
+const phrases = exports.phrases = Object.freeze(_phrases);
+const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/{combo → defaults}/ask/phrases.js

@@ -4,7 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+/**
+ * The phrase displayed right before <miso-question>
+ */
 const question = exports.question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
 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';
+
+/**
+ * The phrase displayed right before <miso-related-resources>
+ */
 const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';

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

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.followUp = followUp;
+exports.root = root;
+var _constants = require("./constants.js");
+var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.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 && Object.prototype.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; }
+// TODO: refactor
+// TODO: make ids constants
+// TODO: placeholder
+
+function root() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+<section id="${classPrefix}__question" class="${classPrefix}__section ${classPrefix}__question">
+  <miso-ask class="${classPrefix}__query-container">
+    <miso-query></miso-query>
+  </miso-ask>
+</section>
+<section class="${classPrefix}__section ${classPrefix}__answer">
+  ${answer(options)}
+  ${sources(options)}
+  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
+</section>
+<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>
+<section id="${classPrefix}__related-resources" class="${classPrefix}__section ${classPrefix}__related-resources">
+  <miso-ask visible-when="nonempty" logo="true">
+    <h2 class="${classPrefix}__phrase ${classPrefix}__related-resources-phrase">${phraseText(options, 'relatedResources')}</h2>
+    <miso-related-resources></miso-related-resources>
+  </miso-ask>
+</section>`.trim();
+}
+;
+function followUp() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    classPrefix = _constants.CLASS_PREFIX,
+    parentQuestionId
+  } = options;
+  return `
+<section class="${classPrefix}__section ${classPrefix}__follow-up">
+  <miso-ask class="${classPrefix}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
+    <h3 class="${classPrefix}__phrase ${classPrefix}__related-questions-phrase">${phraseText(options, 'relatedQuestions')}</h3>
+    <miso-query-suggestions></miso-query-suggestions>
+  </miso-ask>
+  <miso-ask class="${classPrefix}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
+    <miso-query></miso-query>
+  </miso-ask>
+  ${answer(options)}
+  ${sources(options)}
+  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
+</section>`.trim();
+}
+;
+
+// helpers //
+function answer(options) {
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+${containerOpenTag('answer', Object.assign({}, options, {
+    visibleWhen: 'ready'
+  }))}
+  ${options.parentQuestionId ? '<hr>' : ''}
+  <div class="${classPrefix}__phrase ${classPrefix}__question-phrase">${phraseText(options, 'question')}</div>
+  <miso-question></miso-question>
+  <miso-answer></miso-answer>
+  <miso-feedback></miso-feedback>
+</miso-ask>`.trim();
+}
+;
+function sources(options) {
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+${containerOpenTag('sources', Object.assign({}, options, {
+    visibleWhen: 'nonempty'
+  }))}
+  <hr>
+  <h3 class="${classPrefix}__phrase ${classPrefix}__sources-phrase">${phraseText(options, 'sources')}</h3>
+  <miso-sources></miso-sources>
+</miso-ask>`.trim();
+}
+;
+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 containerOpenTag(name, _ref) {
+  let {
+    visibleWhen,
+    classPrefix = _constants.CLASS_PREFIX,
+    logo = false,
+    circledCitationIndex = true,
+    parentQuestionId
+  } = _ref;
+  let className = `${classPrefix}__${name}-container`;
+  if (circledCitationIndex) {
+    className += ` miso-circled-citation-index`;
+  }
+  const attributes = [` class="${className}"`, ` logo="${logo ? 'true' : 'false'}"`];
+  if (visibleWhen) {
+    attributes.push(` visible-when="${visibleWhen}"`);
+  }
+  if (parentQuestionId) {
+    attributes.push(` parent-question-id="${parentQuestionId}"`);
+  }
+  return `<miso-ask${attributes.join('')}>`;
+}

package/dist/cjs/defaults/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ask = void 0;
+var _ask = _interopRequireWildcard(require("./ask/index.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 && Object.prototype.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 ask = exports.ask = Object.freeze(_ask);

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

@@ -110,6 +110,21 @@ class SearchBoxLayout extends _template.default {
       this._unsubscribes.push(hub.on(_index.fields.suggestions(), () => this._handleInput()));
     }
   }
+  focus() {
+    if (this._element) {
+      this._context().focus();
+    } else {
+      // take a rain check, wait for render
+      this._focusRequested = true;
+    }
+  }
+  set value(value) {
+    if (this._element) {
+      this._context().value = value;
+    } else {
+      this._valueRequested = value;
+    }
+  }
   _preprocess(_ref2) {
     let {
       state
@@ -135,6 +150,8 @@ class SearchBoxLayout extends _template.default {
     }
     this._setupAutocomplete(element);
     this._renderSuggestions(element, data, controls);
+    this._fullfillFocusRequest(element);
+    this._fullfillValueRequest(element);
   }
   _setupAutocomplete(element) {
     const {
@@ -184,6 +201,20 @@ class SearchBoxLayout extends _template.default {
       this._suggestionItems.set(itemElement, suggestionItems[i++]);
     }
   }
+  _fullfillFocusRequest(element) {
+    if (!element || !this._focusRequested) {
+      return;
+    }
+    this._focusRequested = false;
+    this._context(element).focus();
+  }
+  _fullfillValueRequest(element) {
+    if (!element || !this._valueRequested) {
+      return;
+    }
+    this._context(element).value = this._valueRequested;
+    this._valueRequested = undefined;
+  }
   _context(element) {
     element = element || this._view.element;
     if (!element) {
@@ -288,6 +319,24 @@ class Context {
       });
     }
   }
+  focus() {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && inputElement.focus();
+  }
+  set value(value) {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && (inputElement.value = value);
+  }
   _get(role) {
     return !this._element ? undefined : this._cache[role] || (this._cache[role] = this._element.querySelector(`[data-role="${role}"]`));
   }

package/dist/cjs/plugin.js

@@ -11,6 +11,7 @@ var _layouts = _interopRequireDefault(require("./layouts.js"));
 var elements = _interopRequireWildcard(require("./element/index.js"));
 var layouts = _interopRequireWildcard(require("./layout/index.js"));
 var sources = _interopRequireWildcard(require("./source/index.js"));
+var defaults = _interopRequireWildcard(require("./defaults/index.js"));
 var _styles = require("./styles.js");
 var _misoContainer = _interopRequireDefault(require("./element/container/miso-container.js"));
 var _misoCombo = _interopRequireDefault(require("./element/combo/miso-combo.js"));
@@ -30,12 +31,15 @@ class UiPlugin extends _commons.Component {
     this._recommendations = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
+    this._ready = new _commons.Resolution();
   }
   async install(MisoClient, context) {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
-    const ui = {};
-    (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo']);
+    const ui = {
+      defaults
+    };
+    (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo', 'ready']);
     (0, _commons.defineValues)(this, {
       MisoClient
     });
@@ -78,6 +82,7 @@ class UiPlugin extends _commons.Component {
     for (const ElementClass of ElementClasses) {
       (0, _commons.defineAndUpgrade)(ElementClass);
     }
+    this._ready.resolve();
   }
   async requireExtension(name) {
     switch (name) {
@@ -87,6 +92,10 @@ class UiPlugin extends _commons.Component {
         throw new Error(`Unknown extension: ${name}`);
     }
   }
+  get ready() {
+    return Promise.all([this._ready.promise, MisoClient.any() // TODO: we need to wait for element connection
+    ]).then(() => {});
+  }
   _injectClient(client) {
     (0, _commons.defineValues)(client, {
       ui: new Ui(this, client)
@@ -160,14 +169,10 @@ class Ui {
   get explore() {
     return this._explore || (this._explore = new _index.Explore(this._plugin, this._client));
   }
-
-  /*
-  async whenStylesLoaded() {
-    // TODO
+  get ready() {
+    return this._plugin._ready.promise;
   }
-  */
 }
-
 class Combo {
   constructor(plugin, MisoClient) {
     this._plugin = plugin;

package/dist/cjs/styles.js

@@ -18,17 +18,13 @@ async function loadStylesIfNecessary() {
 async function loadStyles() {
   try {
     let link = getExistedLinkElement();
-    if (link) {
-      return waitForLinkLoaded(link);
-    }
-    link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = getCssUrl();
-    return new Promise((resolve, reject) => {
-      link.onload = resolve;
-      link.onerror = reject;
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = getCssUrl();
       document.head.appendChild(link);
-    });
+    }
+    return waitForStylesApplied(link);
   } catch (e) {
     console.error(e);
   }
@@ -53,25 +49,49 @@ function resolveCssUrl() {
 function getExistedLinkElement() {
   return document.head.querySelector(`link[href="${getCssUrl()}"]`);
 }
-async function waitForLinkLoaded(element) {
+async function waitForStylesApplied(element) {
+  await waitForSheetAvailable(element);
+  await waitForSheetIncluded(element);
+}
+async function waitForSheetAvailable(element) {
   if (element.sheet) {
     return;
   }
   return new Promise((resolve, reject) => {
     let intervalId;
-    element.onload = () => {
-      intervalId && clearInterval(intervalId);
-      resolve();
-    };
     element.onerror = () => {
       intervalId && clearInterval(intervalId);
       reject();
     };
     intervalId = setInterval(() => {
-      if (element.sheet) {
-        intervalId && clearInterval(intervalId);
-        resolve();
+      if (!element.sheet) {
+        return;
       }
+      intervalId && clearInterval(intervalId);
+      resolve();
     }, 100);
   });
+}
+async function waitForSheetIncluded(element) {
+  if (isSheetIncluded(element)) {
+    return;
+  }
+  return new Promise(resolve => {
+    let intervalId;
+    intervalId = setInterval(() => {
+      if (!isSheetIncluded(element)) {
+        return;
+      }
+      intervalId && clearInterval(intervalId);
+      resolve();
+    }, 100);
+  });
+}
+function isSheetIncluded(element) {
+  for (const sheet of document.styleSheets) {
+    if (sheet.ownerNode === element) {
+      return true;
+    }
+  }
+  return false;
 }

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

package/dist/cjs/workflow/ask.js

@@ -123,6 +123,29 @@ class Ask extends _base.default {
   }
 
   // lifecycle //
+  autoQuery() {
+    let {
+      setValue = true,
+      focus = true
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const q = new URLSearchParams(window.location.search).get('q');
+    const {
+      layout
+    } = this._views.get(_constants.ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({
+        q
+      });
+    }
+  }
   query() {
     let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {

package/dist/cjs/workflow/base.js

@@ -98,6 +98,9 @@ class Workflow extends _commons.Component {
   get states() {
     return this._hub.states;
   }
+  get views() {
+    return this._views.interface;
+  }
 
   // lifecycle //
   reset() {

package/dist/cjs/workflow/search.js

@@ -43,6 +43,29 @@ class Search extends _base.default {
   }
 
   // lifecycle //
+  autoQuery() {
+    let {
+      setValue = true,
+      focus = true
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const q = new URLSearchParams(window.location.search).get('q');
+    const {
+      layout
+    } = this._views.get(_constants.ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({
+        q
+      });
+    }
+  }
   query(payload) {
     this.restart();
     const {

package/package.json

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

package/src/actor/views.js

@@ -215,7 +215,7 @@ class Views {
     return this._actor.get(role).interface;
   }
 
-  get views() {
+  get all() {
     return this._actor.views.map(view => view.interface);
   }
 

package/src/combo/ask/elements.js

@@ -9,14 +9,10 @@ export default class AskComboElements {
     }
     defineValues(this, {
       root,
-      rootQuery: root.querySelector(`#${PREFIX}__question miso-query`),
       followUpsSection: root.querySelector(`#${PREFIX}__follow-ups`),
       relatedResourcesContainer: root.querySelector(`#${PREFIX}__related-resources miso-ask`),
     });
 
-    if (!this.rootQuery) {
-      throw new Error(`Root question query element not found.`);
-    }
     if (!this.followUpsSection) {
       throw new Error(`Follow-ups section element not found.`);
     }
@@ -25,8 +21,4 @@ export default class AskComboElements {
     }
   }
 
-  get rootInput() {
-    return this.rootQuery.querySelector(`[data-role="input"]`);
-  }
-
 }