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

package/src/workflow/context.js

@@ -1,16 +0,0 @@
-import { Component } from '@miso.ai/commons';
-import { WorkflowContextOptions, makeConfigurable } from './options/index.js';
-
-export default class WorkflowContext extends Component {
-
-  constructor(name, plugin, client) {
-    super(name, plugin);
-    this._name = name;
-    this._plugin = plugin;
-    this._client = client;
-    this._options = new WorkflowContextOptions();
-  }
-
-}
-
-makeConfigurable(WorkflowContext.prototype);

package/src/workflow/explore.js

@@ -1,194 +0,0 @@
-import { API } from '@miso.ai/commons';
-import UnitWorkflow from './unit.js';
-import { fields } from '../actor/index.js';
-import { ROLE, EVENT_TYPE } from '../constants.js';
-import { ListLayout, SearchBoxLayout } from '../layout/index.js';
-import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { enableUseLink, UseLinkMixin } from './use-link.js';
-import { makeAutocompletable } from './autocompletable.js';
-
-const DEFAULT_API_OPTIONS = Object.freeze({
-  ...UnitWorkflow.DEFAULT_API_OPTIONS,
-  group: API.GROUP.ASK,
-  name: API.NAME.RELATED_QUESTIONS,
-});
-
-const DEFAULT_LAYOUTS = Object.freeze({
-  ...UnitWorkflow.DEFAULT_LAYOUTS,
-  [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question', link: { rel: 'noopener nofollow' } }], // TODO: should define by useLink()
-  [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
-});
-
-const DEFAULT_TRACKERS = Object.freeze({
-  ...UnitWorkflow.DEFAULT_TRACKERS,
-  [ROLE.RELATED_QUESTIONS]: DEFAULT_TRACKER_OPTIONS,
-  [ROLE.CONTAINER]: {
-    ...DEFAULT_TRACKER_OPTIONS,
-    itemless: true,
-  },
-  [ROLE.QUERY]: {
-    [EVENT_TYPE.SUBMIT]: {
-      active: true,
-    },
-  },
-});
-
-const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
-  api: {
-    group: API.GROUP.ASK,
-    name: API.NAME.QUERY_SUGGESTION,
-  },
-});
-
-const DEFAULT_OPTIONS = Object.freeze({
-  ...UnitWorkflow.DEFAULT_OPTIONS,
-  api: DEFAULT_API_OPTIONS,
-  layouts: DEFAULT_LAYOUTS,
-  trackers: DEFAULT_TRACKERS,
-  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
-});
-
-const ROLES_OPTIONS = mergeRolesOptions(UnitWorkflow.ROLES_OPTIONS, {
-  main: ROLE.RELATED_QUESTIONS,
-  members: Object.keys(DEFAULT_LAYOUTS),
-});
-
-export default class Explore extends UnitWorkflow {
-
-  constructor(context, id) {
-    super({
-      name: 'explore',
-      context,
-      roles: ROLES_OPTIONS,
-      defaults: DEFAULT_OPTIONS,
-      id,
-    });
-  }
-
-  _initProperties(args) {
-    super._initProperties(args);
-    this._initAutocomplete(args);
-    this._productId = undefined;
-    this._linkFn = undefined;
-  }
-
-  _initSubscriptions(args) {
-    super._initSubscriptions(args);
-    this._unsubscribes = [
-      ...this._unsubscribes,
-      this._views.on(ROLE.RELATED_QUESTIONS, 'click', event => this._handleRelatedQuestionClick(event)),
-      this._hub.on(fields.query(), args => this._query(args)),
-    ];
-  }
-
-  // configuration //
-  set productId(value) {
-    console.warning('DEPRECATED: use useApi() instead');
-    this.useApi({
-      product_id: value,
-    });
-  }
-
-  useApi(...args) {
-    const options = (typeof args[0] === 'object' ? args[0] : args[1]) || {};
-    const { product_id } = options;
-    if (product_id) {
-      this._productId = product_id;
-    }
-    return super.useApi(...args);
-  }
-
-  useLink(fn, options) {
-    UseLinkMixin.prototype.useLink.call(this, fn, options);
-    // also put options to layouts
-    if (options) {
-      this.useLayouts({
-        [ROLE.RELATED_QUESTIONS]: { link: options },
-      });
-    }
-    return this;
-  }
-
-  // lifecycle //
-  start({ relatedQuestions = true } = {}) {
-    if (this._linkFn === undefined) {
-      throw new Error('Must define link mapping function with useLink(fn) before calling start()');
-    }
-    // in explore workflow, start() triggers query
-    // TODO: we should still make the query lifecycle
-    if (relatedQuestions) {
-      this._request();
-    } else {
-      // TODO: ad-hoc
-      const { session } = this;
-      this.updateData({ session, request: {}, value: { related_questions: [] } });
-    }
-    return this;
-  }
-
-  notifyViewUpdate(role = ROLE.RELATED_QUESTIONS, ...args) {
-    super.notifyViewUpdate(role, ...args);
-    return this;
-  }
-
-  _defaultProcessData(data, oldData) {
-    data = super._defaultProcessData(data, oldData);
-    data = this._addUrlToRelatedQuestions(data);
-    return data;
-  }
-
-  _addUrlToRelatedQuestions(data) {
-    const { value } = data;
-    if (!value || !value.related_questions) {
-      return data;
-    }
-    const [linkFn, linkOptions = {}] = this._linkFn || [];
-    const getDisplayedUrl = text => linkFn && linkOptions.showUrl ? this._getSubmitUrl({ q: text, generated: true }) : '#';
-    const related_questions = value.related_questions.map(text => ({
-      text,
-      url: getDisplayedUrl(text),
-    }));
-    return {
-      ...data,
-      value: {
-        ...value,
-        related_questions,
-      },
-    };
-  }
-
-  _handleRelatedQuestionClick({ value: question, ...event }) {
-    this._events.emit('select', Object.freeze({ ...event, question }));
-    const [linkFn, linkOptions = {}] = this._linkFn || [];
-    if (!linkFn || !linkOptions.showUrl) {
-      event.domEvent && event.domEvent.preventDefault();
-    }
-    if (linkFn && !linkOptions.showUrl) {
-      this._submitToPage({ q: question.text, generated: true });
-    }
-  }
-
-  query(args) {
-    if (!args.q) {
-      throw new Error(`q is required in query() call`);
-    }
-    this._hub.update(fields.query(), args);
-  }
-
-  _query(args) {
-    this._submitToPage({ ...args, generated: false });
-  }
-
-  _getSubmitUrl(args) {
-    // TODO: if trending_questions -> qs = '_trending'
-    let url = UseLinkMixin.prototype._getSubmitUrl.call(this, args);
-    if (!args.generated || !this._productId) {
-      return url;
-    }
-    return `${url}&qs=${encodeURIComponent(this._productId)}`;
-  }
-
-}
-
-enableUseLink(Explore.prototype);
-makeAutocompletable(Explore.prototype);

package/src/workflow/explores.js

@@ -1,18 +0,0 @@
-import UnitWorkflowContext from './units.js';
-import Explore from './explore.js';
-import { makeAutocompletableContext } from './autocompletable.js';
-
-export default class Explores extends UnitWorkflowContext {
-
-  constructor(plugin, client) {
-    super('explores', plugin, client);
-    this._initAutocompleteContext();
-  }
-
-  _create(unitId) {
-    return new Explore(this, unitId);
-  }
-
-}
-
-makeAutocompletableContext(Explores.prototype);

package/src/workflow/hybrid-search-answer.js

@@ -1,73 +0,0 @@
-import AnswerBasedWorkflow from './answer-based.js';
-import { fields } from '../actor/index.js';
-import { writeKeywordsToData, writeMisoIdToSession, writeMisoIdFromSession, writeUnanswerableToMeta } from './processors.js';
-
-const ROLES_OPTIONS = AnswerBasedWorkflow.ROLES_OPTIONS;
-
-export default class HybridSearchAnswer extends AnswerBasedWorkflow {
-
-  constructor(superworkflow) {
-    super({
-      name: 'hybrid-search/answer',
-      plugin: superworkflow._plugin,
-      client: superworkflow._client,
-      options: superworkflow._options,
-      defaults: superworkflow._defaults,
-      roles: ROLES_OPTIONS,
-      superworkflow,
-    });
-  }
-
-  _initProperties(args) {
-    super._initProperties(args);
-    this._superworkflow = args.superworkflow;
-  }
-
-  _initSession() {} // no reset here, will manually reset later
-
-  _doLoading(data) {
-    const { session } = this;
-    this.updateData({ ...data, session });
-  }
-
-  _queryWithQuestionId(data) {
-    const { session } = this;
-    const { request, value } = data;
-    this.updateData({ ...data, session });
-    // start query with question_id
-    const { question_id } = value;
-    if (!question_id) {
-      return;
-    }
-    // forge the request
-    const payload = {
-      ...request.payload,
-      question_id,
-    };
-    if (payload.metadata.page !== undefined) {
-      delete payload.metadata.page;
-    }
-    this._hub.update(fields.request(), { ...request, payload, session });
-  }
-
-  // data //
-  _defaultProcessData(data, oldData) {
-    data = super._defaultProcessData(data, oldData);
-    data = writeKeywordsToData(data);
-    data = writeMisoIdFromSession(data);
-    data = writeUnanswerableToMeta(data);
-    return data;
-  }
-
-  _handleHeadResponse(data) {
-    super._handleHeadResponse(data);
-    // keep track of miso_id in session
-    writeMisoIdToSession(data);
-  }
-
-  // interactions //
-  _onTracker(args) {
-    this._superworkflow._onTracker(args);
-  }
-
-}

package/src/workflow/hybrid-search-views.js

@@ -1,116 +0,0 @@
-import SearchBasedWorkflow from './search-based.js';
-
-const RESULTS_ROLE_MEMBERS = SearchBasedWorkflow.ROLES_OPTIONS.members;
-
-function getSubworkflowByRole(role) {
-  // TODO: ROLE.ERROR
-  return RESULTS_ROLE_MEMBERS.includes(role) ? 'results' : 'answer';
-}
-
-export default class HybridSearchViewsActor {
-
-  constructor(subviews) {
-    this._subviews = subviews;
-    this._containers = new Set();
-  }
-
-  get filters() {
-    return this._subviews.results.filters;
-  }
-
-  on(role, event, callback) {
-    return this._getSubviews(role).on(role, event, callback);
-  }
-
-  get(role) {
-    return this._getSubviews(role).get(role);
-  }
-
-  getAll(role) {
-    return this._getSubviews(role).getAll(role);
-  }
-
-  addContainer(element) {
-    if (this._containers.has(element)) {
-      return;
-    }
-    this._containers.add(element);
-
-    const { components } = element;
-    for (const component of components) {
-      this.addComponent(component);
-    }
-  }
-
-  removeContainer(element) {
-    for (const subviews of this._getAllSubviews()) {
-      subviews.removeContainer(element);
-    }
-    this._containers.delete(element);
-  }
-
-  addComponent(element) {
-    this._getSubviews(element.role).addComponent(element);
-    this._addContainerToSubviews(element._container, element);
-  }
-
-  removeComponent(element) {
-    this._getSubviews(element.role).removeComponent(element);
-    this._removeContainerFromSubviewsIfNecessary(element._container);
-  }
-
-  updateComponentRole(element, oldRole, newRole) {
-    // TODO
-  }
-
-  refreshElement(element) {
-    this._getSubviews(element.role).refreshElement(element);
-  }
-
-  // helpers //
-  _getAllSubviews() {
-    return Object.values(this._subviews);
-  }
-
-  _getSubviews(role) {
-    return this._subviews[getSubworkflowByRole(role)];
-  }
-
-  _addContainerToSubviews(container, child) {
-    if (!container) {
-      return;
-    }
-    const { role } = child;
-    const subviews = this._getSubviews(role);
-    if (subviews._containers.has(container)) {
-      return;
-    }
-    // check if the container is in other subviews
-    for (const otherSubviews of this._getAllSubviews()) {
-      if (otherSubviews === subviews) {
-        continue;
-      }
-      if (otherSubviews._containers.has(container)) {
-        // find the conflicting element
-        for (const component of container.components) {
-          if (otherSubviews.containsElement(component)) {
-            throw new Error(`<${container.tagName.toLowerCase()}> cannot contain both <${component.tagName.toLowerCase()}> and <${child.tagName.toLowerCase()}>, for they don't share the same data lifecycle.`);
-          }
-        }
-        throw new Error(`Failed to add container <${container.tagName.toLowerCase()}> with child component <${child.tagName.toLowerCase()}>.`);
-      }
-    }
-    // add the container to the subviews
-    subviews.addContainer(container);
-  }
-
-  _removeContainerFromSubviewsIfNecessary(container) {
-    if (!container || container.components.length > 0) {
-      return;
-    }
-    for (const subviews of this._getAllSubviews()) {
-      subviews.removeContainer(container);
-    }
-  }
-
-}

package/src/workflow/hybrid-search.js

@@ -1,230 +0,0 @@
-import { API } from '@miso.ai/commons';
-import SearchBasedWorkflow from './search-based.js';
-import AnswerBasedWorkflow from './answer-based.js';
-import { ROLE, WORKFLOW_CONFIGURABLE } from '../constants.js';
-import { SearchBoxLayout, TextLayout, HorizontalLayout } from '../layout/index.js';
-import { compactArticle, compactArticleInfoBlock } from '../layout/templates.js';
-import HybridSearchAnswer from './hybrid-search-answer.js';
-import HybridSearchViewsActor from './hybrid-search-views.js';
-import { makeConfigurable } from './options/index.js';
-
-import { mergeApiPayloads } from '@miso.ai/commons';
-import { STATUS, REQUEST_TYPE } from '../constants.js';
-import { writeMisoIdToSession, writeQuestionSourceToPayload, disableAnswerForNonQueryRequest, carryOverQuestionIdToData, writeAnswerInfoToInteraction } from './processors.js';
-import { makeAutocompletable } from './autocompletable.js';
-
-const DEFAULT_API_OPTIONS = Object.freeze({
-  group: API.GROUP.ASK,
-  name: API.NAME.SEARCH,
-  payload: {
-    ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS.payload,
-    ...SearchBasedWorkflow.DEFAULT_API_OPTIONS.payload,
-    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title', 'authors'],
-  },
-});
-
-const DEFAULT_LAYOUTS = Object.freeze({
-  ...AnswerBasedWorkflow.DEFAULT_LAYOUTS,
-  ...SearchBasedWorkflow.DEFAULT_LAYOUTS,
-  [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: '' }],
-  [ROLE.QUESTION]: [TextLayout.type, { raw: true }],
-  [ROLE.SOURCES]: [
-    HorizontalLayout.type,
-    {
-      incremental: true,
-      itemType: 'article',
-      templates: {
-        ordered: true,
-        article: compactArticle,
-        articleInfoBlock: compactArticleInfoBlock
-      }
-    }
-  ],
-});
-
-const DEFAULT_TRACKERS = Object.freeze({
-  ...AnswerBasedWorkflow.DEFAULT_TRACKERS,
-  ...SearchBasedWorkflow.DEFAULT_TRACKERS,
-});
-
-const DEFAULT_PAGINATION = Object.freeze({
-  ...SearchBasedWorkflow.DEFAULT_PAGINATION,
-  active: true,
-});
-
-const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
-  api: {
-    group: API.GROUP.ASK,
-    name: API.NAME.SEARCH_AUTOCOMPLETE,
-    payload: {
-      completion_fields: ['suggested_queries'],
-    },
-  },
-});
-
-const DEFAULT_FILTERS_OPTIONS = Object.freeze({
-  sort: {
-    options: [
-      { field: 'relevance', text: 'Relevance', default: true },
-      { field: 'published_at', text: 'Date' },
-    ],
-  },
-});
-
-const DEFAULT_OPTIONS = Object.freeze({
-  ...AnswerBasedWorkflow.DEFAULT_OPTIONS,
-  ...SearchBasedWorkflow.DEFAULT_OPTIONS,
-  api: DEFAULT_API_OPTIONS,
-  layouts: DEFAULT_LAYOUTS,
-  trackers: DEFAULT_TRACKERS,
-  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
-  pagination: DEFAULT_PAGINATION,
-  filters: DEFAULT_FILTERS_OPTIONS,
-});
-
-const ROLES_OPTIONS = Object.freeze({
-  main: ROLE.PRODUCTS,
-  members: Object.keys(DEFAULT_LAYOUTS),
-  mappings: Object.freeze({
-    ...AnswerBasedWorkflow.ROLES_OPTIONS.mappings,
-    ...SearchBasedWorkflow.ROLES_OPTIONS.mappings,
-  }),
-});
-
-const EXTRA_OPTIONS = Object.freeze({
-  api: Object.freeze({
-    polling: false,
-  }),
-});
-
-export default class HybridSearch extends SearchBasedWorkflow {
-
-  constructor(plugin, client) {
-    super({
-      name: 'hybrid-search',
-      plugin,
-      client,
-      roles: ROLES_OPTIONS,
-      defaults: DEFAULT_OPTIONS,
-      extraOptions: EXTRA_OPTIONS,
-    });
-  }
-
-  _initProperties(args) {
-    super._initProperties(args);
-    this._initAutocomplete(args);
-    this._answer = new HybridSearchAnswer(this);
-  }
-
-  _initActors(args) {
-    super._initActors(args);
-    this._views = new HybridSearchViewsActor({
-      results: this._views,
-      answer: this._answer._views,
-    });
-  }
-
-  restart({ type } = {}) {
-    super.restart();
-    if (!type || type === REQUEST_TYPE.QUERY) {
-      this._answer.restart();
-    }
-  }
-
-  // properties //
-  get answer() {
-    return this._answer;
-  }
-
-  get questionId() {
-    return this._answer.questionId;
-  }
-
-  // query //
-  _buildPayload(payload, type) {
-    payload = super._buildPayload(payload, type);
-    // borrow the work from the sibling
-    payload = disableAnswerForNonQueryRequest(payload, type);
-    payload = writeQuestionSourceToPayload(payload);
-    payload = this._writeQuestionIdToPayload(payload, type);
-    if (payload.answer !== false) {
-      // uses autoQuery params, so we want to apply to this workflow
-      payload = AnswerBasedWorkflow.prototype._writeWikiLinkTemplateToPayload.call(this, payload);
-    }
-    return payload;
-  }
-
-  _buildOrderBy(sort) {
-    if (!sort) {
-      return undefined;
-    }
-    // works differently than search
-    return sort.field;
-  }
-
-  _writeQuestionIdToPayload(payload, type) {
-    if (type === REQUEST_TYPE.QUERY) {
-      return payload;
-    }
-    const question_id = this._answer.questionId;
-    if (!question_id) {
-      return payload;
-    }
-    return mergeApiPayloads(payload, {
-      metadata: {
-        question_id,
-      },
-    });
-  }
-
-  // data //
-  _defaultProcessData(data, oldData) {
-    data = super._defaultProcessData(data, oldData);
-    writeMisoIdToSession(data);
-    return data;
-  }
-
-  _updateDataInHub(data, oldData) {
-    this._dispatchDataToAnswerWorkflow(data);
-    data = carryOverQuestionIdToData(data, oldData); // TODO: may as well move to process data
-    super._updateDataInHub(data, oldData);
-  }
-
-  _dispatchDataToAnswerWorkflow(data) {
-    const { request } = data;
-    if (!request) {
-      return;
-    }
-    const { type, payload } = request;
-    if (type !== REQUEST_TYPE.QUERY || !payload || payload.answer === false) {
-      return;
-    }
-    switch (data.status) {
-      case STATUS.LOADING:
-        // share the loading status with its sibling
-        this._answer._doLoading(data);
-        break;
-      case STATUS.READY:
-        // start a query with retrieved question ID, if any
-        this._answer._queryWithQuestionId(data);
-        break;
-    }
-  }
-
-  // interactions //
-  _defaultProcessInteraction(payload, args) {
-    payload = super._defaultProcessInteraction(payload, args);
-    payload = writeAnswerInfoToInteraction(payload, args);
-    return payload;
-  }
-
-  // destroy //
-  _destroy() {
-    this._answer.destroy();
-    super._destroy();
-  }
-
-}
-
-makeConfigurable(HybridSearch.prototype, [WORKFLOW_CONFIGURABLE.PAGINATION, WORKFLOW_CONFIGURABLE.FILTERS]);
-makeAutocompletable(HybridSearch.prototype);

package/src/workflow/index.js

@@ -1,5 +0,0 @@
-export { default as Asks } from './asks.js';
-export { default as HybridSearch } from './hybrid-search.js';
-export { default as Search } from './search.js';
-export { default as Recommendations } from './recommendations.js';
-export { default as Explores } from './explores.js';

package/src/workflow/options/api.js

@@ -1,31 +0,0 @@
-import { trimObj, mergeApiPayloads } from '@miso.ai/commons';
-import { mergeOptions } from './utils.js';
-
-export function normalizeApiOptions([name, payload] = []) {
-  // TODO: take object form as well
-  if (name === false) {
-    return { actor: false };
-  }
-  if (typeof name === 'object' && payload === undefined) {
-    payload = name;
-    name = undefined;
-  }
-  let group = undefined;
-  if (name && name.indexOf('/') !== -1) {
-    [group, name] = name.split('/');
-  }
-  if ((name && typeof name !== 'string') || (payload !== undefined && typeof payload !== 'object')) {
-    throw new Error(`Invalid arguments for useApi(): ${name}, ${payload}`);
-  }
-  return trimObj({ group, name, payload });
-}
-
-export function mergeApiOptions(...optionsList) {
-  if (optionsList[optionsList.length - 1] === false) {
-    return false;
-  }
-  return mergeOptions(optionsList, (merged, options) => Object.assign(merged, {
-    ...options,
-    payload: mergeApiPayloads(merged.payload, options.payload),
-  }));
-}