@miso.ai/client-sdk-ui 1.10.3 → 1.11.0-beta.0

package/src/workflow/ask.js

@@ -1,48 +1,27 @@
 import { defineValues, trimObj, API } from '@miso.ai/commons';
-import Workflow from './base.js';
-import { mergeApiOptions } from './options.js';
-import * as sources from '../source/index.js';
-import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
-import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
-import { makeConfigurable } from './options.js';
-import { processData as processAffiliationData } from '../affiliation/index.js';
+import AnswerBasedWorkflow from './answer-based.js';
+import { fields } from '../actor/index.js';
+import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
+import { OptionListLayout, ListLayout, TextLayout } from '../layout/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
-  group: API.GROUP.ASK,
+  ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
   name: API.NAME.QUESTIONS,
   payload: {
-    source_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at'],
+    ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS.payload,
     related_resource_fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at'],
-    cite_link: 1,
-    cite_start: '[',
-    cite_end: ']',
-  },
-});
-
-const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
-  actor: false,
-  api: {
-    group: API.GROUP.ASK,
-    name: API.NAME.AUTOCOMPLETE,
   },
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
-  [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
-  [ROLE.ANSWER]: TypewriterLayout.type,
-  [ROLE.FEEDBACK]: FeedbackLayout.type,
-  [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
+  ...AnswerBasedWorkflow.DEFAULT_LAYOUTS,
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
-  [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
-  [ROLE.SOURCES]: {},
+  ...AnswerBasedWorkflow.DEFAULT_TRACKERS,
   [ROLE.RELATED_RESOURCES]: {},
-  [ROLE.AFFILIATION]: {},
   [ROLE.QUERY_SUGGESTIONS]: {
     click: {
       validate: event => event.button === 0, // left click only
@@ -51,13 +30,13 @@ const DEFAULT_TRACKERS = Object.freeze({
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
+  ...AnswerBasedWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
-  autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
-export default class Ask extends Workflow {
+export default class Ask extends AnswerBasedWorkflow {
 
   constructor(context, parentQuestionId) {
     super({
@@ -65,38 +44,47 @@ export default class Ask extends Workflow {
       context,
       roles: Object.keys(DEFAULT_LAYOUTS),
       defaults: DEFAULT_OPTIONS,
+      parentQuestionId,
     });
-    this._context = context;
-    this._autoQuery = false;
+  }
+
+  _initProperties(args) {
+    super._initProperties(args);
+    const { parentQuestionId } = args;
     defineValues(this, { parentQuestionId });
+  }
 
-    this._feedback = new FeedbackActor(this._hub);
+  _initSubscriptions(args) {
     this._setSuggestedQuestions();
+    super._initSubscriptions(args);
+  }
 
-    /*
-    this._autocomplete = new AutocompleteActor(this._hub, {
-      source: sources.api(this._client),
-      options: this._options,
-    });
-    */
-
-    this._unsubscribes = [
-      ...this._unsubscribes,
-      this._hub.on(fields.query(), payload => this.query(payload)),
-      this._hub.on(fields.view(ROLE.ANSWER), data => this._onAnswerViewUpdate(data)),
-      this._views.get(ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event)),
-    ];
-
-    parentQuestionId && context._byPqid.set(parentQuestionId, this);
-    context._events.emit('create', this);
+  _setSuggestedQuestions() {
+    const { previous } = this;
+    if (!previous) {
+      return;
+    }
+    const values = previous.states[fields.data()].value;
+    const value = values.suggested_followup_questions || values.followup_questions || [];
+    this._hub.update(fields.suggestions(), { value: value.map(text => ({ text })) });
+  }
 
-    this.reset(); // create a session so query suggestions can be tracked
+  _initReset(args) {
+    // register at context
+    args.parentQuestionId && this._context._byPqid.set(args.parentQuestionId, this);
+    this._context._events.emit('create', this);
+    super._initReset(args);
   }
 
-  get questionId() {
-    return this._questionId;
+  // lifecycle //
+  restart() {
+    if (this._questionId) {
+      this._context._byQid.delete(this._questionId);
+    }
+    super.restart();
   }
 
+  // properties //
   get rootQuestionId() {
     return this._context.root.questionId;
   }
@@ -116,174 +104,65 @@ export default class Ask extends Workflow {
     return questionId ? this._context.getByParentQuestionId(questionId, { autoCreate: true }) : undefined;
   }
 
-  // lifecycle //
-  autoQuery(options = {}) {
-    const { setValue = true, focus = true } = this._autoQuery = options;
-    const searchParams = new URLSearchParams(window.location.search);
-    const q = searchParams.get('q');
-    const qs = searchParams.get('qs');
-    const { layout } = this._views.get(ROLE.QUERY);
-    if (layout) {
-      if (q && setValue) {
-        layout.value = q;
-      }
-      if (!q && focus) {
-        layout.focus();
-      }
-    }
-    if (q) {
-      this.query({ q, qs });
-    }
-  }
-
-  query({ q: question, qs: questionSource, ...payload } = {}) {
-    payload = { ...payload, question };
-    questionSource = questionSource || ORGANIC_QUESTION_SOURCE;
-
-    if (this.parentQuestionId) {
-      payload.parent_question_id = this.parentQuestionId;
-    }
-    (payload._meta || (payload._meta = {})).question_source = questionSource;
-
-    // clear question id from previous session
-    if (this._questionId) {
-      this._context._byQid.delete(this._questionId);
-      this._questionId = undefined;
-    }
-
-    this.restart();
-
-    const { session } = this;
-    session.meta.question_source = questionSource;
-    this._hub.update(fields.request(), mergeApiOptions(this._options.resolved.api, { payload, session }));
-
-    return this;
-  }
-
-  restart() {
-    // TODO: move to workflow base
-    const { session, status, ongoing } = this._hub.states[fields.view(ROLE.ANSWER)] || {};
-    if (session && status !== STATUS.INITIAL && (status !== STATUS.READY || ongoing)) {
-      // it's interrupted by a new question
-      const state = Object.freeze({ session, status, ongoing });
-      this._emit('interrupt', state);
-      this._emit('finally', state);
-    }
-    super.restart();
-  }
-
-  /*
-  updateCompletions(event) {
-    // TODO: verify
-    this._hub.update(fields.completions(), {
-      ...event,
-      source: 'manual',
+  // query //
+  _buildPayload({ q, qs, ...payload } = {}) {
+    const { parentQuestionId } = this;
+    return trimObj({
+      ...payload,
+      question: q, // question, not q
+      parent_question_id: parentQuestionId,
+      _meta: {
+        ...payload._meta,
+        question_source: qs || ORGANIC_QUESTION_SOURCE, // might be null, not undefined
+      },
     });
-    return this;
   }
-  */
 
-  _defaultProcessData(data) {
-    data = super._defaultProcessData(data);
-    const { value, request } = data;
-    if (!value) {
-      return data;
-    }
-    const { question_id: questionId, question } = value;
-    const organic = request && request.payload && request.payload._meta && request.payload._meta.question_source === ORGANIC_QUESTION_SOURCE;
+  // interactions //
+  _preprocessInteraction(payload) {
+    payload = super._preprocessInteraction(payload) || {};
 
-    // capture question ID and register at context
-    if (!this._questionId && questionId) {
-      this._questionId = questionId;
-      this._context._byQid.set(questionId, this);
-    }
+    const { context = {} } = payload;
+    const { ...custom_context } = context.custom_context || {};
+    let { rootQuestionId, parentQuestionId, questionId } = this;
 
-    // update URL if autoQuery.updateUrl is not false
-    if (this._autoQuery && this._autoQuery.updateUrl !== false) {
-      const url = new URL(window.location);
-      const currentQuestion = url.searchParams.get('q');
-      // TODO: review this, handle &s=
-      if (question !== currentQuestion && (!organic || this._autoQuery.updateUrl === true)) {
-        url.searchParams.set('q', question);
-        window.history.replaceState({}, '', url);
-      }
+    if (custom_context.property === ROLE.QUERY_SUGGESTIONS) {
+      questionId = parentQuestionId;
+      parentQuestionId = this.previous && this.previous.parentQuestionId;
+      custom_context.property = 'suggested_followup_questions';
+      custom_context.question_source = this.previous && this.previous.session.meta.question_source;
     }
+    custom_context.question_id = questionId;
+    custom_context.root_question_id = rootQuestionId;
+    custom_context.parent_question_id = parentQuestionId;
 
-    // affiliation
-    data = processAffiliationData(data);
-
-    // 1. put answer_stage to meta
-    // 2. mark ongoing flag
     return {
-      ...data,
-      ongoing: !value.finished,
-      meta: {
-        ...data.meta,
-        answer_stage: value.answer_stage,
+      ...payload,
+      context: {
+        ...context,
+        custom_context: trimObj(custom_context),
       },
     };
   }
 
-  _onAnswerViewUpdate({ session, status, ongoing }) {
-    if (status === STATUS.INITIAL) {
-      return;
-    }
-    const done = status === STATUS.READY && !ongoing;
-    const erroneous = status === STATUS.ERRONEOUS;
-    const eventName = done ? 'done' : erroneous ? 'error' : status;
-    const state = Object.freeze({ session, status, ongoing });
-    this._emit(eventName, state);
-    if (done || erroneous) {
-      this._emit('finally', state);
-    }
-  }
-
-  _setSuggestedQuestions() {
-    const { previous } = this;
-    if (!previous) {
-      return;
-    }
-    const values = previous.states[fields.data()].value;
-    const value = values.suggested_followup_questions || values.followup_questions || [];
-    this._hub.update(fields.suggestions(), { value: value.map(text => ({ text })) });
-  }
-
-  _onCitationClick({ index }) {
-    const { value } = this.states[fields.data()] || {};
-    const { sources } = value || {};
-    // index is 1-based
-    const source = sources && sources[index - 1];
-    if (!source || !source.product_id) {
-      return;
+  // helpers //
+  _writeQuestionId(questionId) {
+    // capture question ID and register at context
+    if (!this._questionId && questionId) {
+      this._questionId = questionId;
+      this._context._byQid.set(questionId, this);
     }
-    // TODO: should we track impression as well?
-    this._trackers.sources.click([source.product_id], { manual: false });
   }
 
-  _preprocessInteraction(payload) {
-    payload = super._preprocessInteraction(payload) || {};
-    const { context = {} } = payload;
-    const { custom_context = {} } = context;
-    let { rootQuestionId, parentQuestionId, questionId } = this;
-    // when we track suggested questions, we are actually tracking the suggested_followup_questions of the previous workflow
-    if (custom_context.property === ROLE.QUERY_SUGGESTIONS) {
-      questionId = parentQuestionId;
-      parentQuestionId = this.previous && this.previous.parentQuestionId;
-      custom_context.property = 'suggested_followup_questions';
-      custom_context.question_source = this.previous && this.previous.session.meta.question_source;
+  _clearQuestionId() {
+    // clear question id from previous session
+    if (this._questionId) {
+      this._context._byQid.delete(this._questionId);
+      this._questionId = undefined;
     }
-    payload.context = {
-      ...context,
-      custom_context: trimObj({
-        root_question_id: rootQuestionId,
-        parent_question_id: parentQuestionId,
-        question_id: questionId,
-        ...custom_context,
-      }),
-    };
-    return payload;
   }
 
+  // destroy //
   _destroy(options) {
     const { parentQuestionId, questionId } = this;
     if (parentQuestionId) {
@@ -292,7 +171,6 @@ export default class Ask extends Workflow {
     if (questionId) {
       this._context._byQid.delete(questionId);
     }
-    this._feedback._destroy();
     super._destroy(options);
   }
 

package/src/workflow/base.js

@@ -1,16 +1,23 @@
 import { Component, isNullLike } from '@miso.ai/commons';
 import { Hub, SessionMaker, DataActor, ViewsActor, InteractionsActor, fields } from '../actor/index.js';
-import * as sources from '../source/index.js';
+import * as sources from '../source.js';
 import { STATUS, ROLE } from '../constants.js';
 import { ContainerLayout, ErrorLayout } from '../layout/index.js';
 import { injectLogger } from './utils.js';
 import { WorkflowOptions, mergeLayoutsOptions, mergeInteractionsOptions, makeConfigurable } from './options.js';
+import { writeDataStatus, writeMisoIdToMeta, addDataInstructions } from './processors.js';
 
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.CONTAINER]: ContainerLayout.type,
   [ROLE.ERROR]: ErrorLayout.type,
 });
 
+const ROLES_CONFIG = Object.freeze({
+  [ROLE.ERROR]: {
+    mapping: data => data.error,
+  },
+});
+
 function mergeDefaults(workflow, { layouts, interactions, ...defaults } = {}) {
   const DEFAULT_INTERACTIONS = {
     preprocess: [payload => workflow._preprocessInteraction(payload)],
@@ -28,36 +35,56 @@ function getRevision(data) {
 
 export default class Workflow extends Component {
 
-  constructor({
-    name,
-    context,
-    plugin,
-    client,
-    roles,
-    defaults,
-  }) {
-    super(name || 'workflow', plugin);
+  constructor(args) {
+    super(args.name || 'workflow', args.plugin);
+
+    let { context, plugin, client } = args;
     this._context = context;
     this._plugin = plugin = plugin || context._plugin;
     this._client = client = client || context._client;
-    this._name = name;
-    this._roles = roles;
+    args = Object.freeze({ ...args, plugin, client });
+
+    this._name = args.name;
+    this._roles = args.roles;
+    this._rolesConfig = { ...ROLES_CONFIG, ...args.rolesConfig };
+
+    this._extensions = plugin._getExtensions(client);
+    this._options = new WorkflowOptions(context && context._options, mergeDefaults(this, args.defaults));
+    this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
 
-    const extensions = this._extensions = plugin._getExtensions(client);
-    const options = this._options = new WorkflowOptions(context && context._options, mergeDefaults(this, defaults));
-    const hub = this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
-    const layouts = plugin.layouts;
+    this._initProperties(args);
+    this._initActors(args);
+    this._initSubscriptions(args);
+    this._initReset(args);
+  }
+
+  _initProperties() {}
+
+  _initActors() {
+    const hub = this._hub;
+    const client = this._client;
+    const roles = this._roles;
+    const rolesConfig = this._rolesConfig;
+    const options = this._options;
+    const extensions = this._extensions;
+    const layouts = this._plugin.layouts;
 
     this._sessions = new SessionMaker(hub);
     this._data = new DataActor(hub, { source: sources.api(client), options });
-    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
+    this._views = new ViewsActor(hub, { extensions, layouts, roles, rolesConfig, options, workflow: this._name });
     this._interactions = new InteractionsActor(hub, { client, options });
+  }
 
+  _initSubscriptions() {
     this._unsubscribes = [
       this._hub.on(fields.response(), data => this.updateData(data)),
     ];
   }
 
+  _initReset() {
+    this.reset();
+  }
+
   get uuid() {
     return this.session && this.session.uuid;
   }
@@ -75,6 +102,11 @@ export default class Workflow extends Component {
     return this._hub.states;
   }
 
+  get status() {
+    const data = this._hub.states[fields.data()];
+    return data && data.status;
+  }
+
   get views() {
     return this._views.interface;
   }
@@ -91,13 +123,12 @@ export default class Workflow extends Component {
   }
 
   restart() {
-    this.reset();
-    this.start();
+    this._sessions.restart();
     return this;
   }
 
   // states //
-  updateData(data) {
+  updateData(data, { instructions } = {}) {
     if (!data) {
       throw new Error(`Data is required.`);
     }
@@ -123,31 +154,37 @@ export default class Workflow extends Component {
 
     this._sessions.start(); // in case session not started yet
 
+    data = writeDataStatus(data);
     data = this._defaultProcessData(data);
     for (const process of this._options.resolved.dataProcessor) {
       data = process(data);
     }
 
+    // write data instructions from function args
+    data = addDataInstructions(data, instructions);
+    data = this._mergeDataIfNecessary(data);
+
     this._hub.update(fields.data(), data);
 
     return this;
   }
 
   _defaultProcessData(data) {
-    const { value } = data;
-    // put miso_id to meta
-    if (!value || !value.miso_id) {
+    return writeMisoIdToMeta(data);
+  }
+
+  _mergeDataIfNecessary(data) {
+    if (!data._inst || !data._inst.merge) {
       return data;
     }
     return {
+      ...this._hub.states[fields.data()],
       ...data,
-      meta: {
-        ...data.meta,
-        miso_id: value.miso_id,
-      },
     };
   }
 
+  _handleResponseObject() {}
+
   // TODO: notifyViewUpdateAll()
 
   notifyViewUpdate(role, state) {

package/src/workflow/explore.js

@@ -39,9 +39,16 @@ export default class Explore extends Workflow {
       roles: Object.keys(DEFAULT_LAYOUTS),
       defaults: DEFAULT_OPTIONS,
     });
+  }
+
+  _initProperties(args) {
+    super._initProperties(args);
     this._productId = undefined;
     this._linkFn = undefined;
+  }
 
+  _initSubscriptions(args) {
+    super._initSubscriptions(args);
     this._unsubscribes = [
       ...this._unsubscribes,
       this._views.get(ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)),
@@ -49,6 +56,7 @@ export default class Explore extends Workflow {
     ];
   }
 
+  // configuration //
   set productId(value) {
     console.warning('DEPRECATED: use useApi() instead');
     this.useApi({
@@ -84,7 +92,8 @@ export default class Explore extends Workflow {
     if (relatedQuestions) {
       this._hub.update(fields.request(), mergeApiOptions(this._options.resolved.api, { session }));
     } else {
-      this.updateData({ session, value: { related_questions: [] } });
+      // TODO: ad-hoc
+      this.updateData({ session, request: {}, value: { related_questions: [] } });
     }
     return this;
   }