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

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 };
   }
@@ -10,10 +11,14 @@ export function normalizeApiOptions([name, payload] = []) {
     payload = name;
     name = undefined;
   }
+  let group = undefined;
+  if (name && name.indexOf('/') !== -1) {
+    [group, name] = name.split('/');
+  }
   if ((name && typeof name !== 'string') || (payload !== undefined && typeof payload !== 'object')) {
     throw new Error(`Invalid arguments for useApi(): ${name}, ${payload}`);
   }
-  return trimObj({ name, payload });
+  return trimObj({ group, name, payload });
 }
 
 export function normalizeLayoutsOptions(options = {}) {
@@ -105,6 +110,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 +206,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 +246,11 @@ const FEATURES = [
     normalize: normalizeInteractionsOptions,
     merge: mergeInteractionsOptions,
   },
+  {
+    key: 'autocomplete',
+    normalize: normalizeAutocompleteOptions,
+    merge: mergeAutocompleteOptions,
+  },
 ];
 
 
@@ -328,18 +360,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']);