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

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
     });
@@ -51,7 +55,6 @@ class UiPlugin extends _commons.Component {
     for (const LayoutClass of LayoutClasses) {
       LayoutClass.MisoClient = MisoClient; // TODO: find better way
     }
-
     for (const LayoutClass of LayoutClasses) {
       this.layouts.register(LayoutClass);
     }
@@ -78,6 +81,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 +91,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)
@@ -147,7 +155,6 @@ class Ui {
   get recommendation() {
     return this.recommendations.get(); // get default recommendation unit
   }
-
   get search() {
     return this._search || (this._search = new _index.Search(this._plugin, this._client));
   }
@@ -160,14 +167,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/util/bindings.js

@@ -14,7 +14,6 @@ function fallbackListFunction(keyAttrName) {
     }
   }));
 }
-
 class Bindings {
   constructor() {
     let {

package/dist/cjs/util/proxy.js

@@ -72,7 +72,6 @@ class ProxyElement {
       }
     }
   }
-
   _offAllFromCurrentElement() {
     if (this._element) {
       for (const {

package/dist/cjs/util/states.js

@@ -37,7 +37,6 @@ class States {
     this.sessionId = sessionId;
     this._states = new Map(); // productId -> {impression, viewable, click}
   }
-
   getFullState(productId) {
     // when we receive a bind event, impression is trigger, making an entry here
     // so if the state is not found, the product is not present yet => all untracked

package/dist/cjs/util/tracker.js

@@ -42,7 +42,6 @@ function normalizeOptions(options) {
   if (options === false) {
     return false; // turn off all tracking
   }
-
   if (options === true) {
     options = {};
   }

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

package/dist/cjs/workflow/ask.js

@@ -56,7 +56,6 @@ const DEFAULT_TRACKERS = Object.freeze({
     }
   }
 });
-
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
@@ -94,7 +93,6 @@ class Ask extends _base.default {
     context._events.emit('create', this);
     this.reset(); // create a session so query suggestions can be tracked
   }
-
   get questionId() {
     return this._questionId;
   }
@@ -123,6 +121,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/asks.js

@@ -16,7 +16,6 @@ class Asks extends _context.default {
     this._byPqid = new Map();
     this._root = new _ask.default(this); // initialize with default workflow
   }
-
   get root() {
     return this._root;
   }
@@ -56,7 +55,6 @@ class Asks extends _context.default {
     if (events === undefined) {
       events = !!root; // events are default to be true only when root = true
     }
-
     if (events) {
       this._events.clear();
     }

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() {
@@ -131,7 +134,6 @@ class Workflow extends _commons.Component {
     if (session.uuid !== this.session.uuid) {
       return; // ignore data for old session or inactive session
     }
-
     this._sessions.start(); // in case session not started yet
 
     data = this._defaultProcessData(data);

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.1"
   },
-  "version": "1.9.0"
+  "version": "1.9.1-beta.1"
 }

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

@@ -1,32 +1,17 @@
 import { defineValues } from '@miso.ai/commons';
-import { PREFIX } from './constants.js';
+import { constants } from '../../defaults/ask/index.js';
 
 export default class AskComboElements {
 
-  constructor(root) {
+  constructor(root, { classPrefix = constants.CLASS_PREFIX } = {}) {
     if (!root) {
       throw new Error('Root element is required');
     }
     defineValues(this, {
       root,
-      rootQuery: root.querySelector(`#${PREFIX}__question miso-query`),
-      followUpsSection: root.querySelector(`#${PREFIX}__follow-ups`),
-      relatedResourcesContainer: root.querySelector(`#${PREFIX}__related-resources miso-ask`),
+      followUpsSection: root.querySelector(`.${classPrefix}__follow-ups`),
+      relatedResourcesContainer: root.querySelector(`.${classPrefix}__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.`);
-    }
-    if (!this.relatedResourcesContainer) {
-      throw new Error(`Related resources container element not found.`);
-    }
-  }
-
-  get rootInput() {
-    return this.rootQuery.querySelector(`[data-role="input"]`);
   }
 
 }

package/src/combo/ask/index.js

@@ -1,6 +1,4 @@
 import { defineValues, waitForDomContentLoaded } from '@miso.ai/commons';
-import { fields } from '../../actor/index.js';
-import { ROLE } from '../../constants.js';
 import Combo from '../base.js';
 import AskComboOptions from './options.js';
 import AskComboElements from './elements.js';
@@ -47,7 +45,7 @@ export default class AskCombo extends Combo {
 
   async _start() {
     await waitForDomContentLoaded();
-    await this.MisoClient.cmdDone;
+    await this.waitForElement();
 
     // setup MisoClient
     await this._setupMisoClient();
@@ -91,7 +89,7 @@ export default class AskCombo extends Combo {
     const { element, resolvedOptions: options } = this;
     const { templates = {} } = options;
     element.innerHTML = templates.root(options);
-    this._elements = new AskComboElements(element);
+    this._elements = new AskComboElements(element, options);
   }
 
   async _createClientInstance() {
@@ -100,45 +98,36 @@ export default class AskCombo extends Combo {
 
   async _setupWorkflows() {
     const { client, elements, resolvedOptions: options } = this;
-    const { templates = {} } = options;
+    const { templates = {}, features = {} } = options;
 
     const context = client.ui.asks;
     const rootWorkflow = client.ui.ask;
 
-    // TODO: set placeholder is present in options
-
-    // 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 }));
-    });
-
-    // 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 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 });
-    });
+    // 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 });
+      });
+    }
 
-    // wait for miso-query content to be populated
-    const QUERY = fields.view(ROLE.QUERY);
-    if (!rootWorkflow.states[QUERY]) {
-      await rootWorkflow._hub.once(QUERY);
+    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;
+      });
     }
 
     // start query if specified in URL
-    const { q } = options;
-    if (q) {
-      elements.rootInput.value = q;
-      rootWorkflow.query({ q });
-    } else {
-      elements.rootInput.focus();
-    }
+    rootWorkflow.autoQuery();
   }
 
 }

package/src/combo/ask/options.js

@@ -1,6 +1,5 @@
 import { trimObj } from '@miso.ai/commons';
-import * as templates from './templates.js';
-import * as phrases from './phrases.js';
+import { templates } from '../../defaults/ask/index.js';
 
 // TODO: generalize
 
@@ -8,7 +7,6 @@ const { currentScript } = document;
 
 const DEFAULT_OPTIONS = Object.freeze({
   templates,
-  phrases,
   autostart: true,
 });
 
@@ -48,7 +46,7 @@ function normalizeOptions({ api_key: apiKey, api_host: apiHost, templates, phras
     apiKey,
     apiHost,
     templates: templateAsFunction(templates),
-    phrases: templateAsFunction(phrases),
+    phrases,
     ...options,
   });
 }

package/src/combo/base.js

@@ -1,4 +1,4 @@
-import { Component } from '@miso.ai/commons';
+import { Component, Resolution } from '@miso.ai/commons';
 
 export default class Combo extends Component {
   
@@ -23,8 +23,14 @@ export default class Combo extends Component {
     return this._element;
   }
 
+  async waitForElement() {
+    return this._element || (this._elementRes || (this._elementRes = new Resolution())).promise;
+  }
+
   set element(element) {
+    // TODO: guard against multiple element assignment
     this._element = element;
+    this._elementRes && this._elementRes.resolve(element);
   }
 
   start(options) {

package/src/defaults/ask/constants.js

@@ -0,0 +1 @@
+export const CLASS_PREFIX = 'miso-ask-combo';

package/src/defaults/ask/index.js

@@ -0,0 +1,7 @@
+import * as _constants from './constants.js';
+import * as _phrases from './phrases.js';
+import * as _templates from './templates.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

@@ -0,0 +1,19 @@
+/**
+ * The phrase displayed right before <miso-question>
+ */
+export const question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
+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';
+
+/**
+ * The phrase displayed right before <miso-related-resources>
+ */
+export const relatedResources = 'Go beyond, and learn more about this topic';