@liip/liipgpt 0.0.25 → 1.0.0-beta.2
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/README.md +40 -19
- package/chat/index.html +3 -3
- package/chat/liipgpt-chat.iife.js +429 -588
- package/lib/chat-message-types.d.ts +41 -30
- package/lib/liipgpt-client.d.ts +9 -14
- package/lib/liipgpt-client.js +2213 -2138
- package/lib/liipgpt-client.umd.cjs +38 -43
- package/lib/markdown.d.ts +2 -2
- package/lib/message-store.d.ts +15 -0
- package/lib/sse-v2-types.d.ts +57 -0
- package/lib/types.d.ts +82 -82
- package/lib/utils.d.ts +0 -4
- package/package.json +1 -1
- package/lib/smooth-scroll.d.ts +0 -17
- package/lib/sse-types.d.ts +0 -21
- package/lib/tooltip.d.ts +0 -12
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ This package provides two main features:
|
|
|
27
27
|
<head>
|
|
28
28
|
<script
|
|
29
29
|
async
|
|
30
|
-
src="https://cdn.jsdelivr.net/npm/@liip/liipgpt@0.0.
|
|
30
|
+
src="https://cdn.jsdelivr.net/npm/@liip/liipgpt@1.0.0-beta.2/chat/liipgpt-chat.iife.js"
|
|
31
31
|
></script>
|
|
32
32
|
</head>
|
|
33
33
|
<body>
|
|
@@ -60,6 +60,32 @@ The component supports multiple languages with the following priority:
|
|
|
60
60
|
|
|
61
61
|
Supported UI languages: 'en', 'de', 'fr', 'it'
|
|
62
62
|
|
|
63
|
+
## Loader settings
|
|
64
|
+
|
|
65
|
+
A simple loader is provided by default, you can override colors to fit your brand by using the `loaderBackground` and `loaderColor` attributes:
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<liipgpt-chat ... loaderBackground="green" loaderColor="white"></liipgpt-chat>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Remarks:
|
|
72
|
+
|
|
73
|
+
- it's recommended to set the same background color (as `loaderBackground`) on the parent container, to avoid a potential flickering.
|
|
74
|
+
- you can pass CSS gradients on the `loaderBackground` attribute.
|
|
75
|
+
|
|
76
|
+
### Custom loader
|
|
77
|
+
|
|
78
|
+
You can also provide your own loader by using the `slot="loader"` attribute on a `div`, within the `liipgpt-chat` element:
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<liipgpt-chat org="..." api-url="..." api-key="...">
|
|
82
|
+
<div slot="loader" style="...">
|
|
83
|
+
<svg>your animated svg here</svg>
|
|
84
|
+
<div>or a simple message</div>
|
|
85
|
+
</div>
|
|
86
|
+
</liipgpt-chat>
|
|
87
|
+
```
|
|
88
|
+
|
|
63
89
|
# Library Usage
|
|
64
90
|
|
|
65
91
|
For custom AI integrations, you can use the LiipGPT client:
|
|
@@ -89,28 +115,23 @@ response.subscribe((message) => {
|
|
|
89
115
|
});
|
|
90
116
|
```
|
|
91
117
|
|
|
92
|
-
|
|
118
|
+
## Node.js
|
|
93
119
|
|
|
94
|
-
|
|
120
|
+
When using the LiipGPT client in Node.js environments, you'll need to provide an `EventSource` implementation since it's not available natively. You can use the `eventsource` package:
|
|
95
121
|
|
|
96
|
-
```
|
|
97
|
-
|
|
122
|
+
```bash
|
|
123
|
+
npm install eventsource
|
|
98
124
|
```
|
|
99
125
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
- it's recommended to set the same background color (as `loaderBackground`) on the parent container, to avoid a potential flickering.
|
|
103
|
-
- you can pass CSS gradients on the `loaderBackground` attribute.
|
|
104
|
-
|
|
105
|
-
## Custom loader
|
|
126
|
+
Here's how to use the client in Node.js:
|
|
106
127
|
|
|
107
|
-
|
|
128
|
+
```typescript
|
|
129
|
+
import { LiipGPTClient } from '@liip/liipgpt';
|
|
130
|
+
import { EventSource } from 'eventsource';
|
|
108
131
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</div>
|
|
115
|
-
</liipgpt-chat>
|
|
132
|
+
const client = new LiipGPTClient({
|
|
133
|
+
apiKey: 'YOUR_API_KEY',
|
|
134
|
+
apiUrl: 'YOUR_API_URL',
|
|
135
|
+
EventSource, // Provide the EventSource implementation
|
|
136
|
+
});
|
|
116
137
|
```
|
package/chat/index.html
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
<script src="./liipgpt-chat.iife.js"></script>
|
|
25
25
|
<script>
|
|
26
|
-
const orgs = ["alva","default","luzern","liipgpt"];
|
|
26
|
+
const orgs = ["alva","default","iser","luzern","polybot","stapowinterthur","liipgpt"];
|
|
27
27
|
|
|
28
28
|
const sidebarTop = document.getElementById('sidebar__top');
|
|
29
29
|
const sidebarCenter = document.getElementById('sidebar__center');
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
chat = document.createElement('liipgpt-chat');
|
|
99
99
|
chat.id = 'chat';
|
|
100
100
|
chat.setAttribute('org', org);
|
|
101
|
-
chat.setAttribute('
|
|
102
|
-
chat.setAttribute('
|
|
101
|
+
chat.setAttribute('api-url', 'https://liipgpt.api.dev.genai.liip.ch/liipgpt');
|
|
102
|
+
chat.setAttribute('api-key', 'X9hL4Gp5W2D7eRtF');
|
|
103
103
|
chat.setAttribute('lang', forceLang);
|
|
104
104
|
if (org === 'liipgpt') {
|
|
105
105
|
chat.setAttribute('loaderBackground', 'linear-gradient(0deg, #1B181E 0%, #2A2440 90%)');
|