llmasaservice-ui 0.6.8 → 0.6.9

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 (6) hide show
  1. package/dist/index.css +71 -40
  2. package/dist/index.js +5 -3
  3. package/dist/index.mjs +5 -3
  4. package/package.json +1 -1
  5. package/src/ChatPanel.css +77 -42
  6. package/src/ChatPanel.tsx +5 -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.js CHANGED
@@ -839,8 +839,10 @@ var ChatPanel = ({
839
839
  onChange: (e) => setNextPrompt(e.target.value),
840
840
  onKeyDown: (e) => {
841
841
  if (e.key === "Enter") {
842
- e.preventDefault();
843
- continueChat();
842
+ if (nextPrompt !== "") {
843
+ e.preventDefault();
844
+ continueChat();
845
+ }
844
846
  }
845
847
  }
846
848
  }
@@ -849,7 +851,7 @@ var ChatPanel = ({
849
851
  {
850
852
  xmlns: "http://www.w3.org/2000/svg",
851
853
  viewBox: "0 0 24 24",
852
- strokeWidth: "2",
854
+ strokeWidth: "1",
853
855
  stroke: "currentColor",
854
856
  fill: "none",
855
857
  strokeLinecap: "round",
package/dist/index.mjs CHANGED
@@ -806,8 +806,10 @@ var ChatPanel = ({
806
806
  onChange: (e) => setNextPrompt(e.target.value),
807
807
  onKeyDown: (e) => {
808
808
  if (e.key === "Enter") {
809
- e.preventDefault();
810
- continueChat();
809
+ if (nextPrompt !== "") {
810
+ e.preventDefault();
811
+ continueChat();
812
+ }
811
813
  }
812
814
  }
813
815
  }
@@ -816,7 +818,7 @@ var ChatPanel = ({
816
818
  {
817
819
  xmlns: "http://www.w3.org/2000/svg",
818
820
  viewBox: "0 0 24 24",
819
- strokeWidth: "2",
821
+ strokeWidth: "1",
820
822
  stroke: "currentColor",
821
823
  fill: "none",
822
824
  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.9",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
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
@@ -877,8 +877,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
877
877
  onChange={(e) => setNextPrompt(e.target.value)}
878
878
  onKeyDown={(e) => {
879
879
  if (e.key === "Enter") {
880
- e.preventDefault();
881
- continueChat();
880
+ if (nextPrompt !== "") {
881
+ e.preventDefault();
882
+ continueChat();
883
+ }
882
884
  }
883
885
  }}
884
886
  ></textarea>
@@ -887,7 +889,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
887
889
  <svg
888
890
  xmlns="http://www.w3.org/2000/svg"
889
891
  viewBox="0 0 24 24"
890
- strokeWidth="2"
892
+ strokeWidth="1"
891
893
  stroke="currentColor"
892
894
  fill="none"
893
895
  strokeLinecap="round"