llmasaservice-ui 0.6.8 → 0.6.10

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.
Files changed (8) hide show
  1. package/dist/index.css +71 -40
  2. package/dist/index.d.mts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +11 -5
  5. package/dist/index.mjs +11 -5
  6. package/package.json +2 -2
  7. package/src/ChatPanel.css +77 -42
  8. package/src/ChatPanel.tsx +11 -3
package/dist/index.css CHANGED
@@ -41,22 +41,20 @@
41
41
  background-color: #fff;
42
42
  }
43
43
  .side-panel .send-button {
44
- background-color: #007bff;
45
- color: #fff;
44
+ background-color: lightblue;
45
+ color: #0056b3;
46
46
  border: none;
47
47
  border-radius: 50%;
48
48
  cursor: pointer;
49
49
  height: 40px;
50
50
  width: 40px;
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
51
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
55
52
  transition: background-color 0.3s ease, transform 0.3s ease;
56
53
  }
57
54
  .side-panel .send-button:hover {
58
55
  background-color: #0056b3;
59
56
  transform: scale(1.1);
57
+ color: white;
60
58
  }
61
59
  .side-panel .history-entry {
62
60
  background-color: #f1f3f5;
@@ -72,23 +70,33 @@
72
70
  }
73
71
  .side-panel .prompt {
74
72
  align-self: flex-start;
75
- background-color: #e2e6ea;
76
73
  padding: 10px;
77
- border-radius: 10px;
78
- margin-right: 2%;
74
+ border-top-left-radius: 15px;
75
+ border-top-right-radius: 15px;
76
+ border-bottom-right-radius: 15px;
77
+ margin-right: 5%;
79
78
  margin-bottom: 10px;
80
- max-width: 96%;
79
+ max-width: 90%;
81
80
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
82
81
  white-space: pre-wrap;
82
+ background-color: #e0f7fa;
83
+ color: #000;
83
84
  }
84
85
  .side-panel .response {
85
86
  align-self: flex-end;
86
- background-color: #d1ecf1;
87
87
  padding: 10px;
88
- border-radius: 10px;
89
- margin-left: 1%;
90
- max-width: 96%;
88
+ border-top-left-radius: 15px;
89
+ border-top-right-radius: 15px;
90
+ border-bottom-left-radius: 15px;
91
+ margin-left: 5%;
92
+ max-width: 90%;
91
93
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
94
+ background:
95
+ linear-gradient(
96
+ to right,
97
+ #e0f7fa,
98
+ #ffefd5);
99
+ color: #000;
92
100
  }
93
101
  .side-panel .copy-button {
94
102
  font-size: 12px;
@@ -107,14 +115,14 @@
107
115
  height: 20px;
108
116
  }
109
117
  .side-panel .icon-svg-large {
110
- width: 24px;
111
- height: 24px;
118
+ margin-right: 4px;
119
+ margin-top: 5px;
112
120
  }
113
121
  .side-panel .copy-button:hover,
114
122
  .side-panel .thumbs-button:hover {
115
- color: #0056b3;
123
+ color: white;
116
124
  border-radius: 50%;
117
- background-color: #e2e6ea;
125
+ background-color: #0056b3;
118
126
  }
119
127
  .side-panel .thumbs-button {
120
128
  font-size: 12px;
@@ -173,22 +181,27 @@
173
181
  }
174
182
  .side-panel .save-button {
175
183
  flex: 1;
176
- background-color: #d1ecf1;
177
- color: black;
184
+ background-color: lightblue;
185
+ color: #0056b3;
178
186
  border: none;
179
- border-radius: 8px;
187
+ border-radius: 2px;
180
188
  cursor: pointer;
181
189
  padding: 5px 10px;
182
190
  font-size: 0.8em;
183
191
  margin-top: 5px;
192
+ transition: background-color 0.3s ease, transform 0.3s ease;
193
+ }
194
+ .side-panel .save-button:hover {
195
+ background-color: #0056b3;
196
+ color: white;
184
197
  }
185
198
  .suggestions-container {
186
199
  display: flex;
187
200
  flex-wrap: wrap;
188
201
  }
189
- .suggestion-button {
190
- background-color: #007bff;
191
- color: white;
202
+ .side-panel .suggestion-button {
203
+ background-color: lightblue;
204
+ color: #0056b3;
192
205
  border: none;
193
206
  border-radius: 5px;
194
207
  padding: 5px 10px;
@@ -198,6 +211,7 @@
198
211
  }
199
212
  .suggestion-button:hover {
200
213
  background-color: #0056b3;
214
+ color: white;
201
215
  }
202
216
  .suggestion-button:disabled {
203
217
  background-color: #cccccc;
@@ -267,7 +281,6 @@
267
281
  border-radius: 10px;
268
282
  }
269
283
  .side-panel-dark .responseArea {
270
- position: relative;
271
284
  flex: 1;
272
285
  background-color: #424242;
273
286
  border-radius: 10px;
@@ -278,20 +291,24 @@
278
291
  align-self: flex-start;
279
292
  background-color: #303030;
280
293
  padding: 10px;
281
- border-radius: 10px;
282
- margin-right: 2%;
294
+ border-top-left-radius: 15px;
295
+ border-top-right-radius: 15px;
296
+ border-bottom-right-radius: 15px;
297
+ margin-right: 5%;
283
298
  margin-bottom: 10px;
284
- max-width: 96%;
299
+ max-width: 90%;
285
300
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
286
301
  white-space: pre-wrap;
287
302
  }
288
303
  .side-panel-dark .response {
289
304
  align-self: flex-end;
290
- background-color: #3a3737;
291
305
  padding: 10px;
292
- border-radius: 10px;
293
- margin-left: 1%;
294
- max-width: 96%;
306
+ border-top-left-radius: 15px;
307
+ border-top-right-radius: 15px;
308
+ border-bottom-left-radius: 15px;
309
+ margin-left: 5%;
310
+ max-width: 90%;
311
+ background-color: #3a3737;
295
312
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
296
313
  }
297
314
  .side-panel-dark .copy-button {
@@ -311,10 +328,11 @@
311
328
  height: 20px;
312
329
  }
313
330
  .side-panel-dark .icon-svg-large {
314
- width: 24px;
315
- height: 24px;
331
+ margin-right: 4px;
332
+ margin-top: 5px;
316
333
  }
317
- .side-panel-dark .copy-button:hover {
334
+ .side-panel-dark .copy-button:hover,
335
+ .side-panel-dark .thumbs-button:hover {
318
336
  color: #0056b3;
319
337
  border-radius: 50%;
320
338
  background-color: #e2e6ea;
@@ -331,11 +349,6 @@
331
349
  justify-content: center;
332
350
  align-items: center;
333
351
  }
334
- .side-panel-dark .thumbs-button:hover {
335
- color: #0056b3;
336
- border-radius: 50%;
337
- background-color: #e2e6ea;
338
- }
339
352
  .side-panel-dark .button-container {
340
353
  display: flex;
341
354
  margin-top: 10px;
@@ -390,12 +403,30 @@
390
403
  background-color: #3a3737;
391
404
  color: white;
392
405
  border: none;
393
- border-radius: 8px;
406
+ border-radius: 2px;
394
407
  cursor: pointer;
395
408
  padding: 5px 10px;
396
409
  font-size: 0.8em;
397
410
  margin-top: 5px;
398
411
  }
412
+ .side-panel-dark .save-button:hover {
413
+ background-color: #0056b3;
414
+ color: white;
415
+ }
416
+ .side-panel-dark .suggestion-button {
417
+ background-color: #0056b3;
418
+ color: white;
419
+ border: none;
420
+ border-radius: 5px;
421
+ padding: 5px 10px;
422
+ font-size: 0.8em;
423
+ cursor: pointer;
424
+ margin: 5px;
425
+ }
426
+ .side-panel-dark .suggestion-button:hover {
427
+ background-color: lightblue;
428
+ color: black;
429
+ }
399
430
  .powered-by {
400
431
  margin-top: 3px;
401
432
  display: flex;
package/dist/index.d.mts CHANGED
@@ -55,6 +55,8 @@ interface ChatPanelProps {
55
55
  callToActionEmailAddress?: string;
56
56
  callToActionEmailSubject?: string;
57
57
  callToActionMustSendEmail?: boolean;
58
+ ragQueryLimit?: number;
59
+ ragRankLimit?: number;
58
60
  }
59
61
  interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
60
62
  inline?: boolean;
package/dist/index.d.ts CHANGED
@@ -55,6 +55,8 @@ interface ChatPanelProps {
55
55
  callToActionEmailAddress?: string;
56
56
  callToActionEmailSubject?: string;
57
57
  callToActionMustSendEmail?: boolean;
58
+ ragQueryLimit?: number;
59
+ ragRankLimit?: number;
58
60
  }
59
61
  interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
60
62
  inline?: boolean;
package/dist/index.js CHANGED
@@ -197,13 +197,17 @@ var ChatPanel = ({
197
197
  callToActionButtonText = "Submit",
198
198
  callToActionEmailAddress = "",
199
199
  callToActionEmailSubject = "Agent CTA submitted",
200
- callToActionMustSendEmail = false
200
+ callToActionMustSendEmail = false,
201
+ ragQueryLimit = 10,
202
+ ragRankLimit = 5
201
203
  }) => {
202
204
  const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
203
205
  project_id,
204
206
  customer,
205
207
  url,
206
- agent
208
+ agent,
209
+ ragQueryLimit,
210
+ ragRankLimit
207
211
  });
208
212
  const [nextPrompt, setNextPrompt] = (0, import_react3.useState)("");
209
213
  const [lastController, setLastController] = (0, import_react3.useState)(new AbortController());
@@ -839,8 +843,10 @@ var ChatPanel = ({
839
843
  onChange: (e) => setNextPrompt(e.target.value),
840
844
  onKeyDown: (e) => {
841
845
  if (e.key === "Enter") {
842
- e.preventDefault();
843
- continueChat();
846
+ if (nextPrompt !== "") {
847
+ e.preventDefault();
848
+ continueChat();
849
+ }
844
850
  }
845
851
  }
846
852
  }
@@ -849,7 +855,7 @@ var ChatPanel = ({
849
855
  {
850
856
  xmlns: "http://www.w3.org/2000/svg",
851
857
  viewBox: "0 0 24 24",
852
- strokeWidth: "2",
858
+ strokeWidth: "1",
853
859
  stroke: "currentColor",
854
860
  fill: "none",
855
861
  strokeLinecap: "round",
package/dist/index.mjs CHANGED
@@ -164,13 +164,17 @@ var ChatPanel = ({
164
164
  callToActionButtonText = "Submit",
165
165
  callToActionEmailAddress = "",
166
166
  callToActionEmailSubject = "Agent CTA submitted",
167
- callToActionMustSendEmail = false
167
+ callToActionMustSendEmail = false,
168
+ ragQueryLimit = 10,
169
+ ragRankLimit = 5
168
170
  }) => {
169
171
  const { send, response, idle, stop, lastCallId } = useLLM({
170
172
  project_id,
171
173
  customer,
172
174
  url,
173
- agent
175
+ agent,
176
+ ragQueryLimit,
177
+ ragRankLimit
174
178
  });
175
179
  const [nextPrompt, setNextPrompt] = useState3("");
176
180
  const [lastController, setLastController] = useState3(new AbortController());
@@ -806,8 +810,10 @@ var ChatPanel = ({
806
810
  onChange: (e) => setNextPrompt(e.target.value),
807
811
  onKeyDown: (e) => {
808
812
  if (e.key === "Enter") {
809
- e.preventDefault();
810
- continueChat();
813
+ if (nextPrompt !== "") {
814
+ e.preventDefault();
815
+ continueChat();
816
+ }
811
817
  }
812
818
  }
813
819
  }
@@ -816,7 +822,7 @@ var ChatPanel = ({
816
822
  {
817
823
  xmlns: "http://www.w3.org/2000/svg",
818
824
  viewBox: "0 0 24 24",
819
- strokeWidth: "2",
825
+ strokeWidth: "1",
820
826
  stroke: "currentColor",
821
827
  fill: "none",
822
828
  strokeLinecap: "round",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.6.8",
3
+ "version": "0.6.10",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -45,7 +45,7 @@
45
45
  "chat"
46
46
  ],
47
47
  "dependencies": {
48
- "llmasaservice-client": "^0.7.0",
48
+ "llmasaservice-client": "^0.8.0",
49
49
  "react-markdown": "^9.0.1",
50
50
  "react-syntax-highlighter": "^15.5.0",
51
51
  "rehype-raw": "^7.0.0",
package/src/ChatPanel.css CHANGED
@@ -17,8 +17,13 @@
17
17
  margin-bottom: 10px;
18
18
  text-align: center;
19
19
  color: #007bff;
20
+
21
+ /*background-color: #333333;
22
+ background: linear-gradient(to right, blue, orange);
23
+ -webkit-background-clip: text;
24
+ -webkit-text-fill-color: transparent; */
20
25
  }
21
-
26
+
22
27
  .side-panel .input-container {
23
28
  display: flex;
24
29
  flex-direction: row;
@@ -40,16 +45,13 @@
40
45
  }
41
46
 
42
47
  .side-panel .send-button {
43
- background-color: #007bff;
44
- color: #fff;
48
+ background-color: lightblue;
49
+ color: #0056b3;
45
50
  border: none;
46
51
  border-radius: 50%;
47
52
  cursor: pointer;
48
53
  height: 40px;
49
54
  width: 40px;
50
- display: flex;
51
- justify-content: center;
52
- align-items: center;
53
55
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
54
56
  transition: background-color 0.3s ease, transform 0.3s ease;
55
57
  }
@@ -57,6 +59,7 @@
57
59
  .side-panel .send-button:hover {
58
60
  background-color: #0056b3;
59
61
  transform: scale(1.1);
62
+ color: white;
60
63
  }
61
64
 
62
65
  .side-panel .history-entry {
@@ -75,24 +78,30 @@
75
78
 
76
79
  .side-panel .prompt {
77
80
  align-self: flex-start;
78
- background-color: #e2e6ea;
79
81
  padding: 10px;
80
- border-radius: 10px;
81
- margin-right: 2%;
82
+ border-top-left-radius: 15px;
83
+ border-top-right-radius: 15px;
84
+ border-bottom-right-radius: 15px;
85
+ margin-right: 5%;
82
86
  margin-bottom: 10px;
83
- max-width: 96%;
87
+ max-width: 90%;
84
88
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
85
89
  white-space: pre-wrap;
90
+ background-color: #e0f7fa;
91
+ color: #000;
86
92
  }
87
93
 
88
94
  .side-panel .response {
89
95
  align-self: flex-end;
90
- background-color: #d1ecf1;
91
96
  padding: 10px;
92
- border-radius: 10px;
93
- margin-left: 1%;
94
- max-width: 96%;
97
+ border-top-left-radius: 15px;
98
+ border-top-right-radius: 15px;
99
+ border-bottom-left-radius: 15px;
100
+ margin-left: 5%;
101
+ max-width: 90%;
95
102
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
103
+ background: linear-gradient(to right, #e0f7fa, #ffefd5);
104
+ color: #000;
96
105
  }
97
106
 
98
107
  .side-panel .copy-button {
@@ -114,15 +123,15 @@
114
123
  }
115
124
 
116
125
  .side-panel .icon-svg-large {
117
- width: 24px;
118
- height: 24px;
126
+ margin-right: 4px;
127
+ margin-top: 5px;
119
128
  }
120
129
 
121
130
  .side-panel .copy-button:hover,
122
131
  .side-panel .thumbs-button:hover {
123
- color: #0056b3;
132
+ color: white;
124
133
  border-radius: 50%;
125
- background-color: #e2e6ea;
134
+ background-color: #0056b3;
126
135
  }
127
136
 
128
137
  .side-panel .thumbs-button {
@@ -190,14 +199,20 @@
190
199
 
191
200
  .side-panel .save-button {
192
201
  flex: 1;
193
- background-color: #d1ecf1;
194
- color: black;
202
+ background-color: lightblue;
203
+ color: #0056b3;
195
204
  border: none;
196
- border-radius: 8px;
205
+ border-radius: 2px;
197
206
  cursor: pointer;
198
207
  padding: 5px 10px;
199
208
  font-size: 0.8em;
200
209
  margin-top: 5px;
210
+ transition: background-color 0.3s ease, transform 0.3s ease;
211
+ }
212
+
213
+ .side-panel .save-button:hover {
214
+ background-color: #0056b3;
215
+ color: white;
201
216
  }
202
217
 
203
218
  .suggestions-container {
@@ -205,9 +220,9 @@
205
220
  flex-wrap: wrap;
206
221
  }
207
222
 
208
- .suggestion-button {
209
- background-color: #007bff;
210
- color: white;
223
+ .side-panel .suggestion-button {
224
+ background-color: lightblue;
225
+ color: #0056b3;
211
226
  border: none;
212
227
  border-radius: 5px;
213
228
  padding: 5px 10px;
@@ -218,6 +233,7 @@
218
233
 
219
234
  .suggestion-button:hover {
220
235
  background-color: #0056b3;
236
+ color: white;
221
237
  }
222
238
 
223
239
  .suggestion-button:disabled {
@@ -285,7 +301,6 @@
285
301
  border-radius: 10px;
286
302
  }
287
303
  .side-panel-dark .responseArea {
288
- position: relative;
289
304
  flex: 1;
290
305
  background-color: #424242;
291
306
  border-radius: 10px;
@@ -296,20 +311,24 @@
296
311
  align-self: flex-start;
297
312
  background-color: #303030;
298
313
  padding: 10px;
299
- border-radius: 10px;
300
- margin-right: 2%;
314
+ border-top-left-radius: 15px;
315
+ border-top-right-radius: 15px;
316
+ border-bottom-right-radius: 15px;
317
+ margin-right: 5%;
301
318
  margin-bottom: 10px;
302
- max-width: 96%;
319
+ max-width: 90%;
303
320
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
304
321
  white-space: pre-wrap;
305
322
  }
306
323
  .side-panel-dark .response {
307
324
  align-self: flex-end;
308
- background-color: #3a3737;
309
325
  padding: 10px;
310
- border-radius: 10px;
311
- margin-left: 1%;
312
- max-width: 96%;
326
+ border-top-left-radius: 15px;
327
+ border-top-right-radius: 15px;
328
+ border-bottom-left-radius: 15px;
329
+ margin-left: 5%;
330
+ max-width: 90%;
331
+ background-color: #3a3737;
313
332
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
314
333
  }
315
334
  .side-panel-dark .copy-button {
@@ -329,10 +348,11 @@
329
348
  height: 20px;
330
349
  }
331
350
  .side-panel-dark .icon-svg-large {
332
- width: 24px;
333
- height: 24px;
351
+ margin-right: 4px;
352
+ margin-top: 5px;
334
353
  }
335
- .side-panel-dark .copy-button:hover {
354
+ .side-panel-dark .copy-button:hover,
355
+ .side-panel-dark .thumbs-button:hover {
336
356
  color: #0056b3;
337
357
  border-radius: 50%;
338
358
  background-color: #e2e6ea;
@@ -349,11 +369,6 @@
349
369
  justify-content: center;
350
370
  align-items: center;
351
371
  }
352
- .side-panel-dark .thumbs-button:hover {
353
- color: #0056b3;
354
- border-radius: 50%;
355
- background-color: #e2e6ea;
356
- }
357
372
 
358
373
  .side-panel-dark .button-container {
359
374
  display: flex;
@@ -367,7 +382,6 @@
367
382
  gap: 5px;
368
383
  }
369
384
 
370
-
371
385
  .side-panel-dark .scroll-button {
372
386
  position: absolute;
373
387
  left: 50%;
@@ -419,13 +433,34 @@
419
433
  background-color: #3a3737;
420
434
  color: white;
421
435
  border: none;
422
- border-radius: 8px;
436
+ border-radius: 2px;
423
437
  cursor: pointer;
424
438
  padding: 5px 10px;
425
439
  font-size: 0.8em;
426
440
  margin-top: 5px;
427
441
  }
428
442
 
443
+ .side-panel-dark .save-button:hover {
444
+ background-color: #0056b3;
445
+ color: white;
446
+ }
447
+
448
+ .side-panel-dark .suggestion-button {
449
+ background-color: #0056b3;
450
+ color: white;
451
+ border: none;
452
+ border-radius: 5px;
453
+ padding: 5px 10px;
454
+ font-size: 0.8em;
455
+ cursor: pointer;
456
+ margin: 5px;
457
+ }
458
+
459
+ .side-panel-dark .suggestion-button:hover {
460
+ background-color: lightblue;
461
+ color: black;
462
+ }
463
+
429
464
  .powered-by {
430
465
  margin-top: 3px;
431
466
  display: flex;
package/src/ChatPanel.tsx CHANGED
@@ -57,6 +57,8 @@ export interface ChatPanelProps {
57
57
  callToActionEmailAddress?: string;
58
58
  callToActionEmailSubject?: string;
59
59
  callToActionMustSendEmail?: boolean;
60
+ ragQueryLimit?: number;
61
+ ragRankLimit?: number;
60
62
  }
61
63
 
62
64
  interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
@@ -99,12 +101,16 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
99
101
  callToActionEmailAddress = "",
100
102
  callToActionEmailSubject = "Agent CTA submitted",
101
103
  callToActionMustSendEmail = false,
104
+ ragQueryLimit = 10,
105
+ ragRankLimit = 5,
102
106
  }) => {
103
107
  const { send, response, idle, stop, lastCallId } = useLLM({
104
108
  project_id: project_id,
105
109
  customer: customer,
106
110
  url: url,
107
111
  agent: agent,
112
+ ragQueryLimit: ragQueryLimit,
113
+ ragRankLimit: ragRankLimit
108
114
  });
109
115
 
110
116
  const [nextPrompt, setNextPrompt] = useState("");
@@ -877,8 +883,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
877
883
  onChange={(e) => setNextPrompt(e.target.value)}
878
884
  onKeyDown={(e) => {
879
885
  if (e.key === "Enter") {
880
- e.preventDefault();
881
- continueChat();
886
+ if (nextPrompt !== "") {
887
+ e.preventDefault();
888
+ continueChat();
889
+ }
882
890
  }
883
891
  }}
884
892
  ></textarea>
@@ -887,7 +895,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
887
895
  <svg
888
896
  xmlns="http://www.w3.org/2000/svg"
889
897
  viewBox="0 0 24 24"
890
- strokeWidth="2"
898
+ strokeWidth="1"
891
899
  stroke="currentColor"
892
900
  fill="none"
893
901
  strokeLinecap="round"