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

package/src/asset/svgs.js

@@ -1,3 +1,4 @@
+import { isInBrowser } from '@miso.ai/commons';
 import version from '../version.js';
 
 function trianglePath(r) {
@@ -18,6 +19,12 @@ const ICON_NAME = {
   CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative',
   BULB: 'bulb',
+  DOTS_VERTICAL: 'dots-vertical',
+  PLUS: 'plus',
+  PENCIL: 'pencil',
+  BELL: 'bell',
+  BELL_FILL: 'bell-fill',
+  TRASH: 'trash',
 };
 
 // CC0 SVGs
@@ -31,9 +38,15 @@ const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
 
 // from Bootstrap Icons (MIT)
-const ICON_BULB = `<symbol id="${PREFIX}-${ICON_NAME.BULB}" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/></symbol>`;
+const ICON_BULB = `<symbol id="${PREFIX}-${ICON_NAME.BULB}" viewBox="0 0 16 16"><path fill="currentColor" d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/></symbol>`;
+const ICON_DOTS_VERTICAL = `<symbol id="${PREFIX}-${ICON_NAME.DOTS_VERTICAL}" viewBox="0 0 16 16"><path fill="currentColor" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></symbol>`;
+const ICON_PLUS = `<symbol id="${PREFIX}-${ICON_NAME.PLUS}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></symbol>`;
+const ICON_PENCIL = `<symbol id="${PREFIX}-${ICON_NAME.PENCIL}" viewBox="0 0 16 16"><path fill="currentColor" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.325-.175"/></symbol>`;
+const ICON_BELL = `<symbol id="${PREFIX}-${ICON_NAME.BELL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/></symbol>`;
+const ICON_BELL_FILL = `<symbol id="${PREFIX}-${ICON_NAME.BELL_FILL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/></symbol>`;
+const ICON_TRASH = `<symbol id="${PREFIX}-${ICON_NAME.TRASH}" viewBox="0 0 16 16"><path fill="currentColor" d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path fill="currentColor" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></symbol>`;
 
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB];
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB, ICON_DOTS_VERTICAL, ICON_PLUS, ICON_PENCIL, ICON_BELL, ICON_BELL_FILL, ICON_TRASH];
 
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -47,7 +60,7 @@ function loadSvgSprites() {
   document.head.insertAdjacentHTML('beforeend', SPRITES_SVG);
 }
 
-loadSvgSprites();
+isInBrowser && loadSvgSprites();
 
 function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;

package/src/combo/ask/index.js

@@ -102,8 +102,8 @@ export default class AskCombo extends Combo {
     const { wireFollowUps, wireRelatedResources } = MisoClient.ui.defaults.ask;
     const { templates = {}, features = {}, api } = options;
 
-    const context = client.ui.asks;
-    const rootWorkflow = client.ui.ask;
+    const context = client.workflows.asks;
+    const rootWorkflow = client.workflows.ask;
 
     if (api) {
       context.useApi(api);

package/src/constants.js

@@ -1,156 +1,48 @@
+// workflow-level constants live in the workflow package; re-exported here for convenience
+export {
+  DEFAULT_UNIT_ID,
+  ROLE,
+  isDataRole,
+  isProductRole,
+  EVENT_TYPE,
+  TRACKING_EVENT_TYPES,
+  PERFORMANCE_EVENT_TYPES,
+  DIRECT_TRACKING_EVENT_TYPES,
+  isPerformanceEventType,
+  TRACKING_STATUS,
+  STATUS,
+  QUESTION_SOURCE,
+  validateEventType,
+  validateTrackingStatus,
+  WORKFLOW_CONFIGURABLE,
+  REQUEST_TYPE,
+} from '@miso.ai/client-sdk-workflow';
+
 export const ATTR_DATA_MISO_UNIT_ID = `data-miso-unit-id`;
 export const ATTR_DATA_MISO_PRODUCT_ID = `data-miso-product-id`;
-export const DEFAULT_UNIT_ID = 'default';
 
-export const ROLE = Object.freeze({
+export const LAYOUT_TYPE = Object.freeze({
   CONTAINER: 'container',
+  ITEM_CONTAINER: 'item-container',
+  ERROR: 'error',
   BANNER: 'banner',
-  QUERY: 'query',
-  FEEDBACK: 'feedback',
-  PRODUCTS: 'products',
-  CATEGORIES: 'categories',
-  ATTRIBUTES: 'attributes',
-  RESULTS: 'results',
-  ITEMS: 'items',
-  QUESTION: 'question',
-  ANSWER: 'answer',
-  REASONING: 'reasoning',
-  IMAGES: 'images',
-  SOURCES: 'sources',
-  RELATED_RESOURCES: 'related_resources',
-  FOLLOW_UP_QUESTIONS: 'follow_up_questions',
-  QUERY_SUGGESTIONS: 'query_suggestions',
-  RELATED_QUESTIONS: 'related_questions',
   AFFILIATION: 'affiliation',
-  KEYWORDS: 'keywords',
+  LIST: 'list',
+  THREADS: 'threads',
+  MESSAGES: 'messages',
+  HORIZONTAL: 'horizontal',
+  CARDS: 'cards',
+  CAROUSEL: 'carousel',
+  GALLERY: 'gallery',
+  SEARCH_BOX: 'search-box',
+  OPTION_LIST: 'option-list',
   FACETS: 'facets',
-  TOTAL: 'total',
-  MORE: 'more',
-  SORT: 'sort',
-  ERROR: 'error',
-});
-
-const DATA_ROLE_SET = new Set([
-  ROLE.PRODUCTS,
-  ROLE.CATEGORIES,
-  ROLE.ATTRIBUTES,
-  ROLE.RESULTS,
-  ROLE.ITEMS,
-  ROLE.QUESTION,
-  ROLE.ANSWER,
-  ROLE.REASONING,
-  ROLE.IMAGES,
-  ROLE.SOURCES,
-  ROLE.RELATED_RESOURCES,
-  ROLE.FOLLOW_UP_QUESTIONS,
-  ROLE.QUERY_SUGGESTIONS,
-  ROLE.RELATED_QUESTIONS,
-  ROLE.AFFILIATION,
-  ROLE.FACETS,
-  ROLE.TOTAL,
-]);
-
-export function isDataRole(role) {
-  return DATA_ROLE_SET.has(role);
-}
-
-const PRODUCT_ROLE_SET = new Set([
-  ROLE.PRODUCTS,
-  ROLE.IMAGES,
-  ROLE.SOURCES,
-  ROLE.RELATED_RESOURCES,
-]);
-
-export function isProductRole(role) {
-  return PRODUCT_ROLE_SET.has(role);
-}
-
-export const EVENT_TYPE = Object.freeze({
-  IMPRESSION: 'impression',
-  VIEWABLE: 'viewable',
-  CLICK: 'click',
-  SUBMIT: 'submit',
+  SELECT: 'select',
+  MORE_BUTTON: 'more-button',
+  BUTTON: 'button',
+  CHECKBOX: 'checkbox',
   FEEDBACK: 'feedback',
-  HEARTBEAT: 'heartbeat',
-  GENERIC_CLICK: 'generic_click',
-});
-
-export const TRACKING_EVENT_TYPES = [
-  EVENT_TYPE.IMPRESSION,
-  EVENT_TYPE.VIEWABLE,
-  EVENT_TYPE.CLICK,
-  EVENT_TYPE.SUBMIT,
-  EVENT_TYPE.FEEDBACK,
-  EVENT_TYPE.HEARTBEAT,
-];
-
-export const PERFORMANCE_EVENT_TYPES = [
-  EVENT_TYPE.IMPRESSION,
-  EVENT_TYPE.VIEWABLE,
-  EVENT_TYPE.CLICK,
-];
-
-export const DIRECT_TRACKING_EVENT_TYPES = [
-  EVENT_TYPE.SUBMIT,
-  EVENT_TYPE.HEARTBEAT,
-  EVENT_TYPE.GENERIC_CLICK,
-];
-
-const PERFORMANCE_EVENT_TYPE_SET = new Set(PERFORMANCE_EVENT_TYPES);
-
-export function isPerformanceEventType(type) {
-  return PERFORMANCE_EVENT_TYPE_SET.has(type);
-}
-
-export const TRACKING_STATUS = Object.freeze({
-  UNTRACKED: 'untracked',
-  TRACKING: 'tracking',
-  TRIGGERED: 'triggered',
-});
-
-export const STATUS = Object.freeze({
-  INITIAL: 'initial',
-  LOADING: 'loading',
-  ERRONEOUS: 'erroneous',
-  READY: 'ready',
-  ONGOING: 'ongoing',
-  DONE: 'done',
-  EMPTY: 'empty',
-  NONEMPTY: 'nonempty',
-  UNANSWERABLE: 'unanswerable',
-});
-
-export const QUESTION_SOURCE = Object.freeze({
-  ORGANIC: '_organic',
-  SUGGESTED_QUESTIONS: '_suggested_questions',
-  INLINE_QUESTION_LINK: '_inline_question_link',
-});
-
-export function validateEventType(value) {
-  if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
-    throw new Error(`Unrecognized event type: ${value}`);
-  }
-}
-
-export function validateTrackingStatus(value) {
-  if (value !== TRACKING_STATUS.UNTRACKED && value !== TRACKING_STATUS.TRACKING && value !== TRACKING_STATUS.TRIGGERED) {
-    throw new Error(`Unrecognized tracking status: ${value}`);
-  }
-}
-
-export const WORKFLOW_CONFIGURABLE = Object.freeze({
-  API: 'api',
-  LAYOUTS: 'layouts',
-  DATA_PROCESSOR: 'dataProcessor',
-  TRACKERS: 'trackers',
-  INTERACTIONS: 'interactions',
-  FILTERS: 'filters',
-  PAGINATION: 'pagination',
-  TEMPLATES: 'templates',
-});
-
-export const REQUEST_TYPE = Object.freeze({
-  QUERY: 'query',
-  REFINE: 'refine',
-  MORE: 'more',
+  TEXT: 'text',
+  QUESTION: 'question',
+  TYPEWRITER: 'typewriter',
 });

package/src/defaults/ask/controls.js

@@ -17,7 +17,7 @@ function setFollowUpTemplate(client, { template = followUpTemplate, ...options }
   if (template === followUpTemplate && !hasExtraOptions) {
     return; // same as default
   }
-  client.ui.asks.useTemplates({
+  client.workflows.asks.useTemplates({
     followUp: hasExtraOptions ? (args) => template({ ...options, ...args }) : template,
   });
 }

package/src/defaults/hybrid-search/answer-box.js

@@ -1,6 +1,6 @@
 import { CLASS_PREFIX } from './constants.js';
 import { STATUS } from '../../constants.js';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import { showMore as DEFAULT_PHRASE_SHOW_MORE, showLess as DEFAULT_PHRASE_SHOW_LESS } from './phrases.js';
 
 const CLASS_OPEN = 'answer-box-open';
@@ -11,7 +11,7 @@ export default class AnswerBox {
 
   constructor(client, element, { classPrefix = CLASS_PREFIX, phrases = {}, hideWhenUnanswerable = true } = {}) {
     this._client = client;
-    this._workflow = client.ui.hybridSearch;
+    this._workflow = client.workflows.hybridSearch;
     this._element = element;
     this._classPrefix = classPrefix;
     this._phrases = phrases;

package/src/defaults.js

@@ -0,0 +1,174 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { ROLE, LAYOUT_TYPE } from './constants.js';
+import { compactArticle, compactArticleInfoBlock } from './layout/templates.js';
+
+/**
+ * Default layout options of each workflow, keyed by workflow name. The UI
+ * plugin seeds the workflow plugin's defaults store with these values at
+ * install. The tables mirror the workflow class hierarchy.
+ */
+
+const BASE_LAYOUTS = {
+  [ROLE.CONTAINER]: LAYOUT_TYPE.CONTAINER,
+  [ROLE.ERROR]: LAYOUT_TYPE.ERROR,
+};
+
+const ANSWER_BASED_LAYOUTS = {
+  ...BASE_LAYOUTS,
+  [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX, { placeholder: 'Ask a question' }],
+  [ROLE.QUESTION]: [LAYOUT_TYPE.TEXT, { tag: 'h2' }],
+  [ROLE.ANSWER]: LAYOUT_TYPE.TYPEWRITER,
+  [ROLE.FEEDBACK]: LAYOUT_TYPE.FEEDBACK,
+  [ROLE.IMAGES]: [LAYOUT_TYPE.GALLERY, { incremental: true, itemType: 'image' }],
+  [ROLE.SOURCES]: [LAYOUT_TYPE.LIST, { incremental: true, itemType: 'article', templates: { ordered: true } }],
+  [ROLE.AFFILIATION]: [LAYOUT_TYPE.AFFILIATION, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
+};
+
+function totalContent(layout, { value }) {
+  if (value === undefined) {
+    return '';
+  }
+  const { formatNumber } = layout.templates.helpers;
+  const formatted = formatNumber(value);
+  const label = value === 1 ? 'result' : 'results';
+  return `${formatted} ${label}`;
+}
+
+const { [ROLE.QUERY]: _answerBasedQueryLayout, ...MESSAGE_LAYOUTS } = ANSWER_BASED_LAYOUTS;
+
+// the rename/delete button controls of a thread (the conversation header's,
+// and a thread list item's context menu's): mapped to the thread record —
+// the dialogs work with its title, and the buttons disable while the record
+// has no thread id yet (a thread being created is not addressable until
+// resolved; the workflows guard all the same)
+const THREAD_CONTROL_OPTIONS = Object.freeze({
+  value: thread => thread && thread.title,
+  disabled: thread => !(thread && thread.thread_id),
+});
+const THREAD_RENAME_PROMPT = Object.freeze({
+  title: 'Rename thread',
+  placeholder: 'Thread name',
+  confirmText: 'Rename',
+});
+const THREAD_DELETE_CONFIRM = Object.freeze({
+  title: 'Delete thread',
+  message: title => `Are you sure you want to delete "${title || 'this thread'}"? This cannot be undone.`,
+  confirmText: 'Delete',
+  danger: true,
+});
+
+const SEARCH_BASED_LAYOUTS = {
+  ...BASE_LAYOUTS,
+  [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX],
+  [ROLE.PRODUCTS]: [LAYOUT_TYPE.LIST, { incremental: true, infiniteScroll: true }],
+  [ROLE.KEYWORDS]: [LAYOUT_TYPE.TEXT, { raw: true }],
+  [ROLE.TOTAL]: [LAYOUT_TYPE.TEXT, { raw: true, templates: { content: totalContent } }],
+  [ROLE.FACETS]: [LAYOUT_TYPE.FACETS],
+  [ROLE.SORT]: [LAYOUT_TYPE.SELECT],
+  [ROLE.MORE]: [LAYOUT_TYPE.MORE_BUTTON],
+};
+
+export const defaultLayouts = Object.freeze({
+
+  'ask': Object.freeze({
+    ...ANSWER_BASED_LAYOUTS,
+    [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX, { templates: { buttonIcon: 'send' } }],
+    [ROLE.REASONING]: LAYOUT_TYPE.TYPEWRITER,
+    [ROLE.RELATED_RESOURCES]: [LAYOUT_TYPE.LIST, { incremental: true, itemType: 'article' }],
+    [ROLE.QUERY_SUGGESTIONS]: LAYOUT_TYPE.OPTION_LIST,
+    [ROLE.FOLLOW_UP_QUESTIONS]: LAYOUT_TYPE.OPTION_LIST,
+  }),
+
+  'search': Object.freeze({
+    ...SEARCH_BASED_LAYOUTS,
+  }),
+
+  'hybrid-search': Object.freeze({
+    ...ANSWER_BASED_LAYOUTS,
+    ...SEARCH_BASED_LAYOUTS,
+    [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX, { placeholder: '' }],
+    [ROLE.QUESTION]: [LAYOUT_TYPE.TEXT, { raw: true }],
+    [ROLE.SOURCES]: [
+      LAYOUT_TYPE.HORIZONTAL,
+      {
+        incremental: true,
+        itemType: 'article',
+        templates: {
+          ordered: true,
+          article: compactArticle,
+          articleInfoBlock: compactArticleInfoBlock
+        }
+      }
+    ],
+  }),
+
+  'recommendation': Object.freeze({
+    ...BASE_LAYOUTS,
+    [ROLE.PRODUCTS]: LAYOUT_TYPE.LIST,
+  }),
+
+  'explore': Object.freeze({
+    ...BASE_LAYOUTS,
+    [ROLE.RELATED_QUESTIONS]: [LAYOUT_TYPE.LIST, { itemType: 'question', link: { rel: 'noopener nofollow' } }], // TODO: should define by useLink()
+    [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX, { placeholder: 'Ask a question' }],
+  }),
+
+  // the thread list's own roles plus its thread item subworkflows' — the
+  // items share the history workflow's options, so one bag serves both.
+  // The item roles: the item-container layout (the standard container
+  // duties plus the items' context menus, driven by the item-menu
+  // data-role contract — it only ever drives its own item's menu, so
+  // hosting it on the panel is inert, and the panel never triggers the
+  // auto logo either, having no main-role component), the title text
+  // (with a presentation fallback for untitled threads), the context
+  // menu's rename (ask-then-submit through the prompt dialog) and delete
+  // (confirm-then-submit) buttons, and its subscription toggle — a menu
+  // item like the other two, so text only, labeled by the action a click
+  // takes rather than by the state
+  'history': Object.freeze({
+    ...BASE_LAYOUTS,
+    [ROLE.CONTAINER]: [LAYOUT_TYPE.ITEM_CONTAINER, { logo: false }],
+    [ROLE.THREADS]: [LAYOUT_TYPE.THREADS, { itemType: 'thread', incremental: true, infiniteScroll: true }],
+    [ROLE.NEW_THREAD]: [LAYOUT_TYPE.BUTTON, { icon: 'plus', text: 'New chat' }],
+    [ROLE.TITLE]: [LAYOUT_TYPE.TEXT, { tag: 'div', templates: { content: (layout, { value }) => escapeHtml(value || 'Untitled') } }],
+    [ROLE.RENAME]: [LAYOUT_TYPE.BUTTON, { ...THREAD_CONTROL_OPTIONS, text: 'Rename', prompt: THREAD_RENAME_PROMPT }],
+    [ROLE.DELETE]: [LAYOUT_TYPE.BUTTON, { ...THREAD_CONTROL_OPTIONS, text: 'Delete', confirm: THREAD_DELETE_CONFIRM }],
+    [ROLE.SUBSCRIPTION]: [LAYOUT_TYPE.CHECKBOX, { text: 'Subscribe', checkedText: 'Unsubscribe' }],
+  }),
+
+  // the conversation panel's own roles plus its message item subworkflows'
+  // — the items share the conversation workflow's options, so one bag
+  // serves both. The message roles: the answer-based layouts minus the
+  // 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),
+  // 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
+  'conversation': Object.freeze({
+    ...MESSAGE_LAYOUTS,
+    [ROLE.CONTAINER]: [LAYOUT_TYPE.CONTAINER, { logo: false }],
+    [ROLE.QUESTION]: LAYOUT_TYPE.QUESTION,
+    [ROLE.ANSWER]: [LAYOUT_TYPE.TYPEWRITER, { instant: true }],
+    [ROLE.SOURCES]: [
+      LAYOUT_TYPE.HORIZONTAL,
+      {
+        incremental: true,
+        itemType: 'article',
+        templates: {
+          ordered: true,
+          article: compactArticle,
+          articleInfoBlock: compactArticleInfoBlock
+        }
+      }
+    ],
+    [ROLE.MESSAGES]: [LAYOUT_TYPE.MESSAGES, { itemType: 'message', incremental: true, infiniteScroll: true }],
+    [ROLE.QUERY]: [LAYOUT_TYPE.SEARCH_BOX, { placeholder: 'Ask a follow-up question', clearOnSubmit: true, blurOnSubmit: false, disableWhenOngoing: true, templates: { buttonIcon: 'send' } }],
+    [ROLE.TITLE]: [LAYOUT_TYPE.TEXT, { tag: 'div' }],
+    [ROLE.RENAME]: [LAYOUT_TYPE.BUTTON, { ...THREAD_CONTROL_OPTIONS, icon: 'pencil', prompt: THREAD_RENAME_PROMPT }],
+    [ROLE.DELETE]: [LAYOUT_TYPE.BUTTON, { ...THREAD_CONTROL_OPTIONS, icon: 'trash', confirm: THREAD_DELETE_CONFIRM }],
+    [ROLE.SUBSCRIPTION]: [LAYOUT_TYPE.CHECKBOX, { icon: 'bell', text: 'Subscribe', checkedIcon: 'bell-fill', checkedText: 'Subscribed' }],
+  }),
+
+});

package/src/element/container/index.js

@@ -1,5 +1,9 @@
 export { default as MisoAskElement } from './miso-ask.js';
 export { default as MisoExploreElement } from './miso-explore.js';
+export { default as MisoHistoryElement } from './miso-history.js';
+export { default as MisoConversationElement } from './miso-conversation.js';
+export { default as MisoMessageItemElement } from './miso-message-item.js';
+export { default as MisoThreadItemElement } from './miso-thread-item.js';
 export { default as MisoHybridSearchElement } from './miso-hybrid-search.js';
 export { default as MisoSearchElement } from './miso-search.js';
 export { default as MisoRecommendationElement } from './miso-recommendation.js';

package/src/element/container/miso-ask.js

@@ -22,13 +22,13 @@ export default class MisoAskElement extends MisoContainerElement {
 
   _getWorkflow(client) {
     if (this.boundToActiveWorkflow) {
-      return client.ui.asks.active;
+      return client.workflows.asks.active;
     }
     return this._getWorkflowByParentQuestionId(client, this.parentQuestionId);
   }
 
   _getWorkflowByParentQuestionId(client, id) {
-    return client.ui.asks.getByParentQuestionId(id, { autoCreate: true });
+    return client.workflows.asks.getByParentQuestionId(id, { autoCreate: true });
   }
 
   // properties //
@@ -66,7 +66,7 @@ export default class MisoAskElement extends MisoContainerElement {
   async connectedCallback() {
     await super.connectedCallback();
     if (document.body.contains(this)) { // in case already disconnected
-      const context = this._client.ui.asks;
+      const context = this._client.workflows.asks;
       this._unsubscribes = [
         ...(this._unsubscribes || []),
         context.on('active', (event) => {

package/src/element/container/miso-conversation.js

@@ -0,0 +1,19 @@
+import MisoContainerElement from './miso-container.js';
+
+const TAG_NAME = 'miso-conversation';
+
+export default class MisoConversationElement extends MisoContainerElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  static get observedAttributes() {
+    return MisoContainerElement.observedAttributes;
+  }
+
+  _getWorkflow(client) {
+    return client.workflows.conversation;
+  }
+
+}

package/src/element/container/miso-explore.js

@@ -13,7 +13,7 @@ export default class MisoExploreElement extends MisoUnitElement {
   }
 
   _getWorkflowByUnitId(client, unitId) {
-    return client.ui.explores.get(unitId);
+    return client.workflows.explores.get(unitId);
   }
 
 }

package/src/element/container/miso-history.js

@@ -0,0 +1,19 @@
+import MisoContainerElement from './miso-container.js';
+
+const TAG_NAME = 'miso-history';
+
+export default class MisoHistoryElement extends MisoContainerElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  static get observedAttributes() {
+    return MisoContainerElement.observedAttributes;
+  }
+
+  _getWorkflow(client) {
+    return client.workflows.history;
+  }
+
+}

package/src/element/container/miso-hybrid-search.js

@@ -13,7 +13,7 @@ export default class MisoHybridSearchElement extends MisoContainerElement {
   }
 
   _getWorkflow(client) {
-    return client.ui.hybridSearch;
+    return client.workflows.hybridSearch;
   }
 
 }

package/src/element/container/miso-message-item.js

@@ -0,0 +1,94 @@
+import MisoContainerElement from './miso-container.js';
+import { getContainer } from '../utils.js';
+
+const TAG_NAME = 'miso-message-item';
+
+const ATTR_QUESTION_ID = 'question-id';
+const OBSERVED_ATTRIBUTES = Object.freeze([
+  ...MisoContainerElement.observedAttributes,
+  ATTR_QUESTION_ID,
+]);
+
+/**
+ * A container element for one message (question-answer pair) of the
+ * conversation panel, placed inside <miso-conversation> — a container
+ * element inside another container element hosting an item subworkflow (the
+ * `message` workflow). Normally bound implicitly: the messages layout
+ * renders one <miso-message-item> per item and assigns the workflow off the item
+ * binding (element.workflow = parent workflow's _getMessageWorkflow(record)),
+ * which also covers a just-posted message that has no question id yet. A
+ * `question-id` attribute binds explicitly instead, through the parent
+ * container's workflow. Role elements inside (question, answer, sources,
+ * ...) bind to the message workflow as usual — getContainer() resolves to
+ * the closest container ancestor.
+ */
+export default class MisoMessageItemElement extends MisoContainerElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+
+  // properties //
+  get questionId() {
+    return this.getAttribute(ATTR_QUESTION_ID) || undefined;
+  }
+
+  set questionId(value) {
+    value = value !== undefined ? `${value}` : undefined;
+    if (value === this.questionId) {
+      return;
+    }
+    if (value) {
+      this.setAttribute(ATTR_QUESTION_ID, value);
+    } else {
+      this.removeAttribute(ATTR_QUESTION_ID);
+    }
+  }
+
+  _getWorkflow(client) {
+    const { questionId } = this;
+    if (!questionId) {
+      // implicitly bound: the messages layout assigns element.workflow off
+      // the item binding — keep whatever is (or will be) assigned
+      return this._workflow;
+    }
+    const container = this._getParentContainer();
+    const workflow = container && container.workflow;
+    // the parent workflow hands out the item subworkflow; the parent binds
+    // its own workflow first (its connectedCallback resolves earlier), so
+    // it is normally present by now
+    return workflow && typeof workflow._getMessageWorkflow === 'function' ? workflow._getMessageWorkflow(questionId) : undefined;
+  }
+
+  _getParentContainer() {
+    try {
+      return this.parentNode ? getContainer(this.parentNode) : undefined;
+    } catch (_) {
+      return undefined; // not inside a container element
+    }
+  }
+
+  attributeChangedCallback(attr, oldValue, newValue) {
+    switch (attr) {
+      case ATTR_QUESTION_ID:
+        this._handleQuestionIdUpdate(oldValue, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
+    }
+  }
+
+  _handleQuestionIdUpdate(oldValue, newValue) {
+    oldValue = oldValue || undefined; // null -> undefined
+    newValue = newValue || undefined;
+    if (oldValue === newValue || !this._client) {
+      return;
+    }
+    this._setWorkflow(this._getWorkflow(this._client));
+  }
+
+}

package/src/element/container/miso-recommendation.js

@@ -13,7 +13,7 @@ export default class MisoRecommendationElement extends MisoUnitElement {
   }
 
   _getWorkflowByUnitId(client, unitId) {
-    return client.ui.recommendations.get(unitId);
+    return client.workflows.recommendations.get(unitId);
   }
 
 }

package/src/element/container/miso-search.js

@@ -13,7 +13,7 @@ export default class MisoSearchElement extends MisoContainerElement {
   }
 
   _getWorkflow(client) {
-    return client.ui.search;
+    return client.workflows.search;
   }
 
 }