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

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

@@ -4,34 +4,71 @@ 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 _collection = _interopRequireWildcard(require("./collection.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 }; }
+const _excluded = ["className", "templates"];
+var cache;
+function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var r, c, a = Object.defineProperty, n = { __proto__: null, default: e }; if (Object(e) !== e) return n; if (cache || "function" != typeof WeakMap || (cache = new WeakMap()), cache) { if (cache.has(e)) return cache.get(e); cache.set(e, n); } for (c in e) "default" !== c && {}.hasOwnProperty.call(e, c) && ((r = a && Object.getOwnPropertyDescriptor(e, c)) && (r.get || r.set) ? a(n, c, r) : n[c] = e[c]); return n; }
 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';
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  [_constants.STATUS.ERRONEOUS]: _templates.listError,
+  errorMessage
+});
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
+
+// 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)}${(0, _collection.hasStatusTemplate)(status) ? templates[status](layout, state) : ''}${templates.loading(layout, state)}</div>`;
+}
+function errorMessage(layout, error) {
+  return (0, _templates.isSessionExpired)(error) ? _templates.SESSION_EXPIRED_MESSAGE : 'This conversation could not be loaded.';
+}
 
 /**
- * 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`):
+ * 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.
  *
- * - 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
+ * 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.
  */
 class MessagesLayout extends _collection.default {
   static get type() {
@@ -40,174 +77,171 @@ class MessagesLayout extends _collection.default {
   static get defaultClassName() {
     return DEFAULT_CLASSNAME;
   }
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
   constructor(_ref = {}) {
     let {
-        className = DEFAULT_CLASSNAME
+        className = DEFAULT_CLASSNAME,
+        templates
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     super(Object.assign({
-      className
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, 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();
+    this._anchor = undefined; // the scroll anchor while prepended content settles
+    this._ongoing = undefined;
   }
 
-  // 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;
+  // 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, so the typewriter can report the
-    // `ongoing` state outside the render cycle
+    // 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 to the latest values
+    super._afterRender(element, state); // syncs bindings and (re)arms the trigger
     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
+      // a fresh render (thread load): jump to the bottom
+      this._dropAnchor();
       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
+    } else if (state.html && state.html.position === 'beforeend') {
+      // appended items (posted follow-up): jump to the bottom
+      this._scrollToBottom({
+        force: true
       });
-      if (last) {
-        displaying = this._isDisplaying(item, message);
-      }
     }
-    this._setDisplaying(displaying);
+    this._watchGrowth(this._getListElement(element) || element);
+    this._syncWorkflows(element);
+    this._syncItems(element);
+    this._syncOngoing(state);
   }
-
-  // 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;
+  _unrender() {
+    super._unrender();
+    this._dropAnchor();
   }
-  _syncQuestion(item, message) {
-    const questionElement = item.querySelector('[data-role="question"]');
-    if (!questionElement) {
+
+  // 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;
     }
-    // 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;
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (binding && item.isContainer) {
+        item.workflow = workflow._getMessageWorkflow(binding.value);
+      }
     }
-    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
+
+  // sync in-place item state changes from the bound values onto the existing
+  // item elements: the live mark — the item contents render through the
+  // message workflows, outside this layout's render cycle
+  _syncItems(element) {
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      binding && (0, _dom.setOrRemoveAttribute)(item, 'data-live', binding.value.live ? '' : undefined);
     }
-    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) {
+  // 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._displaying = displaying;
+    this._ongoing = ongoing;
     this._notifyUpdate && this._notifyUpdate({
-      ongoing: displaying
+      ongoing
     });
   }
 
@@ -250,6 +284,14 @@ class MessagesLayout extends _collection.default {
     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
@@ -262,85 +304,80 @@ class MessagesLayout extends _collection.default {
     };
     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;
+  // 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());
   }
-  get done() {
-    return this._rendered.done;
+  _onContentGrowth() {
+    if (this._pinned) {
+      this._scrollToBottom();
+    } else {
+      this._restoreAnchor();
+    }
   }
-  update({
-    answer = '',
-    finished,
-    sources
-  }) {
-    this._value = answer;
-    this._sources = sources;
-    this._dataDone = finished !== false;
-    this._requestFrame();
+
+  // 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();
   }
-  _requestFrame() {
-    if (this._requested || this._rendered.done) {
-      return;
-    }
-    this._requested = true;
-    (0, _commons.requestAnimationFrame)(timestamp => this._frame(timestamp));
+  _setAnchor() {
+    const scrollable = this._getScrollable();
+    const element = this._getItemElements(this._element)[0];
+    this._anchor = scrollable && element ? {
+      element,
+      scrollable,
+      top: this._relativeTop(element, scrollable)
+    } : undefined;
   }
-  _frame(timestamp) {
-    this._requested = false;
-    if (!this._element.isConnected) {
-      // the element is gone (re-render, thread switch); stop typing
-      this._onDone && this._onDone();
+  _restoreAnchor() {
+    const anchor = this._anchor;
+    if (!anchor) {
       return;
     }
-    const prev = this._rendered;
-    const prevTimestamp = this._timestamp !== undefined ? this._timestamp : timestamp;
-    if (this._dataDone && this._doneAt === undefined) {
-      this._doneAt = timestamp;
+    const {
+      element,
+      scrollable,
+      top
+    } = anchor;
+    if (!element.isConnected) {
+      this._anchor = undefined;
+      return;
     }
-    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();
+    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;
+  }
+}
+exports.default = MessagesLayout;