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

package/src/layout/list/threads.js

@@ -0,0 +1,166 @@
+import { isThreadUnread } from '@miso.ai/client-sdk-workflow';
+import { LAYOUT_TYPE } from '../../constants.js';
+import CollectionLayout from './collection.js';
+import { setOrRemoveAttribute } from '../../util/dom.js';
+
+const TYPE = LAYOUT_TYPE.THREADS;
+const DEFAULT_CLASSNAME = 'miso-threads';
+
+/**
+ * The thread list of the chat history interface: a shell that renders one
+ * <miso-thread-item> container element per thread item, incrementally —
+ * fresh items land at either end of the list: a newly created thread
+ * renders as a prepended item (the list is newest-first), while an older
+ * page fetched by the more flow (infinite scroll: the collection layout's
+ * stock trigger, viewable at the list's bottom, fires the `more` hub
+ * field) renders as appended items — told apart by which boundary the
+ * already-rendered records line up with. The content
+ * of an item is not rendered here: each <miso-thread-item> is assigned its item
+ * subworkflow (workflow._getThreadWorkflow, off the item binding) in the
+ * post-render sync pass, and the role elements inside (the title, and the
+ * context menu's rename/delete buttons) render through that workflow's own
+ * layouts — so a record change re-renders the affected item's roles alone.
+ *
+ * The shell keeps the list-level behaviors. Selection comes with the data:
+ * the history workflow stamps `selectedThreadId` into its value and
+ * decorates each thread record with a `selected` flag, so any selection
+ * change flows down the regular data path; in-place state changes on
+ * existing items (selected, unread, the thread identity of a settled
+ * placeholder) are applied by `_syncItems` after each render, reading the
+ * fresh values off the item bindings — no item re-render needed. Each item
+ * carries a context menu (vertical dots), but that is the thread workflow's
+ * too: its item-container layout inserts and toggles it — the shell only
+ * keeps menu clicks (by their item-menu data-roles) from selecting.
+ */
+export default class ThreadsLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, ...options } = {}) {
+    super({ className, ...options });
+  }
+
+  // item identity: the thread id, or the local placeholder id standing in
+  // for it while a thread is being created — the workflow adopts the thread
+  // id at the settle, so the element and its workflow survive it
+  _getItemKey(thread) {
+    return thread.thread_id || thread.placeholder_id || thread;
+  }
+
+  // incremental renders cover a pure prepend (a created thread) or a pure
+  // append (an older page) — anything else re-renders in full
+  _shallRenderIncrementally(state, rendered) {
+    if (!super._shallRenderIncrementally(state, rendered)) {
+      return false;
+    }
+    const values = this._getItems(state) || [];
+    const renderedValues = rendered.value;
+    const count = values.length - renderedValues.length;
+    return count === 0 || // in-place changes only
+      this._getItemKey(values[0]) === this._getItemKey(renderedValues[0]) || // appended
+      this._getItemKey(values[count]) === this._getItemKey(renderedValues[0]); // prepended
+  }
+
+  // the fresh items land at the head (a newly created thread — the list is
+  // newest-first) or at the tail (an older page fetched by the more flow):
+  // told apart by which boundary the already-rendered records line up with
+  _html(state, rendered, incremental) {
+    if (!incremental) {
+      return this.templates.root(this, state);
+    }
+    const values = this._getItems(state) || [];
+    const renderedValues = rendered.value;
+    const count = values.length - renderedValues.length;
+    if (count === 0) {
+      return '';
+    }
+    if (this._getItemKey(values[0]) === this._getItemKey(renderedValues[0])) {
+      const fresh = values.slice(renderedValues.length);
+      return {
+        position: 'beforeend',
+        items: this.templates.items(this, state, fresh, { offset: renderedValues.length }),
+      };
+    }
+    const fresh = values.slice(0, count);
+    return {
+      position: 'afterbegin',
+      items: this.templates.items(this, state, fresh, { offset: 0 }),
+    };
+  }
+
+  _render(element, { state }, { notifyUpdate }) {
+    const { incremental, html } = state;
+    if (incremental) {
+      if (html) {
+        this._getListElement(element).insertAdjacentHTML(html.position, html.items);
+      } else {
+        notifyUpdate(false);
+      }
+    } else {
+      element.innerHTML = html;
+    }
+  }
+
+  _afterRender(element, state) {
+    super._afterRender(element, state); // syncs bindings to the latest values
+    this._syncWorkflows(element);
+    this._syncItems(element);
+  }
+
+  // assign each <miso-thread-item> its item subworkflow, off the item binding
+  _syncWorkflows(element) {
+    const workflow = this._view && this._view.workflow;
+    if (!workflow || typeof workflow._getThreadWorkflow !== 'function') {
+      return;
+    }
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (binding && item.isContainer) {
+        item.workflow = workflow._getThreadWorkflow(binding.value);
+      }
+    }
+  }
+
+  // sync in-place item state changes from the bound values onto the existing
+  // item elements: selection/unread state, and the thread identity of a
+  // placeholder that settled into its real record — the item contents render
+  // through the thread workflows, outside this layout's render cycle
+  _syncItems(element) {
+    for (const item of this._getItemElements(element)) {
+      const binding = this._bindings.get(item);
+      if (!binding) {
+        continue;
+      }
+      const { value } = binding;
+      setOrRemoveAttribute(item, 'data-selected', value.selected ? '' : undefined);
+      setOrRemoveAttribute(item, 'data-unread', isThreadUnread(value) ? '' : undefined);
+      setOrRemoveAttribute(item, 'data-thread-id', value.thread_id || undefined);
+    }
+  }
+
+  // a click on a thread item means selection — a navigation action, not a
+  // content-engagement click: emit a select view event and skip click tracking
+  _onClick(event) {
+    if (event.target.closest(`[data-role="item-menu-button"], [data-role="item-menu"]`)) {
+      return; // the item's own context menu, owned by its container layout
+    }
+    const element = event.target.closest(`[data-role="item"]`);
+    if (!element) {
+      return;
+    }
+    const binding = this._bindings.get(element);
+    if (!binding) {
+      return;
+    }
+    const { session } = this._view._state;
+    const { value } = binding;
+    this._view._emit('select', { session, value, element: binding.element, domEvent: event });
+  }
+
+}

package/src/layout/mixin/trackable.js

@@ -1,7 +1,7 @@
 import { mixin } from '@miso.ai/commons';
 import Bindings from '../../util/bindings.js';
 import Viewables from '../../util/viewables.js';
-import { validateClick, markAsTracked } from '../../util/trackers.js';
+import { validateClick, markAsTracked } from '@miso.ai/client-sdk-workflow';
 
 export function makeTrackable(prototype) {
   mixin(prototype, TrackableMixin.prototype);
@@ -29,8 +29,7 @@ export class TrackableMixin {
   }
 
   _getItemKey(value) {
-    // TODO: ad-hoc!
-    return value.product_id || value.text || value.id || value;
+    return this._view.tracker.getItemKey(value);
   }
 
   _getItems(state) {

package/src/layout/mixin/triggerable.js

@@ -1,6 +1,6 @@
 import { mixin, viewable as whenViewable } from '@miso.ai/commons';
 import { STATUS } from '../../constants.js';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 
 export function makeTriggerable(prototype) {
   mixin(prototype, TriggerableMixin.prototype);

package/src/layout/radio/feedback.js

@@ -1,8 +1,9 @@
-import { fields } from '../../actor/index.js';
+import { LAYOUT_TYPE } from '../../constants.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import RadioLayout from './radio.js';
 import { THUMB } from '../svgs.js';
 
-const TYPE = 'feedback';
+const TYPE = LAYOUT_TYPE.FEEDBACK;
 const DEFAULT_CLASSNAME = 'miso-feedback';
 
 const OPTIONS = [ 'helpful', 'unhelpful' ];

package/src/layout/templates.js

@@ -1,4 +1,6 @@
 import { escapeHtml } from '@miso.ai/commons';
+import { isThreadUnread } from '@miso.ai/client-sdk-workflow';
+import { getIcon } from '../asset/svgs.js';
 import { ATTR_DATA_MISO_PRODUCT_ID } from '../constants.js';
 
 export function requiresImplementation(...names) {
@@ -30,6 +32,101 @@ export function question(layout, state, data) {
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 
+/**
+ * A thread item is a <miso-thread-item> container element hosting the thread
+ * item subworkflow — the threads layout is a shell: it assigns the workflow
+ * (and syncs the item-level attributes) in its post-render pass, and the
+ * content renders through the thread workflow's own layouts: the title role
+ * element in the body, plus the context menu (with the
+ * rename/subscription/delete role elements) inserted as chrome by the workflow's item-container layout. The
+ * item state renders as attributes right in the template (and stays in
+ * sync thereafter): the thread identity, the selection, and the unread
+ * mark.
+ */
+export function thread(layout, state, data) {
+  const { className, templates } = layout;
+  const threadId = data.thread_id;
+  const threadIdAttr = threadId ? ` data-thread-id="${threadId}"` : '';
+  const unreadAttr = isThreadUnread(data) ? ' data-unread' : '';
+  const selectedAttr = data.selected ? ' data-selected' : '';
+  return [
+    `<miso-thread-item class="${className}__item-body" data-role="item"${threadIdAttr}${unreadAttr}${selectedAttr}>`,
+    (templates.threadBody || threadBody)(layout, data),
+    `</miso-thread-item>`,
+  ].join('');
+}
+
+export function threadBody(layout, data) {
+  const { className, templates } = layout;
+  return `<miso-title class="${className}__title"></miso-title>` +
+    (templates.threadMenuBlock || threadMenuBlock)(layout, data);
+}
+
+// the item-menu data-roles are the contract with the thread workflow's
+// item-container layout, which drives the menu's open/close behavior; the
+// menu items are the thread workflow's own controls, rendered by the
+// generic button layout with a prompt (rename) or a confirm (delete) dialog,
+// and by the checkbox layout (the subscription toggle)
+export function threadMenuBlock({ className }) {
+  return `<button type="button" class="${className}__menu-button" data-role="item-menu-button" aria-label="Thread actions" aria-haspopup="menu">${getIcon('dots-vertical')}</button>` +
+    `<div class="${className}__menu" data-role="item-menu" role="menu" hidden>` +
+    `<miso-rename class="${className}__menu-item"></miso-rename>` +
+    `<miso-subscription class="${className}__menu-item"></miso-subscription>` +
+    `<miso-delete class="${className}__menu-item ${className}__menu-item--danger"></miso-delete>` +
+    `</div>`;
+}
+
+/**
+ * A message item is a <miso-message-item> container element hosting the message
+ * item subworkflow — the messages layout is a shell: it assigns the workflow
+ * (and the item-level attributes) in its post-render sync pass, and the role
+ * elements inside render the actual content through the message workflow's
+ * own layouts.
+ */
+export function message(layout, state, data) {
+  const { className, templates } = layout;
+  // 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('');
+}
+
+// the regular content is packed together, so the erroneous presentation
+// swaps it out wholesale for the error notice (the content wrapper hides by
+// a class rule off the item's status — visible-when suits the notice, but
+// not a wrapper: it forces `display: block !important` and only negates in
+// combination with positive terms)
+export function messageBody(layout) {
+  const { className, templates } = layout;
+  return `<div class="${className}__content">` +
+    `<miso-question class="${className}__question" hidden></miso-question>` +
+    `<miso-answer class="${className}__answer"></miso-answer>` +
+    `<miso-feedback class="${className}__feedback"></miso-feedback>` +
+    (templates.messageSourcesBlock || messageSourcesBlock)(layout) +
+    `</div>` +
+    (templates.messageErrorBlock || messageErrorBlock)(layout);
+}
+
+// the sources with their heading, as the hybrid-search UI presents them —
+// shown once the item carries content (visible-when nonempty), so no
+// orphan heading sits over a message still loading
+export function messageSourcesBlock({ className }) {
+  return `<div class="${className}__sources-container" visible-when="nonempty">` +
+    `<h3 class="${className}__sources-phrase">Sources</h3>` +
+    `<miso-sources class="${className}__sources"></miso-sources>` +
+    `</div>`;
+}
+
+// shown by the item's own status (visible-when): a message whose content
+// fetch failed for good presents this in place of its content
+export function messageErrorBlock({ className }) {
+  return `<div class="${className}__error" visible-when="erroneous">This message could not be loaded.</div>`;
+}
+
+
 export function article(layout, state, data, meta) {
   const { templates } = layout;
   const [openTag, closeTag] = tagPair(layout, data);

package/src/layout/text/question.js

@@ -0,0 +1,58 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { isUpdateMessage } from '@miso.ai/client-sdk-workflow';
+import { LAYOUT_TYPE } from '../../constants.js';
+import { setOrRemoveAttribute } from '../../util/dom.js';
+import TextLayout from './text.js';
+
+const TYPE = LAYOUT_TYPE.QUESTION;
+const DEFAULT_CLASSNAME = 'miso-question';
+
+// the author label: only a question written by the answer-updates monitor is
+// labeled — the user's own questions carry none
+function defaultAuthor(message) {
+  return isUpdateMessage(message) ? 'Written by Miso' : undefined;
+}
+
+function content(layout, { value }) {
+  const question = value && value.question;
+  return question ? escapeHtml(question) : '';
+}
+
+/**
+ * The question of a message: a text layout taking the whole message record —
+ * the text is the `question` field, and the authorship is stamped as data
+ * attributes on the host element (`data-author` drives the CSS label badge,
+ * `data-generated-by` the bubble color), re-applied on every render, since
+ * the metadata arrives with the answers response, after the stub render. The
+ * host element hides while there is no question text to show. The author
+ * label is configurable via the `author` option (message -> label text).
+ */
+export default class QuestionLayout extends TextLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, tag = 'div', author = defaultAuthor, templates, ...options } = {}) {
+    super({
+      className,
+      tag,
+      author,
+      templates: { content, ...templates },
+      ...options,
+    });
+  }
+
+  _afterRender(element, state) {
+    super._afterRender(element, state);
+    const message = state.value || {};
+    element.hidden = !message.question;
+    setOrRemoveAttribute(element, 'data-author', this.options.author(message));
+    setOrRemoveAttribute(element, 'data-generated-by', (message.metadata && message.metadata.miso_generated_by) || undefined);
+  }
+
+}

package/src/layout/text/text.js

@@ -1,7 +1,8 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml } from '@miso.ai/commons';
 import TemplateBasedLayout from '../template.js';
 
-const TYPE = 'text';
+const TYPE = LAYOUT_TYPE.TEXT;
 const DEFAULT_CLASSNAME = 'miso-text';
 
 function root(layout, state) {

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

@@ -1,10 +1,11 @@
 import { trimObj, defineValues, Resolution, pacer } from '@miso.ai/commons';
-import { STATUS } from '../../../constants.js';
+import { STATUS, LAYOUT_TYPE } from '../../../constants.js';
+import { dumpElementAttributes } from '../../../util/dom.js';
 import ProgressiveLayout from '../../progressive.js';
 import PlaintextRenderer from './plaintext.js';
 import { containerElement, cursorClassName, fromSameSession, normalizeOnDebug } from './utils.js';
 
-const TYPE = 'typewriter';
+const TYPE = LAYOUT_TYPE.TYPEWRITER;
 const DEFAULT_CLASSNAME = 'miso-typewriter';
 
 export default class TypewriterLayout extends ProgressiveLayout {
@@ -67,10 +68,12 @@ export default class TypewriterLayout extends ProgressiveLayout {
   }
 
   async _setupForMarkdown() {
-    const context = await this._view._views._extensions.require('markdown');
+    const client = this._view.workflow._client;
+    const plugin = await TypewriterLayout.MisoClient.plugins.install('std:ui-markdown');
     if (!this._view) {
       return; // destroyed
     }
+    const context = plugin.getContext(client);
     const cursorClass = cursorClassName(this.className);
     const { onDebug, onCitationLink, variant } = this.options;
     // TODO: options
@@ -135,6 +138,15 @@ export default class TypewriterLayout extends ProgressiveLayout {
       // new typing streak
       result = this._renderer.clear(container, rendered);
     } 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
+      result = this._renderer.update(container, result, { ...state, cursor: Infinity });
+    } else if (!newStreak) {
       const cursor = this._getNextCursor(rendered.cursor, state.doneAt, rendered.timestamp, state.timestamp);
       result = this._renderer.update(container, rendered, { ...state, cursor });
     }
@@ -193,18 +205,3 @@ export default class TypewriterLayout extends ProgressiveLayout {
     }
   }
 }
-
-function dumpElementAttributes(element) {
-  const { attributes } = element;
-  const attrs = {};
-  for (const { name, value } of attributes) {
-    if (name.startsWith('data-')) {
-      attrs[name] = value;
-    }
-  }
-  try {
-    return JSON.stringify(attrs);
-  } catch (e) {
-    return '{}';
-  }
-}

package/src/plugin.js

@@ -1,13 +1,16 @@
 import { Component, Resolution, defineAndUpgrade, delegateGetters, defineValues } from '@miso.ai/commons';
-import { Asks, HybridSearch, Explores, Search, Recommendations } from './workflow/index.js';
+import { WorkflowPlugin } from '@miso.ai/client-sdk-workflow';
+import { defaultLayouts } from './defaults.js';
 import { AskCombo } from './combo/index.js';
 import Layouts from './layouts.js';
 import * as elements from './element/index.js';
 import * as layouts from './layout/index.js';
-import * as sources from './source.js';
 import * as defaults from './defaults/index.js';
+import { followUp as followUpTemplate } from './defaults/ask/templates.js';
 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 MisoContainerElement from './element/container/miso-container.js';
 import MisoContextElement from './element/context/miso-context.js';
@@ -24,20 +27,24 @@ export default class UiPlugin extends Component {
   constructor() {
     super('ui');
     this.layouts = new Layouts(this);
-    this._recommendations = new WeakMap();
-    this._explores = new WeakMap();
-    this._asks = new WeakMap();
-    this._extensions = new WeakMap();
-
     this._ready = new Resolution();
   }
 
-  async install(MisoClient, { addSubtree, addExtensionPoints }) {
+  async install(MisoClient, context) {
+    const { addSubtree, addExtensionPoints } = context;
+    this._pluginContext = context;
     addSubtree(this);
+
+    // make sure the workflow plugin is installed, then provide the layout
+    // registry and seed the default layout options
+    MisoClient.plugins.use(WorkflowPlugin);
+    context.workflows.plugin.setLayouts(this.layouts);
+    this._seedWorkflowDefaults(context.workflows.defaults);
+
     MisoClient.on('create', this._injectClient.bind(this));
 
     // the UI interface for MisoClient
-    const ui = { defaults, traits };
+    const ui = { defaults, traits, confirm, prompt };
     delegateGetters(ui, this, ['layouts', 'ready']);
     defineValues(this, { MisoClient });
     defineValues(MisoClient, { ui });
@@ -78,78 +85,27 @@ export default class UiPlugin extends Component {
     this._ready.resolve();
   }
 
-  async requireExtension(name) {
-    switch (name) {
-      case 'markdown':
-        return await this.MisoClient.plugins.install('std:ui-markdown');
-      default:
-        throw new Error(`Unknown extension: ${name}`);
-    }
-  }
-
   get ready() {
     return this._ready.promise;
   }
 
+  /**
+   * Seed the workflow plugin's defaults store with the presentational default
+   * options: layouts of each workflow, plus UI templates.
+   */
+  _seedWorkflowDefaults(workflowDefaults) {
+    for (const [name, layouts] of Object.entries(defaultLayouts)) {
+      workflowDefaults.set(name, { layouts });
+    }
+    workflowDefaults.set('ask', { templates: { followUp: followUpTemplate } });
+  }
+
   _injectClient(client) {
     defineValues(client, {
       ui: new Ui(this, client),
     });
   }
 
-  _getExtensions(client) {
-    if (this._extensions.has(client)) {
-      return this._extensions.get(client);
-    }
-    const extensions = new Extensions(this, client);
-    this._extensions.set(client, extensions);
-    return extensions;
-  }
-
-  _getRecommendations(client) {
-    let recommendations = this._recommendations.get(client);
-    if (!recommendations) {
-      this._recommendations.set(client, recommendations = new Recommendations(this, client));
-    }
-    return recommendations;
-  }
-
-  _getExplores(client) {
-    let explores = this._explores.get(client);
-    if (!explores) {
-      this._explores.set(client, explores = new Explores(this, client));
-    }
-    return explores;
-  }
-
-  _getAsks(client) {
-    let asks = this._asks.get(client);
-    if (!asks) {
-      this._asks.set(client, asks = new Asks(this, client));
-    }
-    return asks;
-  }
-
-}
-
-// TODO: are we able to eliminate the concept of extension, just use plugins?
-class Extensions {
-
-  constructor(plugin, client) {
-    this._plugin = plugin;
-    this._client = client;
-    this._contexts = {};
-  }
-
-  async require(name) {
-    if (this._contexts[name]) {
-      return this._contexts[name];
-    }
-    const plugin = await this._plugin.requireExtension(name);
-    const context = this._contexts[name] = plugin.getContext(this._client);
-    return context;
-  }
-
 }
 
 function createUiPluginContext(plugin, ui, MisoClient) {
@@ -174,6 +130,9 @@ function createUiPluginContext(plugin, ui, MisoClient) {
   return { plugin, addElementClasses, addLayoutClasses, addInterface };
 }
 
+// workflow accessors delegated to client.workflows for backward compatibility
+const WORKFLOW_ACCESSORS = ['search', 'hybridSearch', 'asks', 'ask', 'explores', 'explore', 'recommendations', 'recommendation', 'sources'];
+
 /**
  * The UI interface for the client.
  */
@@ -182,52 +141,7 @@ class Ui {
   constructor(plugin, client) {
     this._plugin = plugin;
     this._client = client;
-
-    defineValues(this, {
-      sources: {
-        api: sources.api(client),
-      },
-    });
-  }
-
-  get recommendations() {
-    return this._recommendations || (this._recommendations = this._plugin._getRecommendations(this._client));
-  }
-
-  get recommendation() {
-    return this.recommendations.get(); // get default recommendation unit
-  }
-
-  get search() {
-    if (!this._search) {
-      this._search = new Search(this._plugin, this._client);
-      this._client._events.emit('postworkflow', this._search);
-    }
-    return this._search;
-  }
-
-  get asks() {
-    return this._asks || (this._asks = this._plugin._getAsks(this._client));
-  }
-
-  get ask() {
-    return this.asks.root;
-  }
-
-  get hybridSearch() {
-    if (!this._hybridSearch) {
-      this._hybridSearch = new HybridSearch(this._plugin, this._client);
-      this._client._events.emit('postworkflow', this._hybridSearch);
-    }
-    return this._hybridSearch;
-  }
-
-  get explores() {
-    return this._explores || (this._explores = this._plugin._getExplores(this._client));
-  }
-
-  get explore() {
-    return this.explores.get(); // get default explore unit
+    delegateGetters(this, client.workflows, WORKFLOW_ACCESSORS);
   }
 
   get ready() {

package/src/util/confirm.js

@@ -0,0 +1,28 @@
+import { openModal } from './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()`.
+ */
+export default function confirm({
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+  className = DEFAULT_CLASSNAME,
+} = {}) {
+  return openModal({
+    className,
+    title,
+    message,
+    confirmText,
+    cancelText,
+    danger,
+    result: () => true,
+    cancelValue: false,
+  });
+}