reachat 1.5.1 → 1.6.0

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.
package/dist/index.js CHANGED
@@ -10,2144 +10,40 @@
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
14
- import * as React from "react";
15
- import { createContext, useContext, useRef, forwardRef, useState, useEffect, useImperativeHandle, useMemo, useCallback } from "react";
16
- import { Button, cn, Textarea, Ellipsis, DateFormat, IconButton, Card, Divider, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
17
- import { Slot } from "@radix-ui/react-slot";
18
- import { motion, AnimatePresence } from "motion/react";
19
- import ReactMarkdown from "react-markdown";
20
- import { Prism } from "react-syntax-highlighter";
21
- import rehypeKatex from "rehype-katex";
22
- import { findAndReplace } from "mdast-util-find-and-replace";
23
- import { useHotkeys } from "reakeys";
24
- import remarkGfm from "remark-gfm";
25
- import remarkYoutube from "remark-youtube";
26
- import remarkMath from "remark-math";
27
- import { isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, format } from "date-fns";
28
- const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "send" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M14.6111 2.33327C14.5349 2.3339 14.4598 2.35194 14.3917 2.386L2.39168 8.386C2.31456 8.42456 2.24872 8.4824 2.20055 8.55391C2.15238 8.62543 2.12352 8.70818 2.11677 8.79414C2.11002 8.88009 2.12561 8.96634 2.16203 9.04449C2.19845 9.12264 2.25446 9.19005 2.32462 9.24017L4.52514 10.8124L5.47371 13.6581C5.50257 13.7447 5.55457 13.8217 5.62406 13.8808C5.69355 13.9399 5.7779 13.9789 5.86796 13.9935C5.95802 14.0082 6.05036 13.9979 6.13499 13.9638C6.21962 13.9297 6.2933 13.873 6.34806 13.8001L7.05249 12.8606L10.3207 15.2376C10.3843 15.2839 10.4579 15.3146 10.5355 15.3271C10.6132 15.3396 10.6927 15.3336 10.7676 15.3097C10.8425 15.2857 10.9107 15.2444 10.9667 15.1891C11.0226 15.1338 11.0647 15.0661 11.0896 14.9915L15.0896 2.99147C15.1148 2.91597 15.1216 2.83555 15.1094 2.7569C15.0972 2.67825 15.0665 2.60363 15.0197 2.53926C14.9729 2.47488 14.9114 2.42261 14.8403 2.38678C14.7693 2.35096 14.6907 2.33261 14.6111 2.33327ZM13.2478 5.35345L10.3565 14.0266L7.67293 12.0755L13.2478 5.35345ZM10.684 5.35801L4.934 9.87559L3.58113 8.90879L10.684 5.35801ZM11.2784 6.16205L6.56746 11.843C6.56681 11.8437 6.56616 11.8443 6.56551 11.845L6.56355 11.8476C6.55841 11.8538 6.55342 11.8601 6.54858 11.8665C6.54319 11.8733 6.53798 11.8802 6.53295 11.8873L6.12085 12.4361L5.53426 10.6751L11.2784 6.16205Z", fill: "currentColor" })));
29
- const SvgStop = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-octagon-x", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React.createElement("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }), /* @__PURE__ */ React.createElement("path", { d: "m9 9 6 6" }));
30
- const ChatContext = createContext({
31
- sessions: [],
32
- activeSessionId: null
33
- });
34
- const SvgPaperclip = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-paperclip", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
35
- const FileInput = ({
36
- allowedFiles,
37
- onFileUpload,
38
- isLoading,
39
- disabled,
40
- attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
41
- }) => {
42
- const { theme } = useContext(ChatContext);
43
- const fileInputRef = useRef(null);
44
- return /* @__PURE__ */ jsxs(Fragment, { children: [
45
- /* @__PURE__ */ jsx(
46
- "input",
47
- {
48
- type: "file",
49
- ref: fileInputRef,
50
- className: "hidden",
51
- accept: allowedFiles.join(","),
52
- onChange: onFileUpload
53
- }
54
- ),
55
- /* @__PURE__ */ jsx(
56
- Button,
57
- {
58
- title: "Upload",
59
- variant: "text",
60
- disabled: isLoading || disabled,
61
- className: cn(theme.input.upload),
62
- onClick: () => {
63
- var _a;
64
- return (_a = fileInputRef.current) == null ? void 0 : _a.click();
65
- },
66
- children: attachIcon
67
- }
68
- )
69
- ] });
70
- };
71
- const ChatInput = forwardRef(({
72
- allowedFiles,
73
- placeholder,
74
- defaultValue,
75
- sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
76
- stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
77
- attachIcon
78
- }, ref) => {
79
- const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload, activeSessionId } = useContext(ChatContext);
80
- const [message, setMessage] = useState("");
81
- const inputRef = useRef(null);
82
- useEffect(() => {
83
- if (inputRef.current) {
84
- inputRef.current.focus();
85
- }
86
- }, [activeSessionId, inputRef]);
87
- useImperativeHandle(ref, () => ({
88
- focus: () => {
89
- var _a;
90
- (_a = inputRef.current) == null ? void 0 : _a.focus();
91
- }
92
- }));
93
- const handleSendMessage = () => {
94
- if (message.trim()) {
95
- sendMessage == null ? void 0 : sendMessage(message);
96
- setMessage("");
97
- }
98
- };
99
- const handleKeyPress = (e) => {
100
- if (e.key === "Enter" && !e.shiftKey) {
101
- e.preventDefault();
102
- handleSendMessage();
103
- }
104
- };
105
- const handleFileUpload = (event) => {
106
- var _a;
107
- const file = (_a = event.target.files) == null ? void 0 : _a[0];
108
- if (file && fileUpload) {
109
- fileUpload(file);
110
- }
111
- };
112
- return /* @__PURE__ */ jsxs("div", { className: cn(theme.input.base), children: [
113
- /* @__PURE__ */ jsx(
114
- Textarea,
115
- {
116
- ref: inputRef,
117
- containerClassName: cn(theme.input.input),
118
- minRows: 1,
119
- autoFocus: true,
120
- value: message,
121
- defaultValue,
122
- onKeyPress: handleKeyPress,
123
- placeholder,
124
- disabled: isLoading || disabled,
125
- onChange: (e) => setMessage(e.target.value)
126
- }
127
- ),
128
- /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
129
- (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsx(
130
- FileInput,
131
- {
132
- allowedFiles,
133
- onFileUpload: handleFileUpload,
134
- isLoading,
135
- disabled,
136
- attachIcon
137
- }
138
- ),
139
- isLoading && /* @__PURE__ */ jsx(
140
- Button,
141
- {
142
- title: "Stop",
143
- className: cn(theme.input.actions.stop),
144
- onClick: stopMessage,
145
- disabled,
146
- children: stopIcon
147
- }
148
- ),
149
- /* @__PURE__ */ jsx(
150
- Button,
151
- {
152
- title: "Send",
153
- className: cn(theme.input.actions.send),
154
- onClick: handleSendMessage,
155
- disabled: isLoading || disabled,
156
- children: sendIcon
157
- }
158
- )
159
- ] })
160
- ] });
161
- });
162
- const SessionEmpty = ({
163
- children
164
- }) => {
165
- const { theme } = useContext(ChatContext);
166
- return /* @__PURE__ */ jsx("div", { className: cn(theme.empty), children });
167
- };
168
- const SessionMessagesHeader = ({ children }) => {
169
- const { activeSession, theme } = useContext(ChatContext);
170
- const Comp = children ? Slot : "header";
171
- if (!activeSession) {
172
- return null;
173
- }
174
- return /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.header), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
175
- /* @__PURE__ */ jsx("h2", { className: cn(theme.messages.title), children: /* @__PURE__ */ jsx(Ellipsis, { limit: 125, value: activeSession.title }) }),
176
- /* @__PURE__ */ jsx(
177
- DateFormat,
178
- {
179
- className: cn(theme.messages.date),
180
- date: activeSession.createdAt
181
- }
182
- )
183
- ] }) });
184
- };
185
- const SvgBack = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-left", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m15 18-6-6 6-6" }));
186
- const SessionMessagePanel = ({ children }) => {
187
- const { activeSessionId, theme, isCompact, selectSession, viewType } = useContext(ChatContext);
188
- const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
189
- return isVisible && /* @__PURE__ */ jsx(
190
- motion.div,
191
- {
192
- initial: { translateX: "200%" },
193
- animate: {
194
- translateX: "0%",
195
- transition: {
196
- type: "tween",
197
- ease: "linear",
198
- duration: 0.2,
199
- when: "beforeChildren"
200
- }
201
- },
202
- exit: { translateX: "200%" },
203
- className: cn(theme.messages.base, {
204
- [theme.messages.companion]: isCompact,
205
- [theme.messages.console]: !isCompact
206
- }),
207
- children: /* @__PURE__ */ jsxs("div", { className: cn(theme.messages.inner), children: [
208
- isCompact && viewType !== "chat" && /* @__PURE__ */ jsxs(
209
- Button,
210
- {
211
- variant: "text",
212
- size: "small",
213
- onClick: () => selectSession(null),
214
- className: cn(theme.messages.back),
215
- children: [
216
- /* @__PURE__ */ jsx(SvgBack, {}),
217
- "Back"
218
- ]
219
- }
220
- ),
221
- children
222
- ] })
223
- }
224
- );
225
- };
226
- const SvgCopy = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-copy", ...props }, /* @__PURE__ */ React.createElement("rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }), /* @__PURE__ */ React.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }));
227
- const dark = {
228
- 'code[class*="language-"]': {
229
- "background": "#11111f",
230
- "color": "#e2e8f0",
231
- "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
232
- "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
233
- "direction": "ltr",
234
- "textAlign": "left",
235
- "whiteSpace": "pre",
236
- "wordSpacing": "normal",
237
- "wordBreak": "normal",
238
- "lineHeight": "1.5",
239
- "MozTabSize": "2",
240
- "OTabSize": "2",
241
- "tabSize": "2",
242
- "WebkitHyphens": "none",
243
- "MozHyphens": "none",
244
- "msHyphens": "none",
245
- "hyphens": "none"
246
- },
247
- 'pre[class*="language-"]': {
248
- "background": "#11111f",
249
- "color": "#e2e8f0",
250
- "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
251
- "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
252
- "direction": "ltr",
253
- "textAlign": "left",
254
- "whiteSpace": "pre",
255
- "wordSpacing": "normal",
256
- "wordBreak": "normal",
257
- "lineHeight": "1.5",
258
- "MozTabSize": "2",
259
- "OTabSize": "2",
260
- "tabSize": "2",
261
- "WebkitHyphens": "none",
262
- "MozHyphens": "none",
263
- "msHyphens": "none",
264
- "hyphens": "none",
265
- "padding": "1em",
266
- "margin": "0",
267
- "overflow": "auto"
268
- },
269
- 'code[class*="language-"]::-moz-selection': {
270
- "background": "#1e293b",
271
- "color": "inherit",
272
- "textShadow": "none"
273
- },
274
- 'code[class*="language-"] *::-moz-selection': {
275
- "background": "#1e293b",
276
- "color": "inherit",
277
- "textShadow": "none"
278
- },
279
- 'pre[class*="language-"] *::-moz-selection': {
280
- "background": "#1e293b",
281
- "color": "inherit",
282
- "textShadow": "none"
283
- },
284
- 'code[class*="language-"]::selection': {
285
- "background": "#1e293b",
286
- "color": "inherit",
287
- "textShadow": "none"
288
- },
289
- 'code[class*="language-"] *::selection': {
290
- "background": "#1e293b",
291
- "color": "inherit",
292
- "textShadow": "none"
293
- },
294
- 'pre[class*="language-"] *::selection': {
295
- "background": "#1e293b",
296
- "color": "inherit",
297
- "textShadow": "none"
298
- },
299
- ':not(pre) > code[class*="language-"]': {
300
- "padding": "0.2em 0.3em",
301
- "borderRadius": "0.3em",
302
- "whiteSpace": "normal"
303
- },
304
- "comment": {
305
- "color": "#64748b",
306
- "fontStyle": "italic"
307
- },
308
- "prolog": {
309
- "color": "#64748b"
310
- },
311
- "cdata": {
312
- "color": "#64748b"
313
- },
314
- "doctype": {
315
- "color": "#e2e8f0"
316
- },
317
- "punctuation": {
318
- "color": "#e2e8f0"
319
- },
320
- "entity": {
321
- "color": "#3b82f6",
322
- "cursor": "help"
323
- },
324
- "attr-name": {
325
- "color": "#f59e0b"
326
- },
327
- "class-name": {
328
- "color": "#f59e0b"
329
- },
330
- "boolean": {
331
- "color": "#3b82f6"
332
- },
333
- "constant": {
334
- "color": "#3b82f6"
335
- },
336
- "number": {
337
- "color": "#3b82f6"
338
- },
339
- "atrule": {
340
- "color": "#f59e0b"
341
- },
342
- "keyword": {
343
- "color": "#f472b6"
344
- },
345
- "property": {
346
- "color": "#3b82f6"
347
- },
348
- "tag": {
349
- "color": "#3b82f6"
350
- },
351
- "symbol": {
352
- "color": "#3b82f6"
353
- },
354
- "deleted": {
355
- "color": "#ef4444"
356
- },
357
- "important": {
358
- "color": "#f472b6"
359
- },
360
- "selector": {
361
- "color": "#10b981"
362
- },
363
- "string": {
364
- "color": "#10b981"
365
- },
366
- "char": {
367
- "color": "#10b981"
368
- },
369
- "builtin": {
370
- "color": "#10b981"
371
- },
372
- "inserted": {
373
- "color": "#10b981"
374
- },
375
- "regex": {
376
- "color": "#10b981"
377
- },
378
- "attr-value": {
379
- "color": "#10b981"
380
- },
381
- "attr-value > .token.punctuation": {
382
- "color": "#10b981"
383
- },
384
- "variable": {
385
- "color": "#60a5fa"
386
- },
387
- "operator": {
388
- "color": "#60a5fa"
389
- },
390
- "function": {
391
- "color": "#60a5fa"
392
- },
393
- "url": {
394
- "color": "#60a5fa"
395
- },
396
- "attr-value > .token.punctuation.attr-equals": {
397
- "color": "#e2e8f0"
398
- },
399
- "special-attr > .token.attr-value > .token.value.css": {
400
- "color": "#e2e8f0"
401
- },
402
- ".language-css .token.selector": {
403
- "color": "#3b82f6"
404
- },
405
- ".language-css .token.property": {
406
- "color": "#e2e8f0"
407
- },
408
- ".language-css .token.function": {
409
- "color": "#60a5fa"
410
- },
411
- ".language-css .token.url > .token.function": {
412
- "color": "#60a5fa"
413
- },
414
- ".language-css .token.url > .token.string.url": {
415
- "color": "#10b981"
416
- },
417
- ".language-css .token.important": {
418
- "color": "#f472b6"
419
- },
420
- ".language-css .token.atrule .token.rule": {
421
- "color": "#f472b6"
422
- },
423
- ".language-javascript .token.operator": {
424
- "color": "#f472b6"
425
- },
426
- ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
427
- "color": "#ef4444"
428
- },
429
- ".language-json .token.operator": {
430
- "color": "#e2e8f0"
431
- },
432
- ".language-json .token.null.keyword": {
433
- "color": "#3b82f6"
434
- },
435
- ".language-markdown .token.url": {
436
- "color": "#e2e8f0"
437
- },
438
- ".language-markdown .token.url > .token.operator": {
439
- "color": "#e2e8f0"
440
- },
441
- ".language-markdown .token.url-reference.url > .token.string": {
442
- "color": "#e2e8f0"
443
- },
444
- ".language-markdown .token.url > .token.content": {
445
- "color": "#60a5fa"
446
- },
447
- ".language-markdown .token.url > .token.url": {
448
- "color": "#60a5fa"
449
- },
450
- ".language-markdown .token.url-reference.url": {
451
- "color": "#60a5fa"
452
- },
453
- ".language-markdown .token.blockquote.punctuation": {
454
- "color": "#64748b",
455
- "fontStyle": "italic"
456
- },
457
- ".language-markdown .token.hr.punctuation": {
458
- "color": "#64748b",
459
- "fontStyle": "italic"
460
- },
461
- ".language-markdown .token.code-snippet": {
462
- "color": "#10b981"
463
- },
464
- ".language-markdown .token.bold .token.content": {
465
- "color": "#f59e0b"
466
- },
467
- ".language-markdown .token.italic .token.content": {
468
- "color": "#f472b6"
469
- },
470
- ".language-markdown .token.strike .token.content": {
471
- "color": "#3b82f6"
472
- },
473
- ".language-markdown .token.strike .token.punctuation": {
474
- "color": "#3b82f6"
475
- },
476
- ".language-markdown .token.list.punctuation": {
477
- "color": "#3b82f6"
478
- },
479
- ".language-markdown .token.title.important > .token.punctuation": {
480
- "color": "#3b82f6"
481
- },
482
- "bold": {
483
- "fontWeight": "bold"
484
- },
485
- "italic": {
486
- "fontStyle": "italic"
487
- },
488
- "namespace": {
489
- "Opacity": "0.8"
490
- },
491
- "token.tab:not(:empty):before": {
492
- "color": "#64748b",
493
- "textShadow": "none"
494
- },
495
- "token.cr:before": {
496
- "color": "#64748b",
497
- "textShadow": "none"
498
- },
499
- "token.lf:before": {
500
- "color": "#64748b",
501
- "textShadow": "none"
502
- },
503
- "token.space:before": {
504
- "color": "#64748b",
505
- "textShadow": "none"
506
- },
507
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
508
- "marginRight": "0.4em"
509
- },
510
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
511
- "background": "#1e293b",
512
- "color": "#94a3b8",
513
- "padding": "0.1em 0.4em",
514
- "borderRadius": "0.3em"
515
- },
516
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
517
- "background": "#1e293b",
518
- "color": "#94a3b8",
519
- "padding": "0.1em 0.4em",
520
- "borderRadius": "0.3em"
521
- },
522
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
523
- "background": "#1e293b",
524
- "color": "#94a3b8",
525
- "padding": "0.1em 0.4em",
526
- "borderRadius": "0.3em"
527
- },
528
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
529
- "background": "#3b82f6",
530
- "color": "#ffffff"
531
- },
532
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
533
- "background": "#3b82f6",
534
- "color": "#ffffff"
535
- },
536
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
537
- "background": "#3b82f6",
538
- "color": "#ffffff"
539
- },
540
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
541
- "background": "#3b82f6",
542
- "color": "#ffffff"
543
- },
544
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
545
- "background": "#3b82f6",
546
- "color": "#ffffff"
547
- },
548
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
549
- "background": "#3b82f6",
550
- "color": "#ffffff"
551
- },
552
- ".line-highlight.line-highlight": {
553
- "background": "rgba(59, 130, 246, 0.08)"
554
- },
555
- ".line-highlight.line-highlight:before": {
556
- "background": "#1e293b",
557
- "color": "#e2e8f0",
558
- "padding": "0.1em 0.6em",
559
- "borderRadius": "0.3em",
560
- "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
561
- },
562
- ".line-highlight.line-highlight[data-end]:after": {
563
- "background": "#1e293b",
564
- "color": "#e2e8f0",
565
- "padding": "0.1em 0.6em",
566
- "borderRadius": "0.3em",
567
- "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
568
- },
569
- "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
570
- "backgroundColor": "rgba(59, 130, 246, 0.08)"
571
- },
572
- ".line-numbers.line-numbers .line-numbers-rows": {
573
- "borderRightColor": "#1e293b"
574
- },
575
- ".command-line .command-line-prompt": {
576
- "borderRightColor": "#1e293b"
577
- },
578
- ".line-numbers .line-numbers-rows > span:before": {
579
- "color": "#64748b"
580
- },
581
- ".command-line .command-line-prompt > span:before": {
582
- "color": "#64748b"
583
- },
584
- ".rainbow-braces .token.token.punctuation.brace-level-1": {
585
- "color": "#3b82f6"
586
- },
587
- ".rainbow-braces .token.token.punctuation.brace-level-5": {
588
- "color": "#3b82f6"
589
- },
590
- ".rainbow-braces .token.token.punctuation.brace-level-9": {
591
- "color": "#3b82f6"
592
- },
593
- ".rainbow-braces .token.token.punctuation.brace-level-2": {
594
- "color": "#10b981"
595
- },
596
- ".rainbow-braces .token.token.punctuation.brace-level-6": {
597
- "color": "#10b981"
598
- },
599
- ".rainbow-braces .token.token.punctuation.brace-level-10": {
600
- "color": "#10b981"
601
- },
602
- ".rainbow-braces .token.token.punctuation.brace-level-3": {
603
- "color": "#60a5fa"
604
- },
605
- ".rainbow-braces .token.token.punctuation.brace-level-7": {
606
- "color": "#60a5fa"
607
- },
608
- ".rainbow-braces .token.token.punctuation.brace-level-11": {
609
- "color": "#60a5fa"
610
- },
611
- ".rainbow-braces .token.token.punctuation.brace-level-4": {
612
- "color": "#f472b6"
613
- },
614
- ".rainbow-braces .token.token.punctuation.brace-level-8": {
615
- "color": "#f472b6"
616
- },
617
- ".rainbow-braces .token.token.punctuation.brace-level-12": {
618
- "color": "#f472b6"
619
- },
620
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
621
- "backgroundColor": "rgba(239, 68, 68, 0.15)"
622
- },
623
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
624
- "backgroundColor": "rgba(239, 68, 68, 0.15)"
625
- },
626
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
627
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
628
- },
629
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
630
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
631
- },
632
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
633
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
634
- },
635
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
636
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
637
- },
638
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
639
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
640
- },
641
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
642
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
643
- },
644
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
645
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
646
- },
647
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
648
- "backgroundColor": "rgba(239, 68, 68, 0.25)"
649
- },
650
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
651
- "backgroundColor": "rgba(16, 185, 129, 0.15)"
652
- },
653
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
654
- "backgroundColor": "rgba(16, 185, 129, 0.15)"
655
- },
656
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
657
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
658
- },
659
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
660
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
661
- },
662
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
663
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
664
- },
665
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
666
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
667
- },
668
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
669
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
670
- },
671
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
672
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
673
- },
674
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
675
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
676
- },
677
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
678
- "backgroundColor": "rgba(16, 185, 129, 0.25)"
679
- },
680
- ".prism-previewer.prism-previewer:before": {
681
- "borderColor": "#11111f"
682
- },
683
- ".prism-previewer-gradient.prism-previewer-gradient div": {
684
- "borderColor": "#11111f",
685
- "borderRadius": "0.3em"
686
- },
687
- ".prism-previewer-color.prism-previewer-color:before": {
688
- "borderRadius": "0.3em"
689
- },
690
- ".prism-previewer-easing.prism-previewer-easing:before": {
691
- "borderRadius": "0.3em"
692
- },
693
- ".prism-previewer.prism-previewer:after": {
694
- "borderTopColor": "#11111f"
695
- },
696
- ".prism-previewer-flipped.prism-previewer-flipped.after": {
697
- "borderBottomColor": "#11111f"
698
- },
699
- ".prism-previewer-angle.prism-previewer-angle:before": {
700
- "background": "#1e293b"
701
- },
702
- ".prism-previewer-time.prism-previewer-time:before": {
703
- "background": "#1e293b"
704
- },
705
- ".prism-previewer-easing.prism-previewer-easing": {
706
- "background": "#1e293b"
707
- },
708
- ".prism-previewer-angle.prism-previewer-angle circle": {
709
- "stroke": "#e2e8f0",
710
- "strokeOpacity": "1"
711
- },
712
- ".prism-previewer-time.prism-previewer-time circle": {
713
- "stroke": "#e2e8f0",
714
- "strokeOpacity": "1"
715
- },
716
- ".prism-previewer-easing.prism-previewer-easing circle": {
717
- "stroke": "#e2e8f0",
718
- "fill": "transparent"
719
- },
720
- ".prism-previewer-easing.prism-previewer-easing path": {
721
- "stroke": "#e2e8f0"
722
- },
723
- ".prism-previewer-easing.prism-previewer-easing line": {
724
- "stroke": "#e2e8f0"
725
- }
726
- };
727
- const light = {
728
- 'code[class*="language-"]': {
729
- "background": "#fff",
730
- "color": "#1e293b",
731
- "textShadow": "none",
732
- "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
733
- "direction": "ltr",
734
- "textAlign": "left",
735
- "whiteSpace": "pre",
736
- "wordSpacing": "normal",
737
- "wordBreak": "normal",
738
- "lineHeight": "1.5",
739
- "MozTabSize": "2",
740
- "OTabSize": "2",
741
- "tabSize": "2",
742
- "WebkitHyphens": "none",
743
- "MozHyphens": "none",
744
- "msHyphens": "none",
745
- "hyphens": "none"
746
- },
747
- 'pre[class*="language-"]': {
748
- "background": "#fff",
749
- "color": "#1e293b",
750
- "textShadow": "none",
751
- "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
752
- "direction": "ltr",
753
- "textAlign": "left",
754
- "whiteSpace": "pre",
755
- "wordSpacing": "normal",
756
- "wordBreak": "normal",
757
- "lineHeight": "1.5",
758
- "MozTabSize": "2",
759
- "OTabSize": "2",
760
- "tabSize": "2",
761
- "WebkitHyphens": "none",
762
- "MozHyphens": "none",
763
- "msHyphens": "none",
764
- "hyphens": "none",
765
- "padding": "1em",
766
- "margin": "0.5em 0",
767
- "overflow": "auto",
768
- "borderRadius": "0.3em",
769
- "border": "1px solid #e2e8f0"
770
- },
771
- 'code[class*="language-"]::-moz-selection': {
772
- "background": "#e2e8f0",
773
- "color": "inherit",
774
- "textShadow": "none"
775
- },
776
- 'code[class*="language-"] *::-moz-selection': {
777
- "background": "#e2e8f0",
778
- "color": "inherit",
779
- "textShadow": "none"
780
- },
781
- 'pre[class*="language-"] *::-moz-selection': {
782
- "background": "#e2e8f0",
783
- "color": "inherit",
784
- "textShadow": "none"
785
- },
786
- 'code[class*="language-"]::selection': {
787
- "background": "#e2e8f0",
788
- "color": "inherit",
789
- "textShadow": "none"
790
- },
791
- 'code[class*="language-"] *::selection': {
792
- "background": "#e2e8f0",
793
- "color": "inherit",
794
- "textShadow": "none"
795
- },
796
- 'pre[class*="language-"] *::selection': {
797
- "background": "#e2e8f0",
798
- "color": "inherit",
799
- "textShadow": "none"
800
- },
801
- ':not(pre) > code[class*="language-"]': {
802
- "padding": "0.2em 0.3em",
803
- "borderRadius": "0.3em",
804
- "whiteSpace": "normal",
805
- "background": "#f1f5f9"
806
- },
807
- "comment": {
808
- "color": "#64748b",
809
- "fontStyle": "italic"
810
- },
811
- "prolog": {
812
- "color": "#64748b"
813
- },
814
- "cdata": {
815
- "color": "#64748b"
816
- },
817
- "doctype": {
818
- "color": "#1e293b"
819
- },
820
- "punctuation": {
821
- "color": "#64748b"
822
- },
823
- "entity": {
824
- "color": "#3b82f6",
825
- "cursor": "help"
826
- },
827
- "attr-name": {
828
- "color": "#ea580c"
829
- },
830
- "class-name": {
831
- "color": "#ea580c"
832
- },
833
- "boolean": {
834
- "color": "#3b82f6"
835
- },
836
- "constant": {
837
- "color": "#3b82f6"
838
- },
839
- "number": {
840
- "color": "#3b82f6"
841
- },
842
- "atrule": {
843
- "color": "#ea580c"
844
- },
845
- "keyword": {
846
- "color": "#9333ea"
847
- },
848
- "property": {
849
- "color": "#3b82f6"
850
- },
851
- "tag": {
852
- "color": "#3b82f6"
853
- },
854
- "symbol": {
855
- "color": "#3b82f6"
856
- },
857
- "deleted": {
858
- "color": "#dc2626"
859
- },
860
- "important": {
861
- "color": "#9333ea"
862
- },
863
- "selector": {
864
- "color": "#16a34a"
865
- },
866
- "string": {
867
- "color": "#16a34a"
868
- },
869
- "char": {
870
- "color": "#16a34a"
871
- },
872
- "builtin": {
873
- "color": "#16a34a"
874
- },
875
- "inserted": {
876
- "color": "#16a34a"
877
- },
878
- "regex": {
879
- "color": "#16a34a"
880
- },
881
- "attr-value": {
882
- "color": "#16a34a"
883
- },
884
- "attr-value > .token.punctuation": {
885
- "color": "#16a34a"
886
- },
887
- "variable": {
888
- "color": "#3b82f6"
889
- },
890
- "operator": {
891
- "color": "#3b82f6"
892
- },
893
- "function": {
894
- "color": "#3b82f6"
895
- },
896
- "url": {
897
- "color": "#3b82f6"
898
- },
899
- "attr-value > .token.punctuation.attr-equals": {
900
- "color": "#64748b"
901
- },
902
- "special-attr > .token.attr-value > .token.value.css": {
903
- "color": "#1e293b"
904
- },
905
- ".language-css .token.selector": {
906
- "color": "#3b82f6"
907
- },
908
- ".language-css .token.property": {
909
- "color": "#1e293b"
910
- },
911
- ".language-css .token.function": {
912
- "color": "#3b82f6"
913
- },
914
- ".language-css .token.url > .token.function": {
915
- "color": "#3b82f6"
916
- },
917
- ".language-css .token.url > .token.string.url": {
918
- "color": "#16a34a"
919
- },
920
- ".language-css .token.important": {
921
- "color": "#9333ea"
922
- },
923
- ".language-css .token.atrule .token.rule": {
924
- "color": "#9333ea"
925
- },
926
- ".language-javascript .token.operator": {
927
- "color": "#9333ea"
928
- },
929
- ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
930
- "color": "#dc2626"
931
- },
932
- ".language-json .token.operator": {
933
- "color": "#1e293b"
934
- },
935
- ".language-json .token.null.keyword": {
936
- "color": "#3b82f6"
937
- },
938
- ".language-markdown .token.url": {
939
- "color": "#1e293b"
940
- },
941
- ".language-markdown .token.url > .token.operator": {
942
- "color": "#1e293b"
943
- },
944
- ".language-markdown .token.url-reference.url > .token.string": {
945
- "color": "#1e293b"
946
- },
947
- ".language-markdown .token.url > .token.content": {
948
- "color": "#3b82f6"
949
- },
950
- ".language-markdown .token.url > .token.url": {
951
- "color": "#3b82f6"
952
- },
953
- ".language-markdown .token.url-reference.url": {
954
- "color": "#3b82f6"
955
- },
956
- ".language-markdown .token.blockquote.punctuation": {
957
- "color": "#64748b",
958
- "fontStyle": "italic"
959
- },
960
- ".language-markdown .token.hr.punctuation": {
961
- "color": "#64748b",
962
- "fontStyle": "italic"
963
- },
964
- ".language-markdown .token.code-snippet": {
965
- "color": "#16a34a"
966
- },
967
- ".language-markdown .token.bold .token.content": {
968
- "color": "#ea580c"
969
- },
970
- ".language-markdown .token.italic .token.content": {
971
- "color": "#9333ea"
972
- },
973
- ".language-markdown .token.strike .token.content": {
974
- "color": "#3b82f6"
975
- },
976
- ".language-markdown .token.strike .token.punctuation": {
977
- "color": "#3b82f6"
978
- },
979
- ".language-markdown .token.list.punctuation": {
980
- "color": "#3b82f6"
981
- },
982
- ".language-markdown .token.title.important > .token.punctuation": {
983
- "color": "#3b82f6"
984
- },
985
- "bold": {
986
- "fontWeight": "bold"
987
- },
988
- "italic": {
989
- "fontStyle": "italic"
990
- },
991
- "namespace": {
992
- "Opacity": "0.8"
993
- },
994
- "token.tab:not(:empty):before": {
995
- "color": "#94a3b8"
996
- },
997
- "token.cr:before": {
998
- "color": "#94a3b8"
999
- },
1000
- "token.lf:before": {
1001
- "color": "#94a3b8"
1002
- },
1003
- "token.space:before": {
1004
- "color": "#94a3b8"
1005
- },
1006
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
1007
- "marginRight": "0.4em"
1008
- },
1009
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
1010
- "background": "#f1f5f9",
1011
- "color": "#475569",
1012
- "padding": "0.1em 0.4em",
1013
- "borderRadius": "0.3em"
1014
- },
1015
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
1016
- "background": "#f1f5f9",
1017
- "color": "#475569",
1018
- "padding": "0.1em 0.4em",
1019
- "borderRadius": "0.3em"
1020
- },
1021
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
1022
- "background": "#f1f5f9",
1023
- "color": "#475569",
1024
- "padding": "0.1em 0.4em",
1025
- "borderRadius": "0.3em"
1026
- },
1027
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
1028
- "background": "#3b82f6",
1029
- "color": "#ffffff"
1030
- },
1031
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
1032
- "background": "#3b82f6",
1033
- "color": "#ffffff"
1034
- },
1035
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
1036
- "background": "#3b82f6",
1037
- "color": "#ffffff"
1038
- },
1039
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
1040
- "background": "#3b82f6",
1041
- "color": "#ffffff"
1042
- },
1043
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
1044
- "background": "#3b82f6",
1045
- "color": "#ffffff"
1046
- },
1047
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
1048
- "background": "#3b82f6",
1049
- "color": "#ffffff"
1050
- },
1051
- ".line-highlight.line-highlight": {
1052
- "background": "rgba(59, 130, 246, 0.08)"
1053
- },
1054
- ".line-highlight.line-highlight:before": {
1055
- "background": "#f1f5f9",
1056
- "color": "#1e293b",
1057
- "padding": "0.1em 0.6em",
1058
- "borderRadius": "0.3em",
1059
- "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
1060
- },
1061
- ".line-highlight.line-highlight[data-end]:after": {
1062
- "background": "#f1f5f9",
1063
- "color": "#1e293b",
1064
- "padding": "0.1em 0.6em",
1065
- "borderRadius": "0.3em",
1066
- "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
1067
- },
1068
- "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
1069
- "backgroundColor": "rgba(59, 130, 246, 0.08)"
1070
- },
1071
- ".line-numbers.line-numbers .line-numbers-rows": {
1072
- "borderRightColor": "#e2e8f0"
1073
- },
1074
- ".command-line .command-line-prompt": {
1075
- "borderRightColor": "#e2e8f0"
1076
- },
1077
- ".line-numbers .line-numbers-rows > span:before": {
1078
- "color": "#94a3b8"
1079
- },
1080
- ".command-line .command-line-prompt > span:before": {
1081
- "color": "#94a3b8"
1082
- },
1083
- ".rainbow-braces .token.token.punctuation.brace-level-1": {
1084
- "color": "#3b82f6"
1085
- },
1086
- ".rainbow-braces .token.token.punctuation.brace-level-5": {
1087
- "color": "#3b82f6"
1088
- },
1089
- ".rainbow-braces .token.token.punctuation.brace-level-9": {
1090
- "color": "#3b82f6"
1091
- },
1092
- ".rainbow-braces .token.token.punctuation.brace-level-2": {
1093
- "color": "#16a34a"
1094
- },
1095
- ".rainbow-braces .token.token.punctuation.brace-level-6": {
1096
- "color": "#16a34a"
1097
- },
1098
- ".rainbow-braces .token.token.punctuation.brace-level-10": {
1099
- "color": "#16a34a"
1100
- },
1101
- ".rainbow-braces .token.token.punctuation.brace-level-3": {
1102
- "color": "#ea580c"
1103
- },
1104
- ".rainbow-braces .token.token.punctuation.brace-level-7": {
1105
- "color": "#ea580c"
1106
- },
1107
- ".rainbow-braces .token.token.punctuation.brace-level-11": {
1108
- "color": "#ea580c"
1109
- },
1110
- ".rainbow-braces .token.token.punctuation.brace-level-4": {
1111
- "color": "#9333ea"
1112
- },
1113
- ".rainbow-braces .token.token.punctuation.brace-level-8": {
1114
- "color": "#9333ea"
1115
- },
1116
- ".rainbow-braces .token.token.punctuation.brace-level-12": {
1117
- "color": "#9333ea"
1118
- },
1119
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
1120
- "backgroundColor": "rgba(220, 38, 38, 0.15)"
1121
- },
1122
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
1123
- "backgroundColor": "rgba(220, 38, 38, 0.15)"
1124
- },
1125
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
1126
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1127
- },
1128
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
1129
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1130
- },
1131
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
1132
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1133
- },
1134
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
1135
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1136
- },
1137
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
1138
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1139
- },
1140
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
1141
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1142
- },
1143
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
1144
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1145
- },
1146
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
1147
- "backgroundColor": "rgba(220, 38, 38, 0.25)"
1148
- },
1149
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
1150
- "backgroundColor": "rgba(22, 163, 74, 0.15)"
1151
- },
1152
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
1153
- "backgroundColor": "rgba(22, 163, 74, 0.15)"
1154
- },
1155
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
1156
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1157
- },
1158
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
1159
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1160
- },
1161
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
1162
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1163
- },
1164
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
1165
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1166
- },
1167
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
1168
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1169
- },
1170
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
1171
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1172
- },
1173
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
1174
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1175
- },
1176
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
1177
- "backgroundColor": "rgba(22, 163, 74, 0.25)"
1178
- },
1179
- ".prism-previewer.prism-previewer:before": {
1180
- "borderColor": "#fff"
1181
- },
1182
- ".prism-previewer-gradient.prism-previewer-gradient div": {
1183
- "borderColor": "#fff",
1184
- "borderRadius": "0.3em"
1185
- },
1186
- ".prism-previewer-color.prism-previewer-color:before": {
1187
- "borderRadius": "0.3em"
1188
- },
1189
- ".prism-previewer-easing.prism-previewer-easing:before": {
1190
- "borderRadius": "0.3em"
1191
- },
1192
- ".prism-previewer.prism-previewer:after": {
1193
- "borderTopColor": "#fff"
1194
- },
1195
- ".prism-previewer-flipped.prism-previewer-flipped.after": {
1196
- "borderBottomColor": "#fff"
1197
- },
1198
- ".prism-previewer-angle.prism-previewer-angle:before": {
1199
- "background": "#f1f5f9"
1200
- },
1201
- ".prism-previewer-time.prism-previewer-time:before": {
1202
- "background": "#f1f5f9"
1203
- },
1204
- ".prism-previewer-easing.prism-previewer-easing": {
1205
- "background": "#f1f5f9"
1206
- },
1207
- ".prism-previewer-angle.prism-previewer-angle circle": {
1208
- "stroke": "#1e293b",
1209
- "strokeOpacity": "1"
1210
- },
1211
- ".prism-previewer-time.prism-previewer-time circle": {
1212
- "stroke": "#1e293b",
1213
- "strokeOpacity": "1"
1214
- },
1215
- ".prism-previewer-easing.prism-previewer-easing circle": {
1216
- "stroke": "#1e293b",
1217
- "fill": "transparent"
1218
- },
1219
- ".prism-previewer-easing.prism-previewer-easing path": {
1220
- "stroke": "#1e293b"
1221
- },
1222
- ".prism-previewer-easing.prism-previewer-easing line": {
1223
- "stroke": "#1e293b"
1224
- }
1225
- };
1226
- const CodeHighlighter = ({
1227
- className,
1228
- children,
1229
- copyClassName,
1230
- copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
1231
- language,
1232
- toolbarClassName,
1233
- theme = dark
1234
- }) => {
1235
- const match = language == null ? void 0 : language.match(/language-(\w+)/);
1236
- const lang = match ? match[1] : "text";
1237
- const handleCopy = (text) => {
1238
- navigator.clipboard.writeText(text).then(() => {
1239
- console.log("Text copied to clipboard");
1240
- }).catch((err) => {
1241
- console.error("Could not copy text: ", err);
1242
- });
1243
- };
1244
- return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
1245
- /* @__PURE__ */ jsxs("div", { className: cn(toolbarClassName), children: [
1246
- /* @__PURE__ */ jsx("div", { children: lang }),
1247
- copyIcon && /* @__PURE__ */ jsx(
1248
- Button,
1249
- {
1250
- className: cn(copyClassName),
1251
- size: "small",
1252
- variant: "text",
1253
- title: "Copy code",
1254
- onClick: () => handleCopy(children),
1255
- children: copyIcon
1256
- }
1257
- )
1258
- ] }),
1259
- /* @__PURE__ */ jsx(
1260
- Prism,
1261
- {
1262
- language: lang,
1263
- style: theme,
1264
- children
1265
- }
1266
- )
1267
- ] });
1268
- };
1269
- const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsx("table", { ...props, children });
1270
- const TableHeaderCell = ({ children, ...props }) => /* @__PURE__ */ jsx("th", { ...props, children });
1271
- const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsx("td", { ...props, children });
1272
- const Markdown = ({
1273
- children,
1274
- remarkPlugins,
1275
- rehypePlugins = [rehypeKatex]
1276
- }) => {
1277
- const { theme } = useContext(ChatContext);
1278
- return /* @__PURE__ */ jsx(
1279
- ReactMarkdown,
1280
- {
1281
- remarkPlugins,
1282
- rehypePlugins,
1283
- components: {
1284
- code: ({ className, ...props }) => /* @__PURE__ */ jsx(
1285
- CodeHighlighter,
1286
- {
1287
- ...props,
1288
- language: className,
1289
- className: cn(theme.messages.message.markdown.code, className),
1290
- copyClassName: cn(theme.messages.message.markdown.copy),
1291
- toolbarClassName: cn(theme.messages.message.markdown.toolbar)
1292
- }
1293
- ),
1294
- table: (props) => /* @__PURE__ */ jsx(TableComponent, { ...props, className: cn(theme.messages.message.markdown.table) }),
1295
- th: (props) => /* @__PURE__ */ jsx(TableHeaderCell, { ...props, className: cn(theme.messages.message.markdown.th) }),
1296
- td: (props) => /* @__PURE__ */ jsx(TableDataCell, { ...props, className: cn(theme.messages.message.markdown.td) }),
1297
- a: (props) => /* @__PURE__ */ jsx("a", { ...props, className: cn(theme.messages.message.markdown.a) }),
1298
- p: (props) => /* @__PURE__ */ jsx("p", { ...props, className: cn(theme.messages.message.markdown.p) }),
1299
- li: (props) => /* @__PURE__ */ jsx("li", { ...props, className: cn(theme.messages.message.markdown.li) }),
1300
- ul: (props) => /* @__PURE__ */ jsx("ul", { ...props, className: cn(theme.messages.message.markdown.ul) }),
1301
- ol: (props) => /* @__PURE__ */ jsx("ol", { ...props, className: cn(theme.messages.message.markdown.ol) })
1302
- },
1303
- children
1304
- }
1305
- );
1306
- };
1307
- const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
1308
- function remarkCve() {
1309
- return (tree, _file) => {
1310
- findAndReplace(tree, [[
1311
- CVE_REGEX,
1312
- replaceCve
1313
- ]]);
1314
- };
1315
- function replaceCve(value, id) {
1316
- return [
1317
- {
1318
- type: "link",
1319
- url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
1320
- children: [
1321
- { children: [{ type: "text", value: value.trim() }] }
1322
- ]
1323
- }
1324
- ];
1325
- }
1326
- }
1327
- const SvgFile = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.7036 1.37034C3.04741 1.02653 3.51373 0.833374 3.99996 0.833374H9.33329H9.33331C9.47275 0.833374 9.59885 0.890449 9.68954 0.98251L13.6843 4.97722C13.7763 5.0679 13.8333 5.19398 13.8333 5.33337L13.8333 5.3379V13.3334C13.8333 13.8196 13.6401 14.2859 13.2963 14.6297C12.9525 14.9736 12.4862 15.1667 12 15.1667H3.99996C3.51373 15.1667 3.04741 14.9736 2.7036 14.6297C2.35978 14.2859 2.16663 13.8196 2.16663 13.3334V2.66671C2.16663 2.18048 2.35978 1.71416 2.7036 1.37034ZM3.99996 1.83337H8.83331V5.33337C8.83331 5.60952 9.05717 5.83337 9.33331 5.83337H12.8333V13.3334C12.8333 13.5544 12.7455 13.7663 12.5892 13.9226C12.4329 14.0789 12.221 14.1667 12 14.1667H3.99996C3.77895 14.1667 3.56698 14.0789 3.4107 13.9226C3.25442 13.7663 3.16663 13.5544 3.16663 13.3334V2.66671C3.16663 2.44569 3.25442 2.23373 3.4107 2.07745C3.56698 1.92117 3.77895 1.83337 3.99996 1.83337ZM9.83331 2.5405L12.1262 4.83337H9.83331V2.5405ZM5.33331 8.16663C5.05717 8.16663 4.83331 8.39048 4.83331 8.66663C4.83331 8.94277 5.05717 9.16663 5.33331 9.16663H10.6666C10.9428 9.16663 11.1666 8.94277 11.1666 8.66663C11.1666 8.39048 10.9428 8.16663 10.6666 8.16663H5.33331ZM4.83331 11.3334C4.83331 11.0572 5.05717 10.8334 5.33331 10.8334H10.6666C10.9428 10.8334 11.1666 11.0572 11.1666 11.3334C11.1666 11.6095 10.9428 11.8334 10.6666 11.8334H5.33331C5.05717 11.8334 4.83331 11.6095 4.83331 11.3334ZM5.33331 5.5C5.05717 5.5 4.83331 5.72386 4.83331 6C4.83331 6.27614 5.05717 6.5 5.33331 6.5H6.66665C6.94279 6.5 7.16665 6.27614 7.16665 6C7.16665 5.72386 6.94279 5.5 6.66665 5.5H5.33331Z" }));
1328
- const MessageFile = ({
1329
- name,
1330
- type,
1331
- url,
1332
- limit = 100,
1333
- fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
1334
- }) => {
1335
- const { theme } = useContext(ChatContext);
1336
- const isImage = type == null ? void 0 : type.startsWith("image/");
1337
- return /* @__PURE__ */ jsxs(
1338
- "figure",
1339
- {
1340
- className: cn(theme.messages.message.files.file.base),
1341
- onClick: () => {
1342
- window.open(url, "_blank");
1343
- },
1344
- children: [
1345
- isImage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("img", { src: url, className: "h-10 w-10" }) }) : /* @__PURE__ */ jsx(Fragment, { children: fileIcon }),
1346
- name && /* @__PURE__ */ jsx("figcaption", { children: name && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) }) })
1347
- ]
1348
- }
1349
- );
1350
- };
1351
- const MessageFiles = ({ files, children }) => {
1352
- const { theme } = useContext(ChatContext);
1353
- const Comp = children ? Slot : MessageFile;
1354
- const [expanded, setExpanded] = useState(false);
1355
- if (!files || files.length === 0) {
1356
- return null;
1357
- }
1358
- const { imageFiles, otherFiles } = files.reduce(
1359
- (acc, file) => {
1360
- if (file.type.startsWith("image/")) {
1361
- acc.imageFiles.push(file);
1362
- } else {
1363
- acc.otherFiles.push(file);
1364
- }
1365
- return acc;
1366
- },
1367
- {
1368
- imageFiles: [],
1369
- otherFiles: []
1370
- }
1371
- );
1372
- const maxImageLength = 3;
1373
- const truncateImages = !expanded && imageFiles.length > maxImageLength;
1374
- const renderImageFiles = (images) => {
1375
- return truncateImages ? images.slice(0, maxImageLength).map((image, index) => /* @__PURE__ */ jsxs(
1376
- "figure",
1377
- {
1378
- className: index === 0 ? "col-span-2 row-span-2" : "relative",
1379
- children: [
1380
- /* @__PURE__ */ jsx(
1381
- "img",
1382
- {
1383
- src: image.url,
1384
- alt: image.name,
1385
- className: "relative w-full h-full object-cover rounded-lg"
1386
- }
1387
- ),
1388
- index === maxImageLength - 1 && /* @__PURE__ */ jsxs(
1389
- "div",
1390
- {
1391
- className: "absolute top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-50 rounded-lg cursor-pointer",
1392
- onClick: () => setExpanded(true),
1393
- children: [
1394
- "+",
1395
- (imageFiles.length - maxImageLength).toLocaleString()
1396
- ]
1397
- }
1398
- )
1399
- ]
1400
- },
1401
- index
1402
- )) : images.map((image, index) => /* @__PURE__ */ jsx(Comp, { ...image, children }, index));
1403
- };
1404
- return /* @__PURE__ */ jsxs(
1405
- "div",
1406
- {
1407
- className: cn(
1408
- theme.messages.message.files.base,
1409
- truncateImages ? "grid grid-rows-2 grid-flow-col gap-2 w-1/3" : ""
1410
- ),
1411
- children: [
1412
- imageFiles.length > 0 && renderImageFiles(imageFiles),
1413
- otherFiles.length > 0 && otherFiles.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index))
1414
- ]
1415
- }
1416
- );
1417
- };
1418
- const MessageQuestion = ({
1419
- children,
1420
- ...props
1421
- }) => {
1422
- const { theme, remarkPlugins } = useContext(ChatContext);
1423
- const { question, files } = props;
1424
- const Comp = children ? Slot : "div";
1425
- const [expanded, setExpanded] = useState(false);
1426
- const isLong = question.length > 500;
1427
- return /* @__PURE__ */ jsx(
1428
- Comp,
1429
- {
1430
- className: cn(theme.messages.message.question, {
1431
- [theme.messages.message.overlay]: isLong && !expanded
1432
- }),
1433
- ...props,
1434
- children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
1435
- /* @__PURE__ */ jsx(MessageFiles, { files }),
1436
- /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: question }),
1437
- isLong && !expanded && /* @__PURE__ */ jsx(
1438
- Button,
1439
- {
1440
- variant: "link",
1441
- size: "small",
1442
- className: theme.messages.message.expand,
1443
- onClick: () => setExpanded(true),
1444
- children: "Show more"
1445
- }
1446
- )
1447
- ] })
1448
- }
1449
- );
1450
- };
1451
- const MessageResponse = ({
1452
- response,
1453
- isLoading,
1454
- children
1455
- }) => {
1456
- const {
1457
- theme,
1458
- isCompact,
1459
- remarkPlugins
1460
- } = useContext(ChatContext);
1461
- const Comp = children ? Slot : "div";
1462
- return /* @__PURE__ */ jsx(
1463
- Comp,
1464
- {
1465
- "data-compact": isCompact,
1466
- className: cn(theme.messages.message.response),
1467
- children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
1468
- /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: response }),
1469
- isLoading && /* @__PURE__ */ jsx(
1470
- motion.div,
1471
- {
1472
- className: cn(theme.messages.message.cursor),
1473
- animate: { opacity: [1, 0] },
1474
- transition: {
1475
- duration: 0.7,
1476
- repeat: Infinity,
1477
- repeatType: "reverse"
1478
- }
1479
- }
1480
- )
1481
- ] })
1482
- }
1483
- );
1484
- };
1485
- const MessageSource = ({ title, url, image, limit = 50 }) => {
1486
- const { theme, isCompact } = useContext(ChatContext);
1487
- return /* @__PURE__ */ jsxs(
1488
- "figure",
1489
- {
1490
- className: cn(theme.messages.message.sources.source.base, {
1491
- [theme.messages.message.sources.source.companion]: isCompact
1492
- }),
1493
- onClick: () => {
1494
- if (url) {
1495
- window.open(url, "_blank");
1496
- }
1497
- },
1498
- children: [
1499
- image && /* @__PURE__ */ jsx("img", { src: image, alt: title, className: cn(theme.messages.message.sources.source.image) }),
1500
- (title || url) && /* @__PURE__ */ jsxs("figcaption", { children: [
1501
- title && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsx(Ellipsis, { value: title, limit }) }),
1502
- url && /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(theme.messages.message.sources.source.url), children: url })
1503
- ] })
1504
- ]
1505
- }
1506
- );
1507
- };
1508
- const MessageSources = ({
1509
- sources,
1510
- children
1511
- }) => {
1512
- const { theme } = useContext(ChatContext);
1513
- const Comp = children ? Slot : MessageSource;
1514
- if (!sources || sources.length === 0) {
1515
- return null;
1516
- }
1517
- return sources && sources.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.sources.base), children: sources.map((source, index) => /* @__PURE__ */ jsx(Comp, { ...source, children }, index)) });
1518
- };
1519
- const SvgThumbsDown = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-thumbs-down", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M17 14V2" }), /* @__PURE__ */ React.createElement("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }));
1520
- const SvgThumbsUp = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-thumbs-up", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7 10v12" }), /* @__PURE__ */ React.createElement("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }));
1521
- const SvgRefresh = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-refresh-ccw", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ React.createElement("path", { d: "M3 3v5h5" }), /* @__PURE__ */ React.createElement("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }), /* @__PURE__ */ React.createElement("path", { d: "M16 16h5v5" }));
1522
- const MessageActions = ({
1523
- children,
1524
- ...props
1525
- }) => {
1526
- const { theme } = useContext(ChatContext);
1527
- const {
1528
- question,
1529
- response,
1530
- copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
1531
- thumbsUpIcon = /* @__PURE__ */ jsx(SvgThumbsUp, {}),
1532
- thumbsDownIcon = /* @__PURE__ */ jsx(SvgThumbsDown, {}),
1533
- refreshIcon = /* @__PURE__ */ jsx(SvgRefresh, {}),
1534
- onCopy,
1535
- onUpvote,
1536
- onDownvote,
1537
- onRefresh
1538
- } = props;
1539
- const Comp = children ? Slot : "div";
1540
- const handleCopy = (text) => {
1541
- navigator.clipboard.writeText(text).then(() => {
1542
- console.log("Text copied to clipboard");
1543
- }).catch((err) => {
1544
- console.error("Could not copy text: ", err);
1545
- });
1546
- };
1547
- return (copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
1548
- copyIcon && /* @__PURE__ */ jsx(
1549
- IconButton,
1550
- {
1551
- variant: "text",
1552
- disablePadding: true,
1553
- title: "Copy question and response",
1554
- className: cn(theme.messages.message.footer.copy),
1555
- onClick: onCopy ? onCopy : () => handleCopy(`${question}
1556
- ${response}`),
1557
- children: copyIcon
1558
- }
1559
- ),
1560
- thumbsUpIcon && /* @__PURE__ */ jsx(
1561
- IconButton,
1562
- {
1563
- variant: "text",
1564
- disablePadding: true,
1565
- title: "Upvote",
1566
- className: cn(theme.messages.message.footer.upvote),
1567
- onClick: onUpvote,
1568
- children: thumbsUpIcon
1569
- }
1570
- ),
1571
- thumbsDownIcon && /* @__PURE__ */ jsx(
1572
- IconButton,
1573
- {
1574
- variant: "text",
1575
- disablePadding: true,
1576
- title: "Downvote",
1577
- className: cn(theme.messages.message.footer.downvote),
1578
- onClick: onDownvote,
1579
- children: thumbsDownIcon
1580
- }
1581
- ),
1582
- refreshIcon && /* @__PURE__ */ jsx(
1583
- IconButton,
1584
- {
1585
- variant: "text",
1586
- disablePadding: true,
1587
- title: "Refresh",
1588
- className: cn(theme.messages.message.footer.refresh),
1589
- onClick: onRefresh,
1590
- children: refreshIcon
1591
- }
1592
- )
1593
- ] }) });
1594
- };
1595
- const messageVariants = {
1596
- hidden: {
1597
- opacity: 0,
1598
- y: 20
1599
- },
1600
- visible: {
1601
- opacity: 1,
1602
- y: 0,
1603
- transition: {
1604
- duration: 0.3
1605
- }
1606
- }
1607
- };
1608
- const SessionMessage = ({
1609
- conversation,
1610
- isLast,
1611
- children
1612
- }) => {
1613
- const { theme, isLoading } = useContext(ChatContext);
1614
- return /* @__PURE__ */ jsxs(motion.div, { variants: messageVariants, children: [
1615
- /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
1616
- /* @__PURE__ */ jsx(MessageQuestion, { question: conversation.question, files: conversation.files }),
1617
- /* @__PURE__ */ jsx(
1618
- MessageResponse,
1619
- {
1620
- response: conversation.response,
1621
- isLoading: isLast && isLoading
1622
- }
1623
- ),
1624
- /* @__PURE__ */ jsx(MessageSources, { sources: conversation.sources }),
1625
- /* @__PURE__ */ jsx(
1626
- MessageActions,
1627
- {
1628
- question: conversation.question,
1629
- response: conversation.response
1630
- }
1631
- )
1632
- ] }) }),
1633
- !isLast && /* @__PURE__ */ jsx(Divider, {})
1634
- ] }, conversation.id);
1635
- };
1636
- const containerVariants = {
1637
- hidden: {},
1638
- visible: {
1639
- transition: {
1640
- staggerChildren: 0.07,
1641
- when: "beforeChildren"
1642
- }
1643
- }
1644
- };
1645
- const SessionMessages = ({
1646
- children,
1647
- newSessionContent,
1648
- limit = 10,
1649
- showMoreText = "Show more"
1650
- }) => {
1651
- const { activeSession, theme } = useContext(ChatContext);
1652
- const contentRef = useRef(null);
1653
- const [isAnimating, setIsAnimating] = useState(true);
1654
- useEffect(() => {
1655
- if (contentRef.current) {
1656
- requestAnimationFrame(
1657
- () => contentRef.current.scrollTop = contentRef.current.scrollHeight
1658
- );
1659
- }
1660
- }, [activeSession, isAnimating]);
1661
- function handleShowMore() {
1662
- showNext(limit);
1663
- requestAnimationFrame(() => contentRef.current.scrollTop = 0);
1664
- }
1665
- const reversedConvos = useMemo(
1666
- () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
1667
- [activeSession]
1668
- );
1669
- const { data, hasMore, showNext } = useInfinityList({
1670
- items: reversedConvos,
1671
- size: limit
1672
- });
1673
- const reReversedConvo = useMemo(() => [...data].reverse(), [data]);
1674
- const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
1675
- if (!activeSession) {
1676
- return /* @__PURE__ */ jsx(SessionEmpty, { children: newSessionContent });
1677
- }
1678
- return /* @__PURE__ */ jsxs("div", { className: cn(theme.messages.content), ref: contentRef, children: [
1679
- hasMore && /* @__PURE__ */ jsx(
1680
- Button,
1681
- {
1682
- variant: "outline",
1683
- className: cn(theme.messages.showMore),
1684
- fullWidth: true,
1685
- onClick: handleShowMore,
1686
- children: showMoreText
1687
- }
1688
- ),
1689
- /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
1690
- motion.div,
1691
- {
1692
- variants: containerVariants,
1693
- initial: "hidden",
1694
- animate: "visible",
1695
- onAnimationComplete: () => {
1696
- requestAnimationFrame(() => setIsAnimating(false));
1697
- },
1698
- children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsx(
1699
- SessionMessage,
1700
- {
1701
- conversation,
1702
- isLast: index === conversation.length - 1
1703
- },
1704
- conversation.id
1705
- ))
1706
- },
1707
- activeSession == null ? void 0 : activeSession.id
1708
- ) })
1709
- ] });
1710
- };
1711
- const chatTheme = {
1712
- base: "dark:text-white text-gray-500",
1713
- console: "flex w-full gap-4 h-full",
1714
- companion: "w-full h-full overflow-hidden",
1715
- empty: "text-center flex-1",
1716
- sessions: {
1717
- base: "overflow-auto",
1718
- console: "min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl",
1719
- companion: "w-full h-full",
1720
- group: "text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1",
1721
- create: "relative mb-4 rounded-[10px] text-white",
1722
- session: {
1723
- base: [
1724
- "group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500",
1725
- "dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200"
1726
- ].join(" "),
1727
- active: [
1728
- "border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ",
1729
- "dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50",
1730
- "[&_button]:!opacity-100"
1731
- ].join(" "),
1732
- delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:!opacity-50"
1733
- }
1734
- },
1735
- messages: {
1736
- base: "",
1737
- console: "flex flex-col mx-5 flex-1 overflow-hidden",
1738
- companion: "flex w-full h-full",
1739
- back: "self-start p-0 my-2",
1740
- inner: "flex-1 h-full flex flex-col",
1741
- title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
1742
- " "
1743
- ),
1744
- date: "text-xs whitespace-nowrap text-gray-400",
1745
- content: [
1746
- "mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200",
1747
- "dark:[&_hr]:bg-gray-800/60"
1748
- ].join(" "),
1749
- header: "flex justify-between items-center gap-2",
1750
- showMore: "mb-4",
1751
- message: {
1752
- base: "mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent",
1753
- question: [
1754
- "relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
1755
- "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
1756
- ].join(" "),
1757
- response: ["relative data-[compact=false]:px-4 text-gray-900", "dark:text-gray-100"].join(" "),
1758
- overlay: `overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200`,
1759
- cursor: "inline-block w-1 h-4 bg-current",
1760
- expand: "absolute bottom-1 right-1 z-10",
1761
- files: {
1762
- base: "mb-2 flex flex-wrap gap-3 ",
1763
- file: {
1764
- base: [
1765
- "flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer",
1766
- "dark:border-gray-700"
1767
- ].join(" "),
1768
- name: ["text-sm text-gray-500", "dark:text-gray-200"].join(" ")
1769
- }
1770
- },
1771
- sources: {
1772
- base: "my-4 flex flex-wrap gap-3",
1773
- source: {
1774
- base: [
1775
- "flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer",
1776
- "dark:border-gray-700"
1777
- ].join(" "),
1778
- companion: "flex-1 px-3 py-1.5",
1779
- image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
1780
- title: "text-md block",
1781
- url: "text-sm text-blue-400 underline"
1782
- }
1783
- },
1784
- markdown: {
1785
- copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
1786
- p: "mb-2",
1787
- a: "text-blue-400 underline",
1788
- table: "table-auto w-full m-2",
1789
- th: "px-4 py-2 text-left font-bold border-b border-gray-500",
1790
- td: "px-4 py-2",
1791
- code: "m-2 rounded-b relative",
1792
- toolbar: "text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ",
1793
- li: "mb-2 ml-6",
1794
- ul: "mb-4 list-disc",
1795
- ol: "mb-4 list-decimal"
1796
- },
1797
- footer: {
1798
- base: "mt-3 flex gap-1.5 text-gray-400",
1799
- copy: [
1800
- "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-200 hover:text-gray-500",
1801
- "dark:hover:bg-gray-800 dark:hover:text-white"
1802
- ].join(" "),
1803
- upvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
1804
- downvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
1805
- refresh: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white"
1806
- }
1807
- }
1808
- },
1809
- input: {
1810
- base: "flex mt-4 relative",
1811
- upload: ["px-5 py-2 text-gray-400 size-10", "dark:gray-500"].join(" "),
1812
- input: [
1813
- "w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:!mx-10 bg-white [&>textarea]:w-full [&>textarea]:flex-none",
1814
- "dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40"
1815
- ].join(" "),
1816
- actions: {
1817
- base: "absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10",
1818
- send: [
1819
- "px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500",
1820
- "dark:text-white dark:bg-gray-800 hover:dark:bg-gray-700"
1821
- ].join(" "),
1822
- stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
1823
- }
1824
- }
1825
- };
1826
- const useDimensions = () => {
1827
- const [ref, setRef] = useState(null);
1828
- const [width, setWidth] = useState(void 0);
1829
- const observe = useCallback((element) => {
1830
- if (element) setRef(element);
1831
- }, []);
1832
- useEffect(() => {
1833
- if (!ref) return;
1834
- const resizeObserver = new ResizeObserver((entries) => {
1835
- for (let entry of entries) {
1836
- setWidth(entry.contentRect.width);
1837
- }
1838
- });
1839
- resizeObserver.observe(ref);
1840
- return () => {
1841
- resizeObserver.disconnect();
1842
- };
1843
- }, [ref]);
1844
- return { width, observe };
1845
- };
1846
- const Chat = ({
1847
- children,
1848
- viewType = "console",
1849
- sessions,
1850
- onSelectSession,
1851
- onDeleteSession,
1852
- onSendMessage,
1853
- onStopMessage,
1854
- onFileUpload,
1855
- isLoading,
1856
- activeSessionId,
1857
- theme: customTheme = chatTheme,
1858
- onNewSession,
1859
- remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
1860
- disabled,
1861
- style,
1862
- className
1863
- }) => {
1864
- const theme = useComponentTheme("chat", customTheme);
1865
- const [internalActiveSessionID, setInternalActiveSessionID] = useState(activeSessionId);
1866
- const { width, observe } = useDimensions();
1867
- const isCompact = viewType === "companion" || width && width < 767;
1868
- useEffect(() => {
1869
- setInternalActiveSessionID(activeSessionId);
1870
- }, [activeSessionId]);
1871
- const handleSelectSession = useCallback(
1872
- (sessionId) => {
1873
- setInternalActiveSessionID(sessionId);
1874
- onSelectSession == null ? void 0 : onSelectSession(sessionId);
1875
- },
1876
- [onSelectSession]
1877
- );
1878
- const handleDeleteSession = useCallback(
1879
- (sessionId) => {
1880
- setInternalActiveSessionID(void 0);
1881
- onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
1882
- },
1883
- [onDeleteSession]
1884
- );
1885
- const handleCreateNewSession = useCallback(() => {
1886
- setInternalActiveSessionID(void 0);
1887
- onNewSession == null ? void 0 : onNewSession();
1888
- }, [onNewSession]);
1889
- useHotkeys([
1890
- {
1891
- name: "Create new session",
1892
- category: "Chat",
1893
- keys: "meta+shift+s",
1894
- callback: (event) => {
1895
- event.preventDefault();
1896
- handleCreateNewSession();
1897
- }
1898
- }
1899
- ]);
1900
- const activeSession = useMemo(
1901
- () => sessions.find((session) => session.id === internalActiveSessionID),
1902
- [sessions, internalActiveSessionID]
1903
- );
1904
- const contextValue = useMemo(
1905
- () => ({
1906
- sessions,
1907
- activeSession,
1908
- remarkPlugins,
1909
- theme,
1910
- disabled,
1911
- isLoading,
1912
- isCompact,
1913
- viewType,
1914
- activeSessionId: internalActiveSessionID,
1915
- selectSession: handleSelectSession,
1916
- deleteSession: handleDeleteSession,
1917
- createSession: handleCreateNewSession,
1918
- sendMessage: onSendMessage,
1919
- stopMessage: onStopMessage,
1920
- fileUpload: onFileUpload
1921
- }),
1922
- [
1923
- isLoading,
1924
- isCompact,
1925
- viewType,
1926
- disabled,
1927
- theme,
1928
- remarkPlugins,
1929
- sessions,
1930
- activeSession,
1931
- internalActiveSessionID,
1932
- handleSelectSession,
1933
- handleDeleteSession,
1934
- handleCreateNewSession,
1935
- onSendMessage,
1936
- onStopMessage,
1937
- onFileUpload
1938
- ]
1939
- );
1940
- return /* @__PURE__ */ jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
1941
- "div",
1942
- {
1943
- ref: observe,
1944
- className: cn(className, theme.base, {
1945
- [theme.companion]: isCompact,
1946
- [theme.console]: !isCompact
1947
- }),
1948
- style,
1949
- children
1950
- }
1951
- ) }) });
1952
- };
1953
- const SessionsList = ({ children }) => {
1954
- const { theme, isCompact, activeSessionId } = useContext(ChatContext);
1955
- const isVisible = isCompact && !activeSessionId;
1956
- return (!isCompact || isVisible) && /* @__PURE__ */ jsx(
1957
- motion.div,
1958
- {
1959
- initial: { translateX: "-100%" },
1960
- animate: {
1961
- translateX: "0%",
1962
- transition: {
1963
- type: "tween",
1964
- ease: "linear",
1965
- duration: 0.2,
1966
- when: "beforeChildren"
1967
- }
1968
- },
1969
- exit: { translateX: "-100%" },
1970
- className: cn(theme.sessions.base, {
1971
- [theme.sessions.companion]: isCompact,
1972
- [theme.sessions.console]: !isCompact
1973
- }),
1974
- children: /* @__PURE__ */ jsx(List, { children })
1975
- }
1976
- );
1977
- };
1978
- const SvgTrash = (props) => /* @__PURE__ */ React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "Delete" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M5.97905 1.16666C5.90859 1.16576 5.83895 1.18189 5.77605 1.21368C5.71316 1.24547 5.65888 1.29199 5.61783 1.34926C5.57677 1.40654 5.55016 1.47288 5.54025 1.54265C5.53034 1.61242 5.53743 1.68355 5.56092 1.75H4.27007C3.7342 1.75 3.2324 2.01817 2.93535 2.46435L2.24492 3.5H2.18738C2.12941 3.49918 2.07185 3.50989 2.01805 3.5315C1.96425 3.55312 1.91529 3.58522 1.874 3.62593C1.83271 3.66663 1.79993 3.71514 1.77755 3.76863C1.75518 3.82211 1.74365 3.87952 1.74365 3.9375C1.74365 3.99548 1.75518 4.05288 1.77755 4.10636C1.79993 4.15985 1.83271 4.20836 1.874 4.24907C1.91529 4.28977 1.96425 4.32187 2.01805 4.34349C2.07185 4.3651 2.12941 4.37582 2.18738 4.375H2.41012C2.44765 4.38067 2.48576 4.38143 2.52348 4.37727L3.24468 11.1084C3.33169 11.9199 4.02367 12.5417 4.83973 12.5417H9.15947C9.97553 12.5417 10.6675 11.9199 10.7545 11.1084L11.4763 4.37727C11.5133 4.38124 11.5506 4.38047 11.5874 4.375H11.8124C11.8704 4.37582 11.9279 4.3651 11.9817 4.34349C12.0355 4.32187 12.0845 4.28977 12.1258 4.24907C12.1671 4.20836 12.1998 4.15985 12.2222 4.10636C12.2446 4.05288 12.2561 3.99548 12.2561 3.9375C12.2561 3.87952 12.2446 3.82211 12.2222 3.76863C12.1998 3.71514 12.1671 3.66663 12.1258 3.62593C12.0845 3.58522 12.0355 3.55312 11.9817 3.5315C11.9279 3.50989 11.8704 3.49918 11.8124 3.5H11.7548L11.0644 2.46435C10.7671 2.01841 10.2654 1.75 9.7297 1.75H8.43885C8.46234 1.68355 8.46943 1.61242 8.45952 1.54265C8.44961 1.47288 8.423 1.40654 8.38194 1.34926C8.34089 1.29199 8.2866 1.24547 8.22371 1.21368C8.16082 1.18189 8.09118 1.16576 8.02072 1.16666H5.97905ZM4.27007 2.625H9.7297C9.97394 2.625 10.2009 2.74639 10.3364 2.9497L10.7033 3.5H3.29651L3.66338 2.9497L3.66395 2.94913C3.79913 2.74608 4.02543 2.625 4.27007 2.625ZM3.40361 4.375H10.5962L9.88465 11.015C9.8445 11.3894 9.53575 11.6667 9.15947 11.6667H4.83973C4.46345 11.6667 4.15527 11.3894 4.11512 11.015L3.40361 4.375Z", fill: "currentColor" })));
1979
- const SvgChat = (props) => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8 3C4.55375 3 1.75 5.23753 1.75 7.98828C1.75 9.70653 2.83659 11.2762 4.62109 12.188C4.11184 13.0465 3.62587 13.7378 3.62012 13.7461C3.50687 13.9071 3.49862 14.1196 3.59912 14.2891C3.69012 14.4418 3.8543 14.5342 4.0293 14.5342C4.0483 14.5342 4.06743 14.533 4.08643 14.5308C4.15168 14.5233 5.66214 14.3364 7.50439 12.9604C7.67239 12.9712 7.8385 12.9766 8 12.9766C11.4462 12.9766 14.25 10.739 14.25 7.98828C14.25 5.23753 11.4462 3 8 3ZM8 4C10.8948 4 13.25 5.78903 13.25 7.98828C13.25 10.1875 10.8948 11.9766 8 11.9766C7.8055 11.9766 7.60225 11.968 7.396 11.9497C7.271 11.9382 7.1454 11.9752 7.0459 12.0527C6.3589 12.5855 5.72033 12.9308 5.20508 13.1528C5.38383 12.8648 5.57691 12.5418 5.76416 12.2061C5.83416 12.0813 5.84705 11.9324 5.7998 11.7974C5.75255 11.6624 5.64983 11.5542 5.51758 11.5C3.81033 10.7993 2.75 9.45328 2.75 7.98828C2.75 5.78903 5.10525 4 8 4ZM5.5 7.25C5.08575 7.25 4.75 7.58575 4.75 8C4.75 8.41425 5.08575 8.75 5.5 8.75C5.91425 8.75 6.25 8.41425 6.25 8C6.25 7.58575 5.91425 7.25 5.5 7.25ZM8 7.25C7.58575 7.25 7.25 7.58575 7.25 8C7.25 8.41425 7.58575 8.75 8 8.75C8.41425 8.75 8.75 8.41425 8.75 8C8.75 7.58575 8.41425 7.25 8 7.25ZM10.5 7.25C10.0857 7.25 9.75 7.58575 9.75 8C9.75 8.41425 10.0857 8.75 10.5 8.75C10.9143 8.75 11.25 8.41425 11.25 8C11.25 7.58575 10.9143 7.25 10.5 7.25Z", fill: "currentColor" }));
1980
- const SessionListItem = ({
1981
- children,
1982
- session,
1983
- deletable = true,
1984
- limit = 100,
1985
- deleteIcon = /* @__PURE__ */ jsx(SvgTrash, {}),
1986
- chatIcon = /* @__PURE__ */ jsx(SvgChat, { className: "mr-2" })
1987
- }) => {
1988
- const { activeSessionId, selectSession, deleteSession, theme } = useContext(ChatContext);
1989
- const Comp = children ? Slot : ListItem;
1990
- return /* @__PURE__ */ jsx(
1991
- Comp,
1992
- {
1993
- dense: true,
1994
- disableGutters: true,
1995
- active: session.id === activeSessionId,
1996
- className: cn(theme.sessions.session.base, {
1997
- [theme.sessions.session.active]: session.id === activeSessionId
1998
- }),
1999
- onClick: () => selectSession == null ? void 0 : selectSession(session.id),
2000
- start: chatIcon,
2001
- end: /* @__PURE__ */ jsx(Fragment, { children: deletable && /* @__PURE__ */ jsx(
2002
- IconButton,
2003
- {
2004
- size: "small",
2005
- variant: "text",
2006
- onClick: (e) => {
2007
- e.stopPropagation();
2008
- deleteSession(session.id);
2009
- },
2010
- className: cn(theme.sessions.session.delete),
2011
- children: deleteIcon
2012
- }
2013
- ) }),
2014
- children: children || /* @__PURE__ */ jsx(Ellipsis, { value: session.title, limit })
2015
- }
2016
- );
2017
- };
2018
- const SvgPlus = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "add" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M13.1667 9.16658H9.16671V13.1666H7.83337V9.16658H3.83337V7.83325H7.83337V3.83325H9.16671V7.83325H13.1667V9.16658Z", fill: "currentColor" })));
2019
- const NewSessionButton = ({
2020
- children,
2021
- newSessionText = "New Session"
2022
- }) => {
2023
- const { theme, createSession, disabled } = useContext(ChatContext);
2024
- const Comp = children ? Slot : Button;
2025
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
2026
- Comp,
2027
- {
2028
- fullWidth: true,
2029
- disableMargins: true,
2030
- color: "primary",
2031
- startAdornment: /* @__PURE__ */ jsx(SvgPlus, {}),
2032
- className: cn(theme.sessions.create),
2033
- disabled,
2034
- onClick: createSession,
2035
- children: children || newSessionText
2036
- }
2037
- ) });
2038
- };
2039
- const sortOrder = [
2040
- "Today",
2041
- "Yesterday",
2042
- "Last Week",
2043
- "Last Month",
2044
- "January",
2045
- "February",
2046
- "March",
2047
- "April",
2048
- "May",
2049
- "June",
2050
- "July",
2051
- "August",
2052
- "September",
2053
- "October",
2054
- "November",
2055
- "December",
2056
- "Last Year"
2057
- ];
2058
- function groupSessionsByDate(sessions) {
2059
- const grouped = {};
2060
- sessions.forEach((session) => {
2061
- const createdAt = new Date(session.createdAt);
2062
- if (isToday(createdAt)) {
2063
- if (!grouped["Today"]) grouped["Today"] = [];
2064
- grouped["Today"].push(session);
2065
- } else if (isYesterday(createdAt)) {
2066
- if (!grouped["Yesterday"]) grouped["Yesterday"] = [];
2067
- grouped["Yesterday"].push(session);
2068
- } else if (isThisWeek(createdAt)) {
2069
- if (!grouped["Last Week"]) grouped["Last Week"] = [];
2070
- grouped["Last Week"].push(session);
2071
- } else if (isThisMonth(createdAt)) {
2072
- if (!grouped["Last Month"]) grouped["Last Month"] = [];
2073
- grouped["Last Month"].push(session);
2074
- } else if (isThisYear(createdAt)) {
2075
- const monthName = format(createdAt, "MMMM");
2076
- if (!grouped[monthName]) grouped[monthName] = [];
2077
- grouped[monthName].push(session);
2078
- } else {
2079
- if (!grouped["Last Year"]) grouped["Last Year"] = [];
2080
- grouped["Last Year"].push(session);
2081
- }
2082
- });
2083
- Object.keys(grouped).forEach((key) => {
2084
- if (grouped[key].length === 0) {
2085
- delete grouped[key];
2086
- }
2087
- });
2088
- const sortedGroups = Object.keys(grouped).sort(
2089
- (a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b)
2090
- );
2091
- return sortedGroups.map((heading) => ({
2092
- heading,
2093
- sessions: grouped[heading].sort(
2094
- (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
2095
- )
2096
- }));
2097
- }
2098
- const SessionsGroup = ({
2099
- heading,
2100
- children
2101
- }) => {
2102
- const { theme } = useContext(ChatContext);
2103
- return /* @__PURE__ */ jsxs(Fragment, { children: [
2104
- heading && /* @__PURE__ */ jsx(
2105
- ListItem,
2106
- {
2107
- disableGutters: true,
2108
- disablePadding: true,
2109
- className: cn(theme.sessions.group),
2110
- children: heading
2111
- }
2112
- ),
2113
- children
2114
- ] });
2115
- };
2116
- const SessionGroups = ({ children }) => {
2117
- const { sessions } = useContext(ChatContext);
2118
- const groups = useMemo(() => groupSessionsByDate(sessions), [sessions]);
2119
- return /* @__PURE__ */ jsx(Fragment, { children: children ? children(groups) : groups.map(({ heading, sessions: sessions2 }) => /* @__PURE__ */ jsx(SessionsGroup, { heading, children: sessions2.map((session) => /* @__PURE__ */ jsx(SessionListItem, { session }, session.id)) })) });
2120
- };
13
+ import { m, z, C, v, F, s, f, g, h, i, j, M, k, N, b, p, o, e, d, l, c, q, n, T, u, t, r, x, y, w } from "./index-D-JgMn3h.js";
14
+ import "react/jsx-runtime";
15
+ import "react";
16
+ import "reablocks";
2121
17
  export {
2122
- Chat,
2123
- ChatContext,
2124
- ChatInput,
2125
- CodeHighlighter,
2126
- FileInput,
2127
- Markdown,
2128
- MessageActions,
2129
- MessageFile,
2130
- MessageFiles,
2131
- MessageQuestion,
2132
- MessageResponse,
2133
- MessageSource,
2134
- MessageSources,
2135
- NewSessionButton,
2136
- SessionEmpty,
2137
- SessionGroups,
2138
- SessionListItem,
2139
- SessionMessage,
2140
- SessionMessagePanel,
2141
- SessionMessages,
2142
- SessionMessagesHeader,
2143
- SessionsGroup,
2144
- SessionsList,
2145
- TableComponent,
2146
- TableDataCell,
2147
- TableHeaderCell,
2148
- chatTheme,
2149
- dark,
2150
- light,
2151
- remarkCve
18
+ m as Chat,
19
+ z as ChatContext,
20
+ C as ChatInput,
21
+ v as CodeHighlighter,
22
+ F as FileInput,
23
+ s as Markdown,
24
+ f as MessageActions,
25
+ g as MessageFile,
26
+ h as MessageFiles,
27
+ i as MessageQuestion,
28
+ j as MessageResponse,
29
+ M as MessageSource,
30
+ k as MessageSources,
31
+ N as NewSessionButton,
32
+ b as SessionEmpty,
33
+ p as SessionGroups,
34
+ o as SessionListItem,
35
+ e as SessionMessage,
36
+ d as SessionMessagePanel,
37
+ l as SessionMessages,
38
+ c as SessionMessagesHeader,
39
+ q as SessionsGroup,
40
+ n as SessionsList,
41
+ T as TableComponent,
42
+ u as TableDataCell,
43
+ t as TableHeaderCell,
44
+ r as chatTheme,
45
+ x as dark,
46
+ y as light,
47
+ w as remarkCve
2152
48
  };
2153
49
  //# sourceMappingURL=index.js.map