LLM module of the BOM Repository by websolute.
This plugin automatically adds UI components to manage LLM Chatbot by websolute.
- You need a personal appKey and apiKey to use this plugin, for more info contact websolute
You can load the script directly via jsDelivr or installing via npm.
<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>Install library using npm.
npm i @websolutespa/bom-llm --saveImport 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 llm = bomLlm(options);
// using open command imperatively
setTimeout(() => {
llm.open();
}, 4000);Using embed tag.
<llm-embed />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);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);Currently available types are:
- event
- eventItem
- poi
- poiItem
- tripadvisor
- tripadvisorItem