# @websolutespa/llm-plugin-efg

[![npm version](https://badge.fury.io/js/%40websolutespa%2Fllm-plugin.svg)](https://badge.fury.io/js/%40websolutespa%2Fllm-plugin)

[![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](https://shields.io/)

LLM module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).

# Bom LLM Plugin

This plugin automatically adds UI components to manage LLM Chatbot by [websolute](https://www.websolute.com/).

### Requirements:

- You need a personal appKey and apiKey to use this plugin, for more info contact [websolute](https://www.websolute.com/contatti)

## Usage

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

### Using jsDelivr

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/llm-plugin-efg@latest/dist/index.css">
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@websolutespa/llm-plugin-efg@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.

```bash
npm i @websolutespa/llm-plugin-efg --save
```

Import css from node_modules.

```html
<link rel="stylesheet" href="node_modules/@websolutespa/llm-plugin-efg/dist/umd/index.css">
```

Import and consume plugin.

```js
import { llmDefault } from '@websolutespa/llm-plugin-efg';

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.

```js
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.

```html
<llm-embed />
```

### Running test

Add parameter test = true.

```js
  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.  

```js
  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.

```js
  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*