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

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

@@ -7,42 +7,47 @@ exports.default = void 0;
 var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("./collection.js"));
+var _templates = require("../templates.js");
 var _dom = require("../../util/dom.js");
-var _confirm = _interopRequireDefault(require("../../util/confirm.js"));
-var _prompt = _interopRequireDefault(require("../../util/prompt.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 = _constants.LAYOUT_TYPE.THREADS;
 const DEFAULT_CLASSNAME = 'miso-threads';
-
-// the thread template renders the <li> itself (it is the item, carrying the
-// item role and state), so the stock <li> wrapping is skipped
-function item(layout, state, value, index) {
-  const {
-    templates,
-    options
-  } = layout;
-  return templates[options.itemType](layout, state, value, {
-    index
-  });
+const DEFAULT_TEMPLATES = Object.freeze({
+  [_constants.STATUS.ERRONEOUS]: _templates.listError,
+  errorMessage
+});
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
+function errorMessage(layout, error) {
+  return (0, _templates.isSessionExpired)(error) ? _templates.SESSION_EXPIRED_MESSAGE : 'Your conversations could not be loaded.';
 }
 
 /**
- * The thread list of the chat history interface: a list of `thread` items.
- *
- * Selection comes with the data: the history workflow stamps
- * `selectedThreadId` into its value and the role mapping decorates each
- * thread record with a `selected` flag, so any selection change flows down
- * the regular data path and refreshes the view. The list renders
- * incrementally (append-only); in-place state changes on existing items
- * (selected, unread) are applied by `_syncSelection` after each render,
- * reading the fresh values off the item bindings — no item re-render needed.
+ * The thread list of the chat history interface: a shell that renders one
+ * <miso-thread-item> container element per thread item, incrementally —
+ * fresh items land at either end of the list: a newly created thread
+ * renders as a prepended item (the list is newest-first), while an older
+ * page fetched by the more flow (infinite scroll: the collection layout's
+ * stock trigger, viewable at the list's bottom, fires the `more` hub
+ * field) renders as appended items — told apart by which boundary the
+ * already-rendered records line up with. The content
+ * of an item is not rendered here: each <miso-thread-item> is assigned its item
+ * subworkflow (workflow._getThreadWorkflow, off the item binding) in the
+ * post-render sync pass, and the role elements inside (the title, and the
+ * context menu's rename/delete buttons) render through that workflow's own
+ * layouts — so a record change re-renders the affected item's roles alone.
  *
- * Each item carries a context menu (vertical dots) with thread actions,
- * each asking through a shared modal dialog util, then emitting a view event
- * for the history workflow to act on: `rename` (a prompt dialog pre-filled
- * with the current title) and `delete` (a confirm dialog).
+ * The shell keeps the list-level behaviors. Selection comes with the data:
+ * the history workflow stamps `selectedThreadId` into its value and
+ * decorates each thread record with a `selected` flag, so any selection
+ * change flows down the regular data path; in-place state changes on
+ * existing items (selected, unread, the thread identity of a settled
+ * placeholder) are applied by `_syncItems` after each render, reading the
+ * fresh values off the item bindings — no item re-render needed. Each item
+ * carries a context menu (vertical dots), but that is the thread workflow's
+ * too: its item-container layout inserts and toggles it — the shell only
+ * keeps menu clicks (by their item-menu data-roles) from selecting.
  */
 class ThreadsLayout extends _collection.default {
   static get type() {
@@ -51,6 +56,9 @@ class ThreadsLayout extends _collection.default {
   static get defaultClassName() {
     return DEFAULT_CLASSNAME;
   }
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
   constructor(_ref = {}) {
     let {
         className = DEFAULT_CLASSNAME,
@@ -59,37 +67,62 @@ class ThreadsLayout extends _collection.default {
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     super(Object.assign({
       className,
-      templates: Object.assign({
-        item
-      }, templates)
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
   }
-  initialize(view) {
-    super.initialize(view);
-    // clicking outside the list closes any open context menu
-    if (typeof document !== 'undefined') {
-      const onDocumentClick = event => {
-        const element = this._element;
-        if (element && !element.contains(event.target)) {
-          this._closeMenus();
-        }
-      };
-      document.addEventListener('click', onDocumentClick);
-      this._unsubscribes.push(() => document.removeEventListener('click', onDocumentClick));
+
+  // item identity: the thread id, or the local placeholder id standing in
+  // for it while a thread is being created — the workflow adopts the thread
+  // id at the settle, so the element and its workflow survive it
+  _getItemKey(thread) {
+    return thread.thread_id || thread.placeholder_id || thread;
+  }
+
+  // incremental renders cover a pure prepend (a created thread) or a pure
+  // append (an older page) — 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 list is newest-first, so incremental renders PREPEND the fresh items
-  // (the collection layout's stock incremental mode is append-only)
+  // the fresh items land at the head (a newly created thread — the list is
+  // newest-first) or at the tail (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) {
-      const values = this._getItems(state) || [];
-      const fresh = values.slice(0, values.length - rendered.value.length);
-      return fresh.length > 0 ? this.templates.items(this, state, fresh, {
-        offset: 0
-      }) : '';
+    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
+        })
+      };
     }
-    return this.templates.root(this, state);
+    const fresh = values.slice(0, count);
+    return {
+      position: 'afterbegin',
+      items: this.templates.items(this, state, fresh, {
+        offset: 0
+      })
+    };
   }
   _render(element, {
     state
@@ -102,7 +135,7 @@ class ThreadsLayout extends _collection.default {
     } = state;
     if (incremental) {
       if (html) {
-        this._getListElement(element).insertAdjacentHTML('afterbegin', html);
+        this._getListElement(element).insertAdjacentHTML(html.position, html.items);
       } else {
         notifyUpdate(false);
       }
@@ -112,12 +145,28 @@ class ThreadsLayout extends _collection.default {
   }
   _afterRender(element, state) {
     super._afterRender(element, state); // syncs bindings to the latest values
+    this._syncWorkflows(element);
     this._syncItems(element);
   }
 
-  // sync in-place item changes from the bound values onto the existing item
-  // elements: selection/unread state, and record changes that arrive without
-  // a re-render (rename, a placeholder thread resolving to its real record)
+  // assign each <miso-thread-item> its item subworkflow, off the item binding
+  _syncWorkflows(element) {
+    const workflow = this._view && this._view.workflow;
+    if (!workflow || typeof workflow._getThreadWorkflow !== 'function') {
+      return;
+    }
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (binding && item.isContainer) {
+        item.workflow = workflow._getThreadWorkflow(binding.value);
+      }
+    }
+  }
+
+  // sync in-place item state changes from the bound values onto the existing
+  // item elements: selection/unread state, and the thread identity of a
+  // placeholder that settled into its real record — the item contents render
+  // through the thread workflows, outside this layout's render cycle
   _syncItems(element) {
     for (const item of this._getItemElements(element)) {
       const binding = this._bindings.get(item);
@@ -129,38 +178,16 @@ class ThreadsLayout extends _collection.default {
       } = binding;
       (0, _dom.setOrRemoveAttribute)(item, 'data-selected', value.selected ? '' : undefined);
       (0, _dom.setOrRemoveAttribute)(item, 'data-unread', (0, _clientSdkWorkflow.isThreadUnread)(value) ? '' : undefined);
-      (0, _dom.setOrRemoveAttribute)(item, 'data-thread-id', (0, _clientSdkWorkflow.getThreadId)(value) || undefined);
-      const titleElement = item.querySelector(`.${this.className}__title`);
-      const title = value.title || 'Untitled';
-      if (titleElement && titleElement.textContent !== title) {
-        titleElement.textContent = title;
-      }
+      (0, _dom.setOrRemoveAttribute)(item, 'data-thread-id', value.thread_id || undefined);
     }
   }
 
   // a click on a thread item means selection — a navigation action, not a
   // content-engagement click: emit a select view event and skip click tracking
   _onClick(event) {
-    if (event.target.closest(`[data-role="thread-menu-button"]`)) {
-      this._toggleMenu(event.target.closest(`[data-role="item"]`));
-      return;
-    }
-    if (event.target.closest(`[data-role="thread-rename"]`)) {
-      this._closeMenus();
-      const binding = this._bindings.get(event.target.closest(`[data-role="item"]`));
-      binding && this._requestRename(binding);
-      return;
-    }
-    if (event.target.closest(`[data-role="thread-delete"]`)) {
-      this._closeMenus();
-      const binding = this._bindings.get(event.target.closest(`[data-role="item"]`));
-      binding && this._requestDelete(binding);
-      return;
-    }
-    if (event.target.closest(`[data-role="thread-menu"]`)) {
-      return; // other clicks inside the menu don't select
+    if (event.target.closest(`[data-role="item-menu-button"], [data-role="item-menu"]`)) {
+      return; // the item's own context menu, owned by its container layout
     }
-    this._closeMenus();
     const element = event.target.closest(`[data-role="item"]`);
     if (!element) {
       return;
@@ -182,76 +209,5 @@ class ThreadsLayout extends _collection.default {
       domEvent: event
     });
   }
-
-  // context menu //
-  _toggleMenu(item) {
-    const menu = item && item.querySelector(`[data-role="thread-menu"]`);
-    if (!menu) {
-      return;
-    }
-    const open = menu.hidden;
-    this._closeMenus();
-    menu.hidden = !open;
-  }
-  _closeMenus() {
-    const element = this._element;
-    if (!element) {
-      return;
-    }
-    for (const menu of element.querySelectorAll(`[data-role="thread-menu"]:not([hidden])`)) {
-      menu.hidden = true;
-    }
-  }
-
-  // rename //
-  async _requestRename(binding) {
-    const {
-      value,
-      element
-    } = binding;
-    const title = await (0, _prompt.default)({
-      title: 'Rename thread',
-      value: value.title || '',
-      placeholder: 'Thread name',
-      confirmText: 'Rename'
-    });
-    if (!title || title === value.title) {
-      return; // cancelled, cleared, or unchanged
-    }
-    const {
-      session
-    } = this._view._state;
-    this._view._emit('rename', {
-      session,
-      value,
-      element,
-      title
-    });
-  }
-
-  // delete //
-  async _requestDelete(binding) {
-    const {
-      value,
-      element
-    } = binding;
-    const confirmed = await (0, _confirm.default)({
-      title: 'Delete thread',
-      message: `Are you sure you want to delete "${value.title || 'this thread'}"? This cannot be undone.`,
-      confirmText: 'Delete',
-      danger: true
-    });
-    if (!confirmed) {
-      return;
-    }
-    const {
-      session
-    } = this._view._state;
-    this._view._emit('delete', {
-      session,
-      value,
-      element
-    });
-  }
 }
 exports.default = ThreadsLayout;

package/dist/cjs/layout/templates.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SESSION_EXPIRED_MESSAGE = void 0;
 exports.affiliation = affiliation;
 exports.affiliationInfoBlock = affiliationInfoBlock;
 exports.article = article;
@@ -22,16 +23,20 @@ exports.image = image;
 exports.imageBlock = imageBlock;
 exports.imageInfoBlock = imageInfoBlock;
 exports.indexBlock = indexBlock;
+exports.isSessionExpired = isSessionExpired;
+exports.listError = listError;
 exports.message = message;
-exports.messageAnswerBlock = messageAnswerBlock;
-exports.messageAuthor = messageAuthor;
-exports.messageQuestionBlock = messageQuestionBlock;
+exports.messageBody = messageBody;
+exports.messageErrorBlock = messageErrorBlock;
+exports.messageErrorMessage = messageErrorMessage;
+exports.messageSourcesBlock = messageSourcesBlock;
 exports.priceBlock = priceBlock;
 exports.product = product;
 exports.productInfoBlock = productInfoBlock;
 exports.question = question;
 exports.requiresImplementation = requiresImplementation;
 exports.thread = thread;
+exports.threadBody = threadBody;
 exports.threadMenuBlock = threadMenuBlock;
 exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
@@ -64,67 +69,122 @@ function question(layout, state, data) {
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 
-// the <li> itself is the item: it carries the item role, the thread identity
-// and the item state — a thread item is not a link, so no anchor body (and
-// the wrapper div around it) is needed
+/**
+ * A thread item is a <miso-thread-item> container element hosting the thread
+ * item subworkflow — the threads layout is a shell: it assigns the workflow
+ * (and syncs the item-level attributes) in its post-render pass, and the
+ * content renders through the thread workflow's own layouts: the title role
+ * element in the body, plus the context menu (with the
+ * rename/subscription/delete role elements) inserted as chrome by the workflow's item-container layout. The
+ * item state renders as attributes right in the template (and stays in
+ * sync thereafter): the thread identity, the selection, and the unread
+ * mark.
+ */
 function thread(layout, state, data) {
   const {
     className,
     templates
   } = layout;
-  const threadId = (0, _clientSdkWorkflow.getThreadId)(data);
+  const threadId = data.thread_id;
   const threadIdAttr = threadId ? ` data-thread-id="${threadId}"` : '';
   const unreadAttr = (0, _clientSdkWorkflow.isThreadUnread)(data) ? ' data-unread' : '';
   const selectedAttr = data.selected ? ' data-selected' : '';
-  const title = (0, _commons.escapeHtml)(data.title || 'Untitled');
-  return `<li class="${className}__item" data-role="item"${threadIdAttr}${unreadAttr}${selectedAttr}><div class="${className}__title">${title}</div>${(templates.threadMenuBlock || threadMenuBlock)(layout, data)}</li>`;
+  return [`<miso-thread-item class="${className}__item-body" data-role="item"${threadIdAttr}${unreadAttr}${selectedAttr}>`, (templates.threadBody || threadBody)(layout, data), `</miso-thread-item>`].join('');
+}
+function threadBody(layout, data) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<miso-title class="${className}__title"></miso-title>` + (templates.threadMenuBlock || threadMenuBlock)(layout, data);
 }
+
+// the item-menu data-roles are the contract with the thread workflow's
+// item-container layout, which drives the menu's open/close behavior; the
+// menu items are the thread workflow's own controls, rendered by the
+// generic button layout with a prompt (rename) or a confirm (delete) dialog,
+// and by the checkbox layout (the subscription toggle)
 function threadMenuBlock({
   className
 }) {
-  return `<button type="button" class="${className}__menu-button" data-role="thread-menu-button" aria-label="Thread actions" aria-haspopup="menu">${(0, _svgs.getIcon)('dots-vertical')}</button>` + `<div class="${className}__menu" data-role="thread-menu" role="menu" hidden>` + `<button type="button" class="${className}__menu-item" data-role="thread-rename" role="menuitem">Rename</button>` + `<button type="button" class="${className}__menu-item ${className}__menu-item--danger" data-role="thread-delete" role="menuitem">Delete</button>` + `</div>`;
+  return `<button type="button" class="${className}__menu-button" data-role="item-menu-button" aria-label="Thread actions" aria-haspopup="menu">${(0, _svgs.getIcon)('dots-vertical')}</button>` + `<div class="${className}__menu" data-role="item-menu" role="menu" hidden>` + `<miso-rename class="${className}__menu-item"></miso-rename>` + `<miso-subscription class="${className}__menu-item"></miso-subscription>` + `<miso-delete class="${className}__menu-item ${className}__menu-item--danger"></miso-delete>` + `</div>`;
 }
+
+/**
+ * A message item is a <miso-message-item> container element hosting the message
+ * item subworkflow — the messages layout is a shell: it assigns the workflow
+ * (and the item-level attributes) in its post-render sync pass, and the role
+ * elements inside render the actual content through the message workflow's
+ * own layouts. The item state renders as an attribute right in the template
+ * (and stays in sync thereafter): the live mark, for a message generated in
+ * this session.
+ */
 function message(layout, state, data) {
   const {
     className,
     templates
   } = layout;
-  return [`<div class="${className}__item-body" data-role="item">`, (templates.messageQuestionBlock || messageQuestionBlock)(layout, data), (templates.messageAnswerBlock || messageAnswerBlock)(layout, data), `</div>`].join('');
+  const liveAttr = data.live ? ' data-live' : '';
+  // miso-circled-citation-index covers both the citation links in the answer
+  // and the indexes on the source cards, as the hybrid-search UI scopes it
+  return [`<miso-message-item class="${className}__item-body miso-circled-citation-index" data-role="item"${liveAttr}>`, (templates.messageBody || messageBody)(layout, data), `</miso-message-item>`].join('');
 }
-function messageQuestionBlock({
-  className
-}, message) {
+
+// the regular content is packed together, so the erroneous presentation
+// swaps it out wholesale for the error notice (the content wrapper hides by
+// a class rule off the item's status — visible-when suits the notice, but
+// not a wrapper: it forces `display: block !important` and only negates in
+// combination with positive terms)
+function messageBody(layout) {
   const {
-    question
-  } = message;
-  const generatedBy = (0, _clientSdkWorkflow.getGeneratedBy)(message);
-  const author = messageAuthor(message);
-  // always rendered so it can be filled in place when the question text
-  // arrives later (the list renders incrementally); the authorship attrs
-  // drive the author label and the bubble color
-  const attrs = `${author ? ` data-author="${(0, _commons.escapeHtml)(author)}"` : ''}${generatedBy ? ` data-generated-by="${(0, _commons.escapeHtml)(generatedBy)}"` : ''}`;
-  return `<div class="${className}__question" data-role="question"${attrs}${question ? '' : ' hidden'}>${question ? (0, _commons.escapeHtml)(question) : ''}</div>`;
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__content">` + `<miso-question class="${className}__question" hidden></miso-question>` + `<miso-answer class="${className}__answer"></miso-answer>` + `<miso-feedback class="${className}__feedback"></miso-feedback>` + (templates.messageSourcesBlock || messageSourcesBlock)(layout) + `</div>` + (templates.messageErrorBlock || messageErrorBlock)(layout);
 }
 
-/**
- * The author label of a message's question bubble: labeled only when the
- * question was written by the answer-updates monitor — the user's own
- * questions carry no label.
- */
-function messageAuthor(message) {
-  return (0, _clientSdkWorkflow.getGeneratedBy)(message) === 'answer_update_monitor' ? 'Written by Miso' : undefined;
+// the sources with their heading, as the hybrid-search UI presents them —
+// shown once the item carries content (visible-when nonempty), so no
+// orphan heading sits over a message still loading
+function messageSourcesBlock({
+  className
+}) {
+  return `<div class="${className}__sources-container" visible-when="nonempty">` + `<h3 class="${className}__sources-phrase">Sources</h3>` + `<miso-sources class="${className}__sources"></miso-sources>` + `</div>`;
 }
-function messageAnswerBlock({
+
+// shown by the item's own status (visible-when): a message whose content
+// fetch, or (a live one's) posting or answer polling, failed for good
+// presents this in place of its content — the text through the item's own
+// error role element, off the record's error mark (messageErrorMessage)
+function messageErrorBlock({
   className
-}, {
-  answer
 }) {
-  // the content is left blank here: the layout fills it in a second pass
-  // (markdown -> HTML); a spinner shows while the answer body is still
-  // being fetched from the answers API
-  const content = answer === undefined ? `<div class="miso-loading" aria-label="Loading" data-role="loading"></div>` : '';
-  return `<div class="${className}__answer miso-markdown miso-circled-citation-index" data-role="answer">${content}</div>`;
+  return `<div class="${className}__error" visible-when="erroneous"><miso-error></miso-error></div>`;
+}
+
+// the error layout's message template for a message item (seeded in the
+// 'conversation' layout defaults): an expired session reads apart from other
+// failures
+function messageErrorMessage(layout, error) {
+  return isSessionExpired(error) ? SESSION_EXPIRED_MESSAGE : 'Something went wrong with this message.';
+}
+
+// the list-level error notice of the chat history interface, in place of
+// the list when its load failed (the thread list, or the thread on display);
+// the text comes from the layout's errorMessage template, given the failure
+function listError(layout, state) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__list-error" data-role="error">${templates.errorMessage(layout, state.error)}</div>`;
+}
+
+// an expired session (e.g. an expired JWT), to be told apart from other failures
+function isSessionExpired(error) {
+  return !!error && error.status === 401;
 }
+const SESSION_EXPIRED_MESSAGE = exports.SESSION_EXPIRED_MESSAGE = 'Your session has expired. Please sign in again.';
 function article(layout, state, data, meta) {
   const {
     templates

package/dist/cjs/layout/text/question.js

@@ -0,0 +1,71 @@
+"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 _dom = require("../../util/dom.js");
+var _text = _interopRequireDefault(require("./text.js"));
+const _excluded = ["className", "tag", "author", "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 = _constants.LAYOUT_TYPE.QUESTION;
+const DEFAULT_CLASSNAME = 'miso-question';
+
+// the author label: only a question written by the answer-updates monitor is
+// labeled — the user's own questions carry none
+function defaultAuthor(message) {
+  return (0, _clientSdkWorkflow.isUpdateMessage)(message) ? 'Written by Miso' : undefined;
+}
+function content(layout, {
+  value
+}) {
+  const question = value && value.question;
+  return question ? (0, _commons.escapeHtml)(question) : '';
+}
+
+/**
+ * The question of a message: a text layout taking the whole message record —
+ * the text is the `question` field, and the authorship is stamped as data
+ * attributes on the host element (`data-author` drives the CSS label badge,
+ * `data-generated-by` the bubble color), re-applied on every render, since
+ * the metadata arrives with the answers response, after the stub render. The
+ * host element hides while there is no question text to show. The author
+ * label is configurable via the `author` option (message -> label text).
+ */
+class QuestionLayout extends _text.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME,
+        tag = 'div',
+        author = defaultAuthor,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      tag,
+      author,
+      templates: Object.assign({
+        content
+      }, templates)
+    }, options));
+  }
+  _afterRender(element, state) {
+    super._afterRender(element, state);
+    const message = state.value || {};
+    element.hidden = !message.question;
+    (0, _dom.setOrRemoveAttribute)(element, 'data-author', this.options.author(message));
+    (0, _dom.setOrRemoveAttribute)(element, 'data-generated-by', message.metadata && message.metadata.miso_generated_by || undefined);
+  }
+}
+exports.default = QuestionLayout;

package/dist/cjs/layout/text/typewriter/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../../../constants.js");
+var _dom = require("../../../util/dom.js");
 var _progressive = _interopRequireDefault(require("../../progressive.js"));
 var _plaintext = _interopRequireDefault(require("./plaintext.js"));
 var _utils = require("./utils.js");
@@ -160,6 +161,18 @@ class TypewriterLayout extends _progressive.default {
       // new typing streak
       result = this._renderer.clear(container, rendered);
     } else {
+      result = rendered;
+    }
+    if (this.options.instant && !result.cursor) {
+      // instant mode: while nothing is typed yet, the cursor starts at the max
+      // available position (the renderer clamps it to the safe right bound) —
+      // content that arrived complete (e.g. a loaded conversation message)
+      // renders in one shot; ongoing content shows what is there so far at
+      // once, and only the part streaming in after that types out
+      result = this._renderer.update(container, result, Object.assign({}, state, {
+        cursor: Infinity
+      }));
+    } else if (!newStreak) {
       const cursor = this._getNextCursor(rendered.cursor, state.doneAt, rendered.timestamp, state.timestamp);
       result = this._renderer.update(container, rendered, Object.assign({}, state, {
         cursor
@@ -228,7 +241,7 @@ class TypewriterLayout extends _progressive.default {
             url: href,
             text: innerText ? innerText.trim() : '',
             className: className || '',
-            attributes: dumpElementAttributes(anchorElement)
+            attributes: (0, _dom.dumpElementAttributes)(anchorElement)
           }));
         }
       }
@@ -236,23 +249,4 @@ class TypewriterLayout extends _progressive.default {
     }
   }
 }
-exports.default = TypewriterLayout;
-function dumpElementAttributes(element) {
-  const {
-    attributes
-  } = element;
-  const attrs = {};
-  for (const {
-    name,
-    value
-  } of attributes) {
-    if (name.startsWith('data-')) {
-      attrs[name] = value;
-    }
-  }
-  try {
-    return JSON.stringify(attrs);
-  } catch (e) {
-    return '{}';
-  }
-}
+exports.default = TypewriterLayout;