@miso.ai/client-sdk-ui 1.9.10 → 1.10.0-beta.1

package/src/layout/templates.js

@@ -16,34 +16,33 @@ export function unimplemented(name) {
 
 export function product(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return [
     openTag,
-    (templates.imageBlock || renderImageBlock)(layout, data, meta),
-    (templates.infoBlock || productInfoBlock)(layout, data, meta),
-    (templates.indexBlock || renderIndexBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.infoBlock || templates.productInfoBlock || productInfoBlock)(layout, data, meta),
     closeTag,
   ].join('');
 }
 
 export function question(layout, state, data) {
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 
 export function article(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return [
     openTag,
-    (templates.imageBlock || renderImageBlock)(layout, data, meta),
-    (templates.infoBlock || articleInfoBlock)(layout, data, meta),
-    (templates.indexBlock || renderIndexBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta),
+    (templates.indexBlock || indexBlock)(layout, data, meta),
     closeTag,
   ].join('');
 }
 
-function productInfoBlock({ className }, { title, description, sale_price, original_price }) {
+export function productInfoBlock({ className }, { title, description, sale_price, original_price }) {
   let content = '';
   if (title) {
     content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
@@ -59,14 +58,14 @@ function productInfoBlock({ className }, { title, description, sale_price, origi
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
 
-function articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
+export function articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
   const date = published_at || created_at || updated_at;
   let content = '';
   if (title) {
     content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
   }
   if (date) {
-    content += `<div class="${className}__item-date">${renderDate(date, templates.date)}</div>`;
+    content += `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>`;
   }
   if (snippet) {
     content += `<div class="${className}__item-snippet">${snippet}</div>`;
@@ -76,17 +75,7 @@ function articleInfoBlock({ className, templates }, { title, snippet, descriptio
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
 
-// helpers //
-function renderTagPair({ className, options = {} }, { product_id, url }) {
-  const { link = {} } = options;
-  const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
-  const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
-  return [`<${tag} class="${className}__item-body" data-role="item" ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
-}
-
-function renderImageBlock({ className }, { cover_image }) {
+export function imageBlock({ className }, { cover_image }) {
   if (!cover_image) {
     return '';
   }
@@ -94,14 +83,25 @@ function renderImageBlock({ className }, { cover_image }) {
   return `<div class="${className}__item-cover-image-container">${img}</div>`;
 }
 
-function renderIndexBlock({ className }, data, { index }) {
+export function indexBlock({ className }, data, { index }) {
   const i = index + 1;
   return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
 }
 
+// helpers //
+function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item' } = {}) {
+  const { link = {} } = options;
+  const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
+  const tag = url ? 'a' : 'div';
+  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
+  const roleAttrs = role ? `data-role="${role}"` : '';
+  return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
+}
+
 const DEFAULT_DATE_OPTIONS = Object.freeze({ locale: 'en-US', year: 'numeric', month: 'short', day: 'numeric' });
 
-function renderDate(date, fn = DEFAULT_DATE_OPTIONS) {
+function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   switch (typeof fn) {
     case 'function':
       return fn(date);
@@ -113,3 +113,9 @@ function renderDate(date, fn = DEFAULT_DATE_OPTIONS) {
       throw new Error(`Invalid date format: ${fn}`);
   }
 }
+
+export const helpers = Object.freeze({
+  tagPair,
+  formatDate,
+  escapeHtml,
+});

package/src/layout/text/typewriter/index.js

@@ -72,63 +72,23 @@ export default class TypewriterLayout extends ProgressiveLayout {
   async _setupForMarkdown() {
     const context = await this._view._views._extensions.require('markdown');
     const cursorClass = cursorClassName(this.className);
-    const { onDebug } = this.options;
+    const { onDebug, onCitationLink } = this.options;
     // TODO: options
     this._renderer = context.createRenderer({
-      onRefChange: (oldRef, newRef) => {
-        oldRef && oldRef.classList.remove(cursorClass);
-        newRef && newRef.classList.add(cursorClass);
-      }, 
-      onDone: (element) => {
-        element.classList.add('done');
-      },
+      cursorClass,
+      getSource: index => this._getSource(index),
+      onCitationLink,
       onDebug,
-      onCitationLink: this._handleCitationLink.bind(this),
     });
     // capture citation link click if necessary
     this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._handleClick(e)));
   }
 
-  _handleCitationLink(methods, index) {
-    const { onCitationLink } = this.options;
-    if (typeof onCitationLink !== 'function') {
-      return;
-    }
-    const { data = {} } = this._view._data;
-    const { sources = [] } = data;
-    const source = sources[index];
-    try {
-      onCitationLink(methods, { source, index });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  /*
-  _handleCitationTooltip({ node, tooltip, index }) {
-    const { tooltip: tooltipOptions } = this.options;
-    if (!tooltipOptions || !tooltip || tooltip.properties['data-value']) {
-      return;
-    }
+  _getSource(index) {
     const { data = {} } = this._view._data;
     const { sources = [] } = data;
-    const source = sources[index];
-    if (!source) {
-      return;
-    }
-    // TODO: allow HTML
-    let value;
-    try {
-      value = typeof tooltipOptions === 'function' ? tooltipOptions(source) : source.title;
-    } catch (e) {
-      console.error(e);
-    }
-    if (!value) {
-      return;
-    }
-    tooltip.properties['data-value'] = escapeHtml(value);
+    return sources[index];
   }
-  */
 
   async _setupForPlaintext() {
     this._renderer = new PlaintextRenderer();

package/src/source/index.js

@@ -1 +1,14 @@
-export { default as api } from './api.js';
+import { API } from '@miso.ai/commons';
+
+//export { default as api } from './api.js';
+
+export function api(client) {
+  // TODO: send uuid & unit id
+  return async ({ group, name, payload, options }) => {
+    if (group === API.GROUP.ASK && name === API.NAME.QUESTIONS) {
+      return client.api.ask.questions(payload, options);
+    }
+    // because name is in snake case
+    return client.api[group]._run(name, payload, options);
+  };
+}

package/src/styles.js

@@ -1,97 +1,15 @@
-import version from './version.js';
+import { loadStyles, resolveCssUrl } from '@miso.ai/commons';
 
-const { currentScript } = document;
+const NAME = 'ui';
 
 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);
-  }
+  return stylesLoaded || (stylesLoaded = loadStyles(getCssUrl()));
 }
 
 // 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;
+  return cssUrl || (cssUrl = resolveCssUrl(NAME));
 }

package/src/version.js

@@ -1 +1 @@
-export default '1.9.10';
+export default '1.10.0-beta.1';

package/src/workflow/ask.js

@@ -1,9 +1,11 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
-import { fields, FeedbackActor } from '../actor/index.js';
+import * as sources from '../source/index.js';
+import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout } from '../layout/index.js';
+import { makeConfigurable } from './options.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -17,6 +19,14 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: API.GROUP.ASK,
+    name: API.NAME.AUTOCOMPLETE,
+  },
+});
+
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
@@ -40,6 +50,7 @@ const DEFAULT_TRACKERS = Object.freeze({
 
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
@@ -60,6 +71,13 @@ export default class Ask extends Workflow {
     this._feedback = new FeedbackActor(this._hub);
     this._setSuggestedQuestions();
 
+    /*
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+    */
+
     this._unsubscribes = [
       ...this._unsubscribes,
       this._hub.on(fields.query(), payload => this.query(payload)),
@@ -152,6 +170,17 @@ export default class Ask extends Workflow {
     super.restart();
   }
 
+  /*
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+  */
+
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
     const { value, request } = data;
@@ -259,6 +288,7 @@ export default class Ask extends Workflow {
       this._context._byQid.delete(questionId);
     }
     this._feedback._destroy();
+    this._autocomplete._destroy();
     super._destroy(options);
   }
 

package/src/workflow/base.js

@@ -42,11 +42,10 @@ export default class Workflow extends Component {
     const extensions = this._extensions = plugin._getExtensions(client);
     const options = this._options = new WorkflowOptions(context && context._options, mergeDefaults(this, defaults));
     const hub = this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
-    const source = this._source = sources.api(client);
     const layouts = plugin.layouts;
 
     this._sessions = new SessionMaker(hub);
-    this._data = new DataActor(hub, { source, options });
+    this._data = new DataActor(hub, { source: sources.api(client), options });
     const views = this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
     this._interactions = new InteractionsActor(hub, { client, options });
     this._trackers = new Trackers(hub, { views, options });

package/src/workflow/explore.js

@@ -11,7 +11,7 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question' }],
+  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question', link: { rel: 'noopener nofollow' } }],
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
 });
 

package/src/workflow/options.js

@@ -3,6 +3,7 @@ import { ROLE } from '../constants.js';
 
 // normalize //
 export function normalizeApiOptions([name, payload] = []) {
+  // TODO: take object form as well
   if (name === false) {
     return { actor: false };
   }
@@ -105,6 +106,17 @@ export function normalizeInteractionsOptions(options) {
   return { ...options, preprocess };
 }
 
+export function normalizeAutocompleteOptions(options) {
+  if (options === undefined) {
+    throw new Error(`Expect autocomplete options to be an object or a boolean value: ${options}`);
+  }
+  if (typeof options === 'boolean') {
+    options = { actor: options };
+  }
+  const processData = normalizeDataProcessorOptions(options.processData);
+  return { ...options, processData };
+}
+
 // merge //
 export function mergeApiOptions(...optionsList) {
   if (optionsList[optionsList.length - 1] === false) {
@@ -190,6 +202,17 @@ export function mergeInteractionsOptions(...optionsList) {
   }));
 }
 
+export function mergeAutocompleteOptions(...optionsList) {
+  if (optionsList[optionsList.length - 1] === false) {
+    return false;
+  }
+  return mergeOptions(optionsList, (merged, options) => Object.assign(merged, {
+    ...options,
+    api: mergeApiOptions(merged.api, options.api),
+    processData: mergeDataProcessorOptions(merged.processData, options.processData),
+  }));
+}
+
 
 
 // manifest //
@@ -219,6 +242,11 @@ const FEATURES = [
     normalize: normalizeInteractionsOptions,
     merge: mergeInteractionsOptions,
   },
+  {
+    key: 'autocomplete',
+    normalize: normalizeAutocompleteOptions,
+    merge: mergeAutocompleteOptions,
+  },
 ];
 
 
@@ -328,18 +356,27 @@ for (const { key, normalize, merge } of FEATURES) {
   });
 }
 
-export function makeConfigurable(prototype) {
-  Object.assign(prototype, {
-    useApi(...args) {
-      this._options.api.merge(args);
-      return this;
-    },
-    clearApi() {
-      this._options.api.set();
-      return this;
-    },
-  });
-  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+const DEFAULT_FEATURES = ['api', 'layouts', 'dataProcessor', 'trackers', 'interactions'];
+
+export function makeConfigurable(prototype, features = DEFAULT_FEATURES) {
+  for (const feature of features) {
+    injectConfigurableFeature(prototype, feature);
+  }
+}
+
+function injectConfigurableFeature(prototype, feature) {
+  if (feature === 'api') {
+    Object.assign(prototype, {
+      useApi(...args) {
+        this._options.api.merge(args);
+        return this;
+      },
+      clearApi() {
+        this._options.api.set();
+        return this;
+      },
+    });
+  } else {
     const upperCased = upperCase(feature);
     Object.assign(prototype, {
       [`use${upperCased}`](value) {

package/src/workflow/search.js

@@ -1,9 +1,11 @@
 import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
-import { fields } from '../actor/index.js';
+import * as sources from '../source/index.js';
+import { fields, AutocompleteActor } from '../actor/index.js';
 import { ROLE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
+import { makeConfigurable } from './options.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.SEARCH,
@@ -13,6 +15,19 @@ const DEFAULT_API_OPTIONS = Object.freeze({
   },
 });
 
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: API.GROUP.SEARCH,
+    name: API.NAME.AUTOCOMPLETE,
+    payload: {
+      completion_fields: ['suggested_queries', 'title'],
+      fl: ['title', 'url', 'cover_image'],
+    },
+  },
+  throttle: 300,
+});
+
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUERY]: SearchBoxLayout.type,
   [ROLE.PRODUCTS]: ListLayout.type,
@@ -24,6 +39,7 @@ const DEFAULT_TRACKERS = Object.freeze({
 
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
@@ -39,6 +55,11 @@ export default class Search extends Workflow {
       defaults: DEFAULT_OPTIONS,
     });
 
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+
     this._unsubscribes.push(this._hub.on(fields.query(), payload => this.query(payload)));
   }
 
@@ -66,9 +87,20 @@ export default class Search extends Workflow {
     return this;
   }
 
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+
   notifyViewUpdate(role = ROLE.PRODUCTS, ...args) {
     super.notifyViewUpdate(role, ...args);
     return this;
   }
 
 }
+
+makeConfigurable(Search.prototype, ['autocomplete']);