@miso.ai/client-sdk-ui 1.14.0-beta.2 → 1.14.0-beta.4

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/index.js

@@ -81,6 +81,12 @@ 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 () {
@@ -105,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 () {
@@ -143,6 +155,7 @@ 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"));
@@ -157,6 +170,7 @@ 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"));

package/dist/cjs/layout/input/search-box.js

@@ -406,10 +406,15 @@ class SearchBoxLayout extends _template.default {
       return;
     }
     this.close();
-    // TODO: q -> value
-    this._view.hub.update(_clientSdkWorkflow.fields.query(), {
-      q: value
-    });
+    // a view event, like the buttons: the workflow routes it into its query
+    // flow (or its own submission semantics), the layout stays hands-off
+    const {
+      session
+    } = this._view._state || {};
+    this._view._emit('submit', Object.freeze({
+      session,
+      value
+    }));
     if (this.options.clearOnSubmit) {
       const inputElement = this._element && this._element.querySelector(`[data-role="input"]`);
       if (inputElement) {

package/dist/cjs/layout/list/collection.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.hasStatusTemplate = hasStatusTemplate;
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.js");
@@ -24,7 +25,13 @@ function root(layout, state) {
   } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${hasStatusTemplate(status) ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+}
+
+// the statuses with a content template of their own: the list at ready, the
+// error notice at erroneous
+function hasStatusTemplate(status) {
+  return status === _constants.STATUS.READY || status === _constants.STATUS.ERRONEOUS;
 }
 function ready(layout, state) {
   const {
@@ -96,13 +103,16 @@ const DEFAULT_TEMPLATES = Object.freeze({
   image: _templates.image,
   question: _templates.question,
   thread: _templates.thread,
+  threadBody: _templates.threadBody,
   threadMenuBlock: _templates.threadMenuBlock,
   message: _templates.message,
-  messageQuestionBlock: _templates.messageQuestionBlock,
-  messageAnswerBlock: _templates.messageAnswerBlock,
+  messageBody: _templates.messageBody,
   root,
   [_constants.STATUS.READY]: ready,
   empty: () => ``,
+  // no notice by default: the ask/search UIs present errors in a section of
+  // their own (<miso-error>); list layouts that stand alone supply one
+  [_constants.STATUS.ERRONEOUS]: () => ``,
   body,
   list,
   ordered: false,
@@ -208,7 +218,14 @@ class CollectionLayout extends _template.default {
     return element.querySelector('[data-role="list"]');
   }
   _getItemElements(element) {
-    return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
+    if (!element) {
+      return [];
+    }
+    // an item may host a nested collection with items of its own (a
+    // conversation message and its source cards): ours are only those whose
+    // closest list is this layout's own list
+    const listElement = this._getListElement(element);
+    return Array.from((listElement || element).querySelectorAll(`[data-role="item"]`)).filter(item => item.closest(`[data-role="list"]`) === listElement);
   }
   _onClick(event) {
     const element = event.target.closest(`[data-role="item"]`);