yt-chat-components 0.9.9 → 1.0.1

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 (49) hide show
  1. package/.idea/modules.xml +1 -1
  2. package/.idea/sonarlint/issuestore/index.pb +3 -35
  3. package/dist/build/static/js/bundle.min.js +1 -0
  4. package/package.json +76 -77
  5. package/public/index.html +108 -81
  6. package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx +464 -211
  7. package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts +249 -246
  8. package/src/YtChatView/chatWidget/chatWindow/index.module.css +196 -196
  9. package/src/YtChatView/chatWidget/chatWindow/index.tsx +1040 -924
  10. package/src/YtChatView/chatWidget/chatWindow/types/chatWidget/index.ts +50 -37
  11. package/src/YtChatView/chatWidget/index.tsx +2586 -2502
  12. package/src/YtChatView/logoBtn/index.css +3 -3
  13. package/src/YtChatView/logoBtn/index.jsx +103 -103
  14. package/src/YtChatView/logoSplitBtn/index.css +3 -3
  15. package/src/YtChatView/logoSplitBtn/index.jsx +105 -105
  16. package/src/YtChatView/mobileChat/index.jsx +848 -0
  17. package/src/YtChatView/mobileChat/index.module.css +254 -0
  18. package/src/YtChatView/previewDialog/index.jsx +600 -600
  19. package/src/YtChatView/previewDialog/index.module.css +253 -253
  20. package/src/assets/aicenter/icon_agents.png +0 -0
  21. package/src/assets/aicenter/icon_history.png +0 -0
  22. package/src/assets/aicenter/icon_history_add.png +0 -0
  23. package/src/assets/aicenter/icon_history_headerbg.png +0 -0
  24. package/src/assets/aicenter/icon_history_upload.png +0 -0
  25. package/src/chatWidget/chatWindow/index.tsx +426 -426
  26. package/src/chatWidget/index.tsx +2193 -2193
  27. package/src/index.tsx +11 -10
  28. package/webpack.config.js +50 -50
  29. package/.idea/sonarlint/issuestore/2/e/2e9f70bf32b414323ca1647e2b6f26e1533ee2fc +0 -0
  30. package/.idea/sonarlint/issuestore/3/6/364385cedcce4c06de1901392ffeeac0caef0f3c +0 -0
  31. package/.idea/sonarlint/issuestore/3/9/39129446b425a1d640160c068e4194e96639eedf +0 -0
  32. package/.idea/sonarlint/issuestore/4/a/4a2f33951ce07c1ff7184f91877aa13db05d3785 +0 -0
  33. package/.idea/sonarlint/issuestore/4/a/4a7b99bdbee5792679d347b6474463bf5e14b66d +0 -0
  34. package/.idea/sonarlint/issuestore/4/b/4b015aa5428c4d4c3d672893ec23f5fe3969f9be +0 -0
  35. package/.idea/sonarlint/issuestore/4/b/4b6989b8ccae808ebc45d02230d336ea53800365 +0 -0
  36. package/.idea/sonarlint/issuestore/5/a/5ab44fe33ca96299f51ad4778a73e425b92bf439 +0 -0
  37. package/.idea/sonarlint/issuestore/6/1/61ebb9fd6e8cf9082658121d5d81e297791dacd0 +0 -0
  38. package/.idea/sonarlint/issuestore/6/c/6c024c1d0ad64656b9d4b0695ec3c49c0454addf +0 -0
  39. package/.idea/sonarlint/issuestore/6/e/6e75fc1c07c3a427a86fc213ca9479caaaff00ea +0 -0
  40. package/.idea/sonarlint/issuestore/8/d/8d6123af13a140f93e06299fff7ea23c547e9ec8 +0 -0
  41. package/.idea/sonarlint/issuestore/c/c/cc2352788140b6778ac06df4b33f50b390d2d8be +0 -0
  42. package/.idea/sonarlint/issuestore/d/5/d5595158cc48f9bf3e51b06f6e6805a8fd2d6262 +0 -0
  43. package/.idea/sonarlint/issuestore/d/7/d747cbed4201192dfa83a1a51345b020a050b647 +0 -0
  44. package/.idea/sonarlint/issuestore/d/9/d938938695d447dadda115e28781c6541f53fc4f +0 -0
  45. package/build/static/js/bundle.min.js +0 -2
  46. package/build/static/js/bundle.min.js.LICENSE.txt +0 -132
  47. /package/.idea/{langflow-embedded-chat.iml → langflow-embedded-chat-clone.iml} +0 -0
  48. /package/.idea/sonarlint/issuestore/{0/f/0f8c0c92cf798431ebb931ff6e997b1af86ecee5 → 7/0/7030d0b2f71b999ff89a343de08c414af32fc93a} +0 -0
  49. /package/.idea/sonarlint/issuestore/{2/7/27e69cb561aeea20c1afbdd32d260dd60b89a81b → 9/c/9cfff9a6d27bd6c255aa751213163c7901fb8ce7} +0 -0
package/src/YtChatView/chatWidget/index.tsx CHANGED
@@ -1,2502 +1,2586 @@
1
- // @ts-nocheck
2
- import { useRef, useState } from 'react';
3
- import ChatWindow from './chatWindow';
4
- import { ChatMessageType } from './chatWindow/types/chatWidget';
5
-
6
- export default function ChatWidget({
7
- tags,
8
- getHistoryList,
9
- userInfo,
10
- api_key,
11
- output_type = 'chat',
12
- input_type = 'chat',
13
- output_component,
14
- host_url,
15
- flow_id,
16
- tweaks,
17
- send_icon_style,
18
- bot_message_style,
19
- user_message_style,
20
- chat_window_style,
21
- height,
22
- width,
23
- error_message_style,
24
- send_button_style,
25
- online,
26
- online_message,
27
- offline_message,
28
- window_title,
29
- chat_position,
30
- placeholder,
31
- input_style,
32
- placeholder_sending,
33
- input_container_style,
34
- additional_headers,
35
- session_id,
36
- start_open = false,
37
- setDropDownList,
38
- dropDownList,
39
- baseConfig,
40
- isShowUploadButton,
41
- dropManUrl,
42
- modalWidth
43
- }: {
44
- tags: [];
45
- getHistoryList: Function;
46
- userInfo: object;
47
- api_key?: string;
48
- input_value: string;
49
- output_type: string;
50
- input_type: string;
51
- output_component?: string;
52
- send_icon_style?: React.CSSProperties;
53
- chat_position?: string;
54
- bot_message_style?: React.CSSProperties;
55
- user_message_style?: React.CSSProperties;
56
- chat_window_style?: React.CSSProperties;
57
- online?: boolean;
58
- online_message?: string;
59
- offline_message?: string;
60
- height?: string;
61
- width?: number;
62
- window_title?: string;
63
- error_message_style?: React.CSSProperties;
64
- send_button_style?: React.CSSProperties;
65
- placeholder_sending?: string;
66
- placeholder?: string;
67
- input_style?: React.CSSProperties;
68
- input_container_style?: React.CSSProperties;
69
- host_url: string;
70
- flow_id: string;
71
- tweaks?: { [key: string]: any };
72
- additional_headers?: { [key: string]: string };
73
- session_id?: string;
74
- start_open?: boolean;
75
- baseConfig:object;
76
- isShowUploadButton:boolean;
77
- dropManUrl: string;
78
- modalWidth: number;
79
- }) {
80
- const [open, setOpen] = useState(start_open);
81
- const [messages, setMessages] = useState<ChatMessageType[]>([]);
82
- const sessionId = session_id;
83
-
84
- function updateLastMessage(message: ChatMessageType) {
85
- setMessages((prev) => {
86
- prev[prev.length - 1] = message;
87
- return [...prev];
88
- });
89
- }
90
-
91
- function addMessage(message: ChatMessageType) {
92
- setMessages((prev) => [...prev, message]);
93
- }
94
-
95
- function clearMessage() {
96
- setMessages([]);
97
- }
98
-
99
- const triggerRef = useRef<HTMLButtonElement>(null);
100
-
101
- const styles = `
102
-
103
- *,
104
- ::before,
105
- ::after {
106
- box-sizing: border-box;
107
- border-width: 0;
108
- border-style: solid;
109
- border-color: #e5e7eb;
110
- }
111
-
112
- abbr:where([title]) {
113
- -webkit-text-decoration: underline dotted;
114
- text-decoration: underline dotted;
115
- }
116
-
117
- b,
118
- strong {
119
- font-weight: bolder;
120
- }
121
-
122
- code,
123
- kbd,
124
- samp,
125
- pre {
126
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
127
- /* 1 */
128
- font-size: 1em;
129
- /* 2 */
130
- }
131
-
132
- small {
133
- font-size: 80%;
134
- }
135
-
136
- sub,
137
- sup {
138
- font-size: 75%;
139
- line-height: 0;
140
- position: relative;
141
- vertical-align: baseline;
142
- }
143
-
144
- sub {
145
- bottom: -0.25em;
146
- }
147
-
148
- sup {
149
- top: -0.5em;
150
- }
151
-
152
- button,
153
- input,
154
- optgroup,
155
- select,
156
- textarea {
157
- font-family: inherit;
158
- /* 1 */
159
- font-size: 100%;
160
- /* 1 */
161
- font-weight: inherit;
162
- /* 1 */
163
- line-height: inherit;
164
- /* 1 */
165
- color: inherit;
166
- /* 1 */
167
- margin: 0;
168
- /* 2 */
169
- padding: 0;
170
- /* 3 */
171
- }
172
-
173
- /*
174
- Remove the inheritance of text transform in Edge and Firefox.
175
- */
176
-
177
- button,
178
- select {
179
- text-transform: none;
180
- }
181
-
182
- /*
183
- 1. Correct the inability to style clickable types in iOS and Safari.
184
- 2. Remove default button styles.
185
- */
186
-
187
- button,
188
- [type='button'],
189
- [type='reset'],
190
- [type='submit'] {
191
- -webkit-appearance: button;
192
- /* 1 */
193
- // background-color: transparent;
194
- /* 2 */
195
- background-image: none;
196
- /* 2 */
197
- }
198
-
199
- /*
200
- Use the modern Firefox focus style for all focusable elements.
201
- */
202
-
203
- :-moz-focusring {
204
- outline: auto;
205
- }
206
-
207
- /*
208
- Remove the additional ':invalid' styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
209
- */
210
-
211
- :-moz-ui-invalid {
212
- box-shadow: none;
213
- }
214
-
215
- /*
216
- Add the correct vertical alignment in Chrome and Firefox.
217
- */
218
-
219
- progress {
220
- vertical-align: baseline;
221
- }
222
-
223
- /*
224
- Correct the cursor style of increment and decrement buttons in Safari.
225
- */
226
-
227
- ::-webkit-inner-spin-button,
228
- ::-webkit-outer-spin-button {
229
- height: auto;
230
- }
231
-
232
- /*
233
- 1. Correct the odd appearance in Chrome and Safari.
234
- 2. Correct the outline style in Safari.
235
- */
236
-
237
- [type='search'] {
238
- -webkit-appearance: textfield;
239
- /* 1 */
240
- outline-offset: -2px;
241
- /* 2 */
242
- }
243
-
244
- /*
245
- Remove the inner padding in Chrome and Safari on macOS.
246
- */
247
-
248
- ::-webkit-search-decoration {
249
- -webkit-appearance: none;
250
- }
251
-
252
- /*
253
- 1. Correct the inability to style clickable types in iOS and Safari.
254
- 2. Change font properties to 'inherit' in Safari.
255
- */
256
-
257
- ::-webkit-file-upload-button {
258
- -webkit-appearance: button;
259
- /* 1 */
260
- font: inherit;
261
- /* 2 */
262
- }
263
-
264
- /*
265
- Add the correct display in Chrome and Safari.
266
- */
267
-
268
- summary {
269
- display: list-item;
270
- }
271
-
272
- /*
273
- Removes the default spacing and border for appropriate elements.
274
- */
275
-
276
- fieldset {
277
- margin: 0;
278
- padding: 0;
279
- }
280
-
281
- legend {
282
- padding: 0;
283
- }
284
-
285
-
286
- /*
287
- Prevent resizing textareas horizontally by default.
288
- */
289
-
290
- textarea {
291
- resize: vertical;
292
- }
293
-
294
- /*
295
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
296
- 2. Set the default placeholder color to the user's configured gray 400 color.
297
- */
298
-
299
- input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
300
- opacity: 1;
301
- /* 1 */
302
- color: #9ca3af;
303
- /* 2 */
304
- }
305
-
306
- input::placeholder,
307
- textarea::placeholder {
308
- opacity: 1;
309
- /* 1 */
310
- color: #9ca3af;
311
- /* 2 */
312
- }
313
-
314
- /*
315
- Set the default cursor for buttons.
316
- */
317
-
318
- button,
319
- [role="button"] {
320
- cursor: pointer;
321
- }
322
-
323
- /*
324
- Make sure disabled buttons don't get the pointer cursor.
325
- */
326
-
327
- :disabled {
328
- cursor: default;
329
- }
330
-
331
- /*
332
- 1. Make replaced elements 'display: block' by default. (https://github.com/mozdevs/cssremedy/issues/14)
333
- 2. Add 'vertical-align: middle' to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
334
- This can trigger a poorly considered lint error in some tools but is included by design.
335
- */
336
-
337
-
338
- /*
339
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
340
- */
341
-
342
- img,
343
- video {
344
- max-width: 100%;
345
- height: auto;
346
- }
347
-
348
- /* Make elements with the HTML hidden attribute stay hidden by default */
349
-
350
- [hidden] {
351
- display: none;
352
- }
353
-
354
- .cl-window {
355
- border-radius: 1rem;
356
- padding-top: 1.8rem;
357
- padding-bottom: 1.2rem;
358
- }
359
-
360
- .cl-middle-container{
361
- height:100%;
362
- display: flex;
363
- flex-direction: column;
364
- overflow: hidden;
365
- border-left:0.5px solid #3850FF2E;
366
- border-right:0.5px solid #3850FF2E;
367
- padding-left:1.6rem;
368
- padding-right:1.6rem;
369
- }
370
-
371
-
372
- .cl-scale-100 {
373
- --tw-scale-x: 1;
374
- --tw-scale-y: 1;
375
- -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
376
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
377
- }
378
-
379
- .cl-scale-0 {
380
- --tw-scale-x: 0;
381
- --tw-scale-y: 0;
382
- -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
383
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
384
- }
385
-
386
-
387
- .cl-chat-window {
388
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
389
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
390
- sans-serif;
391
- position: absolute;
392
- transition-property: all;
393
- transition-duration: 300ms;
394
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
395
- }
396
-
397
- .cl-online-message {
398
- height: 0.5rem;
399
- width: 0.5rem;
400
- border-radius: 9999px;
401
- --tw-bg-opacity: 1;
402
- background-color: rgb(34 197 94 / var(--tw-bg-opacity));
403
- }
404
-
405
- .cl-offline-message {
406
- height: 0.5rem;
407
- width: 0.5rem;
408
- border-radius: 9999px;
409
- --tw-bg-opacity: 1;
410
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
411
- }
412
-
413
- .cl-send-icon {
414
- margin-right: 1.25rem;
415
- height: 1.5rem;
416
- width: 1.5rem;
417
- }
418
-
419
- .cl-notsending-message {
420
- stroke: #3b82f6;
421
- }
422
-
423
- .cl-notsending-message:hover {
424
- stroke: #60a5fa;
425
- }
426
-
427
- .cl-sending-message {
428
- stroke: #9ca3af;
429
- }
430
-
431
- .cl-header-subtitle {
432
- display: flex;
433
- align-items: center;
434
- gap: 0.5rem;
435
- font-size: 0.875rem;
436
- line-height: 1.25rem;
437
- font-weight: 300;
438
- color: rgb(107 114 128);
439
- }
440
-
441
- .cl-header {
442
- position:relative;
443
- display: flex;
444
- flex-direction: column;
445
- --tw-bg-opacity: 1;
446
- font-size: 1.125rem;
447
- line-height: 1.75rem;
448
- font-weight: 400;
449
- color: rgb(17 24 39);
450
- }
451
-
452
- .cl-header .header-title{
453
- display: flex;
454
- align-items: center;
455
- margin-bottom: 16px;
456
- font-size: 22px;
457
- font-weight: 600;
458
- }
459
-
460
- .cl-header .diamond {
461
- position: relative;
462
- display: inline-block;
463
- width: 20px;
464
- height: 20px;
465
- }
466
-
467
- .cl-header .diamond::before {
468
- content: '';
469
- position: absolute;
470
- top: 5px;
471
- left: 0;
472
- width: 10px;
473
- height: 10px;
474
- background-color: blue;
475
- transform: rotate(45deg);
476
- border-radius: 3px;
477
- }
478
-
479
- .cl-drop-man{
480
- width:100%;
481
- display:flex;
482
- margin-top:0.81rem;
483
- }
484
- .cl-drop-man .drop-man-img{
485
- height:340px;
486
- margin-right: 4rem;
487
- margin-left: 3rem;
488
- }
489
-
490
- .cl-drop-man .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
491
- height:3.4rem;
492
- margin-right:20px;
493
- }
494
-
495
- .cl-drop-man .drop-down-list{
496
- width:auto;
497
- display:flex;
498
- flex-direction:row;
499
- flex-wrap:wrap;
500
- }
501
-
502
- .cl-drop-man .cl-drop-down .drop-down-item-card{
503
- width:calc(50% - 0.65rem);
504
- }
505
-
506
- .cl-drop-man .cl-drop-down{
507
- flex:1;
508
- position:unset;
509
- border-bottom-left-radius: 0;
510
- }
511
-
512
- .cl-drop-horizontal{
513
- width:100%;
514
- display:flex;
515
- margin-top:0.81rem;
516
- }
517
-
518
- .cl-drop-horizontal .drop-man-img{
519
- height:340px;
520
- margin-right: 4rem;
521
- margin-left: 3rem;
522
- }
523
-
524
- .cl-drop-horizontal .drop-down-list{
525
- width:auto;
526
- display:flex;
527
- flex-direction:row;
528
- flex-wrap:wrap;
529
- }
530
-
531
- .cl-drop-horizontal .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
532
- height:2.4rem;
533
- width:auto;
534
- margin-right:20px;
535
- }
536
-
537
- .cl-drop-horizontal .cl-drop-down{
538
- flex:1;
539
- position:unset;
540
- border-bottom-left-radius: 0;
541
- }
542
-
543
- .cl-drop-horizontal .cl-drop-down .drop-down-item-card{
544
- width:100%;
545
- height:unset;
546
- justify-content:unset;
547
- flex-direction:row;
548
- align-items: center;
549
- padding: 0.8rem 1.2rem 0.8rem;
550
- cursor:pointer;
551
- }
552
-
553
- .cl-drop-horizontal .drop-down-item-bottom-button{
554
- display:none;
555
- }
556
-
557
- .cl-drop-screen{
558
- width:100%;
559
- display:flex;
560
- margin-top:0.81rem;
561
- align-items: flex-start;
562
- }
563
-
564
- .cl-drop-screen .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
565
- height:2.4rem;
566
- width:auto;
567
- margin-right:20px;
568
- }
569
-
570
- .cl-drop-screen .drop-man-img{
571
- height:340px;
572
- margin-right: 4rem;
573
- margin-left: 3rem;
574
- }
575
-
576
- .cl-drop-screen .cl-drop-down{
577
- flex:1;
578
- position:unset;
579
- border-bottom-left-radius: 0;
580
- }
581
-
582
- .cl-drop-screen .cl-drop-down .drop-down-item-card{
583
- width:calc(33% - 0.65rem);
584
- }
585
-
586
- .cl-drop-down {
587
- background: #FFFFFF;
588
- border-radius: 10px;
589
- box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
590
- z-index: 1;
591
- width: 100%;
592
- min-height: 50px;
593
- position: absolute;
594
- bottom: -14.7rem;
595
- padding:1.3rem;
596
- }
597
-
598
- .drop-down-title {
599
- font-weight: 500;
600
- font-size: 18px;
601
- color: #000000;
602
- line-height: 1.1;
603
- text-align: left;
604
- }
605
- .drop-down-list {
606
- display:flex;
607
- gap:1.3rem;
608
- margin-top:2rem;
609
- }
610
- .drop-down-item-card {
611
- width: 33%;
612
- padding: 1.2rem 1.2rem 0.3rem;
613
- height:7.5rem;
614
- font-weight: 400;
615
- font-size: 14px;
616
- color: #FFFFFF;
617
- line-height: 14px;
618
- text-align: left;
619
- border-radius:10px;
620
- background: url("https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-bg.png");
621
- background-size: cover;
622
- background-position: center;
623
- background-repeat: no-repeat;
624
-
625
- display:flex;
626
- justify-content: space-between;
627
- flex-direction: column;
628
- }
629
- .drop-down-item-title {
630
- font-weight: 400;
631
- font-size: 16px;
632
- color: #000000;
633
- line-height: 20px;
634
- text-align: left;
635
- width: 100%;
636
- margin-bottom:0 !important;
637
- }
638
- .drop-down-item-bottom{
639
- display:flex;
640
- align-items: center;
641
- justify-content: space-between;
642
- flex-direction: row;
643
- // margin-top:1rem;
644
- align-items: center;
645
- }
646
-
647
- .drop-down-item-bottom-button{
648
- border-radius: 16px;
649
- line-height: 20px;
650
- text-align: left;
651
- width: 2rem;
652
- padding: 0.2rem 0.4rem 0.2rem 0.2rem;
653
- cursor: pointer;
654
- display: flex;
655
- justify-content: center;
656
- align-items: center
657
- }
658
-
659
- .drop-down-item-bottom-img{
660
- width:4rem;
661
- height:3.5rem;
662
- }
663
-
664
- @media screen and (max-width: 1000px){
665
- .drop-down-item-bottom-img {
666
- display:none;
667
- }
668
- .drop-down-item-bottom {
669
-
670
- margin-bottom:1rem;
671
- }
672
- }
673
-
674
- .cl-messages_container {
675
- position: relative;
676
- display: flex;
677
- height: 100%;
678
- flex-direction: column;
679
- overflow: scroll;
680
- overflow-x: clip;
681
- --tw-bg-opacity: 1;
682
- padding-left: 1rem;
683
- padding-right: 1rem;
684
- padding-top: 0.5rem;
685
- padding-bottom: 0.5rem;
686
- -ms-overflow-style: none;
687
- scrollbar-width: none;
688
- }
689
-
690
- .cl-messages_container::-webkit-scrollbar {
691
- display: none;
692
- }
693
-
694
- .cl-input_container {
695
- position: relative;
696
- display: flex;
697
- flex-direction: column;
698
- width: 100%;
699
- align-items: center;
700
- --tw-border-opacity: 1;
701
- --tw-bg-opacity: 1;
702
- border-top-right-radius: 50px;
703
- border-bottom-right-radius: 50px;
704
- }
705
-
706
- .cl-chat-message {
707
- display: flex;
708
- width: 100%;
709
- padding-top: 0.5rem;
710
- padding-bottom: 0.5rem;
711
- padding-left: 0.5rem;
712
- padding-right: 0.5rem;
713
- }
714
-
715
- @-webkit-keyframes pulse {
716
- 50% {
717
- opacity: .5;
718
- }
719
- }
720
-
721
- @keyframes pulse {
722
- 50% {
723
- opacity: .5;
724
- }
725
- }
726
-
727
- .cl-animate-pulse {
728
- -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
729
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
730
- }
731
-
732
- .cl-justify-start {
733
- justify-content: flex-start;
734
- }
735
-
736
- .cl-justify-end {
737
- justify-content: flex-end;
738
- }
739
-
740
- .cl-input-element {
741
- height: 100%;
742
- width: 100%;
743
- padding-left: 1.25rem;
744
- padding-right: 1.25rem;
745
- padding-top: 0.25rem;
746
- padding-bottom: 0.25rem;
747
- font-weight: 300;
748
- background-color: #FFFFFF;
749
- color: rgb(17 24 39);
750
- border-top-left-radius: 50px;
751
- border-bottom-left-radius: 50px;
752
- transition: height 0.2s ease;
753
- }
754
- .cl-input-element::-webkit-scrollbar{
755
- width: 0 !important;
756
- }
757
-
758
- .cl-input-element::placeholder {
759
- line-height:45px;
760
- }
761
-
762
- .cl-input-element:focus {
763
- outline: 2px solid transparent;
764
- outline-offset: 2px;
765
- }
766
-
767
- .cl-input-element:focus::placeholder {
768
- line-height:unset;
769
- }
770
-
771
- .cl-user_message {
772
- width: -webkit-fit-content;
773
- width: -moz-fit-content;
774
- width: fit-content;
775
- -webkit-column-break-before: all;
776
- break-before: all;
777
- border-radius: 0.75rem;
778
- border-top-right-radius: 0.125rem;
779
- --tw-bg-opacity: 1;
780
- background-color: rgb(59 130 246 / var(--tw-bg-opacity));
781
- padding-left: 1rem;
782
- padding-right: 1rem;
783
- padding-top: 0.5rem;
784
- padding-bottom: 0.5rem;
785
- text-align: left;
786
- --tw-text-opacity: 1;
787
- color: rgb(255 255 255 / var(--tw-text-opacity));
788
- white-space: pre-line;
789
- }
790
-
791
- .cl-error_message {
792
- width: -webkit-fit-content;
793
- width: -moz-fit-content;
794
- width: fit-content;
795
- max-width: 90%;
796
- -webkit-column-break-before: all;
797
- break-before: all;
798
- border-radius: 0.75rem;
799
- border-top-left-radius: 0.125rem;
800
- --tw-bg-opacity: 1;
801
- background-color: rgb(248 113 113 / var(--tw-bg-opacity));
802
- padding-left: 1rem;
803
- padding-right: 1rem;
804
- padding-top: 0.5rem;
805
- padding-bottom: 0.5rem;
806
- text-align: left;
807
- --tw-text-opacity: 1;
808
- color: rgb(255 255 255 / var(--tw-text-opacity));
809
- }
810
-
811
- .cl-bot_message {
812
- width: -webkit-fit-content;
813
- width: -moz-fit-content;
814
- width: fit-content;
815
- max-width: 90%;
816
- -webkit-column-break-before: all;
817
- break-before: all;
818
- border-radius: 0.75rem;
819
- border-top-left-radius: 0.125rem;
820
- --tw-bg-opacity: 1;
821
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
822
- padding-left: 1rem;
823
- padding-right: 1rem;
824
- padding-top: 0.5rem;
825
- padding-bottom: 0.5rem;
826
- text-align: left;
827
- --tw-text-opacity: 1;
828
- color: rgb(31 41 55 / var(--tw-text-opacity));
829
- }
830
-
831
- .origin-bottom {
832
- -webkit-transform-origin: bottom;
833
- transform-origin: bottom;
834
- }
835
-
836
- .origin-bottom-left {
837
- -webkit-transform-origin: bottom left;
838
- transform-origin: bottom left;
839
- }
840
-
841
- .origin-bottom-right {
842
- -webkit-transform-origin: bottom right;
843
- transform-origin: bottom right;
844
- }
845
-
846
- .origin-center {
847
- -webkit-transform-origin: center;
848
- transform-origin: center;
849
- }
850
-
851
- .origin-top {
852
- -webkit-transform-origin: top;
853
- transform-origin: top;
854
- }
855
-
856
- .origin-top-left {
857
- -webkit-transform-origin: top left;
858
- transform-origin: top left;
859
- }
860
-
861
- .origin-top-right {
862
- -webkit-transform-origin: top right;
863
- transform-origin: top right;
864
- }
865
-
866
- .shadow {
867
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
868
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
869
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
870
- }
871
- input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
872
- color: rgb(156 163 175);
873
- opacity: 1; /* Firefox */
874
- }
875
-
876
- input:-ms-input-placeholder { /* Internet Explorer 10-11 */
877
- color: rgb(156 163 175);
878
- }
879
-
880
- input::-ms-input-placeholder { /* Microsoft Edge */
881
- color: rgb(156 163 175);
882
- }
883
- `;
884
-
885
- const markdownBody = `
886
-
887
- .markdown-body {
888
- --base-size-4: 0.25rem;
889
- --base-size-8: 0.5rem;
890
- --base-size-16: 1rem;
891
- --base-text-weight-normal: 400;
892
- --base-text-weight-medium: 500;
893
- --base-text-weight-semibold: 600;
894
- --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
895
- }
896
-
897
- @media (prefers-color-scheme: dark) {
898
- .markdown-body,
899
- [data-theme="dark"] {
900
- /*dark*/
901
- color-scheme: dark;
902
- --focus-outlineColor: #1f6feb;
903
- --fgColor-default: #e6edf3;
904
- --fgColor-muted: #8d96a0;
905
- --fgColor-accent: #4493f8;
906
- --fgColor-success: #3fb950;
907
- --fgColor-attention: #d29922;
908
- --fgColor-danger: #f85149;
909
- --fgColor-done: #ab7df8;
910
- --bgColor-default: #0d1117;
911
- --bgColor-muted: #161b22;
912
- --bgColor-neutral-muted: #6e768166;
913
- --bgColor-attention-muted: #bb800926;
914
- --borderColor-default: #30363d;
915
- --borderColor-muted: #30363db3;
916
- --borderColor-neutral-muted: #6e768166;
917
- --borderColor-accent-emphasis: #1f6feb;
918
- --borderColor-success-emphasis: #238636;
919
- --borderColor-attention-emphasis: #9e6a03;
920
- --borderColor-danger-emphasis: #da3633;
921
- --borderColor-done-emphasis: #8957e5;
922
- --color-prettylights-syntax-comment: #8b949e;
923
- --color-prettylights-syntax-constant: #79c0ff;
924
- --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
925
- --color-prettylights-syntax-entity: #d2a8ff;
926
- --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
927
- --color-prettylights-syntax-entity-tag: #7ee787;
928
- --color-prettylights-syntax-keyword: #ff7b72;
929
- --color-prettylights-syntax-string: #a5d6ff;
930
- --color-prettylights-syntax-variable: #ffa657;
931
- --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
932
- --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
933
- --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
934
- --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
935
- --color-prettylights-syntax-carriage-return-text: #f0f6fc;
936
- --color-prettylights-syntax-carriage-return-bg: #b62324;
937
- --color-prettylights-syntax-string-regexp: #7ee787;
938
- --color-prettylights-syntax-markup-list: #f2cc60;
939
- --color-prettylights-syntax-markup-heading: #1f6feb;
940
- --color-prettylights-syntax-markup-italic: #c9d1d9;
941
- --color-prettylights-syntax-markup-bold: #c9d1d9;
942
- --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
943
- --color-prettylights-syntax-markup-deleted-bg: #67060c;
944
- --color-prettylights-syntax-markup-inserted-text: #aff5b4;
945
- --color-prettylights-syntax-markup-inserted-bg: #033a16;
946
- --color-prettylights-syntax-markup-changed-text: #ffdfb6;
947
- --color-prettylights-syntax-markup-changed-bg: #5a1e02;
948
- --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
949
- --color-prettylights-syntax-markup-ignored-bg: #1158c7;
950
- --color-prettylights-syntax-meta-diff-range: #d2a8ff;
951
- --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
952
- }
953
- }
954
-
955
- @media (prefers-color-scheme: light) {
956
- .markdown-body,
957
- [data-theme="light"] {
958
- /*light*/
959
- color-scheme: light;
960
- --focus-outlineColor: #0969da;
961
- --fgColor-default: #1f2328;
962
- --fgColor-muted: #636c76;
963
- --fgColor-accent: #0969da;
964
- --fgColor-success: #1a7f37;
965
- --fgColor-attention: #9a6700;
966
- --fgColor-danger: #d1242f;
967
- --fgColor-done: #8250df;
968
- --bgColor-default: #ffffff;
969
- --bgColor-muted: #f6f8fa;
970
- --bgColor-neutral-muted: #afb8c133;
971
- --bgColor-attention-muted: #fff8c5;
972
- --borderColor-default: #d0d7de;
973
- --borderColor-muted: #d0d7deb3;
974
- --borderColor-neutral-muted: #afb8c133;
975
- --borderColor-accent-emphasis: #0969da;
976
- --borderColor-success-emphasis: #1a7f37;
977
- --borderColor-attention-emphasis: #bf8700;
978
- --borderColor-danger-emphasis: #cf222e;
979
- --borderColor-done-emphasis: #8250df;
980
- --color-prettylights-syntax-comment: #57606a;
981
- --color-prettylights-syntax-constant: #0550ae;
982
- --color-prettylights-syntax-constant-other-reference-link: #0a3069;
983
- --color-prettylights-syntax-entity: #6639ba;
984
- --color-prettylights-syntax-storage-modifier-import: #24292f;
985
- --color-prettylights-syntax-entity-tag: #0550ae;
986
- --color-prettylights-syntax-keyword: #cf222e;
987
- --color-prettylights-syntax-string: #0a3069;
988
- --color-prettylights-syntax-variable: #953800;
989
- --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
990
- --color-prettylights-syntax-brackethighlighter-angle: #57606a;
991
- --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
992
- --color-prettylights-syntax-invalid-illegal-bg: #82071e;
993
- --color-prettylights-syntax-carriage-return-text: #f6f8fa;
994
- --color-prettylights-syntax-carriage-return-bg: #cf222e;
995
- --color-prettylights-syntax-string-regexp: #116329;
996
- --color-prettylights-syntax-markup-list: #3b2300;
997
- --color-prettylights-syntax-markup-heading: #0550ae;
998
- --color-prettylights-syntax-markup-italic: #24292f;
999
- --color-prettylights-syntax-markup-bold: #24292f;
1000
- --color-prettylights-syntax-markup-deleted-text: #82071e;
1001
- --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
1002
- --color-prettylights-syntax-markup-inserted-text: #116329;
1003
- --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
1004
- --color-prettylights-syntax-markup-changed-text: #953800;
1005
- --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
1006
- --color-prettylights-syntax-markup-ignored-text: #eaeef2;
1007
- --color-prettylights-syntax-markup-ignored-bg: #0550ae;
1008
- --color-prettylights-syntax-meta-diff-range: #8250df;
1009
- --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
1010
- }
1011
- }
1012
-
1013
- .markdown-body {
1014
- -ms-text-size-adjust: 100%;
1015
- -webkit-text-size-adjust: 100%;
1016
- margin: 0;
1017
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
1018
- font-size: 16px;
1019
- line-height: 1.5;
1020
- word-wrap: break-word;
1021
- scroll-behavior: auto;
1022
- }
1023
-
1024
- .markdown-body .octicon {
1025
- display: inline-block;
1026
- fill: currentColor;
1027
- vertical-align: text-bottom;
1028
- }
1029
-
1030
- .markdown-body h1:hover .anchor .octicon-link:before,
1031
- .markdown-body h2:hover .anchor .octicon-link:before,
1032
- .markdown-body h3:hover .anchor .octicon-link:before,
1033
- .markdown-body h4:hover .anchor .octicon-link:before,
1034
- .markdown-body h5:hover .anchor .octicon-link:before,
1035
- .markdown-body h6:hover .anchor .octicon-link:before {
1036
- width: 16px;
1037
- height: 16px;
1038
- content: ' ';
1039
- display: inline-block;
1040
- background-color: currentColor;
1041
- -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
1042
- mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
1043
- }
1044
-
1045
- .markdown-body details,
1046
- .markdown-body figcaption,
1047
- .markdown-body figure {
1048
- display: block;
1049
- }
1050
-
1051
- .markdown-body summary {
1052
- display: list-item;
1053
- }
1054
-
1055
- .markdown-body [hidden] {
1056
- display: none !important;
1057
- }
1058
-
1059
- .markdown-body a {
1060
- background-color: transparent;
1061
- color: var(--fgColor-accent);
1062
- text-decoration: none;
1063
- }
1064
-
1065
- .markdown-body abbr[title] {
1066
- border-bottom: none;
1067
- -webkit-text-decoration: underline dotted;
1068
- text-decoration: underline dotted;
1069
- }
1070
-
1071
- .markdown-body b,
1072
- .markdown-body strong {
1073
- font-weight: var(--base-text-weight-semibold, 600);
1074
- }
1075
-
1076
- .markdown-body dfn {
1077
- font-style: italic;
1078
- }
1079
-
1080
- .markdown-body h1 {
1081
- margin: .67em 0;
1082
- font-weight: var(--base-text-weight-semibold, 600);
1083
- padding-bottom: .3em;
1084
- font-size: 2em;
1085
- border-bottom: 1px solid var(--borderColor-muted);
1086
- }
1087
-
1088
- .markdown-body mark {
1089
- background-color: var(--bgColor-attention-muted);
1090
- color: var(--fgColor-default);
1091
- }
1092
-
1093
- .markdown-body small {
1094
- font-size: 90%;
1095
- }
1096
-
1097
- .markdown-body sub,
1098
- .markdown-body sup {
1099
- font-size: 75%;
1100
- line-height: 0;
1101
- position: relative;
1102
- vertical-align: baseline;
1103
- }
1104
-
1105
- .markdown-body sub {
1106
- bottom: -0.25em;
1107
- }
1108
-
1109
- .markdown-body sup {
1110
- top: -0.5em;
1111
- }
1112
-
1113
- .markdown-body img {
1114
- border-style: none;
1115
- max-width: 100%;
1116
- box-sizing: content-box;
1117
- }
1118
-
1119
- .markdown-body code,
1120
- .markdown-body kbd,
1121
- .markdown-body pre,
1122
- .markdown-body samp {
1123
- font-family: monospace;
1124
- font-size: 1em;
1125
- }
1126
-
1127
- .markdown-body figure {
1128
- margin: 1em 40px;
1129
- }
1130
-
1131
- .markdown-body hr {
1132
- box-sizing: content-box;
1133
- overflow: hidden;
1134
- background: transparent;
1135
- border-bottom: 1px solid var(--borderColor-muted);
1136
- height: .25em;
1137
- padding: 0;
1138
- margin: 24px 0;
1139
- background-color: var(--borderColor-default);
1140
- border: 0;
1141
- }
1142
-
1143
- .markdown-body input {
1144
- font: inherit;
1145
- margin: 0;
1146
- overflow: visible;
1147
- font-family: inherit;
1148
- font-size: inherit;
1149
- line-height: inherit;
1150
- }
1151
-
1152
- .markdown-body [type=button],
1153
- .markdown-body [type=reset],
1154
- .markdown-body [type=submit] {
1155
- -webkit-appearance: button;
1156
- appearance: button;
1157
- }
1158
-
1159
- .markdown-body [type=checkbox],
1160
- .markdown-body [type=radio] {
1161
- box-sizing: border-box;
1162
- padding: 0;
1163
- }
1164
-
1165
- .markdown-body [type=number]::-webkit-inner-spin-button,
1166
- .markdown-body [type=number]::-webkit-outer-spin-button {
1167
- height: auto;
1168
- }
1169
-
1170
- .markdown-body [type=search]::-webkit-search-cancel-button,
1171
- .markdown-body [type=search]::-webkit-search-decoration {
1172
- -webkit-appearance: none;
1173
- appearance: none;
1174
- }
1175
-
1176
- .markdown-body ::-webkit-input-placeholder {
1177
- color: inherit;
1178
- opacity: .54;
1179
- }
1180
-
1181
- .markdown-body ::-webkit-file-upload-button {
1182
- -webkit-appearance: button;
1183
- appearance: button;
1184
- font: inherit;
1185
- }
1186
-
1187
- .markdown-body a:hover {
1188
- text-decoration: underline;
1189
- }
1190
-
1191
- .markdown-body ::placeholder {
1192
- color: var(--fgColor-muted);
1193
- opacity: 1;
1194
- }
1195
-
1196
- .markdown-body hr::before {
1197
- display: table;
1198
- content: "";
1199
- }
1200
-
1201
- .markdown-body hr::after {
1202
- display: table;
1203
- clear: both;
1204
- content: "";
1205
- }
1206
-
1207
- .markdown-body table {
1208
- border-spacing: 0;
1209
- border-collapse: collapse;
1210
- display: block;
1211
- width: max-content;
1212
- max-width: 100%;
1213
- overflow: auto;
1214
- }
1215
-
1216
- .markdown-body td,
1217
- .markdown-body th {
1218
- padding: 0;
1219
- }
1220
-
1221
- .markdown-body details summary {
1222
- cursor: pointer;
1223
- }
1224
-
1225
- .markdown-body details:not([open])>*:not(summary) {
1226
- display: none;
1227
- }
1228
-
1229
- .markdown-body a:focus,
1230
- .markdown-body [role=button]:focus,
1231
- .markdown-body input[type=radio]:focus,
1232
- .markdown-body input[type=checkbox]:focus {
1233
- outline: 2px solid var(--focus-outlineColor);
1234
- outline-offset: -2px;
1235
- box-shadow: none;
1236
- }
1237
-
1238
- .markdown-body a:focus:not(:focus-visible),
1239
- .markdown-body [role=button]:focus:not(:focus-visible),
1240
- .markdown-body input[type=radio]:focus:not(:focus-visible),
1241
- .markdown-body input[type=checkbox]:focus:not(:focus-visible) {
1242
- outline: solid 1px transparent;
1243
- }
1244
-
1245
- .markdown-body a:focus-visible,
1246
- .markdown-body [role=button]:focus-visible,
1247
- .markdown-body input[type=radio]:focus-visible,
1248
- .markdown-body input[type=checkbox]:focus-visible {
1249
- outline: 2px solid var(--focus-outlineColor);
1250
- outline-offset: -2px;
1251
- box-shadow: none;
1252
- }
1253
-
1254
- .markdown-body a:not([class]):focus,
1255
- .markdown-body a:not([class]):focus-visible,
1256
- .markdown-body input[type=radio]:focus,
1257
- .markdown-body input[type=radio]:focus-visible,
1258
- .markdown-body input[type=checkbox]:focus,
1259
- .markdown-body input[type=checkbox]:focus-visible {
1260
- outline-offset: 0;
1261
- }
1262
-
1263
- .markdown-body kbd {
1264
- display: inline-block;
1265
- padding: 3px 5px;
1266
- font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1267
- line-height: 10px;
1268
- color: var(--fgColor-default);
1269
- vertical-align: middle;
1270
- background-color: var(--bgColor-muted);
1271
- border: solid 1px var(--borderColor-neutral-muted);
1272
- border-bottom-color: var(--borderColor-neutral-muted);
1273
- border-radius: 6px;
1274
- box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
1275
- }
1276
-
1277
- .markdown-body h1,
1278
- .markdown-body h2,
1279
- .markdown-body h3,
1280
- .markdown-body h4,
1281
- .markdown-body h5,
1282
- .markdown-body h6 {
1283
- margin-top: 24px;
1284
- margin-bottom: 16px;
1285
- font-weight: var(--base-text-weight-semibold, 600);
1286
- line-height: 1.25;
1287
- }
1288
-
1289
- .markdown-body h2 {
1290
- font-weight: var(--base-text-weight-semibold, 600);
1291
- padding-bottom: .3em;
1292
- font-size: 1.5em;
1293
- border-bottom: 1px solid var(--borderColor-muted);
1294
- }
1295
-
1296
- .markdown-body h3 {
1297
- font-weight: var(--base-text-weight-semibold, 600);
1298
- font-size: 1.25em;
1299
- }
1300
-
1301
- .markdown-body h4 {
1302
- font-weight: var(--base-text-weight-semibold, 600);
1303
- font-size: 1em;
1304
- }
1305
-
1306
- .markdown-body h5 {
1307
- font-weight: var(--base-text-weight-semibold, 600);
1308
- font-size: .875em;
1309
- }
1310
-
1311
- .markdown-body h6 {
1312
- font-weight: var(--base-text-weight-semibold, 600);
1313
- font-size: .85em;
1314
- color: var(--fgColor-muted);
1315
- }
1316
-
1317
- .markdown-body p {
1318
- margin-top: 0;
1319
- margin-bottom: 10px;
1320
- }
1321
-
1322
- .markdown-body blockquote {
1323
- margin: 0;
1324
- padding: 0 1em;
1325
- color: var(--fgColor-muted);
1326
- }
1327
-
1328
- .markdown-body ul,
1329
- .markdown-body ol {
1330
- margin-top: 0;
1331
- margin-bottom: 0;
1332
- padding-left: 2em;
1333
- }
1334
-
1335
- .markdown-body ol ol,
1336
- .markdown-body ul ol {
1337
- list-style-type: lower-roman;
1338
- }
1339
-
1340
- .markdown-body ul ul ol,
1341
- .markdown-body ul ol ol,
1342
- .markdown-body ol ul ol,
1343
- .markdown-body ol ol ol {
1344
- list-style-type: lower-alpha;
1345
- }
1346
-
1347
- .markdown-body dd {
1348
- margin-left: 0;
1349
- }
1350
-
1351
- .markdown-body tt,
1352
- .markdown-body code,
1353
- .markdown-body samp {
1354
- font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1355
- font-size: 12px;
1356
- }
1357
-
1358
- .markdown-body pre {
1359
- margin-top: 0;
1360
- margin-bottom: 0;
1361
- font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1362
- font-size: 12px;
1363
- word-wrap: normal;
1364
- }
1365
-
1366
- .markdown-body .octicon {
1367
- display: inline-block;
1368
- overflow: visible !important;
1369
- vertical-align: text-bottom;
1370
- fill: currentColor;
1371
- }
1372
-
1373
- .markdown-body input::-webkit-outer-spin-button,
1374
- .markdown-body input::-webkit-inner-spin-button {
1375
- margin: 0;
1376
- -webkit-appearance: none;
1377
- appearance: none;
1378
- }
1379
-
1380
- .markdown-body .mr-2 {
1381
- margin-right: var(--base-size-8, 8px) !important;
1382
- }
1383
-
1384
- .markdown-body::before {
1385
- display: table;
1386
- content: "";
1387
- }
1388
-
1389
- .markdown-body::after {
1390
- display: table;
1391
- clear: both;
1392
- content: "";
1393
- }
1394
-
1395
- .markdown-body>*:first-child {
1396
- margin-top: 0 !important;
1397
- }
1398
-
1399
- .markdown-body>*:last-child {
1400
- margin-bottom: 0 !important;
1401
- }
1402
-
1403
- .markdown-body a:not([href]) {
1404
- color: inherit;
1405
- text-decoration: none;
1406
- }
1407
-
1408
- .markdown-body .absent {
1409
- color: var(--fgColor-danger);
1410
- }
1411
-
1412
- .markdown-body .anchor {
1413
- float: left;
1414
- padding-right: 4px;
1415
- margin-left: -20px;
1416
- line-height: 1;
1417
- }
1418
-
1419
- .markdown-body .anchor:focus {
1420
- outline: none;
1421
- }
1422
-
1423
- .markdown-body p,
1424
- .markdown-body blockquote,
1425
- .markdown-body ul,
1426
- .markdown-body ol,
1427
- .markdown-body dl,
1428
- .markdown-body table,
1429
- .markdown-body pre,
1430
- .markdown-body details {
1431
- margin-top: 0;
1432
- margin-bottom: 16px;
1433
- }
1434
-
1435
- .markdown-body blockquote>:first-child {
1436
- margin-top: 0;
1437
- }
1438
-
1439
- .markdown-body blockquote>:last-child {
1440
- margin-bottom: 0;
1441
- }
1442
-
1443
- .markdown-body h1 .octicon-link,
1444
- .markdown-body h2 .octicon-link,
1445
- .markdown-body h3 .octicon-link,
1446
- .markdown-body h4 .octicon-link,
1447
- .markdown-body h5 .octicon-link,
1448
- .markdown-body h6 .octicon-link {
1449
- color: var(--fgColor-default);
1450
- vertical-align: middle;
1451
- visibility: hidden;
1452
- }
1453
-
1454
- .markdown-body h1:hover .anchor,
1455
- .markdown-body h2:hover .anchor,
1456
- .markdown-body h3:hover .anchor,
1457
- .markdown-body h4:hover .anchor,
1458
- .markdown-body h5:hover .anchor,
1459
- .markdown-body h6:hover .anchor {
1460
- text-decoration: none;
1461
- }
1462
-
1463
- .markdown-body h1:hover .anchor .octicon-link,
1464
- .markdown-body h2:hover .anchor .octicon-link,
1465
- .markdown-body h3:hover .anchor .octicon-link,
1466
- .markdown-body h4:hover .anchor .octicon-link,
1467
- .markdown-body h5:hover .anchor .octicon-link,
1468
- .markdown-body h6:hover .anchor .octicon-link {
1469
- visibility: visible;
1470
- }
1471
-
1472
- .markdown-body h1 tt,
1473
- .markdown-body h1 code,
1474
- .markdown-body h2 tt,
1475
- .markdown-body h2 code,
1476
- .markdown-body h3 tt,
1477
- .markdown-body h3 code,
1478
- .markdown-body h4 tt,
1479
- .markdown-body h4 code,
1480
- .markdown-body h5 tt,
1481
- .markdown-body h5 code,
1482
- .markdown-body h6 tt,
1483
- .markdown-body h6 code {
1484
- padding: 0 .2em;
1485
- font-size: inherit;
1486
- }
1487
-
1488
- .markdown-body summary h1,
1489
- .markdown-body summary h2,
1490
- .markdown-body summary h3,
1491
- .markdown-body summary h4,
1492
- .markdown-body summary h5,
1493
- .markdown-body summary h6 {
1494
- display: inline-block;
1495
- }
1496
-
1497
- .markdown-body summary h1 .anchor,
1498
- .markdown-body summary h2 .anchor,
1499
- .markdown-body summary h3 .anchor,
1500
- .markdown-body summary h4 .anchor,
1501
- .markdown-body summary h5 .anchor,
1502
- .markdown-body summary h6 .anchor {
1503
- margin-left: -40px;
1504
- }
1505
-
1506
- .markdown-body summary h1,
1507
- .markdown-body summary h2 {
1508
- padding-bottom: 0;
1509
- border-bottom: 0;
1510
- }
1511
-
1512
- .markdown-body ul.no-list,
1513
- .markdown-body ol.no-list {
1514
- padding: 0;
1515
- list-style-type: none;
1516
- }
1517
-
1518
- .markdown-body ol[type="a s"] {
1519
- list-style-type: lower-alpha;
1520
- }
1521
-
1522
- .markdown-body ol[type="A s"] {
1523
- list-style-type: upper-alpha;
1524
- }
1525
-
1526
- .markdown-body ol[type="i s"] {
1527
- list-style-type: lower-roman;
1528
- }
1529
-
1530
- .markdown-body ol[type="I s"] {
1531
- list-style-type: upper-roman;
1532
- }
1533
-
1534
- .markdown-body ol[type="1"] {
1535
- list-style-type: decimal;
1536
- }
1537
-
1538
- .markdown-body div>ol:not([type]) {
1539
- list-style-type: decimal;
1540
- }
1541
-
1542
- .markdown-body ul ul,
1543
- .markdown-body ul ol,
1544
- .markdown-body ol ol,
1545
- .markdown-body ol ul {
1546
- margin-top: 0;
1547
- margin-bottom: 0;
1548
- }
1549
-
1550
- .markdown-body li>p {
1551
- margin-top: 16px;
1552
- }
1553
-
1554
- .markdown-body li+li {
1555
- margin-top: .25em;
1556
- }
1557
-
1558
- .markdown-body dl {
1559
- padding: 0;
1560
- }
1561
-
1562
- .markdown-body dl dt {
1563
- padding: 0;
1564
- margin-top: 16px;
1565
- font-size: 1em;
1566
- font-style: italic;
1567
- font-weight: var(--base-text-weight-semibold, 600);
1568
- }
1569
-
1570
- .markdown-body dl dd {
1571
- padding: 0 16px;
1572
- margin-bottom: 16px;
1573
- }
1574
-
1575
- .markdown-body table th {
1576
- font-weight: var(--base-text-weight-semibold, 600);
1577
- }
1578
-
1579
- .markdown-body table th,
1580
- .markdown-body table td {
1581
- padding: 6px 13px;
1582
- border: 1px solid var(--borderColor-default);
1583
- }
1584
-
1585
- .markdown-body table td>:last-child {
1586
- margin-bottom: 0;
1587
- }
1588
-
1589
- .markdown-body table tr {
1590
- border-top: 1px solid var(--borderColor-muted);
1591
- }
1592
-
1593
- .markdown-body table img {
1594
- background-color: transparent;
1595
- }
1596
-
1597
- .markdown-body img[align=right] {
1598
- padding-left: 20px;
1599
- }
1600
-
1601
- .markdown-body img[align=left] {
1602
- padding-right: 20px;
1603
- }
1604
-
1605
- .markdown-body .emoji {
1606
- max-width: none;
1607
- vertical-align: text-top;
1608
- background-color: transparent;
1609
- }
1610
-
1611
- .markdown-body span.frame {
1612
- display: block;
1613
- overflow: hidden;
1614
- }
1615
-
1616
- .markdown-body span.frame>span {
1617
- display: block;
1618
- float: left;
1619
- width: auto;
1620
- padding: 7px;
1621
- margin: 13px 0 0;
1622
- overflow: hidden;
1623
- border: 1px solid var(--borderColor-default);
1624
- }
1625
-
1626
- .markdown-body span.frame span img {
1627
- display: block;
1628
- float: left;
1629
- }
1630
-
1631
- .markdown-body span.frame span span {
1632
- display: block;
1633
- padding: 5px 0 0;
1634
- clear: both;
1635
- color: var(--fgColor-default);
1636
- }
1637
-
1638
- .markdown-body span.align-center {
1639
- display: block;
1640
- overflow: hidden;
1641
- clear: both;
1642
- }
1643
-
1644
- .markdown-body span.align-center>span {
1645
- display: block;
1646
- margin: 13px auto 0;
1647
- overflow: hidden;
1648
- text-align: center;
1649
- }
1650
-
1651
- .markdown-body span.align-center span img {
1652
- margin: 0 auto;
1653
- text-align: center;
1654
- }
1655
-
1656
- .markdown-body span.align-right {
1657
- display: block;
1658
- overflow: hidden;
1659
- clear: both;
1660
- }
1661
-
1662
- .markdown-body span.align-right>span {
1663
- display: block;
1664
- margin: 13px 0 0;
1665
- overflow: hidden;
1666
- text-align: right;
1667
- }
1668
-
1669
- .markdown-body span.align-right span img {
1670
- margin: 0;
1671
- text-align: right;
1672
- }
1673
-
1674
- .markdown-body span.float-left {
1675
- display: block;
1676
- float: left;
1677
- margin-right: 13px;
1678
- overflow: hidden;
1679
- }
1680
-
1681
- .markdown-body span.float-left span {
1682
- margin: 13px 0 0;
1683
- }
1684
-
1685
- .markdown-body span.float-right {
1686
- display: block;
1687
- float: right;
1688
- margin-left: 13px;
1689
- overflow: hidden;
1690
- }
1691
-
1692
- .markdown-body span.float-right>span {
1693
- display: block;
1694
- margin: 13px auto 0;
1695
- overflow: hidden;
1696
- text-align: right;
1697
- }
1698
-
1699
- .markdown-body code,
1700
- .markdown-body tt {
1701
- padding: .2em .4em;
1702
- margin: 0;
1703
- font-size: 85%;
1704
- white-space: break-spaces;
1705
- background-color: var(--bgColor-neutral-muted);
1706
- border-radius: 6px;
1707
- }
1708
-
1709
- .markdown-body code br,
1710
- .markdown-body tt br {
1711
- display: none;
1712
- }
1713
-
1714
- .markdown-body del code {
1715
- text-decoration: inherit;
1716
- }
1717
-
1718
- .markdown-body samp {
1719
- font-size: 85%;
1720
- }
1721
-
1722
- .markdown-body pre code {
1723
- font-size: 100%;
1724
- }
1725
-
1726
- .markdown-body pre>code {
1727
- padding: 0;
1728
- margin: 0;
1729
- word-break: normal;
1730
- white-space: pre;
1731
- background: transparent;
1732
- border: 0;
1733
- }
1734
-
1735
- .markdown-body .highlight {
1736
- margin-bottom: 16px;
1737
- }
1738
-
1739
- .markdown-body .highlight pre {
1740
- margin-bottom: 0;
1741
- word-break: normal;
1742
- }
1743
-
1744
- .markdown-body .highlight pre,
1745
- .markdown-body pre {
1746
- padding: 16px;
1747
- overflow: auto;
1748
- font-size: 85%;
1749
- line-height: 1.45;
1750
- color: var(--fgColor-default);
1751
- background-color: var(--bgColor-muted);
1752
- border-radius: 6px;
1753
- }
1754
-
1755
- .markdown-body pre code,
1756
- .markdown-body pre tt {
1757
- display: inline;
1758
- max-width: auto;
1759
- padding: 0;
1760
- margin: 0;
1761
- overflow: visible;
1762
- line-height: inherit;
1763
- word-wrap: normal;
1764
- background-color: transparent;
1765
- border: 0;
1766
- }
1767
-
1768
- .markdown-body .csv-data td,
1769
- .markdown-body .csv-data th {
1770
- padding: 5px;
1771
- overflow: hidden;
1772
- font-size: 12px;
1773
- line-height: 1;
1774
- text-align: left;
1775
- white-space: nowrap;
1776
- }
1777
-
1778
- .markdown-body .csv-data .blob-num {
1779
- padding: 10px 8px 9px;
1780
- text-align: right;
1781
- border: 0;
1782
- }
1783
-
1784
- .markdown-body .csv-data tr {
1785
- border-top: 0;
1786
- }
1787
-
1788
- .markdown-body .csv-data th {
1789
- font-weight: var(--base-text-weight-semibold, 600);
1790
- background: var(--bgColor-muted);
1791
- border-top: 0;
1792
- }
1793
-
1794
- .markdown-body [data-footnote-ref]::before {
1795
- content: "[";
1796
- }
1797
-
1798
- .markdown-body [data-footnote-ref]::after {
1799
- content: "]";
1800
- }
1801
-
1802
- .markdown-body .footnotes {
1803
- font-size: 12px;
1804
- color: var(--fgColor-muted);
1805
- border-top: 1px solid var(--borderColor-default);
1806
- }
1807
-
1808
- .markdown-body .footnotes ol {
1809
- padding-left: 16px;
1810
- }
1811
-
1812
- .markdown-body .footnotes ol ul {
1813
- display: inline-block;
1814
- padding-left: 16px;
1815
- margin-top: 16px;
1816
- }
1817
-
1818
- .markdown-body .footnotes li {
1819
- position: relative;
1820
- }
1821
-
1822
- .markdown-body .footnotes li:target::before {
1823
- position: absolute;
1824
- top: -8px;
1825
- right: -8px;
1826
- bottom: -8px;
1827
- left: -24px;
1828
- pointer-events: none;
1829
- content: "";
1830
- border: 2px solid var(--borderColor-accent-emphasis);
1831
- border-radius: 6px;
1832
- }
1833
-
1834
- .markdown-body .footnotes li:target {
1835
- color: var(--fgColor-default);
1836
- }
1837
-
1838
- .markdown-body .footnotes .data-footnote-backref g-emoji {
1839
- font-family: monospace;
1840
- }
1841
-
1842
- .markdown-body .pl-c {
1843
- color: var(--color-prettylights-syntax-comment);
1844
- }
1845
-
1846
- .markdown-body .pl-c1,
1847
- .markdown-body .pl-s .pl-v {
1848
- color: var(--color-prettylights-syntax-constant);
1849
- }
1850
-
1851
- .markdown-body .pl-e,
1852
- .markdown-body .pl-en {
1853
- color: var(--color-prettylights-syntax-entity);
1854
- }
1855
-
1856
- .markdown-body .pl-smi,
1857
- .markdown-body .pl-s .pl-s1 {
1858
- color: var(--color-prettylights-syntax-storage-modifier-import);
1859
- }
1860
-
1861
- .markdown-body .pl-ent {
1862
- color: var(--color-prettylights-syntax-entity-tag);
1863
- }
1864
-
1865
- .markdown-body .pl-k {
1866
- color: var(--color-prettylights-syntax-keyword);
1867
- }
1868
-
1869
- .markdown-body .pl-s,
1870
- .markdown-body .pl-pds,
1871
- .markdown-body .pl-s .pl-pse .pl-s1,
1872
- .markdown-body .pl-sr,
1873
- .markdown-body .pl-sr .pl-cce,
1874
- .markdown-body .pl-sr .pl-sre,
1875
- .markdown-body .pl-sr .pl-sra {
1876
- color: var(--color-prettylights-syntax-string);
1877
- }
1878
-
1879
- .markdown-body .pl-v,
1880
- .markdown-body .pl-smw {
1881
- color: var(--color-prettylights-syntax-variable);
1882
- }
1883
-
1884
- .markdown-body .pl-bu {
1885
- color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
1886
- }
1887
-
1888
- .markdown-body .pl-ii {
1889
- color: var(--color-prettylights-syntax-invalid-illegal-text);
1890
- background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
1891
- }
1892
-
1893
- .markdown-body .pl-c2 {
1894
- color: var(--color-prettylights-syntax-carriage-return-text);
1895
- background-color: var(--color-prettylights-syntax-carriage-return-bg);
1896
- }
1897
-
1898
- .markdown-body .pl-sr .pl-cce {
1899
- font-weight: bold;
1900
- color: var(--color-prettylights-syntax-string-regexp);
1901
- }
1902
-
1903
- .markdown-body .pl-ml {
1904
- color: var(--color-prettylights-syntax-markup-list);
1905
- }
1906
-
1907
- .markdown-body .pl-mh,
1908
- .markdown-body .pl-mh .pl-en,
1909
- .markdown-body .pl-ms {
1910
- font-weight: bold;
1911
- color: var(--color-prettylights-syntax-markup-heading);
1912
- }
1913
-
1914
- .markdown-body .pl-mi {
1915
- font-style: italic;
1916
- color: var(--color-prettylights-syntax-markup-italic);
1917
- }
1918
-
1919
- .markdown-body .pl-mb {
1920
- font-weight: bold;
1921
- color: var(--color-prettylights-syntax-markup-bold);
1922
- }
1923
-
1924
- .markdown-body .pl-md {
1925
- color: var(--color-prettylights-syntax-markup-deleted-text);
1926
- background-color: var(--color-prettylights-syntax-markup-deleted-bg);
1927
- }
1928
-
1929
- .markdown-body .pl-mi1 {
1930
- color: var(--color-prettylights-syntax-markup-inserted-text);
1931
- background-color: var(--color-prettylights-syntax-markup-inserted-bg);
1932
- }
1933
-
1934
- .markdown-body .pl-mc {
1935
- color: var(--color-prettylights-syntax-markup-changed-text);
1936
- background-color: var(--color-prettylights-syntax-markup-changed-bg);
1937
- }
1938
-
1939
- .markdown-body .pl-mi2 {
1940
- color: var(--color-prettylights-syntax-markup-ignored-text);
1941
- background-color: var(--color-prettylights-syntax-markup-ignored-bg);
1942
- }
1943
-
1944
- .markdown-body .pl-mdr {
1945
- font-weight: bold;
1946
- color: var(--color-prettylights-syntax-meta-diff-range);
1947
- }
1948
-
1949
- .markdown-body .pl-ba {
1950
- color: var(--color-prettylights-syntax-brackethighlighter-angle);
1951
- }
1952
-
1953
- .markdown-body .pl-sg {
1954
- color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
1955
- }
1956
-
1957
- .markdown-body .pl-corl {
1958
- text-decoration: underline;
1959
- color: var(--color-prettylights-syntax-constant-other-reference-link);
1960
- }
1961
-
1962
- .markdown-body [role=button]:focus:not(:focus-visible),
1963
- .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
1964
- .markdown-body button:focus:not(:focus-visible),
1965
- .markdown-body summary:focus:not(:focus-visible),
1966
- .markdown-body a:focus:not(:focus-visible) {
1967
- outline: none;
1968
- box-shadow: none;
1969
- }
1970
-
1971
- .markdown-body [tabindex="0"]:focus:not(:focus-visible),
1972
- .markdown-body details-dialog:focus:not(:focus-visible) {
1973
- outline: none;
1974
- }
1975
-
1976
- .markdown-body g-emoji {
1977
- display: inline-block;
1978
- min-width: 1ch;
1979
- font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
1980
- font-size: 1em;
1981
- font-style: normal !important;
1982
- font-weight: var(--base-text-weight-normal, 400);
1983
- line-height: 1;
1984
- vertical-align: -0.075em;
1985
- }
1986
-
1987
- .markdown-body g-emoji img {
1988
- width: 1em;
1989
- height: 1em;
1990
- }
1991
-
1992
- .markdown-body .task-list-item {
1993
- list-style-type: none;
1994
- }
1995
-
1996
- .markdown-body .task-list-item label {
1997
- font-weight: var(--base-text-weight-normal, 400);
1998
- }
1999
-
2000
- .markdown-body .task-list-item.enabled label {
2001
- cursor: pointer;
2002
- }
2003
-
2004
- .markdown-body .task-list-item+.task-list-item {
2005
- margin-top: var(--base-size-4);
2006
- }
2007
-
2008
- .markdown-body .task-list-item .handle {
2009
- display: none;
2010
- }
2011
-
2012
- .markdown-body .task-list-item-checkbox {
2013
- margin: 0 .2em .25em -1.4em;
2014
- vertical-align: middle;
2015
- }
2016
-
2017
- .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
2018
- margin: 0 -1.6em .25em .2em;
2019
- }
2020
-
2021
- .markdown-body .contains-task-list {
2022
- position: relative;
2023
- }
2024
-
2025
- .markdown-body .contains-task-list:hover .task-list-item-convert-container,
2026
- .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
2027
- display: block;
2028
- width: auto;
2029
- height: 24px;
2030
- overflow: visible;
2031
- clip: auto;
2032
- }
2033
-
2034
- .markdown-body ::-webkit-calendar-picker-indicator {
2035
- filter: invert(50%);
2036
- }
2037
-
2038
- .markdown-body .markdown-alert {
2039
- padding: var(--base-size-8) var(--base-size-16);
2040
- margin-bottom: var(--base-size-16);
2041
- color: inherit;
2042
- border-left: .25em solid var(--borderColor-default);
2043
- }
2044
-
2045
- .markdown-body .markdown-alert>:first-child {
2046
- margin-top: 0;
2047
- }
2048
-
2049
- .markdown-body .markdown-alert>:last-child {
2050
- margin-bottom: 0;
2051
- }
2052
-
2053
- .markdown-body .markdown-alert .markdown-alert-title {
2054
- display: flex;
2055
- font-weight: var(--base-text-weight-medium, 500);
2056
- align-items: center;
2057
- line-height: 1;
2058
- }
2059
-
2060
- .markdown-body .markdown-alert.markdown-alert-note {
2061
- border-left-color: var(--borderColor-accent-emphasis);
2062
- }
2063
-
2064
- .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
2065
- color: var(--fgColor-accent);
2066
- }
2067
-
2068
- .markdown-body .markdown-alert.markdown-alert-important {
2069
- border-left-color: var(--borderColor-done-emphasis);
2070
- }
2071
-
2072
- .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
2073
- color: var(--fgColor-done);
2074
- }
2075
-
2076
- .markdown-body .markdown-alert.markdown-alert-warning {
2077
- border-left-color: var(--borderColor-attention-emphasis);
2078
- }
2079
-
2080
- .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
2081
- color: var(--fgColor-attention);
2082
- }
2083
-
2084
- .markdown-body .markdown-alert.markdown-alert-tip {
2085
- border-left-color: var(--borderColor-success-emphasis);
2086
- }
2087
-
2088
- .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
2089
- color: var(--fgColor-success);
2090
- }
2091
-
2092
- .markdown-body .markdown-alert.markdown-alert-caution {
2093
- border-left-color: var(--borderColor-danger-emphasis);
2094
- }
2095
-
2096
- .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
2097
- color: var(--fgColor-danger);
2098
- }
2099
-
2100
- .markdown-body>*:first-child>.heading-element:first-child {
2101
- margin-top: 0 !important;
2102
- }`;
2103
-
2104
- const yt_style = `
2105
- .msg_userMessageBox {
2106
- width: fit-content;
2107
- max-width: 90%;
2108
- display: flex;
2109
- flex-direction: column;
2110
- align-items: flex-end;
2111
- }
2112
-
2113
- .msg_userMessageBox .msg_messageImgBox {
2114
- width: 100%;
2115
- display: flex;
2116
- flex-wrap: wrap;
2117
- justify-content: flex-end;
2118
- }
2119
-
2120
- .msg_userMessageBox .msg_messageImgBox .msg_messageImg {
2121
- border-radius: 5px;
2122
- }
2123
-
2124
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox {
2125
- flex-shrink: 0;
2126
- pointer-events: auto;
2127
- position: relative;
2128
- width: 137px;
2129
- background-color: #f0f0f0;
2130
- border-radius: 10px;
2131
- margin: 3px 5px;
2132
- padding: 5px;
2133
- display: flex;
2134
- }
2135
-
2136
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
2137
- display: block;
2138
- }
2139
-
2140
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
2141
- margin-left: 10px;
2142
- overflow: hidden;
2143
- display: flex;
2144
- align-items: center;
2145
- }
2146
-
2147
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
2148
- overflow: hidden;
2149
- text-overflow: ellipsis;
2150
- white-space: nowrap;
2151
- width: 72px;
2152
- color: #242424;
2153
- user-select: none;
2154
- }
2155
-
2156
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
2157
- user-select: none;
2158
- color: #a8a8a8;
2159
- }
2160
-
2161
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
2162
- display: none;
2163
- position: absolute;
2164
- cursor: pointer;
2165
- top: -2px;
2166
- right: 0;
2167
- z-index: 99999;
2168
- }
2169
-
2170
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
2171
- width: 20px;
2172
- }
2173
-
2174
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
2175
- border-radius: 3px;
2176
- z-index: 510;
2177
- }
2178
-
2179
- .msg_operateBox {
2180
- display: flex;
2181
- margin-top: 5px;
2182
- user-select: none;
2183
- }
2184
-
2185
- .msg_operateBox img {
2186
- -webkit-user-drag: none;
2187
- margin-right: 3px;
2188
- cursor: pointer;
2189
- width: 16px;
2190
- }
2191
-
2192
- .plh_textBox {
2193
- display: flex;
2194
- justify-content: center;
2195
- align-content: center;
2196
- }
2197
-
2198
- .plh_textBox .plh_text {
2199
- font-weight: bold;
2200
- }
2201
-
2202
- .w_send_file_box {
2203
- height: 23px;
2204
- display: flex;
2205
- background: transparent;
2206
- align-items: center;
2207
- justify-content: center;
2208
- border-radius: 24px;
2209
- font-size: 12px;
2210
- color: #666666;
2211
- cursor: pointer;
2212
- }
2213
-
2214
- .w_file_preview {
2215
- width: 100%;
2216
- height: fit-content;
2217
- background-color: transparent;
2218
- z-index: 500;
2219
- display: flex;
2220
- justify-content: flex-start;
2221
- align-items: center;
2222
- padding: 0 5px;
2223
- overflow-x: hidden;
2224
- }
2225
-
2226
- .w_file_preview .w_directionBg {
2227
- position: absolute;
2228
- cursor: pointer;
2229
- width: 18px;
2230
- height: 18px;
2231
- background: #FFFFFF;
2232
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2233
- border-radius: 5px;
2234
- border: 1px solid #F0F0F0;
2235
- z-index: 999999;
2236
- display: flex;
2237
- justify-content: center;
2238
- align-items: center;
2239
- }
2240
-
2241
- .w_file_preview .w_directionBg img {
2242
- width: 12px;
2243
- }
2244
-
2245
- .w_file_preview .w_toLeftBox {
2246
- position: absolute;
2247
- left: 0;
2248
- top: 6px;
2249
- height: 60px;
2250
- width: 80px;
2251
- background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255,255,255,0) 100%);
2252
- z-index: 99999;
2253
- }
2254
-
2255
- .w_file_preview .w_toLeftBox .w_toLeft {
2256
- position: absolute;
2257
- cursor: pointer;
2258
- width: 18px;
2259
- height: 18px;
2260
- background: #FFFFFF;
2261
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2262
- border-radius: 5px;
2263
- border: 1px solid #F0F0F0;
2264
- z-index: 999999;
2265
- display: flex;
2266
- justify-content: center;
2267
- align-items: center;
2268
- top: 25px;
2269
- left: 5px;
2270
- }
2271
-
2272
- .w_file_preview .w_toRightBox {
2273
- position: absolute;
2274
- right: 0;
2275
- top: 6px;
2276
- height: 60px;
2277
- width: 80px;
2278
- background: linear-gradient(-90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 100%);
2279
- z-index: 99999;
2280
- }
2281
-
2282
- .w_file_preview .w_toRightBox .w_toRight {
2283
- position: absolute;
2284
- cursor: pointer;
2285
- width: 18px;
2286
- height: 18px;
2287
- background: #FFFFFF;
2288
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2289
- border-radius: 5px;
2290
- border: 1px solid #F0F0F0;
2291
- z-index: 999999;
2292
- display: flex;
2293
- justify-content: center;
2294
- align-items: center;
2295
- top: 25px;
2296
- right: 5px;
2297
- }
2298
-
2299
- .w_file_preview .w_fileBox {
2300
- position: relative;
2301
- min-width: fit-content;
2302
- background-color: #f0f0f0;
2303
- border-radius: 10px;
2304
- margin: 10px 5px;
2305
- padding: 5px;
2306
- display: flex;
2307
- }
2308
-
2309
- .w_file_preview .w_fileBox:hover .w_fileRemove {
2310
- display: block;
2311
- }
2312
-
2313
- .w_file_preview .w_fileBox .w_fileInfoBox {
2314
- width: fit-content;
2315
- margin-left: 10px;
2316
- }
2317
-
2318
- .w_file_preview .w_fileBox .w_fileInfoBox .w_fileInfoFileName {
2319
- overflow: hidden;
2320
- text-overflow: ellipsis;
2321
- white-space: nowrap;
2322
- width: 110px;
2323
- color: #242424;
2324
- user-select: none;
2325
- }
2326
-
2327
- .w_file_preview .w_fileBox .w_fileInfoBox .w_fileInfoMeta {
2328
- width: fit-content;
2329
- user-select: none;
2330
- color: #a8a8a8;
2331
- white-space: nowrap;
2332
- }
2333
-
2334
- .w_file_preview .w_fileBox .w_fileRemove {
2335
- display: none;
2336
- position: absolute;
2337
- cursor: pointer;
2338
- top: -2px;
2339
- right: 0;
2340
- z-index: 99999;
2341
- }
2342
-
2343
- .w_file_preview .w_fileBox .w_fileRemove img {
2344
- width: 20px;
2345
- }
2346
-
2347
- .w_file_preview .w_fileBox .w_upImg {
2348
- border-radius: 3px;
2349
- z-index: 510;
2350
- }
2351
-
2352
- .w_tagListClass {
2353
- width: 100%;
2354
- height: fit-content;
2355
- display: flex;
2356
- align-items: center;
2357
- padding: 8px 0 8px 10px;
2358
- flex-wrap: wrap;
2359
- gap: 8px;
2360
- }
2361
- .w_tagListClass .w_tagItemBox {
2362
- padding: 8px 12px;
2363
- display: flex;
2364
- align-items: center;
2365
- justify-content: center;
2366
- width: fit-content;
2367
- height: 30px;
2368
- background: #00000000;
2369
- border-radius: 15px;
2370
- border: 1px solid #4B4FFF;
2371
- cursor: pointer;
2372
-
2373
- }
2374
- .w_tagListClass .w_tagItemBox:hover, .w_tagListClass .w_tagItemBox:active {
2375
- background: linear-gradient( 270deg, #828EFE 0%, #4B4FFF 100%);
2376
- }
2377
- .w_tagListClass .w_tagItemBox:hover .w_tagImgh,.w_tagListClass .w_tagItemBox:active .w_tagImgh {
2378
- filter: brightness(100);
2379
- }
2380
-
2381
- .w_tagListClass .w_tagItemBox:hover .w_tagItemText, .w_tagListClass .w_tagItemBox:active .w_tagItemText {
2382
- color: #fff;
2383
- }
2384
- .w_tagListClass .w_tagItemBox .w_tagImgh{
2385
- width: 16px;
2386
- height: 16px;
2387
- }
2388
- .w_tagListClass .w_tagItemBox .w_tagItemText {
2389
- width: fit-content;
2390
- padding-top: 2px;
2391
- color: #1552FF;
2392
- font-size: 14px;
2393
- }
2394
- .w_tagListClass .w_tagItemBox .w_tagImg {
2395
- margin-left: 6px;
2396
- width: 12px;
2397
- height: 12px;
2398
- background-repeat: no-repeat;
2399
- background-size: cover;
2400
- }
2401
-
2402
- .w_inputBox {
2403
- width: calc(100% - 16px);
2404
- margin: 0 auto 8px;
2405
- display: flex;
2406
- align-items: center;
2407
- box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
2408
- border-radius: 30px;
2409
- background: #FFFFFF;
2410
- transition: height 0.2s ease;
2411
- }
2412
- .w_inputBox textarea {
2413
- resize: none;
2414
- min-height: 48px;
2415
- max-height: 96px;
2416
- border: 0;
2417
- box-shadow: none !important;
2418
- color: #333;
2419
- outline: 0;
2420
- width: 100%;
2421
-
2422
- box-sizing: border-box;
2423
- overflow-y: auto; /* 允许垂直滚动 */
2424
- scrollbar-width: none; /* Firefox */
2425
- -ms-overflow-style: none; /* IE and Edge */
2426
- border-top-left-radius: 50px;
2427
- border-bottom-left-radius: 50px;
2428
- }
2429
-
2430
- .w_inputBox textarea::-webkit-scrollbar {
2431
- display: none;
2432
- }
2433
-
2434
- .w_send_voice_box {
2435
- height: 23px;
2436
- display: flex;
2437
- background: transparent;
2438
- align-items: center;
2439
- justify-content: center;
2440
- border-radius: 24px;
2441
- font-size: 12px;
2442
- color: #666666;
2443
- cursor: pointer;
2444
- margin-right: 10px;
2445
- }
2446
-
2447
- .w_send_voice_box .w_recordIng {
2448
- padding: 4px;
2449
- background: #1552FF;
2450
- border-radius: 8px;
2451
- }
2452
- `
2453
-
2454
- return (
2455
- <div style={{ position: 'relative',height:'100%' }}>
2456
- <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style }}></style>
2457
- <ChatWindow
2458
- tags={tags}
2459
- getHistoryList={getHistoryList}
2460
- userInfo={userInfo}
2461
- clearMessage={clearMessage}
2462
- api_key={api_key}
2463
- input_type={input_type}
2464
- output_type={output_type}
2465
- output_component={output_component}
2466
- open={open}
2467
- height={height}
2468
- width={width}
2469
- send_icon_style={send_icon_style}
2470
- bot_message_style={bot_message_style}
2471
- user_message_style={user_message_style}
2472
- chat_window_style={chat_window_style}
2473
- error_message_style={error_message_style}
2474
- send_button_style={send_button_style}
2475
- placeholder={placeholder}
2476
- input_style={input_style}
2477
- online={online}
2478
- online_message={online_message}
2479
- offline_message={offline_message}
2480
- placeholder_sending={placeholder_sending}
2481
- window_title={window_title}
2482
- input_container_style={input_container_style}
2483
- tweaks={tweaks}
2484
- flowId={flow_id}
2485
- hostUrl={host_url}
2486
- updateLastMessage={updateLastMessage}
2487
- addMessage={addMessage}
2488
- messages={messages}
2489
- triggerRef={triggerRef}
2490
- position={chat_position}
2491
- sessionId={sessionId}
2492
- additional_headers={additional_headers}
2493
- setDropDownList={setDropDownList}
2494
- dropDownList={dropDownList}
2495
- baseConfig={baseConfig}
2496
- isShowUploadButton={isShowUploadButton}
2497
- dropManUrl={dropManUrl}
2498
- modalWidth={modalWidth}
2499
- />
2500
- </div>
2501
- );
2502
- }
1
+ // @ts-nocheck
2
+ import { useRef, useState } from 'react';
3
+ import ChatWindow from './chatWindow';
4
+ import { ChatMessageType } from './chatWindow/types/chatWidget';
5
+
6
+ export default function ChatWidget({
7
+ tags,
8
+ getHistoryList,
9
+ userInfo,
10
+ api_key,
11
+ output_type = 'chat',
12
+ input_type = 'chat',
13
+ output_component,
14
+ host_url,
15
+ flow_id,
16
+ tweaks,
17
+ send_icon_style,
18
+ bot_message_style,
19
+ user_message_style,
20
+ chat_window_style,
21
+ height,
22
+ width,
23
+ error_message_style,
24
+ send_button_style,
25
+ online,
26
+ online_message,
27
+ offline_message,
28
+ window_title,
29
+ chat_position,
30
+ placeholder,
31
+ input_style,
32
+ placeholder_sending,
33
+ input_container_style,
34
+ additional_headers,
35
+ session_id,
36
+ start_open = false,
37
+ setDropDownList,
38
+ dropDownList,
39
+ baseConfig,
40
+ isShowVoiceButton,
41
+ isShowUploadButton,
42
+ dropManUrl,
43
+ modalWidth,
44
+ isMobile = false,
45
+ isShowChatHeader = true,
46
+ }: {
47
+ tags: [];
48
+ getHistoryList: Function;
49
+ userInfo: object;
50
+ api_key?: string;
51
+ input_value: string;
52
+ output_type: string;
53
+ input_type: string;
54
+ output_component?: string;
55
+ send_icon_style?: React.CSSProperties;
56
+ chat_position?: string;
57
+ bot_message_style?: React.CSSProperties;
58
+ user_message_style?: React.CSSProperties;
59
+ chat_window_style?: React.CSSProperties;
60
+ online?: boolean;
61
+ online_message?: string;
62
+ offline_message?: string;
63
+ height?: string;
64
+ width?: number;
65
+ window_title?: string;
66
+ error_message_style?: React.CSSProperties;
67
+ send_button_style?: React.CSSProperties;
68
+ placeholder_sending?: string;
69
+ placeholder?: string;
70
+ input_style?: React.CSSProperties;
71
+ input_container_style?: React.CSSProperties;
72
+ host_url: string;
73
+ flow_id: string;
74
+ tweaks?: { [key: string]: any };
75
+ additional_headers?: { [key: string]: string };
76
+ session_id?: string;
77
+ start_open?: boolean;
78
+ baseConfig:object;
79
+ isShowVoiceButton:boolean;
80
+ isShowUploadButton:boolean;
81
+ dropManUrl: string;
82
+ modalWidth: number;
83
+ isMobile: boolean;
84
+ isShowChatHeader: boolean;
85
+ }) {
86
+ const [open, setOpen] = useState(start_open);
87
+ const [messages, setMessages] = useState<ChatMessageType[]>([]);
88
+ const sessionId = session_id;
89
+
90
+ function updateLastMessage(message: ChatMessageType) {
91
+ setMessages((prev) => {
92
+ prev[prev.length - 1] = message;
93
+ return [...prev];
94
+ });
95
+ }
96
+
97
+ function addMessage(message: ChatMessageType) {
98
+ setMessages((prev) => [...prev, message]);
99
+ }
100
+
101
+ function clearMessage() {
102
+ setMessages([]);
103
+ }
104
+
105
+ const triggerRef = useRef<HTMLButtonElement>(null);
106
+
107
+ const styles = `
108
+
109
+ *,
110
+ ::before,
111
+ ::after {
112
+ box-sizing: border-box;
113
+ border-width: 0;
114
+ border-style: solid;
115
+ border-color: #e5e7eb;
116
+ }
117
+
118
+ abbr:where([title]) {
119
+ -webkit-text-decoration: underline dotted;
120
+ text-decoration: underline dotted;
121
+ }
122
+
123
+ b,
124
+ strong {
125
+ font-weight: bolder;
126
+ }
127
+
128
+ code,
129
+ kbd,
130
+ samp,
131
+ pre {
132
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
133
+ /* 1 */
134
+ font-size: 1em;
135
+ /* 2 */
136
+ }
137
+
138
+ small {
139
+ font-size: 80%;
140
+ }
141
+
142
+ sub,
143
+ sup {
144
+ font-size: 75%;
145
+ line-height: 0;
146
+ position: relative;
147
+ vertical-align: baseline;
148
+ }
149
+
150
+ sub {
151
+ bottom: -0.25em;
152
+ }
153
+
154
+ sup {
155
+ top: -0.5em;
156
+ }
157
+
158
+ button,
159
+ input,
160
+ optgroup,
161
+ select,
162
+ textarea {
163
+ font-family: inherit;
164
+ /* 1 */
165
+ font-size: 100%;
166
+ /* 1 */
167
+ font-weight: inherit;
168
+ /* 1 */
169
+ line-height: inherit;
170
+ /* 1 */
171
+ color: inherit;
172
+ /* 1 */
173
+ margin: 0;
174
+ /* 2 */
175
+ padding: 0;
176
+ /* 3 */
177
+ }
178
+
179
+ /*
180
+ Remove the inheritance of text transform in Edge and Firefox.
181
+ */
182
+
183
+ button,
184
+ select {
185
+ text-transform: none;
186
+ }
187
+
188
+ /*
189
+ 1. Correct the inability to style clickable types in iOS and Safari.
190
+ 2. Remove default button styles.
191
+ */
192
+
193
+ button,
194
+ [type='button'],
195
+ [type='reset'],
196
+ [type='submit'] {
197
+ -webkit-appearance: button;
198
+ /* 1 */
199
+ // background-color: transparent;
200
+ /* 2 */
201
+ background-image: none;
202
+ /* 2 */
203
+ }
204
+
205
+ /*
206
+ Use the modern Firefox focus style for all focusable elements.
207
+ */
208
+
209
+ :-moz-focusring {
210
+ outline: auto;
211
+ }
212
+
213
+ /*
214
+ Remove the additional ':invalid' styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
215
+ */
216
+
217
+ :-moz-ui-invalid {
218
+ box-shadow: none;
219
+ }
220
+
221
+ /*
222
+ Add the correct vertical alignment in Chrome and Firefox.
223
+ */
224
+
225
+ progress {
226
+ vertical-align: baseline;
227
+ }
228
+
229
+ /*
230
+ Correct the cursor style of increment and decrement buttons in Safari.
231
+ */
232
+
233
+ ::-webkit-inner-spin-button,
234
+ ::-webkit-outer-spin-button {
235
+ height: auto;
236
+ }
237
+
238
+ /*
239
+ 1. Correct the odd appearance in Chrome and Safari.
240
+ 2. Correct the outline style in Safari.
241
+ */
242
+
243
+ [type='search'] {
244
+ -webkit-appearance: textfield;
245
+ /* 1 */
246
+ outline-offset: -2px;
247
+ /* 2 */
248
+ }
249
+
250
+ /*
251
+ Remove the inner padding in Chrome and Safari on macOS.
252
+ */
253
+
254
+ ::-webkit-search-decoration {
255
+ -webkit-appearance: none;
256
+ }
257
+
258
+ /*
259
+ 1. Correct the inability to style clickable types in iOS and Safari.
260
+ 2. Change font properties to 'inherit' in Safari.
261
+ */
262
+
263
+ ::-webkit-file-upload-button {
264
+ -webkit-appearance: button;
265
+ /* 1 */
266
+ font: inherit;
267
+ /* 2 */
268
+ }
269
+
270
+ /*
271
+ Add the correct display in Chrome and Safari.
272
+ */
273
+
274
+ summary {
275
+ display: list-item;
276
+ }
277
+
278
+ /*
279
+ Removes the default spacing and border for appropriate elements.
280
+ */
281
+
282
+ fieldset {
283
+ margin: 0;
284
+ padding: 0;
285
+ }
286
+
287
+ legend {
288
+ padding: 0;
289
+ }
290
+
291
+
292
+ /*
293
+ Prevent resizing textareas horizontally by default.
294
+ */
295
+
296
+ textarea {
297
+ resize: vertical;
298
+ }
299
+
300
+ /*
301
+ 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
302
+ 2. Set the default placeholder color to the user's configured gray 400 color.
303
+ */
304
+
305
+ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
306
+ opacity: 1;
307
+ /* 1 */
308
+ color: #9ca3af;
309
+ /* 2 */
310
+ }
311
+
312
+ input::placeholder,
313
+ textarea::placeholder {
314
+ opacity: 1;
315
+ /* 1 */
316
+ color: #9ca3af;
317
+ /* 2 */
318
+ }
319
+
320
+ /*
321
+ Set the default cursor for buttons.
322
+ */
323
+
324
+ button,
325
+ [role="button"] {
326
+ cursor: pointer;
327
+ }
328
+
329
+ /*
330
+ Make sure disabled buttons don't get the pointer cursor.
331
+ */
332
+
333
+ :disabled {
334
+ cursor: default;
335
+ }
336
+
337
+ /*
338
+ 1. Make replaced elements 'display: block' by default. (https://github.com/mozdevs/cssremedy/issues/14)
339
+ 2. Add 'vertical-align: middle' to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
340
+ This can trigger a poorly considered lint error in some tools but is included by design.
341
+ */
342
+
343
+
344
+ /*
345
+ Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
346
+ */
347
+
348
+ img,
349
+ video {
350
+ max-width: 100%;
351
+ height: auto;
352
+ }
353
+
354
+ /* Make elements with the HTML hidden attribute stay hidden by default */
355
+
356
+ [hidden] {
357
+ display: none;
358
+ }
359
+
360
+ .cl-window {
361
+ border-radius: 1rem;
362
+ padding-top: 1.8rem;
363
+ padding-bottom: 1.2rem;
364
+ }
365
+
366
+ .cl-middle-container{
367
+ height:100%;
368
+ display: flex;
369
+ flex-direction: column;
370
+ overflow: hidden;
371
+ border-left:0.5px solid #3850FF2E;
372
+ border-right:0.5px solid #3850FF2E;
373
+ padding-left:1.6rem;
374
+ padding-right:1.6rem;
375
+ }
376
+
377
+
378
+ .cl-scale-100 {
379
+ --tw-scale-x: 1;
380
+ --tw-scale-y: 1;
381
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
382
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
383
+ }
384
+
385
+ .cl-scale-0 {
386
+ --tw-scale-x: 0;
387
+ --tw-scale-y: 0;
388
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
389
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
390
+ }
391
+
392
+
393
+ .cl-chat-window {
394
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
395
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
396
+ sans-serif;
397
+ position: absolute;
398
+ transition-property: all;
399
+ transition-duration: 300ms;
400
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
401
+ }
402
+
403
+ .cl-online-message {
404
+ height: 0.5rem;
405
+ width: 0.5rem;
406
+ border-radius: 9999px;
407
+ --tw-bg-opacity: 1;
408
+ background-color: rgb(34 197 94 / var(--tw-bg-opacity));
409
+ }
410
+
411
+ .cl-offline-message {
412
+ height: 0.5rem;
413
+ width: 0.5rem;
414
+ border-radius: 9999px;
415
+ --tw-bg-opacity: 1;
416
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
417
+ }
418
+
419
+ .cl-send-icon {
420
+ margin-right: 1.25rem;
421
+ height: 1.5rem;
422
+ width: 1.5rem;
423
+ }
424
+
425
+ .cl-notsending-message {
426
+ stroke: #3b82f6;
427
+ }
428
+
429
+ .cl-notsending-message:hover {
430
+ stroke: #60a5fa;
431
+ }
432
+
433
+ .cl-sending-message {
434
+ stroke: #9ca3af;
435
+ }
436
+
437
+ .cl-header-subtitle {
438
+ display: flex;
439
+ align-items: center;
440
+ gap: 0.5rem;
441
+ font-size: 0.875rem;
442
+ line-height: 1.25rem;
443
+ font-weight: 300;
444
+ color: rgb(107 114 128);
445
+ }
446
+
447
+ .cl-header {
448
+ position:relative;
449
+ display: flex;
450
+ flex-direction: column;
451
+ --tw-bg-opacity: 1;
452
+ font-size: 1.125rem;
453
+ line-height: 1.75rem;
454
+ font-weight: 400;
455
+ color: rgb(17 24 39);
456
+ }
457
+
458
+ .cl-header .header-title{
459
+ display: flex;
460
+ align-items: center;
461
+ margin-bottom: 16px;
462
+ font-size: 22px;
463
+ font-weight: 600;
464
+ }
465
+
466
+ .cl-header .diamond {
467
+ position: relative;
468
+ display: inline-block;
469
+ width: 20px;
470
+ height: 20px;
471
+ }
472
+
473
+ .cl-header .diamond::before {
474
+ content: '';
475
+ position: absolute;
476
+ top: 5px;
477
+ left: 0;
478
+ width: 10px;
479
+ height: 10px;
480
+ background-color: blue;
481
+ transform: rotate(45deg);
482
+ border-radius: 3px;
483
+ }
484
+
485
+ .cl-tips-wrapper {
486
+ width:100%;
487
+ display:flex;
488
+ margin-top:0.81rem;
489
+ flex-direction: row;
490
+ position: relative;
491
+ padding-bottom: 100px;
492
+ z-index: 1;
493
+ }
494
+
495
+ .cl-tips-wrapper .drop-man-img {
496
+ width: 35%;
497
+ }
498
+ .cl-tips-wrapper .drop-down-title {
499
+ margin-top: 45px;
500
+ font-family: PingFangSC, PingFang SC;
501
+ font-weight: 500;
502
+ font-size: 18px;
503
+ color: #333333;
504
+ line-height: 28px;
505
+ text-align: left;
506
+ font-style: normal;
507
+ > div {
508
+ margin-top: 15px;
509
+ font-size: 12px;
510
+ color: # 999;
511
+ }
512
+ }
513
+
514
+ .cl-tips-wrapper .cl-drop-down-mobile {
515
+ position: absolute;
516
+ width:100%;
517
+ top: 120px;
518
+ }
519
+
520
+ .cl-tips-wrapper .drop-down-list-mobile {
521
+ display: flex;
522
+ flex-direction: column;
523
+ margin-top: 2rem;
524
+ width:100%;
525
+ align-items: end;
526
+ }
527
+
528
+ .drop-down-item-card-mobile {
529
+ width: 85%;
530
+ height: 3.4rem;
531
+ padding: 0 0.6rem 0;
532
+ border-radius:20px;
533
+ border-top-left-radius: 0;
534
+ background: url("https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-bg.png");
535
+ background-size: cover;
536
+ background-position: center;
537
+ background-repeat: no-repeat;
538
+ margin-bottom: 20px;
539
+
540
+ display:flex;
541
+ align-items: center;
542
+ }
543
+ .drop-down-item-title-mobile {
544
+ font-family: PingFangSC, PingFang SC;
545
+ font-weight: 400;
546
+ font-size: 13px;
547
+ color: #000000;
548
+ line-height: 17px;
549
+ text-align: left;
550
+ font-style: normal;
551
+ width: 100%;
552
+ margin-bottom:0 !important;
553
+ }
554
+
555
+ .drop-down-item-bottom-img-mobile{
556
+ width:3.5rem;
557
+ height:2.5rem;
558
+ }
559
+
560
+ .cl-drop-man{
561
+ width:100%;
562
+ display:flex;
563
+ margin-top:0.81rem;
564
+ }
565
+ .cl-drop-man .drop-man-img{
566
+ height:340px;
567
+ margin-right: 4rem;
568
+ margin-left: 3rem;
569
+ }
570
+
571
+ .cl-drop-man .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
572
+ height:3.4rem;
573
+ margin-right:20px;
574
+ }
575
+
576
+ .cl-drop-man .drop-down-list{
577
+ width:auto;
578
+ display:flex;
579
+ flex-direction:row;
580
+ flex-wrap:wrap;
581
+ }
582
+
583
+ .cl-drop-man .cl-drop-down .drop-down-item-card{
584
+ width:calc(50% - 0.65rem);
585
+ }
586
+
587
+ .cl-drop-man .cl-drop-down{
588
+ flex:1;
589
+ position:unset;
590
+ border-bottom-left-radius: 0;
591
+ }
592
+
593
+ .cl-drop-horizontal{
594
+ width:100%;
595
+ display:flex;
596
+ margin-top:0.81rem;
597
+ }
598
+
599
+ .cl-drop-horizontal .drop-man-img{
600
+ height:340px;
601
+ margin-right: 4rem;
602
+ margin-left: 3rem;
603
+ }
604
+
605
+ .cl-drop-horizontal .drop-down-list{
606
+ width:auto;
607
+ display:flex;
608
+ flex-direction:row;
609
+ flex-wrap:wrap;
610
+ }
611
+
612
+ .cl-drop-horizontal .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
613
+ height:2.4rem;
614
+ width:auto;
615
+ margin-right:20px;
616
+ }
617
+
618
+ .cl-drop-horizontal .cl-drop-down{
619
+ flex:1;
620
+ position:unset;
621
+ border-bottom-left-radius: 0;
622
+ }
623
+
624
+ .cl-drop-horizontal .cl-drop-down .drop-down-item-card{
625
+ width:100%;
626
+ height:unset;
627
+ justify-content:unset;
628
+ flex-direction:row;
629
+ align-items: center;
630
+ padding: 0.8rem 1.2rem 0.8rem;
631
+ cursor:pointer;
632
+ }
633
+
634
+ .cl-drop-horizontal .drop-down-item-bottom-button{
635
+ display:none;
636
+ }
637
+
638
+ .cl-drop-screen{
639
+ width:100%;
640
+ display:flex;
641
+ margin-top:0.81rem;
642
+ align-items: flex-start;
643
+ }
644
+
645
+ .cl-drop-screen .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
646
+ height:2.4rem;
647
+ width:auto;
648
+ margin-right:20px;
649
+ }
650
+
651
+ .cl-drop-screen .drop-man-img{
652
+ height:340px;
653
+ margin-right: 4rem;
654
+ margin-left: 3rem;
655
+ }
656
+
657
+ .cl-drop-screen .cl-drop-down{
658
+ flex:1;
659
+ position:unset;
660
+ border-bottom-left-radius: 0;
661
+ }
662
+
663
+ .cl-drop-screen .cl-drop-down .drop-down-item-card{
664
+ width:calc(33% - 0.65rem);
665
+ }
666
+
667
+ .cl-drop-down {
668
+ background: #FFFFFF;
669
+ border-radius: 10px;
670
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
671
+ z-index: 1;
672
+ width: 100%;
673
+ min-height: 50px;
674
+ position: absolute;
675
+ bottom: -14.7rem;
676
+ padding:1.3rem;
677
+ }
678
+
679
+ .drop-down-title {
680
+ font-weight: 500;
681
+ font-size: 18px;
682
+ color: #000000;
683
+ line-height: 1.1;
684
+ text-align: left;
685
+ }
686
+ .drop-down-list {
687
+ display:flex;
688
+ gap:1.3rem;
689
+ margin-top:2rem;
690
+ }
691
+ .drop-down-item-card {
692
+ width: 33%;
693
+ padding: 1.2rem 1.2rem 0.3rem;
694
+ height:7.5rem;
695
+ font-weight: 400;
696
+ font-size: 14px;
697
+ color: #FFFFFF;
698
+ line-height: 14px;
699
+ text-align: left;
700
+ border-radius:10px;
701
+ background: url("https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-bg.png");
702
+ background-size: cover;
703
+ background-position: center;
704
+ background-repeat: no-repeat;
705
+
706
+ display:flex;
707
+ justify-content: space-between;
708
+ flex-direction: column;
709
+ }
710
+ .drop-down-item-title {
711
+ font-weight: 400;
712
+ font-size: 16px;
713
+ color: #000000;
714
+ line-height: 20px;
715
+ text-align: left;
716
+ width: 100%;
717
+ margin-bottom:0 !important;
718
+ }
719
+ .drop-down-item-bottom{
720
+ display:flex;
721
+ align-items: center;
722
+ justify-content: space-between;
723
+ flex-direction: row;
724
+ // margin-top:1rem;
725
+ align-items: center;
726
+ }
727
+
728
+ .drop-down-item-bottom-button{
729
+ border-radius: 16px;
730
+ line-height: 20px;
731
+ text-align: left;
732
+ width: 2rem;
733
+ padding: 0.2rem 0.4rem 0.2rem 0.2rem;
734
+ cursor: pointer;
735
+ display: flex;
736
+ justify-content: center;
737
+ align-items: center
738
+ }
739
+
740
+ .drop-down-item-bottom-img{
741
+ width:4rem;
742
+ height:3.5rem;
743
+ }
744
+
745
+ @media screen and (max-width: 1000px){
746
+ .drop-down-item-bottom-img {
747
+ display:none;
748
+ }
749
+ .drop-down-item-bottom {
750
+
751
+ margin-bottom:1rem;
752
+ }
753
+ }
754
+
755
+ .cl-messages_container {
756
+ position: relative;
757
+ display: flex;
758
+ height: 100%;
759
+ flex-direction: column;
760
+ overflow: scroll;
761
+ overflow-x: clip;
762
+ --tw-bg-opacity: 1;
763
+ padding-left: 1rem;
764
+ padding-right: 1rem;
765
+ padding-top: 0.5rem;
766
+ padding-bottom: 0.5rem;
767
+ -ms-overflow-style: none;
768
+ scrollbar-width: none;
769
+ }
770
+
771
+ .cl-messages_container::-webkit-scrollbar {
772
+ display: none;
773
+ }
774
+
775
+ .cl-input_container {
776
+ position: relative;
777
+ display: flex;
778
+ flex-direction: column;
779
+ width: 100%;
780
+ align-items: center;
781
+ --tw-border-opacity: 1;
782
+ --tw-bg-opacity: 1;
783
+ border-top-right-radius: 50px;
784
+ border-bottom-right-radius: 50px;
785
+ }
786
+
787
+ .cl-chat-message {
788
+ display: flex;
789
+ width: 100%;
790
+ padding-top: 0.5rem;
791
+ padding-bottom: 0.5rem;
792
+ padding-left: 0.5rem;
793
+ padding-right: 0.5rem;
794
+ }
795
+
796
+ @-webkit-keyframes pulse {
797
+ 50% {
798
+ opacity: .5;
799
+ }
800
+ }
801
+
802
+ @keyframes pulse {
803
+ 50% {
804
+ opacity: .5;
805
+ }
806
+ }
807
+
808
+ .cl-animate-pulse {
809
+ -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
810
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
811
+ }
812
+
813
+ .cl-justify-start {
814
+ justify-content: flex-start;
815
+ }
816
+
817
+ .cl-justify-end {
818
+ justify-content: flex-end;
819
+ }
820
+
821
+ .cl-input-element {
822
+ height: 100%;
823
+ width: 100%;
824
+ padding-left: 1.25rem;
825
+ padding-right: 1.25rem;
826
+ padding-top: 0.25rem;
827
+ padding-bottom: 0.25rem;
828
+ font-weight: 300;
829
+ background-color: #FFFFFF;
830
+ color: rgb(17 24 39);
831
+ border-top-left-radius: 50px;
832
+ border-bottom-left-radius: 50px;
833
+ transition: height 0.2s ease;
834
+ }
835
+ .cl-input-element::-webkit-scrollbar{
836
+ width: 0 !important;
837
+ }
838
+
839
+ .cl-input-element::placeholder {
840
+ line-height:45px;
841
+ }
842
+
843
+ .cl-input-element:focus {
844
+ outline: 2px solid transparent;
845
+ outline-offset: 2px;
846
+ }
847
+
848
+ .cl-input-element:focus::placeholder {
849
+ line-height:unset;
850
+ }
851
+
852
+ .cl-user_message {
853
+ width: -webkit-fit-content;
854
+ width: -moz-fit-content;
855
+ width: fit-content;
856
+ -webkit-column-break-before: all;
857
+ break-before: all;
858
+ border-radius: 0.75rem;
859
+ border-top-right-radius: 0.125rem;
860
+ --tw-bg-opacity: 1;
861
+ background-color: rgb(59 130 246 / var(--tw-bg-opacity));
862
+ padding-left: 1rem;
863
+ padding-right: 1rem;
864
+ padding-top: 0.5rem;
865
+ padding-bottom: 0.5rem;
866
+ text-align: left;
867
+ --tw-text-opacity: 1;
868
+ color: rgb(255 255 255 / var(--tw-text-opacity));
869
+ white-space: pre-line;
870
+ }
871
+
872
+ .cl-error_message {
873
+ width: -webkit-fit-content;
874
+ width: -moz-fit-content;
875
+ width: fit-content;
876
+ max-width: 90%;
877
+ -webkit-column-break-before: all;
878
+ break-before: all;
879
+ border-radius: 0.75rem;
880
+ border-top-left-radius: 0.125rem;
881
+ --tw-bg-opacity: 1;
882
+ background-color: rgb(248 113 113 / var(--tw-bg-opacity));
883
+ padding-left: 1rem;
884
+ padding-right: 1rem;
885
+ padding-top: 0.5rem;
886
+ padding-bottom: 0.5rem;
887
+ text-align: left;
888
+ --tw-text-opacity: 1;
889
+ color: rgb(255 255 255 / var(--tw-text-opacity));
890
+ }
891
+
892
+ .cl-bot_message {
893
+ width: -webkit-fit-content;
894
+ width: -moz-fit-content;
895
+ width: fit-content;
896
+ max-width: 90%;
897
+ -webkit-column-break-before: all;
898
+ break-before: all;
899
+ border-radius: 0.75rem;
900
+ border-top-left-radius: 0.125rem;
901
+ --tw-bg-opacity: 1;
902
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
903
+ padding-left: 1rem;
904
+ padding-right: 1rem;
905
+ padding-top: 0.5rem;
906
+ padding-bottom: 0.5rem;
907
+ text-align: left;
908
+ --tw-text-opacity: 1;
909
+ color: rgb(31 41 55 / var(--tw-text-opacity));
910
+ }
911
+
912
+ .origin-bottom {
913
+ -webkit-transform-origin: bottom;
914
+ transform-origin: bottom;
915
+ }
916
+
917
+ .origin-bottom-left {
918
+ -webkit-transform-origin: bottom left;
919
+ transform-origin: bottom left;
920
+ }
921
+
922
+ .origin-bottom-right {
923
+ -webkit-transform-origin: bottom right;
924
+ transform-origin: bottom right;
925
+ }
926
+
927
+ .origin-center {
928
+ -webkit-transform-origin: center;
929
+ transform-origin: center;
930
+ }
931
+
932
+ .origin-top {
933
+ -webkit-transform-origin: top;
934
+ transform-origin: top;
935
+ }
936
+
937
+ .origin-top-left {
938
+ -webkit-transform-origin: top left;
939
+ transform-origin: top left;
940
+ }
941
+
942
+ .origin-top-right {
943
+ -webkit-transform-origin: top right;
944
+ transform-origin: top right;
945
+ }
946
+
947
+ .shadow {
948
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
949
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
950
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
951
+ }
952
+ input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
953
+ color: rgb(156 163 175);
954
+ opacity: 1; /* Firefox */
955
+ }
956
+
957
+ input:-ms-input-placeholder { /* Internet Explorer 10-11 */
958
+ color: rgb(156 163 175);
959
+ }
960
+
961
+ input::-ms-input-placeholder { /* Microsoft Edge */
962
+ color: rgb(156 163 175);
963
+ }
964
+ `;
965
+
966
+ const markdownBody = `
967
+
968
+ .markdown-body {
969
+ --base-size-4: 0.25rem;
970
+ --base-size-8: 0.5rem;
971
+ --base-size-16: 1rem;
972
+ --base-text-weight-normal: 400;
973
+ --base-text-weight-medium: 500;
974
+ --base-text-weight-semibold: 600;
975
+ --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
976
+ }
977
+
978
+ @media (prefers-color-scheme: dark) {
979
+ .markdown-body,
980
+ [data-theme="dark"] {
981
+ /*dark*/
982
+ color-scheme: dark;
983
+ --focus-outlineColor: #1f6feb;
984
+ --fgColor-default: #e6edf3;
985
+ --fgColor-muted: #8d96a0;
986
+ --fgColor-accent: #4493f8;
987
+ --fgColor-success: #3fb950;
988
+ --fgColor-attention: #d29922;
989
+ --fgColor-danger: #f85149;
990
+ --fgColor-done: #ab7df8;
991
+ --bgColor-default: #0d1117;
992
+ --bgColor-muted: #161b22;
993
+ --bgColor-neutral-muted: #6e768166;
994
+ --bgColor-attention-muted: #bb800926;
995
+ --borderColor-default: #30363d;
996
+ --borderColor-muted: #30363db3;
997
+ --borderColor-neutral-muted: #6e768166;
998
+ --borderColor-accent-emphasis: #1f6feb;
999
+ --borderColor-success-emphasis: #238636;
1000
+ --borderColor-attention-emphasis: #9e6a03;
1001
+ --borderColor-danger-emphasis: #da3633;
1002
+ --borderColor-done-emphasis: #8957e5;
1003
+ --color-prettylights-syntax-comment: #8b949e;
1004
+ --color-prettylights-syntax-constant: #79c0ff;
1005
+ --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
1006
+ --color-prettylights-syntax-entity: #d2a8ff;
1007
+ --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
1008
+ --color-prettylights-syntax-entity-tag: #7ee787;
1009
+ --color-prettylights-syntax-keyword: #ff7b72;
1010
+ --color-prettylights-syntax-string: #a5d6ff;
1011
+ --color-prettylights-syntax-variable: #ffa657;
1012
+ --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
1013
+ --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
1014
+ --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
1015
+ --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
1016
+ --color-prettylights-syntax-carriage-return-text: #f0f6fc;
1017
+ --color-prettylights-syntax-carriage-return-bg: #b62324;
1018
+ --color-prettylights-syntax-string-regexp: #7ee787;
1019
+ --color-prettylights-syntax-markup-list: #f2cc60;
1020
+ --color-prettylights-syntax-markup-heading: #1f6feb;
1021
+ --color-prettylights-syntax-markup-italic: #c9d1d9;
1022
+ --color-prettylights-syntax-markup-bold: #c9d1d9;
1023
+ --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
1024
+ --color-prettylights-syntax-markup-deleted-bg: #67060c;
1025
+ --color-prettylights-syntax-markup-inserted-text: #aff5b4;
1026
+ --color-prettylights-syntax-markup-inserted-bg: #033a16;
1027
+ --color-prettylights-syntax-markup-changed-text: #ffdfb6;
1028
+ --color-prettylights-syntax-markup-changed-bg: #5a1e02;
1029
+ --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
1030
+ --color-prettylights-syntax-markup-ignored-bg: #1158c7;
1031
+ --color-prettylights-syntax-meta-diff-range: #d2a8ff;
1032
+ --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
1033
+ }
1034
+ }
1035
+
1036
+ @media (prefers-color-scheme: light) {
1037
+ .markdown-body,
1038
+ [data-theme="light"] {
1039
+ /*light*/
1040
+ color-scheme: light;
1041
+ --focus-outlineColor: #0969da;
1042
+ --fgColor-default: #1f2328;
1043
+ --fgColor-muted: #636c76;
1044
+ --fgColor-accent: #0969da;
1045
+ --fgColor-success: #1a7f37;
1046
+ --fgColor-attention: #9a6700;
1047
+ --fgColor-danger: #d1242f;
1048
+ --fgColor-done: #8250df;
1049
+ --bgColor-default: #ffffff;
1050
+ --bgColor-muted: #f6f8fa;
1051
+ --bgColor-neutral-muted: #afb8c133;
1052
+ --bgColor-attention-muted: #fff8c5;
1053
+ --borderColor-default: #d0d7de;
1054
+ --borderColor-muted: #d0d7deb3;
1055
+ --borderColor-neutral-muted: #afb8c133;
1056
+ --borderColor-accent-emphasis: #0969da;
1057
+ --borderColor-success-emphasis: #1a7f37;
1058
+ --borderColor-attention-emphasis: #bf8700;
1059
+ --borderColor-danger-emphasis: #cf222e;
1060
+ --borderColor-done-emphasis: #8250df;
1061
+ --color-prettylights-syntax-comment: #57606a;
1062
+ --color-prettylights-syntax-constant: #0550ae;
1063
+ --color-prettylights-syntax-constant-other-reference-link: #0a3069;
1064
+ --color-prettylights-syntax-entity: #6639ba;
1065
+ --color-prettylights-syntax-storage-modifier-import: #24292f;
1066
+ --color-prettylights-syntax-entity-tag: #0550ae;
1067
+ --color-prettylights-syntax-keyword: #cf222e;
1068
+ --color-prettylights-syntax-string: #0a3069;
1069
+ --color-prettylights-syntax-variable: #953800;
1070
+ --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
1071
+ --color-prettylights-syntax-brackethighlighter-angle: #57606a;
1072
+ --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
1073
+ --color-prettylights-syntax-invalid-illegal-bg: #82071e;
1074
+ --color-prettylights-syntax-carriage-return-text: #f6f8fa;
1075
+ --color-prettylights-syntax-carriage-return-bg: #cf222e;
1076
+ --color-prettylights-syntax-string-regexp: #116329;
1077
+ --color-prettylights-syntax-markup-list: #3b2300;
1078
+ --color-prettylights-syntax-markup-heading: #0550ae;
1079
+ --color-prettylights-syntax-markup-italic: #24292f;
1080
+ --color-prettylights-syntax-markup-bold: #24292f;
1081
+ --color-prettylights-syntax-markup-deleted-text: #82071e;
1082
+ --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
1083
+ --color-prettylights-syntax-markup-inserted-text: #116329;
1084
+ --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
1085
+ --color-prettylights-syntax-markup-changed-text: #953800;
1086
+ --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
1087
+ --color-prettylights-syntax-markup-ignored-text: #eaeef2;
1088
+ --color-prettylights-syntax-markup-ignored-bg: #0550ae;
1089
+ --color-prettylights-syntax-meta-diff-range: #8250df;
1090
+ --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
1091
+ }
1092
+ }
1093
+
1094
+ .markdown-body {
1095
+ -ms-text-size-adjust: 100%;
1096
+ -webkit-text-size-adjust: 100%;
1097
+ margin: 0;
1098
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
1099
+ font-size: 16px;
1100
+ line-height: 1.5;
1101
+ word-wrap: break-word;
1102
+ scroll-behavior: auto;
1103
+ }
1104
+
1105
+ .markdown-body .octicon {
1106
+ display: inline-block;
1107
+ fill: currentColor;
1108
+ vertical-align: text-bottom;
1109
+ }
1110
+
1111
+ .markdown-body h1:hover .anchor .octicon-link:before,
1112
+ .markdown-body h2:hover .anchor .octicon-link:before,
1113
+ .markdown-body h3:hover .anchor .octicon-link:before,
1114
+ .markdown-body h4:hover .anchor .octicon-link:before,
1115
+ .markdown-body h5:hover .anchor .octicon-link:before,
1116
+ .markdown-body h6:hover .anchor .octicon-link:before {
1117
+ width: 16px;
1118
+ height: 16px;
1119
+ content: ' ';
1120
+ display: inline-block;
1121
+ background-color: currentColor;
1122
+ -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
1123
+ mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
1124
+ }
1125
+
1126
+ .markdown-body details,
1127
+ .markdown-body figcaption,
1128
+ .markdown-body figure {
1129
+ display: block;
1130
+ }
1131
+
1132
+ .markdown-body summary {
1133
+ display: list-item;
1134
+ }
1135
+
1136
+ .markdown-body [hidden] {
1137
+ display: none !important;
1138
+ }
1139
+
1140
+ .markdown-body a {
1141
+ background-color: transparent;
1142
+ color: var(--fgColor-accent);
1143
+ text-decoration: none;
1144
+ }
1145
+
1146
+ .markdown-body abbr[title] {
1147
+ border-bottom: none;
1148
+ -webkit-text-decoration: underline dotted;
1149
+ text-decoration: underline dotted;
1150
+ }
1151
+
1152
+ .markdown-body b,
1153
+ .markdown-body strong {
1154
+ font-weight: var(--base-text-weight-semibold, 600);
1155
+ }
1156
+
1157
+ .markdown-body dfn {
1158
+ font-style: italic;
1159
+ }
1160
+
1161
+ .markdown-body h1 {
1162
+ margin: .67em 0;
1163
+ font-weight: var(--base-text-weight-semibold, 600);
1164
+ padding-bottom: .3em;
1165
+ font-size: 2em;
1166
+ border-bottom: 1px solid var(--borderColor-muted);
1167
+ }
1168
+
1169
+ .markdown-body mark {
1170
+ background-color: var(--bgColor-attention-muted);
1171
+ color: var(--fgColor-default);
1172
+ }
1173
+
1174
+ .markdown-body small {
1175
+ font-size: 90%;
1176
+ }
1177
+
1178
+ .markdown-body sub,
1179
+ .markdown-body sup {
1180
+ font-size: 75%;
1181
+ line-height: 0;
1182
+ position: relative;
1183
+ vertical-align: baseline;
1184
+ }
1185
+
1186
+ .markdown-body sub {
1187
+ bottom: -0.25em;
1188
+ }
1189
+
1190
+ .markdown-body sup {
1191
+ top: -0.5em;
1192
+ }
1193
+
1194
+ .markdown-body img {
1195
+ border-style: none;
1196
+ max-width: 100%;
1197
+ box-sizing: content-box;
1198
+ }
1199
+
1200
+ .markdown-body code,
1201
+ .markdown-body kbd,
1202
+ .markdown-body pre,
1203
+ .markdown-body samp {
1204
+ font-family: monospace;
1205
+ font-size: 1em;
1206
+ }
1207
+
1208
+ .markdown-body figure {
1209
+ margin: 1em 40px;
1210
+ }
1211
+
1212
+ .markdown-body hr {
1213
+ box-sizing: content-box;
1214
+ overflow: hidden;
1215
+ background: transparent;
1216
+ border-bottom: 1px solid var(--borderColor-muted);
1217
+ height: .25em;
1218
+ padding: 0;
1219
+ margin: 24px 0;
1220
+ background-color: var(--borderColor-default);
1221
+ border: 0;
1222
+ }
1223
+
1224
+ .markdown-body input {
1225
+ font: inherit;
1226
+ margin: 0;
1227
+ overflow: visible;
1228
+ font-family: inherit;
1229
+ font-size: inherit;
1230
+ line-height: inherit;
1231
+ }
1232
+
1233
+ .markdown-body [type=button],
1234
+ .markdown-body [type=reset],
1235
+ .markdown-body [type=submit] {
1236
+ -webkit-appearance: button;
1237
+ appearance: button;
1238
+ }
1239
+
1240
+ .markdown-body [type=checkbox],
1241
+ .markdown-body [type=radio] {
1242
+ box-sizing: border-box;
1243
+ padding: 0;
1244
+ }
1245
+
1246
+ .markdown-body [type=number]::-webkit-inner-spin-button,
1247
+ .markdown-body [type=number]::-webkit-outer-spin-button {
1248
+ height: auto;
1249
+ }
1250
+
1251
+ .markdown-body [type=search]::-webkit-search-cancel-button,
1252
+ .markdown-body [type=search]::-webkit-search-decoration {
1253
+ -webkit-appearance: none;
1254
+ appearance: none;
1255
+ }
1256
+
1257
+ .markdown-body ::-webkit-input-placeholder {
1258
+ color: inherit;
1259
+ opacity: .54;
1260
+ }
1261
+
1262
+ .markdown-body ::-webkit-file-upload-button {
1263
+ -webkit-appearance: button;
1264
+ appearance: button;
1265
+ font: inherit;
1266
+ }
1267
+
1268
+ .markdown-body a:hover {
1269
+ text-decoration: underline;
1270
+ }
1271
+
1272
+ .markdown-body ::placeholder {
1273
+ color: var(--fgColor-muted);
1274
+ opacity: 1;
1275
+ }
1276
+
1277
+ .markdown-body hr::before {
1278
+ display: table;
1279
+ content: "";
1280
+ }
1281
+
1282
+ .markdown-body hr::after {
1283
+ display: table;
1284
+ clear: both;
1285
+ content: "";
1286
+ }
1287
+
1288
+ .markdown-body table {
1289
+ border-spacing: 0;
1290
+ border-collapse: collapse;
1291
+ display: block;
1292
+ width: max-content;
1293
+ max-width: 100%;
1294
+ overflow: auto;
1295
+ }
1296
+
1297
+ .markdown-body td,
1298
+ .markdown-body th {
1299
+ padding: 0;
1300
+ }
1301
+
1302
+ .markdown-body details summary {
1303
+ cursor: pointer;
1304
+ }
1305
+
1306
+ .markdown-body details:not([open])>*:not(summary) {
1307
+ display: none;
1308
+ }
1309
+
1310
+ .markdown-body a:focus,
1311
+ .markdown-body [role=button]:focus,
1312
+ .markdown-body input[type=radio]:focus,
1313
+ .markdown-body input[type=checkbox]:focus {
1314
+ outline: 2px solid var(--focus-outlineColor);
1315
+ outline-offset: -2px;
1316
+ box-shadow: none;
1317
+ }
1318
+
1319
+ .markdown-body a:focus:not(:focus-visible),
1320
+ .markdown-body [role=button]:focus:not(:focus-visible),
1321
+ .markdown-body input[type=radio]:focus:not(:focus-visible),
1322
+ .markdown-body input[type=checkbox]:focus:not(:focus-visible) {
1323
+ outline: solid 1px transparent;
1324
+ }
1325
+
1326
+ .markdown-body a:focus-visible,
1327
+ .markdown-body [role=button]:focus-visible,
1328
+ .markdown-body input[type=radio]:focus-visible,
1329
+ .markdown-body input[type=checkbox]:focus-visible {
1330
+ outline: 2px solid var(--focus-outlineColor);
1331
+ outline-offset: -2px;
1332
+ box-shadow: none;
1333
+ }
1334
+
1335
+ .markdown-body a:not([class]):focus,
1336
+ .markdown-body a:not([class]):focus-visible,
1337
+ .markdown-body input[type=radio]:focus,
1338
+ .markdown-body input[type=radio]:focus-visible,
1339
+ .markdown-body input[type=checkbox]:focus,
1340
+ .markdown-body input[type=checkbox]:focus-visible {
1341
+ outline-offset: 0;
1342
+ }
1343
+
1344
+ .markdown-body kbd {
1345
+ display: inline-block;
1346
+ padding: 3px 5px;
1347
+ font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1348
+ line-height: 10px;
1349
+ color: var(--fgColor-default);
1350
+ vertical-align: middle;
1351
+ background-color: var(--bgColor-muted);
1352
+ border: solid 1px var(--borderColor-neutral-muted);
1353
+ border-bottom-color: var(--borderColor-neutral-muted);
1354
+ border-radius: 6px;
1355
+ box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
1356
+ }
1357
+
1358
+ .markdown-body h1,
1359
+ .markdown-body h2,
1360
+ .markdown-body h3,
1361
+ .markdown-body h4,
1362
+ .markdown-body h5,
1363
+ .markdown-body h6 {
1364
+ margin-top: 24px;
1365
+ margin-bottom: 16px;
1366
+ font-weight: var(--base-text-weight-semibold, 600);
1367
+ line-height: 1.25;
1368
+ }
1369
+
1370
+ .markdown-body h2 {
1371
+ font-weight: var(--base-text-weight-semibold, 600);
1372
+ padding-bottom: .3em;
1373
+ font-size: 1.5em;
1374
+ border-bottom: 1px solid var(--borderColor-muted);
1375
+ }
1376
+
1377
+ .markdown-body h3 {
1378
+ font-weight: var(--base-text-weight-semibold, 600);
1379
+ font-size: 1.25em;
1380
+ }
1381
+
1382
+ .markdown-body h4 {
1383
+ font-weight: var(--base-text-weight-semibold, 600);
1384
+ font-size: 1em;
1385
+ }
1386
+
1387
+ .markdown-body h5 {
1388
+ font-weight: var(--base-text-weight-semibold, 600);
1389
+ font-size: .875em;
1390
+ }
1391
+
1392
+ .markdown-body h6 {
1393
+ font-weight: var(--base-text-weight-semibold, 600);
1394
+ font-size: .85em;
1395
+ color: var(--fgColor-muted);
1396
+ }
1397
+
1398
+ .markdown-body p {
1399
+ margin-top: 0;
1400
+ margin-bottom: 10px;
1401
+ }
1402
+
1403
+ .markdown-body blockquote {
1404
+ margin: 0;
1405
+ padding: 0 1em;
1406
+ color: var(--fgColor-muted);
1407
+ }
1408
+
1409
+ .markdown-body ul,
1410
+ .markdown-body ol {
1411
+ margin-top: 0;
1412
+ margin-bottom: 0;
1413
+ padding-left: 2em;
1414
+ }
1415
+
1416
+ .markdown-body ol ol,
1417
+ .markdown-body ul ol {
1418
+ list-style-type: lower-roman;
1419
+ }
1420
+
1421
+ .markdown-body ul ul ol,
1422
+ .markdown-body ul ol ol,
1423
+ .markdown-body ol ul ol,
1424
+ .markdown-body ol ol ol {
1425
+ list-style-type: lower-alpha;
1426
+ }
1427
+
1428
+ .markdown-body dd {
1429
+ margin-left: 0;
1430
+ }
1431
+
1432
+ .markdown-body tt,
1433
+ .markdown-body code,
1434
+ .markdown-body samp {
1435
+ font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1436
+ font-size: 12px;
1437
+ }
1438
+
1439
+ .markdown-body pre {
1440
+ margin-top: 0;
1441
+ margin-bottom: 0;
1442
+ font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
1443
+ font-size: 12px;
1444
+ word-wrap: normal;
1445
+ }
1446
+
1447
+ .markdown-body .octicon {
1448
+ display: inline-block;
1449
+ overflow: visible !important;
1450
+ vertical-align: text-bottom;
1451
+ fill: currentColor;
1452
+ }
1453
+
1454
+ .markdown-body input::-webkit-outer-spin-button,
1455
+ .markdown-body input::-webkit-inner-spin-button {
1456
+ margin: 0;
1457
+ -webkit-appearance: none;
1458
+ appearance: none;
1459
+ }
1460
+
1461
+ .markdown-body .mr-2 {
1462
+ margin-right: var(--base-size-8, 8px) !important;
1463
+ }
1464
+
1465
+ .markdown-body::before {
1466
+ display: table;
1467
+ content: "";
1468
+ }
1469
+
1470
+ .markdown-body::after {
1471
+ display: table;
1472
+ clear: both;
1473
+ content: "";
1474
+ }
1475
+
1476
+ .markdown-body>*:first-child {
1477
+ margin-top: 0 !important;
1478
+ }
1479
+
1480
+ .markdown-body>*:last-child {
1481
+ margin-bottom: 0 !important;
1482
+ }
1483
+
1484
+ .markdown-body a:not([href]) {
1485
+ color: inherit;
1486
+ text-decoration: none;
1487
+ }
1488
+
1489
+ .markdown-body .absent {
1490
+ color: var(--fgColor-danger);
1491
+ }
1492
+
1493
+ .markdown-body .anchor {
1494
+ float: left;
1495
+ padding-right: 4px;
1496
+ margin-left: -20px;
1497
+ line-height: 1;
1498
+ }
1499
+
1500
+ .markdown-body .anchor:focus {
1501
+ outline: none;
1502
+ }
1503
+
1504
+ .markdown-body p,
1505
+ .markdown-body blockquote,
1506
+ .markdown-body ul,
1507
+ .markdown-body ol,
1508
+ .markdown-body dl,
1509
+ .markdown-body table,
1510
+ .markdown-body pre,
1511
+ .markdown-body details {
1512
+ margin-top: 0;
1513
+ margin-bottom: 16px;
1514
+ }
1515
+
1516
+ .markdown-body blockquote>:first-child {
1517
+ margin-top: 0;
1518
+ }
1519
+
1520
+ .markdown-body blockquote>:last-child {
1521
+ margin-bottom: 0;
1522
+ }
1523
+
1524
+ .markdown-body h1 .octicon-link,
1525
+ .markdown-body h2 .octicon-link,
1526
+ .markdown-body h3 .octicon-link,
1527
+ .markdown-body h4 .octicon-link,
1528
+ .markdown-body h5 .octicon-link,
1529
+ .markdown-body h6 .octicon-link {
1530
+ color: var(--fgColor-default);
1531
+ vertical-align: middle;
1532
+ visibility: hidden;
1533
+ }
1534
+
1535
+ .markdown-body h1:hover .anchor,
1536
+ .markdown-body h2:hover .anchor,
1537
+ .markdown-body h3:hover .anchor,
1538
+ .markdown-body h4:hover .anchor,
1539
+ .markdown-body h5:hover .anchor,
1540
+ .markdown-body h6:hover .anchor {
1541
+ text-decoration: none;
1542
+ }
1543
+
1544
+ .markdown-body h1:hover .anchor .octicon-link,
1545
+ .markdown-body h2:hover .anchor .octicon-link,
1546
+ .markdown-body h3:hover .anchor .octicon-link,
1547
+ .markdown-body h4:hover .anchor .octicon-link,
1548
+ .markdown-body h5:hover .anchor .octicon-link,
1549
+ .markdown-body h6:hover .anchor .octicon-link {
1550
+ visibility: visible;
1551
+ }
1552
+
1553
+ .markdown-body h1 tt,
1554
+ .markdown-body h1 code,
1555
+ .markdown-body h2 tt,
1556
+ .markdown-body h2 code,
1557
+ .markdown-body h3 tt,
1558
+ .markdown-body h3 code,
1559
+ .markdown-body h4 tt,
1560
+ .markdown-body h4 code,
1561
+ .markdown-body h5 tt,
1562
+ .markdown-body h5 code,
1563
+ .markdown-body h6 tt,
1564
+ .markdown-body h6 code {
1565
+ padding: 0 .2em;
1566
+ font-size: inherit;
1567
+ }
1568
+
1569
+ .markdown-body summary h1,
1570
+ .markdown-body summary h2,
1571
+ .markdown-body summary h3,
1572
+ .markdown-body summary h4,
1573
+ .markdown-body summary h5,
1574
+ .markdown-body summary h6 {
1575
+ display: inline-block;
1576
+ }
1577
+
1578
+ .markdown-body summary h1 .anchor,
1579
+ .markdown-body summary h2 .anchor,
1580
+ .markdown-body summary h3 .anchor,
1581
+ .markdown-body summary h4 .anchor,
1582
+ .markdown-body summary h5 .anchor,
1583
+ .markdown-body summary h6 .anchor {
1584
+ margin-left: -40px;
1585
+ }
1586
+
1587
+ .markdown-body summary h1,
1588
+ .markdown-body summary h2 {
1589
+ padding-bottom: 0;
1590
+ border-bottom: 0;
1591
+ }
1592
+
1593
+ .markdown-body ul.no-list,
1594
+ .markdown-body ol.no-list {
1595
+ padding: 0;
1596
+ list-style-type: none;
1597
+ }
1598
+
1599
+ .markdown-body ol[type="a s"] {
1600
+ list-style-type: lower-alpha;
1601
+ }
1602
+
1603
+ .markdown-body ol[type="A s"] {
1604
+ list-style-type: upper-alpha;
1605
+ }
1606
+
1607
+ .markdown-body ol[type="i s"] {
1608
+ list-style-type: lower-roman;
1609
+ }
1610
+
1611
+ .markdown-body ol[type="I s"] {
1612
+ list-style-type: upper-roman;
1613
+ }
1614
+
1615
+ .markdown-body ol[type="1"] {
1616
+ list-style-type: decimal;
1617
+ }
1618
+
1619
+ .markdown-body div>ol:not([type]) {
1620
+ list-style-type: decimal;
1621
+ }
1622
+
1623
+ .markdown-body ul ul,
1624
+ .markdown-body ul ol,
1625
+ .markdown-body ol ol,
1626
+ .markdown-body ol ul {
1627
+ margin-top: 0;
1628
+ margin-bottom: 0;
1629
+ }
1630
+
1631
+ .markdown-body li>p {
1632
+ margin-top: 16px;
1633
+ }
1634
+
1635
+ .markdown-body li+li {
1636
+ margin-top: .25em;
1637
+ }
1638
+
1639
+ .markdown-body dl {
1640
+ padding: 0;
1641
+ }
1642
+
1643
+ .markdown-body dl dt {
1644
+ padding: 0;
1645
+ margin-top: 16px;
1646
+ font-size: 1em;
1647
+ font-style: italic;
1648
+ font-weight: var(--base-text-weight-semibold, 600);
1649
+ }
1650
+
1651
+ .markdown-body dl dd {
1652
+ padding: 0 16px;
1653
+ margin-bottom: 16px;
1654
+ }
1655
+
1656
+ .markdown-body table th {
1657
+ font-weight: var(--base-text-weight-semibold, 600);
1658
+ }
1659
+
1660
+ .markdown-body table th,
1661
+ .markdown-body table td {
1662
+ padding: 6px 13px;
1663
+ border: 1px solid var(--borderColor-default);
1664
+ }
1665
+
1666
+ .markdown-body table td>:last-child {
1667
+ margin-bottom: 0;
1668
+ }
1669
+
1670
+ .markdown-body table tr {
1671
+ border-top: 1px solid var(--borderColor-muted);
1672
+ }
1673
+
1674
+ .markdown-body table img {
1675
+ background-color: transparent;
1676
+ }
1677
+
1678
+ .markdown-body img[align=right] {
1679
+ padding-left: 20px;
1680
+ }
1681
+
1682
+ .markdown-body img[align=left] {
1683
+ padding-right: 20px;
1684
+ }
1685
+
1686
+ .markdown-body .emoji {
1687
+ max-width: none;
1688
+ vertical-align: text-top;
1689
+ background-color: transparent;
1690
+ }
1691
+
1692
+ .markdown-body span.frame {
1693
+ display: block;
1694
+ overflow: hidden;
1695
+ }
1696
+
1697
+ .markdown-body span.frame>span {
1698
+ display: block;
1699
+ float: left;
1700
+ width: auto;
1701
+ padding: 7px;
1702
+ margin: 13px 0 0;
1703
+ overflow: hidden;
1704
+ border: 1px solid var(--borderColor-default);
1705
+ }
1706
+
1707
+ .markdown-body span.frame span img {
1708
+ display: block;
1709
+ float: left;
1710
+ }
1711
+
1712
+ .markdown-body span.frame span span {
1713
+ display: block;
1714
+ padding: 5px 0 0;
1715
+ clear: both;
1716
+ color: var(--fgColor-default);
1717
+ }
1718
+
1719
+ .markdown-body span.align-center {
1720
+ display: block;
1721
+ overflow: hidden;
1722
+ clear: both;
1723
+ }
1724
+
1725
+ .markdown-body span.align-center>span {
1726
+ display: block;
1727
+ margin: 13px auto 0;
1728
+ overflow: hidden;
1729
+ text-align: center;
1730
+ }
1731
+
1732
+ .markdown-body span.align-center span img {
1733
+ margin: 0 auto;
1734
+ text-align: center;
1735
+ }
1736
+
1737
+ .markdown-body span.align-right {
1738
+ display: block;
1739
+ overflow: hidden;
1740
+ clear: both;
1741
+ }
1742
+
1743
+ .markdown-body span.align-right>span {
1744
+ display: block;
1745
+ margin: 13px 0 0;
1746
+ overflow: hidden;
1747
+ text-align: right;
1748
+ }
1749
+
1750
+ .markdown-body span.align-right span img {
1751
+ margin: 0;
1752
+ text-align: right;
1753
+ }
1754
+
1755
+ .markdown-body span.float-left {
1756
+ display: block;
1757
+ float: left;
1758
+ margin-right: 13px;
1759
+ overflow: hidden;
1760
+ }
1761
+
1762
+ .markdown-body span.float-left span {
1763
+ margin: 13px 0 0;
1764
+ }
1765
+
1766
+ .markdown-body span.float-right {
1767
+ display: block;
1768
+ float: right;
1769
+ margin-left: 13px;
1770
+ overflow: hidden;
1771
+ }
1772
+
1773
+ .markdown-body span.float-right>span {
1774
+ display: block;
1775
+ margin: 13px auto 0;
1776
+ overflow: hidden;
1777
+ text-align: right;
1778
+ }
1779
+
1780
+ .markdown-body code,
1781
+ .markdown-body tt {
1782
+ padding: .2em .4em;
1783
+ margin: 0;
1784
+ font-size: 85%;
1785
+ white-space: break-spaces;
1786
+ background-color: var(--bgColor-neutral-muted);
1787
+ border-radius: 6px;
1788
+ }
1789
+
1790
+ .markdown-body code br,
1791
+ .markdown-body tt br {
1792
+ display: none;
1793
+ }
1794
+
1795
+ .markdown-body del code {
1796
+ text-decoration: inherit;
1797
+ }
1798
+
1799
+ .markdown-body samp {
1800
+ font-size: 85%;
1801
+ }
1802
+
1803
+ .markdown-body pre code {
1804
+ font-size: 100%;
1805
+ }
1806
+
1807
+ .markdown-body pre>code {
1808
+ padding: 0;
1809
+ margin: 0;
1810
+ word-break: normal;
1811
+ white-space: pre;
1812
+ background: transparent;
1813
+ border: 0;
1814
+ }
1815
+
1816
+ .markdown-body .highlight {
1817
+ margin-bottom: 16px;
1818
+ }
1819
+
1820
+ .markdown-body .highlight pre {
1821
+ margin-bottom: 0;
1822
+ word-break: normal;
1823
+ }
1824
+
1825
+ .markdown-body .highlight pre,
1826
+ .markdown-body pre {
1827
+ padding: 16px;
1828
+ overflow: auto;
1829
+ font-size: 85%;
1830
+ line-height: 1.45;
1831
+ color: var(--fgColor-default);
1832
+ background-color: var(--bgColor-muted);
1833
+ border-radius: 6px;
1834
+ }
1835
+
1836
+ .markdown-body pre code,
1837
+ .markdown-body pre tt {
1838
+ display: inline;
1839
+ max-width: auto;
1840
+ padding: 0;
1841
+ margin: 0;
1842
+ overflow: visible;
1843
+ line-height: inherit;
1844
+ word-wrap: normal;
1845
+ background-color: transparent;
1846
+ border: 0;
1847
+ }
1848
+
1849
+ .markdown-body .csv-data td,
1850
+ .markdown-body .csv-data th {
1851
+ padding: 5px;
1852
+ overflow: hidden;
1853
+ font-size: 12px;
1854
+ line-height: 1;
1855
+ text-align: left;
1856
+ white-space: nowrap;
1857
+ }
1858
+
1859
+ .markdown-body .csv-data .blob-num {
1860
+ padding: 10px 8px 9px;
1861
+ text-align: right;
1862
+ border: 0;
1863
+ }
1864
+
1865
+ .markdown-body .csv-data tr {
1866
+ border-top: 0;
1867
+ }
1868
+
1869
+ .markdown-body .csv-data th {
1870
+ font-weight: var(--base-text-weight-semibold, 600);
1871
+ background: var(--bgColor-muted);
1872
+ border-top: 0;
1873
+ }
1874
+
1875
+ .markdown-body [data-footnote-ref]::before {
1876
+ content: "[";
1877
+ }
1878
+
1879
+ .markdown-body [data-footnote-ref]::after {
1880
+ content: "]";
1881
+ }
1882
+
1883
+ .markdown-body .footnotes {
1884
+ font-size: 12px;
1885
+ color: var(--fgColor-muted);
1886
+ border-top: 1px solid var(--borderColor-default);
1887
+ }
1888
+
1889
+ .markdown-body .footnotes ol {
1890
+ padding-left: 16px;
1891
+ }
1892
+
1893
+ .markdown-body .footnotes ol ul {
1894
+ display: inline-block;
1895
+ padding-left: 16px;
1896
+ margin-top: 16px;
1897
+ }
1898
+
1899
+ .markdown-body .footnotes li {
1900
+ position: relative;
1901
+ }
1902
+
1903
+ .markdown-body .footnotes li:target::before {
1904
+ position: absolute;
1905
+ top: -8px;
1906
+ right: -8px;
1907
+ bottom: -8px;
1908
+ left: -24px;
1909
+ pointer-events: none;
1910
+ content: "";
1911
+ border: 2px solid var(--borderColor-accent-emphasis);
1912
+ border-radius: 6px;
1913
+ }
1914
+
1915
+ .markdown-body .footnotes li:target {
1916
+ color: var(--fgColor-default);
1917
+ }
1918
+
1919
+ .markdown-body .footnotes .data-footnote-backref g-emoji {
1920
+ font-family: monospace;
1921
+ }
1922
+
1923
+ .markdown-body .pl-c {
1924
+ color: var(--color-prettylights-syntax-comment);
1925
+ }
1926
+
1927
+ .markdown-body .pl-c1,
1928
+ .markdown-body .pl-s .pl-v {
1929
+ color: var(--color-prettylights-syntax-constant);
1930
+ }
1931
+
1932
+ .markdown-body .pl-e,
1933
+ .markdown-body .pl-en {
1934
+ color: var(--color-prettylights-syntax-entity);
1935
+ }
1936
+
1937
+ .markdown-body .pl-smi,
1938
+ .markdown-body .pl-s .pl-s1 {
1939
+ color: var(--color-prettylights-syntax-storage-modifier-import);
1940
+ }
1941
+
1942
+ .markdown-body .pl-ent {
1943
+ color: var(--color-prettylights-syntax-entity-tag);
1944
+ }
1945
+
1946
+ .markdown-body .pl-k {
1947
+ color: var(--color-prettylights-syntax-keyword);
1948
+ }
1949
+
1950
+ .markdown-body .pl-s,
1951
+ .markdown-body .pl-pds,
1952
+ .markdown-body .pl-s .pl-pse .pl-s1,
1953
+ .markdown-body .pl-sr,
1954
+ .markdown-body .pl-sr .pl-cce,
1955
+ .markdown-body .pl-sr .pl-sre,
1956
+ .markdown-body .pl-sr .pl-sra {
1957
+ color: var(--color-prettylights-syntax-string);
1958
+ }
1959
+
1960
+ .markdown-body .pl-v,
1961
+ .markdown-body .pl-smw {
1962
+ color: var(--color-prettylights-syntax-variable);
1963
+ }
1964
+
1965
+ .markdown-body .pl-bu {
1966
+ color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
1967
+ }
1968
+
1969
+ .markdown-body .pl-ii {
1970
+ color: var(--color-prettylights-syntax-invalid-illegal-text);
1971
+ background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
1972
+ }
1973
+
1974
+ .markdown-body .pl-c2 {
1975
+ color: var(--color-prettylights-syntax-carriage-return-text);
1976
+ background-color: var(--color-prettylights-syntax-carriage-return-bg);
1977
+ }
1978
+
1979
+ .markdown-body .pl-sr .pl-cce {
1980
+ font-weight: bold;
1981
+ color: var(--color-prettylights-syntax-string-regexp);
1982
+ }
1983
+
1984
+ .markdown-body .pl-ml {
1985
+ color: var(--color-prettylights-syntax-markup-list);
1986
+ }
1987
+
1988
+ .markdown-body .pl-mh,
1989
+ .markdown-body .pl-mh .pl-en,
1990
+ .markdown-body .pl-ms {
1991
+ font-weight: bold;
1992
+ color: var(--color-prettylights-syntax-markup-heading);
1993
+ }
1994
+
1995
+ .markdown-body .pl-mi {
1996
+ font-style: italic;
1997
+ color: var(--color-prettylights-syntax-markup-italic);
1998
+ }
1999
+
2000
+ .markdown-body .pl-mb {
2001
+ font-weight: bold;
2002
+ color: var(--color-prettylights-syntax-markup-bold);
2003
+ }
2004
+
2005
+ .markdown-body .pl-md {
2006
+ color: var(--color-prettylights-syntax-markup-deleted-text);
2007
+ background-color: var(--color-prettylights-syntax-markup-deleted-bg);
2008
+ }
2009
+
2010
+ .markdown-body .pl-mi1 {
2011
+ color: var(--color-prettylights-syntax-markup-inserted-text);
2012
+ background-color: var(--color-prettylights-syntax-markup-inserted-bg);
2013
+ }
2014
+
2015
+ .markdown-body .pl-mc {
2016
+ color: var(--color-prettylights-syntax-markup-changed-text);
2017
+ background-color: var(--color-prettylights-syntax-markup-changed-bg);
2018
+ }
2019
+
2020
+ .markdown-body .pl-mi2 {
2021
+ color: var(--color-prettylights-syntax-markup-ignored-text);
2022
+ background-color: var(--color-prettylights-syntax-markup-ignored-bg);
2023
+ }
2024
+
2025
+ .markdown-body .pl-mdr {
2026
+ font-weight: bold;
2027
+ color: var(--color-prettylights-syntax-meta-diff-range);
2028
+ }
2029
+
2030
+ .markdown-body .pl-ba {
2031
+ color: var(--color-prettylights-syntax-brackethighlighter-angle);
2032
+ }
2033
+
2034
+ .markdown-body .pl-sg {
2035
+ color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
2036
+ }
2037
+
2038
+ .markdown-body .pl-corl {
2039
+ text-decoration: underline;
2040
+ color: var(--color-prettylights-syntax-constant-other-reference-link);
2041
+ }
2042
+
2043
+ .markdown-body [role=button]:focus:not(:focus-visible),
2044
+ .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
2045
+ .markdown-body button:focus:not(:focus-visible),
2046
+ .markdown-body summary:focus:not(:focus-visible),
2047
+ .markdown-body a:focus:not(:focus-visible) {
2048
+ outline: none;
2049
+ box-shadow: none;
2050
+ }
2051
+
2052
+ .markdown-body [tabindex="0"]:focus:not(:focus-visible),
2053
+ .markdown-body details-dialog:focus:not(:focus-visible) {
2054
+ outline: none;
2055
+ }
2056
+
2057
+ .markdown-body g-emoji {
2058
+ display: inline-block;
2059
+ min-width: 1ch;
2060
+ font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
2061
+ font-size: 1em;
2062
+ font-style: normal !important;
2063
+ font-weight: var(--base-text-weight-normal, 400);
2064
+ line-height: 1;
2065
+ vertical-align: -0.075em;
2066
+ }
2067
+
2068
+ .markdown-body g-emoji img {
2069
+ width: 1em;
2070
+ height: 1em;
2071
+ }
2072
+
2073
+ .markdown-body .task-list-item {
2074
+ list-style-type: none;
2075
+ }
2076
+
2077
+ .markdown-body .task-list-item label {
2078
+ font-weight: var(--base-text-weight-normal, 400);
2079
+ }
2080
+
2081
+ .markdown-body .task-list-item.enabled label {
2082
+ cursor: pointer;
2083
+ }
2084
+
2085
+ .markdown-body .task-list-item+.task-list-item {
2086
+ margin-top: var(--base-size-4);
2087
+ }
2088
+
2089
+ .markdown-body .task-list-item .handle {
2090
+ display: none;
2091
+ }
2092
+
2093
+ .markdown-body .task-list-item-checkbox {
2094
+ margin: 0 .2em .25em -1.4em;
2095
+ vertical-align: middle;
2096
+ }
2097
+
2098
+ .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
2099
+ margin: 0 -1.6em .25em .2em;
2100
+ }
2101
+
2102
+ .markdown-body .contains-task-list {
2103
+ position: relative;
2104
+ }
2105
+
2106
+ .markdown-body .contains-task-list:hover .task-list-item-convert-container,
2107
+ .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
2108
+ display: block;
2109
+ width: auto;
2110
+ height: 24px;
2111
+ overflow: visible;
2112
+ clip: auto;
2113
+ }
2114
+
2115
+ .markdown-body ::-webkit-calendar-picker-indicator {
2116
+ filter: invert(50%);
2117
+ }
2118
+
2119
+ .markdown-body .markdown-alert {
2120
+ padding: var(--base-size-8) var(--base-size-16);
2121
+ margin-bottom: var(--base-size-16);
2122
+ color: inherit;
2123
+ border-left: .25em solid var(--borderColor-default);
2124
+ }
2125
+
2126
+ .markdown-body .markdown-alert>:first-child {
2127
+ margin-top: 0;
2128
+ }
2129
+
2130
+ .markdown-body .markdown-alert>:last-child {
2131
+ margin-bottom: 0;
2132
+ }
2133
+
2134
+ .markdown-body .markdown-alert .markdown-alert-title {
2135
+ display: flex;
2136
+ font-weight: var(--base-text-weight-medium, 500);
2137
+ align-items: center;
2138
+ line-height: 1;
2139
+ }
2140
+
2141
+ .markdown-body .markdown-alert.markdown-alert-note {
2142
+ border-left-color: var(--borderColor-accent-emphasis);
2143
+ }
2144
+
2145
+ .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
2146
+ color: var(--fgColor-accent);
2147
+ }
2148
+
2149
+ .markdown-body .markdown-alert.markdown-alert-important {
2150
+ border-left-color: var(--borderColor-done-emphasis);
2151
+ }
2152
+
2153
+ .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
2154
+ color: var(--fgColor-done);
2155
+ }
2156
+
2157
+ .markdown-body .markdown-alert.markdown-alert-warning {
2158
+ border-left-color: var(--borderColor-attention-emphasis);
2159
+ }
2160
+
2161
+ .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
2162
+ color: var(--fgColor-attention);
2163
+ }
2164
+
2165
+ .markdown-body .markdown-alert.markdown-alert-tip {
2166
+ border-left-color: var(--borderColor-success-emphasis);
2167
+ }
2168
+
2169
+ .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
2170
+ color: var(--fgColor-success);
2171
+ }
2172
+
2173
+ .markdown-body .markdown-alert.markdown-alert-caution {
2174
+ border-left-color: var(--borderColor-danger-emphasis);
2175
+ }
2176
+
2177
+ .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
2178
+ color: var(--fgColor-danger);
2179
+ }
2180
+
2181
+ .markdown-body>*:first-child>.heading-element:first-child {
2182
+ margin-top: 0 !important;
2183
+ }`;
2184
+
2185
+ const yt_style = `
2186
+ .msg_userMessageBox {
2187
+ width: fit-content;
2188
+ max-width: 90%;
2189
+ display: flex;
2190
+ flex-direction: column;
2191
+ align-items: flex-end;
2192
+ }
2193
+
2194
+ .msg_userMessageBox .msg_messageImgBox {
2195
+ width: 100%;
2196
+ display: flex;
2197
+ flex-wrap: wrap;
2198
+ justify-content: flex-end;
2199
+ }
2200
+
2201
+ .msg_userMessageBox .msg_messageImgBox .msg_messageImg {
2202
+ border-radius: 5px;
2203
+ }
2204
+
2205
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox {
2206
+ flex-shrink: 0;
2207
+ pointer-events: auto;
2208
+ position: relative;
2209
+ width: 137px;
2210
+ background-color: #f0f0f0;
2211
+ border-radius: 10px;
2212
+ margin: 3px 5px;
2213
+ padding: 5px;
2214
+ display: flex;
2215
+ }
2216
+
2217
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
2218
+ display: block;
2219
+ }
2220
+
2221
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
2222
+ margin-left: 10px;
2223
+ overflow: hidden;
2224
+ display: flex;
2225
+ align-items: center;
2226
+ }
2227
+
2228
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
2229
+ overflow: hidden;
2230
+ text-overflow: ellipsis;
2231
+ white-space: nowrap;
2232
+ width: 72px;
2233
+ color: #242424;
2234
+ user-select: none;
2235
+ }
2236
+
2237
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
2238
+ user-select: none;
2239
+ color: #a8a8a8;
2240
+ }
2241
+
2242
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
2243
+ display: none;
2244
+ position: absolute;
2245
+ cursor: pointer;
2246
+ top: -2px;
2247
+ right: 0;
2248
+ z-index: 99999;
2249
+ }
2250
+
2251
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
2252
+ width: 20px;
2253
+ }
2254
+
2255
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
2256
+ border-radius: 3px;
2257
+ z-index: 510;
2258
+ }
2259
+
2260
+ .msg_operateBox {
2261
+ display: flex;
2262
+ margin-top: 5px;
2263
+ user-select: none;
2264
+ }
2265
+
2266
+ .msg_operateBox img {
2267
+ -webkit-user-drag: none;
2268
+ margin-right: 3px;
2269
+ cursor: pointer;
2270
+ width: 16px;
2271
+ }
2272
+
2273
+ .plh_textBox {
2274
+ display: flex;
2275
+ justify-content: center;
2276
+ align-content: center;
2277
+ }
2278
+
2279
+ .plh_textBox .plh_text {
2280
+ font-weight: bold;
2281
+ }
2282
+
2283
+ .w_send_file_box {
2284
+ height: 23px;
2285
+ display: flex;
2286
+ background: transparent;
2287
+ align-items: center;
2288
+ justify-content: center;
2289
+ border-radius: 24px;
2290
+ font-size: 12px;
2291
+ color: #666666;
2292
+ cursor: pointer;
2293
+ }
2294
+
2295
+ .w_file_preview {
2296
+ width: 100%;
2297
+ height: fit-content;
2298
+ background-color: transparent;
2299
+ z-index: 500;
2300
+ display: flex;
2301
+ justify-content: flex-start;
2302
+ align-items: center;
2303
+ padding: 0 5px;
2304
+ overflow-x: hidden;
2305
+ }
2306
+
2307
+ .w_file_preview .w_directionBg {
2308
+ position: absolute;
2309
+ cursor: pointer;
2310
+ width: 18px;
2311
+ height: 18px;
2312
+ background: #FFFFFF;
2313
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2314
+ border-radius: 5px;
2315
+ border: 1px solid #F0F0F0;
2316
+ z-index: 999999;
2317
+ display: flex;
2318
+ justify-content: center;
2319
+ align-items: center;
2320
+ }
2321
+
2322
+ .w_file_preview .w_directionBg img {
2323
+ width: 12px;
2324
+ }
2325
+
2326
+ .w_file_preview .w_toLeftBox {
2327
+ position: absolute;
2328
+ left: 0;
2329
+ top: 6px;
2330
+ height: 60px;
2331
+ width: 80px;
2332
+ background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255,255,255,0) 100%);
2333
+ z-index: 99999;
2334
+ }
2335
+
2336
+ .w_file_preview .w_toLeftBox .w_toLeft {
2337
+ position: absolute;
2338
+ cursor: pointer;
2339
+ width: 18px;
2340
+ height: 18px;
2341
+ background: #FFFFFF;
2342
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2343
+ border-radius: 5px;
2344
+ border: 1px solid #F0F0F0;
2345
+ z-index: 999999;
2346
+ display: flex;
2347
+ justify-content: center;
2348
+ align-items: center;
2349
+ top: 25px;
2350
+ left: 5px;
2351
+ }
2352
+
2353
+ .w_file_preview .w_toRightBox {
2354
+ position: absolute;
2355
+ right: 0;
2356
+ top: 6px;
2357
+ height: 60px;
2358
+ width: 80px;
2359
+ background: linear-gradient(-90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 100%);
2360
+ z-index: 99999;
2361
+ }
2362
+
2363
+ .w_file_preview .w_toRightBox .w_toRight {
2364
+ position: absolute;
2365
+ cursor: pointer;
2366
+ width: 18px;
2367
+ height: 18px;
2368
+ background: #FFFFFF;
2369
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
2370
+ border-radius: 5px;
2371
+ border: 1px solid #F0F0F0;
2372
+ z-index: 999999;
2373
+ display: flex;
2374
+ justify-content: center;
2375
+ align-items: center;
2376
+ top: 25px;
2377
+ right: 5px;
2378
+ }
2379
+
2380
+ .w_file_preview .w_fileBox {
2381
+ position: relative;
2382
+ min-width: fit-content;
2383
+ background-color: #f0f0f0;
2384
+ border-radius: 10px;
2385
+ margin: 10px 5px;
2386
+ padding: 5px;
2387
+ display: flex;
2388
+ }
2389
+
2390
+ .w_file_preview .w_fileBox:hover .w_fileRemove {
2391
+ display: block;
2392
+ }
2393
+
2394
+ .w_file_preview .w_fileBox .w_fileInfoBox {
2395
+ width: fit-content;
2396
+ margin-left: 10px;
2397
+ }
2398
+
2399
+ .w_file_preview .w_fileBox .w_fileInfoBox .w_fileInfoFileName {
2400
+ overflow: hidden;
2401
+ text-overflow: ellipsis;
2402
+ white-space: nowrap;
2403
+ width: 110px;
2404
+ color: #242424;
2405
+ user-select: none;
2406
+ }
2407
+
2408
+ .w_file_preview .w_fileBox .w_fileInfoBox .w_fileInfoMeta {
2409
+ width: fit-content;
2410
+ user-select: none;
2411
+ color: #a8a8a8;
2412
+ white-space: nowrap;
2413
+ }
2414
+
2415
+ .w_file_preview .w_fileBox .w_fileRemove {
2416
+ display: none;
2417
+ position: absolute;
2418
+ cursor: pointer;
2419
+ top: -2px;
2420
+ right: 0;
2421
+ z-index: 99999;
2422
+ }
2423
+
2424
+ .w_file_preview .w_fileBox .w_fileRemove img {
2425
+ width: 20px;
2426
+ }
2427
+
2428
+ .w_file_preview .w_fileBox .w_upImg {
2429
+ border-radius: 3px;
2430
+ z-index: 510;
2431
+ }
2432
+
2433
+ .w_tagListClass {
2434
+ width: 100%;
2435
+ height: fit-content;
2436
+ display: flex;
2437
+ align-items: center;
2438
+ padding: 8px 0 8px 10px;
2439
+ flex-wrap: wrap;
2440
+ gap: 8px;
2441
+ }
2442
+ .w_tagListClass .w_tagItemBox {
2443
+ padding: 8px 12px;
2444
+ display: flex;
2445
+ align-items: center;
2446
+ justify-content: center;
2447
+ width: fit-content;
2448
+ height: 30px;
2449
+ background: #00000000;
2450
+ border-radius: 15px;
2451
+ border: 1px solid #4B4FFF;
2452
+ cursor: pointer;
2453
+
2454
+ }
2455
+ .w_tagListClass .w_tagItemBox:hover, .w_tagListClass .w_tagItemBox:active {
2456
+ background: linear-gradient( 270deg, #828EFE 0%, #4B4FFF 100%);
2457
+ }
2458
+ .w_tagListClass .w_tagItemBox:hover .w_tagImgh,.w_tagListClass .w_tagItemBox:active .w_tagImgh {
2459
+ filter: brightness(100);
2460
+ }
2461
+
2462
+ .w_tagListClass .w_tagItemBox:hover .w_tagItemText, .w_tagListClass .w_tagItemBox:active .w_tagItemText {
2463
+ color: #fff;
2464
+ }
2465
+ .w_tagListClass .w_tagItemBox .w_tagImgh{
2466
+ width: 16px;
2467
+ height: 16px;
2468
+ }
2469
+ .w_tagListClass .w_tagItemBox .w_tagItemText {
2470
+ width: fit-content;
2471
+ padding-top: 2px;
2472
+ color: #1552FF;
2473
+ font-size: 14px;
2474
+ }
2475
+ .w_tagListClass .w_tagItemBox .w_tagImg {
2476
+ margin-left: 6px;
2477
+ width: 12px;
2478
+ height: 12px;
2479
+ background-repeat: no-repeat;
2480
+ background-size: cover;
2481
+ }
2482
+
2483
+ .w_inputBox {
2484
+ width: calc(100% - 16px);
2485
+ margin: 0 auto 8px;
2486
+ display: flex;
2487
+ align-items: center;
2488
+ box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
2489
+ border-radius: 30px;
2490
+ background: #FFFFFF;
2491
+ transition: height 0.2s ease;
2492
+ }
2493
+ .w_inputBox textarea {
2494
+ resize: none;
2495
+ min-height: 48px;
2496
+ max-height: 96px;
2497
+ border: 0;
2498
+ box-shadow: none !important;
2499
+ color: #333;
2500
+ outline: 0;
2501
+ width: 100%;
2502
+
2503
+ box-sizing: border-box;
2504
+ overflow-y: auto; /* 允许垂直滚动 */
2505
+ scrollbar-width: none; /* Firefox */
2506
+ -ms-overflow-style: none; /* IE and Edge */
2507
+ border-top-left-radius: 50px;
2508
+ border-bottom-left-radius: 50px;
2509
+ }
2510
+
2511
+ .w_inputBox textarea::-webkit-scrollbar {
2512
+ display: none;
2513
+ }
2514
+
2515
+ .w_send_voice_box {
2516
+ height: 23px;
2517
+ display: flex;
2518
+ background: transparent;
2519
+ align-items: center;
2520
+ justify-content: center;
2521
+ border-radius: 24px;
2522
+ font-size: 12px;
2523
+ color: #666666;
2524
+ cursor: pointer;
2525
+ margin-right: 10px;
2526
+ }
2527
+
2528
+ .w_send_voice_box .w_recordIng {
2529
+ padding: 4px;
2530
+ background: #1552FF;
2531
+ border-radius: 8px;
2532
+ }
2533
+ `
2534
+
2535
+ return (
2536
+ <div style={{ position: 'relative',height:'100%' }}>
2537
+ <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style }}></style>
2538
+ <ChatWindow
2539
+ tags={tags}
2540
+ getHistoryList={getHistoryList}
2541
+ userInfo={userInfo}
2542
+ clearMessage={clearMessage}
2543
+ api_key={api_key}
2544
+ input_type={input_type}
2545
+ output_type={output_type}
2546
+ output_component={output_component}
2547
+ open={open}
2548
+ height={height}
2549
+ width={width}
2550
+ send_icon_style={send_icon_style}
2551
+ bot_message_style={bot_message_style}
2552
+ user_message_style={user_message_style}
2553
+ chat_window_style={chat_window_style}
2554
+ error_message_style={error_message_style}
2555
+ send_button_style={send_button_style}
2556
+ placeholder={placeholder}
2557
+ input_style={input_style}
2558
+ online={online}
2559
+ online_message={online_message}
2560
+ offline_message={offline_message}
2561
+ placeholder_sending={placeholder_sending}
2562
+ window_title={window_title}
2563
+ input_container_style={input_container_style}
2564
+ tweaks={tweaks}
2565
+ flowId={flow_id}
2566
+ hostUrl={host_url}
2567
+ updateLastMessage={updateLastMessage}
2568
+ addMessage={addMessage}
2569
+ messages={messages}
2570
+ triggerRef={triggerRef}
2571
+ position={chat_position}
2572
+ sessionId={sessionId}
2573
+ additional_headers={additional_headers}
2574
+ setDropDownList={setDropDownList}
2575
+ dropDownList={dropDownList}
2576
+ baseConfig={baseConfig}
2577
+ isShowVoiceButton={isShowVoiceButton}
2578
+ isShowUploadButton={isShowUploadButton}
2579
+ dropManUrl={dropManUrl}
2580
+ modalWidth={modalWidth}
2581
+ isMobile={isMobile}
2582
+ isShowChatHeader={isShowChatHeader}
2583
+ />
2584
+ </div>
2585
+ );
2586
+ }