@miso.ai/client-sdk-ui 1.13.2-beta.1 → 1.14.0-beta.3

package/src/util/dom.js

@@ -1,3 +1,19 @@
+// data-* attributes of an element as a JSON string, for click interactions
+export function dumpElementAttributes(element) {
+  const { attributes } = element;
+  const attrs = {};
+  for (const { name, value } of attributes) {
+    if (name.startsWith('data-')) {
+      attrs[name] = value;
+    }
+  }
+  try {
+    return JSON.stringify(attrs);
+  } catch (e) {
+    return '{}';
+  }
+}
+
 export function setOrRemoveAttribute(element, name, value) {
   if (value === undefined) {
     element.removeAttribute(name);

package/src/util/modal.js

@@ -0,0 +1,49 @@
+import { escapeHtml } from '@miso.ai/commons';
+
+/**
+ * The shared modal dialog core of confirm() and prompt(): a native <dialog>
+ * with title, message, an optional body, and cancel/confirm actions. Resolves
+ * with `result(dialog)` when confirmed; the cancel button, a backdrop click,
+ * and the Escape key all resolve with `cancelValue`.
+ */
+export function openModal({
+  className,
+  title,
+  message,
+  body = '',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+  onOpen,
+  result = () => true,
+  cancelValue,
+} = {}) {
+  return new Promise((resolve) => {
+    const dialog = document.createElement('dialog');
+    dialog.className = className;
+    dialog.innerHTML = [
+      title ? `<div class="${className}__title">${escapeHtml(title)}</div>` : '',
+      message ? `<div class="${className}__message">${escapeHtml(message)}</div>` : '',
+      body,
+      `<div class="${className}__actions">`,
+      `<button type="button" class="${className}__button ${className}__cancel-button" data-role="cancel">${escapeHtml(cancelText)}</button>`,
+      `<button type="button" class="${className}__button ${className}__confirm-button${danger ? ` ${className}__confirm-button--danger` : ''}" data-role="confirm">${escapeHtml(confirmText)}</button>`,
+      `</div>`,
+    ].join('');
+    dialog.addEventListener('click', (event) => {
+      if (event.target.closest('[data-role="confirm"]')) {
+        dialog.close('confirm');
+      } else if (event.target.closest('[data-role="cancel"]') || event.target === dialog) {
+        dialog.close(); // cancel button or backdrop click
+      }
+    });
+    dialog.addEventListener('close', () => {
+      const value = dialog.returnValue === 'confirm' ? result(dialog) : cancelValue;
+      dialog.remove();
+      resolve(value);
+    }, { once: true });
+    document.body.appendChild(dialog);
+    dialog.showModal();
+    onOpen && onOpen(dialog);
+  });
+}

package/src/util/prompt.js

@@ -0,0 +1,42 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { openModal } from './modal.js';
+
+const DEFAULT_CLASSNAME = 'miso-prompt';
+
+/**
+ * Show a modal input dialog (a native <dialog>), resolving to the entered
+ * (trimmed) text when confirmed. Cancel button, backdrop click, and the
+ * Escape key all resolve to undefined. The Enter key confirms. Exposed as
+ * `MisoClient.ui.prompt()`.
+ */
+export default function prompt({
+  title,
+  message,
+  value = '',
+  placeholder,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  className = DEFAULT_CLASSNAME,
+} = {}) {
+  return openModal({
+    className,
+    title,
+    message,
+    body: `<input class="${className}__input" type="text" data-role="input" value="${escapeHtml(value)}"${placeholder ? ` placeholder="${escapeHtml(placeholder)}"` : ''}>`,
+    confirmText,
+    cancelText,
+    onOpen: (dialog) => {
+      const input = dialog.querySelector('[data-role="input"]');
+      input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          dialog.close('confirm');
+        }
+      });
+      input.focus();
+      input.select();
+    },
+    result: dialog => dialog.querySelector('[data-role="input"]').value.trim(),
+    cancelValue: undefined,
+  });
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.13.2-beta.1';
+export default '1.14.0-beta.3';

package/dist/cjs/actor/data.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var fields = _interopRequireWildcard(require("./fields.js"));
-var _utils = require("./utils.js");
-const _excluded = ["session"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-class DataActor {
-  constructor(hub, {
-    source,
-    options,
-    polling = true
-  }) {
-    this._hub = hub;
-    this._source = source;
-    this._options = options;
-    this._polling = polling;
-    this._unsubscribes = [hub.on(fields.session(), session => this._handleSession(session)), hub.on(fields.request(), event => this._handleRequest(event))];
-  }
-  get active() {
-    return this._options.resolved.api.actor !== false;
-  }
-  get source() {
-    return this._source;
-  }
-  _handleSession(session) {
-    // this is mandatory in any case
-    /*
-    if (!this.active) {
-      return;
-    }
-    */
-    // abort ongoing data fetch if any
-    if (!this._session || session.index !== this._session.index) {
-      // new session, abort preview data fetch if necessary
-      this._ac && this._ac.abort({
-        type: 'new-session',
-        message: 'A new session is created, discarding the old one.'
-      });
-      this._ac = new AbortController();
-    }
-    this._session = session;
-  }
-  async _handleRequest(event) {
-    // protocol: inactive -> no reaction
-    if (!this.active) {
-      return;
-    }
-    const {
-        session
-      } = event,
-      request = _objectWithoutPropertiesLoose(event, _excluded);
-    try {
-      const {
-        signal
-      } = this._ac || {};
-      const options = Object.assign({}, event.options, {
-        signal
-      });
-      const response = await this._source(Object.assign({
-        session
-      }, request, {
-        options
-      }));
-      // takes an iterable, either sync or async
-      if (response && response[Symbol.asyncIterator]) {
-        // also emit reponse of the head request, if available
-        if (response._response) {
-          this._emitResponseWithSessionCheck({
-            session,
-            request,
-            value: response._response
-          });
-        }
-        if (this._polling) {
-          let value;
-          for await (value of response) {
-            // A new session invalidates ongoing data fetch for the old session, terminating the loop
-            if (!(0, _utils.isCurrentSession)(this._hub, session)) {
-              break;
-            }
-            this._emitResponse({
-              session,
-              request,
-              value
-            });
-          }
-        }
-      } else {
-        this._emitResponseWithSessionCheck({
-          session,
-          request,
-          value: response
-        });
-      }
-    } catch (error) {
-      this._error(error);
-      this._emitResponseWithSessionCheck({
-        session,
-        request,
-        error
-      });
-    }
-  }
-  _emitResponseWithSessionCheck(response) {
-    // A new session invalidates ongoing data fetch
-    (0, _utils.isCurrentSession)(this._hub, response.session) && this._emitResponse(response);
-  }
-  _emitResponse(response) {
-    this._hub.update(fields.response(), response);
-  }
-  _error(error) {
-    // TODO
-    console.error(error);
-  }
-  _destroy() {
-    // abort ongoing data fetch if any
-    this._ac && this._ac.abort({
-      type: 'data-actor-destroy',
-      message: 'Data actor is destroyed.'
-    });
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-}
-exports.default = DataActor;

package/dist/cjs/actor/feedback.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var fields = _interopRequireWildcard(require("./fields.js"));
-var _constants = require("../constants.js");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-class FeedbackActor {
-  constructor(hub) {
-    this._hub = hub;
-    this._unsubscribes = [hub.on(fields.feedback(), state => this._trigger(state))];
-  }
-  _trigger(state) {
-    this._hub.trigger(fields.tracker(), {
-      type: _constants.EVENT_TYPE.FEEDBACK,
-      result_type: 'answer',
-      value: state.unselected ? 'unselected' : state.value
-    });
-  }
-  _destroy() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-}
-exports.default = FeedbackActor;

package/dist/cjs/actor/fields.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.completions = completions;
-exports.data = data;
-exports.feedback = feedback;
-exports.filters = filters;
-exports.input = input;
-exports.interaction = interaction;
-exports.more = more;
-exports.query = query;
-exports.request = request;
-exports.response = response;
-exports.session = session;
-exports.tracker = tracker;
-exports.view = view;
-function session() {
-  return 'session';
-}
-function completions() {
-  return 'completions';
-}
-function filters() {
-  return 'filters';
-}
-function query() {
-  return 'query';
-}
-function request() {
-  return 'request';
-}
-function response() {
-  return 'response';
-}
-function data() {
-  return 'data';
-}
-function view(role) {
-  return role ? `view:${role}` : 'view';
-}
-function tracker() {
-  return 'tracker';
-}
-function interaction() {
-  return 'interaction';
-}
-function feedback() {
-  return 'feedback';
-}
-function input() {
-  return 'input';
-}
-function more() {
-  return 'more';
-}

package/dist/cjs/actor/filters.js

@@ -1,161 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _commons = require("@miso.ai/commons");
-var fields = _interopRequireWildcard(require("./fields.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function mergeState(state = {}, update = {}) {
-  return Object.freeze((0, _commons.trimObj)(Object.assign({}, state, update, {
-    facets: Object.freeze((0, _commons.trimObj)(Object.assign({}, state.facets, update.facets)))
-  })));
-}
-function optionsToState({
-  sort
-} = {}) {
-  // TODO: facets
-  return (0, _commons.trimObj)({
-    facets: Object.freeze({}),
-    sort: sortOptionsToState(sort)
-  });
-}
-function sortOptionsToState(sort) {
-  if (!sort) {
-    return undefined;
-  }
-  const {
-    options = []
-  } = sort;
-  for (const option of options) {
-    if (option.default) {
-      return Object.freeze(option);
-    }
-  }
-  return Object.freeze(options[0]);
-}
-class Filters {
-  constructor(views, {
-    facets: facetsOptions
-  } = {}) {
-    this._views = views;
-    this._hub = views._hub;
-    const error = this._error = this._error.bind(this);
-    this._events = new _commons.EventEmitter({
-      target: this,
-      error
-    });
-    (0, _commons.defineValues)(this, {
-      facets: new Facets(this, facetsOptions)
-    });
-    this._unsubscribes = [views._options.on('filters', () => this._syncOptions())];
-    this._syncOptions();
-    this._states = undefined;
-  }
-  _syncOptions() {
-    const options = this._views._options.resolved.filters;
-    this._initialStates = optionsToState(options);
-    this.apply({
-      silent: true
-    });
-  }
-  _getStates() {
-    return this._states || this._initialStates;
-  }
-  update(updates) {
-    const oldStates = this._getStates();
-    this._states = mergeState(Object.assign({}, oldStates, updates));
-    const states = this._getStates();
-    this._events.emit('update', {
-      updates,
-      states,
-      oldStates
-    });
-  }
-  reset({
-    silent = false
-  } = {}) {
-    // TODO: review this
-    const oldStates = this._states;
-    this._states = undefined;
-    const states = this._getStates();
-    this._hub.update(fields.filters(), states, {
-      silent
-    });
-    this._events.emit('reset', {
-      states,
-      oldStates
-    });
-  }
-  apply({
-    silent = false
-  } = {}) {
-    const states = this._getStates();
-    this._hub.update(fields.filters(), states, {
-      silent
-    });
-    !silent && this._events.emit('apply');
-  }
-  _error(error) {
-    this._views._error(error);
-  }
-  _destroy() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-}
-exports.default = Filters;
-class Facets {
-  constructor(filters, options = {}) {
-    this._filters = filters;
-    this._options = options;
-  }
-  isSelected(field, value) {
-    return this._getFieldValues(field).includes(value);
-  }
-  select(field, value) {
-    if (this.isSelected(field, value)) {
-      return;
-    }
-    this._select(field, value);
-  }
-  unselect(field, value) {
-    if (!this.isSelected(field, value)) {
-      return;
-    }
-    this._unselect(field, value);
-  }
-  toggle(field, value) {
-    if (this.isSelected(field, value)) {
-      this._unselect(field, value);
-    } else {
-      this._select(field, value);
-    }
-  }
-  _getFieldValues(field) {
-    return this._filters._getStates().facets[field] || [];
-  }
-  _select(field, value) {
-    const values = this._options.multivalued ? [...this._getFieldValues(field), value] : [value];
-    values.sort();
-    this._filters.update({
-      facets: {
-        [field]: values
-      }
-    });
-  }
-  _unselect(field, value) {
-    let values = this._getFieldValues(field).filter(v => v !== value);
-    if (values.length === 0) {
-      values = undefined;
-    }
-    this._filters.update({
-      facets: {
-        [field]: values
-      }
-    });
-  }
-}

package/dist/cjs/actor/hub.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _commons = require("@miso.ai/commons");
-class Hub {
-  constructor(options = {}) {
-    (this._events = new _commons.EventEmitter())._injectSubscribeInterface(this);
-    this._options = options;
-    this._states = {};
-    (0, _commons.defineValues)(this, {
-      states: new Proxy(this._states, {
-        set() {}
-      })
-    });
-  }
-  update(name, state, options = {}) {
-    this._states[name] = Object.freeze(state);
-    const event = Object.freeze(Object.assign({
-      action: 'update',
-      name,
-      state
-    }, options));
-    // callback after update, before emit
-    if (typeof this._options.onUpdate === 'function') {
-      this._options.onUpdate(event);
-    }
-    // emit
-    if (!options.silent) {
-      this._events.emit(name, state);
-    }
-    // callback after emit
-    if (typeof this._options.onEmit === 'function') {
-      this._options.onEmit(event);
-    }
-  }
-  trigger(name, state) {
-    const event = Object.freeze({
-      action: 'trigger',
-      name,
-      state
-    });
-    // callback before emit
-    if (typeof this._options.onUpdate === 'function') {
-      this._options.onUpdate(event);
-    }
-    // emit
-    this._events.emit(name, state);
-    // callback after emit
-    if (typeof this._options.onEmit === 'function') {
-      this._options.onEmit(event);
-    }
-  }
-}
-exports.default = Hub;

package/dist/cjs/actor/index.js

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  fields: true,
-  Hub: true,
-  SessionMaker: true,
-  DataActor: true,
-  ViewsActor: true,
-  FeedbackActor: true,
-  InteractionsActor: true
-};
-Object.defineProperty(exports, "DataActor", {
-  enumerable: true,
-  get: function () {
-    return _data.default;
-  }
-});
-Object.defineProperty(exports, "FeedbackActor", {
-  enumerable: true,
-  get: function () {
-    return _feedback.default;
-  }
-});
-Object.defineProperty(exports, "Hub", {
-  enumerable: true,
-  get: function () {
-    return _hub.default;
-  }
-});
-Object.defineProperty(exports, "InteractionsActor", {
-  enumerable: true,
-  get: function () {
-    return _interactions.default;
-  }
-});
-Object.defineProperty(exports, "SessionMaker", {
-  enumerable: true,
-  get: function () {
-    return _sessions.default;
-  }
-});
-Object.defineProperty(exports, "ViewsActor", {
-  enumerable: true,
-  get: function () {
-    return _views.default;
-  }
-});
-exports.fields = void 0;
-var fields = _interopRequireWildcard(require("./fields.js"));
-exports.fields = fields;
-var _hub = _interopRequireDefault(require("./hub.js"));
-var _sessions = _interopRequireDefault(require("./sessions.js"));
-var _data = _interopRequireDefault(require("./data.js"));
-var _views = _interopRequireDefault(require("./views.js"));
-var _feedback = _interopRequireDefault(require("./feedback.js"));
-var _interactions = _interopRequireDefault(require("./interactions.js"));
-var _trackers = require("./trackers.js");
-Object.keys(_trackers).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _trackers[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _trackers[key];
-    }
-  });
-});
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/dist/cjs/actor/interactions.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _commons = require("@miso.ai/commons");
-var fields = _interopRequireWildcard(require("./fields.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-class InteractionsActor {
-  constructor(hub, {
-    client,
-    options
-  }) {
-    this._client = client;
-    this._options = options;
-    this._unsubscribes = [hub.on(fields.interaction(), payload => this._handle(payload))];
-  }
-  _handle(payload) {
-    // TODO: omit when option == false
-    payload = (0, _commons.asArray)(payload);
-    if (payload.length === 0) {
-      return;
-    }
-    this._client.api.interactions.upload(payload, {
-      merge: true
-    });
-  }
-  destroy() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-}
-exports.default = InteractionsActor;

package/dist/cjs/actor/sessions.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _commons = require("@miso.ai/commons");
-var fields = _interopRequireWildcard(require("./fields.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-class SessionMaker {
-  constructor(hub) {
-    this._hub = hub;
-    this._sessionIndex = 0;
-  }
-  restart() {
-    const session = Object.freeze({
-      uuid: (0, _commons.uuidv4)(),
-      index: this._sessionIndex++,
-      startAt: Date.now(),
-      meta: {}
-    });
-    this._hub.update(fields.session(), session);
-  }
-}
-exports.default = SessionMaker;