@websolutespa/bom-llm 0.2.5 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +153 -153
- package/dist/esm/index.js +646 -564
- package/dist/esm/index.js.map +1 -1
- package/dist/index.css +69 -0
- package/dist/index.css.map +1 -1
- package/dist/umd/index.css +69 -0
- package/dist/umd/index.css.map +1 -1
- package/dist/umd/index.js +646 -564
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,153 +1,153 @@
|
|
|
1
|
-
# @websolutespa/bom-llm
|
|
2
|
-
|
|
3
|
-
[](https://badge.fury.io/js/%40websolutespa%2Fbom-llm)
|
|
4
|
-
|
|
5
|
-
[](https://shields.io/)
|
|
6
|
-
|
|
7
|
-
LLM module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).
|
|
8
|
-
|
|
9
|
-
# Bom LLM Plugin
|
|
10
|
-
|
|
11
|
-
This plugin automatically adds UI components to manage LLM Chatbot by [websolute](https://www.websolute.com/).
|
|
12
|
-
|
|
13
|
-
### Requirements:
|
|
14
|
-
|
|
15
|
-
- You need a personal appKey and apiKey to use this plugin, for more info contact [websolute](https://www.websolute.com/contatti)
|
|
16
|
-
|
|
17
|
-
## Usage
|
|
18
|
-
|
|
19
|
-
You can load the script directly via jsDelivr or installing via npm.
|
|
20
|
-
|
|
21
|
-
### Using jsDelivr
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.js"></script>
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.css">
|
|
26
|
-
<script>
|
|
27
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
28
|
-
if ('bomLlm' in window) {
|
|
29
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
30
|
-
const options = {
|
|
31
|
-
appKey: 'MY_APP_KEY',
|
|
32
|
-
apiKey: 'MY_API_KEY',
|
|
33
|
-
threadId: searchParams.get('llmThreadId'),
|
|
34
|
-
};
|
|
35
|
-
bomLlm(options);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
</script>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Using npm
|
|
42
|
-
|
|
43
|
-
Install library using npm.
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
npm i @websolutespa/bom-llm --save
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
Import css from node_modules.
|
|
50
|
-
|
|
51
|
-
```html
|
|
52
|
-
<link rel="stylesheet" href="node_modules/@websolutespa/bom-llm/dist/umd/index.css">
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
Import and consume plugin.
|
|
56
|
-
|
|
57
|
-
```js
|
|
58
|
-
import { bomLlm } from '@websolutespa/bom-llm';
|
|
59
|
-
|
|
60
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
61
|
-
if ('bomLlm' in window) {
|
|
62
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
63
|
-
const options = {
|
|
64
|
-
appKey: 'MY_APP_KEY',
|
|
65
|
-
apiKey: 'MY_API_KEY',
|
|
66
|
-
threadId: searchParams.get('llmThreadId'),
|
|
67
|
-
};
|
|
68
|
-
// returned instance
|
|
69
|
-
const llm = bomLlm(options);
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
Using imperatively.
|
|
75
|
-
|
|
76
|
-
```js
|
|
77
|
-
const options = {
|
|
78
|
-
appKey: 'MY_APP_KEY',
|
|
79
|
-
apiKey: 'MY_API_KEY',
|
|
80
|
-
imperative: true, // hide trigger button
|
|
81
|
-
};
|
|
82
|
-
const llm = bomLlm(options);
|
|
83
|
-
// using open command imperatively
|
|
84
|
-
setTimeout(() => {
|
|
85
|
-
llm.open();
|
|
86
|
-
}, 4000);
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
Using embed tag.
|
|
90
|
-
|
|
91
|
-
```html
|
|
92
|
-
<llm-embed />
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
### Running test
|
|
96
|
-
|
|
97
|
-
Add parameter test = true.
|
|
98
|
-
|
|
99
|
-
```js
|
|
100
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
101
|
-
const options = {
|
|
102
|
-
appKey: 'MY_APP_KEY',
|
|
103
|
-
apiKey: 'MY_API_KEY',
|
|
104
|
-
threadId: searchParams.get('llmThreadId'),
|
|
105
|
-
test: true,
|
|
106
|
-
};
|
|
107
|
-
bomLlm(options);
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### Decorate external url
|
|
111
|
-
|
|
112
|
-
You can decorate every json item from the knowledgeBase customizing its external url.
|
|
113
|
-
decorateUrl method can be a promise.
|
|
114
|
-
|
|
115
|
-
```js
|
|
116
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
117
|
-
const options = {
|
|
118
|
-
appKey: 'MY_APP_KEY',
|
|
119
|
-
apiKey: 'MY_API_KEY',
|
|
120
|
-
threadId: searchParams.get('llmThreadId'),
|
|
121
|
-
decorateUrl: (item) => {
|
|
122
|
-
switch (item.type) {
|
|
123
|
-
case 'event':
|
|
124
|
-
case 'eventItem':
|
|
125
|
-
return `https://acme.com/event?id=${item.id}`;
|
|
126
|
-
default:
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
};
|
|
131
|
-
bomLlm(options);
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### Handling external actions
|
|
135
|
-
|
|
136
|
-
You can handle the click event of the generated cta action with the onAction handler.
|
|
137
|
-
|
|
138
|
-
```js
|
|
139
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
140
|
-
const options = {
|
|
141
|
-
appKey: 'MY_APP_KEY',
|
|
142
|
-
apiKey: 'MY_API_KEY',
|
|
143
|
-
threadId: searchParams.get('llmThreadId'),
|
|
144
|
-
onAction: (item) => {
|
|
145
|
-
console.log('onAction', item.id, item.title);
|
|
146
|
-
},
|
|
147
|
-
};
|
|
148
|
-
bomLlm(options);
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
---
|
|
152
|
-
|
|
153
|
-
##### *this library is for internal usage and not production ready*
|
|
1
|
+
# @websolutespa/bom-llm
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/%40websolutespa%2Fbom-llm)
|
|
4
|
+
|
|
5
|
+
[](https://shields.io/)
|
|
6
|
+
|
|
7
|
+
LLM module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).
|
|
8
|
+
|
|
9
|
+
# Bom LLM Plugin
|
|
10
|
+
|
|
11
|
+
This plugin automatically adds UI components to manage LLM Chatbot by [websolute](https://www.websolute.com/).
|
|
12
|
+
|
|
13
|
+
### Requirements:
|
|
14
|
+
|
|
15
|
+
- You need a personal appKey and apiKey to use this plugin, for more info contact [websolute](https://www.websolute.com/contatti)
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
You can load the script directly via jsDelivr or installing via npm.
|
|
20
|
+
|
|
21
|
+
### Using jsDelivr
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.js"></script>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@websolutespa/bom-llm/dist/umd/index.css">
|
|
26
|
+
<script>
|
|
27
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
28
|
+
if ('bomLlm' in window) {
|
|
29
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
30
|
+
const options = {
|
|
31
|
+
appKey: 'MY_APP_KEY',
|
|
32
|
+
apiKey: 'MY_API_KEY',
|
|
33
|
+
threadId: searchParams.get('llmThreadId'),
|
|
34
|
+
};
|
|
35
|
+
bomLlm(options);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Using npm
|
|
42
|
+
|
|
43
|
+
Install library using npm.
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm i @websolutespa/bom-llm --save
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Import css from node_modules.
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<link rel="stylesheet" href="node_modules/@websolutespa/bom-llm/dist/umd/index.css">
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Import and consume plugin.
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import { bomLlm } from '@websolutespa/bom-llm';
|
|
59
|
+
|
|
60
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
61
|
+
if ('bomLlm' in window) {
|
|
62
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
63
|
+
const options = {
|
|
64
|
+
appKey: 'MY_APP_KEY',
|
|
65
|
+
apiKey: 'MY_API_KEY',
|
|
66
|
+
threadId: searchParams.get('llmThreadId'),
|
|
67
|
+
};
|
|
68
|
+
// returned instance
|
|
69
|
+
const llm = bomLlm(options);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Using imperatively.
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
const options = {
|
|
78
|
+
appKey: 'MY_APP_KEY',
|
|
79
|
+
apiKey: 'MY_API_KEY',
|
|
80
|
+
imperative: true, // hide trigger button
|
|
81
|
+
};
|
|
82
|
+
const llm = bomLlm(options);
|
|
83
|
+
// using open command imperatively
|
|
84
|
+
setTimeout(() => {
|
|
85
|
+
llm.open();
|
|
86
|
+
}, 4000);
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Using embed tag.
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<llm-embed />
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Running test
|
|
96
|
+
|
|
97
|
+
Add parameter test = true.
|
|
98
|
+
|
|
99
|
+
```js
|
|
100
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
101
|
+
const options = {
|
|
102
|
+
appKey: 'MY_APP_KEY',
|
|
103
|
+
apiKey: 'MY_API_KEY',
|
|
104
|
+
threadId: searchParams.get('llmThreadId'),
|
|
105
|
+
test: true,
|
|
106
|
+
};
|
|
107
|
+
bomLlm(options);
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Decorate external url
|
|
111
|
+
|
|
112
|
+
You can decorate every json item from the knowledgeBase customizing its external url.
|
|
113
|
+
decorateUrl method can be a promise.
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
117
|
+
const options = {
|
|
118
|
+
appKey: 'MY_APP_KEY',
|
|
119
|
+
apiKey: 'MY_API_KEY',
|
|
120
|
+
threadId: searchParams.get('llmThreadId'),
|
|
121
|
+
decorateUrl: (item) => {
|
|
122
|
+
switch (item.type) {
|
|
123
|
+
case 'event':
|
|
124
|
+
case 'eventItem':
|
|
125
|
+
return `https://acme.com/event?id=${item.id}`;
|
|
126
|
+
default:
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
};
|
|
131
|
+
bomLlm(options);
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Handling external actions
|
|
135
|
+
|
|
136
|
+
You can handle the click event of the generated cta action with the onAction handler.
|
|
137
|
+
|
|
138
|
+
```js
|
|
139
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
140
|
+
const options = {
|
|
141
|
+
appKey: 'MY_APP_KEY',
|
|
142
|
+
apiKey: 'MY_API_KEY',
|
|
143
|
+
threadId: searchParams.get('llmThreadId'),
|
|
144
|
+
onAction: (item) => {
|
|
145
|
+
console.log('onAction', item.id, item.title);
|
|
146
|
+
},
|
|
147
|
+
};
|
|
148
|
+
bomLlm(options);
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
##### *this library is for internal usage and not production ready*
|