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

package/src/layout/input/facets.js

@@ -1,9 +1,10 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml } from '@miso.ai/commons';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
-const TYPE = 'facets';
+const TYPE = LAYOUT_TYPE.FACETS;
 const DEFAULT_CLASSNAME = 'miso-facets';
 const DEDAULT_FACET_CLASSNAME = 'miso-facet';
 const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';

package/src/layout/input/option-list.js

@@ -1,10 +1,11 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml } from '@miso.ai/commons';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
 import { addOrRemoveClass } from '../../util/dom.js';
 
-const TYPE = 'option-list';
+const TYPE = LAYOUT_TYPE.OPTION_LIST;
 const DEFAULT_CLASSNAME = 'miso-option-list';
 
 function root(layout, state) {

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

@@ -1,12 +1,12 @@
 import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
-import { STATUS, EVENT_TYPE } from '../../constants.js';
-import { fields } from '../../actor/index.js';
+import { STATUS, EVENT_TYPE, LAYOUT_TYPE } from '../../constants.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
 import { getIcon } from '../../asset/svgs.js';
 import { addOrRemoveClass } from '../../util/dom.js';
 
-const TYPE = 'search-box';
+const TYPE = LAYOUT_TYPE.SEARCH_BOX;
 const DEFAULT_CLASSNAME = 'miso-search-box';
 const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 
@@ -150,6 +150,30 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       proxyElement.on('focusout', (e) => this._handleFocusOut(e)),
       hub.on(fields.completions(), () => view.refresh({ force: true })),
     ];
+    if (this.options.disableWhenOngoing) {
+      // disable submission while the main view is still displaying an answer
+      const mainRole = view.workflow._roles && view.workflow._roles.main;
+      if (mainRole) {
+        this._unsubscribes.push(hub.on(fields.view(mainRole), state => this._syncDisabled(!!state.ongoing)));
+      }
+    }
+  }
+
+  _syncDisabled(disabled) {
+    if (this._disabled === disabled) {
+      return;
+    }
+    this._disabled = disabled;
+    this._syncDisabledAttributes();
+  }
+
+  _syncDisabledAttributes() {
+    // the user can keep typing; only submission is disabled
+    const element = this._element;
+    const button = element && element.querySelector(`[data-role="submit"]`);
+    if (button) {
+      button.disabled = !!this._disabled;
+    }
   }
 
   focus() {
@@ -197,6 +221,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   _afterRender(element, state) {
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
+    this._syncDisabledAttributes(); // a re-render replaces the input element
   }
 
   _updateCompletions(element, { state, rendered }, { writeToState }) {
@@ -289,7 +314,9 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   _handleKeyDown({ key, target, isComposing }) {
     if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
-      target.blur();
+      if (this.options.blurOnSubmit !== false) {
+        target.blur();
+      }
     }
     // TODO: select completion items with arrow keys
   }
@@ -300,7 +327,9 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     for (let element = target; element && element !== this._element; element = element.parentElement) {
       if (element.matches('[data-role="submit"]') || element.matches('[data-role="button"]') || element.matches('[type="submit"]')) {
         if (inputElement) {
-          inputElement.blur();
+          if (this.options.blurOnSubmit !== false) {
+            inputElement.blur();
+          }
           this._submit(inputElement.value);
         }
         return;
@@ -329,12 +358,20 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   async _submit(value) {
-    if (!value || !value.trim()) {
+    if (this._disabled || !value || !value.trim()) {
       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) {
+        inputElement.value = '';
+      }
+    }
     this._trackSubmit(value);
   }
 

package/src/layout/input/select.js

@@ -1,8 +1,9 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml, kebabOrSnakeToHuman } from '@miso.ai/commons';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
 
-const TYPE = 'select';
+const TYPE = LAYOUT_TYPE.SELECT;
 const DEFAULT_CLASSNAME = 'miso-select';
 
 function root(layout, state) {

package/src/layout/list/cards.js

@@ -1,6 +1,7 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from './collection.js';
 
-const TYPE = 'cards';
+const TYPE = LAYOUT_TYPE.CARDS;
 const DEFAULT_CLASSNAME = 'miso-cards';
 
 export default class CardsLayout extends CollectionLayout {

package/src/layout/list/carousel.js

@@ -1,8 +1,9 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from './collection.js';
 import { makeSwipeable } from '../mixin/swipeable.js';
 import { CHEVRON, CHEVRON_NEGATIVE } from '../../asset/svgs.js';
 
-const TYPE = 'carousel';
+const TYPE = LAYOUT_TYPE.CAROUSEL;
 const DEFAULT_CLASSNAME = 'miso-carousel';
 
 const DEFAULT_TEMPLATES = Object.freeze({

package/src/layout/list/collection.js

@@ -2,7 +2,7 @@ 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, 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;
@@ -66,6 +66,11 @@ const DEFAULT_TEMPLATES = Object.freeze({
   compactArticle,
   image,
   question,
+  thread,
+  threadBody,
+  threadMenuBlock,
+  message,
+  messageBody,
   root,
   [STATUS.READY]: ready,
   empty: () => ``,
@@ -176,7 +181,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) {

package/src/layout/list/gallery.js

@@ -1,3 +1,4 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { trimObj } from '@miso.ai/commons';
 import CollectionLayout from './collection.js';
 import { addOrRemoveClass, resolveCssLength, cssAspectRatio } from '../../util/dom.js';
@@ -34,7 +35,7 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
 });
 
-const TYPE = 'gallery';
+const TYPE = LAYOUT_TYPE.GALLERY;
 const DEFAULT_CLASSNAME = 'miso-gallery';
 
 export default class GalleryLayout extends CollectionLayout {

package/src/layout/list/horizontal.js

@@ -1,6 +1,7 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from './collection.js';
 
-const TYPE = 'horizontal';
+const TYPE = LAYOUT_TYPE.HORIZONTAL;
 const DEFAULT_CLASSNAME = 'miso-horizontal';
 
 export default class HorizontalLayout extends CollectionLayout {

package/src/layout/list/list.js

@@ -1,6 +1,7 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from './collection.js';
 
-const TYPE = 'list';
+const TYPE = LAYOUT_TYPE.LIST;
 const DEFAULT_CLASSNAME = 'miso-list';
 
 export default class ListLayout extends CollectionLayout {

package/src/layout/list/messages.js

@@ -0,0 +1,316 @@
+import { STATUS, LAYOUT_TYPE } from '../../constants.js';
+import CollectionLayout from './collection.js';
+
+const TYPE = LAYOUT_TYPE.MESSAGES;
+const DEFAULT_CLASSNAME = 'miso-messages';
+
+// the infinite scroll trigger sits ABOVE the list — older messages load as
+// the user scrolls up, unlike the stock collection root's bottom trigger
+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}>${templates.trigger(layout, state)}${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.loading(layout, state)}</div>`;
+}
+
+/**
+ * The conversation panel of the chat history interface: a shell that renders
+ * one <miso-message-item> container element per message item, incrementally —
+ * fresh items land at either end of the list: appended messages (a posted
+ * follow-up question) render as new items at the bottom, while an older
+ * page fetched by the more flow (infinite scroll: the trigger, placed above
+ * the list, fires the `more` hub field as the user scrolls up) renders as
+ * prepended items — told apart by which boundary the already-rendered
+ * records line up with.
+ * The content of a message is not rendered here: each <miso-message-item> is
+ * assigned its item subworkflow (workflow._getMessageWorkflow, off the item
+ * binding) in the post-render sync pass, and the role elements inside
+ * (question, answer, ...) render through that workflow's own layouts.
+ *
+ * All message-level presentation is the message workflow's own: a record
+ * without its answer body presents as status `loading`, stamped on the
+ * <miso-message-item> element by its container layout — there is deliberately no
+ * per-message loading icon; the answer typewriter's blinking caret is the
+ * loading indication — and the question bubble (text, authorship
+ * attributes) renders through the `question` layout.
+ *
+ * The shell keeps the panel-level behaviors: scroll pinning (the view sticks
+ * to the bottom while the user has not scrolled up, following content growth
+ * as answers type out), scroll anchoring while scrolled up (prepended items
+ * — and their contents, rendering in later through their own workflows —
+ * must not shift the reading position), and the `ongoing` view state read
+ * off the data — the last message's answer absent or unfinished — which
+ * e.g. disables the search box while an answer is on its way.
+ */
+export default class MessagesLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({ className, templates: { root, ...templates }, ...options });
+    this._pinned = true; // whether the view sticks to the bottom on updates
+    this._anchor = undefined; // the scroll anchor while prepended content settles
+    this._ongoing = undefined;
+  }
+
+  // item identity: the question id, or the local placeholder id standing in
+  // for it while a posted question awaits its response — the placeholder id
+  // survives the settle, so the element and its workflow do too
+  _getItemKey(message) {
+    return message.placeholder_id || message.question_id || message;
+  }
+
+  // render //
+  async render(element, state, controls = {}) {
+    // capture the view state callback for the ongoing report
+    this._notifyUpdate = controls.notifyUpdate;
+    await super.render(element, state, controls);
+  }
+
+  // incremental renders cover a pure append (a posted follow-up at the
+  // bottom) or a pure prepend (an older page above) — anything else
+  // re-renders in full
+  _shallRenderIncrementally(state, rendered) {
+    if (!super._shallRenderIncrementally(state, rendered)) {
+      return false;
+    }
+    const values = this._getItems(state) || [];
+    const renderedValues = rendered.value;
+    const count = values.length - renderedValues.length;
+    return count === 0 || // in-place changes only
+      this._getItemKey(values[0]) === this._getItemKey(renderedValues[0]) || // appended
+      this._getItemKey(values[count]) === this._getItemKey(renderedValues[0]); // prepended
+  }
+
+  // the fresh items land at the tail (a posted follow-up) or at the head
+  // (an older page fetched by the more flow): told apart by which boundary
+  // the already-rendered records line up with
+  _html(state, rendered, incremental) {
+    if (!incremental) {
+      return this.templates.root(this, state);
+    }
+    const values = this._getItems(state) || [];
+    const renderedValues = rendered.value;
+    const count = values.length - renderedValues.length;
+    if (count === 0) {
+      return '';
+    }
+    if (this._getItemKey(values[0]) === this._getItemKey(renderedValues[0])) {
+      const fresh = values.slice(renderedValues.length);
+      return {
+        position: 'beforeend',
+        items: this.templates.items(this, state, fresh, { offset: renderedValues.length }),
+      };
+    }
+    const fresh = values.slice(0, count);
+    return {
+      position: 'afterbegin',
+      items: this.templates.items(this, state, fresh, { offset: 0 }),
+    };
+  }
+
+  _render(element, { state }, { notifyUpdate }) {
+    const { incremental, html } = state;
+    if (incremental) {
+      if (html) {
+        const listElement = this._getListElement(element);
+        if (html.position === 'afterbegin') {
+          this._prependAnchored(listElement, html.items);
+        } else {
+          listElement.insertAdjacentHTML('beforeend', html.items);
+        }
+      } else {
+        notifyUpdate(false);
+      }
+    } else {
+      element.innerHTML = html;
+    }
+  }
+
+  _afterRender(element, state) {
+    super._afterRender(element, state); // syncs bindings and (re)arms the trigger
+    if (!state.incremental) {
+      // a fresh render (thread load): jump to the bottom
+      this._dropAnchor();
+      this._scrollToBottom({ force: true });
+    } else if (state.html && state.html.position === 'beforeend') {
+      // appended items (posted follow-up): jump to the bottom
+      this._scrollToBottom({ force: true });
+    }
+    this._watchGrowth(this._getListElement(element) || element);
+    this._syncWorkflows(element);
+    this._syncOngoing(state);
+  }
+
+  _unrender() {
+    super._unrender();
+    this._dropAnchor();
+  }
+
+  // assign each <miso-message-item> its item subworkflow, off the item binding
+  _syncWorkflows(element) {
+    const workflow = this._view && this._view.workflow;
+    if (!workflow || typeof workflow._getMessageWorkflow !== 'function') {
+      return;
+    }
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (binding && item.isContainer) {
+        item.workflow = workflow._getMessageWorkflow(binding.value);
+      }
+    }
+  }
+
+  // whether an answer is on its way — pending, or still being generated —
+  // reported as the `ongoing` view state, e.g. for the search box to disable
+  // submission
+  _syncOngoing(state) {
+    const messages = state.value || [];
+    const last = messages[messages.length - 1];
+    // a message settled by a failed content fetch is not on its way anymore
+    const ongoing = !!last && !last.error && (last.answer === undefined || last.finished === false);
+    if (this._ongoing === ongoing) {
+      return;
+    }
+    this._ongoing = ongoing;
+    this._notifyUpdate && this._notifyUpdate({ ongoing });
+  }
+
+  // scrolling //
+  /**
+   * Scroll the containing scrollable to the bottom. Unless forced, only
+   * applies while the user is pinned to the bottom — scrolling up to read
+   * releases the pin, scrolling back down restores it.
+   */
+  _scrollToBottom({ force = false } = {}) {
+    const scrollable = this._getScrollable();
+    if (!scrollable || !(force || this._pinned)) {
+      return;
+    }
+    scrollable.scrollTop = scrollable.scrollHeight;
+    this._pinned = true;
+  }
+
+  _getScrollable() {
+    const element = this._element;
+    if (!element || typeof getComputedStyle === 'undefined') {
+      return undefined;
+    }
+    for (let el = element; el && el.nodeType === 1 && el !== document.body; el = el.parentElement) {
+      const { overflowY } = getComputedStyle(el);
+      if (overflowY === 'auto' || overflowY === 'scroll') {
+        this._watchScroll(el);
+        return el;
+      }
+    }
+    return undefined;
+  }
+
+  _watchScroll(scrollable) {
+    if (this._watchedScrollable === scrollable) {
+      return;
+    }
+    this._unwatchScroll && this._unwatchScroll();
+    const onScroll = () => {
+      this._pinned = scrollable.scrollHeight - scrollable.scrollTop - scrollable.clientHeight < 40;
+      if (this._pinned) {
+        // back at the bottom: the reading position needs no anchor
+        this._anchor = undefined;
+      } else if (this._anchor && this._anchor.element.isConnected) {
+        // follow the user: the anchor holds the position they scrolled to,
+        // not the one where the prepend happened
+        this._anchor.top = this._relativeTop(this._anchor.element, scrollable);
+      }
+    };
+    scrollable.addEventListener('scroll', onScroll, { passive: true });
+    this._watchedScrollable = scrollable;
+    const unwatch = this._unwatchScroll = () => {
+      scrollable.removeEventListener('scroll', onScroll);
+      this._watchedScrollable = undefined;
+      this._unwatchScroll = undefined;
+    };
+    this._unsubscribes.push(() => this._unwatchScroll === unwatch && unwatch());
+  }
+
+  // the message contents render (and type out) through their own workflows,
+  // outside this layout's render cycle: follow the content growth — pinned,
+  // the view sticks to the bottom; scrolled up with an anchor active (a
+  // prepended page still rendering its contents in), the anchor is held
+  // stationary instead
+  _watchGrowth(element) {
+    if (!element || this._watchedGrowth === element || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    this._unwatchGrowth && this._unwatchGrowth();
+    const observer = new ResizeObserver(() => this._onContentGrowth());
+    observer.observe(element);
+    this._watchedGrowth = element;
+    const unwatch = this._unwatchGrowth = () => {
+      observer.disconnect();
+      this._watchedGrowth = undefined;
+      this._unwatchGrowth = undefined;
+    };
+    this._unsubscribes.push(() => this._unwatchGrowth === unwatch && unwatch());
+  }
+
+  _onContentGrowth() {
+    if (this._pinned) {
+      this._scrollToBottom();
+    } else {
+      this._restoreAnchor();
+    }
+  }
+
+  // scroll anchoring for prepended content //
+  // The anchor is the previously-first item: everything prepended — and
+  // its content, rendering in later through the item workflows — sits
+  // above it, so holding the anchor stationary holds the reading position,
+  // while growth below it (a streaming answer at the bottom) moves nothing
+  // above and needs no compensation. Not the browser's own scroll
+  // anchoring, which not every engine provides.
+  _prependAnchored(listElement, items) {
+    this._setAnchor();
+    listElement.insertAdjacentHTML('afterbegin', items);
+    this._restoreAnchor();
+  }
+
+  _setAnchor() {
+    const scrollable = this._getScrollable();
+    const element = this._getItemElements(this._element)[0];
+    this._anchor = scrollable && element
+      ? { element, scrollable, top: this._relativeTop(element, scrollable) }
+      : undefined;
+  }
+
+  _restoreAnchor() {
+    const anchor = this._anchor;
+    if (!anchor) {
+      return;
+    }
+    const { element, scrollable, top } = anchor;
+    if (!element.isConnected) {
+      this._anchor = undefined;
+      return;
+    }
+    const delta = this._relativeTop(element, scrollable) - top;
+    if (delta) {
+      scrollable.scrollTop += delta;
+    }
+  }
+
+  _relativeTop(element, scrollable) {
+    return element.getBoundingClientRect().top - scrollable.getBoundingClientRect().top;
+  }
+
+  _dropAnchor() {
+    this._anchor = undefined;
+  }
+
+}