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

package/src/defaults.js

@@ -0,0 +1,107 @@
+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 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' }],
+  }),
+
+  'history': Object.freeze({
+    ...BASE_LAYOUTS,
+    [ROLE.THREADS]: [LAYOUT_TYPE.THREADS, { itemType: 'thread', incremental: true }],
+    [ROLE.NEW_THREAD]: [LAYOUT_TYPE.BUTTON, { icon: 'plus', text: 'New chat' }],
+  }),
+
+  'conversation': Object.freeze({
+    ...BASE_LAYOUTS,
+    [ROLE.MESSAGES]: [LAYOUT_TYPE.MESSAGES, { itemType: 'message', incremental: 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, { icon: 'pencil', prompt: { title: 'Rename thread', placeholder: 'Thread name', confirmText: 'Rename' } }],
+    [ROLE.SUBSCRIPTION]: [LAYOUT_TYPE.CHECKBOX, { icon: 'bell', text: 'Subscribe', checkedIcon: 'bell-fill', checkedText: 'Subscribed' }],
+  }),
+
+});

package/src/element/container/index.js

@@ -1,5 +1,7 @@
 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 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-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;
   }
 
 }

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,10 @@ 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 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-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,116 @@
+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';
+
+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}"` : '';
+  return `<button type="button" class="${className}"${roleAttr}>${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'`.
+ */
+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._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 });
+  }
+
+  /**
+   * The current value of the control: the role's mapped data value, as of
+   * the latest render.
+   */
+  _currentValue() {
+    const state = this._element && this._rendered.get(this._element);
+    return state && state.value;
+  }
+
+}

package/src/layout/button/checkbox.js

@@ -0,0 +1,91 @@
+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' : '';
+  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}>${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/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

@@ -4,6 +4,8 @@ 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';
@@ -17,3 +19,5 @@ 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';

package/src/layout/input/facets.js

@@ -1,9 +1,10 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml } from '@miso.ai/commons';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
-const TYPE = 'facets';
+const TYPE = LAYOUT_TYPE.FACETS;
 const DEFAULT_CLASSNAME = 'miso-facets';
 const DEDAULT_FACET_CLASSNAME = 'miso-facet';
 const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';

package/src/layout/input/option-list.js

@@ -1,10 +1,11 @@
+import { LAYOUT_TYPE } from '../../constants.js';
 import { escapeHtml } from '@miso.ai/commons';
-import { fields } from '../../actor/index.js';
+import { fields } from '@miso.ai/client-sdk-workflow';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
 import { addOrRemoveClass } from '../../util/dom.js';
 
-const TYPE = 'option-list';
+const TYPE = LAYOUT_TYPE.OPTION_LIST;
 const DEFAULT_CLASSNAME = 'miso-option-list';
 
 function root(layout, state) {