# @websolutespa/bom-llm

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

[![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
<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.

```bash
npm i @websolutespa/bom-llm --save
```

Import css from node_modules.

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

Import and consume plugin.

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

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

```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,
  };
  bomLlm(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;
      }
    },
  };
  bomLlm(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);
    },
  };
  bomLlm(options);
```

---

##### *this library is for internal usage and not production ready*