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

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.10.0-beta.0';
+var _default = exports.default = '1.10.0-beta.1';

package/dist/cjs/workflow/ask.js

@@ -7,10 +7,13 @@ exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _base = _interopRequireDefault(require("./base.js"));
 var _options = require("./options.js");
-var _index = require("../actor/index.js");
+var sources = _interopRequireWildcard(require("../source/index.js"));
+var _index2 = require("../actor/index.js");
 var _constants = require("../constants.js");
-var _index2 = require("../layout/index.js");
+var _index3 = require("../layout/index.js");
 const _excluded = ["q", "qs"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -24,27 +27,34 @@ const DEFAULT_API_OPTIONS = Object.freeze({
     cite_end: ']'
   }
 });
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: _commons.API.GROUP.ASK,
+    name: _commons.API.NAME.AUTOCOMPLETE
+  }
+});
 const DEFAULT_LAYOUTS = Object.freeze({
-  [_constants.ROLE.QUERY]: [_index2.SearchBoxLayout.type, {
+  [_constants.ROLE.QUERY]: [_index3.SearchBoxLayout.type, {
     placeholder: 'Ask a question'
   }],
-  [_constants.ROLE.QUESTION]: [_index2.TextLayout.type, {
+  [_constants.ROLE.QUESTION]: [_index3.TextLayout.type, {
     tag: 'h2'
   }],
-  [_constants.ROLE.ANSWER]: _index2.TypewriterLayout.type,
-  [_constants.ROLE.FEEDBACK]: _index2.FeedbackLayout.type,
-  [_constants.ROLE.SOURCES]: [_index2.ListLayout.type, {
+  [_constants.ROLE.ANSWER]: _index3.TypewriterLayout.type,
+  [_constants.ROLE.FEEDBACK]: _index3.FeedbackLayout.type,
+  [_constants.ROLE.SOURCES]: [_index3.ListLayout.type, {
     incremental: true,
     itemType: 'article',
     templates: {
       ordered: true
     }
   }],
-  [_constants.ROLE.RELATED_RESOURCES]: [_index2.ListLayout.type, {
+  [_constants.ROLE.RELATED_RESOURCES]: [_index3.ListLayout.type, {
     incremental: true,
     itemType: 'article'
   }],
-  [_constants.ROLE.QUERY_SUGGESTIONS]: _index2.OptionListLayout.type
+  [_constants.ROLE.QUERY_SUGGESTIONS]: _index3.OptionListLayout.type
 });
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.SOURCES]: {},
@@ -59,6 +69,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
 });
@@ -75,9 +86,17 @@ class Ask extends _base.default {
     (0, _commons.defineValues)(this, {
       parentQuestionId
     });
-    this._feedback = new _index.FeedbackActor(this._hub);
+    this._feedback = new _index2.FeedbackActor(this._hub);
     this._setSuggestedQuestions();
-    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), payload => this.query(payload)), this._hub.on(_index.fields.view(_constants.ROLE.ANSWER), data => this._onAnswerViewUpdate(data)), this._views.get(_constants.ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event))];
+
+    /*
+    this._autocomplete = new AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options,
+    });
+    */
+
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index2.fields.query(), payload => this.query(payload)), this._hub.on(_index2.fields.view(_constants.ROLE.ANSWER), data => this._onAnswerViewUpdate(data)), this._views.get(_constants.ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event))];
     parentQuestionId && context._byPqid.set(parentQuestionId, this);
     context._events.emit('create', this);
     this.reset(); // create a session so query suggestions can be tracked
@@ -163,7 +182,7 @@ class Ask extends _base.default {
       session
     } = this;
     session.meta.question_source = questionSource;
-    this._hub.update(_index.fields.request(), (0, _options.mergeApiOptions)(this._options.resolved.api, {
+    this._hub.update(_index2.fields.request(), (0, _options.mergeApiOptions)(this._options.resolved.api, {
       payload,
       session
     }));
@@ -175,7 +194,7 @@ class Ask extends _base.default {
       session,
       status,
       ongoing
-    } = this._hub.states[_index.fields.view(_constants.ROLE.ANSWER)] || {};
+    } = this._hub.states[_index2.fields.view(_constants.ROLE.ANSWER)] || {};
     if (session && status !== _constants.STATUS.INITIAL && (status !== _constants.STATUS.READY || ongoing)) {
       // it's interrupted by a new question
       const state = Object.freeze({
@@ -188,6 +207,18 @@ class Ask extends _base.default {
     }
     super.restart();
   }
+
+  /*
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(fields.completions(), {
+      ...event,
+      source: 'manual',
+    });
+    return this;
+  }
+  */
+
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
     const {
@@ -258,9 +289,9 @@ class Ask extends _base.default {
     if (!previous) {
       return;
     }
-    const values = previous.states[_index.fields.data()].value;
+    const values = previous.states[_index2.fields.data()].value;
     const value = values.suggested_followup_questions || values.followup_questions || [];
-    this._hub.update(_index.fields.suggestions(), {
+    this._hub.update(_index2.fields.suggestions(), {
       value: value.map(text => ({
         text
       }))
@@ -272,7 +303,7 @@ class Ask extends _base.default {
     } = _ref3;
     const {
       value
-    } = this.states[_index.fields.data()] || {};
+    } = this.states[_index2.fields.data()] || {};
     const {
       sources
     } = value || {};
@@ -327,6 +358,7 @@ class Ask extends _base.default {
       this._context._byQid.delete(questionId);
     }
     this._feedback._destroy();
+    this._autocomplete._destroy();
     super._destroy(options);
   }
 }

package/dist/cjs/workflow/base.js

@@ -59,11 +59,10 @@ class Workflow extends _commons.Component {
     const hub = this._hub = (0, _utils.injectLogger)(new _index.Hub(), function () {
       return _this._log(...arguments);
     });
-    const source = this._source = sources.api(client);
     const layouts = plugin.layouts;
     this._sessions = new _index.SessionMaker(hub);
     this._data = new _index.DataActor(hub, {
-      source,
+      source: sources.api(client),
       options
     });
     const views = this._views = new _index.ViewsActor(hub, {

package/dist/cjs/workflow/explore.js

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

package/dist/cjs/workflow/options.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.WorkflowOptions = exports.WorkflowContextOptions = void 0;
 exports.makeConfigurable = makeConfigurable;
 exports.mergeApiOptions = mergeApiOptions;
+exports.mergeAutocompleteOptions = mergeAutocompleteOptions;
 exports.mergeDataProcessorOptions = mergeDataProcessorOptions;
 exports.mergeInteractionsOptions = mergeInteractionsOptions;
 exports.mergeLayoutsOptions = mergeLayoutsOptions;
 exports.mergeTrackersOptions = mergeTrackersOptions;
 exports.normalizeApiOptions = normalizeApiOptions;
+exports.normalizeAutocompleteOptions = normalizeAutocompleteOptions;
 exports.normalizeDataProcessorOptions = normalizeDataProcessorOptions;
 exports.normalizeInteractionsOptions = normalizeInteractionsOptions;
 exports.normalizeLayoutsOptions = normalizeLayoutsOptions;
@@ -23,6 +25,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 // normalize //
 function normalizeApiOptions() {
   let [name, payload] = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  // TODO: take object form as well
   if (name === false) {
     return {
       actor: false
@@ -131,6 +134,20 @@ function normalizeInteractionsOptions(options) {
     preprocess
   });
 }
+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 Object.assign({}, options, {
+    processData
+  });
+}
 
 // merge //
 function mergeApiOptions() {
@@ -217,6 +234,18 @@ function mergeInteractionsOptions() {
     preprocess: concatArrays(merged.preprocess, options.preprocess)
   })));
 }
+function mergeAutocompleteOptions() {
+  for (var _len6 = arguments.length, optionsList = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
+    optionsList[_key7] = arguments[_key7];
+  }
+  if (optionsList[optionsList.length - 1] === false) {
+    return false;
+  }
+  return mergeOptions(optionsList, (merged, options) => Object.assign(merged, Object.assign({}, options, {
+    api: mergeApiOptions(merged.api, options.api),
+    processData: mergeDataProcessorOptions(merged.processData, options.processData)
+  })));
+}
 
 // manifest //
 const FEATURES = [{
@@ -239,6 +268,10 @@ const FEATURES = [{
   key: 'interactions',
   normalize: normalizeInteractionsOptions,
   merge: mergeInteractionsOptions
+}, {
+  key: 'autocomplete',
+  normalize: normalizeAutocompleteOptions,
+  merge: mergeAutocompleteOptions
 }];
 class WorkflowContextOptions {
   constructor() {
@@ -339,21 +372,29 @@ for (const {
     }
   });
 }
+const DEFAULT_FEATURES = ['api', 'layouts', 'dataProcessor', 'trackers', 'interactions'];
 function makeConfigurable(prototype) {
-  Object.assign(prototype, {
-    useApi() {
-      for (var _len6 = arguments.length, args = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
-        args[_key7] = arguments[_key7];
+  let features = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FEATURES;
+  for (const feature of features) {
+    injectConfigurableFeature(prototype, feature);
+  }
+}
+function injectConfigurableFeature(prototype, feature) {
+  if (feature === 'api') {
+    Object.assign(prototype, {
+      useApi() {
+        for (var _len7 = arguments.length, args = new Array(_len7), _key8 = 0; _key8 < _len7; _key8++) {
+          args[_key8] = arguments[_key8];
+        }
+        this._options.api.merge(args);
+        return this;
+      },
+      clearApi() {
+        this._options.api.set();
+        return this;
       }
-      this._options.api.merge(args);
-      return this;
-    },
-    clearApi() {
-      this._options.api.set();
-      return this;
-    }
-  });
-  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+    });
+  } else {
     const upperCased = upperCase(feature);
     Object.assign(prototype, {
       [`use${upperCased}`](value) {

package/dist/cjs/workflow/search.js

@@ -7,9 +7,12 @@ exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _base = _interopRequireDefault(require("./base.js"));
 var _options = require("./options.js");
-var _index = require("../actor/index.js");
+var sources = _interopRequireWildcard(require("../source/index.js"));
+var _index2 = require("../actor/index.js");
 var _constants = require("../constants.js");
-var _index2 = require("../layout/index.js");
+var _index3 = require("../layout/index.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: _commons.API.GROUP.SEARCH,
@@ -18,15 +21,28 @@ const DEFAULT_API_OPTIONS = Object.freeze({
     fl: ['*']
   }
 });
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  actor: false,
+  api: {
+    group: _commons.API.GROUP.SEARCH,
+    name: _commons.API.NAME.AUTOCOMPLETE,
+    payload: {
+      completion_fields: ['suggested_queries', 'title'],
+      fl: ['title', 'url', 'cover_image']
+    }
+  },
+  throttle: 300
+});
 const DEFAULT_LAYOUTS = Object.freeze({
-  [_constants.ROLE.QUERY]: _index2.SearchBoxLayout.type,
-  [_constants.ROLE.PRODUCTS]: _index2.ListLayout.type
+  [_constants.ROLE.QUERY]: _index3.SearchBoxLayout.type,
+  [_constants.ROLE.PRODUCTS]: _index3.ListLayout.type
 });
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.PRODUCTS]: {}
 });
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,
+  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS
 });
@@ -39,7 +55,11 @@ class Search extends _base.default {
       roles: Object.keys(DEFAULT_LAYOUTS),
       defaults: DEFAULT_OPTIONS
     });
-    this._unsubscribes.push(this._hub.on(_index.fields.query(), payload => this.query(payload)));
+    this._autocomplete = new _index2.AutocompleteActor(this._hub, {
+      source: sources.api(this._client),
+      options: this._options
+    });
+    this._unsubscribes.push(this._hub.on(_index2.fields.query(), payload => this.query(payload)));
   }
 
   // lifecycle //
@@ -71,12 +91,19 @@ class Search extends _base.default {
     const {
       session
     } = this;
-    this._hub.update(_index.fields.request(), (0, _options.mergeApiOptions)(this._options.resolved.api, {
+    this._hub.update(_index2.fields.request(), (0, _options.mergeApiOptions)(this._options.resolved.api, {
       payload,
       session
     }));
     return this;
   }
+  updateCompletions(event) {
+    // TODO: verify
+    this._hub.update(_index2.fields.completions(), Object.assign({}, event, {
+      source: 'manual'
+    }));
+    return this;
+  }
   notifyViewUpdate() {
     let role = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.ROLE.PRODUCTS;
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -86,4 +113,5 @@ class Search extends _base.default {
     return this;
   }
 }
-exports.default = Search;
+exports.default = Search;
+(0, _options.makeConfigurable)(Search.prototype, ['autocomplete']);

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.10.0-beta.0"
+    "@miso.ai/commons": "1.10.0-beta.1"
   },
-  "version": "1.10.0-beta.0"
+  "version": "1.10.0-beta.1"
 }

package/src/actor/autocomplete.js

@@ -0,0 +1,131 @@
+import { STATUS } from '../constants.js';
+import * as fields from './fields.js';
+
+export default class AutocompleteActor {
+
+  constructor(hub, { source, options }) {
+    this._hub = hub;
+    this._source = source;
+    this._options = options;
+    this._index = -1;
+
+    this._unsubscribes = [
+      hub.on(fields.input(), () => this._sync()),
+      options.on('autocomplete', () => this._syncOptions()),
+    ];
+
+    // sync right away
+    this._sync(true);
+  }
+
+  get active() {
+    return this._options.resolved.autocomplete.actor !== false;
+  }
+
+  get source() {
+    return this._source;
+  }
+
+  _syncOptions() {
+    // TODO: explore scenarios where options.actor true -> false
+    this._sync(true);
+  }
+
+  async _sync(force = false) {
+    // protocol: inactive -> no reaction
+    if (!this.active) {
+      return;
+    }
+
+    const { input } = this._hub.states;
+    const value = input && input.value && input.value.trim() || undefined;
+
+    if (sameInput(this._input, input) && !force) {
+      return;
+    }
+    this._input = input;
+    const index = ++this._index;
+
+    // new input, abort previous data fetch if any
+    this._clearTimeout();
+    this._abortPendingRequest({
+      type: 'new-input',
+      message: 'A new input renders previous autocomplete request obsolete.',
+    });
+
+    // emit loading/initial state
+    this._emitCompletions({ index, input, status: value ? STATUS.LOADING : STATUS.INITIAL });
+
+    if (!value) {
+      return;
+    }
+
+    try {
+      const response = await this._fetchCompletions(input);
+      if (this._index !== index) {
+        return; // new results loading, discard this one
+      }
+      this._emitCompletions({ index, input, status: STATUS.READY, value: response.completions });
+    } catch (error) {
+      this._error(error);
+      if (this._index !== index) {
+        return; // ignore
+      }
+      this._emitCompletions({ index, input, status: STATUS.ERRONEOUS, error });
+    }
+  }
+
+  async _getCompletions(input) {
+    // TODO: cache
+    return await this._fetchCompletions(input);
+  }
+
+  async _fetchCompletions({ value }) {
+    // TODO: other options?
+    const { api } = this._options.resolved.autocomplete;
+    const { group, name } = api;
+    const { signal } = this._ac || {};
+    const options = { ...api.options, signal };
+    const payload = { ...api.payload, q: value };
+    return await this._source({ group, name, payload, options });
+  }
+
+  _clearTimeout() {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+      this._timeoutId = undefined;
+    }
+  }
+
+  _abortPendingRequest(info) {
+    this._ac && this._ac.abort(info);
+    this._ac = new AbortController();
+  }
+
+  _emitCompletions(event) {
+    event.source = 'actor';
+    this._hub.update(fields.completions(), event);
+  }
+
+  _error(error) {
+    // TODO
+    console.error(error);
+  }
+
+  _destroy() {
+    // abort ongoing data fetch if any
+    this._ac && this._ac.abort({
+      type: 'autocomplete-actor-destroy',
+      message: 'Autocomplete actor is destroyed.',
+    });
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
+
+}
+
+function sameInput(a, b) {
+  return (!a && !b) || (a && b && a.value === b.value);
+}

package/src/actor/data.js

@@ -1,4 +1,5 @@
 import * as fields from './fields.js';
+import { isCurrentSession } from './utils.js';
 
 export default class DataActor {
 
@@ -61,7 +62,7 @@ export default class DataActor {
         let value;
         for await (value of response) {
           // A new session invalidates ongoing data fetch for the old session, terminating the loop
-          if (!this._isCurrentSession(session)) {
+          if (!isCurrentSession(this._hub, session)) {
             break;
           }
           this._emitResponse({ session, request, value });
@@ -77,15 +78,7 @@ export default class DataActor {
 
   _emitResponseWithSessionCheck(response) {
     // A new session invalidates ongoing data fetch
-    this._isCurrentSession(response.session) && this._emitResponse(response);
-  }
-
-  _isCurrentSession(session) {
-    if (!session) {
-      return false;
-    }
-    const { session: currentSession } = this._hub.states;
-    return currentSession && currentSession.index === session.index;
+    isCurrentSession(this._hub, response.session) && this._emitResponse(response);
   }
 
   _emitResponse(response) {

package/src/actor/fields.js

@@ -37,3 +37,11 @@ export function interaction() {
 export function feedback() {
   return 'feedback';
 }
+
+export function input() {
+  return 'input';
+}
+
+export function completions() {
+  return 'completions';
+}

package/src/actor/index.js

@@ -7,4 +7,5 @@ export { default as DataActor } from './data.js';
 export { default as ViewsActor } from './views.js';
 export { default as Trackers } from './trackers.js';
 export { default as FeedbackActor } from './feedback.js';
+export { default as AutocompleteActor } from './autocomplete.js';
 export { default as InteractionsActor } from './interactions.js';

package/src/actor/utils.js

@@ -40,3 +40,11 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
   });
   return payload;
 }
+
+export function isCurrentSession(hub, session) {
+  if (!session) {
+    return false;
+  }
+  const { session: currentSession } = hub.states;
+  return currentSession && currentSession.index === session.index;
+}

package/src/defaults/ask/templates.js

@@ -26,6 +26,27 @@ export function followUp(options = {}) {
   ]);
 };
 
+export const sections = Object.freeze({
+  followUps,
+  relatedResources,
+  querySuggestions,
+  answerGroup,
+  answer,
+  sources,
+});
+
+export const helpers = Object.freeze({
+  normalizeOptions,
+  normalizePhraseOptions,
+  normalizePhraseOptionKey,
+  phrase,
+  phraseText,
+  section,
+  container,
+  element,
+  attrs,
+});
+
 
 
 // options //