yt-chat-components 1.0.0 → 1.0.2

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 (42) hide show
  1. package/.idea/modules.xml +1 -1
  2. package/.idea/sonarlint/issuestore/index.pb +3 -31
  3. package/dist/build/static/js/bundle.min.js +1 -0
  4. package/package.json +76 -76
  5. package/public/index.html +108 -108
  6. package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx +464 -464
  7. package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts +249 -249
  8. package/src/YtChatView/chatWidget/chatWindow/index.module.css +196 -196
  9. package/src/YtChatView/chatWidget/chatWindow/index.tsx +1054 -1041
  10. package/src/YtChatView/chatWidget/chatWindow/types/chatWidget/index.ts +50 -50
  11. package/src/YtChatView/chatWidget/index.tsx +2586 -2586
  12. package/src/YtChatView/logoBtn/index.css +3 -3
  13. package/src/YtChatView/logoBtn/index.jsx +103 -103
  14. package/src/YtChatView/logoSplitBtn/index.css +3 -3
  15. package/src/YtChatView/logoSplitBtn/index.jsx +105 -105
  16. package/src/YtChatView/mobileChat/index.jsx +944 -848
  17. package/src/YtChatView/mobileChat/index.module.css +253 -253
  18. package/src/YtChatView/previewDialog/index.jsx +600 -600
  19. package/src/YtChatView/previewDialog/index.module.css +253 -253
  20. package/src/chatWidget/chatWindow/index.tsx +426 -426
  21. package/src/chatWidget/index.tsx +2193 -2193
  22. package/src/index.tsx +10 -10
  23. package/webpack.config.js +50 -50
  24. package/.idea/sonarlint/issuestore/3/6/364385cedcce4c06de1901392ffeeac0caef0f3c +0 -0
  25. package/.idea/sonarlint/issuestore/3/9/39129446b425a1d640160c068e4194e96639eedf +0 -0
  26. package/.idea/sonarlint/issuestore/4/a/4a2f33951ce07c1ff7184f91877aa13db05d3785 +0 -0
  27. package/.idea/sonarlint/issuestore/4/a/4a7b99bdbee5792679d347b6474463bf5e14b66d +0 -0
  28. package/.idea/sonarlint/issuestore/4/b/4b015aa5428c4d4c3d672893ec23f5fe3969f9be +0 -0
  29. package/.idea/sonarlint/issuestore/4/b/4b6989b8ccae808ebc45d02230d336ea53800365 +0 -0
  30. package/.idea/sonarlint/issuestore/6/1/61ebb9fd6e8cf9082658121d5d81e297791dacd0 +0 -0
  31. package/.idea/sonarlint/issuestore/6/c/6c024c1d0ad64656b9d4b0695ec3c49c0454addf +0 -0
  32. package/.idea/sonarlint/issuestore/6/e/6e75fc1c07c3a427a86fc213ca9479caaaff00ea +0 -0
  33. package/.idea/sonarlint/issuestore/8/d/8d6123af13a140f93e06299fff7ea23c547e9ec8 +0 -0
  34. package/.idea/sonarlint/issuestore/c/c/cc2352788140b6778ac06df4b33f50b390d2d8be +0 -0
  35. package/.idea/sonarlint/issuestore/d/5/d5595158cc48f9bf3e51b06f6e6805a8fd2d6262 +0 -0
  36. package/.idea/sonarlint/issuestore/d/7/d747cbed4201192dfa83a1a51345b020a050b647 +0 -0
  37. package/.idea/sonarlint/issuestore/d/9/d938938695d447dadda115e28781c6541f53fc4f +0 -0
  38. package/build/static/js/bundle.min.js +0 -2
  39. package/build/static/js/bundle.min.js.LICENSE.txt +0 -132
  40. /package/.idea/{langflow-embedded-chat.iml → langflow-embedded-chat-clone.iml} +0 -0
  41. /package/.idea/sonarlint/issuestore/{0/f/0f8c0c92cf798431ebb931ff6e997b1af86ecee5 → 7/0/7030d0b2f71b999ff89a343de08c414af32fc93a} +0 -0
  42. /package/.idea/sonarlint/issuestore/{2/7/27e69cb561aeea20c1afbdd32d260dd60b89a81b → 9/c/9cfff9a6d27bd6c255aa751213163c7901fb8ce7} +0 -0
@@ -1,2193 +1,2193 @@
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: var(--fgColor-default);
1796
- background-color: var(--bgColor-muted);
1797
- border-radius: 6px;
1798
- }
1799
-
1800
- .markdown-body pre code,
1801
- .markdown-body pre tt {
1802
- display: inline;
1803
- max-width: auto;
1804
- padding: 0;
1805
- margin: 0;
1806
- overflow: visible;
1807
- line-height: inherit;
1808
- word-wrap: normal;
1809
- background-color: transparent;
1810
- border: 0;
1811
- }
1812
-
1813
- .markdown-body .csv-data td,
1814
- .markdown-body .csv-data th {
1815
- padding: 5px;
1816
- overflow: hidden;
1817
- font-size: 12px;
1818
- line-height: 1;
1819
- text-align: left;
1820
- white-space: nowrap;
1821
- }
1822
-
1823
- .markdown-body .csv-data .blob-num {
1824
- padding: 10px 8px 9px;
1825
- text-align: right;
1826
- border: 0;
1827
- }
1828
-
1829
- .markdown-body .csv-data tr {
1830
- border-top: 0;
1831
- }
1832
-
1833
- .markdown-body .csv-data th {
1834
- font-weight: var(--base-text-weight-semibold, 600);
1835
- background: var(--bgColor-muted);
1836
- border-top: 0;
1837
- }
1838
-
1839
- .markdown-body [data-footnote-ref]::before {
1840
- content: "[";
1841
- }
1842
-
1843
- .markdown-body [data-footnote-ref]::after {
1844
- content: "]";
1845
- }
1846
-
1847
- .markdown-body .footnotes {
1848
- font-size: 12px;
1849
- color: var(--fgColor-muted);
1850
- border-top: 1px solid var(--borderColor-default);
1851
- }
1852
-
1853
- .markdown-body .footnotes ol {
1854
- padding-left: 16px;
1855
- }
1856
-
1857
- .markdown-body .footnotes ol ul {
1858
- display: inline-block;
1859
- padding-left: 16px;
1860
- margin-top: 16px;
1861
- }
1862
-
1863
- .markdown-body .footnotes li {
1864
- position: relative;
1865
- }
1866
-
1867
- .markdown-body .footnotes li:target::before {
1868
- position: absolute;
1869
- top: -8px;
1870
- right: -8px;
1871
- bottom: -8px;
1872
- left: -24px;
1873
- pointer-events: none;
1874
- content: "";
1875
- border: 2px solid var(--borderColor-accent-emphasis);
1876
- border-radius: 6px;
1877
- }
1878
-
1879
- .markdown-body .footnotes li:target {
1880
- color: var(--fgColor-default);
1881
- }
1882
-
1883
- .markdown-body .footnotes .data-footnote-backref g-emoji {
1884
- font-family: monospace;
1885
- }
1886
-
1887
- .markdown-body .pl-c {
1888
- color: var(--color-prettylights-syntax-comment);
1889
- }
1890
-
1891
- .markdown-body .pl-c1,
1892
- .markdown-body .pl-s .pl-v {
1893
- color: var(--color-prettylights-syntax-constant);
1894
- }
1895
-
1896
- .markdown-body .pl-e,
1897
- .markdown-body .pl-en {
1898
- color: var(--color-prettylights-syntax-entity);
1899
- }
1900
-
1901
- .markdown-body .pl-smi,
1902
- .markdown-body .pl-s .pl-s1 {
1903
- color: var(--color-prettylights-syntax-storage-modifier-import);
1904
- }
1905
-
1906
- .markdown-body .pl-ent {
1907
- color: var(--color-prettylights-syntax-entity-tag);
1908
- }
1909
-
1910
- .markdown-body .pl-k {
1911
- color: var(--color-prettylights-syntax-keyword);
1912
- }
1913
-
1914
- .markdown-body .pl-s,
1915
- .markdown-body .pl-pds,
1916
- .markdown-body .pl-s .pl-pse .pl-s1,
1917
- .markdown-body .pl-sr,
1918
- .markdown-body .pl-sr .pl-cce,
1919
- .markdown-body .pl-sr .pl-sre,
1920
- .markdown-body .pl-sr .pl-sra {
1921
- color: var(--color-prettylights-syntax-string);
1922
- }
1923
-
1924
- .markdown-body .pl-v,
1925
- .markdown-body .pl-smw {
1926
- color: var(--color-prettylights-syntax-variable);
1927
- }
1928
-
1929
- .markdown-body .pl-bu {
1930
- color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
1931
- }
1932
-
1933
- .markdown-body .pl-ii {
1934
- color: var(--color-prettylights-syntax-invalid-illegal-text);
1935
- background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
1936
- }
1937
-
1938
- .markdown-body .pl-c2 {
1939
- color: var(--color-prettylights-syntax-carriage-return-text);
1940
- background-color: var(--color-prettylights-syntax-carriage-return-bg);
1941
- }
1942
-
1943
- .markdown-body .pl-sr .pl-cce {
1944
- font-weight: bold;
1945
- color: var(--color-prettylights-syntax-string-regexp);
1946
- }
1947
-
1948
- .markdown-body .pl-ml {
1949
- color: var(--color-prettylights-syntax-markup-list);
1950
- }
1951
-
1952
- .markdown-body .pl-mh,
1953
- .markdown-body .pl-mh .pl-en,
1954
- .markdown-body .pl-ms {
1955
- font-weight: bold;
1956
- color: var(--color-prettylights-syntax-markup-heading);
1957
- }
1958
-
1959
- .markdown-body .pl-mi {
1960
- font-style: italic;
1961
- color: var(--color-prettylights-syntax-markup-italic);
1962
- }
1963
-
1964
- .markdown-body .pl-mb {
1965
- font-weight: bold;
1966
- color: var(--color-prettylights-syntax-markup-bold);
1967
- }
1968
-
1969
- .markdown-body .pl-md {
1970
- color: var(--color-prettylights-syntax-markup-deleted-text);
1971
- background-color: var(--color-prettylights-syntax-markup-deleted-bg);
1972
- }
1973
-
1974
- .markdown-body .pl-mi1 {
1975
- color: var(--color-prettylights-syntax-markup-inserted-text);
1976
- background-color: var(--color-prettylights-syntax-markup-inserted-bg);
1977
- }
1978
-
1979
- .markdown-body .pl-mc {
1980
- color: var(--color-prettylights-syntax-markup-changed-text);
1981
- background-color: var(--color-prettylights-syntax-markup-changed-bg);
1982
- }
1983
-
1984
- .markdown-body .pl-mi2 {
1985
- color: var(--color-prettylights-syntax-markup-ignored-text);
1986
- background-color: var(--color-prettylights-syntax-markup-ignored-bg);
1987
- }
1988
-
1989
- .markdown-body .pl-mdr {
1990
- font-weight: bold;
1991
- color: var(--color-prettylights-syntax-meta-diff-range);
1992
- }
1993
-
1994
- .markdown-body .pl-ba {
1995
- color: var(--color-prettylights-syntax-brackethighlighter-angle);
1996
- }
1997
-
1998
- .markdown-body .pl-sg {
1999
- color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
2000
- }
2001
-
2002
- .markdown-body .pl-corl {
2003
- text-decoration: underline;
2004
- color: var(--color-prettylights-syntax-constant-other-reference-link);
2005
- }
2006
-
2007
- .markdown-body [role=button]:focus:not(:focus-visible),
2008
- .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
2009
- .markdown-body button:focus:not(:focus-visible),
2010
- .markdown-body summary:focus:not(:focus-visible),
2011
- .markdown-body a:focus:not(:focus-visible) {
2012
- outline: none;
2013
- box-shadow: none;
2014
- }
2015
-
2016
- .markdown-body [tabindex="0"]:focus:not(:focus-visible),
2017
- .markdown-body details-dialog:focus:not(:focus-visible) {
2018
- outline: none;
2019
- }
2020
-
2021
- .markdown-body g-emoji {
2022
- display: inline-block;
2023
- min-width: 1ch;
2024
- font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
2025
- font-size: 1em;
2026
- font-style: normal !important;
2027
- font-weight: var(--base-text-weight-normal, 400);
2028
- line-height: 1;
2029
- vertical-align: -0.075em;
2030
- }
2031
-
2032
- .markdown-body g-emoji img {
2033
- width: 1em;
2034
- height: 1em;
2035
- }
2036
-
2037
- .markdown-body .task-list-item {
2038
- list-style-type: none;
2039
- }
2040
-
2041
- .markdown-body .task-list-item label {
2042
- font-weight: var(--base-text-weight-normal, 400);
2043
- }
2044
-
2045
- .markdown-body .task-list-item.enabled label {
2046
- cursor: pointer;
2047
- }
2048
-
2049
- .markdown-body .task-list-item+.task-list-item {
2050
- margin-top: var(--base-size-4);
2051
- }
2052
-
2053
- .markdown-body .task-list-item .handle {
2054
- display: none;
2055
- }
2056
-
2057
- .markdown-body .task-list-item-checkbox {
2058
- margin: 0 .2em .25em -1.4em;
2059
- vertical-align: middle;
2060
- }
2061
-
2062
- .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
2063
- margin: 0 -1.6em .25em .2em;
2064
- }
2065
-
2066
- .markdown-body .contains-task-list {
2067
- position: relative;
2068
- }
2069
-
2070
- .markdown-body .contains-task-list:hover .task-list-item-convert-container,
2071
- .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
2072
- display: block;
2073
- width: auto;
2074
- height: 24px;
2075
- overflow: visible;
2076
- clip: auto;
2077
- }
2078
-
2079
- .markdown-body ::-webkit-calendar-picker-indicator {
2080
- filter: invert(50%);
2081
- }
2082
-
2083
- .markdown-body .markdown-alert {
2084
- padding: var(--base-size-8) var(--base-size-16);
2085
- margin-bottom: var(--base-size-16);
2086
- color: inherit;
2087
- border-left: .25em solid var(--borderColor-default);
2088
- }
2089
-
2090
- .markdown-body .markdown-alert>:first-child {
2091
- margin-top: 0;
2092
- }
2093
-
2094
- .markdown-body .markdown-alert>:last-child {
2095
- margin-bottom: 0;
2096
- }
2097
-
2098
- .markdown-body .markdown-alert .markdown-alert-title {
2099
- display: flex;
2100
- font-weight: var(--base-text-weight-medium, 500);
2101
- align-items: center;
2102
- line-height: 1;
2103
- }
2104
-
2105
- .markdown-body .markdown-alert.markdown-alert-note {
2106
- border-left-color: var(--borderColor-accent-emphasis);
2107
- }
2108
-
2109
- .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
2110
- color: var(--fgColor-accent);
2111
- }
2112
-
2113
- .markdown-body .markdown-alert.markdown-alert-important {
2114
- border-left-color: var(--borderColor-done-emphasis);
2115
- }
2116
-
2117
- .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
2118
- color: var(--fgColor-done);
2119
- }
2120
-
2121
- .markdown-body .markdown-alert.markdown-alert-warning {
2122
- border-left-color: var(--borderColor-attention-emphasis);
2123
- }
2124
-
2125
- .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
2126
- color: var(--fgColor-attention);
2127
- }
2128
-
2129
- .markdown-body .markdown-alert.markdown-alert-tip {
2130
- border-left-color: var(--borderColor-success-emphasis);
2131
- }
2132
-
2133
- .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
2134
- color: var(--fgColor-success);
2135
- }
2136
-
2137
- .markdown-body .markdown-alert.markdown-alert-caution {
2138
- border-left-color: var(--borderColor-danger-emphasis);
2139
- }
2140
-
2141
- .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
2142
- color: var(--fgColor-danger);
2143
- }
2144
-
2145
- .markdown-body>*:first-child>.heading-element:first-child {
2146
- margin-top: 0 !important;
2147
- }`
2148
-
2149
- return (
2150
- <div style={{ position: "relative" }}>
2151
- <style dangerouslySetInnerHTML={{ __html: styles + markdownBody }}></style>
2152
- <ChatTrigger
2153
- triggerRef={triggerRef}
2154
- open={open}
2155
- setOpen={setOpen}
2156
- style={chat_trigger_style}
2157
- />
2158
- <ChatWindow
2159
- api_key={"sk-Rz3Y6jEmekP0uiIJ_NXczUc_s9Bp-z-O521a2QTsPSA"}
2160
- input_type={input_type}
2161
- output_type={output_type}
2162
- output_component={output_component}
2163
- open={open}
2164
- height={height}
2165
- width={width}
2166
- send_icon_style={send_icon_style}
2167
- bot_message_style={bot_message_style}
2168
- user_message_style={user_message_style}
2169
- chat_window_style={chat_window_style}
2170
- error_message_style={error_message_style}
2171
- send_button_style={send_button_style}
2172
- placeholder={placeholder}
2173
- input_style={input_style}
2174
- online={online}
2175
- online_message={online_message}
2176
- offline_message={offline_message}
2177
- placeholder_sending={placeholder_sending}
2178
- window_title={"测试"}
2179
- input_container_style={input_container_style}
2180
- tweaks={tweaks}
2181
- flowId={flow_id}
2182
- hostUrl={host_url}
2183
- updateLastMessage={updateLastMessage}
2184
- addMessage={addMessage}
2185
- messages={messages}
2186
- triggerRef={triggerRef}
2187
- position={chat_position}
2188
- sessionId={sessionId}
2189
- additional_headers={additional_headers}
2190
- />
2191
- </div>
2192
- );
2193
- }
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: var(--fgColor-default);
1796
+ background-color: var(--bgColor-muted);
1797
+ border-radius: 6px;
1798
+ }
1799
+
1800
+ .markdown-body pre code,
1801
+ .markdown-body pre tt {
1802
+ display: inline;
1803
+ max-width: auto;
1804
+ padding: 0;
1805
+ margin: 0;
1806
+ overflow: visible;
1807
+ line-height: inherit;
1808
+ word-wrap: normal;
1809
+ background-color: transparent;
1810
+ border: 0;
1811
+ }
1812
+
1813
+ .markdown-body .csv-data td,
1814
+ .markdown-body .csv-data th {
1815
+ padding: 5px;
1816
+ overflow: hidden;
1817
+ font-size: 12px;
1818
+ line-height: 1;
1819
+ text-align: left;
1820
+ white-space: nowrap;
1821
+ }
1822
+
1823
+ .markdown-body .csv-data .blob-num {
1824
+ padding: 10px 8px 9px;
1825
+ text-align: right;
1826
+ border: 0;
1827
+ }
1828
+
1829
+ .markdown-body .csv-data tr {
1830
+ border-top: 0;
1831
+ }
1832
+
1833
+ .markdown-body .csv-data th {
1834
+ font-weight: var(--base-text-weight-semibold, 600);
1835
+ background: var(--bgColor-muted);
1836
+ border-top: 0;
1837
+ }
1838
+
1839
+ .markdown-body [data-footnote-ref]::before {
1840
+ content: "[";
1841
+ }
1842
+
1843
+ .markdown-body [data-footnote-ref]::after {
1844
+ content: "]";
1845
+ }
1846
+
1847
+ .markdown-body .footnotes {
1848
+ font-size: 12px;
1849
+ color: var(--fgColor-muted);
1850
+ border-top: 1px solid var(--borderColor-default);
1851
+ }
1852
+
1853
+ .markdown-body .footnotes ol {
1854
+ padding-left: 16px;
1855
+ }
1856
+
1857
+ .markdown-body .footnotes ol ul {
1858
+ display: inline-block;
1859
+ padding-left: 16px;
1860
+ margin-top: 16px;
1861
+ }
1862
+
1863
+ .markdown-body .footnotes li {
1864
+ position: relative;
1865
+ }
1866
+
1867
+ .markdown-body .footnotes li:target::before {
1868
+ position: absolute;
1869
+ top: -8px;
1870
+ right: -8px;
1871
+ bottom: -8px;
1872
+ left: -24px;
1873
+ pointer-events: none;
1874
+ content: "";
1875
+ border: 2px solid var(--borderColor-accent-emphasis);
1876
+ border-radius: 6px;
1877
+ }
1878
+
1879
+ .markdown-body .footnotes li:target {
1880
+ color: var(--fgColor-default);
1881
+ }
1882
+
1883
+ .markdown-body .footnotes .data-footnote-backref g-emoji {
1884
+ font-family: monospace;
1885
+ }
1886
+
1887
+ .markdown-body .pl-c {
1888
+ color: var(--color-prettylights-syntax-comment);
1889
+ }
1890
+
1891
+ .markdown-body .pl-c1,
1892
+ .markdown-body .pl-s .pl-v {
1893
+ color: var(--color-prettylights-syntax-constant);
1894
+ }
1895
+
1896
+ .markdown-body .pl-e,
1897
+ .markdown-body .pl-en {
1898
+ color: var(--color-prettylights-syntax-entity);
1899
+ }
1900
+
1901
+ .markdown-body .pl-smi,
1902
+ .markdown-body .pl-s .pl-s1 {
1903
+ color: var(--color-prettylights-syntax-storage-modifier-import);
1904
+ }
1905
+
1906
+ .markdown-body .pl-ent {
1907
+ color: var(--color-prettylights-syntax-entity-tag);
1908
+ }
1909
+
1910
+ .markdown-body .pl-k {
1911
+ color: var(--color-prettylights-syntax-keyword);
1912
+ }
1913
+
1914
+ .markdown-body .pl-s,
1915
+ .markdown-body .pl-pds,
1916
+ .markdown-body .pl-s .pl-pse .pl-s1,
1917
+ .markdown-body .pl-sr,
1918
+ .markdown-body .pl-sr .pl-cce,
1919
+ .markdown-body .pl-sr .pl-sre,
1920
+ .markdown-body .pl-sr .pl-sra {
1921
+ color: var(--color-prettylights-syntax-string);
1922
+ }
1923
+
1924
+ .markdown-body .pl-v,
1925
+ .markdown-body .pl-smw {
1926
+ color: var(--color-prettylights-syntax-variable);
1927
+ }
1928
+
1929
+ .markdown-body .pl-bu {
1930
+ color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
1931
+ }
1932
+
1933
+ .markdown-body .pl-ii {
1934
+ color: var(--color-prettylights-syntax-invalid-illegal-text);
1935
+ background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
1936
+ }
1937
+
1938
+ .markdown-body .pl-c2 {
1939
+ color: var(--color-prettylights-syntax-carriage-return-text);
1940
+ background-color: var(--color-prettylights-syntax-carriage-return-bg);
1941
+ }
1942
+
1943
+ .markdown-body .pl-sr .pl-cce {
1944
+ font-weight: bold;
1945
+ color: var(--color-prettylights-syntax-string-regexp);
1946
+ }
1947
+
1948
+ .markdown-body .pl-ml {
1949
+ color: var(--color-prettylights-syntax-markup-list);
1950
+ }
1951
+
1952
+ .markdown-body .pl-mh,
1953
+ .markdown-body .pl-mh .pl-en,
1954
+ .markdown-body .pl-ms {
1955
+ font-weight: bold;
1956
+ color: var(--color-prettylights-syntax-markup-heading);
1957
+ }
1958
+
1959
+ .markdown-body .pl-mi {
1960
+ font-style: italic;
1961
+ color: var(--color-prettylights-syntax-markup-italic);
1962
+ }
1963
+
1964
+ .markdown-body .pl-mb {
1965
+ font-weight: bold;
1966
+ color: var(--color-prettylights-syntax-markup-bold);
1967
+ }
1968
+
1969
+ .markdown-body .pl-md {
1970
+ color: var(--color-prettylights-syntax-markup-deleted-text);
1971
+ background-color: var(--color-prettylights-syntax-markup-deleted-bg);
1972
+ }
1973
+
1974
+ .markdown-body .pl-mi1 {
1975
+ color: var(--color-prettylights-syntax-markup-inserted-text);
1976
+ background-color: var(--color-prettylights-syntax-markup-inserted-bg);
1977
+ }
1978
+
1979
+ .markdown-body .pl-mc {
1980
+ color: var(--color-prettylights-syntax-markup-changed-text);
1981
+ background-color: var(--color-prettylights-syntax-markup-changed-bg);
1982
+ }
1983
+
1984
+ .markdown-body .pl-mi2 {
1985
+ color: var(--color-prettylights-syntax-markup-ignored-text);
1986
+ background-color: var(--color-prettylights-syntax-markup-ignored-bg);
1987
+ }
1988
+
1989
+ .markdown-body .pl-mdr {
1990
+ font-weight: bold;
1991
+ color: var(--color-prettylights-syntax-meta-diff-range);
1992
+ }
1993
+
1994
+ .markdown-body .pl-ba {
1995
+ color: var(--color-prettylights-syntax-brackethighlighter-angle);
1996
+ }
1997
+
1998
+ .markdown-body .pl-sg {
1999
+ color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
2000
+ }
2001
+
2002
+ .markdown-body .pl-corl {
2003
+ text-decoration: underline;
2004
+ color: var(--color-prettylights-syntax-constant-other-reference-link);
2005
+ }
2006
+
2007
+ .markdown-body [role=button]:focus:not(:focus-visible),
2008
+ .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
2009
+ .markdown-body button:focus:not(:focus-visible),
2010
+ .markdown-body summary:focus:not(:focus-visible),
2011
+ .markdown-body a:focus:not(:focus-visible) {
2012
+ outline: none;
2013
+ box-shadow: none;
2014
+ }
2015
+
2016
+ .markdown-body [tabindex="0"]:focus:not(:focus-visible),
2017
+ .markdown-body details-dialog:focus:not(:focus-visible) {
2018
+ outline: none;
2019
+ }
2020
+
2021
+ .markdown-body g-emoji {
2022
+ display: inline-block;
2023
+ min-width: 1ch;
2024
+ font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
2025
+ font-size: 1em;
2026
+ font-style: normal !important;
2027
+ font-weight: var(--base-text-weight-normal, 400);
2028
+ line-height: 1;
2029
+ vertical-align: -0.075em;
2030
+ }
2031
+
2032
+ .markdown-body g-emoji img {
2033
+ width: 1em;
2034
+ height: 1em;
2035
+ }
2036
+
2037
+ .markdown-body .task-list-item {
2038
+ list-style-type: none;
2039
+ }
2040
+
2041
+ .markdown-body .task-list-item label {
2042
+ font-weight: var(--base-text-weight-normal, 400);
2043
+ }
2044
+
2045
+ .markdown-body .task-list-item.enabled label {
2046
+ cursor: pointer;
2047
+ }
2048
+
2049
+ .markdown-body .task-list-item+.task-list-item {
2050
+ margin-top: var(--base-size-4);
2051
+ }
2052
+
2053
+ .markdown-body .task-list-item .handle {
2054
+ display: none;
2055
+ }
2056
+
2057
+ .markdown-body .task-list-item-checkbox {
2058
+ margin: 0 .2em .25em -1.4em;
2059
+ vertical-align: middle;
2060
+ }
2061
+
2062
+ .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
2063
+ margin: 0 -1.6em .25em .2em;
2064
+ }
2065
+
2066
+ .markdown-body .contains-task-list {
2067
+ position: relative;
2068
+ }
2069
+
2070
+ .markdown-body .contains-task-list:hover .task-list-item-convert-container,
2071
+ .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
2072
+ display: block;
2073
+ width: auto;
2074
+ height: 24px;
2075
+ overflow: visible;
2076
+ clip: auto;
2077
+ }
2078
+
2079
+ .markdown-body ::-webkit-calendar-picker-indicator {
2080
+ filter: invert(50%);
2081
+ }
2082
+
2083
+ .markdown-body .markdown-alert {
2084
+ padding: var(--base-size-8) var(--base-size-16);
2085
+ margin-bottom: var(--base-size-16);
2086
+ color: inherit;
2087
+ border-left: .25em solid var(--borderColor-default);
2088
+ }
2089
+
2090
+ .markdown-body .markdown-alert>:first-child {
2091
+ margin-top: 0;
2092
+ }
2093
+
2094
+ .markdown-body .markdown-alert>:last-child {
2095
+ margin-bottom: 0;
2096
+ }
2097
+
2098
+ .markdown-body .markdown-alert .markdown-alert-title {
2099
+ display: flex;
2100
+ font-weight: var(--base-text-weight-medium, 500);
2101
+ align-items: center;
2102
+ line-height: 1;
2103
+ }
2104
+
2105
+ .markdown-body .markdown-alert.markdown-alert-note {
2106
+ border-left-color: var(--borderColor-accent-emphasis);
2107
+ }
2108
+
2109
+ .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
2110
+ color: var(--fgColor-accent);
2111
+ }
2112
+
2113
+ .markdown-body .markdown-alert.markdown-alert-important {
2114
+ border-left-color: var(--borderColor-done-emphasis);
2115
+ }
2116
+
2117
+ .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
2118
+ color: var(--fgColor-done);
2119
+ }
2120
+
2121
+ .markdown-body .markdown-alert.markdown-alert-warning {
2122
+ border-left-color: var(--borderColor-attention-emphasis);
2123
+ }
2124
+
2125
+ .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
2126
+ color: var(--fgColor-attention);
2127
+ }
2128
+
2129
+ .markdown-body .markdown-alert.markdown-alert-tip {
2130
+ border-left-color: var(--borderColor-success-emphasis);
2131
+ }
2132
+
2133
+ .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
2134
+ color: var(--fgColor-success);
2135
+ }
2136
+
2137
+ .markdown-body .markdown-alert.markdown-alert-caution {
2138
+ border-left-color: var(--borderColor-danger-emphasis);
2139
+ }
2140
+
2141
+ .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
2142
+ color: var(--fgColor-danger);
2143
+ }
2144
+
2145
+ .markdown-body>*:first-child>.heading-element:first-child {
2146
+ margin-top: 0 !important;
2147
+ }`
2148
+
2149
+ return (
2150
+ <div style={{ position: "relative" }}>
2151
+ <style dangerouslySetInnerHTML={{ __html: styles + markdownBody }}></style>
2152
+ <ChatTrigger
2153
+ triggerRef={triggerRef}
2154
+ open={open}
2155
+ setOpen={setOpen}
2156
+ style={chat_trigger_style}
2157
+ />
2158
+ <ChatWindow
2159
+ api_key={"sk-Rz3Y6jEmekP0uiIJ_NXczUc_s9Bp-z-O521a2QTsPSA"}
2160
+ input_type={input_type}
2161
+ output_type={output_type}
2162
+ output_component={output_component}
2163
+ open={open}
2164
+ height={height}
2165
+ width={width}
2166
+ send_icon_style={send_icon_style}
2167
+ bot_message_style={bot_message_style}
2168
+ user_message_style={user_message_style}
2169
+ chat_window_style={chat_window_style}
2170
+ error_message_style={error_message_style}
2171
+ send_button_style={send_button_style}
2172
+ placeholder={placeholder}
2173
+ input_style={input_style}
2174
+ online={online}
2175
+ online_message={online_message}
2176
+ offline_message={offline_message}
2177
+ placeholder_sending={placeholder_sending}
2178
+ window_title={"测试"}
2179
+ input_container_style={input_container_style}
2180
+ tweaks={tweaks}
2181
+ flowId={flow_id}
2182
+ hostUrl={host_url}
2183
+ updateLastMessage={updateLastMessage}
2184
+ addMessage={addMessage}
2185
+ messages={messages}
2186
+ triggerRef={triggerRef}
2187
+ position={chat_position}
2188
+ sessionId={sessionId}
2189
+ additional_headers={additional_headers}
2190
+ />
2191
+ </div>
2192
+ );
2193
+ }