reachat 3.2.2 → 3.2.3

package/dist/index.js

@@ -10,67 +10,4179 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { A, b, C, c, d, e, f, g, h, i, j, k, F, M, l, m, n, o, p, q, r, s, t, u, N, R, v, w, x, y, z, B, D, E, G, H, T, I, J, K, L, O, P, Q, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3 } from "./index-BiStNXJ4.js";
-import "react/jsx-runtime";
-import "react";
-import "reablocks";
-import "motion/react";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createContext, useContext, useRef, forwardRef, useState, useEffect, useCallback, useImperativeHandle, memo, useMemo, lazy, Suspense, isValidElement, cloneElement, Component } from "react";
+import { Button, cn, List, ListItem, Ellipsis, DateFormat, Redact, IconButton, Card, useInfinityList, useComponentTheme, ConnectedOverlay } from "reablocks";
+import { useEditor, EditorContent, ReactRenderer, posToDOMRect } from "@tiptap/react";
+import { computePosition, shift, flip } from "@floating-ui/dom";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import HardBreak from "@tiptap/extension-hard-break";
+import Placeholder from "@tiptap/extension-placeholder";
+import Mention from "@tiptap/extension-mention";
+import { Slot } from "@radix-ui/react-slot";
+import { motion, AnimatePresence } from "motion/react";
+import ReactMarkdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import { Prism } from "react-syntax-highlighter";
+import { SparklineChart, RadialAreaChart, RadialAreaSeries, RadialBarChart, RadialBarSeries, PieChart, PieArcSeries, AreaChart, AreaSeries, LinearYAxis, LinearXAxis, LineChart, LineSeries, BarChart, BarSeries } from "reaviz";
+import { findAndReplace } from "mdast-util-find-and-replace";
+import debounce from "lodash/debounce.js";
+import { useHotkeys } from "reakeys";
+import remarkGfm from "remark-gfm";
+import remarkYoutube from "remark-youtube";
+import remarkMath from "remark-math";
+import { isToday, isYesterday, isThisWeek, differenceInYears, format } from "date-fns";
+import { offset } from "@floating-ui/react";
+import { z } from "zod";
+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" })));
+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" }));
+const ChatContext = createContext({
+  sessions: [],
+  activeSessionId: null
+});
+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" }));
+const FileInput = ({
+  allowedFiles,
+  multiple,
+  onFileUpload,
+  isLoading,
+  disabled,
+  attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
+}) => {
+  const { theme } = useContext(ChatContext);
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        className: "hidden",
+        accept: allowedFiles.join(","),
+        multiple,
+        onChange: (e) => {
+          onFileUpload(e);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        title: "Upload",
+        variant: "text",
+        disabled: isLoading || disabled,
+        className: cn(theme.input.upload),
+        onClick: () => fileInputRef.current?.click(),
+        children: attachIcon
+      }
+    )
+  ] });
+};
+const chatTheme = {
+  base: "dark:text-white text-gray-500",
+  console: "flex w-full gap-4 h-full",
+  companion: "w-full h-full overflow-hidden",
+  empty: "text-center flex-1",
+  appbar: "flex p-5",
+  status: {
+    base: "py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30",
+    header: "flex items-center gap-2",
+    icon: {
+      base: "flex-shrink-0 w-4 h-4",
+      loading: "text-blue-500 dark:text-blue-400",
+      complete: "text-green-500 dark:text-green-400",
+      error: "text-red-500 dark:text-red-400"
+    },
+    text: {
+      base: "text-sm",
+      loading: "text-gray-600 dark:text-gray-400",
+      complete: "text-gray-600 dark:text-gray-400",
+      error: "text-red-600 dark:text-red-400"
+    },
+    steps: {
+      base: "mt-1 ml-6 space-y-0.5",
+      step: {
+        base: "flex items-center gap-2",
+        icon: "flex-shrink-0 w-3.5 h-3.5",
+        text: "text-sm",
+        loading: "text-gray-500 dark:text-gray-500",
+        complete: "text-gray-500 dark:text-gray-500",
+        error: "text-red-500 dark:text-red-400"
+      }
+    }
+  },
+  sessions: {
+    base: "overflow-auto",
+    console: "min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl",
+    companion: "w-full h-full",
+    group: "text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1",
+    create: "relative mb-4 rounded-[10px] text-white",
+    session: {
+      base: [
+        "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",
+        "dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200"
+      ].join(" "),
+      active: [
+        "border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ",
+        "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",
+        "[&_button]:opacity-100!"
+      ].join(" "),
+      delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!"
+    }
+  },
+  messages: {
+    base: "",
+    console: "flex flex-col mx-5 flex-1 min-h-0",
+    companion: "flex w-full h-full",
+    back: "self-start p-0 my-2",
+    inner: "flex-1 h-full flex flex-col",
+    title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
+      " "
+    ),
+    date: "text-xs whitespace-nowrap text-gray-400",
+    content: [
+      "mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200",
+      "dark:[&_hr]:bg-gray-800/60"
+    ].join(" "),
+    header: "flex justify-between items-center gap-2",
+    showMore: "mb-4",
+    message: {
+      base: "mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent",
+      question: [
+        "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",
+        "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
+      ].join(" "),
+      response: [
+        "relative data-[compact=false]:px-4 text-gray-900",
+        "dark:text-gray-100"
+      ].join(" "),
+      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",
+      cursor: "inline-block w-1 h-4 bg-current",
+      expand: "absolute bottom-1 right-1 z-10",
+      scrollToBottom: {
+        container: "absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10",
+        button: "rounded-full p-2 shadow-lg"
+      },
+      files: {
+        base: "mb-2 flex flex-wrap gap-3 ",
+        file: {
+          base: [
+            "flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer",
+            "dark:border-gray-700"
+          ].join(" "),
+          name: ["text-sm text-gray-500", "dark:text-gray-200"].join(" ")
+        }
+      },
+      sources: {
+        base: "my-4 flex flex-wrap gap-3",
+        source: {
+          base: [
+            "flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer",
+            "dark:border-gray-700"
+          ].join(" "),
+          companion: "flex-1 px-3 py-1.5",
+          image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
+          title: "text-md block",
+          url: "text-sm text-blue-400 underline"
+        }
+      },
+      markdown: {
+        hr: "my-4 border-t border-stroke-neutral-4",
+        copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
+        p: "mb-2",
+        a: "text-buttons-colors-link-primary-text-resting underline",
+        table: "table-auto w-full m-2",
+        th: "px-4 py-2 text-left font-bold border-b border-stroke-neutral-4",
+        td: "px-4 py-2",
+        code: "m-2 rounded-b relative",
+        inlineCode: "bg-gradient-neutral-200 p-1 rounded",
+        toolbar: "text-xs flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gradient-neutral-500/50",
+        li: "mb-2 ml-6",
+        ul: "mb-4 list-disc",
+        ol: "mb-4 list-decimal",
+        h1: "text-4xl font-bold mb-4 mt-6",
+        h2: "text-3xl font-bold mb-3 mt-5",
+        h3: "text-2xl font-bold mb-3 mt-4",
+        h4: "text-xl font-bold mb-2 mt-3",
+        h5: "text-lg font-bold mb-2 mt-2",
+        h6: "text-base font-bold mb-2 mt-2"
+      },
+      footer: {
+        base: "mt-3 flex gap-1.5",
+        copy: [
+          "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500",
+          "dark:hover:bg-gray-800 dark:hover:text-white text-gray-400"
+        ].join(" "),
+        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",
+        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",
+        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"
+      }
+    }
+  },
+  input: {
+    base: "flex mt-4 relative",
+    upload: ["px-5 py-2 text-gray-400 size-10", "dark:gray-500"].join(" "),
+    input: [
+      "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",
+      "dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40"
+    ].join(" "),
+    actions: {
+      base: "absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10",
+      send: [
+        "px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500",
+        "dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700"
+      ].join(" "),
+      stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
+    },
+    popup: {
+      base: [
+        "bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]",
+        "dark:bg-gray-900 dark:border-gray-700"
+      ].join(" "),
+      content: "overflow-y-auto max-h-[250px]",
+      item: [
+        "flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors",
+        "hover:bg-gray-100 dark:hover:bg-gray-800"
+      ].join(" "),
+      itemHighlighted: "bg-gray-100 dark:bg-gray-800",
+      itemIcon: [
+        "flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full",
+        "dark:text-gray-400"
+      ].join(" "),
+      itemContent: "flex flex-col min-w-0 flex-1",
+      itemLabel: [
+        "text-sm font-medium text-gray-900 truncate",
+        "dark:text-gray-100"
+      ].join(" "),
+      itemDescription: "text-xs text-gray-500 dark:text-gray-400 truncate",
+      itemShortcut: "text-xs text-gray-400 dark:text-gray-500 ml-auto",
+      empty: "px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400",
+      loading: [
+        "flex items-center justify-center gap-2 px-3 py-4 text-gray-500",
+        "dark:text-gray-400"
+      ].join(" ")
+    },
+    tag: {
+      base: [
+        "inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded",
+        "font-medium text-sm leading-[1.2] relative top-[1px]"
+      ].join(" "),
+      mention: [
+        "bg-blue-100 dark:bg-blue-900/30",
+        "text-blue-700 dark:text-blue-300"
+      ].join(" "),
+      command: [
+        "bg-purple-100 dark:bg-purple-900/30",
+        "text-purple-700 dark:text-purple-300"
+      ].join(" ")
+    },
+    editor: {
+      base: [
+        "outline-none w-full overflow-y-auto",
+        "text-inherit font-inherit",
+        "[&_.tiptap-paragraph]:m-0"
+      ].join(" "),
+      container: "px-3 py-2 pr-16",
+      placeholder: [
+        "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
+        "[&_.is-editor-empty]:before:text-gray-400",
+        "[&_.is-editor-empty]:before:dark:text-gray-500",
+        "[&_.is-editor-empty]:before:float-left",
+        "[&_.is-editor-empty]:before:h-0",
+        "[&_.is-editor-empty]:before:pointer-events-none"
+      ].join(" ")
+    }
+  },
+  suggestions: {
+    base: "flex flex-wrap gap-2 mt-4",
+    item: {
+      base: [
+        "rounded-full! max-w-full py-2 px-4",
+        "bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700",
+        "dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200",
+        "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0"
+      ].join(" "),
+      icon: "w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0",
+      text: "text-sm truncate"
+    }
+  },
+  chart: {
+    base: "my-6",
+    title: "text-sm font-medium mb-2 text-gray-600 dark:text-gray-400",
+    content: "flex items-center justify-center",
+    error: {
+      base: [
+        "my-4 p-4 border rounded",
+        "border-red-300 bg-red-50 text-red-500",
+        "dark:border-red-700 dark:bg-red-900/20"
+      ].join(" "),
+      title: "text-red-600 dark:text-red-400 text-sm font-medium mb-2",
+      code: "text-xs overflow-auto"
+    },
+    warning: {
+      base: [
+        "my-4 p-4 border rounded",
+        "border-yellow-300 bg-yellow-50 text-yellow-600",
+        "dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400"
+      ].join(" "),
+      title: "text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2"
+    }
+  },
+  component: {
+    base: "my-4"
+  }
+};
+const POPUP_STYLE = { zIndex: 9999 };
+const MentionList = forwardRef(
+  ({ items, command, triggerChar, config, query }, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const itemRefs = useRef([]);
+    const { theme } = useContext(ChatContext);
+    const popupTheme = theme?.input?.popup || chatTheme.input.popup;
+    useEffect(() => {
+      setSelectedIndex(0);
+    }, [items]);
+    useEffect(() => {
+      if (itemRefs.current[selectedIndex]) {
+        itemRefs.current[selectedIndex]?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    }, [selectedIndex]);
+    const selectItem = useCallback(
+      (index) => {
+        const item = items[index];
+        if (!item) return;
+        if (config.onSelect) {
+          config.onSelect(item, (text) => {
+            command({ id: item.id, label: text || item.label });
+          });
+        } else {
+          command({ id: item.id, label: item.label });
+        }
+      },
+      [items, command, config]
+    );
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          setSelectedIndex((prev) => prev <= 0 ? items.length - 1 : prev - 1);
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          setSelectedIndex((prev) => prev >= items.length - 1 ? 0 : prev + 1);
+          return true;
+        }
+        if (event.key === "Enter" || event.key === "Tab") {
+          event.preventDefault();
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    }));
+    const popupId = `mention-list-${triggerChar}`;
+    return /* @__PURE__ */ jsx(
+      List,
+      {
+        className: cn(popupTheme.base, popupTheme.content),
+        style: POPUP_STYLE,
+        role: "listbox",
+        id: popupId,
+        "aria-label": `${triggerChar === "@" ? "Mentions" : "Commands"} suggestions`,
+        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(
+          "div",
+          {
+            id: `${popupId}-option-${item.id}`,
+            role: "option",
+            "aria-selected": index === selectedIndex,
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            onClick: () => selectItem(index),
+            onMouseEnter: () => setSelectedIndex(index),
+            className: "cursor-pointer",
+            children: config.renderItem ? config.renderItem(item, index === selectedIndex) : /* @__PURE__ */ jsx(
+              DefaultItemRenderer,
+              {
+                item,
+                isHighlighted: index === selectedIndex,
+                popupTheme
+              }
+            )
+          },
+          item.id
+        ))
+      }
+    );
+  }
+);
+const DefaultItemRenderer = memo(
+  ({ item, isHighlighted, popupTheme }) => {
+    const shortcut = "shortcut" in item ? item.shortcut : void 0;
+    return /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        className: cn(
+          popupTheme.item,
+          isHighlighted && popupTheme.itemHighlighted
+        ),
+        dense: true,
+        start: item.icon ? /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemIcon), children: item.icon }) : void 0,
+        end: shortcut ? /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemShortcut), children: shortcut }) : void 0,
+        children: /* @__PURE__ */ jsxs("div", { className: cn(popupTheme.itemContent), children: [
+          /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemLabel), children: item.label }),
+          item.description && /* @__PURE__ */ jsx("span", { className: cn(popupTheme.itemDescription), children: item.description })
+        ] })
+      }
+    );
+  }
+);
+DefaultItemRenderer.displayName = "DefaultItemRenderer";
+MentionList.displayName = "MentionList";
+function updatePopupPosition(editor, element) {
+  const virtualElement = {
+    getBoundingClientRect: () => posToDOMRect(
+      editor.view,
+      editor.state.selection.from,
+      editor.state.selection.to
+    )
+  };
+  computePosition(virtualElement, element, {
+    placement: "bottom-start",
+    strategy: "absolute",
+    middleware: [shift(), flip()]
+  }).then(({ x, y, strategy }) => {
+    element.style.width = "max-content";
+    element.style.position = strategy;
+    element.style.left = `${x}px`;
+    element.style.top = `${y}px`;
+  });
+}
+function createSuggestionConfig(config, triggerChar, suggestionActiveRef) {
+  return {
+    char: triggerChar,
+    allowSpaces: false,
+    // Fetch and filter suggestion items based on query
+    items: async ({ query }) => {
+      if (config.onSearch) {
+        return await config.onSearch(query);
+      }
+      if (!config.items) return [];
+      if (!query) return config.items.slice(0, config.maxResults || 10);
+      const lowerQuery = query.toLowerCase();
+      return config.items.filter(
+        (item) => item.label.toLowerCase().includes(lowerQuery) || item.description?.toLowerCase().includes(lowerQuery)
+      ).slice(0, config.maxResults || 10);
+    },
+    // Render callbacks for managing the popup lifecycle
+    render: () => {
+      let component = null;
+      return {
+        // Called when suggestion is triggered
+        onStart: (props) => {
+          suggestionActiveRef.current = true;
+          component = new ReactRenderer(MentionList, {
+            props: {
+              ...props,
+              triggerChar,
+              config
+            },
+            editor: props.editor
+          });
+          if (!props.clientRect) {
+            return;
+          }
+          component.element.style.position = "absolute";
+          document.body.appendChild(component.element);
+          updatePopupPosition(props.editor, component.element);
+        },
+        // Called when query or items change
+        onUpdate: (props) => {
+          component?.updateProps({
+            ...props,
+            triggerChar,
+            config
+          });
+          if (!props.clientRect) {
+            return;
+          }
+          if (component?.element) {
+            updatePopupPosition(props.editor, component.element);
+          }
+        },
+        // Handle keyboard navigation (Escape closes popup)
+        onKeyDown: (props) => {
+          if (props.event.key === "Escape") {
+            component?.destroy();
+            return true;
+          }
+          return component?.ref?.onKeyDown(props) ?? false;
+        },
+        // Cleanup when suggestion is dismissed
+        onExit: () => {
+          suggestionActiveRef.current = false;
+          component?.element?.remove();
+          component?.destroy();
+        }
+      };
+    }
+  };
+}
+const RichTextInput = forwardRef(
+  ({
+    value = "",
+    placeholder = "Type a message...",
+    disabled = false,
+    autoFocus = true,
+    className,
+    minHeight = 24,
+    maxHeight = 200,
+    mentions,
+    commands,
+    onSubmit,
+    onChange
+  }, ref) => {
+    const { theme } = useContext(ChatContext);
+    const containerRef = useRef(null);
+    const suggestionActiveRef = useRef(false);
+    const extensions = useMemo(() => {
+      const exts = [
+        Document,
+        Paragraph.configure({
+          HTMLAttributes: {
+            class: "tiptap-paragraph"
+          }
+        }),
+        Text,
+        HardBreak,
+        Placeholder.configure({
+          placeholder,
+          emptyEditorClass: "is-editor-empty"
+        })
+      ];
+      if (mentions) {
+        exts.push(
+          Mention.configure({
+            HTMLAttributes: {
+              class: cn(theme?.input?.tag?.base, theme?.input?.tag?.mention)
+            },
+            suggestion: createSuggestionConfig(
+              mentions,
+              mentions.trigger || "@",
+              suggestionActiveRef
+            )
+          }).extend({
+            name: "mention"
+          })
+        );
+      }
+      if (commands) {
+        exts.push(
+          Mention.configure({
+            HTMLAttributes: {
+              class: cn(theme?.input?.tag?.base, theme?.input?.tag?.command)
+            },
+            suggestion: createSuggestionConfig(
+              commands,
+              commands.trigger || "/",
+              suggestionActiveRef
+            )
+          }).extend({
+            name: "command"
+          })
+        );
+      }
+      return exts;
+    }, [placeholder, mentions, commands, theme]);
+    const editor = useEditor({
+      extensions,
+      content: value ? `<p>${value}</p>` : "",
+      editable: !disabled,
+      immediatelyRender: false,
+      onUpdate: ({ editor: editor2 }) => {
+        const text = editor2.getText();
+        onChange?.(text);
+      },
+      editorProps: {
+        attributes: {
+          class: cn(
+            theme?.input?.editor?.base,
+            theme?.input?.editor?.placeholder
+          ),
+          style: `min-height: ${minHeight}px; max-height: ${maxHeight}px;`,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-placeholder": placeholder,
+          "aria-disabled": disabled ? "true" : "false",
+          tabindex: disabled ? "-1" : "0"
+        },
+        handleKeyDown: (view, event) => {
+          if (suggestionActiveRef.current) {
+            return false;
+          }
+          if (event.key === "Enter" && !event.shiftKey) {
+            const text = view.state.doc.textContent;
+            if (text.trim() && onSubmit) {
+              event.preventDefault();
+              onSubmit(text);
+              editor?.commands.clearContent();
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+    });
+    useEffect(() => {
+      if (autoFocus && editor) {
+        setTimeout(() => {
+          editor.commands.focus("end");
+        }, 0);
+      }
+    }, [editor, autoFocus]);
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        editor?.commands.focus();
+      },
+      getValue: () => {
+        return editor?.getText() || "";
+      },
+      setValue: (newValue) => {
+        editor?.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
+      },
+      insertText: (text) => {
+        editor?.commands.insertContent(text);
+      }
+    }));
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("relative w-full", className), children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+  }
+);
+RichTextInput.displayName = "RichTextInput";
+const ChatInput = forwardRef(
+  ({
+    allowedFiles,
+    placeholder = "Type a message...",
+    allowMultipleFiles = false,
+    defaultValue,
+    className,
+    sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
+    stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
+    attachIcon,
+    mentions,
+    commands,
+    minHeight = 24,
+    maxHeight = 200,
+    autoFocus = true,
+    onMessageChange
+  }, ref) => {
+    const {
+      theme,
+      isLoading,
+      disabled,
+      sendMessage,
+      stopMessage,
+      fileUpload,
+      activeSessionId
+    } = useContext(ChatContext);
+    const [message, setMessage] = useState(defaultValue || "");
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [activeSessionId, autoFocus]);
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        inputRef.current?.focus();
+      },
+      getValue: () => {
+        return inputRef.current?.getValue() || "";
+      },
+      setValue: (value) => {
+        setMessage(value);
+        inputRef.current?.setValue(value);
+        onMessageChange?.(value);
+      },
+      insertText: (text) => {
+        inputRef.current?.insertText(text);
+      }
+    }));
+    const handleSendMessage = useCallback(() => {
+      const currentMessage = inputRef.current?.getValue();
+      if (currentMessage.trim()) {
+        sendMessage?.(currentMessage);
+        setMessage("");
+        inputRef.current?.setValue("");
+      }
+    }, [sendMessage]);
+    const handleSubmit = useCallback(
+      (value) => {
+        if (value.trim()) {
+          sendMessage?.(value);
+          setMessage("");
+        }
+      },
+      [sendMessage]
+    );
+    const handleChange = useCallback(
+      (value) => {
+        setMessage(value);
+        onMessageChange?.(value);
+      },
+      [onMessageChange]
+    );
+    const handleFileUpload = (event) => {
+      const files = event.target.files;
+      if (files?.length && fileUpload) {
+        fileUpload(allowMultipleFiles ? Array.from(files) : files[0]);
+      }
+    };
+    const mentionsConfig = useMemo(
+      () => mentions ? { ...mentions, trigger: mentions.trigger || "@" } : void 0,
+      [mentions]
+    );
+    const commandsConfig = useMemo(
+      () => commands ? { ...commands, trigger: commands.trigger || "/" } : void 0,
+      [commands]
+    );
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn(theme.input.base, className), children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1", theme.input.input), children: [
+      /* @__PURE__ */ jsx(
+        RichTextInput,
+        {
+          ref: inputRef,
+          value: message,
+          onChange: handleChange,
+          onSubmit: handleSubmit,
+          placeholder,
+          disabled: isLoading || disabled,
+          autoFocus,
+          minHeight,
+          maxHeight,
+          className: theme.input.editor.container,
+          mentions: mentionsConfig,
+          commands: commandsConfig
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
+        allowedFiles?.length > 0 && /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            allowedFiles,
+            multiple: allowMultipleFiles,
+            onFileUpload: handleFileUpload,
+            isLoading,
+            disabled,
+            attachIcon
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(
+          Button,
+          {
+            title: "Stop",
+            className: cn(theme.input.actions.stop),
+            onClick: stopMessage,
+            disabled,
+            children: stopIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            title: "Send",
+            className: cn(theme.input.actions.send),
+            onClick: handleSendMessage,
+            disabled: isLoading || disabled,
+            children: sendIcon
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+const SessionEmpty = ({
+  children
+}) => {
+  const { theme } = useContext(ChatContext);
+  return /* @__PURE__ */ jsx("div", { className: cn(theme.empty), children });
+};
+const SessionMessagesHeader = ({ children }) => {
+  const { activeSession, theme } = useContext(ChatContext);
+  const Comp = children ? Slot : "header";
+  if (!activeSession) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.header), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { className: cn(theme.messages.title), children: /* @__PURE__ */ jsx(Ellipsis, { limit: 125, value: activeSession.title }) }),
+    /* @__PURE__ */ jsx(
+      DateFormat,
+      {
+        className: cn(theme.messages.date),
+        date: activeSession.createdAt
+      }
+    )
+  ] }) });
+};
+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" }));
+const SessionMessagePanel = ({
+  children,
+  allowBack = true
+}) => {
+  const { activeSessionId, theme, isCompact, selectSession, viewType } = useContext(ChatContext);
+  const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
+  return isVisible && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { translateX: "200%" },
+      animate: {
+        translateX: "0%",
+        transition: {
+          type: "tween",
+          ease: "linear",
+          duration: 0.2,
+          when: "beforeChildren"
+        }
+      },
+      exit: { translateX: "200%" },
+      className: cn(theme.messages.base, {
+        [theme.messages.companion]: isCompact,
+        [theme.messages.console]: !isCompact
+      }),
+      children: /* @__PURE__ */ jsxs("div", { className: cn(theme.messages.inner), children: [
+        allowBack && isCompact && viewType !== "chat" && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "text",
+            size: "small",
+            onClick: () => selectSession(null),
+            className: cn(theme.messages.back),
+            children: [
+              /* @__PURE__ */ jsx(SvgBack, {}),
+              "Back"
+            ]
+          }
+        ),
+        children
+      ] })
+    }
+  );
+};
+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" }));
+const dark = {
+  'code[class*="language-"]': {
+    "background": "#11111f",
+    "color": "#e2e8f0",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "2",
+    "OTabSize": "2",
+    "tabSize": "2",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none"
+  },
+  'pre[class*="language-"]': {
+    "background": "#11111f",
+    "color": "#e2e8f0",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "2",
+    "OTabSize": "2",
+    "tabSize": "2",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": "0",
+    "overflow": "auto"
+  },
+  'code[class*="language-"]::-moz-selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"] *::-moz-selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'pre[class*="language-"] *::-moz-selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"]::selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"] *::selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'pre[class*="language-"] *::selection': {
+    "background": "#1e293b",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    "padding": "0.2em 0.3em",
+    "borderRadius": "0.3em",
+    "whiteSpace": "normal"
+  },
+  "comment": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  "prolog": {
+    "color": "#64748b"
+  },
+  "cdata": {
+    "color": "#64748b"
+  },
+  "doctype": {
+    "color": "#e2e8f0"
+  },
+  "punctuation": {
+    "color": "#e2e8f0"
+  },
+  "entity": {
+    "color": "#3b82f6",
+    "cursor": "help"
+  },
+  "attr-name": {
+    "color": "#f59e0b"
+  },
+  "class-name": {
+    "color": "#f59e0b"
+  },
+  "boolean": {
+    "color": "#3b82f6"
+  },
+  "constant": {
+    "color": "#3b82f6"
+  },
+  "number": {
+    "color": "#3b82f6"
+  },
+  "atrule": {
+    "color": "#f59e0b"
+  },
+  "keyword": {
+    "color": "#f472b6"
+  },
+  "property": {
+    "color": "#3b82f6"
+  },
+  "tag": {
+    "color": "#3b82f6"
+  },
+  "symbol": {
+    "color": "#3b82f6"
+  },
+  "deleted": {
+    "color": "#ef4444"
+  },
+  "important": {
+    "color": "#f472b6"
+  },
+  "selector": {
+    "color": "#10b981"
+  },
+  "string": {
+    "color": "#10b981"
+  },
+  "char": {
+    "color": "#10b981"
+  },
+  "builtin": {
+    "color": "#10b981"
+  },
+  "inserted": {
+    "color": "#10b981"
+  },
+  "regex": {
+    "color": "#10b981"
+  },
+  "attr-value": {
+    "color": "#10b981"
+  },
+  "attr-value > .token.punctuation": {
+    "color": "#10b981"
+  },
+  "variable": {
+    "color": "#60a5fa"
+  },
+  "operator": {
+    "color": "#60a5fa"
+  },
+  "function": {
+    "color": "#60a5fa"
+  },
+  "url": {
+    "color": "#60a5fa"
+  },
+  "attr-value > .token.punctuation.attr-equals": {
+    "color": "#e2e8f0"
+  },
+  "special-attr > .token.attr-value > .token.value.css": {
+    "color": "#e2e8f0"
+  },
+  ".language-css .token.selector": {
+    "color": "#3b82f6"
+  },
+  ".language-css .token.property": {
+    "color": "#e2e8f0"
+  },
+  ".language-css .token.function": {
+    "color": "#60a5fa"
+  },
+  ".language-css .token.url > .token.function": {
+    "color": "#60a5fa"
+  },
+  ".language-css .token.url > .token.string.url": {
+    "color": "#10b981"
+  },
+  ".language-css .token.important": {
+    "color": "#f472b6"
+  },
+  ".language-css .token.atrule .token.rule": {
+    "color": "#f472b6"
+  },
+  ".language-javascript .token.operator": {
+    "color": "#f472b6"
+  },
+  ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
+    "color": "#ef4444"
+  },
+  ".language-json .token.operator": {
+    "color": "#e2e8f0"
+  },
+  ".language-json .token.null.keyword": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.url": {
+    "color": "#e2e8f0"
+  },
+  ".language-markdown .token.url > .token.operator": {
+    "color": "#e2e8f0"
+  },
+  ".language-markdown .token.url-reference.url > .token.string": {
+    "color": "#e2e8f0"
+  },
+  ".language-markdown .token.url > .token.content": {
+    "color": "#60a5fa"
+  },
+  ".language-markdown .token.url > .token.url": {
+    "color": "#60a5fa"
+  },
+  ".language-markdown .token.url-reference.url": {
+    "color": "#60a5fa"
+  },
+  ".language-markdown .token.blockquote.punctuation": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  ".language-markdown .token.hr.punctuation": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  ".language-markdown .token.code-snippet": {
+    "color": "#10b981"
+  },
+  ".language-markdown .token.bold .token.content": {
+    "color": "#f59e0b"
+  },
+  ".language-markdown .token.italic .token.content": {
+    "color": "#f472b6"
+  },
+  ".language-markdown .token.strike .token.content": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.strike .token.punctuation": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.list.punctuation": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.title.important > .token.punctuation": {
+    "color": "#3b82f6"
+  },
+  "bold": {
+    "fontWeight": "bold"
+  },
+  "italic": {
+    "fontStyle": "italic"
+  },
+  "namespace": {
+    "Opacity": "0.8"
+  },
+  "token.tab:not(:empty):before": {
+    "color": "#64748b",
+    "textShadow": "none"
+  },
+  "token.cr:before": {
+    "color": "#64748b",
+    "textShadow": "none"
+  },
+  "token.lf:before": {
+    "color": "#64748b",
+    "textShadow": "none"
+  },
+  "token.space:before": {
+    "color": "#64748b",
+    "textShadow": "none"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+    "marginRight": "0.4em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+    "background": "#1e293b",
+    "color": "#94a3b8",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+    "background": "#1e293b",
+    "color": "#94a3b8",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+    "background": "#1e293b",
+    "color": "#94a3b8",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  ".line-highlight.line-highlight": {
+    "background": "rgba(59, 130, 246, 0.08)"
+  },
+  ".line-highlight.line-highlight:before": {
+    "background": "#1e293b",
+    "color": "#e2e8f0",
+    "padding": "0.1em 0.6em",
+    "borderRadius": "0.3em",
+    "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+  },
+  ".line-highlight.line-highlight[data-end]:after": {
+    "background": "#1e293b",
+    "color": "#e2e8f0",
+    "padding": "0.1em 0.6em",
+    "borderRadius": "0.3em",
+    "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+  },
+  "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+    "backgroundColor": "rgba(59, 130, 246, 0.08)"
+  },
+  ".line-numbers.line-numbers .line-numbers-rows": {
+    "borderRightColor": "#1e293b"
+  },
+  ".command-line .command-line-prompt": {
+    "borderRightColor": "#1e293b"
+  },
+  ".line-numbers .line-numbers-rows > span:before": {
+    "color": "#64748b"
+  },
+  ".command-line .command-line-prompt > span:before": {
+    "color": "#64748b"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-1": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-5": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-9": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-2": {
+    "color": "#10b981"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-6": {
+    "color": "#10b981"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-10": {
+    "color": "#10b981"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-3": {
+    "color": "#60a5fa"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-7": {
+    "color": "#60a5fa"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-11": {
+    "color": "#60a5fa"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-4": {
+    "color": "#f472b6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-8": {
+    "color": "#f472b6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-12": {
+    "color": "#f472b6"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "rgba(239, 68, 68, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "rgba(239, 68, 68, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(239, 68, 68, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "rgba(16, 185, 129, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "rgba(16, 185, 129, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(16, 185, 129, 0.25)"
+  },
+  ".prism-previewer.prism-previewer:before": {
+    "borderColor": "#11111f"
+  },
+  ".prism-previewer-gradient.prism-previewer-gradient div": {
+    "borderColor": "#11111f",
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer-color.prism-previewer-color:before": {
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer-easing.prism-previewer-easing:before": {
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer.prism-previewer:after": {
+    "borderTopColor": "#11111f"
+  },
+  ".prism-previewer-flipped.prism-previewer-flipped.after": {
+    "borderBottomColor": "#11111f"
+  },
+  ".prism-previewer-angle.prism-previewer-angle:before": {
+    "background": "#1e293b"
+  },
+  ".prism-previewer-time.prism-previewer-time:before": {
+    "background": "#1e293b"
+  },
+  ".prism-previewer-easing.prism-previewer-easing": {
+    "background": "#1e293b"
+  },
+  ".prism-previewer-angle.prism-previewer-angle circle": {
+    "stroke": "#e2e8f0",
+    "strokeOpacity": "1"
+  },
+  ".prism-previewer-time.prism-previewer-time circle": {
+    "stroke": "#e2e8f0",
+    "strokeOpacity": "1"
+  },
+  ".prism-previewer-easing.prism-previewer-easing circle": {
+    "stroke": "#e2e8f0",
+    "fill": "transparent"
+  },
+  ".prism-previewer-easing.prism-previewer-easing path": {
+    "stroke": "#e2e8f0"
+  },
+  ".prism-previewer-easing.prism-previewer-easing line": {
+    "stroke": "#e2e8f0"
+  }
+};
+const light = {
+  'code[class*="language-"]': {
+    "background": "#fff",
+    "color": "#1e293b",
+    "textShadow": "none",
+    "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "2",
+    "OTabSize": "2",
+    "tabSize": "2",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none"
+  },
+  'pre[class*="language-"]': {
+    "background": "#fff",
+    "color": "#1e293b",
+    "textShadow": "none",
+    "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "2",
+    "OTabSize": "2",
+    "tabSize": "2",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": "0.5em 0",
+    "overflow": "auto",
+    "borderRadius": "0.3em",
+    "border": "1px solid #e2e8f0"
+  },
+  'code[class*="language-"]::-moz-selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"] *::-moz-selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'pre[class*="language-"] *::-moz-selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"]::selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'code[class*="language-"] *::selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  'pre[class*="language-"] *::selection': {
+    "background": "#e2e8f0",
+    "color": "inherit",
+    "textShadow": "none"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    "padding": "0.2em 0.3em",
+    "borderRadius": "0.3em",
+    "whiteSpace": "normal",
+    "background": "#f1f5f9"
+  },
+  "comment": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  "prolog": {
+    "color": "#64748b"
+  },
+  "cdata": {
+    "color": "#64748b"
+  },
+  "doctype": {
+    "color": "#1e293b"
+  },
+  "punctuation": {
+    "color": "#64748b"
+  },
+  "entity": {
+    "color": "#3b82f6",
+    "cursor": "help"
+  },
+  "attr-name": {
+    "color": "#ea580c"
+  },
+  "class-name": {
+    "color": "#ea580c"
+  },
+  "boolean": {
+    "color": "#3b82f6"
+  },
+  "constant": {
+    "color": "#3b82f6"
+  },
+  "number": {
+    "color": "#3b82f6"
+  },
+  "atrule": {
+    "color": "#ea580c"
+  },
+  "keyword": {
+    "color": "#9333ea"
+  },
+  "property": {
+    "color": "#3b82f6"
+  },
+  "tag": {
+    "color": "#3b82f6"
+  },
+  "symbol": {
+    "color": "#3b82f6"
+  },
+  "deleted": {
+    "color": "#dc2626"
+  },
+  "important": {
+    "color": "#9333ea"
+  },
+  "selector": {
+    "color": "#16a34a"
+  },
+  "string": {
+    "color": "#16a34a"
+  },
+  "char": {
+    "color": "#16a34a"
+  },
+  "builtin": {
+    "color": "#16a34a"
+  },
+  "inserted": {
+    "color": "#16a34a"
+  },
+  "regex": {
+    "color": "#16a34a"
+  },
+  "attr-value": {
+    "color": "#16a34a"
+  },
+  "attr-value > .token.punctuation": {
+    "color": "#16a34a"
+  },
+  "variable": {
+    "color": "#3b82f6"
+  },
+  "operator": {
+    "color": "#3b82f6"
+  },
+  "function": {
+    "color": "#3b82f6"
+  },
+  "url": {
+    "color": "#3b82f6"
+  },
+  "attr-value > .token.punctuation.attr-equals": {
+    "color": "#64748b"
+  },
+  "special-attr > .token.attr-value > .token.value.css": {
+    "color": "#1e293b"
+  },
+  ".language-css .token.selector": {
+    "color": "#3b82f6"
+  },
+  ".language-css .token.property": {
+    "color": "#1e293b"
+  },
+  ".language-css .token.function": {
+    "color": "#3b82f6"
+  },
+  ".language-css .token.url > .token.function": {
+    "color": "#3b82f6"
+  },
+  ".language-css .token.url > .token.string.url": {
+    "color": "#16a34a"
+  },
+  ".language-css .token.important": {
+    "color": "#9333ea"
+  },
+  ".language-css .token.atrule .token.rule": {
+    "color": "#9333ea"
+  },
+  ".language-javascript .token.operator": {
+    "color": "#9333ea"
+  },
+  ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
+    "color": "#dc2626"
+  },
+  ".language-json .token.operator": {
+    "color": "#1e293b"
+  },
+  ".language-json .token.null.keyword": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.url": {
+    "color": "#1e293b"
+  },
+  ".language-markdown .token.url > .token.operator": {
+    "color": "#1e293b"
+  },
+  ".language-markdown .token.url-reference.url > .token.string": {
+    "color": "#1e293b"
+  },
+  ".language-markdown .token.url > .token.content": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.url > .token.url": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.url-reference.url": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.blockquote.punctuation": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  ".language-markdown .token.hr.punctuation": {
+    "color": "#64748b",
+    "fontStyle": "italic"
+  },
+  ".language-markdown .token.code-snippet": {
+    "color": "#16a34a"
+  },
+  ".language-markdown .token.bold .token.content": {
+    "color": "#ea580c"
+  },
+  ".language-markdown .token.italic .token.content": {
+    "color": "#9333ea"
+  },
+  ".language-markdown .token.strike .token.content": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.strike .token.punctuation": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.list.punctuation": {
+    "color": "#3b82f6"
+  },
+  ".language-markdown .token.title.important > .token.punctuation": {
+    "color": "#3b82f6"
+  },
+  "bold": {
+    "fontWeight": "bold"
+  },
+  "italic": {
+    "fontStyle": "italic"
+  },
+  "namespace": {
+    "Opacity": "0.8"
+  },
+  "token.tab:not(:empty):before": {
+    "color": "#94a3b8"
+  },
+  "token.cr:before": {
+    "color": "#94a3b8"
+  },
+  "token.lf:before": {
+    "color": "#94a3b8"
+  },
+  "token.space:before": {
+    "color": "#94a3b8"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+    "marginRight": "0.4em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+    "background": "#f1f5f9",
+    "color": "#475569",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+    "background": "#f1f5f9",
+    "color": "#475569",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+    "background": "#f1f5f9",
+    "color": "#475569",
+    "padding": "0.1em 0.4em",
+    "borderRadius": "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+    "background": "#3b82f6",
+    "color": "#ffffff"
+  },
+  ".line-highlight.line-highlight": {
+    "background": "rgba(59, 130, 246, 0.08)"
+  },
+  ".line-highlight.line-highlight:before": {
+    "background": "#f1f5f9",
+    "color": "#1e293b",
+    "padding": "0.1em 0.6em",
+    "borderRadius": "0.3em",
+    "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
+  },
+  ".line-highlight.line-highlight[data-end]:after": {
+    "background": "#f1f5f9",
+    "color": "#1e293b",
+    "padding": "0.1em 0.6em",
+    "borderRadius": "0.3em",
+    "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
+  },
+  "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+    "backgroundColor": "rgba(59, 130, 246, 0.08)"
+  },
+  ".line-numbers.line-numbers .line-numbers-rows": {
+    "borderRightColor": "#e2e8f0"
+  },
+  ".command-line .command-line-prompt": {
+    "borderRightColor": "#e2e8f0"
+  },
+  ".line-numbers .line-numbers-rows > span:before": {
+    "color": "#94a3b8"
+  },
+  ".command-line .command-line-prompt > span:before": {
+    "color": "#94a3b8"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-1": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-5": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-9": {
+    "color": "#3b82f6"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-2": {
+    "color": "#16a34a"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-6": {
+    "color": "#16a34a"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-10": {
+    "color": "#16a34a"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-3": {
+    "color": "#ea580c"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-7": {
+    "color": "#ea580c"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-11": {
+    "color": "#ea580c"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-4": {
+    "color": "#9333ea"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-8": {
+    "color": "#9333ea"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-12": {
+    "color": "#9333ea"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "rgba(220, 38, 38, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+    "backgroundColor": "rgba(220, 38, 38, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(220, 38, 38, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "rgba(22, 163, 74, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+    "backgroundColor": "rgba(22, 163, 74, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+    "backgroundColor": "rgba(22, 163, 74, 0.25)"
+  },
+  ".prism-previewer.prism-previewer:before": {
+    "borderColor": "#fff"
+  },
+  ".prism-previewer-gradient.prism-previewer-gradient div": {
+    "borderColor": "#fff",
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer-color.prism-previewer-color:before": {
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer-easing.prism-previewer-easing:before": {
+    "borderRadius": "0.3em"
+  },
+  ".prism-previewer.prism-previewer:after": {
+    "borderTopColor": "#fff"
+  },
+  ".prism-previewer-flipped.prism-previewer-flipped.after": {
+    "borderBottomColor": "#fff"
+  },
+  ".prism-previewer-angle.prism-previewer-angle:before": {
+    "background": "#f1f5f9"
+  },
+  ".prism-previewer-time.prism-previewer-time:before": {
+    "background": "#f1f5f9"
+  },
+  ".prism-previewer-easing.prism-previewer-easing": {
+    "background": "#f1f5f9"
+  },
+  ".prism-previewer-angle.prism-previewer-angle circle": {
+    "stroke": "#1e293b",
+    "strokeOpacity": "1"
+  },
+  ".prism-previewer-time.prism-previewer-time circle": {
+    "stroke": "#1e293b",
+    "strokeOpacity": "1"
+  },
+  ".prism-previewer-easing.prism-previewer-easing circle": {
+    "stroke": "#1e293b",
+    "fill": "transparent"
+  },
+  ".prism-previewer-easing.prism-previewer-easing path": {
+    "stroke": "#1e293b"
+  },
+  ".prism-previewer-easing.prism-previewer-easing line": {
+    "stroke": "#1e293b"
+  }
+};
+const CodeHighlighter = ({
+  className,
+  children,
+  inlineClassName,
+  copyClassName,
+  copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
+  language,
+  toolbarClassName,
+  theme = dark,
+  ...props
+}) => {
+  const match = language?.match(/language-(\w+)/);
+  const lang = match ? match[1] : "text";
+  const isInline = !match;
+  const handleCopy = (text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      console.log("Text copied to clipboard");
+    }).catch((err) => {
+      console.error("Could not copy text: ", err);
+    });
+  };
+  if (isInline) {
+    return /* @__PURE__ */ jsx("code", { className: cn(inlineClassName), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(toolbarClassName), children: [
+      /* @__PURE__ */ jsx("div", { children: lang }),
+      copyIcon && /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: cn(copyClassName),
+          size: "small",
+          variant: "text",
+          title: "Copy code",
+          onClick: () => handleCopy(children),
+          children: copyIcon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Prism, { language: lang, style: theme, children })
+  ] });
+};
+const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsx("table", { ...props, children });
+const TableHeaderCell = ({ children, ...props }) => /* @__PURE__ */ jsx("th", { ...props, children });
+const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsx("td", { ...props, children });
+const Markdown = ({
+  children,
+  remarkPlugins,
+  rehypePlugins = [rehypeRaw, rehypeKatex],
+  theme: themeProp,
+  customComponents
+}) => {
+  const { theme: contextTheme, markdownComponents } = useContext(ChatContext);
+  const theme = themeProp || contextTheme;
+  const components = useMemo(() => {
+    const defaultComponents = {
+      code: ({ className, children: children2, ...props }) => /* @__PURE__ */ jsx(
+        CodeHighlighter,
+        {
+          ...props,
+          language: cn(className),
+          inlineClassName: cn(theme.messages.message.markdown.inlineCode),
+          className: cn(theme.messages.message.markdown.code, className),
+          copyClassName: cn(theme.messages.message.markdown.copy),
+          toolbarClassName: cn(theme.messages.message.markdown.toolbar),
+          children: children2
+        }
+      ),
+      table: (props) => /* @__PURE__ */ jsx(
+        TableComponent,
+        {
+          ...props,
+          className: cn(theme.messages.message.markdown.table)
+        }
+      ),
+      th: (props) => /* @__PURE__ */ jsx(
+        TableHeaderCell,
+        {
+          ...props,
+          className: cn(theme.messages.message.markdown.th)
+        }
+      ),
+      td: (props) => /* @__PURE__ */ jsx(
+        TableDataCell,
+        {
+          ...props,
+          className: cn(theme.messages.message.markdown.td)
+        }
+      ),
+      a: (props) => /* @__PURE__ */ jsx("a", { ...props, className: cn(theme.messages.message.markdown.a) }),
+      hr: (props) => /* @__PURE__ */ jsx("hr", { ...props, className: cn(theme.messages.message.markdown.hr) }),
+      p: (props) => /* @__PURE__ */ jsx("p", { ...props, className: cn(theme.messages.message.markdown.p) }),
+      li: (props) => /* @__PURE__ */ jsx("li", { ...props, className: cn(theme.messages.message.markdown.li) }),
+      ul: (props) => /* @__PURE__ */ jsx("ul", { ...props, className: cn(theme.messages.message.markdown.ul) }),
+      ol: (props) => /* @__PURE__ */ jsx("ol", { ...props, className: cn(theme.messages.message.markdown.ol) }),
+      h1: (props) => /* @__PURE__ */ jsx("h1", { ...props, className: cn(theme.messages.message.markdown.h1) }),
+      h2: (props) => /* @__PURE__ */ jsx("h2", { ...props, className: cn(theme.messages.message.markdown.h2) }),
+      h3: (props) => /* @__PURE__ */ jsx("h3", { ...props, className: cn(theme.messages.message.markdown.h3) }),
+      h4: (props) => /* @__PURE__ */ jsx("h4", { ...props, className: cn(theme.messages.message.markdown.h4) }),
+      h5: (props) => /* @__PURE__ */ jsx("h5", { ...props, className: cn(theme.messages.message.markdown.h5) }),
+      h6: (props) => /* @__PURE__ */ jsx("h6", { ...props, className: cn(theme.messages.message.markdown.h6) }),
+      // 'redact' is a custom element created by remarkRedact, not a standard
+      // HTML tag, so it falls outside react-markdown's Components type.
+      redact: ((props) => /* @__PURE__ */ jsx(
+        Redact,
+        {
+          value: props["data-redact-value"] || props.children,
+          allowToggle: true,
+          tooltipText: `${props["data-redact-name"] || "Sensitive"} information - Click to toggle`
+        }
+      ))
+    };
+    return {
+      ...defaultComponents,
+      ...markdownComponents,
+      ...customComponents
+    };
+  }, [theme, markdownComponents, customComponents]);
+  return /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      components,
+      children
+    }
+  );
+};
+const ComponentError = ({
+  variant = "error",
+  title,
+  message,
+  code
+}) => {
+  const { theme } = useContext(ChatContext);
+  const styles = variant === "warning" ? theme.chart.warning : theme.chart.error;
+  return /* @__PURE__ */ jsxs("div", { className: styles.base, children: [
+    title && /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
+    message && /* @__PURE__ */ jsx("div", { children: message }),
+    code && "code" in styles && /* @__PURE__ */ jsx("pre", { className: styles.code, children: /* @__PURE__ */ jsx("code", { children: code }) })
+  ] });
+};
+const ChartRenderer = ({
+  config,
+  className
+}) => {
+  const { theme } = useContext(ChatContext);
+  const { type, data, width = 400, height = 300, title } = config;
+  const chartElement = useMemo(() => {
+    const chartData = data.filter(
+      (d) => typeof d.data === "number"
+    ).map((d) => ({
+      key: d.key,
+      data: d.data
+    }));
+    if (!chartData || chartData.length === 0) {
+      return /* @__PURE__ */ jsx(ComponentError, { variant: "warning", message: "No chart data available" });
+    }
+    for (const point of chartData) {
+      if (typeof point.data !== "number" || isNaN(point.data)) {
+        return /* @__PURE__ */ jsx(
+          ComponentError,
+          {
+            message: `Invalid data point: ${JSON.stringify(point)}`
+          }
+        );
+      }
+    }
+    const chartProps = {
+      width,
+      height,
+      data: chartData
+    };
+    try {
+      switch (type) {
+        case "bar":
+          return /* @__PURE__ */ jsx(BarChart, { ...chartProps, series: /* @__PURE__ */ jsx(BarSeries, {}) });
+        case "line":
+          return /* @__PURE__ */ jsx(
+            LineChart,
+            {
+              ...chartProps,
+              xAxis: /* @__PURE__ */ jsx(LinearXAxis, { type: "category" }),
+              yAxis: /* @__PURE__ */ jsx(LinearYAxis, { type: "value" }),
+              series: /* @__PURE__ */ jsx(LineSeries, {})
+            }
+          );
+        case "area":
+          return /* @__PURE__ */ jsx(
+            AreaChart,
+            {
+              ...chartProps,
+              xAxis: /* @__PURE__ */ jsx(LinearXAxis, { type: "category" }),
+              yAxis: /* @__PURE__ */ jsx(LinearYAxis, { type: "value" }),
+              series: /* @__PURE__ */ jsx(AreaSeries, {})
+            }
+          );
+        case "pie":
+          return /* @__PURE__ */ jsx(
+            PieChart,
+            {
+              width,
+              height,
+              data: chartData,
+              series: /* @__PURE__ */ jsx(PieArcSeries, {})
+            }
+          );
+        case "radialBar":
+          return /* @__PURE__ */ jsx(
+            RadialBarChart,
+            {
+              width,
+              height,
+              data: chartData,
+              series: /* @__PURE__ */ jsx(RadialBarSeries, {})
+            }
+          );
+        case "radialArea":
+          return /* @__PURE__ */ jsx(
+            RadialAreaChart,
+            {
+              width,
+              height,
+              data: chartData,
+              series: /* @__PURE__ */ jsx(RadialAreaSeries, {})
+            }
+          );
+        case "sparkline":
+          return /* @__PURE__ */ jsx(SparklineChart, { width, height, data: chartData });
+        default:
+          return /* @__PURE__ */ jsx(ComponentError, { message: `Unknown chart type: ${type}` });
+      }
+    } catch (error) {
+      return /* @__PURE__ */ jsx(ComponentError, { message: `Chart render error: ${String(error)}` });
+    }
+  }, [type, data, width, height]);
+  return /* @__PURE__ */ jsxs("div", { className: cn(theme.chart.base, className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: theme.chart.title, children: title }),
+    /* @__PURE__ */ jsx("div", { className: theme.chart.content, children: chartElement })
+  ] });
+};
+const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
+const remarkCve = () => (tree) => {
+  findAndReplace(tree, [
+    [
+      CVE_REGEX,
+      (value) => ({
+        type: "link",
+        url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${value.trim()}`,
+        children: [{ type: "text", value: value.trim() }]
+      })
+    ]
+  ]);
+};
+const remarkComponent = (_options = {}) => {
+  return () => {
+  };
+};
+function remarkRedact(matchers) {
+  return () => (tree) => {
+    if (!tree || !matchers || matchers.length === 0) {
+      return;
+    }
+    const patterns = [];
+    for (const { name, pattern, validate } of matchers) {
+      patterns.push([
+        pattern,
+        (value) => {
+          if (validate && !validate(value)) {
+            return false;
+          }
+          return {
+            type: "html",
+            value: `<redact data-redact-name="${name}" data-redact-value="${value.replace(/"/g, "&quot;")}">${value}</redact>`
+          };
+        }
+      ]);
+    }
+    if (patterns.length > 0) {
+      try {
+        findAndReplace(tree, patterns);
+      } catch (err) {
+        console.warn("Redact plugin error:", err);
+      }
+    }
+  };
+}
+const ssnMatcher = {
+  name: "SSN",
+  pattern: /\b\d{3}-\d{2}-\d{4}\b/g
+};
+const creditCardMatcher = {
+  name: "Credit Card",
+  pattern: /\b(?:\d[ -]*?){13,19}\b/g,
+  validate: (match) => {
+    if (/(?:years?|year|yr|yrs|old|age|phone|tel|call)/.test(match)) {
+      return false;
+    }
+    const cardNumber = match.replace(/[ -]/g, "");
+    return cardNumber.length >= 13 && cardNumber.length <= 19;
+  }
+};
+const bitcoinMatcher = {
+  name: "Bitcoin",
+  pattern: /\b[13][a-km-zA-HJ-NP-Z1-9]{25,34}\b/g
+};
+const commonRedactMatchers = [
+  ssnMatcher,
+  creditCardMatcher,
+  bitcoinMatcher
+];
+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" }));
+const DefaultFileRenderer$2 = lazy(() => Promise.resolve().then(() => DefaultFileRenderer$1));
+const CSVFileRenderer$2 = lazy(() => Promise.resolve().then(() => CSVFileRenderer$1));
+const ImageFileRenderer$2 = lazy(() => Promise.resolve().then(() => ImageFileRenderer$1));
+const PDFFileRenderer$2 = lazy(() => Promise.resolve().then(() => PDFFileRenderer$1));
+const FILE_TYPE_RENDERER_MAP = {
+  "image/": ImageFileRenderer$2,
+  "text/csv": CSVFileRenderer$2,
+  "application/pdf": PDFFileRenderer$2
+};
+const MessageFile = ({
+  name,
+  type,
+  url,
+  limit = 100,
+  fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
+}) => {
+  const { theme } = useContext(ChatContext);
+  const FileRenderer = useMemo(() => {
+    const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type?.startsWith(key)) ?? "default";
+    return FILE_TYPE_RENDERER_MAP[Renderer] || DefaultFileRenderer$2;
+  }, [type]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(theme.messages.message.files.file.base),
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(FileRenderer, { name, url, fileIcon, limit }) })
+    }
+  );
+};
+const DefaultFileRenderer = ({
+  name,
+  limit = 100,
+  fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
+}) => /* @__PURE__ */ jsxs("figure", { className: "flex items-center gap-2", children: [
+  fileIcon,
+  name && /* @__PURE__ */ jsx("figcaption", { className: cn("file-name-class"), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) })
+] });
+const DefaultFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: DefaultFileRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const sanitizeSVGCell = (cell) => {
+  const trimmed = cell.trim();
+  const escaped = trimmed.replace(/"/g, '""');
+  const prefix = /^[=+\-@]/.test(trimmed) ? "'" : "";
+  const needsQuotes = /[",\n\r]/.test(escaped) || prefix;
+  return needsQuotes ? `"${prefix}${escaped}"` : escaped;
+};
+const parseCSV = (csvString) => {
+  try {
+    const rows = csvString.split("\n");
+    return rows.map((row) => row.split(",").map((cell) => sanitizeSVGCell(cell)));
+  } catch (error) {
+    console.error("Error parsing CSV:", error);
+    throw new Error("Failed to parse CSV file.");
+  }
+};
+const SvgDownload = (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-cloud-download", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }), /* @__PURE__ */ React.createElement("path", { d: "M12 12v9" }), /* @__PURE__ */ React.createElement("path", { d: "m8 17 4 4 4-4" }));
+const CSVFileRenderer = ({ name, url, fileIcon }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [csvData, setCsvData] = useState([]);
+  const [error, setError] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const modalRef = useRef(null);
+  useEffect(() => {
+    const fetchCsvData = async () => {
+      try {
+        setIsLoading(true);
+        const response = await fetch(url);
+        const data = parseCSV(await response.text());
+        setCsvData(data);
+      } catch {
+        setError("Failed to load CSV file.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCsvData();
+  }, [url]);
+  const toggleModal = () => {
+    setIsModalOpen((prev) => !prev);
+  };
+  const handleClickOutside = (event) => {
+    if (modalRef.current && !modalRef.current.contains(event.target)) {
+      setIsModalOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (isModalOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isModalOpen]);
+  const downloadCSV = () => {
+    if (csvData.length === 0) return;
+    const csvContent = csvData.map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url2 = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url2;
+    link.setAttribute("download", `${name || "data"}`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const renderTable = (data, maxRows) => /* @__PURE__ */ jsxs(
+    motion.table,
+    {
+      layout: true,
+      className: "w-full",
+      transition: { type: "spring", stiffness: 100, damping: 20 },
+      children: [
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-gray-200 dark:bg-gray-800 z-10", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { className: "py-4 px-6", children: "#" }),
+          data[0].map((header, index) => /* @__PURE__ */ jsx("th", { className: "py-4 px-6", children: header }, `header-${index}`))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.slice(1, maxRows).map((row, rowIndex) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: "border-b border-panel-accent light:border-gray-700 hover:bg-panel-accent hover:light:bg-gray-700/40 transition-colors text-base",
+            children: [
+              /* @__PURE__ */ jsx("td", { className: "py-4 px-6", children: rowIndex + 1 }),
+              row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { className: "py-4 px-6", children: cell }, `cell-${rowIndex}-${cellIndex}`))
+            ]
+          },
+          `row-${rowIndex}`
+        )) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "csv-icon flex items-center", children: [
+        fileIcon,
+        name && /* @__PURE__ */ jsx("figcaption", { className: "ml-1", children: name })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "csv-icon flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "text", onClick: downloadCSV, children: /* @__PURE__ */ jsx(SvgDownload, {}) }),
+        /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "text", onClick: toggleModal, children: /* @__PURE__ */ jsx(SvgCopy, {}) })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "error-message", children: error }),
+    isLoading && !csvData && /* @__PURE__ */ jsx("div", { className: "text-text-secondary", children: "Loading..." }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isModalOpen && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "fixed inset-0 bg-black/70 flex justify-center items-center z-50",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            ref: modalRef,
+            className: "bg-white dark:bg-gray-900 rounded-md w-11/12 h-5/6 overflow-auto",
+            initial: { scale: 0.8 },
+            animate: { scale: 1 },
+            exit: { scale: 0.8 },
+            transition: { duration: 0.3 },
+            children: !error && csvData.length > 0 && renderTable(csvData)
+          }
+        )
+      }
+    ) })
+  ] });
+};
+const CSVFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: CSVFileRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const ImageFileRenderer = ({ url }) => /* @__PURE__ */ jsx("img", { src: url, alt: "Image", className: "size-10" });
+const ImageFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ImageFileRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const PDFFileRenderer = ({ name, url, fileIcon }) => /* @__PURE__ */ jsxs("figure", { className: "csv-icon flex items-center gap-2", onClick: () => window.open(url, "_blank"), children: [
+  fileIcon,
+  name && /* @__PURE__ */ jsx("figcaption", { className: "file-name", children: name })
+] });
+const PDFFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: PDFFileRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const MessageFiles = memo(({ files, children }) => {
+  const { theme } = useContext(ChatContext);
+  const Comp = children ? Slot : MessageFile;
+  const [expanded, setExpanded] = useState(false);
+  const { imageFiles, otherFiles } = useMemo(() => {
+    if (!files || files.length === 0) {
+      return {
+        imageFiles: [],
+        otherFiles: []
+      };
+    }
+    return files.reduce(
+      (acc, file) => {
+        if (file.type?.startsWith("image/")) {
+          acc.imageFiles.push(file);
+        } else {
+          acc.otherFiles.push(file);
+        }
+        return acc;
+      },
+      {
+        imageFiles: [],
+        otherFiles: []
+      }
+    );
+  }, [files]);
+  if (!files || files.length === 0) {
+    return null;
+  }
+  const maxImageLength = 3;
+  const truncateImages = !expanded && imageFiles.length > maxImageLength;
+  const renderImageFiles = (images) => {
+    return truncateImages ? images.slice(0, maxImageLength).map((image, index) => /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        className: index === 0 ? "col-span-2 row-span-2" : "relative",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image.url,
+              alt: image.name,
+              className: "relative w-full h-full object-cover rounded-lg"
+            }
+          ),
+          index === maxImageLength - 1 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-50 rounded-lg cursor-pointer",
+              onClick: () => setExpanded(true),
+              children: [
+                "+",
+                (imageFiles.length - maxImageLength).toLocaleString()
+              ]
+            }
+          )
+        ]
+      },
+      index
+    )) : images.map((image, index) => /* @__PURE__ */ jsx(Comp, { ...image, children }, index));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        theme.messages.message.files.base,
+        truncateImages ? "grid grid-rows-2 grid-flow-col gap-2 w-1/3" : ""
+      ),
+      children: [
+        imageFiles.length > 0 && renderImageFiles(imageFiles),
+        otherFiles.length > 0 && otherFiles.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index))
+      ]
+    }
+  );
+});
+MessageFiles.displayName = "MessageFiles";
+const MessageQuestion = memo(
+  ({ children, ...props }) => {
+    const { theme, remarkPlugins } = useContext(ChatContext);
+    const { question, files } = props;
+    const Comp = children ? Slot : "div";
+    const [expanded, setExpanded] = useState(false);
+    const isLong = question.length > 500;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(theme.messages.message.question, {
+          [theme.messages.message.overlay]: isLong && !expanded
+        }),
+        ...props,
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(MessageFiles, { files }),
+          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, theme, children: question }),
+          isLong && !expanded && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "link",
+              size: "small",
+              className: theme.messages.message.expand,
+              onClick: () => setExpanded(true),
+              children: "Show more"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+MessageQuestion.displayName = "MessageQuestion";
+const MessageResponse = memo(
+  ({ response, isLoading, children }) => {
+    const { theme, isCompact, remarkPlugins } = useContext(ChatContext);
+    const Comp = children ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-compact": isCompact,
+        className: cn(theme.messages.message.response),
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, theme, children: response }),
+          isLoading && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: cn(theme.messages.message.cursor),
+              animate: { opacity: [1, 0] },
+              transition: {
+                duration: 0.7,
+                repeat: Infinity,
+                repeatType: "reverse"
+              }
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+const MessageSource = ({ title, url, image, limit = 50 }) => {
+  const { theme, isCompact } = useContext(ChatContext);
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(theme.messages.message.sources.source.base, {
+        [theme.messages.message.sources.source.companion]: isCompact
+      }),
+      onClick: () => {
+        if (url) {
+          window.open(url, "_blank");
+        }
+      },
+      children: [
+        image && /* @__PURE__ */ jsx("img", { src: image, alt: title, className: cn(theme.messages.message.sources.source.image) }),
+        (title || url) && /* @__PURE__ */ jsxs("figcaption", { children: [
+          title && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsx(Ellipsis, { value: title, limit }) }),
+          url && /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(theme.messages.message.sources.source.url), children: url })
+        ] })
+      ]
+    }
+  );
+};
+const MessageSources = memo(
+  ({ sources, children }) => {
+    const { theme } = useContext(ChatContext);
+    const Comp = children ? Slot : MessageSource;
+    if (!sources || sources.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.sources.base), children: sources.map((source, index) => /* @__PURE__ */ jsx(Comp, { ...source, children }, index)) });
+  }
+);
+MessageSources.displayName = "MessageSources";
+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" }));
+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" }));
+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" }));
+const MessageActions = memo(
+  ({ children, ...props }) => {
+    const { theme } = useContext(ChatContext);
+    const {
+      question,
+      response,
+      copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
+      thumbsUpIcon = /* @__PURE__ */ jsx(SvgThumbsUp, {}),
+      thumbsDownIcon = /* @__PURE__ */ jsx(SvgThumbsDown, {}),
+      refreshIcon = /* @__PURE__ */ jsx(SvgRefresh, {}),
+      onCopy,
+      onUpvote,
+      onDownvote,
+      onRefresh
+    } = props;
+    const Comp = children ? Slot : "div";
+    const handleCopy = useCallback((text) => {
+      navigator.clipboard.writeText(text).then(() => {
+        console.log("Text copied to clipboard");
+      }).catch((err) => {
+        console.error("Could not copy text: ", err);
+      });
+    }, []);
+    const handleCopyClick = useCallback(() => {
+      if (onCopy) {
+        onCopy();
+      } else {
+        handleCopy(`${question}${response ? `
+${response}` : ""}`);
+      }
+    }, [onCopy, handleCopy, question, response]);
+    return (copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && /* @__PURE__ */ jsx(Comp, { className: cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      copyIcon && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Copy question and response",
+          className: cn(theme.messages.message.footer.copy),
+          onClick: handleCopyClick,
+          children: copyIcon
+        }
+      ),
+      thumbsUpIcon && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Upvote",
+          className: cn(theme.messages.message.footer.upvote),
+          onClick: onUpvote,
+          children: thumbsUpIcon
+        }
+      ),
+      thumbsDownIcon && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Downvote",
+          className: cn(theme.messages.message.footer.downvote),
+          onClick: onDownvote,
+          children: thumbsDownIcon
+        }
+      ),
+      refreshIcon && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Refresh",
+          className: cn(theme.messages.message.footer.refresh),
+          onClick: onRefresh,
+          children: refreshIcon
+        }
+      )
+    ] }) });
+  }
+);
+MessageActions.displayName = "MessageActions";
+const messageVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.3
+    }
+  }
+};
+const SessionMessage = memo(
+  ({ conversation, isLast, children, className }) => {
+    const { theme, isLoading } = useContext(ChatContext);
+    return /* @__PURE__ */ jsx(motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base, className), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        MessageQuestion,
+        {
+          question: conversation.question,
+          files: conversation.files
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageResponse,
+        {
+          response: conversation.response,
+          isLoading: isLast && isLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(MessageSources, { sources: conversation.sources }),
+      /* @__PURE__ */ jsx(
+        MessageActions,
+        {
+          question: conversation.question,
+          response: conversation.response
+        }
+      )
+    ] }) }) }, conversation.id);
+  }
+);
+SessionMessage.displayName = "SessionMessage";
+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" }));
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.07,
+      when: "beforeChildren"
+    }
+  }
+};
+const SessionMessages = ({
+  children,
+  newSessionContent,
+  limit = 10,
+  className,
+  showMoreText = "Show more",
+  autoScroll = true,
+  showLoadMoreButton = false,
+  showScrollBottomButton,
+  loadMoreButtonDisabled,
+  onScroll,
+  onLoadMore
+}) => {
+  const { activeSession, theme } = useContext(ChatContext);
+  const contentRef = useRef(null);
+  const messagesRef = useRef(null);
+  const [isAnimating, setIsAnimating] = useState(true);
+  const [iAtBottom, setIsAtBottom] = useState(true);
+  useEffect(() => {
+    if (!contentRef.current || !showScrollBottomButton) {
+      return;
+    }
+    const handleScroll = debounce(() => {
+      if (contentRef.current) {
+        setIsAtBottom(
+          contentRef.current.scrollHeight - contentRef.current.clientHeight === contentRef.current.scrollTop
+        );
+      }
+    }, 50);
+    const currentRef = contentRef.current;
+    currentRef.addEventListener("scroll", handleScroll);
+    return () => currentRef.removeEventListener("scroll", handleScroll);
+  }, [showScrollBottomButton]);
+  useEffect(() => {
+    if (contentRef.current && autoScroll) {
+      requestAnimationFrame(
+        () => contentRef.current.scrollTop = contentRef.current.scrollHeight
+      );
+    }
+  }, [activeSession, autoScroll, isAnimating]);
+  const handleShowMore = () => {
+    showNext(limit);
+    requestAnimationFrame(() => contentRef.current.scrollTop = 0);
+  };
+  const handleScrollToBottom = () => {
+    if (contentRef.current) {
+      contentRef.current.scrollTo({
+        top: contentRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  };
+  const reversedConvos = useMemo(
+    () => [...activeSession?.conversations ?? []].reverse(),
+    [activeSession]
+  );
+  const { data, hasMore, showNext } = useInfinityList({
+    items: reversedConvos,
+    size: limit
+  });
+  const reReversedConvo = useMemo(() => [...data].reverse(), [data]);
+  const convosToRender = limit ? reReversedConvo : activeSession?.conversations;
+  if (!activeSession) {
+    return /* @__PURE__ */ jsx(SessionEmpty, { children: newSessionContent });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1 overflow-y-hidden", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(theme.messages.content, className, "h-full"),
+        ref: contentRef,
+        id: activeSession?.id,
+        onScrollCapture: onScroll,
+        children: [
+          (showLoadMoreButton || hasMore) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: loadMoreButtonDisabled,
+              variant: "outline",
+              className: cn(theme.messages.showMore),
+              fullWidth: true,
+              onClick: onLoadMore ?? handleShowMore,
+              children: showMoreText
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: messagesRef,
+              variants: containerVariants,
+              initial: "hidden",
+              animate: "visible",
+              onAnimationComplete: () => requestAnimationFrame(() => {
+                setIsAnimating(false);
+                if (contentRef.current && autoScroll) {
+                  contentRef.current.scrollTop = contentRef.current.scrollHeight;
+                }
+              }),
+              children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsx(
+                SessionMessage,
+                {
+                  conversation,
+                  isLast: index === convosToRender.length - 1
+                },
+                conversation.id
+              ))
+            },
+            activeSession?.id
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !iAtBottom && showScrollBottomButton && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { y: 100, opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+        exit: { y: 100, opacity: 0 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: theme.messages?.message?.scrollToBottom?.container,
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: handleScrollToBottom,
+            className: theme.messages?.message?.scrollToBottom?.button,
+            size: "small",
+            children: /* @__PURE__ */ jsx(SvgArrowDown, {})
+          }
+        )
+      }
+    ) })
+  ] });
+};
+const useDimensions = () => {
+  const [ref, setRef] = useState(null);
+  const [width, setWidth] = useState(void 0);
+  const rafId = useRef(null);
+  const observe = useCallback((element) => {
+    if (element) setRef(element);
+  }, []);
+  useEffect(() => {
+    if (!ref) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+      rafId.current = requestAnimationFrame(() => {
+        for (const entry of entries) {
+          setWidth(entry.contentRect.width);
+        }
+        rafId.current = null;
+      });
+    });
+    resizeObserver.observe(ref);
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return { width, observe };
+};
+const defaultRemarkPlugins = [remarkGfm, remarkYoutube, remarkMath];
+const Chat = ({
+  children,
+  viewType = "console",
+  sessions,
+  onSelectSession,
+  onDeleteSession,
+  onSendMessage,
+  onStopMessage,
+  onFileUpload,
+  isLoading,
+  activeSessionId,
+  theme: customTheme = chatTheme,
+  onNewSession,
+  remarkPlugins = defaultRemarkPlugins,
+  markdownComponents,
+  components: componentCatalog2,
+  disabled,
+  style,
+  className
+}) => {
+  const theme = useComponentTheme("chat", customTheme);
+  const [internalActiveSessionID, setInternalActiveSessionID] = useState(activeSessionId);
+  const { width, observe } = useDimensions();
+  const isCompact = viewType === "companion" || width && width < 767;
+  useEffect(() => {
+    setInternalActiveSessionID(activeSessionId);
+  }, [activeSessionId]);
+  const handleSelectSession = useCallback(
+    (sessionId) => {
+      setInternalActiveSessionID(sessionId);
+      onSelectSession?.(sessionId);
+    },
+    [onSelectSession]
+  );
+  const handleDeleteSession = useCallback(
+    (sessionId) => {
+      setInternalActiveSessionID(void 0);
+      onDeleteSession?.(sessionId);
+    },
+    [onDeleteSession]
+  );
+  const handleCreateNewSession = useCallback(() => {
+    setInternalActiveSessionID(void 0);
+    onNewSession?.();
+  }, [onNewSession]);
+  useHotkeys([
+    {
+      name: "Create new session",
+      category: "Chat",
+      keys: "meta+shift+s",
+      callback: (event) => {
+        event.preventDefault();
+        handleCreateNewSession();
+      }
+    }
+  ]);
+  const activeSession = useMemo(
+    () => sessions.find((session) => session.id === internalActiveSessionID),
+    [sessions, internalActiveSessionID]
+  );
+  const mergedRemarkPlugins = useMemo(() => {
+    if (!componentCatalog2) return remarkPlugins;
+    return [...remarkPlugins, componentCatalog2.remarkPlugin];
+  }, [remarkPlugins, componentCatalog2]);
+  const mergedMarkdownComponents = useMemo(() => {
+    if (!componentCatalog2) return markdownComponents;
+    return {
+      ...componentCatalog2.components,
+      ...markdownComponents
+    };
+  }, [markdownComponents, componentCatalog2]);
+  const contextValue = useMemo(
+    () => ({
+      sessions,
+      activeSession,
+      remarkPlugins: mergedRemarkPlugins,
+      markdownComponents: mergedMarkdownComponents,
+      theme,
+      disabled,
+      isLoading,
+      isCompact,
+      viewType,
+      activeSessionId: internalActiveSessionID,
+      selectSession: handleSelectSession,
+      deleteSession: handleDeleteSession,
+      createSession: handleCreateNewSession,
+      sendMessage: onSendMessage,
+      stopMessage: onStopMessage,
+      fileUpload: onFileUpload
+    }),
+    [
+      isLoading,
+      isCompact,
+      viewType,
+      disabled,
+      theme,
+      mergedRemarkPlugins,
+      mergedMarkdownComponents,
+      sessions,
+      activeSession,
+      internalActiveSessionID,
+      handleSelectSession,
+      handleDeleteSession,
+      handleCreateNewSession,
+      onSendMessage,
+      onStopMessage,
+      onFileUpload
+    ]
+  );
+  return /* @__PURE__ */ jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: observe,
+      className: cn(className, theme.base, {
+        [theme.companion]: isCompact,
+        [theme.console]: !isCompact
+      }),
+      style,
+      children
+    }
+  ) }) });
+};
+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" })));
+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" }));
+const SessionListItem = memo(
+  ({
+    children,
+    session,
+    deletable = true,
+    limit = 100,
+    deleteIcon = /* @__PURE__ */ jsx(SvgTrash, {}),
+    chatIcon = /* @__PURE__ */ jsx(SvgChat, { className: "mr-2" })
+  }) => {
+    const { activeSessionId, selectSession, deleteSession, theme } = useContext(ChatContext);
+    const Comp = children ? Slot : ListItem;
+    const handleSelect = useCallback(() => {
+      selectSession?.(session.id);
+    }, [selectSession, session.id]);
+    const handleDelete = useCallback(
+      (e) => {
+        e.stopPropagation();
+        deleteSession(session.id);
+      },
+      [deleteSession, session.id]
+    );
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        dense: true,
+        disableGutters: true,
+        active: session.id === activeSessionId,
+        className: cn(theme.sessions.session.base, {
+          [theme.sessions.session.active]: session.id === activeSessionId
+        }),
+        onClick: handleSelect,
+        start: chatIcon,
+        end: /* @__PURE__ */ jsx(Fragment, { children: deletable && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            variant: "text",
+            onClick: handleDelete,
+            className: cn(theme.sessions.session.delete),
+            children: deleteIcon
+          }
+        ) }),
+        children: children || /* @__PURE__ */ jsx(Ellipsis, { value: session.title, limit })
+      }
+    );
+  }
+);
+SessionListItem.displayName = "SessionListItem";
+const SessionsList = ({
+  children,
+  templates
+}) => {
+  const { theme, isCompact, activeSessionId, createSession } = useContext(ChatContext);
+  const isVisible = isCompact && !activeSessionId;
+  return (!isCompact || isVisible) && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { translateX: "-100%" },
+      animate: {
+        translateX: "0%",
+        transition: {
+          type: "tween",
+          ease: "linear",
+          duration: 0.2,
+          when: "beforeChildren"
+        }
+      },
+      exit: { translateX: "-100%" },
+      className: cn(theme.sessions.base, {
+        [theme.sessions.companion]: isCompact,
+        [theme.sessions.console]: !isCompact
+      }),
+      children: [
+        /* @__PURE__ */ jsx(List, { children }),
+        templates && !activeSessionId && /* @__PURE__ */ jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsx("div", { onClick: () => createSession?.(), children: /* @__PURE__ */ jsx(
+          SessionListItem,
+          {
+            session: {
+              id: template.id,
+              title: template.title,
+              conversations: []
+            },
+            chatIcon: template.icon,
+            deletable: false
+          }
+        ) }, template.id)) })
+      ]
+    }
+  );
+};
+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" })));
+const NewSessionButton = ({
+  children,
+  newSessionText = "New Session"
+}) => {
+  const { theme, createSession, disabled } = useContext(ChatContext);
+  const Comp = children ? Slot : Button;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      fullWidth: true,
+      disableMargins: true,
+      color: "primary",
+      start: /* @__PURE__ */ jsx(SvgPlus, {}),
+      className: cn(theme.sessions.create),
+      disabled,
+      onClick: createSession,
+      children: children || newSessionText
+    }
+  ) });
+};
+const sortOrder = [
+  "Today",
+  "Yesterday",
+  "Last Week",
+  "Last Month",
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+  "Last Year"
+];
+const sortOrderMap = new Map(sortOrder.map((v, i) => [v, i]));
+function groupSessionsByDate(sessions) {
+  const grouped = {};
+  const now = /* @__PURE__ */ new Date();
+  sessions.forEach((session) => {
+    const createdAt = session.createdAt ? new Date(session.createdAt) : null;
+    let group;
+    if (!createdAt || isNaN(createdAt.getTime())) {
+      group = "Last Year";
+    } else if (isToday(createdAt)) {
+      group = "Today";
+    } else if (isYesterday(createdAt)) {
+      group = "Yesterday";
+    } else if (isThisWeek(createdAt)) {
+      group = "Last Week";
+    } else if (differenceInYears(now, createdAt) === 0) {
+      const monthDiff = now.getMonth() - createdAt.getMonth();
+      const yearDiff = now.getFullYear() - createdAt.getFullYear();
+      const adjustedMonthDiff = yearDiff > 0 ? monthDiff + 12 : monthDiff;
+      if (adjustedMonthDiff === 1 || adjustedMonthDiff === 0 && now.getDate() > createdAt.getDate()) {
+        group = "Last Month";
+      } else {
+        group = format(createdAt, "MMMM");
+      }
+    } else {
+      group = "Last Year";
+    }
+    if (!grouped[group]) grouped[group] = [];
+    grouped[group].push(session);
+  });
+  const sortedGroups = Object.keys(grouped).sort(
+    (a, b) => (sortOrderMap.get(a) ?? 999) - (sortOrderMap.get(b) ?? 999)
+  );
+  return sortedGroups.map((heading) => ({
+    heading,
+    sessions: grouped[heading].sort(
+      (a, b) => (b.createdAt ? new Date(b.createdAt).getTime() : 0) - (a.createdAt ? new Date(a.createdAt).getTime() : 0)
+    )
+  }));
+}
+const SessionsGroup = ({
+  heading,
+  children
+}) => {
+  const { theme } = useContext(ChatContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    heading && /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        disableGutters: true,
+        disablePadding: true,
+        className: cn(theme.sessions.group),
+        children: heading
+      }
+    ),
+    children
+  ] });
+};
+const SessionGroups = ({ children }) => {
+  const { sessions } = useContext(ChatContext);
+  const groups = useMemo(() => groupSessionsByDate(sessions), [sessions]);
+  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)) });
+};
+const AppBar = ({
+  content,
+  theme: customTheme = chatTheme
+}) => {
+  const theme = useComponentTheme("chat", customTheme);
+  return /* @__PURE__ */ jsx("div", { className: cn(theme.appbar), children: content });
+};
+const DEFAULT_MODIFIERS = [offset({ mainAxis: 0, crossAxis: -40 })];
+const ChatBubble = memo(
+  ({
+    children,
+    bubbleContent,
+    position = "right-end",
+    modifiers = DEFAULT_MODIFIERS,
+    className
+  }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const handleOpen = useCallback(() => setIsOpen(true), []);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    const handleToggle = useCallback(() => setIsOpen((prev) => !prev), []);
+    const renderContent = useCallback(() => /* @__PURE__ */ jsx(Fragment, { children }), [children]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ConnectedOverlay,
+        {
+          placement: position,
+          modifiers,
+          reference: ref.current,
+          open: isOpen,
+          onOpen: handleOpen,
+          onClose: handleClose,
+          content: renderContent
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref, className, onClick: handleToggle, children: bubbleContent })
+    ] });
+  }
+);
+const ChatSuggestion = ({
+  content,
+  onClick
+}) => {
+  const { theme, disabled, isLoading } = useContext(ChatContext);
+  const handleClick = () => {
+    if (disabled || isLoading) return;
+    onClick?.(content);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      disableMargins: true,
+      className: cn(theme.suggestions.item.base, {
+        "opacity-50 cursor-not-allowed": disabled || isLoading
+      }),
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      children: /* @__PURE__ */ jsx("span", { className: cn(theme.suggestions.item.text), children: content })
+    }
+  );
+};
+const ChatSuggestions = ({
+  suggestions,
+  className,
+  onSuggestionClick,
+  children
+}) => {
+  const { theme } = useContext(ChatContext);
+  if (!suggestions || suggestions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(theme.suggestions.base, className), children: suggestions.map((suggestion) => {
+    if (children && isValidElement(children)) {
+      return cloneElement(children, {
+        key: suggestion.id,
+        ...suggestion,
+        onClick: onSuggestionClick
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      ChatSuggestion,
+      {
+        ...suggestion,
+        onClick: onSuggestionClick
+      },
+      suggestion.id
+    );
+  }) });
+};
+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" }));
+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" }));
+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 }));
+const StatusIcon = ({
+  state,
+  className,
+  colorClassName
+}) => {
+  switch (state) {
+    case "loading":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: { rotate: 360 },
+          transition: { duration: 1, repeat: Infinity, ease: "linear" },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgSpinner, { className: "w-full h-full" })
+        }
+      );
+    case "complete":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { scale: 0, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { type: "spring", stiffness: 500, damping: 25 },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgCheck, { className: "w-full h-full" })
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { scale: 0, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { type: "spring", stiffness: 500, damping: 25 },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgError, { className: "w-full h-full" })
+        }
+      );
+  }
+};
+const MessageStatusItem = ({ step }) => {
+  const { theme: chatTheme$1 } = useContext(ChatContext);
+  const theme = (chatTheme$1 ?? chatTheme).status.steps.step;
+  const stepStatus = step.status || "loading";
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, x: -10 },
+      animate: { opacity: 1, x: 0 },
+      transition: { duration: 0.2 },
+      className: theme.base,
+      children: [
+        /* @__PURE__ */ jsx(
+          StatusIcon,
+          {
+            state: stepStatus,
+            className: theme.icon,
+            colorClassName: theme[stepStatus]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              theme.text,
+              stepStatus === "loading" && theme.loading,
+              stepStatus === "complete" && theme.complete,
+              stepStatus === "error" && theme.error
+            ),
+            children: step.text
+          }
+        )
+      ]
+    }
+  );
+};
+const MessageStatus = ({
+  status = "loading",
+  text,
+  steps,
+  icon,
+  className,
+  children
+}) => {
+  const { theme: chatTheme$1 } = useContext(ChatContext);
+  const theme = (chatTheme$1 ?? chatTheme).status;
+  const Comp = children ? Slot : "div";
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.2 },
+      children: /* @__PURE__ */ jsx(Comp, { className: cn(theme.base, className), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: theme.header, children: [
+          icon || /* @__PURE__ */ jsx(
+            StatusIcon,
+            {
+              state: status,
+              className: theme.icon.base,
+              colorClassName: theme.icon[status]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                theme.text.base,
+                status === "loading" && theme.text.loading,
+                status === "complete" && theme.text.complete,
+                status === "error" && theme.text.error
+              ),
+              children: text
+            }
+          )
+        ] }),
+        steps && steps.length > 0 && /* @__PURE__ */ jsx("div", { className: theme.steps.base, children: steps.map((step) => /* @__PURE__ */ jsx(MessageStatusItem, { step }, step.id)) })
+      ] }) })
+    }
+  ) });
+};
+var AgUiEventType = /* @__PURE__ */ ((AgUiEventType2) => {
+  AgUiEventType2["RUN_STARTED"] = "RUN_STARTED";
+  AgUiEventType2["RUN_FINISHED"] = "RUN_FINISHED";
+  AgUiEventType2["RUN_ERROR"] = "RUN_ERROR";
+  AgUiEventType2["STEP_STARTED"] = "STEP_STARTED";
+  AgUiEventType2["STEP_FINISHED"] = "STEP_FINISHED";
+  AgUiEventType2["TEXT_MESSAGE_START"] = "TEXT_MESSAGE_START";
+  AgUiEventType2["TEXT_MESSAGE_CONTENT"] = "TEXT_MESSAGE_CONTENT";
+  AgUiEventType2["TEXT_MESSAGE_END"] = "TEXT_MESSAGE_END";
+  AgUiEventType2["TEXT_MESSAGE_CHUNK"] = "TEXT_MESSAGE_CHUNK";
+  AgUiEventType2["TOOL_CALL_START"] = "TOOL_CALL_START";
+  AgUiEventType2["TOOL_CALL_ARGS"] = "TOOL_CALL_ARGS";
+  AgUiEventType2["TOOL_CALL_END"] = "TOOL_CALL_END";
+  AgUiEventType2["TOOL_CALL_RESULT"] = "TOOL_CALL_RESULT";
+  AgUiEventType2["TOOL_CALL_CHUNK"] = "TOOL_CALL_CHUNK";
+  AgUiEventType2["STATE_SNAPSHOT"] = "STATE_SNAPSHOT";
+  AgUiEventType2["STATE_DELTA"] = "STATE_DELTA";
+  AgUiEventType2["MESSAGES_SNAPSHOT"] = "MESSAGES_SNAPSHOT";
+  AgUiEventType2["RAW"] = "RAW";
+  AgUiEventType2["CUSTOM"] = "CUSTOM";
+  return AgUiEventType2;
+})(AgUiEventType || {});
+function generateId() {
+  return Math.random().toString(36).substring(2, 11);
+}
+function addConversationToSession(sessions, sessionId, conversation) {
+  return sessions.map((s) => {
+    if (s.id !== sessionId) return s;
+    return {
+      ...s,
+      updatedAt: conversation.createdAt,
+      conversations: [...s.conversations, conversation]
+    };
+  });
+}
+function updateConversationInSession(sessions, sessionId, conversationId, response) {
+  return sessions.map((s) => {
+    if (s.id !== sessionId) return s;
+    return {
+      ...s,
+      updatedAt: /* @__PURE__ */ new Date(),
+      conversations: s.conversations.map((c) => {
+        if (c.id !== conversationId) return c;
+        return { ...c, response, updatedAt: /* @__PURE__ */ new Date() };
+      })
+    };
+  });
+}
+function sessionsToAgUiMessages(session) {
+  const messages = [];
+  for (const conv of session.conversations) {
+    messages.push({
+      id: `${conv.id}-q`,
+      role: "user",
+      content: conv.question
+    });
+    if (conv.response) {
+      messages.push({
+        id: `${conv.id}-r`,
+        role: "assistant",
+        content: conv.response
+      });
+    }
+  }
+  return messages;
+}
+function parseSSELine(line) {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith(":")) return null;
+  if (trimmed.startsWith("data:")) {
+    const data = trimmed.slice(5).trim();
+    if (data === "[DONE]") return null;
+    try {
+      return JSON.parse(data);
+    } catch (err) {
+      return new Error(
+        `Failed to parse AG-UI event: ${err instanceof Error ? err.message : err}`
+      );
+    }
+  }
+  return null;
+}
+async function* parseSSE(response, signal) {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error("Response body is not readable");
+  }
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (!signal.aborted) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        const result = parseSSELine(line);
+        if (result !== null) yield result;
+      }
+    }
+    if (buffer.trim()) {
+      const result = parseSSELine(buffer);
+      if (result !== null) yield result;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+function useAgUi({
+  agent,
+  initialSessions = [],
+  initialActiveSessionId,
+  tools = [],
+  context = [],
+  forwardedProps = {},
+  headers = {},
+  onToolCall,
+  onError,
+  onEvent
+}) {
+  const [sessions, setSessions] = useState(initialSessions);
+  const [activeSessionId, setActiveSessionId] = useState(
+    initialActiveSessionId
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const abortRef = useRef(null);
+  const onToolCallRef = useRef(onToolCall);
+  onToolCallRef.current = onToolCall;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+  const selectSession = useCallback((sessionId) => {
+    setActiveSessionId(sessionId);
+  }, []);
+  const deleteSession = useCallback(
+    (sessionId) => {
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+      if (activeSessionId === sessionId) {
+        setActiveSessionId(void 0);
+      }
+    },
+    [activeSessionId]
+  );
+  const createSession = useCallback(() => {
+    const id = generateId();
+    const newSession = {
+      id,
+      title: "New Session",
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date(),
+      conversations: []
+    };
+    setSessions((prev) => [newSession, ...prev]);
+    setActiveSessionId(id);
+  }, []);
+  const stopMessage = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setIsLoading(false);
+  }, []);
+  const sendMessage = useCallback(
+    async (message) => {
+      abortRef.current?.abort();
+      const abortController = new AbortController();
+      abortRef.current = abortController;
+      let sessionId = activeSessionId;
+      if (!sessionId) {
+        sessionId = generateId();
+        const newSession = {
+          id: sessionId,
+          title: message.slice(0, 50),
+          createdAt: /* @__PURE__ */ new Date(),
+          updatedAt: /* @__PURE__ */ new Date(),
+          conversations: []
+        };
+        setSessions((prev) => [newSession, ...prev]);
+        setActiveSessionId(sessionId);
+      }
+      const conversationId = generateId();
+      const now = /* @__PURE__ */ new Date();
+      setSessions(
+        (prev) => addConversationToSession(prev, sessionId, {
+          id: conversationId,
+          question: message,
+          createdAt: now
+        })
+      );
+      setIsLoading(true);
+      const currentSession = [
+        ...sessions.find((s) => s.id === sessionId)?.conversations ?? []
+      ];
+      const historyMessages = sessionsToAgUiMessages({
+        conversations: currentSession
+      });
+      historyMessages.push({
+        id: `${conversationId}-q`,
+        role: "user",
+        content: message
+      });
+      const runId = generateId();
+      const input = {
+        threadId: sessionId,
+        runId,
+        messages: historyMessages,
+        tools,
+        context,
+        state: null,
+        forwardedProps
+      };
+      try {
+        const response = await fetch(agent, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream",
+            ...headers
+          },
+          body: JSON.stringify(input),
+          signal: abortController.signal
+        });
+        if (!response.ok) {
+          throw new Error(
+            `Agent returned ${response.status}: ${response.statusText}`
+          );
+        }
+        let responseText = "";
+        const toolCalls = /* @__PURE__ */ new Map();
+        const updateResponse = (text) => {
+          setSessions(
+            (prev) => updateConversationInSession(prev, sessionId, conversationId, text)
+          );
+        };
+        for await (const eventOrError of parseSSE(
+          response,
+          abortController.signal
+        )) {
+          if (eventOrError instanceof Error) {
+            onErrorRef.current?.(eventOrError);
+            continue;
+          }
+          const event = eventOrError;
+          onEventRef.current?.(event);
+          switch (event.type) {
+            case AgUiEventType.TEXT_MESSAGE_CONTENT: {
+              responseText += event.delta;
+              updateResponse(responseText);
+              break;
+            }
+            case AgUiEventType.TEXT_MESSAGE_CHUNK: {
+              if (event.delta) {
+                responseText += event.delta;
+                updateResponse(responseText);
+              }
+              break;
+            }
+            case AgUiEventType.TOOL_CALL_START: {
+              toolCalls.set(event.toolCallId, {
+                name: event.toolCallName,
+                args: ""
+              });
+              break;
+            }
+            case AgUiEventType.TOOL_CALL_ARGS: {
+              const tc = toolCalls.get(event.toolCallId);
+              if (tc) {
+                tc.args += event.delta;
+              }
+              break;
+            }
+            case AgUiEventType.TOOL_CALL_END: {
+              const tc = toolCalls.get(event.toolCallId);
+              if (tc && onToolCallRef.current) {
+                try {
+                  await onToolCallRef.current({
+                    toolCallId: event.toolCallId,
+                    toolCallName: tc.name,
+                    args: tc.args
+                  });
+                } catch {
+                }
+              }
+              toolCalls.delete(event.toolCallId);
+              break;
+            }
+            case AgUiEventType.RUN_ERROR: {
+              const err = new Error(event.message);
+              onErrorRef.current?.(err);
+              break;
+            }
+            case AgUiEventType.RUN_FINISHED: {
+              break;
+            }
+          }
+        }
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          return;
+        }
+        const error = err instanceof Error ? err : new Error(String(err));
+        onErrorRef.current?.(error);
+      } finally {
+        if (abortRef.current === abortController) {
+          abortRef.current = null;
+        }
+        setIsLoading(false);
+      }
+    },
+    [activeSessionId, agent, context, forwardedProps, headers, sessions, tools]
+  );
+  return {
+    sessions,
+    activeSessionId,
+    isLoading,
+    selectSession,
+    deleteSession,
+    createSession,
+    sendMessage,
+    stopMessage
+  };
+}
+function validateSpec(raw, definitions) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: "Failed to parse component JSON",
+        raw
+      }
+    };
+  }
+  const specArray = Array.isArray(parsed) ? parsed : [parsed];
+  const validated = [];
+  for (const item of specArray) {
+    const result = validateSingleSpec(item, raw, definitions);
+    if (!result.ok) {
+      return { ok: false, error: result.error };
+    }
+    validated.push(result.spec);
+  }
+  return { ok: true, specs: validated };
+}
+function validateSingleSpec(item, raw, definitions) {
+  if (!item || typeof item !== "object" || !("type" in item)) {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: 'Component spec must be an object with a "type" field',
+        raw
+      }
+    };
+  }
+  const spec = item;
+  if (typeof spec.type !== "string") {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: '"type" must be a string',
+        raw
+      }
+    };
+  }
+  const componentType = spec.type;
+  const definition = definitions[componentType];
+  if (!definition) {
+    return {
+      ok: false,
+      error: {
+        type: "unknown_component",
+        message: `Unknown component "${componentType}". Available: ${Object.keys(definitions).join(", ")}`,
+        raw,
+        componentType
+      }
+    };
+  }
+  const props = spec.props && typeof spec.props === "object" && !Array.isArray(spec.props) ? spec.props : {};
+  const parseResult = definition.props.safeParse(props);
+  if (!parseResult.success) {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_props",
+        message: `Invalid props for "${componentType}": ${parseResult.error.issues.map((i) => i.message).join(", ")}`,
+        raw,
+        componentType,
+        issues: parseResult.error.issues.map((i) => ({
+          message: i.message,
+          path: i.path
+        }))
+      }
+    };
+  }
+  let validatedChildren;
+  if (spec.children) {
+    if (!Array.isArray(spec.children)) {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_json",
+          message: '"children" must be an array',
+          raw,
+          componentType
+        }
+      };
+    }
+    validatedChildren = [];
+    for (const child of spec.children) {
+      const childResult = validateSingleSpec(child, raw, definitions);
+      if (!childResult.ok) {
+        return childResult;
+      }
+      validatedChildren.push(childResult.spec);
+    }
+  }
+  return {
+    ok: true,
+    spec: {
+      type: componentType,
+      props: parseResult.data,
+      ...validatedChildren ? { children: validatedChildren } : {}
+    }
+  };
+}
+const ComponentRenderer = ({
+  raw,
+  definitions,
+  options
+}) => {
+  const { theme, sendMessage } = useContext(ChatContext);
+  const result = useMemo(
+    () => validateSpec(raw, definitions),
+    [raw, definitions]
+  );
+  if (!result.ok) {
+    const error = result.error;
+    const custom = options?.onError?.(error);
+    if (custom !== void 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: custom });
+    }
+    return /* @__PURE__ */ jsx(
+      ComponentError,
+      {
+        title: errorTitle(error.type),
+        message: error.message,
+        code: error.raw
+      }
+    );
+  }
+  const specs = result.specs;
+  return /* @__PURE__ */ jsx("div", { className: theme.component?.base, children: specs.map((spec, index) => /* @__PURE__ */ jsx(
+    SpecRenderer,
+    {
+      spec,
+      definitions,
+      options,
+      sendMessage
+    },
+    `${spec.type}-${index}-${stableKey(spec)}`
+  )) });
+};
+const SpecRenderer = ({
+  spec,
+  definitions,
+  options,
+  sendMessage
+}) => {
+  const definition = definitions[spec.type];
+  if (!definition) {
+    const error = {
+      type: "unknown_component",
+      message: `Unknown component "${spec.type}"`,
+      raw: JSON.stringify(spec),
+      componentType: spec.type
+    };
+    const custom = options?.onError?.(error);
+    if (custom !== void 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: custom });
+    }
+    return /* @__PURE__ */ jsx(ComponentError, { title: errorTitle(error.type), message: error.message });
+  }
+  const RenderedComponent = definition.component;
+  const children = spec.children?.map((child, index) => /* @__PURE__ */ jsx(
+    SpecRenderer,
+    {
+      spec: child,
+      definitions,
+      options,
+      sendMessage
+    },
+    `${child.type}-${index}-${stableKey(child)}`
+  ));
+  return /* @__PURE__ */ jsx(SpecErrorBoundary, { spec, options, children: /* @__PURE__ */ jsx(RenderedComponent, { ...spec.props, sendMessage, children }) });
+};
+class SpecErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      const { spec, options } = this.props;
+      const catalogError = {
+        type: "render_error",
+        message: `Error rendering "${spec.type}": ${this.state.error.message}`,
+        raw: JSON.stringify(spec),
+        componentType: spec.type
+      };
+      const custom = options?.onError?.(catalogError);
+      if (custom !== void 0) {
+        return /* @__PURE__ */ jsx(Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsx(
+        ComponentError,
+        {
+          title: errorTitle(catalogError.type),
+          message: catalogError.message
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+function stableKey(spec) {
+  const str = JSON.stringify({
+    t: spec.type,
+    p: spec.props,
+    c: spec.children
+  });
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = h * 31 + str.charCodeAt(i) | 0;
+  }
+  return (h >>> 0).toString(36);
+}
+function errorTitle(type) {
+  switch (type) {
+    case "unknown_component":
+      return "Unknown Component";
+    case "invalid_props":
+      return "Invalid Props";
+    case "render_error":
+      return "Render Error";
+    default:
+      return "Invalid Component";
+  }
+}
+function getChildText(children) {
+  if (children === null || children === void 0) {
+    return "";
+  }
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getChildText).join("");
+  }
+  if (typeof children === "object") {
+    if ("props" in children && children.props) {
+      const element = children;
+      return getChildText(element.props.children);
+    }
+  }
+  return "";
+}
+function createComponentPre(definitions, options) {
+  const language = options?.language ?? "component";
+  const className = `language-${language}`;
+  const ComponentPre = ({ children, ...props }) => {
+    if (children && typeof children === "object" && "props" in children) {
+      const codeElement = children;
+      if (codeElement.props?.className === className) {
+        const codeContent = getChildText(codeElement.props?.children);
+        if (codeContent) {
+          return /* @__PURE__ */ jsx(
+            ComponentRenderer,
+            {
+              raw: codeContent,
+              definitions,
+              options
+            }
+          );
+        }
+      }
+    }
+    return /* @__PURE__ */ jsx("pre", { ...props, children });
+  };
+  ComponentPre.displayName = "ComponentPre";
+  return ComponentPre;
+}
+function describeJsonSchemaProperty(prop, indent = "") {
+  const description = prop.description ? ` // ${prop.description}` : "";
+  if (prop.anyOf) {
+    const nonNull = prop.anyOf.filter((s) => !(s.type === "null"));
+    const hasNull = prop.anyOf.some((s) => s.type === "null");
+    if (nonNull.length === 1 && hasNull) {
+      return `${describeJsonSchemaProperty(nonNull[0], indent)} | null${description}`;
+    }
+    const parts = prop.anyOf.map(
+      (s) => describeJsonSchemaProperty(s, indent)
+    );
+    return `${parts.join(" | ")}${description}`;
+  }
+  if (prop.enum) {
+    return `${prop.enum.map((v) => `"${v}"`).join(" | ")}${description}`;
+  }
+  if (prop.type === "array") {
+    const items = prop.items ? describeJsonSchemaProperty(prop.items, indent) : "any";
+    return `${items}[]${description}`;
+  }
+  if (prop.type === "object" && prop.properties) {
+    const required = new Set(prop.required ?? []);
+    const fields = [];
+    for (const [key, value] of Object.entries(prop.properties)) {
+      const opt = required.has(key) ? "" : "?";
+      fields.push(
+        `${indent}  ${key}: ${describeJsonSchemaProperty(value, indent + "  ")}${opt}`
+      );
+    }
+    return `{
+${fields.join(",\n")}
+${indent}}${description}`;
+  }
+  if (prop.type === "string") return `string${description}`;
+  if (prop.type === "number" || prop.type === "integer")
+    return `number${description}`;
+  if (prop.type === "boolean") return `boolean${description}`;
+  if (prop.type === "null") return `null${description}`;
+  return `any${description}`;
+}
+function describeProps(schema) {
+  try {
+    const jsonSchema = z.toJSONSchema(schema);
+    if (jsonSchema.type === "object" && jsonSchema.properties) {
+      return describeJsonSchemaProperty(jsonSchema);
+    }
+    return "Record<string, any>";
+  } catch {
+    return "Record<string, any>";
+  }
+}
+function generatePrompt(definitions, language = "component") {
+  const names = Object.keys(definitions);
+  if (names.length === 0) {
+    return "";
+  }
+  const componentDocs = names.map((name) => {
+    const def = definitions[name];
+    const propsDesc = describeProps(def.props);
+    return `- **${name}**: ${def.description}
+  Props: ${propsDesc}`;
+  }).join("\n\n");
+  return `When you need to render a dynamic UI component in your response, use a fenced code block with language \`${language}\` containing a JSON object:
+
+\`\`\`${language}
+{ "type": "ComponentName", "props": { ... } }
+\`\`\`
+
+For multiple components, use a JSON array:
+
+\`\`\`${language}
+[
+  { "type": "ComponentA", "props": { ... } },
+  { "type": "ComponentB", "props": { ... } }
+]
+\`\`\`
+
+For nested/composed layouts, use the "children" field:
+
+\`\`\`${language}
+{
+  "type": "Parent",
+  "props": { ... },
+  "children": [
+    { "type": "Child", "props": { ... } }
+  ]
+}
+\`\`\`
+
+Available components:
+
+${componentDocs}`;
+}
+function componentCatalog(definitions, options) {
+  const language = options?.language ?? "component";
+  const plugin = remarkComponent.bind(void 0, {
+    language
+  });
+  const Pre = createComponentPre(definitions, options);
+  return {
+    remarkPlugin: plugin,
+    components: { pre: Pre },
+    systemPrompt: () => generatePrompt(definitions, language),
+    definitions
+  };
+}
+function createChartComponentDef() {
+  const chartPropsSchema = z.object({
+    type: z.enum([
+      "bar",
+      "line",
+      "area",
+      "pie",
+      "radialBar",
+      "radialArea",
+      "sparkline"
+    ]).describe("Chart type"),
+    data: z.array(z.object({ key: z.string(), data: z.number() })).describe("Array of { key, data } data points"),
+    width: z.number().describe("Chart width in px").optional(),
+    height: z.number().describe("Chart height in px").optional(),
+    title: z.string().describe("Chart title").optional()
+  });
+  return {
+    description: "Renders a chart. Supported types: bar, line, area, pie, radialBar, radialArea, sparkline",
+    props: chartPropsSchema,
+    component: ({
+      children: _children,
+      sendMessage: _sendMessage,
+      ...config
+    }) => /* @__PURE__ */ jsx(ChartRenderer, { config })
+  };
+}
 export {
-  A as AgUiEventType,
-  b as AppBar,
-  C as ChartRenderer,
-  c as Chat,
-  d as ChatBubble,
-  e as ChatContext,
-  f as ChatInput,
-  g as ChatSuggestion,
-  h as ChatSuggestions,
-  i as CodeHighlighter,
-  j as ComponentError,
-  k as ComponentRenderer,
-  F as FileInput,
-  M as Markdown,
-  l as MentionList,
-  m as MessageActions,
-  n as MessageFile,
-  o as MessageFiles,
-  p as MessageQuestion,
-  q as MessageResponse,
-  r as MessageSource,
-  s as MessageSources,
-  t as MessageStatus,
-  u as MessageStatusItem,
-  N as NewSessionButton,
-  R as RichTextInput,
-  v as SessionEmpty,
-  w as SessionGroups,
-  x as SessionListItem,
-  y as SessionMessage,
-  z as SessionMessagePanel,
-  B as SessionMessages,
-  D as SessionMessagesHeader,
-  E as SessionsGroup,
-  G as SessionsList,
-  H as StatusIcon,
-  T as TableComponent,
-  I as TableDataCell,
-  J as TableHeaderCell,
-  K as bitcoinMatcher,
-  L as chatTheme,
-  O as commonRedactMatchers,
-  P as componentCatalog,
-  Q as createChartComponentDef,
-  U as createComponentPre,
-  V as creditCardMatcher,
-  W as dark,
-  X as generatePrompt,
-  Y as groupSessionsByDate,
-  Z as light,
-  _ as remarkComponent,
-  $ as remarkCve,
-  a0 as remarkRedact,
-  a1 as ssnMatcher,
-  a2 as useAgUi,
-  a3 as validateSpec
+  AgUiEventType,
+  AppBar,
+  CSVFileRenderer,
+  ChartRenderer,
+  Chat,
+  ChatBubble,
+  ChatContext,
+  ChatInput,
+  ChatSuggestion,
+  ChatSuggestions,
+  CodeHighlighter,
+  ComponentError,
+  ComponentRenderer,
+  DefaultFileRenderer,
+  FileInput,
+  ImageFileRenderer,
+  Markdown,
+  MentionList,
+  MessageActions,
+  MessageFile,
+  MessageFiles,
+  MessageQuestion,
+  MessageResponse,
+  MessageSource,
+  MessageSources,
+  MessageStatus,
+  MessageStatusItem,
+  NewSessionButton,
+  PDFFileRenderer,
+  RichTextInput,
+  SessionEmpty,
+  SessionGroups,
+  SessionListItem,
+  SessionMessage,
+  SessionMessagePanel,
+  SessionMessages,
+  SessionMessagesHeader,
+  SessionsGroup,
+  SessionsList,
+  StatusIcon,
+  TableComponent,
+  TableDataCell,
+  TableHeaderCell,
+  bitcoinMatcher,
+  chatTheme,
+  commonRedactMatchers,
+  componentCatalog,
+  createChartComponentDef,
+  createComponentPre,
+  creditCardMatcher,
+  dark,
+  generatePrompt,
+  groupSessionsByDate,
+  light,
+  remarkComponent,
+  remarkCve,
+  remarkRedact,
+  ssnMatcher,
+  useAgUi,
+  validateSpec
 };
 //# sourceMappingURL=index.js.map