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

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.9.0-beta.9"
+    "@miso.ai/commons": "1.9.1-beta.0"
   },
-  "version": "1.9.0-beta.9"
+  "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"]`);
-  }
-
 }

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';
@@ -105,9 +103,11 @@ export default class AskCombo extends Combo {
     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 }));
+      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
@@ -123,20 +123,8 @@ export default class AskCombo extends Combo {
       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);
-    }
-
     // 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,5 +1,5 @@
 import { trimObj } from '@miso.ai/commons';
-import * as templates from './templates.js';
+import { templates } from '../../defaults/ask/index.js';
 
 // TODO: generalize
 
@@ -41,10 +41,12 @@ function mergeTwoOptions(merged, overrides) {
   });
 }
 
-function normalizeOptions({ api_key: apiKey, api_host: apiHost, ...options } = {}) {
+function normalizeOptions({ api_key: apiKey, api_host: apiHost, templates, phrases, ...options } = {}) {
   return trimObj({
     apiKey,
     apiHost,
+    templates: templateAsFunction(templates),
+    phrases,
     ...options,
   });
 }
@@ -90,3 +92,28 @@ function readFromPageUrl() {
 function coerceValue(value) {
   return value === '' ? true : value === 'false' ? false : value;
 }
+
+function templateAsFunction(value) {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  switch (typeof value) {
+    case 'function':
+      return value;
+    case 'string':
+    case 'number':
+      return () => value;
+    case 'object':
+      return Array.isArray(value) ? value.map(templateAsFunction) : mappingObjectValues(value, templateAsFunction);
+    default:
+      throw new Error(`Unsupported template type: ${value}`);
+  }
+}
+
+function mappingObjectValues(obj, fn) {
+  const mapped = {};
+  for (const [key, value] of Object.entries(obj)) {
+    mapped[key] = fn(value);
+  }
+  return mapped;
+}

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

package/src/defaults/ask/templates.js

@@ -0,0 +1,107 @@
+import { CLASS_PREFIX } from './constants.js';
+import * as DEFAULT_PHRASES from './phrases.js';
+
+// TODO: refactor
+// TODO: make ids constants
+// TODO: placeholder
+
+export function root(options = {}) {
+  const { classPrefix = 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();
+};
+
+export function followUp(options = {}) {
+  const { classPrefix = 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 = CLASS_PREFIX } = options;
+  return `
+${containerOpenTag('answer', { ...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 = CLASS_PREFIX } = options;
+  return `
+${containerOpenTag('sources', { ...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, {
+  visibleWhen,
+  classPrefix = CLASS_PREFIX,
+  logo = false,
+  circledCitationIndex = true,
+  parentQuestionId,
+}) {
+  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/src/defaults/index.js

@@ -0,0 +1,3 @@
+import * as _ask from './ask/index.js';
+
+export const ask = Object.freeze(_ask);

package/src/layout/input/search-box.js

@@ -91,6 +91,23 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     }
   }
 
+  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({ state }) {
     state = super._preprocess({ state });
     const { autocomplete } = this.options;
@@ -108,6 +125,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     }
     this._setupAutocomplete(element);
     this._renderSuggestions(element, data, controls);
+    this._fullfillFocusRequest(element);
+    this._fullfillValueRequest(element);
   }
 
   _setupAutocomplete(element) {
@@ -142,6 +161,22 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     }
   }
 
+  _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) {
@@ -240,6 +275,22 @@ 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/src/plugin.js

@@ -1,10 +1,12 @@
-import { Component, defineAndUpgrade, delegateGetters, defineValues } from '@miso.ai/commons';
+import { Component, Resolution, defineAndUpgrade, delegateGetters, defineValues } from '@miso.ai/commons';
 import { Asks, Explore, Search, Recommendations } from './workflow/index.js';
 import { AskCombo } from './combo/index.js';
 import Layouts from './layouts.js';
 import * as elements from './element/index.js';
 import * as layouts from './layout/index.js';
 import * as sources from './source/index.js';
+import * as defaults from './defaults/index.js';
+import { loadStylesIfNecessary } from './styles.js';
 
 import MisoContainerElement from './element/container/miso-container.js';
 import MisoComboElement from './element/combo/miso-combo.js';
@@ -17,21 +19,21 @@ export default class UiPlugin extends Component {
     return PLUGIN_ID;
   }
 
-  constructor({ loadStyles = true } = {}) {
+  constructor() {
     super('ui');
     this.layouts = new Layouts(this);
     this._recommendations = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
-    // TODO: load CSS
+    this._ready = new Resolution();
   }
 
-  install(MisoClient, context) {
+  async install(MisoClient, context) {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
 
-    const ui = {};
-    delegateGetters(ui, this, ['layouts', 'combo']);
+    const ui = { defaults };
+    delegateGetters(ui, this, ['layouts', 'combo', 'ready']);
     defineValues(this, { MisoClient });
     defineValues(MisoClient, { ui });
 
@@ -61,9 +63,16 @@ export default class UiPlugin extends Component {
     for (const ElementClass of ElementClasses) {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }
+
+    // load styles
+    await loadStylesIfNecessary();
+
+    // define custom elements
     for (const ElementClass of ElementClasses) {
       defineAndUpgrade(ElementClass);
     }
+
+    this._ready.resolve();
   }
 
   async requireExtension(name) {
@@ -75,6 +84,13 @@ export default class UiPlugin extends Component {
     }
   }
 
+  get ready() {
+    return Promise.all([
+      this._ready.promise,
+      MisoClient.any(), // TODO: we need to wait for element connection
+    ]).then(() => {});
+  }
+
   _injectClient(client) {
     defineValues(client, {
       ui: new Ui(this, client),
@@ -164,11 +180,9 @@ class Ui {
     return this._explore || (this._explore = new Explore(this._plugin, this._client));
   }
 
-  /*
-  async whenStylesLoaded() {
-    // TODO
+  get ready() {
+    return this._plugin._ready.promise;
   }
-  */
 
 }
 

package/src/styles.js

@@ -0,0 +1,97 @@
+import version from './version.js';
+
+const { currentScript } = document;
+
+let cssUrl;
+let stylesLoaded;
+
+export async function loadStylesIfNecessary() {
+  return stylesLoaded || (stylesLoaded = loadStyles());
+}
+
+export async function loadStyles() {
+  try {
+    let link = getExistedLinkElement();
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = getCssUrl();
+      document.head.appendChild(link);
+    }
+    return waitForStylesApplied(link);
+  } catch(e) {
+    console.error(e);
+  }
+}
+
+// helpers //
+function getCssUrl() {
+  return cssUrl || (cssUrl = resolveCssUrl());
+}
+
+function resolveCssUrl() {
+  // TODO: refactor with getPluginScriptUrl() in core
+  if (version === 'dev') {
+    const src = currentScript.src;
+    const searchIndex = src.indexOf('?');
+    const k = searchIndex < 0 ? src.length : searchIndex;
+    const i = src.lastIndexOf('/', k); // .../dist/umd/*.min.js
+    return `${src.slice(0, i - 4)}/css/ui.css`;
+  } else {
+    return `https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@${version}/dist/css/ui.css`;
+  }
+}
+
+function getExistedLinkElement() {
+  return document.head.querySelector(`link[href="${getCssUrl()}"]`);
+}
+
+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.onerror = () => {
+      intervalId && clearInterval(intervalId);
+      reject();
+    };
+    intervalId = setInterval(() => {
+      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/src/version.js

@@ -1 +1 @@
-export default '1.9.0-beta.9';
+export default '1.9.1-beta.0';

package/src/workflow/ask.js

@@ -108,6 +108,22 @@ export default class Ask extends Workflow {
   }
 
   // lifecycle //
+  autoQuery({ setValue = true, focus = true } = {}) {
+    const q = new URLSearchParams(window.location.search).get('q');
+    const { layout } = this._views.get(ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({ q });
+    }
+  }
+
   query({ q: question, ...payload } = {}) {
     payload = { ...payload, question };
     if (this.parentQuestionId) {

package/src/workflow/base.js

@@ -73,6 +73,10 @@ export default class Workflow extends Component {
     return this._hub.states;
   }
 
+  get views() {
+    return this._views.interface;
+  }
+
   // lifecycle //
   reset() {
     this._sessions.new();

package/src/workflow/search.js

@@ -43,6 +43,22 @@ export default class Search extends Workflow {
   }
 
   // lifecycle //
+  autoQuery({ setValue = true, focus = true } = {}) {
+    const q = new URLSearchParams(window.location.search).get('q');
+    const { layout } = this._views.get(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 { session } = this;