reachat 2.1.0-alpha.9 → 2.1.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.
Files changed (82) hide show
  1. package/README.md +4 -2
  2. package/dist/AppBar/AppBar.d.ts +1 -1
  3. package/dist/{CSVFileRenderer-CkRKGiCl.js → CSVFileRenderer-D2mDdCjs.js} +14 -15
  4. package/dist/CSVFileRenderer-D2mDdCjs.js.map +1 -0
  5. package/dist/Chat.d.ts +9 -3
  6. package/dist/ChatBubble/ChatBubble.d.ts +1 -1
  7. package/dist/ChatContext.d.ts +4 -2
  8. package/dist/ChatInput/ChatInput.d.ts +23 -13
  9. package/dist/ChatInput/FileInput.d.ts +1 -1
  10. package/dist/ChatInput/MentionList.d.ts +32 -0
  11. package/dist/ChatInput/RichTextInput.d.ts +55 -0
  12. package/dist/ChatInput/index.d.ts +3 -0
  13. package/dist/ChatInput/types.d.ts +104 -0
  14. package/dist/ChatSuggestions/ChatSuggestion.d.ts +9 -0
  15. package/dist/ChatSuggestions/ChatSuggestions.d.ts +22 -0
  16. package/dist/ChatSuggestions/index.d.ts +2 -0
  17. package/dist/{DefaultFileRenderer-C1qZ57tG.js → DefaultFileRenderer-BLV8PtJk.js} +2 -2
  18. package/dist/DefaultFileRenderer-BLV8PtJk.js.map +1 -0
  19. package/dist/ImageFileRenderer-C8tVW3I8.js.map +1 -1
  20. package/dist/Markdown/Markdown.d.ts +4 -3
  21. package/dist/Markdown/Table.d.ts +1 -1
  22. package/dist/Markdown/charts/ChartError.d.ts +21 -0
  23. package/dist/Markdown/charts/ChartPre.d.ts +6 -0
  24. package/dist/Markdown/charts/ChartRenderer.d.ts +13 -0
  25. package/dist/Markdown/charts/chartHelpers.d.ts +40 -0
  26. package/dist/Markdown/charts/chartHelpers.spec.d.ts +1 -0
  27. package/dist/Markdown/charts/index.d.ts +7 -0
  28. package/dist/Markdown/index.d.ts +3 -2
  29. package/dist/Markdown/plugins/index.d.ts +1 -0
  30. package/dist/Markdown/plugins/remarkChart.d.ts +59 -0
  31. package/dist/Markdown/plugins/remarkCve.d.ts +1 -1
  32. package/dist/MessageStatus/MessageStatus.d.ts +44 -0
  33. package/dist/MessageStatus/MessageStatusItem.d.ts +9 -0
  34. package/dist/MessageStatus/StatusIcon.d.ts +17 -0
  35. package/dist/MessageStatus/index.d.ts +3 -0
  36. package/dist/PDFFileRenderer-DQdFS2l6.js +9 -0
  37. package/dist/PDFFileRenderer-DQdFS2l6.js.map +1 -0
  38. package/dist/SessionMessages/SessionEmpty.d.ts +4 -1
  39. package/dist/SessionMessages/SessionMessage/MessageFile/renderers/index.d.ts +1 -1
  40. package/dist/SessionMessages/SessionMessage/MessageFiles.d.ts +1 -1
  41. package/dist/SessionMessages/SessionMessage/MessageSources.d.ts +1 -1
  42. package/dist/SessionMessages/SessionMessage/SessionMessage.d.ts +0 -4
  43. package/dist/SessionMessages/SessionMessage/index.d.ts +2 -2
  44. package/dist/SessionMessages/SessionMessages.d.ts +3 -7
  45. package/dist/SessionMessages/index.d.ts +2 -2
  46. package/dist/SessionsList/index.d.ts +2 -2
  47. package/dist/docs.json +1037 -183
  48. package/dist/index-B3dZT-5c.js +4369 -0
  49. package/dist/index-B3dZT-5c.js.map +1 -0
  50. package/dist/index.css +2129 -6532
  51. package/dist/index.d.ts +8 -7
  52. package/dist/index.js +49 -34
  53. package/dist/index.umd.cjs +3414 -1320
  54. package/dist/index.umd.cjs.map +1 -1
  55. package/dist/stories/Changelog.mdx +1 -1
  56. package/dist/stories/ChartError.stories.tsx +85 -0
  57. package/dist/stories/Charts.stories.tsx +371 -0
  58. package/dist/stories/Chat.stories.tsx +5 -5
  59. package/dist/stories/ChatBubble.stories.tsx +3 -3
  60. package/dist/stories/ChatSuggestions.stories.tsx +541 -0
  61. package/dist/stories/Companion.stories.tsx +6 -6
  62. package/dist/stories/Console.stories.tsx +165 -25
  63. package/dist/stories/EnhancedInput.stories.tsx +322 -0
  64. package/dist/stories/Integration.stories.tsx +2 -2
  65. package/dist/stories/Intro.mdx +1 -1
  66. package/dist/stories/MessageStatus.stories.tsx +314 -0
  67. package/dist/stories/RichTextInput.stories.tsx +198 -0
  68. package/dist/stories/assets/logo.svg +19 -38
  69. package/dist/stories/assets/paperclip.svg +1 -4
  70. package/dist/stories/assets/search.svg +1 -5
  71. package/dist/stories/assets/sparkles.svg +7 -0
  72. package/dist/stories/examples.ts +47 -20
  73. package/dist/theme.d.ts +76 -13
  74. package/dist/types.d.ts +10 -0
  75. package/package.json +69 -66
  76. package/dist/CSVFileRenderer-CkRKGiCl.js.map +0 -1
  77. package/dist/DefaultFileRenderer-C1qZ57tG.js.map +0 -1
  78. package/dist/PDFFileRenderer-BBn2EVrV.js +0 -16
  79. package/dist/PDFFileRenderer-BBn2EVrV.js.map +0 -1
  80. package/dist/index-6CsqxEMx.js +0 -2257
  81. package/dist/index-6CsqxEMx.js.map +0 -1
  82. package/dist/utils/index.d.ts +0 -1
@@ -0,0 +1,4369 @@
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { createContext, useContext, useRef, forwardRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, lazy, Suspense, memo, isValidElement, cloneElement } from "react";
4
+ import { Button, cn, List, ListItem, Ellipsis, DateFormat, IconButton, Card, useInfinityList, useComponentTheme, ConnectedOverlay } from "reablocks";
5
+ import { useEditor, EditorContent, ReactRenderer, posToDOMRect } from "@tiptap/react";
6
+ import Document from "@tiptap/extension-document";
7
+ import Paragraph from "@tiptap/extension-paragraph";
8
+ import Text from "@tiptap/extension-text";
9
+ import HardBreak from "@tiptap/extension-hard-break";
10
+ import Placeholder from "@tiptap/extension-placeholder";
11
+ import Mention from "@tiptap/extension-mention";
12
+ import { Slot } from "@radix-ui/react-slot";
13
+ import { motion, AnimatePresence } from "motion/react";
14
+ import ReactMarkdown from "react-markdown";
15
+ import { Prism } from "react-syntax-highlighter";
16
+ import rehypeKatex from "rehype-katex";
17
+ import { SparklineChart, RadialAreaChart, RadialAreaSeries, RadialBarChart, RadialBarSeries, PieChart, PieArcSeries, AreaChart, AreaSeries, LinearYAxis, LinearXAxis, LineChart, LineSeries, BarChart, BarSeries } from "reaviz";
18
+ import { findAndReplace } from "mdast-util-find-and-replace";
19
+ import { visit } from "unist-util-visit";
20
+ import debounce from "lodash/debounce";
21
+ import { useHotkeys } from "reakeys";
22
+ import remarkGfm from "remark-gfm";
23
+ import remarkYoutube from "remark-youtube";
24
+ import remarkMath from "remark-math";
25
+ import { isToday, isYesterday, isThisWeek, differenceInYears, format } from "date-fns";
26
+ import { offset } from "@floating-ui/react";
27
+ 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" })));
28
+ 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" }));
29
+ const ChatContext = createContext({
30
+ sessions: [],
31
+ activeSessionId: null
32
+ });
33
+ 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" }));
34
+ const FileInput = ({
35
+ allowedFiles,
36
+ onFileUpload,
37
+ isLoading,
38
+ disabled,
39
+ attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
40
+ }) => {
41
+ const { theme } = useContext(ChatContext);
42
+ const fileInputRef = useRef(null);
43
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
44
+ /* @__PURE__ */ jsx(
45
+ "input",
46
+ {
47
+ type: "file",
48
+ ref: fileInputRef,
49
+ className: "hidden",
50
+ accept: allowedFiles.join(","),
51
+ onChange: (e) => {
52
+ onFileUpload(e);
53
+ if (fileInputRef.current) {
54
+ fileInputRef.current.value = "";
55
+ }
56
+ }
57
+ }
58
+ ),
59
+ /* @__PURE__ */ jsx(
60
+ Button,
61
+ {
62
+ title: "Upload",
63
+ variant: "text",
64
+ disabled: isLoading || disabled,
65
+ className: cn(theme.input.upload),
66
+ onClick: () => {
67
+ var _a;
68
+ return (_a = fileInputRef.current) == null ? void 0 : _a.click();
69
+ },
70
+ children: attachIcon
71
+ }
72
+ )
73
+ ] });
74
+ };
75
+ const min = Math.min;
76
+ const max = Math.max;
77
+ const round = Math.round;
78
+ const createCoords = (v) => ({
79
+ x: v,
80
+ y: v
81
+ });
82
+ const oppositeSideMap = {
83
+ left: "right",
84
+ right: "left",
85
+ bottom: "top",
86
+ top: "bottom"
87
+ };
88
+ const oppositeAlignmentMap = {
89
+ start: "end",
90
+ end: "start"
91
+ };
92
+ function clamp(start, value, end) {
93
+ return max(start, min(value, end));
94
+ }
95
+ function evaluate(value, param) {
96
+ return typeof value === "function" ? value(param) : value;
97
+ }
98
+ function getSide(placement) {
99
+ return placement.split("-")[0];
100
+ }
101
+ function getAlignment(placement) {
102
+ return placement.split("-")[1];
103
+ }
104
+ function getOppositeAxis(axis) {
105
+ return axis === "x" ? "y" : "x";
106
+ }
107
+ function getAxisLength(axis) {
108
+ return axis === "y" ? "height" : "width";
109
+ }
110
+ const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
111
+ function getSideAxis(placement) {
112
+ return yAxisSides.has(getSide(placement)) ? "y" : "x";
113
+ }
114
+ function getAlignmentAxis(placement) {
115
+ return getOppositeAxis(getSideAxis(placement));
116
+ }
117
+ function getAlignmentSides(placement, rects, rtl) {
118
+ if (rtl === void 0) {
119
+ rtl = false;
120
+ }
121
+ const alignment = getAlignment(placement);
122
+ const alignmentAxis = getAlignmentAxis(placement);
123
+ const length = getAxisLength(alignmentAxis);
124
+ let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
125
+ if (rects.reference[length] > rects.floating[length]) {
126
+ mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
127
+ }
128
+ return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
129
+ }
130
+ function getExpandedPlacements(placement) {
131
+ const oppositePlacement = getOppositePlacement(placement);
132
+ return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
133
+ }
134
+ function getOppositeAlignmentPlacement(placement) {
135
+ return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
136
+ }
137
+ const lrPlacement = ["left", "right"];
138
+ const rlPlacement = ["right", "left"];
139
+ const tbPlacement = ["top", "bottom"];
140
+ const btPlacement = ["bottom", "top"];
141
+ function getSideList(side, isStart, rtl) {
142
+ switch (side) {
143
+ case "top":
144
+ case "bottom":
145
+ if (rtl) return isStart ? rlPlacement : lrPlacement;
146
+ return isStart ? lrPlacement : rlPlacement;
147
+ case "left":
148
+ case "right":
149
+ return isStart ? tbPlacement : btPlacement;
150
+ default:
151
+ return [];
152
+ }
153
+ }
154
+ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
155
+ const alignment = getAlignment(placement);
156
+ let list = getSideList(getSide(placement), direction === "start", rtl);
157
+ if (alignment) {
158
+ list = list.map((side) => side + "-" + alignment);
159
+ if (flipAlignment) {
160
+ list = list.concat(list.map(getOppositeAlignmentPlacement));
161
+ }
162
+ }
163
+ return list;
164
+ }
165
+ function getOppositePlacement(placement) {
166
+ return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
167
+ }
168
+ function expandPaddingObject(padding) {
169
+ return {
170
+ top: 0,
171
+ right: 0,
172
+ bottom: 0,
173
+ left: 0,
174
+ ...padding
175
+ };
176
+ }
177
+ function getPaddingObject(padding) {
178
+ return typeof padding !== "number" ? expandPaddingObject(padding) : {
179
+ top: padding,
180
+ right: padding,
181
+ bottom: padding,
182
+ left: padding
183
+ };
184
+ }
185
+ function rectToClientRect(rect) {
186
+ const {
187
+ x,
188
+ y,
189
+ width,
190
+ height
191
+ } = rect;
192
+ return {
193
+ width,
194
+ height,
195
+ top: y,
196
+ left: x,
197
+ right: x + width,
198
+ bottom: y + height,
199
+ x,
200
+ y
201
+ };
202
+ }
203
+ function computeCoordsFromPlacement(_ref, placement, rtl) {
204
+ let {
205
+ reference,
206
+ floating
207
+ } = _ref;
208
+ const sideAxis = getSideAxis(placement);
209
+ const alignmentAxis = getAlignmentAxis(placement);
210
+ const alignLength = getAxisLength(alignmentAxis);
211
+ const side = getSide(placement);
212
+ const isVertical = sideAxis === "y";
213
+ const commonX = reference.x + reference.width / 2 - floating.width / 2;
214
+ const commonY = reference.y + reference.height / 2 - floating.height / 2;
215
+ const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
216
+ let coords;
217
+ switch (side) {
218
+ case "top":
219
+ coords = {
220
+ x: commonX,
221
+ y: reference.y - floating.height
222
+ };
223
+ break;
224
+ case "bottom":
225
+ coords = {
226
+ x: commonX,
227
+ y: reference.y + reference.height
228
+ };
229
+ break;
230
+ case "right":
231
+ coords = {
232
+ x: reference.x + reference.width,
233
+ y: commonY
234
+ };
235
+ break;
236
+ case "left":
237
+ coords = {
238
+ x: reference.x - floating.width,
239
+ y: commonY
240
+ };
241
+ break;
242
+ default:
243
+ coords = {
244
+ x: reference.x,
245
+ y: reference.y
246
+ };
247
+ }
248
+ switch (getAlignment(placement)) {
249
+ case "start":
250
+ coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
251
+ break;
252
+ case "end":
253
+ coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
254
+ break;
255
+ }
256
+ return coords;
257
+ }
258
+ const computePosition$1 = async (reference, floating, config) => {
259
+ const {
260
+ placement = "bottom",
261
+ strategy = "absolute",
262
+ middleware = [],
263
+ platform: platform2
264
+ } = config;
265
+ const validMiddleware = middleware.filter(Boolean);
266
+ const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
267
+ let rects = await platform2.getElementRects({
268
+ reference,
269
+ floating,
270
+ strategy
271
+ });
272
+ let {
273
+ x,
274
+ y
275
+ } = computeCoordsFromPlacement(rects, placement, rtl);
276
+ let statefulPlacement = placement;
277
+ let middlewareData = {};
278
+ let resetCount = 0;
279
+ for (let i = 0; i < validMiddleware.length; i++) {
280
+ const {
281
+ name,
282
+ fn
283
+ } = validMiddleware[i];
284
+ const {
285
+ x: nextX,
286
+ y: nextY,
287
+ data,
288
+ reset
289
+ } = await fn({
290
+ x,
291
+ y,
292
+ initialPlacement: placement,
293
+ placement: statefulPlacement,
294
+ strategy,
295
+ middlewareData,
296
+ rects,
297
+ platform: platform2,
298
+ elements: {
299
+ reference,
300
+ floating
301
+ }
302
+ });
303
+ x = nextX != null ? nextX : x;
304
+ y = nextY != null ? nextY : y;
305
+ middlewareData = {
306
+ ...middlewareData,
307
+ [name]: {
308
+ ...middlewareData[name],
309
+ ...data
310
+ }
311
+ };
312
+ if (reset && resetCount <= 50) {
313
+ resetCount++;
314
+ if (typeof reset === "object") {
315
+ if (reset.placement) {
316
+ statefulPlacement = reset.placement;
317
+ }
318
+ if (reset.rects) {
319
+ rects = reset.rects === true ? await platform2.getElementRects({
320
+ reference,
321
+ floating,
322
+ strategy
323
+ }) : reset.rects;
324
+ }
325
+ ({
326
+ x,
327
+ y
328
+ } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
329
+ }
330
+ i = -1;
331
+ }
332
+ }
333
+ return {
334
+ x,
335
+ y,
336
+ placement: statefulPlacement,
337
+ strategy,
338
+ middlewareData
339
+ };
340
+ };
341
+ async function detectOverflow(state, options) {
342
+ var _await$platform$isEle;
343
+ if (options === void 0) {
344
+ options = {};
345
+ }
346
+ const {
347
+ x,
348
+ y,
349
+ platform: platform2,
350
+ rects,
351
+ elements,
352
+ strategy
353
+ } = state;
354
+ const {
355
+ boundary = "clippingAncestors",
356
+ rootBoundary = "viewport",
357
+ elementContext = "floating",
358
+ altBoundary = false,
359
+ padding = 0
360
+ } = evaluate(options, state);
361
+ const paddingObject = getPaddingObject(padding);
362
+ const altContext = elementContext === "floating" ? "reference" : "floating";
363
+ const element = elements[altBoundary ? altContext : elementContext];
364
+ const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
365
+ element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
366
+ boundary,
367
+ rootBoundary,
368
+ strategy
369
+ }));
370
+ const rect = elementContext === "floating" ? {
371
+ x,
372
+ y,
373
+ width: rects.floating.width,
374
+ height: rects.floating.height
375
+ } : rects.reference;
376
+ const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
377
+ const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
378
+ x: 1,
379
+ y: 1
380
+ } : {
381
+ x: 1,
382
+ y: 1
383
+ };
384
+ const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
385
+ elements,
386
+ rect,
387
+ offsetParent,
388
+ strategy
389
+ }) : rect);
390
+ return {
391
+ top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
392
+ bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
393
+ left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
394
+ right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
395
+ };
396
+ }
397
+ const flip$1 = function(options) {
398
+ if (options === void 0) {
399
+ options = {};
400
+ }
401
+ return {
402
+ name: "flip",
403
+ options,
404
+ async fn(state) {
405
+ var _middlewareData$arrow, _middlewareData$flip;
406
+ const {
407
+ placement,
408
+ middlewareData,
409
+ rects,
410
+ initialPlacement,
411
+ platform: platform2,
412
+ elements
413
+ } = state;
414
+ const {
415
+ mainAxis: checkMainAxis = true,
416
+ crossAxis: checkCrossAxis = true,
417
+ fallbackPlacements: specifiedFallbackPlacements,
418
+ fallbackStrategy = "bestFit",
419
+ fallbackAxisSideDirection = "none",
420
+ flipAlignment = true,
421
+ ...detectOverflowOptions
422
+ } = evaluate(options, state);
423
+ if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
424
+ return {};
425
+ }
426
+ const side = getSide(placement);
427
+ const initialSideAxis = getSideAxis(initialPlacement);
428
+ const isBasePlacement = getSide(initialPlacement) === initialPlacement;
429
+ const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
430
+ const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
431
+ const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
432
+ if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
433
+ fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
434
+ }
435
+ const placements = [initialPlacement, ...fallbackPlacements];
436
+ const overflow = await detectOverflow(state, detectOverflowOptions);
437
+ const overflows = [];
438
+ let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
439
+ if (checkMainAxis) {
440
+ overflows.push(overflow[side]);
441
+ }
442
+ if (checkCrossAxis) {
443
+ const sides = getAlignmentSides(placement, rects, rtl);
444
+ overflows.push(overflow[sides[0]], overflow[sides[1]]);
445
+ }
446
+ overflowsData = [...overflowsData, {
447
+ placement,
448
+ overflows
449
+ }];
450
+ if (!overflows.every((side2) => side2 <= 0)) {
451
+ var _middlewareData$flip2, _overflowsData$filter;
452
+ const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
453
+ const nextPlacement = placements[nextIndex];
454
+ if (nextPlacement) {
455
+ const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
456
+ if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
457
+ // overflows the main axis.
458
+ overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
459
+ return {
460
+ data: {
461
+ index: nextIndex,
462
+ overflows: overflowsData
463
+ },
464
+ reset: {
465
+ placement: nextPlacement
466
+ }
467
+ };
468
+ }
469
+ }
470
+ let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
471
+ if (!resetPlacement) {
472
+ switch (fallbackStrategy) {
473
+ case "bestFit": {
474
+ var _overflowsData$filter2;
475
+ const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
476
+ if (hasFallbackAxisSideDirection) {
477
+ const currentSideAxis = getSideAxis(d.placement);
478
+ return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
479
+ // reading directions favoring greater width.
480
+ currentSideAxis === "y";
481
+ }
482
+ return true;
483
+ }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
484
+ if (placement2) {
485
+ resetPlacement = placement2;
486
+ }
487
+ break;
488
+ }
489
+ case "initialPlacement":
490
+ resetPlacement = initialPlacement;
491
+ break;
492
+ }
493
+ }
494
+ if (placement !== resetPlacement) {
495
+ return {
496
+ reset: {
497
+ placement: resetPlacement
498
+ }
499
+ };
500
+ }
501
+ }
502
+ return {};
503
+ }
504
+ };
505
+ };
506
+ const shift$1 = function(options) {
507
+ if (options === void 0) {
508
+ options = {};
509
+ }
510
+ return {
511
+ name: "shift",
512
+ options,
513
+ async fn(state) {
514
+ const {
515
+ x,
516
+ y,
517
+ placement
518
+ } = state;
519
+ const {
520
+ mainAxis: checkMainAxis = true,
521
+ crossAxis: checkCrossAxis = false,
522
+ limiter = {
523
+ fn: (_ref) => {
524
+ let {
525
+ x: x2,
526
+ y: y2
527
+ } = _ref;
528
+ return {
529
+ x: x2,
530
+ y: y2
531
+ };
532
+ }
533
+ },
534
+ ...detectOverflowOptions
535
+ } = evaluate(options, state);
536
+ const coords = {
537
+ x,
538
+ y
539
+ };
540
+ const overflow = await detectOverflow(state, detectOverflowOptions);
541
+ const crossAxis = getSideAxis(getSide(placement));
542
+ const mainAxis = getOppositeAxis(crossAxis);
543
+ let mainAxisCoord = coords[mainAxis];
544
+ let crossAxisCoord = coords[crossAxis];
545
+ if (checkMainAxis) {
546
+ const minSide = mainAxis === "y" ? "top" : "left";
547
+ const maxSide = mainAxis === "y" ? "bottom" : "right";
548
+ const min2 = mainAxisCoord + overflow[minSide];
549
+ const max2 = mainAxisCoord - overflow[maxSide];
550
+ mainAxisCoord = clamp(min2, mainAxisCoord, max2);
551
+ }
552
+ if (checkCrossAxis) {
553
+ const minSide = crossAxis === "y" ? "top" : "left";
554
+ const maxSide = crossAxis === "y" ? "bottom" : "right";
555
+ const min2 = crossAxisCoord + overflow[minSide];
556
+ const max2 = crossAxisCoord - overflow[maxSide];
557
+ crossAxisCoord = clamp(min2, crossAxisCoord, max2);
558
+ }
559
+ const limitedCoords = limiter.fn({
560
+ ...state,
561
+ [mainAxis]: mainAxisCoord,
562
+ [crossAxis]: crossAxisCoord
563
+ });
564
+ return {
565
+ ...limitedCoords,
566
+ data: {
567
+ x: limitedCoords.x - x,
568
+ y: limitedCoords.y - y,
569
+ enabled: {
570
+ [mainAxis]: checkMainAxis,
571
+ [crossAxis]: checkCrossAxis
572
+ }
573
+ }
574
+ };
575
+ }
576
+ };
577
+ };
578
+ function hasWindow() {
579
+ return typeof window !== "undefined";
580
+ }
581
+ function getNodeName(node) {
582
+ if (isNode(node)) {
583
+ return (node.nodeName || "").toLowerCase();
584
+ }
585
+ return "#document";
586
+ }
587
+ function getWindow(node) {
588
+ var _node$ownerDocument;
589
+ return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
590
+ }
591
+ function getDocumentElement(node) {
592
+ var _ref;
593
+ return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
594
+ }
595
+ function isNode(value) {
596
+ if (!hasWindow()) {
597
+ return false;
598
+ }
599
+ return value instanceof Node || value instanceof getWindow(value).Node;
600
+ }
601
+ function isElement(value) {
602
+ if (!hasWindow()) {
603
+ return false;
604
+ }
605
+ return value instanceof Element || value instanceof getWindow(value).Element;
606
+ }
607
+ function isHTMLElement(value) {
608
+ if (!hasWindow()) {
609
+ return false;
610
+ }
611
+ return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
612
+ }
613
+ function isShadowRoot(value) {
614
+ if (!hasWindow() || typeof ShadowRoot === "undefined") {
615
+ return false;
616
+ }
617
+ return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
618
+ }
619
+ const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
620
+ function isOverflowElement(element) {
621
+ const {
622
+ overflow,
623
+ overflowX,
624
+ overflowY,
625
+ display
626
+ } = getComputedStyle$1(element);
627
+ return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
628
+ }
629
+ const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
630
+ function isTableElement(element) {
631
+ return tableElements.has(getNodeName(element));
632
+ }
633
+ const topLayerSelectors = [":popover-open", ":modal"];
634
+ function isTopLayer(element) {
635
+ return topLayerSelectors.some((selector) => {
636
+ try {
637
+ return element.matches(selector);
638
+ } catch (_e) {
639
+ return false;
640
+ }
641
+ });
642
+ }
643
+ const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
644
+ const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
645
+ const containValues = ["paint", "layout", "strict", "content"];
646
+ function isContainingBlock(elementOrCss) {
647
+ const webkit = isWebKit();
648
+ const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
649
+ return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
650
+ }
651
+ function getContainingBlock(element) {
652
+ let currentNode = getParentNode(element);
653
+ while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
654
+ if (isContainingBlock(currentNode)) {
655
+ return currentNode;
656
+ } else if (isTopLayer(currentNode)) {
657
+ return null;
658
+ }
659
+ currentNode = getParentNode(currentNode);
660
+ }
661
+ return null;
662
+ }
663
+ function isWebKit() {
664
+ if (typeof CSS === "undefined" || !CSS.supports) return false;
665
+ return CSS.supports("-webkit-backdrop-filter", "none");
666
+ }
667
+ const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
668
+ function isLastTraversableNode(node) {
669
+ return lastTraversableNodeNames.has(getNodeName(node));
670
+ }
671
+ function getComputedStyle$1(element) {
672
+ return getWindow(element).getComputedStyle(element);
673
+ }
674
+ function getNodeScroll(element) {
675
+ if (isElement(element)) {
676
+ return {
677
+ scrollLeft: element.scrollLeft,
678
+ scrollTop: element.scrollTop
679
+ };
680
+ }
681
+ return {
682
+ scrollLeft: element.scrollX,
683
+ scrollTop: element.scrollY
684
+ };
685
+ }
686
+ function getParentNode(node) {
687
+ if (getNodeName(node) === "html") {
688
+ return node;
689
+ }
690
+ const result = (
691
+ // Step into the shadow DOM of the parent of a slotted node.
692
+ node.assignedSlot || // DOM Element detected.
693
+ node.parentNode || // ShadowRoot detected.
694
+ isShadowRoot(node) && node.host || // Fallback.
695
+ getDocumentElement(node)
696
+ );
697
+ return isShadowRoot(result) ? result.host : result;
698
+ }
699
+ function getNearestOverflowAncestor(node) {
700
+ const parentNode = getParentNode(node);
701
+ if (isLastTraversableNode(parentNode)) {
702
+ return node.ownerDocument ? node.ownerDocument.body : node.body;
703
+ }
704
+ if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
705
+ return parentNode;
706
+ }
707
+ return getNearestOverflowAncestor(parentNode);
708
+ }
709
+ function getOverflowAncestors(node, list, traverseIframes) {
710
+ var _node$ownerDocument2;
711
+ if (list === void 0) {
712
+ list = [];
713
+ }
714
+ const scrollableAncestor = getNearestOverflowAncestor(node);
715
+ const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
716
+ const win = getWindow(scrollableAncestor);
717
+ if (isBody) {
718
+ getFrameElement(win);
719
+ return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], []);
720
+ }
721
+ return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, []));
722
+ }
723
+ function getFrameElement(win) {
724
+ return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
725
+ }
726
+ function getCssDimensions(element) {
727
+ const css = getComputedStyle$1(element);
728
+ let width = parseFloat(css.width) || 0;
729
+ let height = parseFloat(css.height) || 0;
730
+ const hasOffset = isHTMLElement(element);
731
+ const offsetWidth = hasOffset ? element.offsetWidth : width;
732
+ const offsetHeight = hasOffset ? element.offsetHeight : height;
733
+ const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
734
+ if (shouldFallback) {
735
+ width = offsetWidth;
736
+ height = offsetHeight;
737
+ }
738
+ return {
739
+ width,
740
+ height,
741
+ $: shouldFallback
742
+ };
743
+ }
744
+ function unwrapElement(element) {
745
+ return !isElement(element) ? element.contextElement : element;
746
+ }
747
+ function getScale(element) {
748
+ const domElement = unwrapElement(element);
749
+ if (!isHTMLElement(domElement)) {
750
+ return createCoords(1);
751
+ }
752
+ const rect = domElement.getBoundingClientRect();
753
+ const {
754
+ width,
755
+ height,
756
+ $
757
+ } = getCssDimensions(domElement);
758
+ let x = ($ ? round(rect.width) : rect.width) / width;
759
+ let y = ($ ? round(rect.height) : rect.height) / height;
760
+ if (!x || !Number.isFinite(x)) {
761
+ x = 1;
762
+ }
763
+ if (!y || !Number.isFinite(y)) {
764
+ y = 1;
765
+ }
766
+ return {
767
+ x,
768
+ y
769
+ };
770
+ }
771
+ const noOffsets = /* @__PURE__ */ createCoords(0);
772
+ function getVisualOffsets(element) {
773
+ const win = getWindow(element);
774
+ if (!isWebKit() || !win.visualViewport) {
775
+ return noOffsets;
776
+ }
777
+ return {
778
+ x: win.visualViewport.offsetLeft,
779
+ y: win.visualViewport.offsetTop
780
+ };
781
+ }
782
+ function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
783
+ if (isFixed === void 0) {
784
+ isFixed = false;
785
+ }
786
+ if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
787
+ return false;
788
+ }
789
+ return isFixed;
790
+ }
791
+ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
792
+ if (includeScale === void 0) {
793
+ includeScale = false;
794
+ }
795
+ if (isFixedStrategy === void 0) {
796
+ isFixedStrategy = false;
797
+ }
798
+ const clientRect = element.getBoundingClientRect();
799
+ const domElement = unwrapElement(element);
800
+ let scale = createCoords(1);
801
+ if (includeScale) {
802
+ if (offsetParent) {
803
+ if (isElement(offsetParent)) {
804
+ scale = getScale(offsetParent);
805
+ }
806
+ } else {
807
+ scale = getScale(element);
808
+ }
809
+ }
810
+ const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
811
+ let x = (clientRect.left + visualOffsets.x) / scale.x;
812
+ let y = (clientRect.top + visualOffsets.y) / scale.y;
813
+ let width = clientRect.width / scale.x;
814
+ let height = clientRect.height / scale.y;
815
+ if (domElement) {
816
+ const win = getWindow(domElement);
817
+ const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
818
+ let currentWin = win;
819
+ let currentIFrame = getFrameElement(currentWin);
820
+ while (currentIFrame && offsetParent && offsetWin !== currentWin) {
821
+ const iframeScale = getScale(currentIFrame);
822
+ const iframeRect = currentIFrame.getBoundingClientRect();
823
+ const css = getComputedStyle$1(currentIFrame);
824
+ const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
825
+ const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
826
+ x *= iframeScale.x;
827
+ y *= iframeScale.y;
828
+ width *= iframeScale.x;
829
+ height *= iframeScale.y;
830
+ x += left;
831
+ y += top;
832
+ currentWin = getWindow(currentIFrame);
833
+ currentIFrame = getFrameElement(currentWin);
834
+ }
835
+ }
836
+ return rectToClientRect({
837
+ width,
838
+ height,
839
+ x,
840
+ y
841
+ });
842
+ }
843
+ function getWindowScrollBarX(element, rect) {
844
+ const leftScroll = getNodeScroll(element).scrollLeft;
845
+ if (!rect) {
846
+ return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
847
+ }
848
+ return rect.left + leftScroll;
849
+ }
850
+ function getHTMLOffset(documentElement, scroll) {
851
+ const htmlRect = documentElement.getBoundingClientRect();
852
+ const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
853
+ const y = htmlRect.top + scroll.scrollTop;
854
+ return {
855
+ x,
856
+ y
857
+ };
858
+ }
859
+ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
860
+ let {
861
+ elements,
862
+ rect,
863
+ offsetParent,
864
+ strategy
865
+ } = _ref;
866
+ const isFixed = strategy === "fixed";
867
+ const documentElement = getDocumentElement(offsetParent);
868
+ const topLayer = elements ? isTopLayer(elements.floating) : false;
869
+ if (offsetParent === documentElement || topLayer && isFixed) {
870
+ return rect;
871
+ }
872
+ let scroll = {
873
+ scrollLeft: 0,
874
+ scrollTop: 0
875
+ };
876
+ let scale = createCoords(1);
877
+ const offsets = createCoords(0);
878
+ const isOffsetParentAnElement = isHTMLElement(offsetParent);
879
+ if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
880
+ if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
881
+ scroll = getNodeScroll(offsetParent);
882
+ }
883
+ if (isHTMLElement(offsetParent)) {
884
+ const offsetRect = getBoundingClientRect(offsetParent);
885
+ scale = getScale(offsetParent);
886
+ offsets.x = offsetRect.x + offsetParent.clientLeft;
887
+ offsets.y = offsetRect.y + offsetParent.clientTop;
888
+ }
889
+ }
890
+ const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
891
+ return {
892
+ width: rect.width * scale.x,
893
+ height: rect.height * scale.y,
894
+ x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
895
+ y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
896
+ };
897
+ }
898
+ function getClientRects(element) {
899
+ return Array.from(element.getClientRects());
900
+ }
901
+ function getDocumentRect(element) {
902
+ const html = getDocumentElement(element);
903
+ const scroll = getNodeScroll(element);
904
+ const body = element.ownerDocument.body;
905
+ const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
906
+ const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
907
+ let x = -scroll.scrollLeft + getWindowScrollBarX(element);
908
+ const y = -scroll.scrollTop;
909
+ if (getComputedStyle$1(body).direction === "rtl") {
910
+ x += max(html.clientWidth, body.clientWidth) - width;
911
+ }
912
+ return {
913
+ width,
914
+ height,
915
+ x,
916
+ y
917
+ };
918
+ }
919
+ const SCROLLBAR_MAX = 25;
920
+ function getViewportRect(element, strategy) {
921
+ const win = getWindow(element);
922
+ const html = getDocumentElement(element);
923
+ const visualViewport = win.visualViewport;
924
+ let width = html.clientWidth;
925
+ let height = html.clientHeight;
926
+ let x = 0;
927
+ let y = 0;
928
+ if (visualViewport) {
929
+ width = visualViewport.width;
930
+ height = visualViewport.height;
931
+ const visualViewportBased = isWebKit();
932
+ if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
933
+ x = visualViewport.offsetLeft;
934
+ y = visualViewport.offsetTop;
935
+ }
936
+ }
937
+ const windowScrollbarX = getWindowScrollBarX(html);
938
+ if (windowScrollbarX <= 0) {
939
+ const doc = html.ownerDocument;
940
+ const body = doc.body;
941
+ const bodyStyles = getComputedStyle(body);
942
+ const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
943
+ const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
944
+ if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
945
+ width -= clippingStableScrollbarWidth;
946
+ }
947
+ } else if (windowScrollbarX <= SCROLLBAR_MAX) {
948
+ width += windowScrollbarX;
949
+ }
950
+ return {
951
+ width,
952
+ height,
953
+ x,
954
+ y
955
+ };
956
+ }
957
+ const absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
958
+ function getInnerBoundingClientRect(element, strategy) {
959
+ const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
960
+ const top = clientRect.top + element.clientTop;
961
+ const left = clientRect.left + element.clientLeft;
962
+ const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
963
+ const width = element.clientWidth * scale.x;
964
+ const height = element.clientHeight * scale.y;
965
+ const x = left * scale.x;
966
+ const y = top * scale.y;
967
+ return {
968
+ width,
969
+ height,
970
+ x,
971
+ y
972
+ };
973
+ }
974
+ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
975
+ let rect;
976
+ if (clippingAncestor === "viewport") {
977
+ rect = getViewportRect(element, strategy);
978
+ } else if (clippingAncestor === "document") {
979
+ rect = getDocumentRect(getDocumentElement(element));
980
+ } else if (isElement(clippingAncestor)) {
981
+ rect = getInnerBoundingClientRect(clippingAncestor, strategy);
982
+ } else {
983
+ const visualOffsets = getVisualOffsets(element);
984
+ rect = {
985
+ x: clippingAncestor.x - visualOffsets.x,
986
+ y: clippingAncestor.y - visualOffsets.y,
987
+ width: clippingAncestor.width,
988
+ height: clippingAncestor.height
989
+ };
990
+ }
991
+ return rectToClientRect(rect);
992
+ }
993
+ function hasFixedPositionAncestor(element, stopNode) {
994
+ const parentNode = getParentNode(element);
995
+ if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
996
+ return false;
997
+ }
998
+ return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
999
+ }
1000
+ function getClippingElementAncestors(element, cache) {
1001
+ const cachedResult = cache.get(element);
1002
+ if (cachedResult) {
1003
+ return cachedResult;
1004
+ }
1005
+ let result = getOverflowAncestors(element, []).filter((el) => isElement(el) && getNodeName(el) !== "body");
1006
+ let currentContainingBlockComputedStyle = null;
1007
+ const elementIsFixed = getComputedStyle$1(element).position === "fixed";
1008
+ let currentNode = elementIsFixed ? getParentNode(element) : element;
1009
+ while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1010
+ const computedStyle = getComputedStyle$1(currentNode);
1011
+ const currentNodeIsContaining = isContainingBlock(currentNode);
1012
+ if (!currentNodeIsContaining && computedStyle.position === "fixed") {
1013
+ currentContainingBlockComputedStyle = null;
1014
+ }
1015
+ const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1016
+ if (shouldDropCurrentNode) {
1017
+ result = result.filter((ancestor) => ancestor !== currentNode);
1018
+ } else {
1019
+ currentContainingBlockComputedStyle = computedStyle;
1020
+ }
1021
+ currentNode = getParentNode(currentNode);
1022
+ }
1023
+ cache.set(element, result);
1024
+ return result;
1025
+ }
1026
+ function getClippingRect(_ref) {
1027
+ let {
1028
+ element,
1029
+ boundary,
1030
+ rootBoundary,
1031
+ strategy
1032
+ } = _ref;
1033
+ const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1034
+ const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1035
+ const firstClippingAncestor = clippingAncestors[0];
1036
+ const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
1037
+ const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
1038
+ accRect.top = max(rect.top, accRect.top);
1039
+ accRect.right = min(rect.right, accRect.right);
1040
+ accRect.bottom = min(rect.bottom, accRect.bottom);
1041
+ accRect.left = max(rect.left, accRect.left);
1042
+ return accRect;
1043
+ }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
1044
+ return {
1045
+ width: clippingRect.right - clippingRect.left,
1046
+ height: clippingRect.bottom - clippingRect.top,
1047
+ x: clippingRect.left,
1048
+ y: clippingRect.top
1049
+ };
1050
+ }
1051
+ function getDimensions(element) {
1052
+ const {
1053
+ width,
1054
+ height
1055
+ } = getCssDimensions(element);
1056
+ return {
1057
+ width,
1058
+ height
1059
+ };
1060
+ }
1061
+ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1062
+ const isOffsetParentAnElement = isHTMLElement(offsetParent);
1063
+ const documentElement = getDocumentElement(offsetParent);
1064
+ const isFixed = strategy === "fixed";
1065
+ const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1066
+ let scroll = {
1067
+ scrollLeft: 0,
1068
+ scrollTop: 0
1069
+ };
1070
+ const offsets = createCoords(0);
1071
+ function setLeftRTLScrollbarOffset() {
1072
+ offsets.x = getWindowScrollBarX(documentElement);
1073
+ }
1074
+ if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1075
+ if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
1076
+ scroll = getNodeScroll(offsetParent);
1077
+ }
1078
+ if (isOffsetParentAnElement) {
1079
+ const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1080
+ offsets.x = offsetRect.x + offsetParent.clientLeft;
1081
+ offsets.y = offsetRect.y + offsetParent.clientTop;
1082
+ } else if (documentElement) {
1083
+ setLeftRTLScrollbarOffset();
1084
+ }
1085
+ }
1086
+ if (isFixed && !isOffsetParentAnElement && documentElement) {
1087
+ setLeftRTLScrollbarOffset();
1088
+ }
1089
+ const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1090
+ const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1091
+ const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1092
+ return {
1093
+ x,
1094
+ y,
1095
+ width: rect.width,
1096
+ height: rect.height
1097
+ };
1098
+ }
1099
+ function isStaticPositioned(element) {
1100
+ return getComputedStyle$1(element).position === "static";
1101
+ }
1102
+ function getTrueOffsetParent(element, polyfill) {
1103
+ if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
1104
+ return null;
1105
+ }
1106
+ if (polyfill) {
1107
+ return polyfill(element);
1108
+ }
1109
+ let rawOffsetParent = element.offsetParent;
1110
+ if (getDocumentElement(element) === rawOffsetParent) {
1111
+ rawOffsetParent = rawOffsetParent.ownerDocument.body;
1112
+ }
1113
+ return rawOffsetParent;
1114
+ }
1115
+ function getOffsetParent(element, polyfill) {
1116
+ const win = getWindow(element);
1117
+ if (isTopLayer(element)) {
1118
+ return win;
1119
+ }
1120
+ if (!isHTMLElement(element)) {
1121
+ let svgOffsetParent = getParentNode(element);
1122
+ while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1123
+ if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1124
+ return svgOffsetParent;
1125
+ }
1126
+ svgOffsetParent = getParentNode(svgOffsetParent);
1127
+ }
1128
+ return win;
1129
+ }
1130
+ let offsetParent = getTrueOffsetParent(element, polyfill);
1131
+ while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1132
+ offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1133
+ }
1134
+ if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1135
+ return win;
1136
+ }
1137
+ return offsetParent || getContainingBlock(element) || win;
1138
+ }
1139
+ const getElementRects = async function(data) {
1140
+ const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1141
+ const getDimensionsFn = this.getDimensions;
1142
+ const floatingDimensions = await getDimensionsFn(data.floating);
1143
+ return {
1144
+ reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1145
+ floating: {
1146
+ x: 0,
1147
+ y: 0,
1148
+ width: floatingDimensions.width,
1149
+ height: floatingDimensions.height
1150
+ }
1151
+ };
1152
+ };
1153
+ function isRTL(element) {
1154
+ return getComputedStyle$1(element).direction === "rtl";
1155
+ }
1156
+ const platform = {
1157
+ convertOffsetParentRelativeRectToViewportRelativeRect,
1158
+ getDocumentElement,
1159
+ getClippingRect,
1160
+ getOffsetParent,
1161
+ getElementRects,
1162
+ getClientRects,
1163
+ getDimensions,
1164
+ getScale,
1165
+ isElement,
1166
+ isRTL
1167
+ };
1168
+ const shift = shift$1;
1169
+ const flip = flip$1;
1170
+ const computePosition = (reference, floating, options) => {
1171
+ const cache = /* @__PURE__ */ new Map();
1172
+ const mergedOptions = {
1173
+ platform,
1174
+ ...options
1175
+ };
1176
+ const platformWithCache = {
1177
+ ...mergedOptions.platform,
1178
+ _c: cache
1179
+ };
1180
+ return computePosition$1(reference, floating, {
1181
+ ...mergedOptions,
1182
+ platform: platformWithCache
1183
+ });
1184
+ };
1185
+ const chatTheme = {
1186
+ base: "dark:text-white text-gray-500",
1187
+ console: "flex w-full gap-4 h-full",
1188
+ companion: "w-full h-full overflow-hidden",
1189
+ empty: "text-center flex-1",
1190
+ appbar: "flex p-5",
1191
+ status: {
1192
+ base: "py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30",
1193
+ header: "flex items-center gap-2",
1194
+ icon: {
1195
+ base: "flex-shrink-0 w-4 h-4",
1196
+ loading: "text-blue-500 dark:text-blue-400",
1197
+ complete: "text-green-500 dark:text-green-400",
1198
+ error: "text-red-500 dark:text-red-400"
1199
+ },
1200
+ text: {
1201
+ base: "text-sm",
1202
+ loading: "text-gray-600 dark:text-gray-400",
1203
+ complete: "text-gray-600 dark:text-gray-400",
1204
+ error: "text-red-600 dark:text-red-400"
1205
+ },
1206
+ steps: {
1207
+ base: "mt-1 ml-6 space-y-0.5",
1208
+ step: {
1209
+ base: "flex items-center gap-2",
1210
+ icon: "flex-shrink-0 w-3.5 h-3.5",
1211
+ text: "text-sm",
1212
+ loading: "text-gray-500 dark:text-gray-500",
1213
+ complete: "text-gray-500 dark:text-gray-500",
1214
+ error: "text-red-500 dark:text-red-400"
1215
+ }
1216
+ }
1217
+ },
1218
+ sessions: {
1219
+ base: "overflow-auto",
1220
+ console: "min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl",
1221
+ companion: "w-full h-full",
1222
+ group: "text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1",
1223
+ create: "relative mb-4 rounded-[10px] text-white",
1224
+ session: {
1225
+ base: [
1226
+ "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",
1227
+ "dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200"
1228
+ ].join(" "),
1229
+ active: [
1230
+ "border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ",
1231
+ "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",
1232
+ "[&_button]:opacity-100!"
1233
+ ].join(" "),
1234
+ delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!"
1235
+ }
1236
+ },
1237
+ messages: {
1238
+ base: "",
1239
+ console: "flex flex-col mx-5 flex-1 min-h-0",
1240
+ companion: "flex w-full h-full",
1241
+ back: "self-start p-0 my-2",
1242
+ inner: "flex-1 h-full flex flex-col",
1243
+ title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
1244
+ " "
1245
+ ),
1246
+ date: "text-xs whitespace-nowrap text-gray-400",
1247
+ content: [
1248
+ "mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200",
1249
+ "dark:[&_hr]:bg-gray-800/60"
1250
+ ].join(" "),
1251
+ header: "flex justify-between items-center gap-2",
1252
+ showMore: "mb-4",
1253
+ message: {
1254
+ base: "mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent",
1255
+ question: [
1256
+ "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",
1257
+ "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
1258
+ ].join(" "),
1259
+ response: [
1260
+ "relative data-[compact=false]:px-4 text-gray-900",
1261
+ "dark:text-gray-100"
1262
+ ].join(" "),
1263
+ overlay: "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200",
1264
+ cursor: "inline-block w-1 h-4 bg-current",
1265
+ expand: "absolute bottom-1 right-1 z-10",
1266
+ scrollToBottom: {
1267
+ container: "absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10",
1268
+ button: "rounded-full p-2 shadow-lg"
1269
+ },
1270
+ files: {
1271
+ base: "mb-2 flex flex-wrap gap-3 ",
1272
+ file: {
1273
+ base: [
1274
+ "flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer",
1275
+ "dark:border-gray-700"
1276
+ ].join(" "),
1277
+ name: ["text-sm text-gray-500", "dark:text-gray-200"].join(" ")
1278
+ }
1279
+ },
1280
+ sources: {
1281
+ base: "my-4 flex flex-wrap gap-3",
1282
+ source: {
1283
+ base: [
1284
+ "flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer",
1285
+ "dark:border-gray-700"
1286
+ ].join(" "),
1287
+ companion: "flex-1 px-3 py-1.5",
1288
+ image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
1289
+ title: "text-md block",
1290
+ url: "text-sm text-blue-400 underline"
1291
+ }
1292
+ },
1293
+ markdown: {
1294
+ copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
1295
+ p: "mb-2",
1296
+ a: "text-blue-400 underline",
1297
+ table: "table-auto w-full m-2",
1298
+ th: "px-4 py-2 text-left font-bold border-b border-gray-500",
1299
+ td: "px-4 py-2",
1300
+ code: "m-2 rounded-b relative",
1301
+ 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 ",
1302
+ li: "mb-2 ml-6",
1303
+ ul: "mb-4 list-disc",
1304
+ ol: "mb-4 list-decimal"
1305
+ },
1306
+ footer: {
1307
+ base: "mt-3 flex gap-1.5",
1308
+ copy: [
1309
+ "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500",
1310
+ "dark:hover:bg-gray-800 dark:hover:text-white text-gray-400"
1311
+ ].join(" "),
1312
+ upvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400",
1313
+ downvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400",
1314
+ refresh: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400"
1315
+ }
1316
+ }
1317
+ },
1318
+ input: {
1319
+ base: "flex mt-4 relative",
1320
+ upload: ["px-5 py-2 text-gray-400 size-10", "dark:gray-500"].join(" "),
1321
+ input: [
1322
+ "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",
1323
+ "dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40"
1324
+ ].join(" "),
1325
+ actions: {
1326
+ base: "absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10",
1327
+ send: [
1328
+ "px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500",
1329
+ "dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700"
1330
+ ].join(" "),
1331
+ stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
1332
+ },
1333
+ popup: {
1334
+ base: [
1335
+ "bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]",
1336
+ "dark:bg-gray-900 dark:border-gray-700"
1337
+ ].join(" "),
1338
+ content: "overflow-y-auto max-h-[250px]",
1339
+ item: [
1340
+ "flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors",
1341
+ "hover:bg-gray-100 dark:hover:bg-gray-800"
1342
+ ].join(" "),
1343
+ itemHighlighted: "bg-gray-100 dark:bg-gray-800",
1344
+ itemIcon: [
1345
+ "flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full",
1346
+ "dark:text-gray-400"
1347
+ ].join(" "),
1348
+ itemContent: "flex flex-col min-w-0 flex-1",
1349
+ itemLabel: [
1350
+ "text-sm font-medium text-gray-900 truncate",
1351
+ "dark:text-gray-100"
1352
+ ].join(" "),
1353
+ itemDescription: "text-xs text-gray-500 dark:text-gray-400 truncate",
1354
+ itemShortcut: "text-xs text-gray-400 dark:text-gray-500 ml-auto",
1355
+ empty: "px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400",
1356
+ loading: [
1357
+ "flex items-center justify-center gap-2 px-3 py-4 text-gray-500",
1358
+ "dark:text-gray-400"
1359
+ ].join(" ")
1360
+ },
1361
+ tag: {
1362
+ base: [
1363
+ "inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded",
1364
+ "font-medium text-sm leading-[1.2] relative top-[1px]"
1365
+ ].join(" "),
1366
+ mention: [
1367
+ "bg-blue-100 dark:bg-blue-900/30",
1368
+ "text-blue-700 dark:text-blue-300"
1369
+ ].join(" "),
1370
+ command: [
1371
+ "bg-purple-100 dark:bg-purple-900/30",
1372
+ "text-purple-700 dark:text-purple-300"
1373
+ ].join(" ")
1374
+ },
1375
+ editor: {
1376
+ base: [
1377
+ "outline-none w-full overflow-y-auto",
1378
+ "text-inherit font-inherit",
1379
+ "[&_.tiptap-paragraph]:m-0"
1380
+ ].join(" "),
1381
+ container: "px-3 py-2 pr-16",
1382
+ placeholder: [
1383
+ "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
1384
+ "[&_.is-editor-empty]:before:text-gray-400",
1385
+ "[&_.is-editor-empty]:before:dark:text-gray-500",
1386
+ "[&_.is-editor-empty]:before:float-left",
1387
+ "[&_.is-editor-empty]:before:h-0",
1388
+ "[&_.is-editor-empty]:before:pointer-events-none"
1389
+ ].join(" ")
1390
+ }
1391
+ },
1392
+ suggestions: {
1393
+ base: "flex flex-wrap gap-2 mt-4",
1394
+ item: {
1395
+ base: [
1396
+ "rounded-full! max-w-full py-2 px-4",
1397
+ "bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700",
1398
+ "dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200",
1399
+ "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0"
1400
+ ].join(" "),
1401
+ icon: "w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0",
1402
+ text: "text-sm truncate"
1403
+ }
1404
+ },
1405
+ chart: {
1406
+ base: "my-6",
1407
+ title: "text-sm font-medium mb-2 text-gray-600 dark:text-gray-400",
1408
+ content: "flex items-center justify-center",
1409
+ error: {
1410
+ base: [
1411
+ "my-4 p-4 border rounded",
1412
+ "border-red-300 bg-red-50 text-red-500",
1413
+ "dark:border-red-700 dark:bg-red-900/20"
1414
+ ].join(" "),
1415
+ title: "text-red-600 dark:text-red-400 text-sm font-medium mb-2",
1416
+ code: "text-xs overflow-auto"
1417
+ },
1418
+ warning: {
1419
+ base: [
1420
+ "my-4 p-4 border rounded",
1421
+ "border-yellow-300 bg-yellow-50 text-yellow-600",
1422
+ "dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400"
1423
+ ].join(" "),
1424
+ title: "text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2"
1425
+ }
1426
+ }
1427
+ };
1428
+ const MentionList = forwardRef(
1429
+ ({ items, command, triggerChar, config, query }, ref) => {
1430
+ var _a;
1431
+ const [selectedIndex, setSelectedIndex] = useState(0);
1432
+ const itemRefs = useRef([]);
1433
+ const { theme } = useContext(ChatContext);
1434
+ const popupTheme = ((_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.popup) || chatTheme.input.popup;
1435
+ useEffect(() => {
1436
+ setSelectedIndex(0);
1437
+ }, [items]);
1438
+ useEffect(() => {
1439
+ var _a2;
1440
+ if (itemRefs.current[selectedIndex]) {
1441
+ (_a2 = itemRefs.current[selectedIndex]) == null ? void 0 : _a2.scrollIntoView({
1442
+ block: "nearest",
1443
+ behavior: "smooth"
1444
+ });
1445
+ }
1446
+ }, [selectedIndex]);
1447
+ const selectItem = useCallback(
1448
+ (index) => {
1449
+ const item = items[index];
1450
+ if (!item) return;
1451
+ if (config.onSelect) {
1452
+ config.onSelect(item, (text) => {
1453
+ command({ id: item.id, label: text || item.label });
1454
+ });
1455
+ } else {
1456
+ command({ id: item.id, label: item.label });
1457
+ }
1458
+ },
1459
+ [items, command, config]
1460
+ );
1461
+ useImperativeHandle(ref, () => ({
1462
+ onKeyDown: ({ event }) => {
1463
+ if (event.key === "ArrowUp") {
1464
+ event.preventDefault();
1465
+ setSelectedIndex((prev) => prev <= 0 ? items.length - 1 : prev - 1);
1466
+ return true;
1467
+ }
1468
+ if (event.key === "ArrowDown") {
1469
+ event.preventDefault();
1470
+ setSelectedIndex((prev) => prev >= items.length - 1 ? 0 : prev + 1);
1471
+ return true;
1472
+ }
1473
+ if (event.key === "Enter" || event.key === "Tab") {
1474
+ event.preventDefault();
1475
+ selectItem(selectedIndex);
1476
+ return true;
1477
+ }
1478
+ return false;
1479
+ }
1480
+ }));
1481
+ const popupId = `mention-list-${triggerChar}`;
1482
+ return /* @__PURE__ */ jsx(
1483
+ List,
1484
+ {
1485
+ className: cn(popupTheme.base, popupTheme.content),
1486
+ style: { zIndex: 9999 },
1487
+ role: "listbox",
1488
+ id: popupId,
1489
+ "aria-label": `${triggerChar === "@" ? "Mentions" : "Commands"} suggestions`,
1490
+ children: items.length === 0 ? /* @__PURE__ */ jsx(ListItem, { className: cn(popupTheme.empty), disabled: true, dense: true, children: config.renderEmpty ? config.renderEmpty(query || "") : query ? `No results for "${query}"` : "No items available" }) : items.map((item, index) => /* @__PURE__ */ jsx(
1491
+ "div",
1492
+ {
1493
+ id: `${popupId}-option-${item.id}`,
1494
+ role: "option",
1495
+ "aria-selected": index === selectedIndex,
1496
+ ref: (el) => {
1497
+ itemRefs.current[index] = el;
1498
+ },
1499
+ onClick: () => selectItem(index),
1500
+ onMouseEnter: () => setSelectedIndex(index),
1501
+ className: "cursor-pointer",
1502
+ children: config.renderItem ? config.renderItem(item, index === selectedIndex) : /* @__PURE__ */ jsx(
1503
+ DefaultItemRenderer,
1504
+ {
1505
+ item,
1506
+ isHighlighted: index === selectedIndex,
1507
+ popupTheme
1508
+ }
1509
+ )
1510
+ },
1511
+ item.id
1512
+ ))
1513
+ }
1514
+ );
1515
+ }
1516
+ );
1517
+ function DefaultItemRenderer({
1518
+ item,
1519
+ isHighlighted,
1520
+ popupTheme
1521
+ }) {
1522
+ const shortcut = "shortcut" in item ? item.shortcut : void 0;
1523
+ return /* @__PURE__ */ jsx(
1524
+ ListItem,
1525
+ {
1526
+ className: cn(
1527
+ popupTheme.item,
1528
+ isHighlighted && popupTheme.itemHighlighted
1529
+ ),
1530
+ dense: true,
1531
+ start: item.icon ? /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemIcon), children: item.icon }) : void 0,
1532
+ end: shortcut ? /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemShortcut), children: shortcut }) : void 0,
1533
+ children: /* @__PURE__ */ jsxs("div", { className: cn(popupTheme.itemContent), children: [
1534
+ /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemLabel), children: item.label }),
1535
+ item.description && /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemDescription), children: item.description })
1536
+ ] })
1537
+ }
1538
+ );
1539
+ }
1540
+ MentionList.displayName = "MentionList";
1541
+ function updatePopupPosition(editor, element) {
1542
+ const virtualElement = {
1543
+ getBoundingClientRect: () => posToDOMRect(
1544
+ editor.view,
1545
+ editor.state.selection.from,
1546
+ editor.state.selection.to
1547
+ )
1548
+ };
1549
+ computePosition(virtualElement, element, {
1550
+ placement: "bottom-start",
1551
+ strategy: "absolute",
1552
+ middleware: [shift(), flip()]
1553
+ }).then(({ x, y, strategy }) => {
1554
+ element.style.width = "max-content";
1555
+ element.style.position = strategy;
1556
+ element.style.left = `${x}px`;
1557
+ element.style.top = `${y}px`;
1558
+ });
1559
+ }
1560
+ function createSuggestionConfig(config, triggerChar, suggestionActiveRef) {
1561
+ return {
1562
+ char: triggerChar,
1563
+ allowSpaces: false,
1564
+ // Fetch and filter suggestion items based on query
1565
+ items: async ({ query }) => {
1566
+ if (config.onSearch) {
1567
+ return await config.onSearch(query);
1568
+ }
1569
+ if (!config.items) return [];
1570
+ if (!query) return config.items.slice(0, config.maxResults || 10);
1571
+ const lowerQuery = query.toLowerCase();
1572
+ return config.items.filter(
1573
+ (item) => {
1574
+ var _a;
1575
+ return item.label.toLowerCase().includes(lowerQuery) || ((_a = item.description) == null ? void 0 : _a.toLowerCase().includes(lowerQuery));
1576
+ }
1577
+ ).slice(0, config.maxResults || 10);
1578
+ },
1579
+ // Render callbacks for managing the popup lifecycle
1580
+ render: () => {
1581
+ let component = null;
1582
+ return {
1583
+ // Called when suggestion is triggered
1584
+ onStart: (props) => {
1585
+ suggestionActiveRef.current = true;
1586
+ component = new ReactRenderer(MentionList, {
1587
+ props: {
1588
+ ...props,
1589
+ triggerChar,
1590
+ config
1591
+ },
1592
+ editor: props.editor
1593
+ });
1594
+ if (!props.clientRect) {
1595
+ return;
1596
+ }
1597
+ component.element.style.position = "absolute";
1598
+ document.body.appendChild(component.element);
1599
+ updatePopupPosition(props.editor, component.element);
1600
+ },
1601
+ // Called when query or items change
1602
+ onUpdate: (props) => {
1603
+ component == null ? void 0 : component.updateProps({
1604
+ ...props,
1605
+ triggerChar,
1606
+ config
1607
+ });
1608
+ if (!props.clientRect) {
1609
+ return;
1610
+ }
1611
+ if (component == null ? void 0 : component.element) {
1612
+ updatePopupPosition(props.editor, component.element);
1613
+ }
1614
+ },
1615
+ // Handle keyboard navigation (Escape closes popup)
1616
+ onKeyDown: (props) => {
1617
+ var _a;
1618
+ if (props.event.key === "Escape") {
1619
+ component == null ? void 0 : component.destroy();
1620
+ return true;
1621
+ }
1622
+ return ((_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) ?? false;
1623
+ },
1624
+ // Cleanup when suggestion is dismissed
1625
+ onExit: () => {
1626
+ var _a;
1627
+ suggestionActiveRef.current = false;
1628
+ (_a = component == null ? void 0 : component.element) == null ? void 0 : _a.remove();
1629
+ component == null ? void 0 : component.destroy();
1630
+ }
1631
+ };
1632
+ }
1633
+ };
1634
+ }
1635
+ const RichTextInput = forwardRef(
1636
+ ({
1637
+ value = "",
1638
+ placeholder = "Type a message...",
1639
+ disabled = false,
1640
+ autoFocus = true,
1641
+ className,
1642
+ minHeight = 24,
1643
+ maxHeight = 200,
1644
+ mentions,
1645
+ commands,
1646
+ onSubmit,
1647
+ onChange
1648
+ }, ref) => {
1649
+ var _a, _b, _c, _d;
1650
+ const { theme } = useContext(ChatContext);
1651
+ const containerRef = useRef(null);
1652
+ const suggestionActiveRef = useRef(false);
1653
+ const extensions = useMemo(() => {
1654
+ var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
1655
+ const exts = [
1656
+ Document,
1657
+ Paragraph.configure({
1658
+ HTMLAttributes: {
1659
+ class: "tiptap-paragraph"
1660
+ }
1661
+ }),
1662
+ Text,
1663
+ HardBreak,
1664
+ Placeholder.configure({
1665
+ placeholder,
1666
+ emptyEditorClass: "is-editor-empty"
1667
+ })
1668
+ ];
1669
+ if (mentions) {
1670
+ exts.push(
1671
+ Mention.configure({
1672
+ HTMLAttributes: {
1673
+ class: cn((_b2 = (_a2 = theme == null ? void 0 : theme.input) == null ? void 0 : _a2.tag) == null ? void 0 : _b2.base, (_d2 = (_c2 = theme == null ? void 0 : theme.input) == null ? void 0 : _c2.tag) == null ? void 0 : _d2.mention)
1674
+ },
1675
+ suggestion: createSuggestionConfig(
1676
+ mentions,
1677
+ mentions.trigger || "@",
1678
+ suggestionActiveRef
1679
+ )
1680
+ }).extend({
1681
+ name: "mention"
1682
+ })
1683
+ );
1684
+ }
1685
+ if (commands) {
1686
+ exts.push(
1687
+ Mention.configure({
1688
+ HTMLAttributes: {
1689
+ class: cn((_f = (_e = theme == null ? void 0 : theme.input) == null ? void 0 : _e.tag) == null ? void 0 : _f.base, (_h = (_g = theme == null ? void 0 : theme.input) == null ? void 0 : _g.tag) == null ? void 0 : _h.command)
1690
+ },
1691
+ suggestion: createSuggestionConfig(
1692
+ commands,
1693
+ commands.trigger || "/",
1694
+ suggestionActiveRef
1695
+ )
1696
+ }).extend({
1697
+ name: "command"
1698
+ })
1699
+ );
1700
+ }
1701
+ return exts;
1702
+ }, [placeholder, mentions, commands, theme]);
1703
+ const editor = useEditor({
1704
+ extensions,
1705
+ content: value ? `<p>${value}</p>` : "",
1706
+ editable: !disabled,
1707
+ immediatelyRender: false,
1708
+ onUpdate: ({ editor: editor2 }) => {
1709
+ const text = editor2.getText();
1710
+ onChange == null ? void 0 : onChange(text);
1711
+ },
1712
+ editorProps: {
1713
+ attributes: {
1714
+ class: cn(
1715
+ (_b = (_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.editor) == null ? void 0 : _b.base,
1716
+ (_d = (_c = theme == null ? void 0 : theme.input) == null ? void 0 : _c.editor) == null ? void 0 : _d.placeholder
1717
+ ),
1718
+ style: `min-height: ${minHeight}px; max-height: ${maxHeight}px;`,
1719
+ role: "textbox",
1720
+ "aria-multiline": "true",
1721
+ "aria-placeholder": placeholder,
1722
+ "aria-disabled": disabled ? "true" : "false",
1723
+ tabindex: disabled ? "-1" : "0"
1724
+ },
1725
+ handleKeyDown: (view, event) => {
1726
+ if (suggestionActiveRef.current) {
1727
+ return false;
1728
+ }
1729
+ if (event.key === "Enter" && !event.shiftKey) {
1730
+ const text = view.state.doc.textContent;
1731
+ if (text.trim() && onSubmit) {
1732
+ event.preventDefault();
1733
+ onSubmit(text);
1734
+ editor == null ? void 0 : editor.commands.clearContent();
1735
+ return true;
1736
+ }
1737
+ }
1738
+ return false;
1739
+ }
1740
+ }
1741
+ });
1742
+ useEffect(() => {
1743
+ if (autoFocus && editor) {
1744
+ setTimeout(() => {
1745
+ editor.commands.focus("end");
1746
+ }, 0);
1747
+ }
1748
+ }, [editor, autoFocus]);
1749
+ useImperativeHandle(ref, () => ({
1750
+ focus: () => {
1751
+ editor == null ? void 0 : editor.commands.focus();
1752
+ },
1753
+ getValue: () => {
1754
+ return (editor == null ? void 0 : editor.getText()) || "";
1755
+ },
1756
+ setValue: (newValue) => {
1757
+ editor == null ? void 0 : editor.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
1758
+ },
1759
+ insertText: (text) => {
1760
+ editor == null ? void 0 : editor.commands.insertContent(text);
1761
+ }
1762
+ }));
1763
+ return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("relative w-full", className), children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
1764
+ }
1765
+ );
1766
+ RichTextInput.displayName = "RichTextInput";
1767
+ const ChatInput = forwardRef(
1768
+ ({
1769
+ allowedFiles,
1770
+ placeholder = "Type a message...",
1771
+ defaultValue,
1772
+ sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
1773
+ stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
1774
+ attachIcon,
1775
+ mentions,
1776
+ commands,
1777
+ minHeight = 24,
1778
+ maxHeight = 200,
1779
+ autoFocus = true
1780
+ }, ref) => {
1781
+ const {
1782
+ theme,
1783
+ isLoading,
1784
+ disabled,
1785
+ sendMessage,
1786
+ stopMessage,
1787
+ fileUpload,
1788
+ activeSessionId
1789
+ } = useContext(ChatContext);
1790
+ const [message, setMessage] = useState(defaultValue || "");
1791
+ const inputRef = useRef(null);
1792
+ const containerRef = useRef(null);
1793
+ useEffect(() => {
1794
+ var _a;
1795
+ if (autoFocus) {
1796
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
1797
+ }
1798
+ }, [activeSessionId, autoFocus]);
1799
+ useImperativeHandle(ref, () => ({
1800
+ focus: () => {
1801
+ var _a;
1802
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
1803
+ },
1804
+ getValue: () => {
1805
+ var _a;
1806
+ return ((_a = inputRef.current) == null ? void 0 : _a.getValue()) || "";
1807
+ },
1808
+ setValue: (value) => {
1809
+ var _a;
1810
+ setMessage(value);
1811
+ (_a = inputRef.current) == null ? void 0 : _a.setValue(value);
1812
+ },
1813
+ insertText: (text) => {
1814
+ var _a;
1815
+ (_a = inputRef.current) == null ? void 0 : _a.insertText(text);
1816
+ }
1817
+ }));
1818
+ const handleSendMessage = useCallback(() => {
1819
+ var _a, _b;
1820
+ const currentMessage = (_a = inputRef.current) == null ? void 0 : _a.getValue();
1821
+ if (currentMessage.trim()) {
1822
+ sendMessage == null ? void 0 : sendMessage(currentMessage);
1823
+ setMessage("");
1824
+ (_b = inputRef.current) == null ? void 0 : _b.setValue("");
1825
+ }
1826
+ }, [sendMessage]);
1827
+ const handleSubmit = useCallback(
1828
+ (value) => {
1829
+ if (value.trim()) {
1830
+ sendMessage == null ? void 0 : sendMessage(value);
1831
+ setMessage("");
1832
+ }
1833
+ },
1834
+ [sendMessage]
1835
+ );
1836
+ const handleChange = useCallback((value) => {
1837
+ setMessage(value);
1838
+ }, []);
1839
+ const handleFileUpload = useCallback(
1840
+ (event) => {
1841
+ var _a;
1842
+ const file = (_a = event.target.files) == null ? void 0 : _a[0];
1843
+ if (file && fileUpload) {
1844
+ fileUpload(file);
1845
+ }
1846
+ },
1847
+ [fileUpload]
1848
+ );
1849
+ const mentionsConfig = mentions ? { ...mentions, trigger: mentions.trigger || "@" } : void 0;
1850
+ const commandsConfig = commands ? { ...commands, trigger: commands.trigger || "/" } : void 0;
1851
+ return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn(theme.input.base), children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1", theme.input.input), children: [
1852
+ /* @__PURE__ */ jsx(
1853
+ RichTextInput,
1854
+ {
1855
+ ref: inputRef,
1856
+ value: message,
1857
+ onChange: handleChange,
1858
+ onSubmit: handleSubmit,
1859
+ placeholder,
1860
+ disabled: isLoading || disabled,
1861
+ autoFocus,
1862
+ minHeight,
1863
+ maxHeight,
1864
+ className: theme.input.editor.container,
1865
+ mentions: mentionsConfig,
1866
+ commands: commandsConfig
1867
+ }
1868
+ ),
1869
+ /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
1870
+ (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsx(
1871
+ FileInput,
1872
+ {
1873
+ allowedFiles,
1874
+ onFileUpload: handleFileUpload,
1875
+ isLoading,
1876
+ disabled,
1877
+ attachIcon
1878
+ }
1879
+ ),
1880
+ isLoading && /* @__PURE__ */ jsx(
1881
+ Button,
1882
+ {
1883
+ title: "Stop",
1884
+ className: cn(theme.input.actions.stop),
1885
+ onClick: stopMessage,
1886
+ disabled,
1887
+ children: stopIcon
1888
+ }
1889
+ ),
1890
+ /* @__PURE__ */ jsx(
1891
+ Button,
1892
+ {
1893
+ title: "Send",
1894
+ className: cn(theme.input.actions.send),
1895
+ onClick: handleSendMessage,
1896
+ disabled: isLoading || disabled,
1897
+ children: sendIcon
1898
+ }
1899
+ )
1900
+ ] })
1901
+ ] }) });
1902
+ }
1903
+ );
1904
+ const SessionEmpty = ({
1905
+ children
1906
+ }) => {
1907
+ const { theme } = useContext(ChatContext);
1908
+ return /* @__PURE__ */ jsx("div", { className: cn(theme.empty), children });
1909
+ };
1910
+ const SessionMessagesHeader = ({ children }) => {
1911
+ const { activeSession, theme } = useContext(ChatContext);
1912
+ const Comp = children ? Slot : "header";
1913
+ if (!activeSession) {
1914
+ return null;
1915
+ }
1916
+ return /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.header), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
1917
+ /* @__PURE__ */ jsx("h2", { className: cn(theme.messages.title), children: /* @__PURE__ */ jsx(Ellipsis, { limit: 125, value: activeSession.title }) }),
1918
+ /* @__PURE__ */ jsx(
1919
+ DateFormat,
1920
+ {
1921
+ className: cn(theme.messages.date),
1922
+ date: activeSession.createdAt
1923
+ }
1924
+ )
1925
+ ] }) });
1926
+ };
1927
+ 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" }));
1928
+ const SessionMessagePanel = ({
1929
+ children,
1930
+ allowBack = true
1931
+ }) => {
1932
+ const { activeSessionId, theme, isCompact, selectSession, viewType } = useContext(ChatContext);
1933
+ const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
1934
+ return isVisible && /* @__PURE__ */ jsx(
1935
+ motion.div,
1936
+ {
1937
+ initial: { translateX: "200%" },
1938
+ animate: {
1939
+ translateX: "0%",
1940
+ transition: {
1941
+ type: "tween",
1942
+ ease: "linear",
1943
+ duration: 0.2,
1944
+ when: "beforeChildren"
1945
+ }
1946
+ },
1947
+ exit: { translateX: "200%" },
1948
+ className: cn(theme.messages.base, {
1949
+ [theme.messages.companion]: isCompact,
1950
+ [theme.messages.console]: !isCompact
1951
+ }),
1952
+ children: /* @__PURE__ */ jsxs("div", { className: cn(theme.messages.inner), children: [
1953
+ allowBack && isCompact && viewType !== "chat" && /* @__PURE__ */ jsxs(
1954
+ Button,
1955
+ {
1956
+ variant: "text",
1957
+ size: "small",
1958
+ onClick: () => selectSession(null),
1959
+ className: cn(theme.messages.back),
1960
+ children: [
1961
+ /* @__PURE__ */ jsx(SvgBack, {}),
1962
+ "Back"
1963
+ ]
1964
+ }
1965
+ ),
1966
+ children
1967
+ ] })
1968
+ }
1969
+ );
1970
+ };
1971
+ 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" }));
1972
+ const dark = {
1973
+ 'code[class*="language-"]': {
1974
+ "background": "#11111f",
1975
+ "color": "#e2e8f0",
1976
+ "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
1977
+ "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
1978
+ "direction": "ltr",
1979
+ "textAlign": "left",
1980
+ "whiteSpace": "pre",
1981
+ "wordSpacing": "normal",
1982
+ "wordBreak": "normal",
1983
+ "lineHeight": "1.5",
1984
+ "MozTabSize": "2",
1985
+ "OTabSize": "2",
1986
+ "tabSize": "2",
1987
+ "WebkitHyphens": "none",
1988
+ "MozHyphens": "none",
1989
+ "msHyphens": "none",
1990
+ "hyphens": "none"
1991
+ },
1992
+ 'pre[class*="language-"]': {
1993
+ "background": "#11111f",
1994
+ "color": "#e2e8f0",
1995
+ "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
1996
+ "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
1997
+ "direction": "ltr",
1998
+ "textAlign": "left",
1999
+ "whiteSpace": "pre",
2000
+ "wordSpacing": "normal",
2001
+ "wordBreak": "normal",
2002
+ "lineHeight": "1.5",
2003
+ "MozTabSize": "2",
2004
+ "OTabSize": "2",
2005
+ "tabSize": "2",
2006
+ "WebkitHyphens": "none",
2007
+ "MozHyphens": "none",
2008
+ "msHyphens": "none",
2009
+ "hyphens": "none",
2010
+ "padding": "1em",
2011
+ "margin": "0",
2012
+ "overflow": "auto"
2013
+ },
2014
+ 'code[class*="language-"]::-moz-selection': {
2015
+ "background": "#1e293b",
2016
+ "color": "inherit",
2017
+ "textShadow": "none"
2018
+ },
2019
+ 'code[class*="language-"] *::-moz-selection': {
2020
+ "background": "#1e293b",
2021
+ "color": "inherit",
2022
+ "textShadow": "none"
2023
+ },
2024
+ 'pre[class*="language-"] *::-moz-selection': {
2025
+ "background": "#1e293b",
2026
+ "color": "inherit",
2027
+ "textShadow": "none"
2028
+ },
2029
+ 'code[class*="language-"]::selection': {
2030
+ "background": "#1e293b",
2031
+ "color": "inherit",
2032
+ "textShadow": "none"
2033
+ },
2034
+ 'code[class*="language-"] *::selection': {
2035
+ "background": "#1e293b",
2036
+ "color": "inherit",
2037
+ "textShadow": "none"
2038
+ },
2039
+ 'pre[class*="language-"] *::selection': {
2040
+ "background": "#1e293b",
2041
+ "color": "inherit",
2042
+ "textShadow": "none"
2043
+ },
2044
+ ':not(pre) > code[class*="language-"]': {
2045
+ "padding": "0.2em 0.3em",
2046
+ "borderRadius": "0.3em",
2047
+ "whiteSpace": "normal"
2048
+ },
2049
+ "comment": {
2050
+ "color": "#64748b",
2051
+ "fontStyle": "italic"
2052
+ },
2053
+ "prolog": {
2054
+ "color": "#64748b"
2055
+ },
2056
+ "cdata": {
2057
+ "color": "#64748b"
2058
+ },
2059
+ "doctype": {
2060
+ "color": "#e2e8f0"
2061
+ },
2062
+ "punctuation": {
2063
+ "color": "#e2e8f0"
2064
+ },
2065
+ "entity": {
2066
+ "color": "#3b82f6",
2067
+ "cursor": "help"
2068
+ },
2069
+ "attr-name": {
2070
+ "color": "#f59e0b"
2071
+ },
2072
+ "class-name": {
2073
+ "color": "#f59e0b"
2074
+ },
2075
+ "boolean": {
2076
+ "color": "#3b82f6"
2077
+ },
2078
+ "constant": {
2079
+ "color": "#3b82f6"
2080
+ },
2081
+ "number": {
2082
+ "color": "#3b82f6"
2083
+ },
2084
+ "atrule": {
2085
+ "color": "#f59e0b"
2086
+ },
2087
+ "keyword": {
2088
+ "color": "#f472b6"
2089
+ },
2090
+ "property": {
2091
+ "color": "#3b82f6"
2092
+ },
2093
+ "tag": {
2094
+ "color": "#3b82f6"
2095
+ },
2096
+ "symbol": {
2097
+ "color": "#3b82f6"
2098
+ },
2099
+ "deleted": {
2100
+ "color": "#ef4444"
2101
+ },
2102
+ "important": {
2103
+ "color": "#f472b6"
2104
+ },
2105
+ "selector": {
2106
+ "color": "#10b981"
2107
+ },
2108
+ "string": {
2109
+ "color": "#10b981"
2110
+ },
2111
+ "char": {
2112
+ "color": "#10b981"
2113
+ },
2114
+ "builtin": {
2115
+ "color": "#10b981"
2116
+ },
2117
+ "inserted": {
2118
+ "color": "#10b981"
2119
+ },
2120
+ "regex": {
2121
+ "color": "#10b981"
2122
+ },
2123
+ "attr-value": {
2124
+ "color": "#10b981"
2125
+ },
2126
+ "attr-value > .token.punctuation": {
2127
+ "color": "#10b981"
2128
+ },
2129
+ "variable": {
2130
+ "color": "#60a5fa"
2131
+ },
2132
+ "operator": {
2133
+ "color": "#60a5fa"
2134
+ },
2135
+ "function": {
2136
+ "color": "#60a5fa"
2137
+ },
2138
+ "url": {
2139
+ "color": "#60a5fa"
2140
+ },
2141
+ "attr-value > .token.punctuation.attr-equals": {
2142
+ "color": "#e2e8f0"
2143
+ },
2144
+ "special-attr > .token.attr-value > .token.value.css": {
2145
+ "color": "#e2e8f0"
2146
+ },
2147
+ ".language-css .token.selector": {
2148
+ "color": "#3b82f6"
2149
+ },
2150
+ ".language-css .token.property": {
2151
+ "color": "#e2e8f0"
2152
+ },
2153
+ ".language-css .token.function": {
2154
+ "color": "#60a5fa"
2155
+ },
2156
+ ".language-css .token.url > .token.function": {
2157
+ "color": "#60a5fa"
2158
+ },
2159
+ ".language-css .token.url > .token.string.url": {
2160
+ "color": "#10b981"
2161
+ },
2162
+ ".language-css .token.important": {
2163
+ "color": "#f472b6"
2164
+ },
2165
+ ".language-css .token.atrule .token.rule": {
2166
+ "color": "#f472b6"
2167
+ },
2168
+ ".language-javascript .token.operator": {
2169
+ "color": "#f472b6"
2170
+ },
2171
+ ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
2172
+ "color": "#ef4444"
2173
+ },
2174
+ ".language-json .token.operator": {
2175
+ "color": "#e2e8f0"
2176
+ },
2177
+ ".language-json .token.null.keyword": {
2178
+ "color": "#3b82f6"
2179
+ },
2180
+ ".language-markdown .token.url": {
2181
+ "color": "#e2e8f0"
2182
+ },
2183
+ ".language-markdown .token.url > .token.operator": {
2184
+ "color": "#e2e8f0"
2185
+ },
2186
+ ".language-markdown .token.url-reference.url > .token.string": {
2187
+ "color": "#e2e8f0"
2188
+ },
2189
+ ".language-markdown .token.url > .token.content": {
2190
+ "color": "#60a5fa"
2191
+ },
2192
+ ".language-markdown .token.url > .token.url": {
2193
+ "color": "#60a5fa"
2194
+ },
2195
+ ".language-markdown .token.url-reference.url": {
2196
+ "color": "#60a5fa"
2197
+ },
2198
+ ".language-markdown .token.blockquote.punctuation": {
2199
+ "color": "#64748b",
2200
+ "fontStyle": "italic"
2201
+ },
2202
+ ".language-markdown .token.hr.punctuation": {
2203
+ "color": "#64748b",
2204
+ "fontStyle": "italic"
2205
+ },
2206
+ ".language-markdown .token.code-snippet": {
2207
+ "color": "#10b981"
2208
+ },
2209
+ ".language-markdown .token.bold .token.content": {
2210
+ "color": "#f59e0b"
2211
+ },
2212
+ ".language-markdown .token.italic .token.content": {
2213
+ "color": "#f472b6"
2214
+ },
2215
+ ".language-markdown .token.strike .token.content": {
2216
+ "color": "#3b82f6"
2217
+ },
2218
+ ".language-markdown .token.strike .token.punctuation": {
2219
+ "color": "#3b82f6"
2220
+ },
2221
+ ".language-markdown .token.list.punctuation": {
2222
+ "color": "#3b82f6"
2223
+ },
2224
+ ".language-markdown .token.title.important > .token.punctuation": {
2225
+ "color": "#3b82f6"
2226
+ },
2227
+ "bold": {
2228
+ "fontWeight": "bold"
2229
+ },
2230
+ "italic": {
2231
+ "fontStyle": "italic"
2232
+ },
2233
+ "namespace": {
2234
+ "Opacity": "0.8"
2235
+ },
2236
+ "token.tab:not(:empty):before": {
2237
+ "color": "#64748b",
2238
+ "textShadow": "none"
2239
+ },
2240
+ "token.cr:before": {
2241
+ "color": "#64748b",
2242
+ "textShadow": "none"
2243
+ },
2244
+ "token.lf:before": {
2245
+ "color": "#64748b",
2246
+ "textShadow": "none"
2247
+ },
2248
+ "token.space:before": {
2249
+ "color": "#64748b",
2250
+ "textShadow": "none"
2251
+ },
2252
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
2253
+ "marginRight": "0.4em"
2254
+ },
2255
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
2256
+ "background": "#1e293b",
2257
+ "color": "#94a3b8",
2258
+ "padding": "0.1em 0.4em",
2259
+ "borderRadius": "0.3em"
2260
+ },
2261
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
2262
+ "background": "#1e293b",
2263
+ "color": "#94a3b8",
2264
+ "padding": "0.1em 0.4em",
2265
+ "borderRadius": "0.3em"
2266
+ },
2267
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
2268
+ "background": "#1e293b",
2269
+ "color": "#94a3b8",
2270
+ "padding": "0.1em 0.4em",
2271
+ "borderRadius": "0.3em"
2272
+ },
2273
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
2274
+ "background": "#3b82f6",
2275
+ "color": "#ffffff"
2276
+ },
2277
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
2278
+ "background": "#3b82f6",
2279
+ "color": "#ffffff"
2280
+ },
2281
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
2282
+ "background": "#3b82f6",
2283
+ "color": "#ffffff"
2284
+ },
2285
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
2286
+ "background": "#3b82f6",
2287
+ "color": "#ffffff"
2288
+ },
2289
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
2290
+ "background": "#3b82f6",
2291
+ "color": "#ffffff"
2292
+ },
2293
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
2294
+ "background": "#3b82f6",
2295
+ "color": "#ffffff"
2296
+ },
2297
+ ".line-highlight.line-highlight": {
2298
+ "background": "rgba(59, 130, 246, 0.08)"
2299
+ },
2300
+ ".line-highlight.line-highlight:before": {
2301
+ "background": "#1e293b",
2302
+ "color": "#e2e8f0",
2303
+ "padding": "0.1em 0.6em",
2304
+ "borderRadius": "0.3em",
2305
+ "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
2306
+ },
2307
+ ".line-highlight.line-highlight[data-end]:after": {
2308
+ "background": "#1e293b",
2309
+ "color": "#e2e8f0",
2310
+ "padding": "0.1em 0.6em",
2311
+ "borderRadius": "0.3em",
2312
+ "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
2313
+ },
2314
+ "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
2315
+ "backgroundColor": "rgba(59, 130, 246, 0.08)"
2316
+ },
2317
+ ".line-numbers.line-numbers .line-numbers-rows": {
2318
+ "borderRightColor": "#1e293b"
2319
+ },
2320
+ ".command-line .command-line-prompt": {
2321
+ "borderRightColor": "#1e293b"
2322
+ },
2323
+ ".line-numbers .line-numbers-rows > span:before": {
2324
+ "color": "#64748b"
2325
+ },
2326
+ ".command-line .command-line-prompt > span:before": {
2327
+ "color": "#64748b"
2328
+ },
2329
+ ".rainbow-braces .token.token.punctuation.brace-level-1": {
2330
+ "color": "#3b82f6"
2331
+ },
2332
+ ".rainbow-braces .token.token.punctuation.brace-level-5": {
2333
+ "color": "#3b82f6"
2334
+ },
2335
+ ".rainbow-braces .token.token.punctuation.brace-level-9": {
2336
+ "color": "#3b82f6"
2337
+ },
2338
+ ".rainbow-braces .token.token.punctuation.brace-level-2": {
2339
+ "color": "#10b981"
2340
+ },
2341
+ ".rainbow-braces .token.token.punctuation.brace-level-6": {
2342
+ "color": "#10b981"
2343
+ },
2344
+ ".rainbow-braces .token.token.punctuation.brace-level-10": {
2345
+ "color": "#10b981"
2346
+ },
2347
+ ".rainbow-braces .token.token.punctuation.brace-level-3": {
2348
+ "color": "#60a5fa"
2349
+ },
2350
+ ".rainbow-braces .token.token.punctuation.brace-level-7": {
2351
+ "color": "#60a5fa"
2352
+ },
2353
+ ".rainbow-braces .token.token.punctuation.brace-level-11": {
2354
+ "color": "#60a5fa"
2355
+ },
2356
+ ".rainbow-braces .token.token.punctuation.brace-level-4": {
2357
+ "color": "#f472b6"
2358
+ },
2359
+ ".rainbow-braces .token.token.punctuation.brace-level-8": {
2360
+ "color": "#f472b6"
2361
+ },
2362
+ ".rainbow-braces .token.token.punctuation.brace-level-12": {
2363
+ "color": "#f472b6"
2364
+ },
2365
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
2366
+ "backgroundColor": "rgba(239, 68, 68, 0.15)"
2367
+ },
2368
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
2369
+ "backgroundColor": "rgba(239, 68, 68, 0.15)"
2370
+ },
2371
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
2372
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2373
+ },
2374
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
2375
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2376
+ },
2377
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
2378
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2379
+ },
2380
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
2381
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2382
+ },
2383
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
2384
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2385
+ },
2386
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
2387
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2388
+ },
2389
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
2390
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2391
+ },
2392
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
2393
+ "backgroundColor": "rgba(239, 68, 68, 0.25)"
2394
+ },
2395
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
2396
+ "backgroundColor": "rgba(16, 185, 129, 0.15)"
2397
+ },
2398
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
2399
+ "backgroundColor": "rgba(16, 185, 129, 0.15)"
2400
+ },
2401
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
2402
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2403
+ },
2404
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
2405
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2406
+ },
2407
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
2408
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2409
+ },
2410
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
2411
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2412
+ },
2413
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
2414
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2415
+ },
2416
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
2417
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2418
+ },
2419
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
2420
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2421
+ },
2422
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
2423
+ "backgroundColor": "rgba(16, 185, 129, 0.25)"
2424
+ },
2425
+ ".prism-previewer.prism-previewer:before": {
2426
+ "borderColor": "#11111f"
2427
+ },
2428
+ ".prism-previewer-gradient.prism-previewer-gradient div": {
2429
+ "borderColor": "#11111f",
2430
+ "borderRadius": "0.3em"
2431
+ },
2432
+ ".prism-previewer-color.prism-previewer-color:before": {
2433
+ "borderRadius": "0.3em"
2434
+ },
2435
+ ".prism-previewer-easing.prism-previewer-easing:before": {
2436
+ "borderRadius": "0.3em"
2437
+ },
2438
+ ".prism-previewer.prism-previewer:after": {
2439
+ "borderTopColor": "#11111f"
2440
+ },
2441
+ ".prism-previewer-flipped.prism-previewer-flipped.after": {
2442
+ "borderBottomColor": "#11111f"
2443
+ },
2444
+ ".prism-previewer-angle.prism-previewer-angle:before": {
2445
+ "background": "#1e293b"
2446
+ },
2447
+ ".prism-previewer-time.prism-previewer-time:before": {
2448
+ "background": "#1e293b"
2449
+ },
2450
+ ".prism-previewer-easing.prism-previewer-easing": {
2451
+ "background": "#1e293b"
2452
+ },
2453
+ ".prism-previewer-angle.prism-previewer-angle circle": {
2454
+ "stroke": "#e2e8f0",
2455
+ "strokeOpacity": "1"
2456
+ },
2457
+ ".prism-previewer-time.prism-previewer-time circle": {
2458
+ "stroke": "#e2e8f0",
2459
+ "strokeOpacity": "1"
2460
+ },
2461
+ ".prism-previewer-easing.prism-previewer-easing circle": {
2462
+ "stroke": "#e2e8f0",
2463
+ "fill": "transparent"
2464
+ },
2465
+ ".prism-previewer-easing.prism-previewer-easing path": {
2466
+ "stroke": "#e2e8f0"
2467
+ },
2468
+ ".prism-previewer-easing.prism-previewer-easing line": {
2469
+ "stroke": "#e2e8f0"
2470
+ }
2471
+ };
2472
+ const light = {
2473
+ 'code[class*="language-"]': {
2474
+ "background": "#fff",
2475
+ "color": "#1e293b",
2476
+ "textShadow": "none",
2477
+ "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
2478
+ "direction": "ltr",
2479
+ "textAlign": "left",
2480
+ "whiteSpace": "pre",
2481
+ "wordSpacing": "normal",
2482
+ "wordBreak": "normal",
2483
+ "lineHeight": "1.5",
2484
+ "MozTabSize": "2",
2485
+ "OTabSize": "2",
2486
+ "tabSize": "2",
2487
+ "WebkitHyphens": "none",
2488
+ "MozHyphens": "none",
2489
+ "msHyphens": "none",
2490
+ "hyphens": "none"
2491
+ },
2492
+ 'pre[class*="language-"]': {
2493
+ "background": "#fff",
2494
+ "color": "#1e293b",
2495
+ "textShadow": "none",
2496
+ "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
2497
+ "direction": "ltr",
2498
+ "textAlign": "left",
2499
+ "whiteSpace": "pre",
2500
+ "wordSpacing": "normal",
2501
+ "wordBreak": "normal",
2502
+ "lineHeight": "1.5",
2503
+ "MozTabSize": "2",
2504
+ "OTabSize": "2",
2505
+ "tabSize": "2",
2506
+ "WebkitHyphens": "none",
2507
+ "MozHyphens": "none",
2508
+ "msHyphens": "none",
2509
+ "hyphens": "none",
2510
+ "padding": "1em",
2511
+ "margin": "0.5em 0",
2512
+ "overflow": "auto",
2513
+ "borderRadius": "0.3em",
2514
+ "border": "1px solid #e2e8f0"
2515
+ },
2516
+ 'code[class*="language-"]::-moz-selection': {
2517
+ "background": "#e2e8f0",
2518
+ "color": "inherit",
2519
+ "textShadow": "none"
2520
+ },
2521
+ 'code[class*="language-"] *::-moz-selection': {
2522
+ "background": "#e2e8f0",
2523
+ "color": "inherit",
2524
+ "textShadow": "none"
2525
+ },
2526
+ 'pre[class*="language-"] *::-moz-selection': {
2527
+ "background": "#e2e8f0",
2528
+ "color": "inherit",
2529
+ "textShadow": "none"
2530
+ },
2531
+ 'code[class*="language-"]::selection': {
2532
+ "background": "#e2e8f0",
2533
+ "color": "inherit",
2534
+ "textShadow": "none"
2535
+ },
2536
+ 'code[class*="language-"] *::selection': {
2537
+ "background": "#e2e8f0",
2538
+ "color": "inherit",
2539
+ "textShadow": "none"
2540
+ },
2541
+ 'pre[class*="language-"] *::selection': {
2542
+ "background": "#e2e8f0",
2543
+ "color": "inherit",
2544
+ "textShadow": "none"
2545
+ },
2546
+ ':not(pre) > code[class*="language-"]': {
2547
+ "padding": "0.2em 0.3em",
2548
+ "borderRadius": "0.3em",
2549
+ "whiteSpace": "normal",
2550
+ "background": "#f1f5f9"
2551
+ },
2552
+ "comment": {
2553
+ "color": "#64748b",
2554
+ "fontStyle": "italic"
2555
+ },
2556
+ "prolog": {
2557
+ "color": "#64748b"
2558
+ },
2559
+ "cdata": {
2560
+ "color": "#64748b"
2561
+ },
2562
+ "doctype": {
2563
+ "color": "#1e293b"
2564
+ },
2565
+ "punctuation": {
2566
+ "color": "#64748b"
2567
+ },
2568
+ "entity": {
2569
+ "color": "#3b82f6",
2570
+ "cursor": "help"
2571
+ },
2572
+ "attr-name": {
2573
+ "color": "#ea580c"
2574
+ },
2575
+ "class-name": {
2576
+ "color": "#ea580c"
2577
+ },
2578
+ "boolean": {
2579
+ "color": "#3b82f6"
2580
+ },
2581
+ "constant": {
2582
+ "color": "#3b82f6"
2583
+ },
2584
+ "number": {
2585
+ "color": "#3b82f6"
2586
+ },
2587
+ "atrule": {
2588
+ "color": "#ea580c"
2589
+ },
2590
+ "keyword": {
2591
+ "color": "#9333ea"
2592
+ },
2593
+ "property": {
2594
+ "color": "#3b82f6"
2595
+ },
2596
+ "tag": {
2597
+ "color": "#3b82f6"
2598
+ },
2599
+ "symbol": {
2600
+ "color": "#3b82f6"
2601
+ },
2602
+ "deleted": {
2603
+ "color": "#dc2626"
2604
+ },
2605
+ "important": {
2606
+ "color": "#9333ea"
2607
+ },
2608
+ "selector": {
2609
+ "color": "#16a34a"
2610
+ },
2611
+ "string": {
2612
+ "color": "#16a34a"
2613
+ },
2614
+ "char": {
2615
+ "color": "#16a34a"
2616
+ },
2617
+ "builtin": {
2618
+ "color": "#16a34a"
2619
+ },
2620
+ "inserted": {
2621
+ "color": "#16a34a"
2622
+ },
2623
+ "regex": {
2624
+ "color": "#16a34a"
2625
+ },
2626
+ "attr-value": {
2627
+ "color": "#16a34a"
2628
+ },
2629
+ "attr-value > .token.punctuation": {
2630
+ "color": "#16a34a"
2631
+ },
2632
+ "variable": {
2633
+ "color": "#3b82f6"
2634
+ },
2635
+ "operator": {
2636
+ "color": "#3b82f6"
2637
+ },
2638
+ "function": {
2639
+ "color": "#3b82f6"
2640
+ },
2641
+ "url": {
2642
+ "color": "#3b82f6"
2643
+ },
2644
+ "attr-value > .token.punctuation.attr-equals": {
2645
+ "color": "#64748b"
2646
+ },
2647
+ "special-attr > .token.attr-value > .token.value.css": {
2648
+ "color": "#1e293b"
2649
+ },
2650
+ ".language-css .token.selector": {
2651
+ "color": "#3b82f6"
2652
+ },
2653
+ ".language-css .token.property": {
2654
+ "color": "#1e293b"
2655
+ },
2656
+ ".language-css .token.function": {
2657
+ "color": "#3b82f6"
2658
+ },
2659
+ ".language-css .token.url > .token.function": {
2660
+ "color": "#3b82f6"
2661
+ },
2662
+ ".language-css .token.url > .token.string.url": {
2663
+ "color": "#16a34a"
2664
+ },
2665
+ ".language-css .token.important": {
2666
+ "color": "#9333ea"
2667
+ },
2668
+ ".language-css .token.atrule .token.rule": {
2669
+ "color": "#9333ea"
2670
+ },
2671
+ ".language-javascript .token.operator": {
2672
+ "color": "#9333ea"
2673
+ },
2674
+ ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
2675
+ "color": "#dc2626"
2676
+ },
2677
+ ".language-json .token.operator": {
2678
+ "color": "#1e293b"
2679
+ },
2680
+ ".language-json .token.null.keyword": {
2681
+ "color": "#3b82f6"
2682
+ },
2683
+ ".language-markdown .token.url": {
2684
+ "color": "#1e293b"
2685
+ },
2686
+ ".language-markdown .token.url > .token.operator": {
2687
+ "color": "#1e293b"
2688
+ },
2689
+ ".language-markdown .token.url-reference.url > .token.string": {
2690
+ "color": "#1e293b"
2691
+ },
2692
+ ".language-markdown .token.url > .token.content": {
2693
+ "color": "#3b82f6"
2694
+ },
2695
+ ".language-markdown .token.url > .token.url": {
2696
+ "color": "#3b82f6"
2697
+ },
2698
+ ".language-markdown .token.url-reference.url": {
2699
+ "color": "#3b82f6"
2700
+ },
2701
+ ".language-markdown .token.blockquote.punctuation": {
2702
+ "color": "#64748b",
2703
+ "fontStyle": "italic"
2704
+ },
2705
+ ".language-markdown .token.hr.punctuation": {
2706
+ "color": "#64748b",
2707
+ "fontStyle": "italic"
2708
+ },
2709
+ ".language-markdown .token.code-snippet": {
2710
+ "color": "#16a34a"
2711
+ },
2712
+ ".language-markdown .token.bold .token.content": {
2713
+ "color": "#ea580c"
2714
+ },
2715
+ ".language-markdown .token.italic .token.content": {
2716
+ "color": "#9333ea"
2717
+ },
2718
+ ".language-markdown .token.strike .token.content": {
2719
+ "color": "#3b82f6"
2720
+ },
2721
+ ".language-markdown .token.strike .token.punctuation": {
2722
+ "color": "#3b82f6"
2723
+ },
2724
+ ".language-markdown .token.list.punctuation": {
2725
+ "color": "#3b82f6"
2726
+ },
2727
+ ".language-markdown .token.title.important > .token.punctuation": {
2728
+ "color": "#3b82f6"
2729
+ },
2730
+ "bold": {
2731
+ "fontWeight": "bold"
2732
+ },
2733
+ "italic": {
2734
+ "fontStyle": "italic"
2735
+ },
2736
+ "namespace": {
2737
+ "Opacity": "0.8"
2738
+ },
2739
+ "token.tab:not(:empty):before": {
2740
+ "color": "#94a3b8"
2741
+ },
2742
+ "token.cr:before": {
2743
+ "color": "#94a3b8"
2744
+ },
2745
+ "token.lf:before": {
2746
+ "color": "#94a3b8"
2747
+ },
2748
+ "token.space:before": {
2749
+ "color": "#94a3b8"
2750
+ },
2751
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
2752
+ "marginRight": "0.4em"
2753
+ },
2754
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
2755
+ "background": "#f1f5f9",
2756
+ "color": "#475569",
2757
+ "padding": "0.1em 0.4em",
2758
+ "borderRadius": "0.3em"
2759
+ },
2760
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
2761
+ "background": "#f1f5f9",
2762
+ "color": "#475569",
2763
+ "padding": "0.1em 0.4em",
2764
+ "borderRadius": "0.3em"
2765
+ },
2766
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
2767
+ "background": "#f1f5f9",
2768
+ "color": "#475569",
2769
+ "padding": "0.1em 0.4em",
2770
+ "borderRadius": "0.3em"
2771
+ },
2772
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
2773
+ "background": "#3b82f6",
2774
+ "color": "#ffffff"
2775
+ },
2776
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
2777
+ "background": "#3b82f6",
2778
+ "color": "#ffffff"
2779
+ },
2780
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
2781
+ "background": "#3b82f6",
2782
+ "color": "#ffffff"
2783
+ },
2784
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
2785
+ "background": "#3b82f6",
2786
+ "color": "#ffffff"
2787
+ },
2788
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
2789
+ "background": "#3b82f6",
2790
+ "color": "#ffffff"
2791
+ },
2792
+ "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
2793
+ "background": "#3b82f6",
2794
+ "color": "#ffffff"
2795
+ },
2796
+ ".line-highlight.line-highlight": {
2797
+ "background": "rgba(59, 130, 246, 0.08)"
2798
+ },
2799
+ ".line-highlight.line-highlight:before": {
2800
+ "background": "#f1f5f9",
2801
+ "color": "#1e293b",
2802
+ "padding": "0.1em 0.6em",
2803
+ "borderRadius": "0.3em",
2804
+ "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
2805
+ },
2806
+ ".line-highlight.line-highlight[data-end]:after": {
2807
+ "background": "#f1f5f9",
2808
+ "color": "#1e293b",
2809
+ "padding": "0.1em 0.6em",
2810
+ "borderRadius": "0.3em",
2811
+ "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
2812
+ },
2813
+ "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
2814
+ "backgroundColor": "rgba(59, 130, 246, 0.08)"
2815
+ },
2816
+ ".line-numbers.line-numbers .line-numbers-rows": {
2817
+ "borderRightColor": "#e2e8f0"
2818
+ },
2819
+ ".command-line .command-line-prompt": {
2820
+ "borderRightColor": "#e2e8f0"
2821
+ },
2822
+ ".line-numbers .line-numbers-rows > span:before": {
2823
+ "color": "#94a3b8"
2824
+ },
2825
+ ".command-line .command-line-prompt > span:before": {
2826
+ "color": "#94a3b8"
2827
+ },
2828
+ ".rainbow-braces .token.token.punctuation.brace-level-1": {
2829
+ "color": "#3b82f6"
2830
+ },
2831
+ ".rainbow-braces .token.token.punctuation.brace-level-5": {
2832
+ "color": "#3b82f6"
2833
+ },
2834
+ ".rainbow-braces .token.token.punctuation.brace-level-9": {
2835
+ "color": "#3b82f6"
2836
+ },
2837
+ ".rainbow-braces .token.token.punctuation.brace-level-2": {
2838
+ "color": "#16a34a"
2839
+ },
2840
+ ".rainbow-braces .token.token.punctuation.brace-level-6": {
2841
+ "color": "#16a34a"
2842
+ },
2843
+ ".rainbow-braces .token.token.punctuation.brace-level-10": {
2844
+ "color": "#16a34a"
2845
+ },
2846
+ ".rainbow-braces .token.token.punctuation.brace-level-3": {
2847
+ "color": "#ea580c"
2848
+ },
2849
+ ".rainbow-braces .token.token.punctuation.brace-level-7": {
2850
+ "color": "#ea580c"
2851
+ },
2852
+ ".rainbow-braces .token.token.punctuation.brace-level-11": {
2853
+ "color": "#ea580c"
2854
+ },
2855
+ ".rainbow-braces .token.token.punctuation.brace-level-4": {
2856
+ "color": "#9333ea"
2857
+ },
2858
+ ".rainbow-braces .token.token.punctuation.brace-level-8": {
2859
+ "color": "#9333ea"
2860
+ },
2861
+ ".rainbow-braces .token.token.punctuation.brace-level-12": {
2862
+ "color": "#9333ea"
2863
+ },
2864
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
2865
+ "backgroundColor": "rgba(220, 38, 38, 0.15)"
2866
+ },
2867
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
2868
+ "backgroundColor": "rgba(220, 38, 38, 0.15)"
2869
+ },
2870
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
2871
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2872
+ },
2873
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
2874
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2875
+ },
2876
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
2877
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2878
+ },
2879
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
2880
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2881
+ },
2882
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
2883
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2884
+ },
2885
+ "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
2886
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2887
+ },
2888
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
2889
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2890
+ },
2891
+ "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
2892
+ "backgroundColor": "rgba(220, 38, 38, 0.25)"
2893
+ },
2894
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
2895
+ "backgroundColor": "rgba(22, 163, 74, 0.15)"
2896
+ },
2897
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
2898
+ "backgroundColor": "rgba(22, 163, 74, 0.15)"
2899
+ },
2900
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
2901
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2902
+ },
2903
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
2904
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2905
+ },
2906
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
2907
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2908
+ },
2909
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
2910
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2911
+ },
2912
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
2913
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2914
+ },
2915
+ "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
2916
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2917
+ },
2918
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
2919
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2920
+ },
2921
+ "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
2922
+ "backgroundColor": "rgba(22, 163, 74, 0.25)"
2923
+ },
2924
+ ".prism-previewer.prism-previewer:before": {
2925
+ "borderColor": "#fff"
2926
+ },
2927
+ ".prism-previewer-gradient.prism-previewer-gradient div": {
2928
+ "borderColor": "#fff",
2929
+ "borderRadius": "0.3em"
2930
+ },
2931
+ ".prism-previewer-color.prism-previewer-color:before": {
2932
+ "borderRadius": "0.3em"
2933
+ },
2934
+ ".prism-previewer-easing.prism-previewer-easing:before": {
2935
+ "borderRadius": "0.3em"
2936
+ },
2937
+ ".prism-previewer.prism-previewer:after": {
2938
+ "borderTopColor": "#fff"
2939
+ },
2940
+ ".prism-previewer-flipped.prism-previewer-flipped.after": {
2941
+ "borderBottomColor": "#fff"
2942
+ },
2943
+ ".prism-previewer-angle.prism-previewer-angle:before": {
2944
+ "background": "#f1f5f9"
2945
+ },
2946
+ ".prism-previewer-time.prism-previewer-time:before": {
2947
+ "background": "#f1f5f9"
2948
+ },
2949
+ ".prism-previewer-easing.prism-previewer-easing": {
2950
+ "background": "#f1f5f9"
2951
+ },
2952
+ ".prism-previewer-angle.prism-previewer-angle circle": {
2953
+ "stroke": "#1e293b",
2954
+ "strokeOpacity": "1"
2955
+ },
2956
+ ".prism-previewer-time.prism-previewer-time circle": {
2957
+ "stroke": "#1e293b",
2958
+ "strokeOpacity": "1"
2959
+ },
2960
+ ".prism-previewer-easing.prism-previewer-easing circle": {
2961
+ "stroke": "#1e293b",
2962
+ "fill": "transparent"
2963
+ },
2964
+ ".prism-previewer-easing.prism-previewer-easing path": {
2965
+ "stroke": "#1e293b"
2966
+ },
2967
+ ".prism-previewer-easing.prism-previewer-easing line": {
2968
+ "stroke": "#1e293b"
2969
+ }
2970
+ };
2971
+ const CodeHighlighter = ({
2972
+ className,
2973
+ children,
2974
+ copyClassName,
2975
+ copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
2976
+ language,
2977
+ toolbarClassName,
2978
+ theme = dark
2979
+ }) => {
2980
+ const match = language == null ? void 0 : language.match(/language-(\w+)/);
2981
+ const lang = match ? match[1] : "text";
2982
+ const handleCopy = (text) => {
2983
+ navigator.clipboard.writeText(text).then(() => {
2984
+ console.log("Text copied to clipboard");
2985
+ }).catch((err) => {
2986
+ console.error("Could not copy text: ", err);
2987
+ });
2988
+ };
2989
+ return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
2990
+ /* @__PURE__ */ jsxs("div", { className: cn(toolbarClassName), children: [
2991
+ /* @__PURE__ */ jsx("div", { children: lang }),
2992
+ copyIcon && /* @__PURE__ */ jsx(
2993
+ Button,
2994
+ {
2995
+ className: cn(copyClassName),
2996
+ size: "small",
2997
+ variant: "text",
2998
+ title: "Copy code",
2999
+ onClick: () => handleCopy(children),
3000
+ children: copyIcon
3001
+ }
3002
+ )
3003
+ ] }),
3004
+ /* @__PURE__ */ jsx(
3005
+ Prism,
3006
+ {
3007
+ language: lang,
3008
+ style: theme,
3009
+ children
3010
+ }
3011
+ )
3012
+ ] });
3013
+ };
3014
+ const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsx("table", { ...props, children });
3015
+ const TableHeaderCell = ({ children, ...props }) => /* @__PURE__ */ jsx("th", { ...props, children });
3016
+ const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsx("td", { ...props, children });
3017
+ const Markdown = ({
3018
+ children,
3019
+ remarkPlugins,
3020
+ rehypePlugins = [rehypeKatex],
3021
+ customComponents
3022
+ }) => {
3023
+ const { theme, markdownComponents } = useContext(ChatContext);
3024
+ const components = useMemo(() => {
3025
+ const defaultComponents = {
3026
+ code: ({ className, children: children2, ...props }) => /* @__PURE__ */ jsx(
3027
+ CodeHighlighter,
3028
+ {
3029
+ ...props,
3030
+ language: className,
3031
+ className: cn(theme.messages.message.markdown.code, className),
3032
+ copyClassName: cn(theme.messages.message.markdown.copy),
3033
+ toolbarClassName: cn(theme.messages.message.markdown.toolbar),
3034
+ children: children2
3035
+ }
3036
+ ),
3037
+ table: (props) => /* @__PURE__ */ jsx(
3038
+ TableComponent,
3039
+ {
3040
+ ...props,
3041
+ className: cn(theme.messages.message.markdown.table)
3042
+ }
3043
+ ),
3044
+ th: (props) => /* @__PURE__ */ jsx(
3045
+ TableHeaderCell,
3046
+ {
3047
+ ...props,
3048
+ className: cn(theme.messages.message.markdown.th)
3049
+ }
3050
+ ),
3051
+ td: (props) => /* @__PURE__ */ jsx(
3052
+ TableDataCell,
3053
+ {
3054
+ ...props,
3055
+ className: cn(theme.messages.message.markdown.td)
3056
+ }
3057
+ ),
3058
+ a: (props) => /* @__PURE__ */ jsx("a", { ...props, className: cn(theme.messages.message.markdown.a) }),
3059
+ p: (props) => /* @__PURE__ */ jsx("p", { ...props, className: cn(theme.messages.message.markdown.p) }),
3060
+ li: (props) => /* @__PURE__ */ jsx("li", { ...props, className: cn(theme.messages.message.markdown.li) }),
3061
+ ul: (props) => /* @__PURE__ */ jsx("ul", { ...props, className: cn(theme.messages.message.markdown.ul) }),
3062
+ ol: (props) => /* @__PURE__ */ jsx("ol", { ...props, className: cn(theme.messages.message.markdown.ol) })
3063
+ };
3064
+ return {
3065
+ ...defaultComponents,
3066
+ ...markdownComponents,
3067
+ ...customComponents
3068
+ };
3069
+ }, [theme, markdownComponents, customComponents]);
3070
+ return /* @__PURE__ */ jsx(
3071
+ ReactMarkdown,
3072
+ {
3073
+ remarkPlugins,
3074
+ rehypePlugins,
3075
+ components,
3076
+ children
3077
+ }
3078
+ );
3079
+ };
3080
+ const ChartError = ({
3081
+ variant = "error",
3082
+ title,
3083
+ message,
3084
+ code
3085
+ }) => {
3086
+ const { theme } = useContext(ChatContext);
3087
+ const styles = variant === "warning" ? theme.chart.warning : theme.chart.error;
3088
+ return /* @__PURE__ */ jsxs("div", { className: styles.base, children: [
3089
+ title && /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
3090
+ message && /* @__PURE__ */ jsx("div", { children: message }),
3091
+ code && "code" in styles && /* @__PURE__ */ jsx("pre", { className: styles.code, children: /* @__PURE__ */ jsx("code", { children: code }) })
3092
+ ] });
3093
+ };
3094
+ const ChartRenderer = ({
3095
+ config,
3096
+ className
3097
+ }) => {
3098
+ const { theme } = useContext(ChatContext);
3099
+ const { type, data, width = 400, height = 300, title } = config;
3100
+ const chartElement = useMemo(() => {
3101
+ const chartData = data.filter(
3102
+ (d) => typeof d.data === "number"
3103
+ ).map((d) => ({
3104
+ key: d.key,
3105
+ data: d.data
3106
+ }));
3107
+ if (!chartData || chartData.length === 0) {
3108
+ return /* @__PURE__ */ jsx(ChartError, { variant: "warning", message: "No chart data available" });
3109
+ }
3110
+ for (const point of chartData) {
3111
+ if (typeof point.data !== "number" || isNaN(point.data)) {
3112
+ return /* @__PURE__ */ jsx(
3113
+ ChartError,
3114
+ {
3115
+ message: `Invalid data point: ${JSON.stringify(point)}`
3116
+ }
3117
+ );
3118
+ }
3119
+ }
3120
+ const chartProps = {
3121
+ width,
3122
+ height,
3123
+ data: chartData
3124
+ };
3125
+ try {
3126
+ switch (type) {
3127
+ case "bar":
3128
+ return /* @__PURE__ */ jsx(BarChart, { ...chartProps, series: /* @__PURE__ */ jsx(BarSeries, {}) });
3129
+ case "line":
3130
+ return /* @__PURE__ */ jsx(
3131
+ LineChart,
3132
+ {
3133
+ ...chartProps,
3134
+ xAxis: /* @__PURE__ */ jsx(LinearXAxis, { type: "category" }),
3135
+ yAxis: /* @__PURE__ */ jsx(LinearYAxis, { type: "value" }),
3136
+ series: /* @__PURE__ */ jsx(LineSeries, {})
3137
+ }
3138
+ );
3139
+ case "area":
3140
+ return /* @__PURE__ */ jsx(
3141
+ AreaChart,
3142
+ {
3143
+ ...chartProps,
3144
+ xAxis: /* @__PURE__ */ jsx(LinearXAxis, { type: "category" }),
3145
+ yAxis: /* @__PURE__ */ jsx(LinearYAxis, { type: "value" }),
3146
+ series: /* @__PURE__ */ jsx(AreaSeries, {})
3147
+ }
3148
+ );
3149
+ case "pie":
3150
+ return /* @__PURE__ */ jsx(
3151
+ PieChart,
3152
+ {
3153
+ width,
3154
+ height,
3155
+ data: chartData,
3156
+ series: /* @__PURE__ */ jsx(PieArcSeries, {})
3157
+ }
3158
+ );
3159
+ case "radialBar":
3160
+ return /* @__PURE__ */ jsx(
3161
+ RadialBarChart,
3162
+ {
3163
+ width,
3164
+ height,
3165
+ data: chartData,
3166
+ series: /* @__PURE__ */ jsx(RadialBarSeries, {})
3167
+ }
3168
+ );
3169
+ case "radialArea":
3170
+ return /* @__PURE__ */ jsx(
3171
+ RadialAreaChart,
3172
+ {
3173
+ width,
3174
+ height,
3175
+ data: chartData,
3176
+ series: /* @__PURE__ */ jsx(RadialAreaSeries, {})
3177
+ }
3178
+ );
3179
+ case "sparkline":
3180
+ return /* @__PURE__ */ jsx(SparklineChart, { width, height, data: chartData });
3181
+ default:
3182
+ return /* @__PURE__ */ jsx(ChartError, { message: `Unknown chart type: ${type}` });
3183
+ }
3184
+ } catch (error) {
3185
+ return /* @__PURE__ */ jsx(ChartError, { message: `Chart render error: ${String(error)}` });
3186
+ }
3187
+ }, [type, data, width, height]);
3188
+ return /* @__PURE__ */ jsxs("div", { className: cn(theme.chart.base, className), children: [
3189
+ title && /* @__PURE__ */ jsx("div", { className: theme.chart.title, children: title }),
3190
+ /* @__PURE__ */ jsx("div", { className: theme.chart.content, children: chartElement })
3191
+ ] });
3192
+ };
3193
+ function validateChartData(data) {
3194
+ if (!Array.isArray(data)) {
3195
+ return null;
3196
+ }
3197
+ const validData = [];
3198
+ for (const item of data) {
3199
+ if (item && typeof item === "object" && "key" in item && "data" in item && typeof item.data === "number") {
3200
+ validData.push({
3201
+ key: String(item.key),
3202
+ data: item.data
3203
+ });
3204
+ } else {
3205
+ return null;
3206
+ }
3207
+ }
3208
+ return validData.length > 0 ? validData : null;
3209
+ }
3210
+ function parseChartConfig(value) {
3211
+ try {
3212
+ const config = JSON.parse(value);
3213
+ if (!config || !config.type || !config.data) {
3214
+ return null;
3215
+ }
3216
+ const validData = validateChartData(config.data);
3217
+ if (!validData) {
3218
+ console.warn("parseChartConfig: Invalid chart data format");
3219
+ return null;
3220
+ }
3221
+ return {
3222
+ ...config,
3223
+ data: validData
3224
+ };
3225
+ } catch (error) {
3226
+ console.warn("parseChartConfig: Failed to parse JSON", error);
3227
+ return null;
3228
+ }
3229
+ }
3230
+ function isChartClassName(className) {
3231
+ return className === "language-chart";
3232
+ }
3233
+ function getChildText(children) {
3234
+ if (children === null || children === void 0) {
3235
+ return "";
3236
+ }
3237
+ if (typeof children === "string") {
3238
+ return children;
3239
+ }
3240
+ if (typeof children === "number") {
3241
+ return String(children);
3242
+ }
3243
+ if (Array.isArray(children)) {
3244
+ return children.map(getChildText).join("");
3245
+ }
3246
+ if (typeof children === "object") {
3247
+ if ("props" in children && children.props) {
3248
+ const element = children;
3249
+ return getChildText(element.props.children);
3250
+ }
3251
+ }
3252
+ return "";
3253
+ }
3254
+ const ChartPre = ({ children, ...props }) => {
3255
+ var _a, _b;
3256
+ if (children && typeof children === "object" && "props" in children) {
3257
+ const codeElement = children;
3258
+ if (isChartClassName((_a = codeElement.props) == null ? void 0 : _a.className)) {
3259
+ const codeContent = getChildText((_b = codeElement.props) == null ? void 0 : _b.children);
3260
+ if (codeContent) {
3261
+ const chartConfig = parseChartConfig(codeContent);
3262
+ if (chartConfig) {
3263
+ return /* @__PURE__ */ jsx(ChartRenderer, { config: chartConfig });
3264
+ }
3265
+ }
3266
+ return /* @__PURE__ */ jsx(
3267
+ ChartError,
3268
+ {
3269
+ title: "Failed to parse chart configuration",
3270
+ code: codeContent || "No content"
3271
+ }
3272
+ );
3273
+ }
3274
+ }
3275
+ return /* @__PURE__ */ jsx("pre", { ...props, children });
3276
+ };
3277
+ const chartComponents = {
3278
+ pre: ChartPre
3279
+ };
3280
+ const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
3281
+ function remarkCve() {
3282
+ return (tree, _file) => {
3283
+ findAndReplace(tree, [[
3284
+ CVE_REGEX,
3285
+ replaceCve
3286
+ ]]);
3287
+ };
3288
+ function replaceCve(value, id) {
3289
+ return [
3290
+ {
3291
+ type: "link",
3292
+ url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
3293
+ children: [
3294
+ { children: [{ type: "text", value: value.trim() }] }
3295
+ ]
3296
+ }
3297
+ ];
3298
+ }
3299
+ }
3300
+ const remarkChart = (options = {}) => {
3301
+ const { defaultWidth = 400, defaultHeight = 300 } = options;
3302
+ return (tree) => {
3303
+ visit(tree, "code", (node) => {
3304
+ if (node.lang !== "chart") {
3305
+ return;
3306
+ }
3307
+ try {
3308
+ const config = JSON.parse(node.value);
3309
+ if (!config.type || !config.data) {
3310
+ console.warn(
3311
+ "remarkChart: Invalid chart config - missing type or data"
3312
+ );
3313
+ return;
3314
+ }
3315
+ const chartConfig = {
3316
+ ...config,
3317
+ width: config.width ?? defaultWidth,
3318
+ height: config.height ?? defaultHeight
3319
+ };
3320
+ node.value = JSON.stringify(chartConfig);
3321
+ } catch (error) {
3322
+ console.warn("remarkChart: Failed to parse chart config:", error);
3323
+ }
3324
+ });
3325
+ };
3326
+ };
3327
+ 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" }));
3328
+ const DefaultFileRenderer = lazy(() => import("./DefaultFileRenderer-BLV8PtJk.js"));
3329
+ const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-D2mDdCjs.js"));
3330
+ const ImageFileRenderer = lazy(() => import("./ImageFileRenderer-C8tVW3I8.js"));
3331
+ const PDFFileRenderer = lazy(() => import("./PDFFileRenderer-DQdFS2l6.js"));
3332
+ const FILE_TYPE_RENDERER_MAP = {
3333
+ "image/": ImageFileRenderer,
3334
+ "text/csv": CSVFileRenderer,
3335
+ "application/pdf": PDFFileRenderer
3336
+ };
3337
+ const MessageFile = ({
3338
+ name,
3339
+ type,
3340
+ url,
3341
+ limit = 100,
3342
+ fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
3343
+ }) => {
3344
+ const { theme } = useContext(ChatContext);
3345
+ const FileRenderer = useMemo(() => {
3346
+ const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type == null ? void 0 : type.startsWith(key)) ?? "default";
3347
+ return FILE_TYPE_RENDERER_MAP[Renderer] || DefaultFileRenderer;
3348
+ }, [type]);
3349
+ return /* @__PURE__ */ jsx(
3350
+ "div",
3351
+ {
3352
+ className: cn(theme.messages.message.files.file.base),
3353
+ children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(FileRenderer, { name, url, fileIcon, limit }) })
3354
+ }
3355
+ );
3356
+ };
3357
+ const MessageFiles = ({ files, children }) => {
3358
+ const { theme } = useContext(ChatContext);
3359
+ const Comp = children ? Slot : MessageFile;
3360
+ const [expanded, setExpanded] = useState(false);
3361
+ if (!files || files.length === 0) {
3362
+ return null;
3363
+ }
3364
+ const { imageFiles, otherFiles } = files.reduce(
3365
+ (acc, file) => {
3366
+ if (file.type.startsWith("image/")) {
3367
+ acc.imageFiles.push(file);
3368
+ } else {
3369
+ acc.otherFiles.push(file);
3370
+ }
3371
+ return acc;
3372
+ },
3373
+ {
3374
+ imageFiles: [],
3375
+ otherFiles: []
3376
+ }
3377
+ );
3378
+ const maxImageLength = 3;
3379
+ const truncateImages = !expanded && imageFiles.length > maxImageLength;
3380
+ const renderImageFiles = (images) => {
3381
+ return truncateImages ? images.slice(0, maxImageLength).map((image, index) => /* @__PURE__ */ jsxs(
3382
+ "figure",
3383
+ {
3384
+ className: index === 0 ? "col-span-2 row-span-2" : "relative",
3385
+ children: [
3386
+ /* @__PURE__ */ jsx(
3387
+ "img",
3388
+ {
3389
+ src: image.url,
3390
+ alt: image.name,
3391
+ className: "relative w-full h-full object-cover rounded-lg"
3392
+ }
3393
+ ),
3394
+ index === maxImageLength - 1 && /* @__PURE__ */ jsxs(
3395
+ "div",
3396
+ {
3397
+ className: "absolute top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-50 rounded-lg cursor-pointer",
3398
+ onClick: () => setExpanded(true),
3399
+ children: [
3400
+ "+",
3401
+ (imageFiles.length - maxImageLength).toLocaleString()
3402
+ ]
3403
+ }
3404
+ )
3405
+ ]
3406
+ },
3407
+ index
3408
+ )) : images.map((image, index) => /* @__PURE__ */ jsx(Comp, { ...image, children }, index));
3409
+ };
3410
+ return /* @__PURE__ */ jsxs(
3411
+ "div",
3412
+ {
3413
+ className: cn(
3414
+ theme.messages.message.files.base,
3415
+ truncateImages ? "grid grid-rows-2 grid-flow-col gap-2 w-1/3" : ""
3416
+ ),
3417
+ children: [
3418
+ imageFiles.length > 0 && renderImageFiles(imageFiles),
3419
+ otherFiles.length > 0 && otherFiles.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index))
3420
+ ]
3421
+ }
3422
+ );
3423
+ };
3424
+ const MessageQuestion = ({
3425
+ children,
3426
+ ...props
3427
+ }) => {
3428
+ const { theme, remarkPlugins } = useContext(ChatContext);
3429
+ const { question, files } = props;
3430
+ const Comp = children ? Slot : "div";
3431
+ const [expanded, setExpanded] = useState(false);
3432
+ const isLong = question.length > 500;
3433
+ return /* @__PURE__ */ jsx(
3434
+ Comp,
3435
+ {
3436
+ className: cn(theme.messages.message.question, {
3437
+ [theme.messages.message.overlay]: isLong && !expanded
3438
+ }),
3439
+ ...props,
3440
+ children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
3441
+ /* @__PURE__ */ jsx(MessageFiles, { files }),
3442
+ /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: question }),
3443
+ isLong && !expanded && /* @__PURE__ */ jsx(
3444
+ Button,
3445
+ {
3446
+ variant: "link",
3447
+ size: "small",
3448
+ className: theme.messages.message.expand,
3449
+ onClick: () => setExpanded(true),
3450
+ children: "Show more"
3451
+ }
3452
+ )
3453
+ ] })
3454
+ }
3455
+ );
3456
+ };
3457
+ const MessageResponse = ({
3458
+ response,
3459
+ isLoading,
3460
+ children
3461
+ }) => {
3462
+ const { theme, isCompact, remarkPlugins } = useContext(ChatContext);
3463
+ const Comp = children ? Slot : "div";
3464
+ return /* @__PURE__ */ jsx(
3465
+ Comp,
3466
+ {
3467
+ "data-compact": isCompact,
3468
+ className: cn(theme.messages.message.response),
3469
+ children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
3470
+ /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: response }),
3471
+ isLoading && /* @__PURE__ */ jsx(
3472
+ motion.div,
3473
+ {
3474
+ className: cn(theme.messages.message.cursor),
3475
+ animate: { opacity: [1, 0] },
3476
+ transition: {
3477
+ duration: 0.7,
3478
+ repeat: Infinity,
3479
+ repeatType: "reverse"
3480
+ }
3481
+ }
3482
+ )
3483
+ ] })
3484
+ }
3485
+ );
3486
+ };
3487
+ const MessageSource = ({ title, url, image, limit = 50 }) => {
3488
+ const { theme, isCompact } = useContext(ChatContext);
3489
+ return /* @__PURE__ */ jsxs(
3490
+ "figure",
3491
+ {
3492
+ className: cn(theme.messages.message.sources.source.base, {
3493
+ [theme.messages.message.sources.source.companion]: isCompact
3494
+ }),
3495
+ onClick: () => {
3496
+ if (url) {
3497
+ window.open(url, "_blank");
3498
+ }
3499
+ },
3500
+ children: [
3501
+ image && /* @__PURE__ */ jsx("img", { src: image, alt: title, className: cn(theme.messages.message.sources.source.image) }),
3502
+ (title || url) && /* @__PURE__ */ jsxs("figcaption", { children: [
3503
+ title && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsx(Ellipsis, { value: title, limit }) }),
3504
+ url && /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(theme.messages.message.sources.source.url), children: url })
3505
+ ] })
3506
+ ]
3507
+ }
3508
+ );
3509
+ };
3510
+ const MessageSources = ({
3511
+ sources,
3512
+ children
3513
+ }) => {
3514
+ const { theme } = useContext(ChatContext);
3515
+ const Comp = children ? Slot : MessageSource;
3516
+ if (!sources || sources.length === 0) {
3517
+ return null;
3518
+ }
3519
+ 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)) });
3520
+ };
3521
+ 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" }));
3522
+ 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" }));
3523
+ 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" }));
3524
+ const MessageActions = ({
3525
+ children,
3526
+ ...props
3527
+ }) => {
3528
+ const { theme } = useContext(ChatContext);
3529
+ const {
3530
+ question,
3531
+ response,
3532
+ copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
3533
+ thumbsUpIcon = /* @__PURE__ */ jsx(SvgThumbsUp, {}),
3534
+ thumbsDownIcon = /* @__PURE__ */ jsx(SvgThumbsDown, {}),
3535
+ refreshIcon = /* @__PURE__ */ jsx(SvgRefresh, {}),
3536
+ onCopy,
3537
+ onUpvote,
3538
+ onDownvote,
3539
+ onRefresh
3540
+ } = props;
3541
+ const Comp = children ? Slot : "div";
3542
+ const handleCopy = (text) => {
3543
+ navigator.clipboard.writeText(text).then(() => {
3544
+ console.log("Text copied to clipboard");
3545
+ }).catch((err) => {
3546
+ console.error("Could not copy text: ", err);
3547
+ });
3548
+ };
3549
+ return (copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
3550
+ copyIcon && /* @__PURE__ */ jsx(
3551
+ IconButton,
3552
+ {
3553
+ variant: "text",
3554
+ disablePadding: true,
3555
+ title: "Copy question and response",
3556
+ className: cn(theme.messages.message.footer.copy),
3557
+ onClick: onCopy ? onCopy : () => handleCopy(`${question}
3558
+ ${response}`),
3559
+ children: copyIcon
3560
+ }
3561
+ ),
3562
+ thumbsUpIcon && /* @__PURE__ */ jsx(
3563
+ IconButton,
3564
+ {
3565
+ variant: "text",
3566
+ disablePadding: true,
3567
+ title: "Upvote",
3568
+ className: cn(theme.messages.message.footer.upvote),
3569
+ onClick: onUpvote,
3570
+ children: thumbsUpIcon
3571
+ }
3572
+ ),
3573
+ thumbsDownIcon && /* @__PURE__ */ jsx(
3574
+ IconButton,
3575
+ {
3576
+ variant: "text",
3577
+ disablePadding: true,
3578
+ title: "Downvote",
3579
+ className: cn(theme.messages.message.footer.downvote),
3580
+ onClick: onDownvote,
3581
+ children: thumbsDownIcon
3582
+ }
3583
+ ),
3584
+ refreshIcon && /* @__PURE__ */ jsx(
3585
+ IconButton,
3586
+ {
3587
+ variant: "text",
3588
+ disablePadding: true,
3589
+ title: "Refresh",
3590
+ className: cn(theme.messages.message.footer.refresh),
3591
+ onClick: onRefresh,
3592
+ children: refreshIcon
3593
+ }
3594
+ )
3595
+ ] }) });
3596
+ };
3597
+ const messageVariants = {
3598
+ hidden: {
3599
+ opacity: 0,
3600
+ y: 20
3601
+ },
3602
+ visible: {
3603
+ opacity: 1,
3604
+ y: 0,
3605
+ transition: {
3606
+ duration: 0.3
3607
+ }
3608
+ }
3609
+ };
3610
+ const SessionMessage = ({
3611
+ conversation,
3612
+ isLast,
3613
+ children
3614
+ }) => {
3615
+ const { theme, isLoading } = useContext(ChatContext);
3616
+ return /* @__PURE__ */ jsx(motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
3617
+ /* @__PURE__ */ jsx(
3618
+ MessageQuestion,
3619
+ {
3620
+ question: conversation.question,
3621
+ files: conversation.files
3622
+ }
3623
+ ),
3624
+ /* @__PURE__ */ jsx(
3625
+ MessageResponse,
3626
+ {
3627
+ response: conversation.response,
3628
+ isLoading: isLast && isLoading
3629
+ }
3630
+ ),
3631
+ /* @__PURE__ */ jsx(MessageSources, { sources: conversation.sources }),
3632
+ /* @__PURE__ */ jsx(
3633
+ MessageActions,
3634
+ {
3635
+ question: conversation.question,
3636
+ response: conversation.response
3637
+ }
3638
+ )
3639
+ ] }) }) }, conversation.id);
3640
+ };
3641
+ const SvgArrowDown = (props) => /* @__PURE__ */ React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0 mix-blend-luminosity", "aria-hidden": "true", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 3C10.2761 3.00006 10.5 3.2239 10.5 3.5V15.293L14.6465 11.1465C14.8418 10.9514 15.1583 10.9513 15.3536 11.1465C15.5487 11.3417 15.5486 11.6583 15.3536 11.8535L10.3535 16.8535C10.2598 16.9473 10.1326 17 10 17C9.90062 17 9.8042 16.9703 9.72268 16.916L9.64651 16.8535L4.6465 11.8535C4.45138 11.6582 4.45128 11.3417 4.6465 11.1465C4.84172 10.9513 5.15827 10.9514 5.35353 11.1465L9.50003 15.293V3.5C9.50003 3.22386 9.72389 3 10 3Z" }));
3642
+ const containerVariants = {
3643
+ hidden: {},
3644
+ visible: {
3645
+ transition: {
3646
+ staggerChildren: 0.07,
3647
+ when: "beforeChildren"
3648
+ }
3649
+ }
3650
+ };
3651
+ const SessionMessages = ({
3652
+ children,
3653
+ newSessionContent,
3654
+ limit = 10,
3655
+ showMoreText = "Show more",
3656
+ showScrollBottomButton = false
3657
+ }) => {
3658
+ var _a, _b, _c, _d, _e, _f;
3659
+ const { activeSession, theme } = useContext(ChatContext);
3660
+ const contentRef = useRef(null);
3661
+ const messagesRef = useRef(null);
3662
+ const [isAnimating, setIsAnimating] = useState(true);
3663
+ const [iAtBottom, setIsAtBottom] = useState(true);
3664
+ useEffect(() => {
3665
+ if (!contentRef.current || !showScrollBottomButton) {
3666
+ return;
3667
+ }
3668
+ const handleScroll = debounce(() => {
3669
+ if (contentRef.current) {
3670
+ setIsAtBottom(
3671
+ contentRef.current.scrollHeight - contentRef.current.clientHeight === contentRef.current.scrollTop
3672
+ );
3673
+ }
3674
+ }, 50);
3675
+ const currentRef = contentRef.current;
3676
+ currentRef.addEventListener("scroll", handleScroll);
3677
+ return () => currentRef.removeEventListener("scroll", handleScroll);
3678
+ }, [showScrollBottomButton]);
3679
+ useEffect(() => {
3680
+ if (contentRef.current) {
3681
+ requestAnimationFrame(
3682
+ () => contentRef.current.scrollTop = contentRef.current.scrollHeight
3683
+ );
3684
+ }
3685
+ }, [activeSession, isAnimating]);
3686
+ const handleShowMore = () => {
3687
+ showNext(limit);
3688
+ requestAnimationFrame(() => contentRef.current.scrollTop = 0);
3689
+ };
3690
+ const handleScrollToBottom = () => {
3691
+ if (contentRef.current) {
3692
+ contentRef.current.scrollTo({
3693
+ top: contentRef.current.scrollHeight,
3694
+ behavior: "smooth"
3695
+ });
3696
+ }
3697
+ };
3698
+ const reversedConvos = useMemo(
3699
+ () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
3700
+ [activeSession]
3701
+ );
3702
+ const { data, hasMore, showNext } = useInfinityList({
3703
+ items: reversedConvos,
3704
+ size: limit
3705
+ });
3706
+ const reReversedConvo = useMemo(() => [...data].reverse(), [data]);
3707
+ const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
3708
+ if (!activeSession) {
3709
+ return /* @__PURE__ */ jsx(SessionEmpty, { children: newSessionContent });
3710
+ }
3711
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-hidden", children: [
3712
+ /* @__PURE__ */ jsxs(
3713
+ "div",
3714
+ {
3715
+ className: cn(theme.messages.content, "h-full"),
3716
+ ref: contentRef,
3717
+ id: activeSession == null ? void 0 : activeSession.id,
3718
+ children: [
3719
+ hasMore && /* @__PURE__ */ jsx(
3720
+ Button,
3721
+ {
3722
+ variant: "outline",
3723
+ className: cn(theme.messages.showMore),
3724
+ fullWidth: true,
3725
+ onClick: handleShowMore,
3726
+ children: showMoreText
3727
+ }
3728
+ ),
3729
+ /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
3730
+ motion.div,
3731
+ {
3732
+ ref: messagesRef,
3733
+ variants: containerVariants,
3734
+ initial: "hidden",
3735
+ animate: "visible",
3736
+ onAnimationComplete: () => requestAnimationFrame(() => {
3737
+ setIsAnimating(false);
3738
+ if (contentRef.current) {
3739
+ contentRef.current.scrollTop = contentRef.current.scrollHeight;
3740
+ }
3741
+ }),
3742
+ children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsx(
3743
+ SessionMessage,
3744
+ {
3745
+ conversation,
3746
+ isLast: index === conversation.length - 1
3747
+ },
3748
+ conversation.id
3749
+ ))
3750
+ },
3751
+ activeSession == null ? void 0 : activeSession.id
3752
+ ) })
3753
+ ]
3754
+ }
3755
+ ),
3756
+ /* @__PURE__ */ jsx(AnimatePresence, { children: !iAtBottom && showScrollBottomButton && /* @__PURE__ */ jsx(
3757
+ motion.div,
3758
+ {
3759
+ initial: { y: 100, opacity: 0 },
3760
+ animate: { y: 0, opacity: 1 },
3761
+ exit: { y: 100, opacity: 0 },
3762
+ transition: { duration: 0.3, ease: "easeOut" },
3763
+ className: (_c = (_b = (_a = theme.messages) == null ? void 0 : _a.message) == null ? void 0 : _b.scrollToBottom) == null ? void 0 : _c.container,
3764
+ children: /* @__PURE__ */ jsx(
3765
+ IconButton,
3766
+ {
3767
+ onClick: handleScrollToBottom,
3768
+ className: (_f = (_e = (_d = theme.messages) == null ? void 0 : _d.message) == null ? void 0 : _e.scrollToBottom) == null ? void 0 : _f.button,
3769
+ size: "sm",
3770
+ children: /* @__PURE__ */ jsx(SvgArrowDown, {})
3771
+ }
3772
+ )
3773
+ }
3774
+ ) })
3775
+ ] });
3776
+ };
3777
+ const useDimensions = () => {
3778
+ const [ref, setRef] = useState(null);
3779
+ const [width, setWidth] = useState(void 0);
3780
+ const observe = useCallback((element) => {
3781
+ if (element) setRef(element);
3782
+ }, []);
3783
+ useEffect(() => {
3784
+ if (!ref) return;
3785
+ const resizeObserver = new ResizeObserver((entries) => {
3786
+ for (let entry of entries) {
3787
+ setWidth(entry.contentRect.width);
3788
+ }
3789
+ });
3790
+ resizeObserver.observe(ref);
3791
+ return () => {
3792
+ resizeObserver.disconnect();
3793
+ };
3794
+ }, [ref]);
3795
+ return { width, observe };
3796
+ };
3797
+ const Chat = ({
3798
+ children,
3799
+ viewType = "console",
3800
+ sessions,
3801
+ onSelectSession,
3802
+ onDeleteSession,
3803
+ onSendMessage,
3804
+ onStopMessage,
3805
+ onFileUpload,
3806
+ isLoading,
3807
+ activeSessionId,
3808
+ theme: customTheme = chatTheme,
3809
+ onNewSession,
3810
+ remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
3811
+ markdownComponents,
3812
+ disabled,
3813
+ style,
3814
+ className
3815
+ }) => {
3816
+ const theme = useComponentTheme("chat", customTheme);
3817
+ const [internalActiveSessionID, setInternalActiveSessionID] = useState(activeSessionId);
3818
+ const { width, observe } = useDimensions();
3819
+ const isCompact = viewType === "companion" || width && width < 767;
3820
+ useEffect(() => {
3821
+ setInternalActiveSessionID(activeSessionId);
3822
+ }, [activeSessionId]);
3823
+ const handleSelectSession = useCallback(
3824
+ (sessionId) => {
3825
+ setInternalActiveSessionID(sessionId);
3826
+ onSelectSession == null ? void 0 : onSelectSession(sessionId);
3827
+ },
3828
+ [onSelectSession]
3829
+ );
3830
+ const handleDeleteSession = useCallback(
3831
+ (sessionId) => {
3832
+ setInternalActiveSessionID(void 0);
3833
+ onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
3834
+ },
3835
+ [onDeleteSession]
3836
+ );
3837
+ const handleCreateNewSession = useCallback(() => {
3838
+ setInternalActiveSessionID(void 0);
3839
+ onNewSession == null ? void 0 : onNewSession();
3840
+ }, [onNewSession]);
3841
+ useHotkeys([
3842
+ {
3843
+ name: "Create new session",
3844
+ category: "Chat",
3845
+ keys: "meta+shift+s",
3846
+ callback: (event) => {
3847
+ event.preventDefault();
3848
+ handleCreateNewSession();
3849
+ }
3850
+ }
3851
+ ]);
3852
+ const activeSession = useMemo(
3853
+ () => sessions.find((session) => session.id === internalActiveSessionID),
3854
+ [sessions, internalActiveSessionID]
3855
+ );
3856
+ const contextValue = useMemo(
3857
+ () => ({
3858
+ sessions,
3859
+ activeSession,
3860
+ remarkPlugins,
3861
+ markdownComponents,
3862
+ theme,
3863
+ disabled,
3864
+ isLoading,
3865
+ isCompact,
3866
+ viewType,
3867
+ activeSessionId: internalActiveSessionID,
3868
+ selectSession: handleSelectSession,
3869
+ deleteSession: handleDeleteSession,
3870
+ createSession: handleCreateNewSession,
3871
+ sendMessage: onSendMessage,
3872
+ stopMessage: onStopMessage,
3873
+ fileUpload: onFileUpload
3874
+ }),
3875
+ [
3876
+ isLoading,
3877
+ isCompact,
3878
+ viewType,
3879
+ disabled,
3880
+ theme,
3881
+ remarkPlugins,
3882
+ markdownComponents,
3883
+ sessions,
3884
+ activeSession,
3885
+ internalActiveSessionID,
3886
+ handleSelectSession,
3887
+ handleDeleteSession,
3888
+ handleCreateNewSession,
3889
+ onSendMessage,
3890
+ onStopMessage,
3891
+ onFileUpload
3892
+ ]
3893
+ );
3894
+ return /* @__PURE__ */ jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
3895
+ "div",
3896
+ {
3897
+ ref: observe,
3898
+ className: cn(className, theme.base, {
3899
+ [theme.companion]: isCompact,
3900
+ [theme.console]: !isCompact
3901
+ }),
3902
+ style,
3903
+ children
3904
+ }
3905
+ ) }) });
3906
+ };
3907
+ 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" })));
3908
+ 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" }));
3909
+ const SessionListItem = ({
3910
+ children,
3911
+ session,
3912
+ deletable = true,
3913
+ limit = 100,
3914
+ deleteIcon = /* @__PURE__ */ jsx(SvgTrash, {}),
3915
+ chatIcon = /* @__PURE__ */ jsx(SvgChat, { className: "mr-2" })
3916
+ }) => {
3917
+ const { activeSessionId, selectSession, deleteSession, theme } = useContext(ChatContext);
3918
+ const Comp = children ? Slot : ListItem;
3919
+ return /* @__PURE__ */ jsx(
3920
+ Comp,
3921
+ {
3922
+ dense: true,
3923
+ disableGutters: true,
3924
+ active: session.id === activeSessionId,
3925
+ className: cn(theme.sessions.session.base, {
3926
+ [theme.sessions.session.active]: session.id === activeSessionId
3927
+ }),
3928
+ onClick: () => selectSession == null ? void 0 : selectSession(session.id),
3929
+ start: chatIcon,
3930
+ end: /* @__PURE__ */ jsx(Fragment, { children: deletable && /* @__PURE__ */ jsx(
3931
+ IconButton,
3932
+ {
3933
+ size: "small",
3934
+ variant: "text",
3935
+ onClick: (e) => {
3936
+ e.stopPropagation();
3937
+ deleteSession(session.id);
3938
+ },
3939
+ className: cn(theme.sessions.session.delete),
3940
+ children: deleteIcon
3941
+ }
3942
+ ) }),
3943
+ children: children || /* @__PURE__ */ jsx(Ellipsis, { value: session.title, limit })
3944
+ }
3945
+ );
3946
+ };
3947
+ const SessionsList = ({
3948
+ children,
3949
+ templates
3950
+ }) => {
3951
+ const { theme, isCompact, activeSessionId, createSession } = useContext(ChatContext);
3952
+ const isVisible = isCompact && !activeSessionId;
3953
+ return (!isCompact || isVisible) && /* @__PURE__ */ jsxs(
3954
+ motion.div,
3955
+ {
3956
+ initial: { translateX: "-100%" },
3957
+ animate: {
3958
+ translateX: "0%",
3959
+ transition: {
3960
+ type: "tween",
3961
+ ease: "linear",
3962
+ duration: 0.2,
3963
+ when: "beforeChildren"
3964
+ }
3965
+ },
3966
+ exit: { translateX: "-100%" },
3967
+ className: cn(theme.sessions.base, {
3968
+ [theme.sessions.companion]: isCompact,
3969
+ [theme.sessions.console]: !isCompact
3970
+ }),
3971
+ children: [
3972
+ /* @__PURE__ */ jsx(List, { children }),
3973
+ templates && !activeSessionId && /* @__PURE__ */ jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsx("div", { onClick: () => createSession == null ? void 0 : createSession(), children: /* @__PURE__ */ jsx(
3974
+ SessionListItem,
3975
+ {
3976
+ session: {
3977
+ id: template.id,
3978
+ title: template.title,
3979
+ conversations: []
3980
+ },
3981
+ chatIcon: template.icon,
3982
+ deletable: false
3983
+ }
3984
+ ) }, template.id)) })
3985
+ ]
3986
+ }
3987
+ );
3988
+ };
3989
+ 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" })));
3990
+ const NewSessionButton = ({
3991
+ children,
3992
+ newSessionText = "New Session"
3993
+ }) => {
3994
+ const { theme, createSession, disabled } = useContext(ChatContext);
3995
+ const Comp = children ? Slot : Button;
3996
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
3997
+ Comp,
3998
+ {
3999
+ fullWidth: true,
4000
+ disableMargins: true,
4001
+ color: "primary",
4002
+ startAdornment: /* @__PURE__ */ jsx(SvgPlus, {}),
4003
+ className: cn(theme.sessions.create),
4004
+ disabled,
4005
+ onClick: createSession,
4006
+ children: children || newSessionText
4007
+ }
4008
+ ) });
4009
+ };
4010
+ const sortOrder = [
4011
+ "Today",
4012
+ "Yesterday",
4013
+ "Last Week",
4014
+ "Last Month",
4015
+ "January",
4016
+ "February",
4017
+ "March",
4018
+ "April",
4019
+ "May",
4020
+ "June",
4021
+ "July",
4022
+ "August",
4023
+ "September",
4024
+ "October",
4025
+ "November",
4026
+ "December",
4027
+ "Last Year"
4028
+ ];
4029
+ function groupSessionsByDate(sessions) {
4030
+ const grouped = {};
4031
+ sessions.forEach((session) => {
4032
+ const createdAt = new Date(session.createdAt);
4033
+ const now = /* @__PURE__ */ new Date();
4034
+ if (isToday(createdAt)) {
4035
+ if (!grouped["Today"]) grouped["Today"] = [];
4036
+ grouped["Today"].push(session);
4037
+ } else if (isYesterday(createdAt)) {
4038
+ if (!grouped["Yesterday"]) grouped["Yesterday"] = [];
4039
+ grouped["Yesterday"].push(session);
4040
+ } else if (isThisWeek(createdAt)) {
4041
+ if (!grouped["Last Week"]) grouped["Last Week"] = [];
4042
+ grouped["Last Week"].push(session);
4043
+ } else if (differenceInYears(now, createdAt) === 0) {
4044
+ const monthDiff = now.getMonth() - createdAt.getMonth();
4045
+ const yearDiff = now.getFullYear() - createdAt.getFullYear();
4046
+ const adjustedMonthDiff = yearDiff > 0 ? monthDiff + 12 : monthDiff;
4047
+ if (adjustedMonthDiff === 1 || adjustedMonthDiff === 0 && now.getDate() > createdAt.getDate()) {
4048
+ if (!grouped["Last Month"]) grouped["Last Month"] = [];
4049
+ grouped["Last Month"].push(session);
4050
+ } else {
4051
+ const monthName = format(createdAt, "MMMM");
4052
+ if (!grouped[monthName]) grouped[monthName] = [];
4053
+ grouped[monthName].push(session);
4054
+ }
4055
+ } else {
4056
+ if (!grouped["Last Year"]) grouped["Last Year"] = [];
4057
+ grouped["Last Year"].push(session);
4058
+ }
4059
+ });
4060
+ Object.keys(grouped).forEach((key) => {
4061
+ if (grouped[key].length === 0) {
4062
+ delete grouped[key];
4063
+ }
4064
+ });
4065
+ const sortedGroups = Object.keys(grouped).sort(
4066
+ (a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b)
4067
+ );
4068
+ return sortedGroups.map((heading) => ({
4069
+ heading,
4070
+ sessions: grouped[heading].sort(
4071
+ (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
4072
+ )
4073
+ }));
4074
+ }
4075
+ const SessionsGroup = ({
4076
+ heading,
4077
+ children
4078
+ }) => {
4079
+ const { theme } = useContext(ChatContext);
4080
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
4081
+ heading && /* @__PURE__ */ jsx(
4082
+ ListItem,
4083
+ {
4084
+ disableGutters: true,
4085
+ disablePadding: true,
4086
+ className: cn(theme.sessions.group),
4087
+ children: heading
4088
+ }
4089
+ ),
4090
+ children
4091
+ ] });
4092
+ };
4093
+ const SessionGroups = ({ children }) => {
4094
+ const { sessions } = useContext(ChatContext);
4095
+ const groups = useMemo(() => groupSessionsByDate(sessions), [sessions]);
4096
+ 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)) }, heading)) });
4097
+ };
4098
+ const AppBar = ({
4099
+ content,
4100
+ theme: customTheme = chatTheme
4101
+ }) => {
4102
+ const theme = useComponentTheme("chat", customTheme);
4103
+ return /* @__PURE__ */ jsx("div", { className: cn(theme.appbar), children: content });
4104
+ };
4105
+ const ChatBubble = memo(
4106
+ ({
4107
+ children,
4108
+ bubbleContent,
4109
+ position = "right-end",
4110
+ modifiers = [offset({ mainAxis: 0, crossAxis: -40 })],
4111
+ className
4112
+ }) => {
4113
+ const [isOpen, setIsOpen] = useState(false);
4114
+ const ref = useRef(null);
4115
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
4116
+ /* @__PURE__ */ jsx(
4117
+ ConnectedOverlay,
4118
+ {
4119
+ placement: position,
4120
+ modifiers,
4121
+ reference: ref.current,
4122
+ open: isOpen,
4123
+ onOpen: () => setIsOpen(true),
4124
+ onClose: () => setIsOpen(false),
4125
+ content: () => /* @__PURE__ */ jsx(Fragment, { children })
4126
+ }
4127
+ ),
4128
+ /* @__PURE__ */ jsx(
4129
+ "div",
4130
+ {
4131
+ ref,
4132
+ className,
4133
+ onClick: () => setIsOpen((prev) => !prev),
4134
+ children: bubbleContent
4135
+ }
4136
+ )
4137
+ ] });
4138
+ }
4139
+ );
4140
+ const ChatSuggestion = ({
4141
+ content,
4142
+ onClick
4143
+ }) => {
4144
+ const { theme, disabled, isLoading } = useContext(ChatContext);
4145
+ const handleClick = () => {
4146
+ if (disabled || isLoading) return;
4147
+ onClick == null ? void 0 : onClick(content);
4148
+ };
4149
+ return /* @__PURE__ */ jsx(
4150
+ Button,
4151
+ {
4152
+ type: "button",
4153
+ variant: "outline",
4154
+ disableMargins: true,
4155
+ className: cn(theme.suggestions.item.base, {
4156
+ "opacity-50 cursor-not-allowed": disabled || isLoading
4157
+ }),
4158
+ onClick: handleClick,
4159
+ disabled: disabled || isLoading,
4160
+ children: /* @__PURE__ */ jsx("span", { className: cn(theme.suggestions.item.text), children: content })
4161
+ }
4162
+ );
4163
+ };
4164
+ const ChatSuggestions = ({
4165
+ suggestions,
4166
+ className,
4167
+ onSuggestionClick,
4168
+ children
4169
+ }) => {
4170
+ const { theme } = useContext(ChatContext);
4171
+ if (!suggestions || suggestions.length === 0) {
4172
+ return null;
4173
+ }
4174
+ return /* @__PURE__ */ jsx("div", { className: cn(theme.suggestions.base, className), children: suggestions.map((suggestion) => {
4175
+ if (children && isValidElement(children)) {
4176
+ return cloneElement(children, {
4177
+ key: suggestion.id,
4178
+ ...suggestion,
4179
+ onClick: onSuggestionClick
4180
+ });
4181
+ }
4182
+ return /* @__PURE__ */ jsx(
4183
+ ChatSuggestion,
4184
+ {
4185
+ ...suggestion,
4186
+ onClick: onSuggestionClick
4187
+ },
4188
+ suggestion.id
4189
+ );
4190
+ }) });
4191
+ };
4192
+ const SvgSpinner = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
4193
+ const SvgCheck = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("polyline", { points: "20 6 9 17 4 12" }));
4194
+ const SvgError = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 10 }), /* @__PURE__ */ React.createElement("line", { x1: 15, y1: 9, x2: 9, y2: 15 }), /* @__PURE__ */ React.createElement("line", { x1: 9, y1: 9, x2: 15, y2: 15 }));
4195
+ const StatusIcon = ({
4196
+ state,
4197
+ className,
4198
+ colorClassName
4199
+ }) => {
4200
+ switch (state) {
4201
+ case "loading":
4202
+ return /* @__PURE__ */ jsx(
4203
+ motion.div,
4204
+ {
4205
+ animate: { rotate: 360 },
4206
+ transition: { duration: 1, repeat: Infinity, ease: "linear" },
4207
+ className: cn(className, colorClassName),
4208
+ children: /* @__PURE__ */ jsx(SvgSpinner, { className: "w-full h-full" })
4209
+ }
4210
+ );
4211
+ case "complete":
4212
+ return /* @__PURE__ */ jsx(
4213
+ motion.div,
4214
+ {
4215
+ initial: { scale: 0, opacity: 0 },
4216
+ animate: { scale: 1, opacity: 1 },
4217
+ transition: { type: "spring", stiffness: 500, damping: 25 },
4218
+ className: cn(className, colorClassName),
4219
+ children: /* @__PURE__ */ jsx(SvgCheck, { className: "w-full h-full" })
4220
+ }
4221
+ );
4222
+ case "error":
4223
+ return /* @__PURE__ */ jsx(
4224
+ motion.div,
4225
+ {
4226
+ initial: { scale: 0, opacity: 0 },
4227
+ animate: { scale: 1, opacity: 1 },
4228
+ transition: { type: "spring", stiffness: 500, damping: 25 },
4229
+ className: cn(className, colorClassName),
4230
+ children: /* @__PURE__ */ jsx(SvgError, { className: "w-full h-full" })
4231
+ }
4232
+ );
4233
+ }
4234
+ };
4235
+ const MessageStatusItem = ({ step }) => {
4236
+ const { theme: chatTheme$1 } = useContext(ChatContext);
4237
+ const theme = (chatTheme$1 ?? chatTheme).status.steps.step;
4238
+ const stepStatus = step.status || "loading";
4239
+ return /* @__PURE__ */ jsxs(
4240
+ motion.div,
4241
+ {
4242
+ initial: { opacity: 0, x: -10 },
4243
+ animate: { opacity: 1, x: 0 },
4244
+ transition: { duration: 0.2 },
4245
+ className: theme.base,
4246
+ children: [
4247
+ /* @__PURE__ */ jsx(
4248
+ StatusIcon,
4249
+ {
4250
+ state: stepStatus,
4251
+ className: theme.icon,
4252
+ colorClassName: theme[stepStatus]
4253
+ }
4254
+ ),
4255
+ /* @__PURE__ */ jsx(
4256
+ "span",
4257
+ {
4258
+ className: cn(
4259
+ theme.text,
4260
+ stepStatus === "loading" && theme.loading,
4261
+ stepStatus === "complete" && theme.complete,
4262
+ stepStatus === "error" && theme.error
4263
+ ),
4264
+ children: step.text
4265
+ }
4266
+ )
4267
+ ]
4268
+ }
4269
+ );
4270
+ };
4271
+ const MessageStatus = ({
4272
+ status = "loading",
4273
+ text,
4274
+ steps,
4275
+ icon,
4276
+ className,
4277
+ children
4278
+ }) => {
4279
+ const { theme: chatTheme$1 } = useContext(ChatContext);
4280
+ const theme = (chatTheme$1 ?? chatTheme).status;
4281
+ const Comp = children ? Slot : "div";
4282
+ return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
4283
+ motion.div,
4284
+ {
4285
+ initial: { opacity: 0, y: -10 },
4286
+ animate: { opacity: 1, y: 0 },
4287
+ exit: { opacity: 0, y: -10 },
4288
+ transition: { duration: 0.2 },
4289
+ children: /* @__PURE__ */ jsx(Comp, { className: cn(theme.base, className), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
4290
+ /* @__PURE__ */ jsxs("div", { className: theme.header, children: [
4291
+ icon || /* @__PURE__ */ jsx(
4292
+ StatusIcon,
4293
+ {
4294
+ state: status,
4295
+ className: theme.icon.base,
4296
+ colorClassName: theme.icon[status]
4297
+ }
4298
+ ),
4299
+ /* @__PURE__ */ jsx(
4300
+ "span",
4301
+ {
4302
+ className: cn(
4303
+ theme.text.base,
4304
+ status === "loading" && theme.text.loading,
4305
+ status === "complete" && theme.text.complete,
4306
+ status === "error" && theme.text.error
4307
+ ),
4308
+ children: text
4309
+ }
4310
+ )
4311
+ ] }),
4312
+ steps && steps.length > 0 && /* @__PURE__ */ jsx("div", { className: theme.steps.base, children: steps.map((step) => /* @__PURE__ */ jsx(MessageStatusItem, { step }, step.id)) })
4313
+ ] }) })
4314
+ }
4315
+ ) });
4316
+ };
4317
+ export {
4318
+ ChartError as A,
4319
+ validateChartData as B,
4320
+ ChatInput as C,
4321
+ parseChartConfig as D,
4322
+ isChartClassName as E,
4323
+ FileInput as F,
4324
+ getChildText as G,
4325
+ remarkCve as H,
4326
+ remarkChart as I,
4327
+ dark as J,
4328
+ light as K,
4329
+ ChatContext as L,
4330
+ MentionList as M,
4331
+ NewSessionButton as N,
4332
+ AppBar as O,
4333
+ ChatBubble as P,
4334
+ ChatSuggestions as Q,
4335
+ RichTextInput as R,
4336
+ SvgFile as S,
4337
+ TableComponent as T,
4338
+ ChatSuggestion as U,
4339
+ MessageStatus as V,
4340
+ MessageStatusItem as W,
4341
+ StatusIcon as X,
4342
+ SvgCopy as a,
4343
+ SessionEmpty as b,
4344
+ SessionMessagesHeader as c,
4345
+ SessionMessagePanel as d,
4346
+ SessionMessage as e,
4347
+ MessageSource as f,
4348
+ MessageActions as g,
4349
+ MessageFile as h,
4350
+ MessageFiles as i,
4351
+ MessageQuestion as j,
4352
+ MessageResponse as k,
4353
+ MessageSources as l,
4354
+ SessionMessages as m,
4355
+ Chat as n,
4356
+ SessionsList as o,
4357
+ SessionListItem as p,
4358
+ SessionGroups as q,
4359
+ SessionsGroup as r,
4360
+ chatTheme as s,
4361
+ Markdown as t,
4362
+ TableHeaderCell as u,
4363
+ TableDataCell as v,
4364
+ CodeHighlighter as w,
4365
+ chartComponents as x,
4366
+ ChartRenderer as y,
4367
+ ChartPre as z
4368
+ };
4369
+ //# sourceMappingURL=index-B3dZT-5c.js.map