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

package/src/layout/button/button.js

@@ -3,6 +3,7 @@ import { LAYOUT_TYPE } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { getIcon } from '../../asset/svgs.js';
 import prompt from '../../util/prompt.js';
+import confirm from '../../util/confirm.js';
 
 const TYPE = LAYOUT_TYPE.BUTTON;
 const DEFAULT_CLASSNAME = 'miso-button';
@@ -10,7 +11,8 @@ const DEFAULT_CLASSNAME = 'miso-button';
 function root(layout, state) {
   const { className, role, templates } = layout;
   const roleAttr = role ? ` data-role="${role}"` : '';
-  return `<button type="button" class="${className}"${roleAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+  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) {
@@ -45,6 +47,19 @@ const DEFAULT_TEMPLATES = Object.freeze({
  * 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.
  */
 export default class ButtonLayout extends TemplateBasedLayout {
 
@@ -84,7 +99,9 @@ export default class ButtonLayout extends TemplateBasedLayout {
     if (!button || button.disabled) {
       return;
     }
-    this.options.prompt ? this._submitViaPrompt(event) : this._submit(event);
+    this.options.prompt ? this._submitViaPrompt(event) :
+      this.options.confirm ? this._submitViaConfirm(event) :
+      this._submit(event);
   }
 
   _submit(event, payload) {
@@ -104,13 +121,32 @@ export default class ButtonLayout extends TemplateBasedLayout {
     this._submit(event, { value });
   }
 
+  async _submitViaConfirm(event) {
+    const { message, ...options } = this.options.confirm;
+    const confirmed = await confirm({
+      ...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.
+   * the latest render, put through the `value` option when given.
    */
   _currentValue() {
     const state = this._element && this._rendered.get(this._element);
-    return state && state.value;
+    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;
   }
 
 }

package/src/layout/button/checkbox.js

@@ -11,7 +11,8 @@ function root(layout, state) {
   const checked = isChecked(state);
   const roleAttr = role ? ` data-role="${role}"` : '';
   const checkedAttr = checked ? ' data-checked' : '';
-  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+  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) {

package/src/layout/container/item-container.js

@@ -0,0 +1,99 @@
+import { LAYOUT_TYPE } from '../../constants.js';
+import ContainerLayout from './container.js';
+
+const TYPE = 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.
+ */
+export default class ItemContainerLayout extends ContainerLayout {
+
+  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;
+    }
+  }
+
+}

package/src/layout/index.js

@@ -1,5 +1,6 @@
 export { default as TemplateBasedLayout } from './template.js';
 export { default as ContainerLayout } from './container/container.js';
+export { default as ItemContainerLayout } from './container/item-container.js';
 export { default as ErrorLayout } from './error/error.js';
 export { default as BannerLayout } from './banner/banner.js';
 export { default as CollectionLayout } from './list/collection.js';
@@ -14,6 +15,7 @@ export { default as SearchBoxLayout } from './input/search-box.js';
 export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
+export { default as QuestionLayout } from './text/question.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
 export { default as FacetsLayout } from './input/facets.js';

package/src/layout/input/search-box.js

@@ -362,8 +362,10 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       return;
     }
     this.close();
-    // TODO: q -> value
-    this._view.hub.update(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/src/layout/list/collection.js

@@ -2,14 +2,20 @@ import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
 import { makeTriggerable } from '../mixin/triggerable.js';
-import { product, article, compactArticle, image, question, thread, threadMenuBlock, message, messageQuestionBlock, messageAnswerBlock, productInfoBlock, articleInfoBlock, compactArticleInfoBlock, imageInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, authorsBlock, authorsAndDateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
+import { product, article, compactArticle, image, question, thread, threadBody, threadMenuBlock, message, messageBody, productInfoBlock, articleInfoBlock, compactArticleInfoBlock, imageInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, authorsBlock, authorsAndDateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates, options } = layout;
   const { status } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === 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
+export function hasStatusTemplate(status) {
+  return status === STATUS.READY || status === STATUS.ERRONEOUS;
 }
 
 function ready(layout, state) {
@@ -67,13 +73,16 @@ const DEFAULT_TEMPLATES = Object.freeze({
   image,
   question,
   thread,
+  threadBody,
   threadMenuBlock,
   message,
-  messageQuestionBlock,
-  messageAnswerBlock,
+  messageBody,
   root,
   [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
+  [STATUS.ERRONEOUS]: () => ``,
   body,
   list,
   ordered: false,
@@ -181,7 +190,15 @@ export default class CollectionLayout extends TemplateBasedLayout {
   }
 
   _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) {