@miso.ai/client-sdk-ui 1.9.0-beta.8 → 1.9.0

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

@@ -18,6 +18,7 @@ class AskCombo extends _base.default {
       plugin,
       MisoClient
     });
+    // TODO: extract options to super class
     this._options = new _options.default();
     this._localOptions = {};
   }
@@ -41,6 +42,9 @@ class AskCombo extends _base.default {
   get elements() {
     return this._elements;
   }
+  autoStart() {
+    this.resolvedOptions.autostart && this.start();
+  }
   async _start() {
     await (0, _commons.waitForDomContentLoaded)();
     await this.MisoClient.cmdDone;
@@ -111,6 +115,8 @@ 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 {

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

@@ -6,7 +6,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"];
+var phrases = _interopRequireWildcard(require("./phrases.js"));
+const _excluded = ["api_key", "api_host", "templates", "phrases"];
 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; }
 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; }
@@ -16,7 +17,9 @@ const {
   currentScript
 } = document;
 const DEFAULT_OPTIONS = Object.freeze({
-  templates
+  templates,
+  phrases,
+  autostart: true
 });
 class AskComboOptions {
   constructor() {
@@ -50,12 +53,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: templateAsFunction(phrases)
   }, options));
 }
 
@@ -74,7 +81,7 @@ function readFromScriptSrc() {
     if (key === 'q') {
       continue;
     }
-    params[key] = value === '' ? true : value;
+    params[key] = coerceValue(value);
   }
   return params;
 }
@@ -88,10 +95,36 @@ function readFromPageUrl() {
   const params = {};
   for (const [key, value] of new URLSearchParams(window.location.search)) {
     if (key.startsWith('miso_') && key.length > 5 && key !== 'miso_api_key') {
-      params[key.substring(5)] = value === '' ? true : value;
+      params[key.substring(5)] = coerceValue(value);
     } else if (key === 'q') {
       params.q = value;
     }
   }
   return params;
+}
+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/combo/ask/phrases.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+const question = exports.question = 'You asked...';
+const sources = exports.sources = 'My reply is based on the following';
+const relatedQuestions = exports.relatedQuestions = 'Related questions you can explore';
+const relatedResources = exports.relatedResources = 'Go beyond, and learn more about this topic';

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

@@ -17,50 +17,50 @@ const root = options => `
 <section class="${_constants.PREFIX}__section ${_constants.PREFIX}__answer">
   ${options.templates.answer(options)}
   ${options.templates.sources(options)}
+  <miso-ask class="${_constants.PREFIX}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
 </section>
 <div id="${_constants.PREFIX}__follow-ups" class="${_constants.PREFIX}__follow-ups"></div>
 <section id="${_constants.PREFIX}__related-resources" class="${_constants.PREFIX}__section ${_constants.PREFIX}__related-resources">
   <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-resources-phrase"></h2>
+    <h2 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-resources-phrase">${options.phrases.relatedResources(options)}</h2>
     <miso-related-resources></miso-related-resources>
   </miso-ask>
 </section>
 `.trim();
 exports.root = root;
-const followUp = (options, _ref) => {
-  let {
+const followUp = function (options) {
+  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
     parentQuestionId
-  } = _ref;
+  } = session;
   return `
 <section class="${_constants.PREFIX}__section ${_constants.PREFIX}__follow-up">
-  <miso-ask class="${_constants.PREFIX}__query-suggestions-container" visible-when="initial" parent-question-id="${parentQuestionId}">
-    <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-questions-phrase"></h3>
+  <miso-ask class="${_constants.PREFIX}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
+    <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__related-questions-phrase">${options.phrases.relatedQuestions(options, session)}</h3>
     <miso-query-suggestions></miso-query-suggestions>
   </miso-ask>
   <miso-ask class="${_constants.PREFIX}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
     <miso-query></miso-query>
   </miso-ask>
-  ${options.templates.answer(options, {
-    parentQuestionId
-  })}
-  ${options.templates.sources(options, {
-    parentQuestionId
-  })}
+  ${options.templates.answer(options, session)}
+  ${options.templates.sources(options, session)}
+  <miso-ask class="${_constants.PREFIX}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
 </section>
 `.trim();
 };
 exports.followUp = followUp;
 const answer = function (options) {
-  let {
-    parentQuestionId
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // TODO: include/omit miso-circled-citation-index by options
+  const {
+    parentQuestionId
+  } = session;
   const openTag = `<miso-ask class="${_constants.PREFIX}__answer-container miso-circled-citation-index" visible-when="ready" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
   const closeTag = '</miso-ask>';
   return `
 ${openTag}
   ${parentQuestionId ? '<hr>' : ''}
-  <div class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__question-phrase"></div>
+  <div class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__question-phrase">${options.phrases.question(options, session)}</div>
   <miso-question></miso-question>
   <miso-answer></miso-answer>
   <miso-feedback></miso-feedback>
@@ -69,16 +69,17 @@ ${closeTag}
 };
 exports.answer = answer;
 const sources = function (options) {
-  let {
-    parentQuestionId
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // TODO: include/omit miso-circled-citation-index by options
+  const {
+    parentQuestionId
+  } = session;
   const openTag = `<miso-ask class="${_constants.PREFIX}__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
   const closeTag = '</miso-ask>';
   return `
 ${openTag}
   <hr>
-  <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__sources-phrase"></h3>
+  <h3 class="${_constants.PREFIX}__phrase ${_constants.PREFIX}__sources-phrase">${options.phrases.sources(options, session)}</h3>
   <miso-sources></miso-sources>
 ${closeTag}
 `.trim();

package/dist/cjs/combo/base.js

@@ -30,11 +30,14 @@ class Combo extends _commons.Component {
   set element(element) {
     this._element = element;
   }
-  start() {
+  start(options) {
     if (this._started) {
       return;
     }
     this._started = true;
+    if (options) {
+      this.config(options);
+    }
     this._start();
   }
   _start() {

package/dist/cjs/element/combo/miso-combo.js

@@ -28,7 +28,7 @@ class MisoComboElement extends HTMLElement {
     }
     this._combo = combo;
     combo.element = this;
-    combo.start();
+    combo.autoStart();
   }
 }
 exports.default = MisoComboElement;

package/dist/cjs/plugin.js

@@ -11,6 +11,7 @@ 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 _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,18 +25,13 @@ 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
   }
-
-  install(MisoClient, context) {
+  async install(MisoClient, context) {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
     const ui = {};
@@ -75,6 +71,10 @@ 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);
     }

package/dist/cjs/styles.js

@@ -0,0 +1,77 @@
+"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) {
+      return waitForLinkLoaded(link);
+    }
+    link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = getCssUrl();
+    return new Promise((resolve, reject) => {
+      link.onload = resolve;
+      link.onerror = reject;
+      document.head.appendChild(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 waitForLinkLoaded(element) {
+  if (element.sheet) {
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    let intervalId;
+    element.onload = () => {
+      intervalId && clearInterval(intervalId);
+      resolve();
+    };
+    element.onerror = () => {
+      intervalId && clearInterval(intervalId);
+      reject();
+    };
+    intervalId = setInterval(() => {
+      if (element.sheet) {
+        intervalId && clearInterval(intervalId);
+        resolve();
+      }
+    }, 100);
+  });
+}

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.8';
+var _default = exports.default = '1.9.0';

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.9.0-beta.8"
+    "@miso.ai/commons": "1.9.0"
   },
-  "version": "1.9.0-beta.8"
+  "version": "1.9.0"
 }

package/src/combo/ask/index.js

@@ -13,6 +13,7 @@ export default class AskCombo extends Combo {
       plugin,
       MisoClient,
     });
+    // TODO: extract options to super class
     this._options = new AskComboOptions();
     this._localOptions = {};
   }
@@ -40,6 +41,10 @@ export default class AskCombo extends Combo {
     return this._elements;
   }
 
+  autoStart() {
+    this.resolvedOptions.autostart && this.start();
+  }
+
   async _start() {
     await waitForDomContentLoaded();
     await this.MisoClient.cmdDone;
@@ -100,6 +105,8 @@ export default class AskCombo extends Combo {
     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', ({ workflow }) => {
       elements.followUpsSection.insertAdjacentHTML('beforeend', templates.followUp(options, { parentQuestionId: workflow.questionId }));

package/src/combo/ask/options.js

@@ -1,5 +1,6 @@
 import { trimObj } from '@miso.ai/commons';
 import * as templates from './templates.js';
+import * as phrases from './phrases.js';
 
 // TODO: generalize
 
@@ -7,6 +8,8 @@ const { currentScript } = document;
 
 const DEFAULT_OPTIONS = Object.freeze({
   templates,
+  phrases,
+  autostart: true,
 });
 
 export default class AskComboOptions {
@@ -40,10 +43,12 @@ function mergeTwoOptions(merged, overrides) {
   });
 }
 
-function normalizeOptions({ api_key: apiKey, api_host: apiHost, ...options } = {}) {
+function normalizeOptions({ api_key: apiKey, api_host: apiHost, templates, phrases, ...options } = {}) {
   return trimObj({
     apiKey,
     apiHost,
+    templates: templateAsFunction(templates),
+    phrases: templateAsFunction(phrases),
     ...options,
   });
 }
@@ -64,7 +69,7 @@ function readFromScriptSrc() {
     if (key === 'q') {
       continue;
     }
-    params[key] = value === '' ? true : value;
+    params[key] = coerceValue(value);
   }
   return params;
 }
@@ -78,10 +83,39 @@ function readFromPageUrl() {
   const params = {};
   for (const [key, value] of new URLSearchParams(window.location.search)) {
     if (key.startsWith('miso_') && key.length > 5 && key !== 'miso_api_key') {
-      params[key.substring(5)] = value === '' ? true : value;
+      params[key.substring(5)] = coerceValue(value);
     } else if (key === 'q') {
       params.q = value;
     }
   }
   return params;
 }
+
+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/src/combo/ask/phrases.js

@@ -0,0 +1,7 @@
+export const question = 'You asked...';
+
+export const sources = 'My reply is based on the following';
+
+export const relatedQuestions = 'Related questions you can explore';
+
+export const relatedResources = 'Go beyond, and learn more about this topic';

package/src/combo/ask/templates.js

@@ -12,38 +12,44 @@ export const root = (options) => `
 <section class="${PREFIX}__section ${PREFIX}__answer">
   ${options.templates.answer(options)}
   ${options.templates.sources(options)}
+  <miso-ask class="${PREFIX}__bottom-spacing-container" visible-when="ongoing"></miso-ask>
 </section>
 <div id="${PREFIX}__follow-ups" class="${PREFIX}__follow-ups"></div>
 <section id="${PREFIX}__related-resources" class="${PREFIX}__section ${PREFIX}__related-resources">
   <miso-ask visible-when="nonempty" logo="true">
-    <h2 class="${PREFIX}__phrase ${PREFIX}__related-resources-phrase"></h2>
+    <h2 class="${PREFIX}__phrase ${PREFIX}__related-resources-phrase">${options.phrases.relatedResources(options)}</h2>
     <miso-related-resources></miso-related-resources>
   </miso-ask>
 </section>
 `.trim();
 
-export const followUp = (options, { parentQuestionId }) => `
+export const followUp = (options, session = {}) => {
+  const { parentQuestionId } = session;
+  return `
 <section class="${PREFIX}__section ${PREFIX}__follow-up">
-  <miso-ask class="${PREFIX}__query-suggestions-container" visible-when="initial" parent-question-id="${parentQuestionId}">
-    <h3 class="${PREFIX}__phrase ${PREFIX}__related-questions-phrase"></h3>
+  <miso-ask class="${PREFIX}__query-suggestions-container" visible-when="initial+nonempty" parent-question-id="${parentQuestionId}">
+    <h3 class="${PREFIX}__phrase ${PREFIX}__related-questions-phrase">${options.phrases.relatedQuestions(options, session)}</h3>
     <miso-query-suggestions></miso-query-suggestions>
   </miso-ask>
   <miso-ask class="${PREFIX}__query-container" visible-when="initial loading" parent-question-id="${parentQuestionId}">
     <miso-query></miso-query>
   </miso-ask>
-  ${options.templates.answer(options, { parentQuestionId })}
-  ${options.templates.sources(options, { parentQuestionId })}
+  ${options.templates.answer(options, session)}
+  ${options.templates.sources(options, session)}
+  <miso-ask class="${PREFIX}__bottom-spacing-container" visible-when="ongoing" parent-question-id="${parentQuestionId}"></miso-ask>
 </section>
 `.trim();
+};
 
-export const answer = (options, { parentQuestionId } = {}) => {
+export const answer = (options, session = {}) => {
   // TODO: include/omit miso-circled-citation-index by options
+  const { parentQuestionId } = session;
   const openTag = `<miso-ask class="${PREFIX}__answer-container miso-circled-citation-index" visible-when="ready" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
   const closeTag = '</miso-ask>';
   return `
 ${openTag}
   ${ parentQuestionId ? '<hr>' : '' }
-  <div class="${PREFIX}__phrase ${PREFIX}__question-phrase"></div>
+  <div class="${PREFIX}__phrase ${PREFIX}__question-phrase">${options.phrases.question(options, session)}</div>
   <miso-question></miso-question>
   <miso-answer></miso-answer>
   <miso-feedback></miso-feedback>
@@ -51,14 +57,15 @@ ${closeTag}
 `.trim();
 };
 
-export const sources = (options, { parentQuestionId } = {}) => {
+export const sources = (options, session = {}) => {
   // TODO: include/omit miso-circled-citation-index by options
+  const { parentQuestionId } = session;
   const openTag = `<miso-ask class="${PREFIX}__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false"${parentQuestionId ? ` parent-question-id="${parentQuestionId}"` : ''}>`;
   const closeTag = '</miso-ask>';
   return `
 ${openTag}
   <hr>
-  <h3 class="${PREFIX}__phrase ${PREFIX}__sources-phrase"></h3>
+  <h3 class="${PREFIX}__phrase ${PREFIX}__sources-phrase">${options.phrases.sources(options, session)}</h3>
   <miso-sources></miso-sources>
 ${closeTag}
 `.trim();

package/src/combo/base.js

@@ -27,11 +27,14 @@ export default class Combo extends Component {
     this._element = element;
   }
 
-  start() {
+  start(options) {
     if (this._started) {
       return;
     }
     this._started = true;
+    if (options) {
+      this.config(options);
+    }
     this._start();
   }
 

package/src/element/combo/miso-combo.js

@@ -26,7 +26,7 @@ export default class MisoComboElement extends HTMLElement {
     }
     this._combo = combo;
     combo.element = this;
-    combo.start();
+    combo.autoStart();
   }
 
 }

package/src/plugin.js

@@ -5,6 +5,7 @@ import Layouts from './layouts.js';
 import * as elements from './element/index.js';
 import * as layouts from './layout/index.js';
 import * as sources from './source/index.js';
+import { loadStylesIfNecessary } from './styles.js';
 
 import MisoContainerElement from './element/container/miso-container.js';
 import MisoComboElement from './element/combo/miso-combo.js';
@@ -17,16 +18,15 @@ export default class UiPlugin extends Component {
     return PLUGIN_ID;
   }
 
-  constructor({ loadStyles = true } = {}) {
+  constructor() {
     super('ui');
     this.layouts = new Layouts(this);
     this._recommendations = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
-    // TODO: load CSS
   }
 
-  install(MisoClient, context) {
+  async install(MisoClient, context) {
     context.addSubtree(this);
     MisoClient.on('create', this._injectClient.bind(this));
 
@@ -61,6 +61,11 @@ export default class UiPlugin extends Component {
     for (const ElementClass of ElementClasses) {
       ElementClass.MisoClient = MisoClient; // TODO: find better way
     }
+
+    // load styles
+    await loadStylesIfNecessary();
+
+    // define custom elements
     for (const ElementClass of ElementClasses) {
       defineAndUpgrade(ElementClass);
     }

package/src/styles.js

@@ -0,0 +1,74 @@
+import version from './version.js';
+
+const { currentScript } = document;
+
+let cssUrl;
+let stylesLoaded;
+
+export async function loadStylesIfNecessary() {
+  return stylesLoaded || (stylesLoaded = loadStyles());
+}
+
+export async function loadStyles() {
+  try {
+    let link = getExistedLinkElement();
+    if (link) {
+      return waitForLinkLoaded(link)
+    }
+    link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = getCssUrl();
+    return new Promise((resolve, reject) => {
+      link.onload = resolve;
+      link.onerror = reject;
+      document.head.appendChild(link);
+    });
+  } catch(e) {
+    console.error(e);
+  }
+}
+
+// helpers //
+function getCssUrl() {
+  return cssUrl || (cssUrl = resolveCssUrl());
+}
+
+function resolveCssUrl() {
+  // TODO: refactor with getPluginScriptUrl() in core
+  if (version === '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}/dist/css/ui.css`;
+  }
+}
+
+function getExistedLinkElement() {
+  return document.head.querySelector(`link[href="${getCssUrl()}"]`);
+}
+
+async function waitForLinkLoaded(element) {
+  if (element.sheet) {
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    let intervalId;
+    element.onload = () => {
+      intervalId && clearInterval(intervalId);
+      resolve();
+    };
+    element.onerror = () => {
+      intervalId && clearInterval(intervalId);
+      reject();
+    };
+    intervalId = setInterval(() => {
+      if (element.sheet) {
+        intervalId && clearInterval(intervalId);
+        resolve();
+      }
+    }, 100);
+  });
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.9.0-beta.8';
+export default '1.9.0';