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

package/src/layout/list/messages.js

@@ -1,29 +1,64 @@
-import { Resolution, pacer, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { hasAnswer, getGeneratedBy } from '@miso.ai/client-sdk-workflow';
-import { LAYOUT_TYPE } from '../../constants.js';
-import CollectionLayout from './collection.js';
-import { cursorClassName } from '../text/typewriter/utils.js';
-import { messageAuthor } from '../templates.js';
+import { STATUS, LAYOUT_TYPE } from '../../constants.js';
+import CollectionLayout, { hasStatusTemplate } from './collection.js';
+import { listError, isSessionExpired, SESSION_EXPIRED_MESSAGE } from '../templates.js';
 import { setOrRemoveAttribute } from '../../util/dom.js';
 
 const TYPE = LAYOUT_TYPE.MESSAGES;
 const DEFAULT_CLASSNAME = 'miso-messages';
-const TYPEWRITER_CLASSNAME = 'miso-typewriter';
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  [STATUS.ERRONEOUS]: listError,
+  errorMessage,
+});
+
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.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)}${hasStatusTemplate(status) ? templates[status](layout, state) : ''}${templates.loading(layout, state)}</div>`;
+}
+
+function errorMessage(layout, error) {
+  return isSessionExpired(error) ? 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.
  *
- * - 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
+ * 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 {
 
@@ -35,162 +70,149 @@ export default class MessagesLayout extends CollectionLayout {
     return DEFAULT_CLASSNAME;
   }
 
-  constructor({ className = DEFAULT_CLASSNAME, ...options } = {}) {
-    super({ className, ...options });
-    this._renderedAnswers = new WeakMap(); // answer element -> rendered markdown
-    this._typewriters = new WeakMap(); // answer element -> MessageTypewriter
-    this._readiness = new 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();
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
   }
 
-  // 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);
-    }
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({ className, templates: { ...DEFAULT_TEMPLATES, ...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;
   }
 
-  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);
   }
 
-  _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
+  // 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;
     }
-    if (!state.incremental || state.html) {
-      // a fresh render (thread load) or appended items (posted follow-up):
-      // jump to the bottom
-      this._scrollToBottom({ force: true });
+    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 }),
+      };
     }
-    this._syncMessages(element).catch(error => console.error(error));
+    const fresh = values.slice(0, count);
+    return {
+      position: 'afterbegin',
+      items: this.templates.items(this, state, fresh, { offset: 0 }),
+    };
   }
 
-  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);
+  _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;
     }
-    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 (!hasAnswer(message)) {
-      return true; // waiting for the answer body
+  _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 });
     }
-    const answerElement = item.querySelector('[data-role="answer"]');
-    const typewriter = answerElement && this._typewriters.get(answerElement);
-    return typewriter ? !typewriter.done : message.finished === false;
+    this._watchGrowth(this._getListElement(element) || element);
+    this._syncWorkflows(element);
+    this._syncItems(element);
+    this._syncOngoing(state);
   }
 
-  _syncQuestion(item, message) {
-    const questionElement = item.querySelector('[data-role="question"]');
-    if (!questionElement) {
-      return;
-    }
-    // the authorship arrives with the answers response, after the stub render
-    setOrRemoveAttribute(questionElement, 'data-author', messageAuthor(message));
-    setOrRemoveAttribute(questionElement, 'data-generated-by', getGeneratedBy(message));
-    const { question } = message;
-    if (!question || questionElement.textContent === question) {
-      return;
-    }
-    questionElement.textContent = question;
-    questionElement.hidden = false;
+  _unrender() {
+    super._unrender();
+    this._dropAnchor();
   }
 
-  _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 (!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);
+  // 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;
     }
-    // a finished answer: transform in one shot
-    if (this._renderedAnswers.get(answerElement) === message.answer) {
-      return; // already rendered
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (binding && item.isContainer) {
+        item.workflow = workflow._getMessageWorkflow(binding.value);
+      }
     }
-    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);
+  // 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 && setOrRemoveAttribute(item, 'data-live', binding.value.live ? '' : undefined);
+    }
   }
 
-  // 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._notifyUpdate && this._notifyUpdate({ ongoing: displaying });
+    this._ongoing = ongoing;
+    this._notifyUpdate && this._notifyUpdate({ ongoing });
   }
 
   // scrolling //
@@ -230,6 +252,14 @@ export default class MessagesLayout extends CollectionLayout {
     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;
@@ -241,78 +271,78 @@ export default class MessagesLayout extends CollectionLayout {
     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.
- */
-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, cursorClassName(TYPEWRITER_CLASSNAME));
-    this._renderer = markdown.createRenderer({
-      cursorClass: cursorClassName(TYPEWRITER_CLASSNAME),
-      getSource: index => (this._sources || [])[index],
-    });
-    this._getNextCursor = 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;
-    raf(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;
+  }
+
 }