@miso.ai/client-sdk-ui 1.9.0-beta.9 → 1.9.1-beta.0

package/dist/cjs/actor/views.js

@@ -218,7 +218,7 @@ class Views {
   get(role) {
     return this._actor.get(role).interface;
   }
-  get views() {
+  get all() {
     return this._actor.views.map(view => view.interface);
   }
 }

package/dist/cjs/combo/ask/elements.js

@@ -13,13 +13,9 @@ class AskComboElements {
     }
     (0, _commons.defineValues)(this, {
       root,
-      rootQuery: root.querySelector(`#${_constants.PREFIX}__question miso-query`),
       followUpsSection: root.querySelector(`#${_constants.PREFIX}__follow-ups`),
       relatedResourcesContainer: root.querySelector(`#${_constants.PREFIX}__related-resources miso-ask`)
     });
-    if (!this.rootQuery) {
-      throw new Error(`Root question query element not found.`);
-    }
     if (!this.followUpsSection) {
       throw new Error(`Follow-ups section element not found.`);
     }
@@ -27,8 +23,5 @@ class AskComboElements {
       throw new Error(`Related resources container element not found.`);
     }
   }
-  get rootInput() {
-    return this.rootQuery.querySelector(`[data-role="input"]`);
-  }
 }
 exports.default = AskComboElements;

package/dist/cjs/combo/ask/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
-var _constants = require("../../constants.js");
 var _base = _interopRequireDefault(require("../base.js"));
 var _options = _interopRequireDefault(require("./options.js"));
 var _elements = _interopRequireDefault(require("./elements.js"));
@@ -115,14 +113,16 @@ class AskCombo extends _base.default {
     const context = client.ui.asks;
     const rootWorkflow = client.ui.ask;
 
+    // TODO: set placeholder is present in options
+
     // when a answer is fully populated, insert a new section for the follow-up question
     context.on('done', _ref => {
       let {
         workflow
       } = _ref;
-      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(options, {
+      elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(Object.assign({}, options, {
         parentQuestionId: workflow.questionId
-      }));
+      })));
     });
 
     // when a new query starts, associate the last section container (for related resources) to that workflow
@@ -143,24 +143,8 @@ class AskCombo extends _base.default {
       });
     });
 
-    // wait for miso-query content to be populated
-    const QUERY = _index.fields.view(_constants.ROLE.QUERY);
-    if (!rootWorkflow.states[QUERY]) {
-      await rootWorkflow._hub.once(QUERY);
-    }
-
     // start query if specified in URL
-    const {
-      q
-    } = options;
-    if (q) {
-      elements.rootInput.value = q;
-      rootWorkflow.query({
-        q
-      });
-    } else {
-      elements.rootInput.focus();
-    }
+    rootWorkflow.autoQuery();
   }
 }
 exports.default = AskCombo;

package/dist/cjs/combo/ask/options.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var templates = _interopRequireWildcard(require("./templates.js"));
-const _excluded = ["api_key", "api_host"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _index = require("../../defaults/ask/index.js");
+const _excluded = ["api_key", "api_host", "templates", "phrases"];
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 // TODO: generalize
 
@@ -16,7 +14,7 @@ const {
   currentScript
 } = document;
 const DEFAULT_OPTIONS = Object.freeze({
-  templates,
+  templates: _index.templates,
   autostart: true
 });
 class AskComboOptions {
@@ -51,12 +49,16 @@ function normalizeOptions() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let {
       api_key: apiKey,
-      api_host: apiHost
+      api_host: apiHost,
+      templates,
+      phrases
     } = _ref,
     options = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _commons.trimObj)(Object.assign({
     apiKey,
-    apiHost
+    apiHost,
+    templates: templateAsFunction(templates),
+    phrases
   }, options));
 }
 
@@ -98,4 +100,27 @@ function readFromPageUrl() {
 }
 function coerceValue(value) {
   return value === '' ? true : value === 'false' ? false : value;
+}
+function templateAsFunction(value) {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  switch (typeof value) {
+    case 'function':
+      return value;
+    case 'string':
+    case 'number':
+      return () => value;
+    case 'object':
+      return Array.isArray(value) ? value.map(templateAsFunction) : mappingObjectValues(value, templateAsFunction);
+    default:
+      throw new Error(`Unsupported template type: ${value}`);
+  }
+}
+function mappingObjectValues(obj, fn) {
+  const mapped = {};
+  for (const [key, value] of Object.entries(obj)) {
+    mapped[key] = fn(value);
+  }
+  return mapped;
 }

package/dist/cjs/defaults/ask/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CLASS_PREFIX = void 0;
+const CLASS_PREFIX = exports.CLASS_PREFIX = 'miso-ask-combo';

package/dist/cjs/defaults/ask/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.templates = exports.phrases = exports.constants = void 0;
+var _constants = _interopRequireWildcard(require("./constants.js"));
+var _phrases = _interopRequireWildcard(require("./phrases.js"));
+var _templates = _interopRequireWildcard(require("./templates.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const constants = exports.constants = Object.freeze(_constants);
+const phrases = exports.phrases = Object.freeze(_phrases);
+const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/defaults/ask/phrases.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+/**
+ * The phrase displayed right before <miso-question>
+ */
+const question = exports.question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
+const sources = exports.sources = 'My reply is based on the following';
+
+/**
+ * The phrase displayed right before <miso-query-suggestions>
+ */
+const relatedQuestions = exports.relatedQuestions = 'Related questions you can explore';
+
+/**
+ * The phrase displayed right before <miso-related-resources>
+ */
+const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';

package/dist/cjs/defaults/ask/templates.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.followUp = followUp;
+exports.root = root;
+var _constants = require("./constants.js");
+var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// TODO: refactor
+// TODO: make ids constants
+// TODO: placeholder
+
+function root() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+<section id="${classPrefix}__question" class="${classPrefix}__section ${classPrefix}__question">
+  <miso-ask class="${classPrefix}__query-container">
+    <miso-query></miso-query>
+  </miso-ask>
+</section>
+<section class="${classPrefix}__section ${classPrefix}__answer">
+  ${answer(options)}
+  ${sources(options)}
+  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
+</section>
+<div id="${classPrefix}__follow-ups" class="${classPrefix}__follow-ups"></div>
+<section id="${classPrefix}__related-resources" class="${classPrefix}__section ${classPrefix}__related-resources">
+  <miso-ask visible-when="nonempty" logo="true">
+    <h2 class="${classPrefix}__phrase ${classPrefix}__related-resources-phrase">${phraseText(options, 'relatedResources')}</h2>
+    <miso-related-resources></miso-related-resources>
+  </miso-ask>
+</section>`.trim();
+}
+;
+function followUp() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    classPrefix = _constants.CLASS_PREFIX,
+    parentQuestionId
+  } = options;
+  return `
+<section class="${classPrefix}__section ${classPrefix}__follow-up">
+  <miso-ask class="${classPrefix}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
+    <h3 class="${classPrefix}__phrase ${classPrefix}__related-questions-phrase">${phraseText(options, 'relatedQuestions')}</h3>
+    <miso-query-suggestions></miso-query-suggestions>
+  </miso-ask>
+  <miso-ask class="${classPrefix}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
+    <miso-query></miso-query>
+  </miso-ask>
+  ${answer(options)}
+  ${sources(options)}
+  <miso-ask class="${classPrefix}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
+</section>`.trim();
+}
+;
+
+// helpers //
+function answer(options) {
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+${containerOpenTag('answer', Object.assign({}, options, {
+    visibleWhen: 'ready'
+  }))}
+  ${options.parentQuestionId ? '<hr>' : ''}
+  <div class="${classPrefix}__phrase ${classPrefix}__question-phrase">${phraseText(options, 'question')}</div>
+  <miso-question></miso-question>
+  <miso-answer></miso-answer>
+  <miso-feedback></miso-feedback>
+</miso-ask>`.trim();
+}
+;
+function sources(options) {
+  const {
+    classPrefix = _constants.CLASS_PREFIX
+  } = options;
+  return `
+${containerOpenTag('sources', Object.assign({}, options, {
+    visibleWhen: 'nonempty'
+  }))}
+  <hr>
+  <h3 class="${classPrefix}__phrase ${classPrefix}__sources-phrase">${phraseText(options, 'sources')}</h3>
+  <miso-sources></miso-sources>
+</miso-ask>`.trim();
+}
+;
+function phraseText(options, key) {
+  const {
+    phrases = {}
+  } = options;
+  const fn = phrases[key] || DEFAULT_PHRASES[key];
+  switch (typeof fn) {
+    case 'function':
+      return fn(options);
+    case 'string':
+      return fn;
+    default:
+      return '';
+  }
+}
+function containerOpenTag(name, _ref) {
+  let {
+    visibleWhen,
+    classPrefix = _constants.CLASS_PREFIX,
+    logo = false,
+    circledCitationIndex = true,
+    parentQuestionId
+  } = _ref;
+  let className = `${classPrefix}__${name}-container`;
+  if (circledCitationIndex) {
+    className += ` miso-circled-citation-index`;
+  }
+  const attributes = [` class="${className}"`, ` logo="${logo ? 'true' : 'false'}"`];
+  if (visibleWhen) {
+    attributes.push(` visible-when="${visibleWhen}"`);
+  }
+  if (parentQuestionId) {
+    attributes.push(` parent-question-id="${parentQuestionId}"`);
+  }
+  return `<miso-ask${attributes.join('')}>`;
+}

package/dist/cjs/defaults/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ask = void 0;
+var _ask = _interopRequireWildcard(require("./ask/index.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ask = exports.ask = Object.freeze(_ask);

package/dist/cjs/layout/input/search-box.js

@@ -110,6 +110,21 @@ class SearchBoxLayout extends _template.default {
       this._unsubscribes.push(hub.on(_index.fields.suggestions(), () => this._handleInput()));
     }
   }
+  focus() {
+    if (this._element) {
+      this._context().focus();
+    } else {
+      // take a rain check, wait for render
+      this._focusRequested = true;
+    }
+  }
+  set value(value) {
+    if (this._element) {
+      this._context().value = value;
+    } else {
+      this._valueRequested = value;
+    }
+  }
   _preprocess(_ref2) {
     let {
       state
@@ -135,6 +150,8 @@ class SearchBoxLayout extends _template.default {
     }
     this._setupAutocomplete(element);
     this._renderSuggestions(element, data, controls);
+    this._fullfillFocusRequest(element);
+    this._fullfillValueRequest(element);
   }
   _setupAutocomplete(element) {
     const {
@@ -184,6 +201,20 @@ class SearchBoxLayout extends _template.default {
       this._suggestionItems.set(itemElement, suggestionItems[i++]);
     }
   }
+  _fullfillFocusRequest(element) {
+    if (!element || !this._focusRequested) {
+      return;
+    }
+    this._focusRequested = false;
+    this._context(element).focus();
+  }
+  _fullfillValueRequest(element) {
+    if (!element || !this._valueRequested) {
+      return;
+    }
+    this._context(element).value = this._valueRequested;
+    this._valueRequested = undefined;
+  }
   _context(element) {
     element = element || this._view.element;
     if (!element) {
@@ -288,6 +319,24 @@ class Context {
       });
     }
   }
+  focus() {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && inputElement.focus();
+  }
+  set value(value) {
+    if (!this._element) {
+      return;
+    }
+    const {
+      inputElement
+    } = this;
+    inputElement && (inputElement.value = value);
+  }
   _get(role) {
     return !this._element ? undefined : this._cache[role] || (this._cache[role] = this._element.querySelector(`[data-role="${role}"]`));
   }

package/dist/cjs/plugin.js

@@ -11,6 +11,8 @@ var _layouts = _interopRequireDefault(require("./layouts.js"));
 var elements = _interopRequireWildcard(require("./element/index.js"));
 var layouts = _interopRequireWildcard(require("./layout/index.js"));
 var sources = _interopRequireWildcard(require("./source/index.js"));
+var defaults = _interopRequireWildcard(require("./defaults/index.js"));
+var _styles = require("./styles.js");
 var _misoContainer = _interopRequireDefault(require("./element/container/miso-container.js"));
 var _misoCombo = _interopRequireDefault(require("./element/combo/miso-combo.js"));
 const _excluded = ["containers", "roles", "combos"];
@@ -24,22 +26,20 @@ class UiPlugin extends _commons.Component {
     return PLUGIN_ID;
   }
   constructor() {
-    let {
-      loadStyles = true
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super('ui');
     this.layouts = new _layouts.default(this);
     this._recommendations = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
-    // TODO: load CSS
+    this._ready = new _commons.Resolution();
   }
-
-  install(MisoClient, context) {
+  async install(MisoClient, context) {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
-    const ui = {};
-    (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo']);
+    const ui = {
+      defaults
+    };
+    (0, _commons.delegateGetters)(ui, this, ['layouts', 'combo', 'ready']);
     (0, _commons.defineValues)(this, {
       MisoClient
     });
@@ -75,9 +75,14 @@ class UiPlugin extends _commons.Component {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }
 
+    // load styles
+    await (0, _styles.loadStylesIfNecessary)();
+
+    // define custom elements
     for (const ElementClass of ElementClasses) {
       (0, _commons.defineAndUpgrade)(ElementClass);
     }
+    this._ready.resolve();
   }
   async requireExtension(name) {
     switch (name) {
@@ -87,6 +92,10 @@ class UiPlugin extends _commons.Component {
         throw new Error(`Unknown extension: ${name}`);
     }
   }
+  get ready() {
+    return Promise.all([this._ready.promise, MisoClient.any() // TODO: we need to wait for element connection
+    ]).then(() => {});
+  }
   _injectClient(client) {
     (0, _commons.defineValues)(client, {
       ui: new Ui(this, client)
@@ -160,14 +169,10 @@ class Ui {
   get explore() {
     return this._explore || (this._explore = new _index.Explore(this._plugin, this._client));
   }
-
-  /*
-  async whenStylesLoaded() {
-    // TODO
+  get ready() {
+    return this._plugin._ready.promise;
   }
-  */
 }
-
 class Combo {
   constructor(plugin, MisoClient) {
     this._plugin = plugin;

package/dist/cjs/styles.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadStyles = loadStyles;
+exports.loadStylesIfNecessary = loadStylesIfNecessary;
+var _version = _interopRequireDefault(require("./version.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  currentScript
+} = document;
+let cssUrl;
+let stylesLoaded;
+async function loadStylesIfNecessary() {
+  return stylesLoaded || (stylesLoaded = loadStyles());
+}
+async function loadStyles() {
+  try {
+    let link = getExistedLinkElement();
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = getCssUrl();
+      document.head.appendChild(link);
+    }
+    return waitForStylesApplied(link);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+// helpers //
+function getCssUrl() {
+  return cssUrl || (cssUrl = resolveCssUrl());
+}
+function resolveCssUrl() {
+  // TODO: refactor with getPluginScriptUrl() in core
+  if (_version.default === 'dev') {
+    const src = currentScript.src;
+    const searchIndex = src.indexOf('?');
+    const k = searchIndex < 0 ? src.length : searchIndex;
+    const i = src.lastIndexOf('/', k); // .../dist/umd/*.min.js
+    return `${src.slice(0, i - 4)}/css/ui.css`;
+  } else {
+    return `https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@${_version.default}/dist/css/ui.css`;
+  }
+}
+function getExistedLinkElement() {
+  return document.head.querySelector(`link[href="${getCssUrl()}"]`);
+}
+async function waitForStylesApplied(element) {
+  await waitForSheetAvailable(element);
+  await waitForSheetIncluded(element);
+}
+async function waitForSheetAvailable(element) {
+  if (element.sheet) {
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    let intervalId;
+    element.onerror = () => {
+      intervalId && clearInterval(intervalId);
+      reject();
+    };
+    intervalId = setInterval(() => {
+      if (!element.sheet) {
+        return;
+      }
+      intervalId && clearInterval(intervalId);
+      resolve();
+    }, 100);
+  });
+}
+async function waitForSheetIncluded(element) {
+  if (isSheetIncluded(element)) {
+    return;
+  }
+  return new Promise(resolve => {
+    let intervalId;
+    intervalId = setInterval(() => {
+      if (!isSheetIncluded(element)) {
+        return;
+      }
+      intervalId && clearInterval(intervalId);
+      resolve();
+    }, 100);
+  });
+}
+function isSheetIncluded(element) {
+  for (const sheet of document.styleSheets) {
+    if (sheet.ownerNode === element) {
+      return true;
+    }
+  }
+  return false;
+}

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.9.0-beta.9';
+var _default = exports.default = '1.9.1-beta.0';

package/dist/cjs/workflow/ask.js

@@ -123,6 +123,29 @@ class Ask extends _base.default {
   }
 
   // lifecycle //
+  autoQuery() {
+    let {
+      setValue = true,
+      focus = true
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const q = new URLSearchParams(window.location.search).get('q');
+    const {
+      layout
+    } = this._views.get(_constants.ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({
+        q
+      });
+    }
+  }
   query() {
     let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {

package/dist/cjs/workflow/base.js

@@ -98,6 +98,9 @@ class Workflow extends _commons.Component {
   get states() {
     return this._hub.states;
   }
+  get views() {
+    return this._views.interface;
+  }
 
   // lifecycle //
   reset() {

package/dist/cjs/workflow/search.js

@@ -43,6 +43,29 @@ class Search extends _base.default {
   }
 
   // lifecycle //
+  autoQuery() {
+    let {
+      setValue = true,
+      focus = true
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const q = new URLSearchParams(window.location.search).get('q');
+    const {
+      layout
+    } = this._views.get(_constants.ROLE.QUERY);
+    if (layout) {
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
+    }
+    if (q) {
+      this.query({
+        q
+      });
+    }
+  }
   query(payload) {
     this.restart();
     const {