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

package/dist/cjs/util/confirm.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = confirm;
+var _modal = require("./modal.js");
+const DEFAULT_CLASSNAME = 'miso-confirm';
+
+/**
+ * Show a modal confirmation dialog (a native <dialog>), resolving to whether
+ * the user confirmed. Cancel button, backdrop click, and the Escape key all
+ * resolve to false. Exposed as `MisoClient.ui.confirm()`.
+ */
+function confirm({
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+  className = DEFAULT_CLASSNAME
+} = {}) {
+  return (0, _modal.openModal)({
+    className,
+    title,
+    message,
+    confirmText,
+    cancelText,
+    danger,
+    result: () => true,
+    cancelValue: false
+  });
+}

package/dist/cjs/util/modal.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openModal = openModal;
+var _commons = require("@miso.ai/commons");
+/**
+ * The shared modal dialog core of confirm() and prompt(): a native <dialog>
+ * with title, message, an optional body, and cancel/confirm actions. Resolves
+ * with `result(dialog)` when confirmed; the cancel button, a backdrop click,
+ * and the Escape key all resolve with `cancelValue`.
+ */
+function openModal({
+  className,
+  title,
+  message,
+  body = '',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+  onOpen,
+  result = () => true,
+  cancelValue
+} = {}) {
+  return new Promise(resolve => {
+    const dialog = document.createElement('dialog');
+    dialog.className = className;
+    dialog.innerHTML = [title ? `<div class="${className}__title">${(0, _commons.escapeHtml)(title)}</div>` : '', message ? `<div class="${className}__message">${(0, _commons.escapeHtml)(message)}</div>` : '', body, `<div class="${className}__actions">`, `<button type="button" class="${className}__button ${className}__cancel-button" data-role="cancel">${(0, _commons.escapeHtml)(cancelText)}</button>`, `<button type="button" class="${className}__button ${className}__confirm-button${danger ? ` ${className}__confirm-button--danger` : ''}" data-role="confirm">${(0, _commons.escapeHtml)(confirmText)}</button>`, `</div>`].join('');
+    dialog.addEventListener('click', event => {
+      if (event.target.closest('[data-role="confirm"]')) {
+        dialog.close('confirm');
+      } else if (event.target.closest('[data-role="cancel"]') || event.target === dialog) {
+        dialog.close(); // cancel button or backdrop click
+      }
+    });
+    dialog.addEventListener('close', () => {
+      const value = dialog.returnValue === 'confirm' ? result(dialog) : cancelValue;
+      dialog.remove();
+      resolve(value);
+    }, {
+      once: true
+    });
+    document.body.appendChild(dialog);
+    dialog.showModal();
+    onOpen && onOpen(dialog);
+  });
+}

package/dist/cjs/util/prompt.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = prompt;
+var _commons = require("@miso.ai/commons");
+var _modal = require("./modal.js");
+const DEFAULT_CLASSNAME = 'miso-prompt';
+
+/**
+ * Show a modal input dialog (a native <dialog>), resolving to the entered
+ * (trimmed) text when confirmed. Cancel button, backdrop click, and the
+ * Escape key all resolve to undefined. The Enter key confirms. Exposed as
+ * `MisoClient.ui.prompt()`.
+ */
+function prompt({
+  title,
+  message,
+  value = '',
+  placeholder,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  className = DEFAULT_CLASSNAME
+} = {}) {
+  return (0, _modal.openModal)({
+    className,
+    title,
+    message,
+    body: `<input class="${className}__input" type="text" data-role="input" value="${(0, _commons.escapeHtml)(value)}"${placeholder ? ` placeholder="${(0, _commons.escapeHtml)(placeholder)}"` : ''}>`,
+    confirmText,
+    cancelText,
+    onOpen: dialog => {
+      const input = dialog.querySelector('[data-role="input"]');
+      input.addEventListener('keydown', event => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          dialog.close('confirm');
+        }
+      });
+      input.focus();
+      input.select();
+    },
+    result: dialog => dialog.querySelector('[data-role="input"]').value.trim(),
+    cancelValue: undefined
+  });
+}

package/dist/cjs/version.js

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

package/package.json

@@ -12,8 +12,8 @@
     "access": "public"
   },
   "scripts": {
-    "build:clean": "npx rimraf dist",
-    "build:cjs": "BABEL_ENV=cjs npx babel src --root-mode upward --out-dir dist/cjs",
+    "build:clean": "rimraf dist",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir dist/cjs",
     "build": "npm run build:clean && npm run build:cjs"
   },
   "repository": {
@@ -30,7 +30,8 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.13.2-beta.1"
+    "@miso.ai/commons": "1.14.0-beta.2",
+    "@miso.ai/client-sdk-workflow": "1.14.0-beta.2"
   },
-  "version": "1.13.2-beta.1"
+  "version": "1.14.0-beta.2"
 }

package/src/CLAUDE.md

@@ -1,112 +1,60 @@
 # Client SDK UI
 
-The UI package (`std:ui` plugin) provides the presentation layer for Miso SDK, including custom elements, workflows, and rendering infrastructure.
+The UI package (`std:ui` plugin) provides the presentation layer for Miso SDK: custom elements, layouts, and rendering infrastructure.
 
-## Architecture Overview
+The workflow layer (workflow classes, actors, hub, default-options store) lives in `@miso.ai/client-sdk-workflow` — see `packages/client-sdk-workflow/CLAUDE.md` for the hub-and-spoke architecture, workflow class hierarchy, roles/status model, and the end-to-end data flow. This package plugs elements and layouts into those workflows.
 
-// TODO: wrong concept
+## Architecture Overview
 
 ```
-┌─────────────────────────────────────────────────────────────────┐
-│                         UiPlugin                                │
-│  - Registered as 'std:ui'                                       │
-│  - Injects client.ui on each MisoClient instance                │
-│  - Manages layouts, combo, and extensions                       │
-└─────────────────────────────────────────────────────────────────┘
-                                │
-          ┌─────────────────────┼─────────────────────┐
-          ▼                     ▼                     ▼
-   ┌─────────────┐      ┌─────────────┐      ┌─────────────┐
-   │  Workflows  │      │  Elements   │      │   Layouts   │
-   │             │◄────►│             │◄────►│             │
-   │  (Logic)    │      │ (Custom El) │      │ (Rendering) │
-   └─────────────┘      └─────────────┘      └─────────────┘
-          │
-          ▼
-   ┌─────────────┐
-   │   Actors    │
-   │  (Hub I/O)  │
-   └─────────────┘
+UiPlugin ('std:ui', singleton)
+ ├─ ensures WorkflowPlugin ('std:workflow') is installed
+ ├─ provides its Layouts registry to the workflow plugin (setLayouts)
+ ├─ seeds default layout options (defaults.js) + ask followUp template
+ │  into the workflow plugin's defaults store
+ ├─ Layouts registry (layout classes, keyed by type)
+ ├─ defines <miso-*> custom elements
+ └─ injects client.ui on each MisoClient instance; its workflow accessors
+    (search, asks, ...) delegate to client.workflows for backward compatibility
 ```
 
-## Core Directories
+Key points that are easy to get wrong:
 
-// TODO: wrong concept
+- **Elements render nothing.** A container element (e.g. `<miso-ask>`) locates its workflow on `connectedCallback()` and registers itself; child role elements register through their container. The workflow's `ViewsActor` then creates one `ViewActor` per element, pairing it with a **layout instance** for that role. The layout writes DOM into the element.
+- Layouts are **instances created per view** from classes registered in the plugin's `Layouts` registry (`layout.type` → class), chosen by the workflow's `layouts` options. They are not templates.
+- Default layout options per workflow live in `src/defaults.js`, keyed by workflow name, and are seeded into the workflow plugin's defaults store at install — they are not baked into the workflow classes.
+
+## Core Directories
 
 | Directory | Purpose |
 |-----------|---------|
-| `workflow/` | Orchestration logic for features (Ask, Search, Explore, etc.) |
-| `element/` | Custom HTML elements (`<miso-*>` tags) |
-| `actor/` | Hub-connected actors for data, views, tracking, interactions |
-| `layout/` | Rendering templates for different UI roles |
-| `combo/` | Pre-built composite UI configurations (deprecated) |
-| `trait/` | Reusable behavior mixins |
-| `defaults/` | Default configurations |
-
-## Key Concepts
-
-### Workflows (`workflow/`)
-
-// TODO: wrong concept
-
-State machines that orchestrate API calls and UI updates. Each workflow manages:
-- Session lifecycle (restart, query, response)
-- Data flow via Hub
-- View state synchronization
-- Interaction tracking
-
-**Available workflows**: `Ask`, `Search`, `HybridSearch`, `Explore`, `Recommendation`
+| `element/` | Custom HTML elements (`<miso-*>`): thin, render-free DOM anchors that bind themselves to workflows |
+| `layout/` | Layout classes (rendering logic), registered by `type` in the plugin's registry, instantiated per view |
+| `combo/` | `AskCombo`: programmatic pre-built ask UI (deprecated) |
+| `trait/` | Reusable behaviors exposed as `MisoClient.ui.traits` (e.g. `CollapsibleTrait`) |
+| `defaults/` | Default templates/phrases/controls for ask and hybrid-search UIs, exposed as `MisoClient.ui.defaults` |
+| `defaults.js` | Default layout options of each workflow, seeded into the workflow plugin's store |
+| `constants.js` | UI-only constants (`LAYOUT_TYPE`, data attributes); re-exports workflow constants (`ROLE`, `STATUS`, ...) for convenience |
 
-### Elements (`element/`)
+## Elements (`element/`)
 
-Web Components following the `<miso-*>` naming convention:
+Web Components (`<miso-*>`). They contain **no rendering or data logic** — they only establish the DOM binding:
 
-- **Containers**: Top-level elements that own a workflow
-  - `<miso-ask>`, `<miso-search>`, `<miso-explore>`, `<miso-recommendation>`, `<miso-hybrid-search>`
+- **Containers** (`element/container/`): own the workflow binding for their subtree.
+  - `<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>` 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 (a list of `thread` items — the `<li>` itself is the item, carrying `data-role="item"`, the thread id and the state attributes; the thread template renders it directly, skipping the stock li-wrapper + role-body split that exists for anchor-bodied product items; 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; the role mapping is a plain slice) — and the list renders incrementally: appends render new items, while in-place state changes on existing items (selected/unread) are applied by an attribute-sync pass after each render, reading fresh values off the item bindings); the conversation uses the `messages` layout with `message` items (question bubble + answer body, with a per-message loading placeholder while answer contents are fetched), rendered incrementally; each question bubble carries its authorship — `data-author` ('Written by Miso' for questions whose `metadata.miso_generated_by` is `answer_update_monitor`, read via `getGeneratedBy`; the user's own questions carry no label; the label renders as a CSS `attr()` badge overlapping the bubble's top-left border, and monitor-generated bubbles take a distinct background) — stamped by the item template and re-applied by the sync pass, since the metadata arrives with the answers response after the stub render; the item template leaves question/answer contents blank, and a post-render pass (`_syncMessages`) fills them in place — finished answers via the `std:ui-markdown` plugin's pure `transform()`, and `live`/streaming answers (posted follow-ups) via a per-message typewriter (progressive markdown renderer + paced cursor). 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)` — 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>` sends questions through the hub `query` field — 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. The `threads` layout's post-render sync also applies in-place record changes (title, `data-thread-id`) so renames and placeholder→real-thread resolutions reflect without item re-renders. A click on a thread item is a navigation action, not a content-engagement click: the layout overrides `_onClick` to emit a `select` view event (no click tracking), which the History workflow handles with `select()`. Each item also carries a context menu (vertical dots, revealed on hover) with thread actions, each going through a shared modal dialog util (promise-returning native `<dialog>`s on a common core, `util/modal.js`): rename asks via `prompt()` (`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 emits a `rename` view event, handled by the History workflow with `rename()`; delete asks via `confirm()` (`util/confirm.js`, exposed as `MisoClient.ui.confirm`) and emits a `delete` view event, handled with `delete()`.
+- **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>`.
+- **Combos** (`element/combo/`): pre-configured composite `<miso-ask-combo>` (deprecated).
 
-- **Roles**: Child elements bound to specific data roles
-  - Query: `<miso-query>`
-  - Results: `<miso-answer>`, `<miso-sources>`, `<miso-products>`, `<miso-results>`
-  - Navigation: `<miso-follow-up-questions>`, `<miso-related-questions>`
-  - Utility: `<miso-feedback>`, `<miso-error>`, `<miso-facets>`, `<miso-total>`
+Connecting an element to the DOM is what triggers view creation: container `connectedCallback` → `workflow._views.addContainer/addComponent` → `ViewActor` created with a layout instance → rendered as soon as data exists.
 
-- **Combos**: Pre-configured composite elements (deprecated)
-  - `<miso-ask-combo>`
+## Layouts (`layout/`)
 
-### Actors (`actor/`)
+Rendering strategies. A layout class has a static `type` (e.g. `'list'`, `'typewriter'`, `'search-box'`) and is registered in the plugin registry; workflows pick layouts per role via options (`useLayouts({ answer: ['typewriter', {...}] })`). `ViewsActor` instantiates one layout object per view.
 
-Components that subscribe to and publish on the Hub:
-- `DataActor` - Fetches data from API based on requests
-- `ViewsActor` - Manages view state for each role
-- `TrackersActor` - Handles impression/click/viewable tracking
-- `InteractionsActor` - Sends interaction events to API
-- `SessionMaker` - Manages session lifecycle
-
-### Hub
-
-Central pub/sub state manager connecting workflows and actors. Fields include:
-- `session` - Current session object
-- `request` - API request parameters
-- `data` - Response data
-- `view(role)` - View state per role
-- `tracker(role, event)` - Tracking state
-
-### Layouts (`layout/`)
-
-Rendering strategies for each role. Registered via `plugin.layouts.register()`.
-
-Types: `input`, `list`, `text`, `container`, `error`, `button`, etc.
-
-### Roles & Status
-
-**Roles** (from `constants.js`): Define what data a view displays
-- Content: `answer`, `question`, `sources`, `products`, `results`
-- Navigation: `follow_up_questions`, `related_questions`, `query_suggestions`
-- Meta: `feedback`, `error`, `total`, `facets`
-
-**Status**: Workflow/view lifecycle states
-- `initial` → `loading` → `ready` / `erroneous`
-- `ongoing` (streaming) → `done`
+Contract: `render(element, data, { notifyUpdate })` is mandatory; `initialize(view)`, `unrender(element)`, `syncSize(element)`, `destroy()` are optional. `notifyUpdate(state)` is how a layout reports its view state back (published to `view:<role>` on the hub) — this drives workflow lifecycle events. A layout can also write to the hub (e.g. `SearchBoxLayout` submits `fields.query()`).
 
 ## Entry Point
 
@@ -115,20 +63,15 @@ Types: `input`, `list`, `text`, `container`, `error`, `button`, etc.
 // Installed automatically with full SDK, or manually:
 MisoClient.plugins.use('std:ui');
 
-// Access via client instance:
+// Access via client instance (canonical, injected by std:workflow):
 const client = new MisoClient({ apiKey });
-client.ui.ask;           // Ask workflow
-client.ui.search;        // Search workflow
-client.ui.recommendations; // Recommendations
+client.workflows.ask;            // root Ask workflow (=== client.workflows.asks.root)
+client.workflows.asks;           // Asks context (follow-up chain, .active, .root)
+client.workflows.search;         // Search workflow
+client.workflows.hybridSearch;   // HybridSearch workflow
+client.workflows.recommendations.get(unitId); // Recommendation workflow per unit
+client.workflows.explores.get(unitId);        // Explore workflow per unit
+
+// client.ui.search, client.ui.asks, client.ui.sources, ... delegate to
+// client.workflows for backward compatibility; client.ui's own surface is only `ready`.
 ```
-
-## Event Flow
-
-1. User interacts with `<miso-query>` element (ask, hybrid-search, search, etc.), or start by calling `start()` on the workflow instance (explore, recommendations).
-2. Container element triggers workflow request
-3. Workflow publishes request to Hub
-4. `DataActor` fetches from API, publishes response
-5. `ViewsActor` updates view states per role
-6. Layout renders updated content in elements
-7. `TrackersActor` observes visibility, triggers interactions
-8. `InteractionsActor` sends tracking data to API

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,11 @@ 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',
 };
 
 // CC0 SVGs
@@ -31,9 +37,14 @@ 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 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];
 
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -47,7 +58,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,46 @@
+// 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',
+  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',
+  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;