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

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';
@@ -109,7 +107,7 @@ export default class AskCombo extends Combo {
 
     // 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
@@ -125,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,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/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,11 @@
-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';
@@ -24,14 +25,15 @@ export default class UiPlugin extends Component {
     this._recommendations = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
+    this._ready = new Resolution();
   }
 
   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 });
 
@@ -69,6 +71,8 @@ export default class UiPlugin extends Component {
     for (const ElementClass of ElementClasses) {
       defineAndUpgrade(ElementClass);
     }
+
+    this._ready.resolve();
   }
 
   async requireExtension(name) {
@@ -80,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),
@@ -169,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

@@ -12,17 +12,13 @@ export async function loadStylesIfNecessary() {
 export 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);
   }
@@ -50,25 +46,52 @@ 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;
       }
-    }, 100);
+      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';
+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;

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

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sources = exports.root = exports.followUp = exports.answer = void 0;
-var _constants = require("./constants.js");
-// TODO: make ids constants
-// TODO: placeholder
-
-const root = options => `
-<section id="${_constants.PREFIX}__question" class="${_constants.PREFIX}__section ${_constants.PREFIX}__question">
-  <miso-ask class="${_constants.PREFIX}__query-container">
-    <miso-query></miso-query>
-  </miso-ask>
-</section>
-<section class="${_constants.PREFIX}__section ${_constants.PREFIX}__answer">
-  ${options.templates.answer(options)}
-  ${options.templates.sources(options)}
-  <miso-ask class="${_constants.PREFIX}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
-</section>
-<div id="${_constants.PREFIX}__follow-ups" class="${_constants.PREFIX}__follow-ups"></div>
-<section id="${_constants.PREFIX}__related-resources" class="${_constants.PREFIX}__section ${_constants.PREFIX}__related-resources">
-  <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-resources-phrase">${options.phrases.relatedResources(options)}</h2>
-    <miso-related-resources></miso-related-resources>
-  </miso-ask>
-</section>
-`.trim();
-exports.root = root;
-const followUp = function (options) {
-  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    parentQuestionId
-  } = session;
-  return `
-<section class="${_constants.PREFIX}__section ${_constants.PREFIX}__follow-up">
-  <miso-ask class="${_constants.PREFIX}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
-    <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-questions-phrase">${options.phrases.relatedQuestions(options, session)}</h3>
-    <miso-query-suggestions></miso-query-suggestions>
-  </miso-ask>
-  <miso-ask class="${_constants.PREFIX}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
-    <miso-query></miso-query>
-  </miso-ask>
-  ${options.templates.answer(options, session)}
-  ${options.templates.sources(options, session)}
-  <miso-ask class="${_constants.PREFIX}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
-</section>
-`.trim();
-};
-exports.followUp = followUp;
-const answer = function (options) {
-  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // TODO: include/omit miso-circled-citation-index by options
-  const {
-    parentQuestionId
-  } = session;
-  const openTag = `<miso-ask class="${_constants.PREFIX}__answer-container miso-circled-citation-index" visible-when="ready" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
-  const closeTag = '</miso-ask>';
-  return `
-${openTag}
-  ${parentQuestionId ? '<hr>' : ''}
-  <div class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__question-phrase">${options.phrases.question(options, session)}</div>
-  <miso-question></miso-question>
-  <miso-answer></miso-answer>
-  <miso-feedback></miso-feedback>
-${closeTag}
-`.trim();
-};
-exports.answer = answer;
-const sources = function (options) {
-  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // TODO: include/omit miso-circled-citation-index by options
-  const {
-    parentQuestionId
-  } = session;
-  const openTag = `<miso-ask class="${_constants.PREFIX}__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
-  const closeTag = '</miso-ask>';
-  return `
-${openTag}
-  <hr>
-  <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__sources-phrase">${options.phrases.sources(options, session)}</h3>
-  <miso-sources></miso-sources>
-${closeTag}
-`.trim();
-};
-exports.sources = sources;

package/src/combo/ask/phrases.js

@@ -1,7 +0,0 @@
-export const question = 'You asked...';
-
-export const sources = 'My reply is based on the following';
-
-export const relatedQuestions = 'Related questions you can explore';
-
-export const relatedResources = 'Go beyond, and learn more about this topic';

package/src/combo/ask/templates.js

@@ -1,72 +0,0 @@
-import { PREFIX } from './constants.js';
-
-// TODO: make ids constants
-// TODO: placeholder
-
-export const root = (options) => `
-<section id="${PREFIX}__question" class="${PREFIX}__section ${PREFIX}__question">
-  <miso-ask class="${PREFIX}__query-container">
-    <miso-query></miso-query>
-  </miso-ask>
-</section>
-<section class="${PREFIX}__section ${PREFIX}__answer">
-  ${options.templates.answer(options)}
-  ${options.templates.sources(options)}
-  <miso-ask class="${PREFIX}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
-</section>
-<div id="${PREFIX}__follow-ups" class="${PREFIX}__follow-ups"></div>
-<section id="${PREFIX}__related-resources" class="${PREFIX}__section ${PREFIX}__related-resources">
-  <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${PREFIX}__phrase ${PREFIX}__related-resources-phrase">${options.phrases.relatedResources(options)}</h2>
-    <miso-related-resources></miso-related-resources>
-  </miso-ask>
-</section>
-`.trim();
-
-export const followUp = (options, session = {}) => {
-  const { parentQuestionId } = session;
-  return `
-<section class="${PREFIX}__section ${PREFIX}__follow-up">
-  <miso-ask class="${PREFIX}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
-    <h3 class="${PREFIX}__phrase ${PREFIX}__related-questions-phrase">${options.phrases.relatedQuestions(options, session)}</h3>
-    <miso-query-suggestions></miso-query-suggestions>
-  </miso-ask>
-  <miso-ask class="${PREFIX}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
-    <miso-query></miso-query>
-  </miso-ask>
-  ${options.templates.answer(options, session)}
-  ${options.templates.sources(options, session)}
-  <miso-ask class="${PREFIX}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
-</section>
-`.trim();
-};
-
-export const answer = (options, session = {}) => {
-  // TODO: include/omit miso-circled-citation-index by options
-  const { parentQuestionId } = session;
-  const openTag = `<miso-ask class="${PREFIX}__answer-container miso-circled-citation-index" visible-when="ready" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
-  const closeTag = '</miso-ask>';
-  return `
-${openTag}
-  ${ parentQuestionId ? '<hr>' : '' }
-  <div class="${PREFIX}__phrase ${PREFIX}__question-phrase">${options.phrases.question(options, session)}</div>
-  <miso-question></miso-question>
-  <miso-answer></miso-answer>
-  <miso-feedback></miso-feedback>
-${closeTag}
-`.trim();
-};
-
-export const sources = (options, session = {}) => {
-  // TODO: include/omit miso-circled-citation-index by options
-  const { parentQuestionId } = session;
-  const openTag = `<miso-ask class="${PREFIX}__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
-  const closeTag = '</miso-ask>';
-  return `
-${openTag}
-  <hr>
-  <h3 class="${PREFIX}__phrase ${PREFIX}__sources-phrase">${options.phrases.sources(options, session)}</h3>
-  <miso-sources></miso-sources>
-${closeTag}
-`.trim();
-};