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

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 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");
 var _svgs = require("../../asset/svgs.js");
@@ -14,7 +14,7 @@ var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates", "autocomplete"];
 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 = 'search-box';
+const TYPE = _constants.LAYOUT_TYPE.SEARCH_BOX;
 const DEFAULT_CLASSNAME = 'miso-search-box';
 const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 function root(layout) {
@@ -170,9 +170,31 @@ class SearchBoxLayout extends _template.default {
       proxyElement,
       hub
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e)), hub.on(_index.fields.completions(), () => view.refresh({
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e)), hub.on(_clientSdkWorkflow.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(_clientSdkWorkflow.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() {
     // TODO: support blur as well
@@ -203,7 +225,7 @@ class SearchBoxLayout extends _template.default {
       state
     });
     return Object.assign({}, state, {
-      completions: this._view.hub.states[_index.fields.completions()]
+      completions: this._view.hub.states[_clientSdkWorkflow.fields.completions()]
     });
   }
   _render(element, data, controls) {
@@ -216,6 +238,7 @@ class SearchBoxLayout extends _template.default {
   _afterRender(element, state) {
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
+    this._syncDisabledAttributes(); // a re-render replaces the input element
   }
   _updateCompletions(element, {
     state,
@@ -293,7 +316,7 @@ class SearchBoxLayout extends _template.default {
     }
     this._prevInput = value;
     const self = this;
-    this._debounce(() => self._view.hub.update(_index.fields.input(), {
+    this._debounce(() => self._view.hub.update(_clientSdkWorkflow.fields.input(), {
       value
     }));
   }
@@ -325,7 +348,9 @@ class SearchBoxLayout extends _template.default {
   }) {
     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
   }
@@ -339,7 +364,9 @@ class SearchBoxLayout extends _template.default {
     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;
@@ -375,14 +402,20 @@ class SearchBoxLayout extends _template.default {
     }
   }
   async _submit(value) {
-    if (!value || !value.trim()) {
+    if (this._disabled || !value || !value.trim()) {
       return;
     }
     this.close();
     // TODO: q -> value
-    this._view.hub.update(_index.fields.query(), {
+    this._view.hub.update(_clientSdkWorkflow.fields.query(), {
       q: value
     });
+    if (this.options.clearOnSubmit) {
+      const inputElement = this._element && this._element.querySelector(`[data-role="input"]`);
+      if (inputElement) {
+        inputElement.value = '';
+      }
+    }
     this._trackSubmit(value);
   }
   _trackSubmit(value) {

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.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 = 'select';
+const TYPE = _constants.LAYOUT_TYPE.SELECT;
 const DEFAULT_CLASSNAME = 'miso-select';
 function root(layout, state) {
   const {

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("./collection.js"));
 const _excluded = ["className"];
 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 = 'cards';
+const TYPE = _constants.LAYOUT_TYPE.CARDS;
 const DEFAULT_CLASSNAME = 'miso-cards';
 class CardsLayout extends _collection.default {
   static get type() {

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("./collection.js"));
 var _swipeable = require("../mixin/swipeable.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 = 'carousel';
+const TYPE = _constants.LAYOUT_TYPE.CAROUSEL;
 const DEFAULT_CLASSNAME = 'miso-carousel';
 const DEFAULT_TEMPLATES = Object.freeze({
   body,

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

@@ -95,6 +95,11 @@ const DEFAULT_TEMPLATES = Object.freeze({
   compactArticle: _templates.compactArticle,
   image: _templates.image,
   question: _templates.question,
+  thread: _templates.thread,
+  threadMenuBlock: _templates.threadMenuBlock,
+  message: _templates.message,
+  messageQuestionBlock: _templates.messageQuestionBlock,
+  messageAnswerBlock: _templates.messageAnswerBlock,
   root,
   [_constants.STATUS.READY]: ready,
   empty: () => ``,

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
 var _collection = _interopRequireDefault(require("./collection.js"));
 var _dom = require("../../util/dom.js");
@@ -43,7 +44,7 @@ const DEFAULT_HEIGHT = '16rem';
 const DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, {
   item
 }));
-const TYPE = 'gallery';
+const TYPE = _constants.LAYOUT_TYPE.GALLERY;
 const DEFAULT_CLASSNAME = 'miso-gallery';
 class GalleryLayout extends _collection.default {
   static get type() {

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("./collection.js"));
 const _excluded = ["className"];
 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 = 'horizontal';
+const TYPE = _constants.LAYOUT_TYPE.HORIZONTAL;
 const DEFAULT_CLASSNAME = 'miso-horizontal';
 class HorizontalLayout extends _collection.default {
   static get type() {

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("./collection.js"));
 const _excluded = ["className"];
 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 = 'list';
+const TYPE = _constants.LAYOUT_TYPE.LIST;
 const DEFAULT_CLASSNAME = 'miso-list';
 class ListLayout extends _collection.default {
   static get type() {

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

@@ -0,0 +1,346 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
+var _constants = require("../../constants.js");
+var _collection = _interopRequireDefault(require("./collection.js"));
+var _utils = require("../text/typewriter/utils.js");
+var _templates = require("../templates.js");
+var _dom = require("../../util/dom.js");
+const _excluded = ["className"];
+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.MESSAGES;
+const DEFAULT_CLASSNAME = 'miso-messages';
+const TYPEWRITER_CLASSNAME = 'miso-typewriter';
+
+/**
+ * The conversation panel of the chat history interface: a list of `message`
+ * items (question bubble + answer body), rendered incrementally — appended
+ * messages (e.g. a posted follow-up question) render as new items, while
+ * in-place changes are applied to existing items by a post-render pass
+ * (`_syncMessages`):
+ *
+ * - question texts are filled in when they arrive (the head request carries
+ *   question ids only)
+ * - a finished answer body is transformed from markdown to HTML in one shot
+ *   through the `std:ui-markdown` plugin
+ * - a streaming answer (a follow-up being generated, `finished: false`) is
+ *   driven by a per-message typewriter: a progressive markdown renderer with
+ *   a paced cursor, like the typewriter layout of the ask workflow
+ */
+class MessagesLayout extends _collection.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className
+    }, options));
+    this._renderedAnswers = new WeakMap(); // answer element -> rendered markdown
+    this._typewriters = new WeakMap(); // answer element -> MessageTypewriter
+    this._readiness = new _commons.Resolution();
+    this._pinned = true; // whether the view sticks to the bottom on updates
+    this._displaying = false; // whether a typewriter is still displaying an answer
+    // kick off sooner
+    MessagesLayout.MisoClient.plugins.install('std:ui-markdown');
+  }
+  initialize(view) {
+    super.initialize(view);
+    this._setup();
+  }
+
+  // setup //
+  async _setup() {
+    try {
+      const plugin = await MessagesLayout.MisoClient.plugins.install('std:ui-markdown');
+      if (!this._view) {
+        return; // destroyed
+      }
+      this._markdown = plugin.getContext(this._view.workflow._client);
+      this._readiness.resolve();
+    } catch (e) {
+      this._readiness.reject(e);
+    }
+  }
+  async _ready() {
+    return this._readiness.promise;
+  }
+
+  // render //
+  async render(element, state, controls = {}) {
+    // capture the view state callback, so the typewriter can report the
+    // `ongoing` state outside the render cycle
+    this._notifyUpdate = controls.notifyUpdate;
+    await super.render(element, state, controls);
+  }
+  _afterRender(element, state) {
+    super._afterRender(element, state); // syncs bindings to the latest values
+    if (!state.incremental) {
+      this._displaying = false; // a fresh render (thread load) drops any ongoing typewriter
+    }
+    if (!state.incremental || state.html) {
+      // a fresh render (thread load) or appended items (posted follow-up):
+      // jump to the bottom
+      this._scrollToBottom({
+        force: true
+      });
+    }
+    this._syncMessages(element).catch(error => console.error(error));
+  }
+  async _syncMessages(element) {
+    await this._ready();
+    const items = this._getItemElements(element);
+    let displaying = false;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const binding = this._bindings.get(item);
+      if (!binding) {
+        continue;
+      }
+      const message = binding.value;
+      const last = i === items.length - 1;
+      this._syncQuestion(item, message);
+      this._syncAnswer(item, message, {
+        last
+      });
+      if (last) {
+        displaying = this._isDisplaying(item, message);
+      }
+    }
+    this._setDisplaying(displaying);
+  }
+
+  // whether the (last) message pair is still being displayed: its answer is
+  // pending, streaming, or still being typed — live (posted in this session)
+  // or not: an answer still generating is picked up by the answers polling
+  // even after switching away from the thread and back, and must keep
+  // blocking submission all the same
+  _isDisplaying(item, message) {
+    if (!(0, _clientSdkWorkflow.hasAnswer)(message)) {
+      return true; // waiting for the answer body
+    }
+    const answerElement = item.querySelector('[data-role="answer"]');
+    const typewriter = answerElement && this._typewriters.get(answerElement);
+    return typewriter ? !typewriter.done : message.finished === false;
+  }
+  _syncQuestion(item, message) {
+    const questionElement = item.querySelector('[data-role="question"]');
+    if (!questionElement) {
+      return;
+    }
+    // the authorship arrives with the answers response, after the stub render
+    (0, _dom.setOrRemoveAttribute)(questionElement, 'data-author', (0, _templates.messageAuthor)(message));
+    (0, _dom.setOrRemoveAttribute)(questionElement, 'data-generated-by', (0, _clientSdkWorkflow.getGeneratedBy)(message));
+    const {
+      question
+    } = message;
+    if (!question || questionElement.textContent === question) {
+      return;
+    }
+    questionElement.textContent = question;
+    questionElement.hidden = false;
+  }
+  _syncAnswer(item, message, {
+    last = false
+  } = {}) {
+    const answerElement = item.querySelector('[data-role="answer"]');
+    if (!answerElement) {
+      return;
+    }
+    // an ongoing typewriter keeps consuming updates until it finishes typing
+    const typewriter = this._typewriters.get(answerElement);
+    if (typewriter) {
+      typewriter.update(message);
+      return;
+    }
+    if (!(0, _clientSdkWorkflow.hasAnswer)(message)) {
+      return; // still loading; the spinner stays
+    }
+    if (message.live || message.finished === false) {
+      // an answer being generated live in this session: drive it with a
+      // typewriter (even if the data arrived complete in one shot)
+      const typewriter = new MessageTypewriter(this._markdown, answerElement, {
+        onUpdate: () => this._scrollToBottom(),
+        // keep pinned to the bottom while typing
+        onDone: () => this._setDisplaying(false)
+      });
+      this._typewriters.set(answerElement, typewriter);
+      typewriter.update(message);
+      return;
+    }
+    // a finished answer: transform in one shot
+    if (this._renderedAnswers.get(answerElement) === message.answer) {
+      return; // already rendered
+    }
+    this._renderedAnswers.set(answerElement, message.answer);
+    this._transform(answerElement, message).then(() => {
+      last && this._scrollToBottom();
+    }).catch(error => {
+      this._renderedAnswers.delete(answerElement);
+      console.error(error);
+    });
+  }
+  async _transform(answerElement, {
+    answer,
+    sources
+  }) {
+    answerElement.innerHTML = await this._markdown.transform(answer, sources);
+  }
+
+  // whether the last answer is still being displayed (typed); reported as
+  // the `ongoing` view state, e.g. for the search box to disable submission
+  _setDisplaying(displaying) {
+    if (this._displaying === displaying) {
+      return;
+    }
+    this._displaying = displaying;
+    this._notifyUpdate && this._notifyUpdate({
+      ongoing: displaying
+    });
+  }
+
+  // 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;
+    };
+    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());
+  }
+}
+
+// TODO: can't we just use Controller?
+/**
+ * Types a streaming answer into an element: a progressive markdown renderer
+ * fed by data updates, advanced by a paced cursor on animation frames — the
+ * typewriting effect, without the full typewriter layout machinery.
+ */
+exports.default = MessagesLayout;
+class MessageTypewriter {
+  constructor(markdown, element, {
+    onUpdate,
+    onDone
+  } = {}) {
+    this._element = element;
+    this._onUpdate = onUpdate;
+    this._onDone = onDone;
+    // the element acts as a typewriter container: it starts as the caret ref
+    // (the cursor class moves into the content as it types), and the preset
+    // stamps the `done` class on finish, which hides the caret via CSS
+    element.classList.add(TYPEWRITER_CLASSNAME, (0, _utils.cursorClassName)(TYPEWRITER_CLASSNAME));
+    this._renderer = markdown.createRenderer({
+      cursorClass: (0, _utils.cursorClassName)(TYPEWRITER_CLASSNAME),
+      getSource: index => (this._sources || [])[index]
+    });
+    this._getNextCursor = (0, _commons.pacer)();
+    this._rendered = this._renderer.clear(element);
+    this._timestamp = undefined;
+    this._value = '';
+    this._sources = undefined;
+    this._dataDone = false;
+    this._doneAt = undefined;
+    this._requested = false;
+  }
+  get done() {
+    return this._rendered.done;
+  }
+  update({
+    answer = '',
+    finished,
+    sources
+  }) {
+    this._value = answer;
+    this._sources = sources;
+    this._dataDone = finished !== false;
+    this._requestFrame();
+  }
+  _requestFrame() {
+    if (this._requested || this._rendered.done) {
+      return;
+    }
+    this._requested = true;
+    (0, _commons.requestAnimationFrame)(timestamp => this._frame(timestamp));
+  }
+  _frame(timestamp) {
+    this._requested = false;
+    if (!this._element.isConnected) {
+      // the element is gone (re-render, thread switch); stop typing
+      this._onDone && this._onDone();
+      return;
+    }
+    const prev = this._rendered;
+    const prevTimestamp = this._timestamp !== undefined ? this._timestamp : timestamp;
+    if (this._dataDone && this._doneAt === undefined) {
+      this._doneAt = timestamp;
+    }
+    const cursor = this._getNextCursor(prev.cursor, this._doneAt, prevTimestamp, timestamp);
+    this._rendered = this._renderer.update(this._element, prev, {
+      value: this._value,
+      cursor,
+      timestamp,
+      done: this._dataDone
+    });
+    this._timestamp = timestamp;
+    this._onUpdate && this._onUpdate();
+    if (!this._rendered.done) {
+      this._requestFrame();
+    } else {
+      this._onDone && this._onDone();
+    }
+  }
+}