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

package/dist/cjs/layout/button/button.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../../constants.js");
+var _template = _interopRequireDefault(require("../template.js"));
+var _svgs = require("../../asset/svgs.js");
+var _prompt = _interopRequireDefault(require("../../util/prompt.js"));
+var _confirm = _interopRequireDefault(require("../../util/confirm.js"));
+const _excluded = ["className", "templates"],
+  _excluded2 = ["message"];
+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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = _constants.LAYOUT_TYPE.BUTTON;
+const DEFAULT_CLASSNAME = 'miso-button';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}"${roleAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+function icon(layout) {
+  const {
+    icon
+  } = layout.options;
+  return icon ? (0, _svgs.getIcon)(icon) : '';
+}
+function text(layout) {
+  const {
+    className,
+    options: {
+      text
+    }
+  } = layout;
+  return text ? `<span class="${className}__text">${(0, _commons.escapeHtml)(text)}</span>` : '';
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text
+});
+
+/**
+ * A generic button: an icon and a label, both configurable (`icon` is an icon
+ * name, `text` the label; either can be omitted), emitting a `submit` view
+ * event when clicked — for the workflow to act on, per role.
+ *
+ * It carries no data of its own, so it renders in any state; use it for
+ * actions that stand apart from the data they act on, such as the new chat
+ * button (role `new_thread`) of the chat history interface.
+ *
+ * With a `prompt` option, the click asks for a text through the shared
+ * prompt dialog first, pre-filled with the control's current value — the
+ * role's mapped data value, as of the latest render — and the submit event
+ * carries the confirmed text as `value`; a cancelled, cleared, or unchanged
+ * dialog submits nothing. Use it for actions that take a text input, such
+ * as the rename button (role `rename`) of the conversation header, whose
+ * role maps to `'thread.title'`.
+ *
+ * With a `confirm` option, the click asks through the shared confirm dialog
+ * first, and submits only when confirmed; the option's `message` may be a
+ * function of the control's current value. Use it for destructive actions,
+ * such as the delete button (role `delete`) of a thread item's context menu.
+ *
+ * The control's current value is the role's mapped data value, put through
+ * the `value` option when given — map the role to a record and let `value`
+ * pick the text the dialogs work with. A `disabled` option (a boolean, or a
+ * function of the mapped value) renders the button's disabled state from
+ * the data, re-evaluated on every commit — e.g. rename/delete disable while
+ * their thread record has no thread id yet (a thread being created is not
+ * addressable), enabling in place when the resolution patches the record.
+ */
+class ButtonLayout extends _template.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+  }
+  initialize(view) {
+    this._unsubscribes = [...this._unsubscribes, view.proxyElement.on('click', event => this._handleClick(event))];
+  }
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    this.options.prompt ? this._submitViaPrompt(event) : this.options.confirm ? this._submitViaConfirm(event) : this._submit(event);
+  }
+  _submit(event, payload) {
+    const {
+      session
+    } = this._view._state || {};
+    this._view._emit('submit', Object.assign({
+      session,
+      domEvent: event
+    }, payload));
+  }
+  async _submitViaPrompt(event) {
+    const current = this._currentValue();
+    const value = await (0, _prompt.default)(Object.assign({
+      value: typeof current === 'string' ? current : ''
+    }, this.options.prompt));
+    if (!value || value === current) {
+      return; // cancelled, cleared, or unchanged
+    }
+    this._submit(event, {
+      value
+    });
+  }
+  async _submitViaConfirm(event) {
+    const _this$options$confirm = this.options.confirm,
+      {
+        message
+      } = _this$options$confirm,
+      options = _objectWithoutPropertiesLoose(_this$options$confirm, _excluded2);
+    const confirmed = await (0, _confirm.default)(Object.assign({}, options, {
+      message: typeof message === 'function' ? message(this._currentValue()) : message
+    }));
+    if (!confirmed) {
+      return;
+    }
+    this._submit(event);
+  }
+
+  /**
+   * The current value of the control: the role's mapped data value, as of
+   * the latest render, put through the `value` option when given.
+   */
+  _currentValue() {
+    const state = this._element && this._rendered.get(this._element);
+    const raw = state && state.value;
+    const {
+      value
+    } = this.options;
+    return typeof value === 'function' ? value(raw) : raw;
+  }
+  _isDisabled(state) {
+    const {
+      disabled
+    } = this.options;
+    return typeof disabled === 'function' ? !!disabled(state && state.value) : !!disabled;
+  }
+}
+exports.default = ButtonLayout;

package/dist/cjs/layout/button/checkbox.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../../constants.js");
+var _button = _interopRequireDefault(require("./button.js"));
+var _svgs = require("../../asset/svgs.js");
+const _excluded = ["className", "templates"];
+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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = _constants.LAYOUT_TYPE.CHECKBOX;
+const DEFAULT_CLASSNAME = 'miso-checkbox';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const checked = isChecked(state);
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const checkedAttr = checked ? ' data-checked' : '';
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+function icon(layout, state) {
+  const {
+    icon,
+    checkedIcon = icon
+  } = layout.options;
+  const name = isChecked(state) ? checkedIcon : icon;
+  return name ? (0, _svgs.getIcon)(name) : '';
+}
+function text(layout, state) {
+  const {
+    className,
+    options: {
+      text,
+      checkedText = text
+    }
+  } = layout;
+  const value = isChecked(state) ? checkedText : text;
+  return value ? `<span class="${className}__text">${(0, _commons.escapeHtml)(value)}</span>` : '';
+}
+
+// the checked state is the mapped data value, so it renders from data alone
+function isChecked({
+  value
+} = {}) {
+  return value === true;
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text
+});
+
+/**
+ * A checkbox that looks like a button: an icon and a label, each with an
+ * optional checked variant (`icon`/`text` and `checkedIcon`/`checkedText`,
+ * the latter falling back to the former). It is a switch — semantically a
+ * checkbox (`role="switch"`, `aria-checked`), visually a button — for
+ * on/off state a user toggles, such as the answer-updates subscription of
+ * the conversation panel (role `subscription`).
+ *
+ * The checked state comes from the data (the mapped value is the boolean —
+ * e.g. role `subscription` maps to `'thread.subscribed'`), so a click emits
+ * a `change` view event carrying the requested state (`{ checked }`) and
+ * nothing else: the workflow acts on it and the new state arrives back down
+ * the data path, like any other rendering.
+ */
+class CheckboxLayout extends _button.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+  }
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    // what the user toggles is the control's current value
+    const checked = this._currentValue() === true;
+    const {
+      session
+    } = this._view._state || {};
+    this._view._emit('change', {
+      session,
+      checked: !checked,
+      domEvent: event
+    });
+  }
+}
+exports.default = CheckboxLayout;

package/dist/cjs/layout/button/more-button.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _constants = require("../../constants.js");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 const _excluded = ["className", "templates"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'more-button';
+const TYPE = _constants.LAYOUT_TYPE.MORE_BUTTON;
 const DEFAULT_CLASSNAME = 'miso-more-button';
 function root(layout, state) {
   const {
@@ -67,7 +67,7 @@ class MoreButtonLayout extends _template.default {
     if (!button || button.disabled) {
       return;
     }
-    this._view.hub.trigger(_index.fields.more());
+    this._view.hub.trigger(_clientSdkWorkflow.fields.more());
   }
 }
 exports.default = MoreButtonLayout;

package/dist/cjs/layout/container/container.js

@@ -12,7 +12,7 @@ var _dom = require("../../util/dom.js");
 const _excluded = ["logo"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'container';
+const TYPE = _constants.LAYOUT_TYPE.CONTAINER;
 class ContainerLayout extends _raf.default {
   static get type() {
     return TYPE;

package/dist/cjs/layout/container/item-container.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants.js");
+var _container = _interopRequireDefault(require("./container.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TYPE = _constants.LAYOUT_TYPE.ITEM_CONTAINER;
+
+/**
+ * The container layout of a collection's item subworkflow (a thread of the
+ * thread list, a message of the conversation panel): the standard container
+ * duties (status attributes, banner, trackings), plus the item-level
+ * behaviors — currently the context menu (vertical dots + popup).
+ *
+ * The menu is handled by contract, not rendered here: the item template
+ * supplies the markup (e.g. the threads layout's threadMenuBlock), marking
+ * the toggle button `data-role="item-menu-button"` and the popup
+ * `data-role="item-menu"`, and this layout drives their open/close behavior
+ * — toggle on the button; any other click on the item (a menu action
+ * included) closes it, and so does a click outside the item, which is also
+ * how opening one item's menu closes another's. The menu contents are
+ * typically role elements binding to the item workflow (e.g. the thread
+ * item's `<miso-rename>`/`<miso-delete>` buttons), so the actions stay the
+ * workflow's own controls. Collection shells treat clicks carrying the
+ * menu data-roles as item-internal (e.g. the threads layout does not
+ * select); an item template without menu markup simply has nothing to
+ * drive. Ownership is guarded: the layout only ever drives its own item's
+ * menu — a menu or click inside a nested container element is that
+ * container's own layout's — so the layout is inert on the list panel
+ * itself, whose options bag it shares with the items.
+ */
+class ItemContainerLayout extends _container.default {
+  static get type() {
+    return TYPE;
+  }
+  initialize(view) {
+    this._unsubscribes.push(view.proxyElement.on('click', event => this._handleClick(event)));
+    if (typeof document !== 'undefined') {
+      const onDocumentClick = event => {
+        const element = this._element;
+        if (element && !element.contains(event.target)) {
+          this._closeMenu();
+        }
+      };
+      document.addEventListener('click', onDocumentClick);
+      this._unsubscribes.push(() => document.removeEventListener('click', onDocumentClick));
+    }
+  }
+
+  // menu //
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    // a click inside a nested container element belongs to that
+    // container's own layout (this layout may also host the list panel,
+    // whose subtree holds the items)
+    if (!this._owns(event.target)) {
+      return;
+    }
+    if (event.target.closest(`[data-role="item-menu-button"]`)) {
+      this._toggleMenu();
+      return;
+    }
+    // any other click on the item — a menu action included — closes the menu
+    this._closeMenu();
+  }
+  _getMenu() {
+    const menu = this._element && this._element.querySelector(`[data-role="item-menu"]`);
+    // only its own item's menu: one found inside a nested container
+    // element is that container's own layout's to drive
+    return menu && this._owns(menu) ? menu : undefined;
+  }
+  _owns(node) {
+    for (let el = node; el && el !== this._element; el = el.parentElement) {
+      if (el.isContainer) {
+        return false;
+      }
+    }
+    return true;
+  }
+  _toggleMenu() {
+    const menu = this._getMenu();
+    if (menu) {
+      menu.hidden = !menu.hidden;
+    }
+  }
+  _closeMenu() {
+    const menu = this._getMenu();
+    if (menu && !menu.hidden) {
+      menu.hidden = true;
+    }
+  }
+}
+exports.default = ItemContainerLayout;

package/dist/cjs/layout/error/error.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'error';
+const TYPE = _constants.LAYOUT_TYPE.ERROR;
 const DEFAULT_CLASSNAME = 'miso-error';
 function root(layout, state) {
   const {

package/dist/cjs/layout/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "BannerLayout", {
     return _banner.default;
   }
 });
+Object.defineProperty(exports, "ButtonLayout", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
 Object.defineProperty(exports, "CardsLayout", {
   enumerable: true,
   get: function () {
@@ -27,6 +33,12 @@ Object.defineProperty(exports, "CarouselLayout", {
     return _carousel.default;
   }
 });
+Object.defineProperty(exports, "CheckboxLayout", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.default;
+  }
+});
 Object.defineProperty(exports, "CollectionLayout", {
   enumerable: true,
   get: function () {
@@ -69,12 +81,24 @@ Object.defineProperty(exports, "HorizontalLayout", {
     return _horizontal.default;
   }
 });
+Object.defineProperty(exports, "ItemContainerLayout", {
+  enumerable: true,
+  get: function () {
+    return _itemContainer.default;
+  }
+});
 Object.defineProperty(exports, "ListLayout", {
   enumerable: true,
   get: function () {
     return _list.default;
   }
 });
+Object.defineProperty(exports, "MessagesLayout", {
+  enumerable: true,
+  get: function () {
+    return _messages.default;
+  }
+});
 Object.defineProperty(exports, "MoreButtonLayout", {
   enumerable: true,
   get: function () {
@@ -87,6 +111,12 @@ Object.defineProperty(exports, "OptionListLayout", {
     return _optionList.default;
   }
 });
+Object.defineProperty(exports, "QuestionLayout", {
+  enumerable: true,
+  get: function () {
+    return _question.default;
+  }
+});
 Object.defineProperty(exports, "SearchBoxLayout", {
   enumerable: true,
   get: function () {
@@ -111,6 +141,12 @@ Object.defineProperty(exports, "TextLayout", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "ThreadsLayout", {
+  enumerable: true,
+  get: function () {
+    return _threads.default;
+  }
+});
 Object.defineProperty(exports, "TypewriterLayout", {
   enumerable: true,
   get: function () {
@@ -119,10 +155,13 @@ Object.defineProperty(exports, "TypewriterLayout", {
 });
 var _template = _interopRequireDefault(require("./template.js"));
 var _container = _interopRequireDefault(require("./container/container.js"));
+var _itemContainer = _interopRequireDefault(require("./container/item-container.js"));
 var _error = _interopRequireDefault(require("./error/error.js"));
 var _banner = _interopRequireDefault(require("./banner/banner.js"));
 var _collection = _interopRequireDefault(require("./list/collection.js"));
 var _list = _interopRequireDefault(require("./list/list.js"));
+var _threads = _interopRequireDefault(require("./list/threads.js"));
+var _messages = _interopRequireDefault(require("./list/messages.js"));
 var _horizontal = _interopRequireDefault(require("./list/horizontal.js"));
 var _cards = _interopRequireDefault(require("./list/cards.js"));
 var _carousel = _interopRequireDefault(require("./list/carousel.js"));
@@ -131,9 +170,12 @@ var _searchBox = _interopRequireDefault(require("./input/search-box.js"));
 var _optionList = _interopRequireDefault(require("./input/option-list.js"));
 var _feedback = _interopRequireDefault(require("./radio/feedback.js"));
 var _text = _interopRequireDefault(require("./text/text.js"));
+var _question = _interopRequireDefault(require("./text/question.js"));
 var _index = _interopRequireDefault(require("./text/typewriter/index.js"));
 var _affiliation = _interopRequireDefault(require("./affiliation/affiliation.js"));
 var _facets = _interopRequireDefault(require("./input/facets.js"));
 var _select = _interopRequireDefault(require("./input/select.js"));
 var _moreButton = _interopRequireDefault(require("./button/more-button.js"));
+var _button = _interopRequireDefault(require("./button/button.js"));
+var _checkbox = _interopRequireDefault(require("./button/checkbox.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/layout/input/facets.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.js"));
 var _bindings = _interopRequireDefault(require("../../util/bindings.js"));
 const _excluded = ["className", "templates"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'facets';
+const TYPE = _constants.LAYOUT_TYPE.FACETS;
 const DEFAULT_CLASSNAME = 'miso-facets';
 const DEDAULT_FACET_CLASSNAME = 'miso-facet';
 const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';
@@ -158,7 +159,7 @@ class FacetsLayout extends _template.default {
     this._clearBindings();
   }
   _syncSelections() {
-    const selectedValues = getSelectedValues(this._view.hub.states[_index.fields.filters()].facets);
+    const selectedValues = getSelectedValues(this._view.hub.states[_clientSdkWorkflow.fields.filters()].facets);
     for (const {
       value: {
         field,

package/dist/cjs/layout/input/option-list.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.js");
 var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates"];
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'option-list';
+const TYPE = _constants.LAYOUT_TYPE.OPTION_LIST;
 const DEFAULT_CLASSNAME = 'miso-option-list';
 function root(layout, state) {
   const {