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

package/src/defaults/ask/templates.js

@@ -0,0 +1,154 @@
+import { CLASS_PREFIX } from './constants.js';
+import * as DEFAULT_PHRASES from './phrases.js';
+
+// TODO: placeholder
+
+export function root(options = {}) {
+  options = normalizeOptions(options);
+  return [
+    section(options, { name: 'question' }, [
+      container(options, { name: 'query' }, '<miso-query></miso-query>'),
+    ]),
+    section(options, { name: 'answer' }, answerGroup(options)),
+    followUps(options),
+    relatedResources(options),
+  ].join('');
+};
+
+export function followUp(options = {}) {
+  options = normalizeOptions(options);
+  return section(options, { name: 'follow-up' }, [
+    querySuggestions(options),
+    container(options, { name: 'query', visibleWhen: 'initial loading' }, '<miso-query></miso-query>'),
+    ...answerGroup(options),
+  ]);
+};
+
+
+
+// options //
+function normalizeOptions({
+  classPrefix = CLASS_PREFIX,
+  circledCitationIndex = true,
+  ...options
+} = {}) {
+  return { classPrefix, circledCitationIndex, ...options };
+}
+
+// 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: 'related-questions', tag: 'h3' }),
+      '<miso-query-suggestions></miso-query-suggestions>',
+    ]);
+}
+
+function answerGroup(options) {
+  return [
+    answer(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 phrase(options, { name, tag = 'div' }) {
+  const { classPrefix } = options;
+  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, 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({ classPrefix }, { name }, body) {
+  return element('section', {
+    classes: [`${classPrefix}__section`, `${classPrefix}__${name}`],
+  }, body);
+}
+
+function container({
+  classPrefix,
+  circledCitationIndex,
+  parentQuestionId,
+}, {
+  name,
+  visibleWhen,
+  logo = false,
+}, body) {
+  const classes = [`${classPrefix}__${name}-container`];
+  circledCitationIndex && classes.push('miso-circled-citation-index');
+  return element('miso-ask', { classes, visibleWhen, logo, parentQuestionId }, body);
+}
+
+function element(tag, attributes = {}, body = '') {
+  if (typeof attributes === 'string' || Array.isArray(attributes)) {
+    body = attributes;
+    attributes = {};
+  }
+  return `<${tag}${attrs(attributes)}>${Array.isArray(body) ? body.join('') : body}</${tag}>`;
+}
+
+function attrs({ classes = [], ...attributes } = {}) {
+  let str = ``;
+  if (classes.length) {
+    str += ` class="${classes.join(' ')}"`;
+  }
+  for (const name in attributes) {
+    const value = attributes[name];
+    if (value !== undefined) {
+      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+    }
+  }
+  return str;
+}
+
+function kebabToLowerCamel(str) {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+function lowerCamelToKebab(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}

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

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/constants.js

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

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/constants.js

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

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();
-};