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

package/dist/cjs/defaults/ask/index.js

@@ -24,7 +24,8 @@ Object.keys(_controls).forEach(function (key) {
     }
   });
 });
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }
 const constants = exports.constants = Object.freeze(_constants);
 const phrases = exports.phrases = Object.freeze(_phrases);
 const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/defaults/ask/templates.js

@@ -12,7 +12,8 @@ var CONSTANTS = _interopRequireWildcard(require("./constants.js"));
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
 var _svgs = require("../../asset/svgs.js");
 var _templates = require("../common/templates.js");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }
 class Sections extends _templates.Sections {
   constructor() {
     super({

package/dist/cjs/defaults/hybrid-search/index.js

@@ -24,7 +24,8 @@ Object.keys(_controls).forEach(function (key) {
     }
   });
 });
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }
 const constants = exports.constants = Object.freeze(_constants);
 const phrases = exports.phrases = Object.freeze(_phrases);
 const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/defaults/hybrid-search/templates.js

@@ -10,7 +10,8 @@ var _commons = require("@miso.ai/commons");
 var CONSTANTS = _interopRequireWildcard(require("./constants.js"));
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
 var _templates = require("../common/templates.js");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }
 class Sections extends _templates.Sections {
   constructor() {
     super({

package/dist/cjs/defaults/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.hybridSearch = exports.ask = void 0;
 var _ask = _interopRequireWildcard(require("./ask/index.js"));
 var _hybridSearch = _interopRequireWildcard(require("./hybrid-search/index.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }
 const ask = exports.ask = Object.freeze(_ask);
 const hybridSearch = exports.hybridSearch = Object.freeze(_hybridSearch);

package/dist/cjs/defaults.js

@@ -9,7 +9,7 @@ var _constants = require("./constants.js");
 var _templates = require("./layout/templates.js");
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, e) { if ("object" != typeof t || !t) return t; var r; if ("undefined" != typeof Symbol && void 0 !== (r = t[Symbol.toPrimitive])) { var i = r.call(t, e || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === e ? String : Number)(t); }
 /**
  * Default layout options of each workflow, keyed by workflow name. The UI
  * plugin seeds the workflow plugin's defaults store with these values at
@@ -203,7 +203,9 @@ const defaultLayouts = exports.defaultLayouts = Object.freeze({
   // query role (a message has no query flow of its own; the query entry
   // below is the panel's composer), with the question layout (text plus
   // authorship attributes, off the whole record), the answer typewriter
-  // with `instant: true` (an already-finished answer renders in one shot),
+  // with `instant: true` (an answer starts at what is already available: a
+  // finished one renders in one shot, an ongoing one types out only the rest),
+  // the error notice worded for a message (messageErrorMessage),
   // and the sources as the compact horizontal cards of the hybrid-search
   // UI. logo: false turns the per-message banner off; the panel never
   // triggers the auto logo anyway, having no main-role component
@@ -215,6 +217,11 @@ const defaultLayouts = exports.defaultLayouts = Object.freeze({
     [_constants.ROLE.ANSWER]: [_constants.LAYOUT_TYPE.TYPEWRITER, {
       instant: true
     }],
+    [_constants.ROLE.ERROR]: [_constants.LAYOUT_TYPE.ERROR, {
+      templates: {
+        message: _templates.messageErrorMessage
+      }
+    }],
     [_constants.ROLE.SOURCES]: [_constants.LAYOUT_TYPE.HORIZONTAL, {
       incremental: true,
       itemType: 'article',

package/dist/cjs/element/index.js

@@ -30,4 +30,5 @@ Object.keys(_index5).forEach(function (key) {
     }
   });
 });
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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; }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.hasStatusTemplate = hasStatusTemplate;
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.js");
@@ -24,7 +25,13 @@ function root(layout, state) {
   } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${hasStatusTemplate(status) ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+}
+
+// the statuses with a content template of their own: the list at ready, the
+// error notice at erroneous
+function hasStatusTemplate(status) {
+  return status === _constants.STATUS.READY || status === _constants.STATUS.ERRONEOUS;
 }
 function ready(layout, state) {
   const {
@@ -103,6 +110,9 @@ const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [_constants.STATUS.READY]: ready,
   empty: () => ``,
+  // no notice by default: the ask/search UIs present errors in a section of
+  // their own (<miso-error>); list layouts that stand alone supply one
+  [_constants.STATUS.ERRONEOUS]: () => ``,
   body,
   list,
   ordered: false,

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

@@ -5,12 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _constants = require("../../constants.js");
-var _collection = _interopRequireDefault(require("./collection.js"));
+var _collection = _interopRequireWildcard(require("./collection.js"));
+var _templates = require("../templates.js");
+var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 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
@@ -26,7 +35,10 @@ function root(layout, state) {
   } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${templates.trigger(layout, state)}${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.loading(layout, state)}</div>`;
+  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.';
 }
 
 /**
@@ -65,6 +77,9 @@ class MessagesLayout extends _collection.default {
   static get defaultClassName() {
     return DEFAULT_CLASSNAME;
   }
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
   constructor(_ref = {}) {
     let {
         className = DEFAULT_CLASSNAME,
@@ -73,9 +88,7 @@ class MessagesLayout extends _collection.default {
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     super(Object.assign({
       className,
-      templates: Object.assign({
-        root
-      }, templates)
+      templates: Object.assign({}, 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
@@ -183,6 +196,7 @@ class MessagesLayout extends _collection.default {
     }
     this._watchGrowth(this._getListElement(element) || element);
     this._syncWorkflows(element);
+    this._syncItems(element);
     this._syncOngoing(state);
   }
   _unrender() {
@@ -204,6 +218,16 @@ class MessagesLayout extends _collection.default {
     }
   }
 
+  // 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);
+    }
+  }
+
   // 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

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

@@ -7,12 +7,21 @@ 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");
-const _excluded = ["className"];
+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';
+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 shell that renders one
@@ -47,13 +56,18 @@ class ThreadsLayout 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));
   }
 

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,9 +23,12 @@ exports.image = image;
 exports.imageBlock = imageBlock;
 exports.imageInfoBlock = imageInfoBlock;
 exports.indexBlock = indexBlock;
+exports.isSessionExpired = isSessionExpired;
+exports.listError = listError;
 exports.message = message;
 exports.messageBody = messageBody;
 exports.messageErrorBlock = messageErrorBlock;
+exports.messageErrorMessage = messageErrorMessage;
 exports.messageSourcesBlock = messageSourcesBlock;
 exports.priceBlock = priceBlock;
 exports.product = product;
@@ -111,16 +115,19 @@ function threadMenuBlock({
  * 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.
+ * 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;
+  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">`, (templates.messageBody || messageBody)(layout, data), `</miso-message-item>`].join('');
+  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('');
 }
 
 // the regular content is packed together, so the erroneous presentation
@@ -146,12 +153,38 @@ function messageSourcesBlock({
 }
 
 // shown by the item's own status (visible-when): a message whose content
-// fetch failed for good presents this in place of its 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
 }) {
-  return `<div class="${className}__error" visible-when="erroneous">This message could not be loaded.</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/typewriter/index.js

@@ -163,11 +163,12 @@ class TypewriterLayout extends _progressive.default {
     } else {
       result = rendered;
     }
-    if (this.options.instant && state.done && !result.cursor) {
-      // instant mode: content that finishes before any of it was typed —
-      // arrived complete (e.g. a loaded conversation message), or completed
-      // while the cursor was still at the start — renders in one shot; only
-      // content streaming in as it is generated types out
+    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
       }));

package/dist/cjs/plugin.js

@@ -17,11 +17,13 @@ var traits = _interopRequireWildcard(require("./trait/index.js"));
 var _styles = require("./styles.js");
 var _confirm = _interopRequireDefault(require("./util/confirm.js"));
 var _prompt = _interopRequireDefault(require("./util/prompt.js"));
+var _notify = _interopRequireDefault(require("./util/notify.js"));
 var _misoContainer = _interopRequireDefault(require("./element/container/miso-container.js"));
 var _misoContext = _interopRequireDefault(require("./element/context/miso-context.js"));
 var _misoCombo = _interopRequireDefault(require("./element/combo/miso-combo.js"));
 const _excluded = ["containers", "roles", "contexts", "combos"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 _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 PLUGIN_ID = 'std:ui';
@@ -54,7 +56,8 @@ class UiPlugin extends _commons.Component {
       defaults,
       traits,
       confirm: _confirm.default,
-      prompt: _prompt.default
+      prompt: _prompt.default,
+      notify: _notify.default
     };
     (0, _commons.delegateGetters)(ui, this, ['layouts', 'ready']);
     (0, _commons.defineValues)(this, {
@@ -160,7 +163,7 @@ function createUiPluginContext(plugin, ui, MisoClient) {
 }
 
 // workflow accessors delegated to client.workflows for backward compatibility
-const WORKFLOW_ACCESSORS = ['search', 'hybridSearch', 'asks', 'ask', 'explores', 'explore', 'recommendations', 'recommendation', 'sources'];
+const WORKFLOW_ACCESSORS = ['search', 'hybridSearch', 'asks', 'ask', 'explores', 'explore', 'recommendations', 'recommendation', 'history', 'conversation', 'sources', 'on'];
 
 /**
  * The UI interface for the client.

package/dist/cjs/util/notify.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = notify;
+var _commons = require("@miso.ai/commons");
+const DEFAULT_CLASSNAME = 'miso-notice';
+const DEFAULT_DURATION = 5000;
+
+/**
+ * Show a transient notice (a toast) in a corner of the page, dismissed
+ * after `duration` milliseconds (0 keeps it until closed), or by its close
+ * button. A notice with the very text of one on display is not stacked:
+ * the displayed one stays, its timer starting over. Returns a function
+ * that dismisses the notice. Exposed as `MisoClient.ui.notify()`.
+ */
+function notify({
+  message,
+  type = 'info',
+  // 'info' | 'error'
+  duration = DEFAULT_DURATION,
+  className = DEFAULT_CLASSNAME
+} = {}) {
+  if (!message) {
+    return () => {};
+  }
+  const container = getContainer(className);
+  let notice = [...container.children].find(element => element._misoNotice && element._misoNotice.key === `${type}:${message}`);
+  if (!notice) {
+    notice = createNotice(className, type, message);
+    container.appendChild(notice);
+  }
+  notice._misoNotice.schedule(duration);
+  return notice._misoNotice.dismiss;
+}
+
+// the stack hosting the notices, created on demand and removed when empty
+function getContainer(className) {
+  let container = document.querySelector(`.${className}-stack`);
+  if (!container) {
+    container = document.createElement('div');
+    container.className = `${className}-stack`;
+    container.setAttribute('aria-live', 'polite');
+    document.body.appendChild(container);
+  }
+  return container;
+}
+function createNotice(className, type, message) {
+  const notice = document.createElement('div');
+  notice.className = `${className} ${className}--${type}`;
+  notice.setAttribute('role', type === 'error' ? 'alert' : 'status');
+  notice.innerHTML = [`<div class="${className}__message">${(0, _commons.escapeHtml)(message)}</div>`, `<button type="button" class="${className}__close-button" data-role="close" aria-label="Dismiss">&times;</button>`].join('');
+  let timer;
+  const dismiss = () => {
+    clearTimeout(timer);
+    const container = notice.parentElement;
+    notice.remove();
+    container && container.children.length === 0 && container.remove();
+  };
+  const schedule = duration => {
+    clearTimeout(timer);
+    timer = duration > 0 ? setTimeout(dismiss, duration) : undefined;
+  };
+  notice.addEventListener('click', event => {
+    event.target.closest('[data-role="close"]') && dismiss();
+  });
+  notice._misoNotice = {
+    key: `${type}:${message}`,
+    dismiss,
+    schedule
+  };
+  return notice;
+}

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.14.0-beta.3';
+var _default = exports.default = '1.14.0-beta.4';

package/package.json

@@ -30,8 +30,8 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.14.0-beta.3",
-    "@miso.ai/client-sdk-workflow": "1.14.0-beta.3"
+    "@miso.ai/commons": "1.14.0-beta.4",
+    "@miso.ai/client-sdk-workflow": "1.14.0-beta.4"
   },
-  "version": "1.14.0-beta.3"
+  "version": "1.14.0-beta.4"
 }

package/src/CLAUDE.md

@@ -44,7 +44,8 @@ Web Components (`<miso-*>`). They contain **no rendering or data logic** — the
   - `<miso-ask>` — binds by `parent-question-id` attribute (absent = root ask), or `workflow="active"` to follow `asks.active`
   - `<miso-search>`, `<miso-hybrid-search>` — bind to `client.ui.search` / `.hybridSearch`
   - `<miso-explore>`, `<miso-recommendation>` — bind by `unit-id` attribute
-  - `<miso-history>`, `<miso-conversation>` — bind to `client.workflows.history` / `.conversation`, forming the chat history interface (thread list + conversation panel); their role elements are `<miso-threads>`, `<miso-new-thread>`, `<miso-messages>`, `<miso-title>`, `<miso-rename>`, `<miso-delete>` and `<miso-subscription>`. The new-thread button is its own component (`<miso-new-thread>`, role `new_thread`), *not* part of the thread list, so it renders regardless of the list state (loading, empty, erroneous); it uses the generic `button` layout — an icon and a label, both configurable (`icon`, `text`), emitting a `submit` view event when clicked — which History answers by clearing the selection and resetting the conversation panel to new-thread mode. The thread list uses the `threads` layout as a **shell**, like the conversation's `messages` layout: each `thread` item is a `<miso-thread-item>` container element (`data-role="item"`, carrying the thread id and the state attributes) hosting the thread item subworkflow, with the title and the context menu's rename/subscription/delete controls as role elements inside rendering through that workflow's own generic layouts; selection is part of the data — `selectedThreadId` lives in the workflow's committed value and each record carries its `selected` flag right in the data layer (stamped by the workflow's default data pass, preserving the identity of records whose flag doesn't flip, so only the affected items' subworkflows see a commit; the role mapping is a plain slice) — and the list renders incrementally: fresh items land at either end — a newly created thread renders as a prepend (the list is newest-first), an older page fetched by the more flow as appends — told apart by which boundary the already-rendered records line up with (anything else re-renders in full), while in-place state changes on existing items (selected/unread, the thread id of a settled placeholder) are applied by an attribute-sync pass after each render, reading fresh values off the item bindings, and the item contents follow the record down each thread workflow's own data path — no item re-render either way. The list **pages by infinite scroll**, through the collection layout's stock machinery (the `data-role="trigger"` div after the list + the triggerable mixin, enabled by the threads layout's `infiniteScroll` option and the workflow's `'history'` pagination defaults): the trigger scrolling into view fires the `more` hub field, History appends the next page (`start`/`rows` against the user history list API, exhaustion from the response's own `has_more`), and the page size is set via `history.useApi('threads/list', { rows: N })`; the conversation uses the `messages` layout as a **shell**: each `message` item is a `<miso-message-item>` container element (question/answer/feedback/sources role elements inside, in that order — the feedback buttons right below the answer via the standard feedback layout, the sources as the hybrid-search-style compact horizontal cards under an h3 "Sources" heading (`messageSourcesBlock`, overridable — the block is `visible-when="nonempty"`, so the heading appears only once the item carries content, and a `:has()` rule hides the whole block again when there are zero source cards; a browser without `:has()` degrades to showing the heading, hybrid-search-parity); the item element carries `miso-circled-citation-index`, covering the answer's citation links and the source cards' indexes alike, as the hybrid-search UI scopes it; a message record without its answer body presents as workflow status `loading`, stamped on the element by its container layout as the standard `status` attribute — there is deliberately no per-message loading icon: the answer typewriter's blinking caret is the loading indication, as in ask (hidden at `initial` and at `done` by the stock typewriter CSS); a message whose content fetch failed for good presents as status `erroneous` and swaps its content out wholesale for the item template's muted notice (`messageErrorBlock`, `visible-when="erroneous"` — `miso-message-item` is in the visible-when container list, so the notice keys off the item's own status attribute) — the regular role elements are packed in a `__content` wrapper hidden by a class rule at erroneous status (a wrapper cannot be visible-when-driven itself: the mechanism forces `display: block !important` and only negates combined with positive terms) — and the messages layout's `ongoing` computation skips an errored last message so the composer is not held), rendered incrementally — fresh items land at either end: a posted follow-up appends at the bottom, an older page fetched by the more flow prepends at the top (told apart by which boundary the already-rendered records line up with; anything else re-renders in full) — the content itself renders through each message's own item subworkflow. The panel **pages by infinite scroll, chat-style from the bottom**: the messages layout's own root template places the stock `data-role="trigger"` div **above** the list, so scrolling up fires the `more` hub field (enabled by the layout's `infiniteScroll` option + the workflow's `'conversation'` pagination defaults) and the Conversation workflow prepends the previous page of messages. The post-render sync pass (`_syncWorkflows`) does one thing: assign each `<miso-message-item>` its workflow off the item binding (`element.workflow = conversation._getMessageWorkflow(record)` — implicit binding, item identity keyed by question id falling back to the posted record's local `placeholder_id`, so the element and workflow survive the settle). Item elements of a nested collection do not leak into the outer one: a message hosts its own source-card items (`data-role="item"` too), so `CollectionLayout._getItemElements` keeps only elements whose closest `[data-role="list"]` is the layout's own list — bindings zip values to elements by index, so a stray nested item would shift every binding after it. The question bubble is the **`question` layout** (the message workflow's default for the question role, whose mapping passes the whole record): it renders the question text and stamps the authorship as data attributes on its host element — `data-author` (the label text, configurable via the layout's `author` option; by default 'Written by Miso' for questions whose `metadata.miso_generated_by` is `answer_update_monitor`, per `isUpdateMessage`; it renders as a CSS `attr()` badge overlapping the bubble's top-left border, and monitor-generated bubbles take a distinct background) and `data-generated-by` — and hides its host while there is no question text. The shell also owns the panel-level behaviors: scroll pinning (following content growth via a ResizeObserver on the list, since answers type out through their own workflows outside the shell's render cycle), scroll anchoring while scrolled up — a prepend keeps the reading position by anchoring on the previously-first item: everything prepended, including its contents rendering in later through the item workflows, sits above the anchor, so holding the anchor stationary (at insert time and on every growth event while unpinned, the anchor's offset re-recorded as the user scrolls) holds the view, while growth below it (a streaming answer) needs no compensation; done by hand, since not every engine provides native scroll anchoring — and the `ongoing` view state read off the data — the last message's answer absent or unfinished — which e.g. disables the search box. The conversation's header roles come from the open thread's record: `<miso-title>` (role `title`) renders its title with the generic `text` layout, `<miso-rename>` (role `rename`) renders a pencil button with the generic `button` layout whose **`prompt` option** turns the click into ask-then-submit: the shared prompt dialog opens pre-filled with the control's current value — the role's mapped data value, read off the latest rendered state (`_currentValue()`; `RafLayout` retains it per element) — and the `submit` view event carries the confirmed text as `value`, which Conversation answers with `rename(value)` — `<miso-delete>` (role `delete`, placed right of the rename button) renders a red bin button with the button layout's `confirm` option (the dialog's message interpolates the mapped title), whose confirmed `submit` Conversation answers with `delete()` (the deletion fact then resets the panel to new-thread mode) — and `<miso-subscription>` (role `subscription`) renders the answer-updates toggle with the **`checkbox` layout** — a button-layout subclass; a checkbox that looks like a button (`<button role="switch" aria-checked>` with `data-checked`, an icon and label per state via `icon`/`text` and `checkedIcon`/`checkedText`). Its checked state comes from the data, so a click emits a `change` view event carrying only the requested state (`{ checked }`), read off the rendered element; the Conversation workflow answers it with `subscribe()`/`unsubscribe()` and the new state arrives back down the data path. Note the `visible-when` mechanism forces `display: block !important` on the element it toggles, so a page that lays such an element out as a flex row needs an inner wrapper (as the history demo pages do for the header). A `<miso-query>` (search-box layout) inside `<miso-conversation>` submits questions as the `submit` view event, which Conversation routes to `send()` — follow-ups, or the first question of a new thread (the conversation starts in new-thread mode). With `messages`/`threads` registered as data roles, `<miso-conversation>` carries the `empty`/`nonempty` content status, which pages use to center the composer in the empty (new-thread) state. A click on a thread item is a navigation action, not a content-engagement click: the `threads` layout overrides `_onClick` to emit a `select` view event (no click tracking), which the History workflow handles with `select()` — item selection stays list-level, while everything inside the item belongs to its thread workflow. Each item also carries a context menu (vertical dots, revealed on hover): its markup comes from the item template (`threadMenuBlock`), and its open/close behavior is driven by the thread workflow's **`item-container` layout** (`ItemContainerLayout`, the container-layout subclass for collection item subworkflows) **by contract** — the template marks the toggle button `data-role="item-menu-button"` and the popup `data-role="item-menu"`, and the layout toggles on the button and closes on any other click on the item or outside it (per-item document listeners, which is also how opening one item's menu closes another's); the shell only keeps clicks carrying those data-roles from selecting. The menu items are the thread workflow's own controls, each a generic `button` layout going through a shared modal dialog util (promise-returning native `<dialog>`s on a common core, `util/modal.js`): `<miso-rename>` (role `rename`) uses the button layout's `prompt` option (`util/prompt.js`, a modal text input pre-filled with the current title — Enter confirms, resolving to the trimmed text, or undefined on cancel; exposed as `MisoClient.ui.prompt`), and `<miso-delete>` (role `delete`) its **`confirm` option** (`util/confirm.js`, exposed as `MisoClient.ui.confirm`; the option's `message` may be a function of the control's current value — the mapped title); the confirmed `submit` view events fire the operation requests on the thread workflow's own hub, their facts riding onto the shared thread events emitter. Between the two sits `<miso-subscription>` (role `subscription`), the `checkbox` layout as a plain menu item: text only, labeled by the action a click takes ('Subscribe' / 'Unsubscribe' via `text`/`checkedText` in the `'history'` defaults — unlike the conversation header's state-labeled bell pill), its `change` view event answered by the thread workflow with `history.subscribe()`/`unsubscribe()`.
+  - `<miso-history>`, `<miso-conversation>` — bind to `client.workflows.history` / `.conversation`, forming the chat history interface (thread list + conversation panel); their role elements are `<miso-threads>`, `<miso-new-thread>`, `<miso-messages>`, `<miso-title>`, `<miso-rename>`, `<miso-delete>` and `<miso-subscription>`. The new-thread button is its own component (`<miso-new-thread>`, role `new_thread`), *not* part of the thread list, so it renders regardless of the list state (loading, empty, erroneous); it uses the generic `button` layout — an icon and a label, both configurable (`icon`, `text`), emitting a `submit` view event when clicked — which History answers by clearing the selection and resetting the conversation panel to new-thread mode. The thread list uses the `threads` layout as a **shell**, like the conversation's `messages` layout: each `thread` item is a `<miso-thread-item>` container element (`data-role="item"`, carrying the thread id and the state attributes) hosting the thread item subworkflow, with the title and the context menu's rename/subscription/delete controls as role elements inside rendering through that workflow's own generic layouts; selection is part of the data — `selectedThreadId` lives in the workflow's committed value and each record carries its `selected` flag right in the data layer (stamped by the workflow's default data pass, preserving the identity of records whose flag doesn't flip, so only the affected items' subworkflows see a commit; the role mapping is a plain slice) — and the list renders incrementally: fresh items land at either end — a newly created thread renders as a prepend (the list is newest-first), an older page fetched by the more flow as appends — told apart by which boundary the already-rendered records line up with (anything else re-renders in full), while in-place state changes on existing items (selected/unread, the thread id of a settled placeholder) are applied by an attribute-sync pass after each render, reading fresh values off the item bindings, and the item contents follow the record down each thread workflow's own data path — no item re-render either way. The list **pages by infinite scroll**, through the collection layout's stock machinery (the `data-role="trigger"` div after the list + the triggerable mixin, enabled by the threads layout's `infiniteScroll` option and the workflow's `'history'` pagination defaults): the trigger scrolling into view fires the `more` hub field, History appends the next page (`start`/`rows` against the user history list API, exhaustion from the response's own `has_more`), and the page size is set via `history.useApi('threads/list', { rows: N })`; the conversation uses the `messages` layout as a **shell**: each `message` item is a `<miso-message-item>` container element (question/answer/feedback/sources role elements inside, in that order — the feedback buttons right below the answer via the standard feedback layout, the sources as the hybrid-search-style compact horizontal cards under an h3 "Sources" heading (`messageSourcesBlock`, overridable — the block is `visible-when="nonempty"`, so the heading appears only once the item carries content, and a `:has()` rule hides the whole block again when there are zero source cards; a browser without `:has()` degrades to showing the heading, hybrid-search-parity); the item element carries `miso-circled-citation-index`, covering the answer's citation links and the source cards' indexes alike, as the hybrid-search UI scopes it; a message record without its answer body presents as workflow status `loading`, stamped on the element by its container layout as the standard `status` attribute — there is deliberately no per-message loading icon: the answer typewriter's blinking caret is the loading indication, as in ask (hidden at `initial` and at `done` by the stock typewriter CSS); the item element carries `data-live` for a message generated in this session (stamped by the item template, kept in sync by the shell's `_syncItems` pass), and a message without it — a reopened thread, an older page — holds its packed content back (a class rule) until the item is `ready`, so it shows in one piece, while a live message shows its question right away as its answer generates; a message whose content fetch failed for good — or, for a live message, whose posting or answer polling did (the message workflow's `writeErrorToMessage` turns the stream's failure into the same record `error` mark the conversation's failed answers request sets; the mark is the failure itself, so the presentation can tell an expired session apart) — presents as status `erroneous` and swaps its content out wholesale for the item template's muted notice (`messageErrorBlock`, `visible-when="erroneous"` — `miso-message-item` is in the visible-when container list, so the notice keys off the item's own status attribute); the notice hosts the item's own `<miso-error>` role element (the message workflow maps the error role to the record's `error` mark), rendered by the error layout with the `'conversation'` defaults' `messageErrorMessage` text template — customized via `conversation.useLayouts({ error: { templates: { message: (layout, error) => ... } } })`, the markup via the messages layout's `messageErrorBlock` — the regular role elements are packed in a `__content` wrapper hidden by a class rule at erroneous status (a wrapper cannot be visible-when-driven itself: the mechanism forces `display: block !important` and only negates combined with positive terms) — and the messages layout's `ongoing` computation skips an errored last message so the composer is not held), rendered incrementally — fresh items land at either end: a posted follow-up appends at the bottom, an older page fetched by the more flow prepends at the top (told apart by which boundary the already-rendered records line up with; anything else re-renders in full) — the content itself renders through each message's own item subworkflow. The panel **pages by infinite scroll, chat-style from the bottom**: the messages layout's own root template places the stock `data-role="trigger"` div **above** the list, so scrolling up fires the `more` hub field (enabled by the layout's `infiniteScroll` option + the workflow's `'conversation'` pagination defaults) and the Conversation workflow prepends the previous page of messages. The post-render sync pass (`_syncWorkflows`) does one thing: assign each `<miso-message-item>` its workflow off the item binding (`element.workflow = conversation._getMessageWorkflow(record)` — implicit binding, item identity keyed by question id falling back to the posted record's local `placeholder_id`, so the element and workflow survive the settle). Item elements of a nested collection do not leak into the outer one: a message hosts its own source-card items (`data-role="item"` too), so `CollectionLayout._getItemElements` keeps only elements whose closest `[data-role="list"]` is the layout's own list — bindings zip values to elements by index, so a stray nested item would shift every binding after it. The question bubble is the **`question` layout** (the message workflow's default for the question role, whose mapping passes the whole record): it renders the question text and stamps the authorship as data attributes on its host element — `data-author` (the label text, configurable via the layout's `author` option; by default 'Written by Miso' for questions whose `metadata.miso_generated_by` is `answer_update_monitor`, per `isUpdateMessage`; it renders as a CSS `attr()` badge overlapping the bubble's top-left border, and monitor-generated bubbles take a distinct background) and `data-generated-by` — and hides its host while there is no question text. The shell also owns the panel-level behaviors: scroll pinning (following content growth via a ResizeObserver on the list, since answers type out through their own workflows outside the shell's render cycle), scroll anchoring while scrolled up — a prepend keeps the reading position by anchoring on the previously-first item: everything prepended, including its contents rendering in later through the item workflows, sits above the anchor, so holding the anchor stationary (at insert time and on every growth event while unpinned, the anchor's offset re-recorded as the user scrolls) holds the view, while growth below it (a streaming answer) needs no compensation; done by hand, since not every engine provides native scroll anchoring — and the `ongoing` view state read off the data — the last message's answer absent or unfinished — which e.g. disables the search box. The conversation's header roles come from the open thread's record: `<miso-title>` (role `title`) renders its title with the generic `text` layout, `<miso-rename>` (role `rename`) renders a pencil button with the generic `button` layout whose **`prompt` option** turns the click into ask-then-submit: the shared prompt dialog opens pre-filled with the control's current value — the role's mapped data value, read off the latest rendered state (`_currentValue()`; `RafLayout` retains it per element) — and the `submit` view event carries the confirmed text as `value`, which Conversation answers with `rename(value)` — `<miso-delete>` (role `delete`, placed right of the rename button) renders a red bin button with the button layout's `confirm` option (the dialog's message interpolates the mapped title), whose confirmed `submit` Conversation answers with `delete()` (the deletion event then resets the panel to new-thread mode) — and `<miso-subscription>` (role `subscription`) renders the answer-updates toggle with the **`checkbox` layout** — a button-layout subclass; a checkbox that looks like a button (`<button role="switch" aria-checked>` with `data-checked`, an icon and label per state via `icon`/`text` and `checkedIcon`/`checkedText`). Its checked state comes from the data, so a click emits a `change` view event carrying only the requested state (`{ checked }`), read off the rendered element; the Conversation workflow answers it with `subscribe()`/`unsubscribe()` and the new state arrives back down the data path. Note the `visible-when` mechanism forces `display: block !important` on the element it toggles, so a page that lays such an element out as a flex row needs an inner wrapper (as the conversation header does: `.miso-conversation__header` > `.miso-conversation__header-row`). The panels' default layout styles are **opted in by class** — `<miso-history class="miso-history">` (scrolls on its own) and `<miso-conversation class="miso-conversation">` (a column in which the messages scroll, with `.miso-conversation__header`/`__header-row`/`__intro` for the header and the new-thread headline, and the composer centered in the empty state) — so a page strips them off by omitting the class names. A `<miso-query>` (search-box layout) inside `<miso-conversation>` submits questions as the `submit` view event, which Conversation routes to `send()` — follow-ups, or the first question of a new thread (the conversation starts in new-thread mode). With `messages`/`threads` registered as data roles, `<miso-conversation>` carries the `empty`/`nonempty` content status, which pages use to center the composer in the empty (new-thread) state. A click on a thread item is a navigation action, not a content-engagement click: the `threads` layout overrides `_onClick` to emit a `select` view event (no click tracking), which the History workflow handles with `select()` — item selection stays list-level, while everything inside the item belongs to its thread workflow. Each item also carries a context menu (vertical dots, revealed on hover): its markup comes from the item template (`threadMenuBlock`), and its open/close behavior is driven by the thread workflow's **`item-container` layout** (`ItemContainerLayout`, the container-layout subclass for collection item subworkflows) **by contract** — the template marks the toggle button `data-role="item-menu-button"` and the popup `data-role="item-menu"`, and the layout toggles on the button and closes on any other click on the item or outside it (per-item document listeners, which is also how opening one item's menu closes another's); the shell only keeps clicks carrying those data-roles from selecting. The menu items are the thread workflow's own controls, each a generic `button` layout going through a shared modal dialog util (promise-returning native `<dialog>`s on a common core, `util/modal.js`): `<miso-rename>` (role `rename`) uses the button layout's `prompt` option (`util/prompt.js`, a modal text input pre-filled with the current title — Enter confirms, resolving to the trimmed text, or undefined on cancel; exposed as `MisoClient.ui.prompt`; next to them sits `MisoClient.ui.notify({ message, type, duration })`, `util/notify.js`, a transient corner notice — a plain utility nothing in the SDK calls on its own: a page wires it up itself, e.g. to the thread event errors gathered at `client.workflows.on('error', ...)`), and `<miso-delete>` (role `delete`) its **`confirm` option** (`util/confirm.js`, exposed as `MisoClient.ui.confirm`; the option's `message` may be a function of the control's current value — the mapped title); the confirmed `submit` view events fire the operation requests on the thread workflow's own hub, their events riding onto the shared thread events emitter. Between the two sits `<miso-subscription>` (role `subscription`), the `checkbox` layout as a plain menu item: text only, labeled by the action a click takes ('Subscribe' / 'Unsubscribe' via `text`/`checkedText` in the `'history'` defaults — unlike the conversation header's state-labeled bell pill), its `change` view event answered by the thread workflow with `history.subscribe()`/`unsubscribe()`.
+  - **List-level error notices**: when the thread list or the thread on display fails to load (workflow status `erroneous`), the `threads`/`messages` layouts render their `[STATUS.ERRONEOUS]` template in place of the list — a status-keyed template like `[STATUS.READY]`, empty in the collection layout's defaults (the ask/search UIs present errors through `<miso-error>` instead). The two shells declare `listError` for it in their `DEFAULT_TEMPLATES` (the `INHERITED_DEFAULT_TEMPLATES` pattern): a muted `__list-error` notice whose text comes from their `errorMessage(layout, error)` template, worded apart for an expired session (`isSessionExpired`: status 401, e.g. an expired JWT). The view passes the failure through as `state.error` (`ViewActor._sliceData`), so either template can be overridden — `useLayouts({ threads: { templates: { errorMessage: (layout, error) => ... } } })` for the text, `[STATUS.ERRONEOUS]` (key `'erroneous'`) for the markup; likewise `messages`. A failed *more* page does not reach this: the history list parks as exhausted at ready status, and a failed message (content fetch, or a live message's posting/polling) presents the per-item `messageErrorBlock` instead.
 - `<miso-message-item>` — a **container element inside another container element** (`<miso-conversation>`), hosting the `message-item` workflow — an answer-based workflow that posts and streams its own content when live (ask-style), and is otherwise fed by the conversation via `updateData()` with its data actor off. Normally **bound implicitly**: the messages layout renders one per item and assigns `element.workflow` off the item binding (which also covers a just-posted message with no question id yet); a `question-id` attribute binds explicitly through the parent container's workflow instead (`conversation._getMessageWorkflow`). Its role children (`<miso-question>`, `<miso-answer>`, `<miso-sources>`, `<miso-feedback>`, ...) bind to the message workflow as usual (`getContainer` resolves to the closest container ancestor) and render one message via the standard answer-based layouts (the message workflow shares the conversation's options, whose `'conversation'` defaults hold the message roles too — omitting the query role, turning the container logo off, and giving the answer typewriter `instant: true` — already-finished answers render in one shot); citation/link clicks and feedback go out as message-level interactions, deduplicated per message.
 - `<miso-thread-item>` — the thread list's analogue of `<miso-message-item>`: a container element inside `<miso-history>`, hosting the `thread-item` workflow — data actor off, fed by History via `updateData()` with only the records that actually changed (record identity is the change signal). Normally **bound implicitly**: the threads layout renders one per item and assigns `element.workflow` off the item binding; a `thread-id` attribute binds explicitly through the parent container's workflow instead (`history._getThreadWorkflow`). Its role children — `<miso-title>` (generic `text` layout, with an 'Untitled' fallback via a `content` template), `<miso-rename>`/`<miso-delete>` (generic `button` layout with the `prompt`/`confirm` dialog options), and `<miso-subscription>` (the `checkbox` layout, the context menu's toggle) — bind to the thread workflow as usual; title and subscription map dot-paths into the record (`'title'`, `'subscribed'`), while rename and delete map the whole record — their button layouts derive the dialog text via the `value` option and render disabled (the `disabled` option) until the record carries a thread id, so a thread being created is inert in the UI too. Its container role uses the `item-container` layout, which drives the context menu found in the item's markup via the `item-menu` data-role contract (a custom body without menu markup simply has nothing to drive).
 - **Role components** (`element/role/`): register with their ancestor container; the role determines which slice of data they display. Either dedicated tags (`<miso-answer>`, `<miso-sources>`, `<miso-products>`, `<miso-query>`, ...) or generic `<miso-component role="...">`. `<miso-results>` is deprecated in favor of `<miso-products>`.

package/src/defaults.js

@@ -1,6 +1,6 @@
 import { escapeHtml } from '@miso.ai/commons';
 import { ROLE, LAYOUT_TYPE } from './constants.js';
-import { compactArticle, compactArticleInfoBlock } from './layout/templates.js';
+import { compactArticle, compactArticleInfoBlock, messageErrorMessage } from './layout/templates.js';
 
 /**
  * Default layout options of each workflow, keyed by workflow name. The UI
@@ -142,7 +142,9 @@ export const defaultLayouts = Object.freeze({
   // query role (a message has no query flow of its own; the query entry
   // below is the panel's composer), with the question layout (text plus
   // authorship attributes, off the whole record), the answer typewriter
-  // with `instant: true` (an already-finished answer renders in one shot),
+  // with `instant: true` (an answer starts at what is already available: a
+  // finished one renders in one shot, an ongoing one types out only the rest),
+  // the error notice worded for a message (messageErrorMessage),
   // and the sources as the compact horizontal cards of the hybrid-search
   // UI. logo: false turns the per-message banner off; the panel never
   // triggers the auto logo anyway, having no main-role component
@@ -151,6 +153,7 @@ export const defaultLayouts = Object.freeze({
     [ROLE.CONTAINER]: [LAYOUT_TYPE.CONTAINER, { logo: false }],
     [ROLE.QUESTION]: LAYOUT_TYPE.QUESTION,
     [ROLE.ANSWER]: [LAYOUT_TYPE.TYPEWRITER, { instant: true }],
+    [ROLE.ERROR]: [LAYOUT_TYPE.ERROR, { templates: { message: messageErrorMessage } }],
     [ROLE.SOURCES]: [
       LAYOUT_TYPE.HORIZONTAL,
       {

package/src/layout/list/collection.js

@@ -9,7 +9,13 @@ function root(layout, state) {
   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}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${hasStatusTemplate(status) ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+}
+
+// the statuses with a content template of their own: the list at ready, the
+// error notice at erroneous
+export function hasStatusTemplate(status) {
+  return status === STATUS.READY || status === STATUS.ERRONEOUS;
 }
 
 function ready(layout, state) {
@@ -74,6 +80,9 @@ const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [STATUS.READY]: ready,
   empty: () => ``,
+  // no notice by default: the ask/search UIs present errors in a section of
+  // their own (<miso-error>); list layouts that stand alone supply one
+  [STATUS.ERRONEOUS]: () => ``,
   body,
   list,
   ordered: false,

package/src/layout/list/messages.js

@@ -1,9 +1,22 @@
 import { STATUS, LAYOUT_TYPE } from '../../constants.js';
-import CollectionLayout from './collection.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 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) {
@@ -11,7 +24,11 @@ function root(layout, state) {
   const { status } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${templates.trigger(layout, state)}${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.loading(layout, state)}</div>`;
+  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.';
 }
 
 /**
@@ -53,8 +70,12 @@ export default class MessagesLayout extends CollectionLayout {
     return DEFAULT_CLASSNAME;
   }
 
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
+
   constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
-    super({ className, templates: { root, ...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;
@@ -146,6 +167,7 @@ export default class MessagesLayout extends CollectionLayout {
     }
     this._watchGrowth(this._getListElement(element) || element);
     this._syncWorkflows(element);
+    this._syncItems(element);
     this._syncOngoing(state);
   }
 
@@ -168,6 +190,16 @@ export default class MessagesLayout extends CollectionLayout {
     }
   }
 
+  // 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 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

package/src/layout/list/threads.js

@@ -1,11 +1,26 @@
 import { isThreadUnread } from '@miso.ai/client-sdk-workflow';
-import { LAYOUT_TYPE } from '../../constants.js';
+import { STATUS, LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from './collection.js';
+import { listError, isSessionExpired, SESSION_EXPIRED_MESSAGE } from '../templates.js';
 import { setOrRemoveAttribute } from '../../util/dom.js';
 
 const TYPE = LAYOUT_TYPE.THREADS;
 const DEFAULT_CLASSNAME = 'miso-threads';
 
+const DEFAULT_TEMPLATES = Object.freeze({
+  [STATUS.ERRONEOUS]: listError,
+  errorMessage,
+});
+
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  ...DEFAULT_TEMPLATES,
+});
+
+function errorMessage(layout, error) {
+  return isSessionExpired(error) ? SESSION_EXPIRED_MESSAGE : 'Your conversations could not be loaded.';
+}
+
 /**
  * The thread list of the chat history interface: a shell that renders one
  * <miso-thread-item> container element per thread item, incrementally —
@@ -42,8 +57,12 @@ export default class ThreadsLayout extends CollectionLayout {
     return DEFAULT_CLASSNAME;
   }
 
-  constructor({ className = DEFAULT_CLASSNAME, ...options } = {}) {
-    super({ className, ...options });
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({ className, templates: { ...DEFAULT_TEMPLATES, ...templates }, ...options });
   }
 
   // item identity: the thread id, or the local placeholder id standing in

package/src/layout/templates.js

@@ -81,14 +81,17 @@ export function threadMenuBlock({ className }) {
  * 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.
+ * 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.
  */
 export function message(layout, state, data) {
   const { className, templates } = layout;
+  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">`,
+    `<miso-message-item class="${className}__item-body miso-circled-citation-index" data-role="item"${liveAttr}>`,
     (templates.messageBody || messageBody)(layout, data),
     `</miso-message-item>`,
   ].join('');
@@ -121,11 +124,35 @@ export function messageSourcesBlock({ className }) {
 }
 
 // shown by the item's own status (visible-when): a message whose content
-// fetch failed for good presents this in place of its 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)
 export function messageErrorBlock({ className }) {
-  return `<div class="${className}__error" visible-when="erroneous">This message could not be loaded.</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
+export 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
+export 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
+export function isSessionExpired(error) {
+  return !!error && error.status === 401;
+}
+
+export const SESSION_EXPIRED_MESSAGE = 'Your session has expired. Please sign in again.';
 
 export function article(layout, state, data, meta) {
   const { templates } = layout;

package/src/layout/text/typewriter/index.js

@@ -140,11 +140,12 @@ export default class TypewriterLayout extends ProgressiveLayout {
     } else {
       result = rendered;
     }
-    if (this.options.instant && state.done && !result.cursor) {
-      // instant mode: content that finishes before any of it was typed —
-      // arrived complete (e.g. a loaded conversation message), or completed
-      // while the cursor was still at the start — renders in one shot; only
-      // content streaming in as it is generated types out
+    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, { ...state, cursor: Infinity });
     } else if (!newStreak) {
       const cursor = this._getNextCursor(rendered.cursor, state.doneAt, rendered.timestamp, state.timestamp);

package/src/plugin.js

@@ -11,6 +11,7 @@ import * as traits from './trait/index.js';
 import { loadStylesIfNecessary } from './styles.js';
 import confirm from './util/confirm.js';
 import prompt from './util/prompt.js';
+import notify from './util/notify.js';
 
 import MisoContainerElement from './element/container/miso-container.js';
 import MisoContextElement from './element/context/miso-context.js';
@@ -44,7 +45,7 @@ export default class UiPlugin extends Component {
     MisoClient.on('create', this._injectClient.bind(this));
 
     // the UI interface for MisoClient
-    const ui = { defaults, traits, confirm, prompt };
+    const ui = { defaults, traits, confirm, prompt, notify };
     delegateGetters(ui, this, ['layouts', 'ready']);
     defineValues(this, { MisoClient });
     defineValues(MisoClient, { ui });
@@ -131,7 +132,7 @@ function createUiPluginContext(plugin, ui, MisoClient) {
 }
 
 // workflow accessors delegated to client.workflows for backward compatibility
-const WORKFLOW_ACCESSORS = ['search', 'hybridSearch', 'asks', 'ask', 'explores', 'explore', 'recommendations', 'recommendation', 'sources'];
+const WORKFLOW_ACCESSORS = ['search', 'hybridSearch', 'asks', 'ask', 'explores', 'explore', 'recommendations', 'recommendation', 'history', 'conversation', 'sources', 'on'];
 
 /**
  * The UI interface for the client.

package/src/util/notify.js

@@ -0,0 +1,68 @@
+import { escapeHtml } from '@miso.ai/commons';
+
+const DEFAULT_CLASSNAME = 'miso-notice';
+const DEFAULT_DURATION = 5000;
+
+/**
+ * Show a transient notice (a toast) in a corner of the page, dismissed
+ * after `duration` milliseconds (0 keeps it until closed), or by its close
+ * button. A notice with the very text of one on display is not stacked:
+ * the displayed one stays, its timer starting over. Returns a function
+ * that dismisses the notice. Exposed as `MisoClient.ui.notify()`.
+ */
+export default function notify({
+  message,
+  type = 'info', // 'info' | 'error'
+  duration = DEFAULT_DURATION,
+  className = DEFAULT_CLASSNAME,
+} = {}) {
+  if (!message) {
+    return () => {};
+  }
+  const container = getContainer(className);
+  let notice = [...container.children].find(element => element._misoNotice && element._misoNotice.key === `${type}:${message}`);
+  if (!notice) {
+    notice = createNotice(className, type, message);
+    container.appendChild(notice);
+  }
+  notice._misoNotice.schedule(duration);
+  return notice._misoNotice.dismiss;
+}
+
+// the stack hosting the notices, created on demand and removed when empty
+function getContainer(className) {
+  let container = document.querySelector(`.${className}-stack`);
+  if (!container) {
+    container = document.createElement('div');
+    container.className = `${className}-stack`;
+    container.setAttribute('aria-live', 'polite');
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
+function createNotice(className, type, message) {
+  const notice = document.createElement('div');
+  notice.className = `${className} ${className}--${type}`;
+  notice.setAttribute('role', type === 'error' ? 'alert' : 'status');
+  notice.innerHTML = [
+    `<div class="${className}__message">${escapeHtml(message)}</div>`,
+    `<button type="button" class="${className}__close-button" data-role="close" aria-label="Dismiss">&times;</button>`,
+  ].join('');
+  let timer;
+  const dismiss = () => {
+    clearTimeout(timer);
+    const container = notice.parentElement;
+    notice.remove();
+    container && container.children.length === 0 && container.remove();
+  };
+  const schedule = (duration) => {
+    clearTimeout(timer);
+    timer = duration > 0 ? setTimeout(dismiss, duration) : undefined;
+  };
+  notice.addEventListener('click', (event) => {
+    event.target.closest('[data-role="close"]') && dismiss();
+  });
+  notice._misoNotice = { key: `${type}:${message}`, dismiss, schedule };
+  return notice;
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.14.0-beta.3';
+export default '1.14.0-beta.4';