@websolutespa/bom-llm NPM

@websolutespa/bom-llm

LLM module of the BOM Repository by websolute.

Bom LLM Plugin

This plugin automatically adds UI components to manage LLM Chatbot by websolute.

Requirements:

You need a personal appKey and apiKey to use this plugin, for more info contact websolute

Usage

You can load the script directly via jsDelivr or installing via npm.

Using jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.css">
<script>
  document.addEventListener('DOMContentLoaded', () => {
    if ('bomLlm' in window) {
      const searchParams = new URLSearchParams(window.location.search);
      const options = {
        appKey: 'MY_APP_KEY',
        apiKey: 'MY_API_KEY',
        threadId: searchParams.get('llmThreadId'),
      };
      bomLlm(options);
    }
  });
</script>

Using npm

Install library using npm.

npm i @websolutespa/bom-llm --save

Import css from node_modules.

<link rel="stylesheet" href="node_modules/@websolutespa/bom-llm/dist/umd/index.css">

Import and consume plugin.

import { bomLlm } from '@websolutespa/bom-llm';

document.addEventListener('DOMContentLoaded', () => {
  if ('bomLlm' in window) {
    const searchParams = new URLSearchParams(window.location.search);
    const options = {
      appKey: 'MY_APP_KEY',
      apiKey: 'MY_API_KEY',
      threadId: searchParams.get('llmThreadId'),
    };
    // returned instance
    const llm = bomLlm(options);
  }
});

Using imperatively.

const options = {
  appKey: 'MY_APP_KEY',
  apiKey: 'MY_API_KEY',
  imperative: true, // hide trigger button
};
const llm = bomLlm(options);
// using open command imperatively
setTimeout(() => {
  llm.open();
}, 4000);

Using embed tag.

<llm-embed />

Running test

Add parameter test = true.

  const searchParams = new URLSearchParams(window.location.search);
  const options = {
    appKey: 'MY_APP_KEY',
    apiKey: 'MY_API_KEY',
    threadId: searchParams.get('llmThreadId'),
    test: true,
  };
  bomLlm(options);

Decorate external url

You can decorate every json item from the knowledgeBase customizing its external url.
decorateUrl method can be a promise.

  const searchParams = new URLSearchParams(window.location.search);
  const options = {
    appKey: 'MY_APP_KEY',
    apiKey: 'MY_API_KEY',
    threadId: searchParams.get('llmThreadId'),
    decorateUrl: (item) => {
      switch (item.type) {
        case 'event':
        case 'eventItem':
          return `https://acme.com/event?id=${item.id}`;
        default:
          return;
      }
    },
  };
  bomLlm(options);

Handling external actions

You can handle the click event of the generated cta action with the onAction handler.

  const searchParams = new URLSearchParams(window.location.search);
  const options = {
    appKey: 'MY_APP_KEY',
    apiKey: 'MY_API_KEY',
    threadId: searchParams.get('llmThreadId'),
    onAction: (item) => {
      console.log('onAction', item.id, item.title);
    },
  };
  bomLlm(options);