@websolutespa/llm-visit-pesaro

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/llm-visit-pesaro@latest/dist/index.css">
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@websolutespa/llm-visit-pesaro@latest/dist/umd/index.min.js"></script>
  <script type="module">

    document.addEventListener('DOMContentLoaded', () => {
      if ('llmDefault' in window) {
        const searchParams = new URLSearchParams(window.location.search);
        const options = {
          endpoint: 'https://platform-ai-dev.ws-deploy-01.wslabs.it',
          appKey: 'MY_APP_KEY',
          apiKey: 'MY_API_KEY',
          threadId: searchParams.get('llmThreadId'),
          test: searchParams.get('mock') === 'true' ? llm.mock : undefined,
          idleTime: 1000 * 60,
        };
        llmDefault(options);
      }
    });

  </script>

Using npm

Install library using npm.

npm i @websolutespa/llm-visit-pesaro --save

Import css from node_modules.

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

Import and consume plugin.

import { llmDefault } from '@websolutespa/llm-visit-pesaro';

document.addEventListener('DOMContentLoaded', () => {
  if ('llmDefault' 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 = llmDefault(options);
  }
});

Using imperatively.

const options = {
  appKey: 'MY_APP_KEY',
  apiKey: 'MY_API_KEY',
  imperative: true, // hide trigger button
};
const llm = llmDefault(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,
  };
  llmDefault(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;
      }
    },
  };
  llmDefault(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);
    },
  };
  llmDefault(options);

this library is for internal usage and not production ready