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

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

@@ -0,0 +1,94 @@
+import MisoContainerElement from './miso-container.js';
+import { getContainer } from '../utils.js';
+
+const TAG_NAME = 'miso-thread-item';
+
+const ATTR_THREAD_ID = 'thread-id';
+const OBSERVED_ATTRIBUTES = Object.freeze([
+  ...MisoContainerElement.observedAttributes,
+  ATTR_THREAD_ID,
+]);
+
+/**
+ * A container element for one thread item of the thread list, placed inside
+ * <miso-history> — a container element inside another container element
+ * hosting an item subworkflow (the `thread` workflow). Normally bound
+ * implicitly: the threads layout renders one <miso-thread-item> per item and
+ * assigns the workflow off the item binding (element.workflow = parent
+ * workflow's _getThreadWorkflow(record)), which also covers a thread being
+ * created that has no thread id yet. A `thread-id` attribute binds
+ * explicitly instead, through the parent container's workflow. Role
+ * elements inside (title, rename, delete, subscription) bind to the thread
+ * workflow as usual — getContainer() resolves to the closest container
+ * ancestor.
+ */
+export default class MisoThreadItemElement extends MisoContainerElement {
+
+  static get tagName() {
+    return TAG_NAME;
+  }
+
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+
+  // properties //
+  get threadId() {
+    return this.getAttribute(ATTR_THREAD_ID) || undefined;
+  }
+
+  set threadId(value) {
+    value = value !== undefined ? `${value}` : undefined;
+    if (value === this.threadId) {
+      return;
+    }
+    if (value) {
+      this.setAttribute(ATTR_THREAD_ID, value);
+    } else {
+      this.removeAttribute(ATTR_THREAD_ID);
+    }
+  }
+
+  _getWorkflow(client) {
+    const { threadId } = this;
+    if (!threadId) {
+      // implicitly bound: the threads 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._getThreadWorkflow === 'function' ? workflow._getThreadWorkflow(threadId) : 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_THREAD_ID:
+        this._handleThreadIdUpdate(oldValue, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
+    }
+  }
+
+  _handleThreadIdUpdate(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/context/miso-follow-ups.js

@@ -19,7 +19,7 @@ export default class MisoFollowUpsElement extends MisoContextElement {
   }
 
   _getContext(client) {
-    return client.ui.asks;
+    return client.workflows.asks;
   }
 
   _onContext(context, oldContext) {

package/src/element/role/index.js

@@ -18,4 +18,11 @@ export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';
 export { default as MisoMoreElement } from './miso-more.js';
 export { default as MisoSortElement } from './miso-sort.js';
+export { default as MisoThreadsElement } from './miso-threads.js';
+export { default as MisoNewThreadElement } from './miso-new-thread.js';
+export { default as MisoTitleElement } from './miso-title.js';
+export { default as MisoRenameElement } from './miso-rename.js';
+export { default as MisoDeleteElement } from './miso-delete.js';
+export { default as MisoSubscriptionElement } from './miso-subscription.js';
+export { default as MisoMessagesElement } from './miso-messages.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/miso-delete.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoDeleteElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.DELETE,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-delete';
+  }
+
+}

package/src/element/role/miso-messages.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoMessagesElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.MESSAGES,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-messages';
+  }
+
+}

package/src/element/role/miso-new-thread.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoNewThreadElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.NEW_THREAD,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-new-thread';
+  }
+
+}

package/src/element/role/miso-rename.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoRenameElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.RENAME,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-rename';
+  }
+
+}

package/src/element/role/miso-subscription.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoSubscriptionElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.SUBSCRIPTION,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-subscription';
+  }
+
+}

package/src/element/role/miso-threads.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoThreadsElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.THREADS,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-threads';
+  }
+
+}

package/src/element/role/miso-title.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoTitleElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.TITLE,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-title';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -1,11 +1,11 @@
 import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { STATUS } from '../../constants.js';
+import { STATUS, LAYOUT_TYPE } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation, helpers } from '../templates.js';
 import { TRIANGLE } from '../../asset/svgs.js';
 import { setOrRemoveAttribute } from '../../util/dom.js';
 
-const TYPE = 'affiliation';
+const TYPE = LAYOUT_TYPE.AFFILIATION;
 const DEFAULT_CLASSNAME = 'miso-affiliation';
 
 function root(layout, state) {

package/src/layout/banner/banner.js

@@ -1,7 +1,8 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { LOGO } from '../svgs.js';
 
-const TYPE = 'banner';
+const TYPE = LAYOUT_TYPE.BANNER;
 const DEFAULT_CLASSNAME = 'miso-banner';
 
 function root(layout) {

package/src/layout/button/button.js

@@ -0,0 +1,152 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { LAYOUT_TYPE } from '../../constants.js';
+import TemplateBasedLayout from '../template.js';
+import { getIcon } from '../../asset/svgs.js';
+import prompt from '../../util/prompt.js';
+import confirm from '../../util/confirm.js';
+
+const TYPE = LAYOUT_TYPE.BUTTON;
+const DEFAULT_CLASSNAME = 'miso-button';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}"${roleAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+
+function icon(layout) {
+  const { icon } = layout.options;
+  return icon ? getIcon(icon) : '';
+}
+
+function text(layout) {
+  const { className, options: { text } } = layout;
+  return text ? `<span class="${className}__text">${escapeHtml(text)}</span>` : '';
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text,
+});
+
+/**
+ * A generic button: an icon and a label, both configurable (`icon` is an icon
+ * name, `text` the label; either can be omitted), emitting a `submit` view
+ * event when clicked — for the workflow to act on, per role.
+ *
+ * It carries no data of its own, so it renders in any state; use it for
+ * actions that stand apart from the data they act on, such as the new chat
+ * button (role `new_thread`) of the chat history interface.
+ *
+ * With a `prompt` option, the click asks for a text through the shared
+ * prompt dialog first, pre-filled with the control's current value — the
+ * role's mapped data value, as of the latest render — and the submit event
+ * carries the confirmed text as `value`; a cancelled, cleared, or unchanged
+ * dialog submits nothing. Use it for actions that take a text input, such
+ * as the rename button (role `rename`) of the conversation header, whose
+ * role maps to `'thread.title'`.
+ *
+ * With a `confirm` option, the click asks through the shared confirm dialog
+ * first, and submits only when confirmed; the option's `message` may be a
+ * function of the control's current value. Use it for destructive actions,
+ * such as the delete button (role `delete`) of a thread item's context menu.
+ *
+ * The control's current value is the role's mapped data value, put through
+ * the `value` option when given — map the role to a record and let `value`
+ * pick the text the dialogs work with. A `disabled` option (a boolean, or a
+ * function of the mapped value) renders the button's disabled state from
+ * the data, re-evaluated on every commit — e.g. rename/delete disable while
+ * their thread record has no thread id yet (a thread being created is not
+ * addressable), enabling in place when the resolution patches the record.
+ */
+export default class ButtonLayout extends TemplateBasedLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+  }
+
+  initialize(view) {
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      view.proxyElement.on('click', event => this._handleClick(event)),
+    ];
+  }
+
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    this.options.prompt ? this._submitViaPrompt(event) :
+      this.options.confirm ? this._submitViaConfirm(event) :
+      this._submit(event);
+  }
+
+  _submit(event, payload) {
+    const { session } = this._view._state || {};
+    this._view._emit('submit', { session, domEvent: event, ...payload });
+  }
+
+  async _submitViaPrompt(event) {
+    const current = this._currentValue();
+    const value = await prompt({
+      value: typeof current === 'string' ? current : '',
+      ...this.options.prompt,
+    });
+    if (!value || value === current) {
+      return; // cancelled, cleared, or unchanged
+    }
+    this._submit(event, { value });
+  }
+
+  async _submitViaConfirm(event) {
+    const { message, ...options } = this.options.confirm;
+    const confirmed = await confirm({
+      ...options,
+      message: typeof message === 'function' ? message(this._currentValue()) : message,
+    });
+    if (!confirmed) {
+      return;
+    }
+    this._submit(event);
+  }
+
+  /**
+   * The current value of the control: the role's mapped data value, as of
+   * the latest render, put through the `value` option when given.
+   */
+  _currentValue() {
+    const state = this._element && this._rendered.get(this._element);
+    const raw = state && state.value;
+    const { value } = this.options;
+    return typeof value === 'function' ? value(raw) : raw;
+  }
+
+  _isDisabled(state) {
+    const { disabled } = this.options;
+    return typeof disabled === 'function' ? !!disabled(state && state.value) : !!disabled;
+  }
+
+}

package/src/layout/button/checkbox.js

@@ -0,0 +1,92 @@
+import { escapeHtml } from '@miso.ai/commons';
+import { LAYOUT_TYPE } from '../../constants.js';
+import ButtonLayout from './button.js';
+import { getIcon } from '../../asset/svgs.js';
+
+const TYPE = LAYOUT_TYPE.CHECKBOX;
+const DEFAULT_CLASSNAME = 'miso-checkbox';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const checked = isChecked(state);
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const checkedAttr = checked ? ' data-checked' : '';
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+
+function icon(layout, state) {
+  const { icon, checkedIcon = icon } = layout.options;
+  const name = isChecked(state) ? checkedIcon : icon;
+  return name ? getIcon(name) : '';
+}
+
+function text(layout, state) {
+  const { className, options: { text, checkedText = text } } = layout;
+  const value = isChecked(state) ? checkedText : text;
+  return value ? `<span class="${className}__text">${escapeHtml(value)}</span>` : '';
+}
+
+// the checked state is the mapped data value, so it renders from data alone
+function isChecked({ value } = {}) {
+  return value === true;
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text,
+});
+
+/**
+ * A checkbox that looks like a button: an icon and a label, each with an
+ * optional checked variant (`icon`/`text` and `checkedIcon`/`checkedText`,
+ * the latter falling back to the former). It is a switch — semantically a
+ * checkbox (`role="switch"`, `aria-checked`), visually a button — for
+ * on/off state a user toggles, such as the answer-updates subscription of
+ * the conversation panel (role `subscription`).
+ *
+ * The checked state comes from the data (the mapped value is the boolean —
+ * e.g. role `subscription` maps to `'thread.subscribed'`), so a click emits
+ * a `change` view event carrying the requested state (`{ checked }`) and
+ * nothing else: the workflow acts on it and the new state arrives back down
+ * the data path, like any other rendering.
+ */
+export default class CheckboxLayout extends ButtonLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+  }
+
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    // what the user toggles is the control's current value
+    const checked = this._currentValue() === true;
+    const { session } = this._view._state || {};
+    this._view._emit('change', { session, checked: !checked, domEvent: event });
+  }
+
+}

package/src/layout/button/more-button.js

@@ -1,9 +1,9 @@
-import { STATUS } from '../../constants.js';
-import { fields } from '../../actor/index.js';
+import { STATUS, LAYOUT_TYPE } from '../../constants.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import { helpers } from '../templates.js';
 
-const TYPE = 'more-button';
+const TYPE = LAYOUT_TYPE.MORE_BUTTON;
 const DEFAULT_CLASSNAME = 'miso-more-button';
 
 function root(layout, state) {

package/src/layout/container/container.js

@@ -1,10 +1,10 @@
-import { ROLE, STATUS } from '../../constants.js';
+import { ROLE, STATUS, LAYOUT_TYPE } from '../../constants.js';
 import RafLayout from '../raf.js';
 import MisoBannerElement from '../../element/util/miso-banner.js';
 import Viewables from '../../util/viewables.js';
 import { setOrRemoveAttribute } from '../../util/dom.js';
 
-const TYPE = 'container';
+const TYPE = LAYOUT_TYPE.CONTAINER;
 
 export default class ContainerLayout extends RafLayout {
 

package/src/layout/container/item-container.js

@@ -0,0 +1,99 @@
+import { LAYOUT_TYPE } from '../../constants.js';
+import ContainerLayout from './container.js';
+
+const TYPE = LAYOUT_TYPE.ITEM_CONTAINER;
+
+/**
+ * The container layout of a collection's item subworkflow (a thread of the
+ * thread list, a message of the conversation panel): the standard container
+ * duties (status attributes, banner, trackings), plus the item-level
+ * behaviors — currently the context menu (vertical dots + popup).
+ *
+ * The menu is handled by contract, not rendered here: the item template
+ * supplies the markup (e.g. the threads layout's threadMenuBlock), marking
+ * the toggle button `data-role="item-menu-button"` and the popup
+ * `data-role="item-menu"`, and this layout drives their open/close behavior
+ * — toggle on the button; any other click on the item (a menu action
+ * included) closes it, and so does a click outside the item, which is also
+ * how opening one item's menu closes another's. The menu contents are
+ * typically role elements binding to the item workflow (e.g. the thread
+ * item's `<miso-rename>`/`<miso-delete>` buttons), so the actions stay the
+ * workflow's own controls. Collection shells treat clicks carrying the
+ * menu data-roles as item-internal (e.g. the threads layout does not
+ * select); an item template without menu markup simply has nothing to
+ * drive. Ownership is guarded: the layout only ever drives its own item's
+ * menu — a menu or click inside a nested container element is that
+ * container's own layout's — so the layout is inert on the list panel
+ * itself, whose options bag it shares with the items.
+ */
+export default class ItemContainerLayout extends ContainerLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  initialize(view) {
+    this._unsubscribes.push(view.proxyElement.on('click', event => this._handleClick(event)));
+    if (typeof document !== 'undefined') {
+      const onDocumentClick = (event) => {
+        const element = this._element;
+        if (element && !element.contains(event.target)) {
+          this._closeMenu();
+        }
+      };
+      document.addEventListener('click', onDocumentClick);
+      this._unsubscribes.push(() => document.removeEventListener('click', onDocumentClick));
+    }
+  }
+
+  // menu //
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    // a click inside a nested container element belongs to that
+    // container's own layout (this layout may also host the list panel,
+    // whose subtree holds the items)
+    if (!this._owns(event.target)) {
+      return;
+    }
+    if (event.target.closest(`[data-role="item-menu-button"]`)) {
+      this._toggleMenu();
+      return;
+    }
+    // any other click on the item — a menu action included — closes the menu
+    this._closeMenu();
+  }
+
+  _getMenu() {
+    const menu = this._element && this._element.querySelector(`[data-role="item-menu"]`);
+    // only its own item's menu: one found inside a nested container
+    // element is that container's own layout's to drive
+    return menu && this._owns(menu) ? menu : undefined;
+  }
+
+  _owns(node) {
+    for (let el = node; el && el !== this._element; el = el.parentElement) {
+      if (el.isContainer) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  _toggleMenu() {
+    const menu = this._getMenu();
+    if (menu) {
+      menu.hidden = !menu.hidden;
+    }
+  }
+
+  _closeMenu() {
+    const menu = this._getMenu();
+    if (menu && !menu.hidden) {
+      menu.hidden = true;
+    }
+  }
+
+}

package/src/layout/error/error.js

@@ -1,6 +1,7 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
-const TYPE = 'error';
+const TYPE = LAYOUT_TYPE.ERROR;
 const DEFAULT_CLASSNAME = 'miso-error';
 
 function root(layout, state) {

package/src/layout/index.js

@@ -1,9 +1,12 @@
 export { default as TemplateBasedLayout } from './template.js';
 export { default as ContainerLayout } from './container/container.js';
+export { default as ItemContainerLayout } from './container/item-container.js';
 export { default as ErrorLayout } from './error/error.js';
 export { default as BannerLayout } from './banner/banner.js';
 export { default as CollectionLayout } from './list/collection.js';
 export { default as ListLayout } from './list/list.js';
+export { default as ThreadsLayout } from './list/threads.js';
+export { default as MessagesLayout } from './list/messages.js';
 export { default as HorizontalLayout } from './list/horizontal.js';
 export { default as CardsLayout } from './list/cards.js';
 export { default as CarouselLayout } from './list/carousel.js';
@@ -12,8 +15,11 @@ export { default as SearchBoxLayout } from './input/search-box.js';
 export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
+export { default as QuestionLayout } from './text/question.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
 export { default as FacetsLayout } from './input/facets.js';
 export { default as SelectLayout } from './input/select.js';
 export { default as MoreButtonLayout } from './button/more-button.js';
+export { default as ButtonLayout } from './button/button.js';
+export { default as CheckboxLayout } from './button/checkbox.js';