funda-ui 4.5.713 → 4.5.767

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.
@@ -0,0 +1,401 @@
1
+ /*=================== Chatbox (Loading) =================*/
2
+ .custom-chatbox-loader-container {
3
+ width: 130px;
4
+ text-align: start;
5
+ }
6
+ .custom-chatbox-loader-container .custom-chatbox-loader {
7
+ height: 4px;
8
+ width: 100%;
9
+ --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
10
+ background: var(--c), var(--c), #b9caf7;
11
+ background-size: 60% 100%;
12
+ animation: cssAnim--loadermove 3s infinite;
13
+ }
14
+
15
+ .dark-mode .custom-chatbox-loader-container .custom-chatbox-loader,
16
+ [data-bs-theme=dark] .custom-chatbox-loader-container .custom-chatbox-loader {
17
+ --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
18
+ background: var(--c), var(--c), #8692b5;
19
+ }
20
+
21
+ @keyframes cssAnim--loadermove {
22
+ 0% {
23
+ background-position: -150% 0, -150% 0;
24
+ }
25
+ 66% {
26
+ background-position: 250% 0, -150% 0;
27
+ }
28
+ 100% {
29
+ background-position: 250% 0, 250% 0;
30
+ }
31
+ }
32
+ /*=================== Chatbox (Core) =================*/
33
+ .custom-chatbox-circle {
34
+ --custom-chatbox-circle-color: #5A5EB9;
35
+ --custom-chatbox-circle-text: #fff;
36
+ position: fixed;
37
+ bottom: 30px;
38
+ right: 30px;
39
+ background: var(--custom-chatbox-circle-color);
40
+ width: 50px;
41
+ height: 50px;
42
+ border-radius: 50%;
43
+ color: var(--custom-chatbox-circle-text);
44
+ cursor: pointer;
45
+ box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
46
+ z-index: 1030;
47
+ text-align: center;
48
+ vertical-align: middle;
49
+ transition: 0.1s ease-in-out;
50
+ }
51
+ .custom-chatbox-circle > span {
52
+ display: inline-block;
53
+ margin-top: 25%;
54
+ }
55
+ .custom-chatbox-circle:hover {
56
+ transform: scale(1.2);
57
+ }
58
+ .custom-chatbox-circle svg {
59
+ width: 30px;
60
+ height: 30px;
61
+ }
62
+ .custom-chatbox-circle svg path {
63
+ stroke: #fff;
64
+ }
65
+
66
+ .custom-chatbox-close {
67
+ --custom-chatbox-close-color: #333;
68
+ padding: 20px;
69
+ position: fixed;
70
+ bottom: calc(100vh - 55px);
71
+ z-index: 1032;
72
+ right: -15px;
73
+ cursor: pointer;
74
+ border: none;
75
+ outline: none;
76
+ background: none;
77
+ transition-delay: 0.05s; /* Prevent real-time update of store displacement */
78
+ }
79
+ .custom-chatbox-close path {
80
+ fill: var(--custom-chatbox-close-color);
81
+ }
82
+ .custom-chatbox-close:hover {
83
+ transform: scale(1.2);
84
+ }
85
+ .custom-chatbox-close:hover path {
86
+ fill: #f00;
87
+ }
88
+
89
+ .custom-chatbox-container {
90
+ --custom-chatbox-w: 600px;
91
+ --custom-chatbox-h: 100vh;
92
+ --custom-chatbox-bg: #fff;
93
+ --custom-chatbox-input-bg: #fff;
94
+ --custom-chatbox-default-txt-color: #333;
95
+ --custom-chatbox-default-btn-color: #fff;
96
+ --custom-chatbox-msg-bg: #eaeaea;
97
+ --custom-chatbox-msg-bg2: #d1e6f8;
98
+ --custom-chatbox-msg-border: #ddd;
99
+ --custom-chatbox-primary-color: #5A5EB9;
100
+ --custom-chatbox-gray-color: #adadad;
101
+ --custom-chatbox-primary-text: #333;
102
+ --custom-chatbox-disable-color: #ccc;
103
+ --custom-chatbox-stop-color: #f00;
104
+ --custom-chatbox-time-color: #96a2c1;
105
+ --custom-chatbox-msg-dotted-loader-size: 15px;
106
+ --custom-chatbox-content-w: calc(100% - 50px);
107
+ --custom-chatbox-toolkit-btn-color: #f8f9fa;
108
+ --custom-chatbox-toolkit-btn-border-color: #e9ecef;
109
+ --custom-chatbox-toolkit-btn-active-color: #c2dfff;
110
+ --custom-chatbox-newchat-btn-color: #f8f9fa;
111
+ --custom-chatbox-newchat-btn-border-color: #e9ecef;
112
+ min-width: var(--custom-chatbox-w);
113
+ max-width: var(--custom-chatbox-w);
114
+ margin: auto;
115
+ background: var(--custom-chatbox-bg);
116
+ border-radius: 8px;
117
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
118
+ padding: 20px;
119
+ position: fixed;
120
+ bottom: 0;
121
+ right: 0;
122
+ z-index: 1031;
123
+ height: var(--custom-chatbox-h);
124
+ /* message list */
125
+ /* dot loading */
126
+ /* control area */
127
+ /* loading */
128
+ /* new chat button */
129
+ /* toolkit buttons */
130
+ }
131
+ .custom-chatbox-container details {
132
+ font-style: italic;
133
+ margin: 0;
134
+ padding: 0;
135
+ font-size: 0.75rem;
136
+ margin-bottom: 0.5rem;
137
+ }
138
+ .custom-chatbox-container summary {
139
+ cursor: pointer;
140
+ font-weight: bold;
141
+ color: var(--custom-chatbox-primary-color);
142
+ outline: none;
143
+ }
144
+ .custom-chatbox-container details[open] summary {
145
+ color: var(--custom-chatbox-primary-text);
146
+ }
147
+ .custom-chatbox-container h1 {
148
+ font-size: 1.35rem;
149
+ }
150
+ .custom-chatbox-container h2 {
151
+ font-size: 1.25rem;
152
+ }
153
+ .custom-chatbox-container h3 {
154
+ font-size: 1.125rem;
155
+ }
156
+ .custom-chatbox-container h4 {
157
+ font-size: 1rem;
158
+ }
159
+ .custom-chatbox-container h5 {
160
+ font-size: 0.875rem;
161
+ }
162
+ .custom-chatbox-container h6 {
163
+ font-size: 0.75rem;
164
+ }
165
+ .custom-chatbox-container .messages {
166
+ height: calc(100% - 80px);
167
+ overflow-y: auto;
168
+ margin-bottom: 10px;
169
+ font-size: 13px;
170
+ margin-right: 0;
171
+ }
172
+ .custom-chatbox-container .messages::-webkit-scrollbar {
173
+ width: 3px;
174
+ }
175
+ .custom-chatbox-container .messages::-webkit-scrollbar-thumb {
176
+ background: rgba(0, 0, 0, 0.2);
177
+ }
178
+ .custom-chatbox-container .messages > div {
179
+ margin: 5px 0;
180
+ padding: 3px 5px;
181
+ border-radius: 0.35rem;
182
+ }
183
+ .custom-chatbox-container .messages p {
184
+ margin: 3px 0;
185
+ }
186
+ .custom-chatbox-container .messages .qa-timestamp {
187
+ font-size: 0.75rem;
188
+ color: var(--custom-chatbox-time-color);
189
+ font-style: italic;
190
+ font-weight: normal;
191
+ display: block;
192
+ text-align: right;
193
+ }
194
+ .custom-chatbox-container .messages .qa-name {
195
+ font-weight: bold;
196
+ color: var(--custom-chatbox-primary-color);
197
+ }
198
+ .custom-chatbox-container .messages .qa-name svg, .custom-chatbox-container .messages .qa-name img {
199
+ max-height: 15px;
200
+ }
201
+ .custom-chatbox-container .messages .qa-content {
202
+ background: var(--custom-chatbox-msg-bg);
203
+ padding: 0.5rem;
204
+ border-radius: 0.35rem;
205
+ margin-top: 0.3rem;
206
+ display: inline-block;
207
+ text-align: start;
208
+ }
209
+ .custom-chatbox-container .messages .request {
210
+ text-align: end;
211
+ }
212
+ .custom-chatbox-container .messages .request .qa-content {
213
+ max-width: var(--custom-chatbox-content-w);
214
+ background: var(--custom-chatbox-msg-bg2);
215
+ }
216
+ .custom-chatbox-container .messages .reply {
217
+ text-align: start;
218
+ }
219
+ .custom-chatbox-container .messages .reply .qa-name {
220
+ display: flex;
221
+ }
222
+ .custom-chatbox-container .messages .reply .qa-content {
223
+ width: var(--custom-chatbox-content-w);
224
+ }
225
+ .custom-chatbox-container .msg-dotted-loader-container {
226
+ font-weight: normal;
227
+ transform: translateY(-5px);
228
+ display: flex;
229
+ align-items: center;
230
+ margin-top: 0.4rem;
231
+ margin-left: 0.3rem;
232
+ color: var(--custom-chatbox-gray-color);
233
+ }
234
+ .custom-chatbox-container .msg-dotted-loader-text {
235
+ transform: translateY(-10%);
236
+ }
237
+ .custom-chatbox-container .msg-dotted-loader {
238
+ position: relative;
239
+ text-align: center;
240
+ display: inline-block;
241
+ width: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
242
+ height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
243
+ margin-right: 0.1rem;
244
+ }
245
+ .custom-chatbox-container .msg-dotted-loader::after,
246
+ .custom-chatbox-container .msg-dotted-loader::before {
247
+ content: "";
248
+ position: absolute;
249
+ top: 0;
250
+ left: 0;
251
+ width: var(--custom-chatbox-msg-dotted-loader-size);
252
+ height: var(--custom-chatbox-msg-dotted-loader-size);
253
+ border-radius: 50%;
254
+ border: 2px var(--custom-chatbox-gray-color);
255
+ border-style: dotted solid dotted solid;
256
+ animation: turn-left 1.5s linear infinite;
257
+ }
258
+ .custom-chatbox-container .msg-dotted-loader::before {
259
+ left: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
260
+ top: calc(var(--custom-chatbox-msg-dotted-loader-size) / 2 / 2 * -1);
261
+ width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
262
+ height: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size) / 2);
263
+ border-style: dotted dotted solid solid;
264
+ animation: msg-dotted-loader-anim--turn-right 1.5s linear infinite;
265
+ }
266
+ @keyframes msg-dotted-loader-anim--turn-right {
267
+ 0% {
268
+ transform: rotate(0deg);
269
+ }
270
+ 100% {
271
+ transform: rotate(360deg);
272
+ }
273
+ }
274
+ @keyframes turn-left {
275
+ 0% {
276
+ transform: rotate(0deg);
277
+ }
278
+ 100% {
279
+ transform: rotate(-360deg);
280
+ }
281
+ }
282
+ .custom-chatbox-container .msgcontrol {
283
+ display: flex;
284
+ position: absolute;
285
+ bottom: 10px;
286
+ z-index: 1;
287
+ width: calc(100% - 40px);
288
+ }
289
+ .custom-chatbox-container .msgcontrol .messageInput {
290
+ width: 100%;
291
+ border: 1px solid var(--custom-chatbox-msg-border);
292
+ border-radius: 4px;
293
+ font-size: 0.875rem;
294
+ border: none;
295
+ outline: none;
296
+ }
297
+ .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
298
+ outline: none;
299
+ }
300
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
301
+ background: var(--custom-chatbox-input-bg);
302
+ padding: 0.5rem;
303
+ border-radius: 0.35rem;
304
+ width: 100%;
305
+ color: var(--custom-chatbox-default-txt-color);
306
+ resize: none;
307
+ max-height: 50vh;
308
+ border-color: var(--custom-chatbox-gray-color);
309
+ }
310
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
311
+ width: 3px;
312
+ }
313
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar-thumb {
314
+ background: rgba(0, 0, 0, 0.2);
315
+ }
316
+ .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
317
+ border-color: transparent;
318
+ outline: 1px solid var(--custom-chatbox-primary-color);
319
+ }
320
+ .custom-chatbox-container .msgcontrol button {
321
+ padding: 6px;
322
+ border: none;
323
+ position: absolute;
324
+ background-color: var(--custom-chatbox-primary-color);
325
+ color: var(--custom-chatbox-default-btn-color);
326
+ border: 1px solid var(--custom-chatbox-primary-color);
327
+ border-radius: 50%;
328
+ cursor: pointer;
329
+ margin-left: 0.5rem;
330
+ min-width: 30px;
331
+ font-size: 0.875rem;
332
+ z-index: 2;
333
+ right: 0.4rem;
334
+ bottom: 0.7rem;
335
+ width: 40px;
336
+ height: 40px;
337
+ padding: 0;
338
+ }
339
+ .custom-chatbox-container .msgcontrol button path {
340
+ fill: var(--custom-chatbox-default-btn-color);
341
+ }
342
+ .custom-chatbox-container .msgcontrol button:hover {
343
+ transform: scale(1.1);
344
+ }
345
+ .custom-chatbox-container .msgcontrol button:disabled {
346
+ opacity: 0.7;
347
+ }
348
+ .custom-chatbox-container .msgcontrol button.is-suspended {
349
+ background-color: var(--custom-chatbox-stop-color);
350
+ border-color: var(--custom-chatbox-stop-color);
351
+ }
352
+ .custom-chatbox-container .loading {
353
+ margin-top: 0;
354
+ height: 5px;
355
+ position: absolute;
356
+ bottom: 5px;
357
+ width: calc(100% - 40px);
358
+ z-index: 1;
359
+ }
360
+ .custom-chatbox-container .newchat-btn {
361
+ text-align: center;
362
+ }
363
+ .custom-chatbox-container .newchat-btn > button {
364
+ padding: 3px 6px;
365
+ background-color: var(--custom-chatbox-newchat-btn-color);
366
+ border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
367
+ border-radius: 20px;
368
+ cursor: pointer;
369
+ transition: all 0.3s ease;
370
+ font-size: 0.8125rem;
371
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
372
+ }
373
+ .custom-chatbox-container .newchat-btn > button:hover {
374
+ transform: translateY(-2px);
375
+ }
376
+ .custom-chatbox-container .toolkit-btns {
377
+ display: flex;
378
+ position: absolute;
379
+ bottom: 20px;
380
+ margin-left: 5px;
381
+ z-index: 1;
382
+ flex-wrap: wrap;
383
+ gap: 8px;
384
+ justify-content: center;
385
+ }
386
+ .custom-chatbox-container .toolkit-btns > button {
387
+ padding: 3px 6px;
388
+ background-color: var(--custom-chatbox-toolkit-btn-color);
389
+ border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
390
+ border-radius: 20px;
391
+ cursor: pointer;
392
+ transition: all 0.3s ease;
393
+ font-size: 0.75rem;
394
+ }
395
+ .custom-chatbox-container .toolkit-btns > button:hover {
396
+ background-color: var(--custom-chatbox-toolkit-btn-border-color);
397
+ transform: translateY(-2px);
398
+ }
399
+ .custom-chatbox-container .toolkit-btns > button.active {
400
+ background-color: var(--custom-chatbox-toolkit-btn-active-color);
401
+ }
@@ -0,0 +1,54 @@
1
+ import React from "react";
2
+ export declare type MessageDetail = {
3
+ sender: string;
4
+ timestamp: string;
5
+ content: string;
6
+ tag: string;
7
+ };
8
+ export interface FloatingButton {
9
+ label: string;
10
+ value: string;
11
+ onClick: string;
12
+ }
13
+ export interface RequestConfig {
14
+ apiUrl: string;
15
+ requestBody: string;
16
+ responseExtractor: string;
17
+ }
18
+ export declare type ChatboxProps = {
19
+ debug?: boolean;
20
+ prefix?: string;
21
+ contentRef?: React.RefObject<any>;
22
+ model?: string;
23
+ baseUrl?: string;
24
+ apiKey?: string;
25
+ defaultMessages?: MessageDetail[];
26
+ verbose?: boolean;
27
+ reasoningSwitchLabel?: string;
28
+ stopLabel?: React.ReactNode;
29
+ questionName?: React.ReactNode;
30
+ answerName?: React.ReactNode;
31
+ questionNameIcon?: string;
32
+ answerNameIcon?: string;
33
+ bubble?: boolean;
34
+ bubbleLabel?: string;
35
+ sendLabel?: string;
36
+ sendLoading?: boolean;
37
+ sendLoadingLabel?: string;
38
+ placeholder?: string;
39
+ noDataPlaceholder?: string;
40
+ requestConfig: RequestConfig;
41
+ headerConfig?: any;
42
+ maxHistoryLength?: number;
43
+ contextData?: Record<string, any>;
44
+ toolkitButtons?: FloatingButton[];
45
+ newChatButton?: FloatingButton;
46
+ renderParser?: (input: string) => Promise<string>;
47
+ requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => any;
48
+ nameFormatter?: (input: string) => string;
49
+ onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
50
+ onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
51
+ onComplete?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
52
+ };
53
+ declare const Chatbox: (props: ChatboxProps) => JSX.Element;
54
+ export default Chatbox;