yt-chat-components 1.2.3 → 1.2.4

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