reachat 3.0.0 → 3.2.0

package/dist/{index-8tlsyFe-.js → index-iuJAmrEE.js}

@@ -13,9 +13,9 @@ 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 { Prism } from "react-syntax-highlighter";
 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";
@@ -35,6 +35,7 @@ const ChatContext = createContext({
 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,
@@ -50,6 +51,7 @@ const FileInput = ({
         ref: fileInputRef,
         className: "hidden",
         accept: allowedFiles.join(","),
+        multiple,
         onChange: (e) => {
           onFileUpload(e);
           if (fileInputRef.current) {
@@ -65,10 +67,7 @@ const FileInput = ({
         variant: "text",
         disabled: isLoading || disabled,
         className: cn(theme.input.upload),
-        onClick: () => {
-          var _a;
-          return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-        },
+        onClick: () => fileInputRef.current?.click(),
         children: attachIcon
       }
     )
@@ -183,17 +182,25 @@ const chatTheme = {
         }
       },
       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-blue-400 underline",
+        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-gray-500",
+        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",
-        toolbar: "text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ",
+        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"
+        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",
@@ -323,18 +330,16 @@ const chatTheme = {
 const POPUP_STYLE = { zIndex: 9999 };
 const MentionList = forwardRef(
   ({ items, command, triggerChar, config, query }, ref) => {
-    var _a;
     const [selectedIndex, setSelectedIndex] = useState(0);
     const itemRefs = useRef([]);
     const { theme } = useContext(ChatContext);
-    const popupTheme = ((_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.popup) || chatTheme.input.popup;
+    const popupTheme = theme?.input?.popup || chatTheme.input.popup;
     useEffect(() => {
       setSelectedIndex(0);
     }, [items]);
     useEffect(() => {
-      var _a2;
       if (itemRefs.current[selectedIndex]) {
-        (_a2 = itemRefs.current[selectedIndex]) == null ? void 0 : _a2.scrollIntoView({
+        itemRefs.current[selectedIndex]?.scrollIntoView({
           block: "nearest",
           behavior: "smooth"
         });
@@ -465,10 +470,7 @@ function createSuggestionConfig(config, triggerChar, suggestionActiveRef) {
       if (!query) return config.items.slice(0, config.maxResults || 10);
       const lowerQuery = query.toLowerCase();
       return config.items.filter(
-        (item) => {
-          var _a;
-          return item.label.toLowerCase().includes(lowerQuery) || ((_a = item.description) == null ? void 0 : _a.toLowerCase().includes(lowerQuery));
-        }
+        (item) => item.label.toLowerCase().includes(lowerQuery) || item.description?.toLowerCase().includes(lowerQuery)
       ).slice(0, config.maxResults || 10);
     },
     // Render callbacks for managing the popup lifecycle
@@ -495,7 +497,7 @@ function createSuggestionConfig(config, triggerChar, suggestionActiveRef) {
         },
         // Called when query or items change
         onUpdate: (props) => {
-          component == null ? void 0 : component.updateProps({
+          component?.updateProps({
             ...props,
             triggerChar,
             config
@@ -503,25 +505,23 @@ function createSuggestionConfig(config, triggerChar, suggestionActiveRef) {
           if (!props.clientRect) {
             return;
           }
-          if (component == null ? void 0 : component.element) {
+          if (component?.element) {
             updatePopupPosition(props.editor, component.element);
           }
         },
         // Handle keyboard navigation (Escape closes popup)
         onKeyDown: (props) => {
-          var _a;
           if (props.event.key === "Escape") {
-            component == null ? void 0 : component.destroy();
+            component?.destroy();
             return true;
           }
-          return ((_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) ?? false;
+          return component?.ref?.onKeyDown(props) ?? false;
         },
         // Cleanup when suggestion is dismissed
         onExit: () => {
-          var _a;
           suggestionActiveRef.current = false;
-          (_a = component == null ? void 0 : component.element) == null ? void 0 : _a.remove();
-          component == null ? void 0 : component.destroy();
+          component?.element?.remove();
+          component?.destroy();
         }
       };
     }
@@ -541,12 +541,10 @@ const RichTextInput = forwardRef(
     onSubmit,
     onChange
   }, ref) => {
-    var _a, _b, _c, _d;
     const { theme } = useContext(ChatContext);
     const containerRef = useRef(null);
     const suggestionActiveRef = useRef(false);
     const extensions = useMemo(() => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
       const exts = [
         Document,
         Paragraph.configure({
@@ -565,7 +563,7 @@ const RichTextInput = forwardRef(
         exts.push(
           Mention.configure({
             HTMLAttributes: {
-              class: cn((_b2 = (_a2 = theme == null ? void 0 : theme.input) == null ? void 0 : _a2.tag) == null ? void 0 : _b2.base, (_d2 = (_c2 = theme == null ? void 0 : theme.input) == null ? void 0 : _c2.tag) == null ? void 0 : _d2.mention)
+              class: cn(theme?.input?.tag?.base, theme?.input?.tag?.mention)
             },
             suggestion: createSuggestionConfig(
               mentions,
@@ -581,7 +579,7 @@ const RichTextInput = forwardRef(
         exts.push(
           Mention.configure({
             HTMLAttributes: {
-              class: cn((_f = (_e = theme == null ? void 0 : theme.input) == null ? void 0 : _e.tag) == null ? void 0 : _f.base, (_h = (_g = theme == null ? void 0 : theme.input) == null ? void 0 : _g.tag) == null ? void 0 : _h.command)
+              class: cn(theme?.input?.tag?.base, theme?.input?.tag?.command)
             },
             suggestion: createSuggestionConfig(
               commands,
@@ -602,13 +600,13 @@ const RichTextInput = forwardRef(
       immediatelyRender: false,
       onUpdate: ({ editor: editor2 }) => {
         const text = editor2.getText();
-        onChange == null ? void 0 : onChange(text);
+        onChange?.(text);
       },
       editorProps: {
         attributes: {
           class: cn(
-            (_b = (_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.editor) == null ? void 0 : _b.base,
-            (_d = (_c = theme == null ? void 0 : theme.input) == null ? void 0 : _c.editor) == null ? void 0 : _d.placeholder
+            theme?.input?.editor?.base,
+            theme?.input?.editor?.placeholder
           ),
           style: `min-height: ${minHeight}px; max-height: ${maxHeight}px;`,
           role: "textbox",
@@ -626,7 +624,7 @@ const RichTextInput = forwardRef(
             if (text.trim() && onSubmit) {
               event.preventDefault();
               onSubmit(text);
-              editor == null ? void 0 : editor.commands.clearContent();
+              editor?.commands.clearContent();
               return true;
             }
           }
@@ -643,16 +641,16 @@ const RichTextInput = forwardRef(
     }, [editor, autoFocus]);
     useImperativeHandle(ref, () => ({
       focus: () => {
-        editor == null ? void 0 : editor.commands.focus();
+        editor?.commands.focus();
       },
       getValue: () => {
-        return (editor == null ? void 0 : editor.getText()) || "";
+        return editor?.getText() || "";
       },
       setValue: (newValue) => {
-        editor == null ? void 0 : editor.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
+        editor?.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
       },
       insertText: (text) => {
-        editor == null ? void 0 : editor.commands.insertContent(text);
+        editor?.commands.insertContent(text);
       }
     }));
     return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("relative w-full", className), children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
@@ -663,6 +661,7 @@ const ChatInput = forwardRef(
   ({
     allowedFiles,
     placeholder = "Type a message...",
+    allowMultipleFiles = false,
     defaultValue,
     sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
     stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
@@ -686,43 +685,37 @@ const ChatInput = forwardRef(
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     useEffect(() => {
-      var _a;
       if (autoFocus) {
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        inputRef.current?.focus();
       }
     }, [activeSessionId, autoFocus]);
     useImperativeHandle(ref, () => ({
       focus: () => {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        inputRef.current?.focus();
       },
       getValue: () => {
-        var _a;
-        return ((_a = inputRef.current) == null ? void 0 : _a.getValue()) || "";
+        return inputRef.current?.getValue() || "";
       },
       setValue: (value) => {
-        var _a;
         setMessage(value);
-        (_a = inputRef.current) == null ? void 0 : _a.setValue(value);
+        inputRef.current?.setValue(value);
       },
       insertText: (text) => {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.insertText(text);
+        inputRef.current?.insertText(text);
       }
     }));
     const handleSendMessage = useCallback(() => {
-      var _a, _b;
-      const currentMessage = (_a = inputRef.current) == null ? void 0 : _a.getValue();
+      const currentMessage = inputRef.current?.getValue();
       if (currentMessage.trim()) {
-        sendMessage == null ? void 0 : sendMessage(currentMessage);
+        sendMessage?.(currentMessage);
         setMessage("");
-        (_b = inputRef.current) == null ? void 0 : _b.setValue("");
+        inputRef.current?.setValue("");
       }
     }, [sendMessage]);
     const handleSubmit = useCallback(
       (value) => {
         if (value.trim()) {
-          sendMessage == null ? void 0 : sendMessage(value);
+          sendMessage?.(value);
           setMessage("");
         }
       },
@@ -731,16 +724,12 @@ const ChatInput = forwardRef(
     const handleChange = useCallback((value) => {
       setMessage(value);
     }, []);
-    const handleFileUpload = useCallback(
-      (event) => {
-        var _a;
-        const file = (_a = event.target.files) == null ? void 0 : _a[0];
-        if (file && fileUpload) {
-          fileUpload(file);
-        }
-      },
-      [fileUpload]
-    );
+    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]
@@ -768,10 +757,11 @@ const ChatInput = forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
-        (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsx(
+        allowedFiles?.length > 0 && /* @__PURE__ */ jsx(
           FileInput,
           {
             allowedFiles,
+            multiple: allowMultipleFiles,
             onFileUpload: handleFileUpload,
             isLoading,
             disabled,
@@ -1872,14 +1862,17 @@ const light = {
 const CodeHighlighter = ({
   className,
   children,
+  inlineClassName,
   copyClassName,
   copyIcon = /* @__PURE__ */ jsx(SvgCopy, {}),
   language,
   toolbarClassName,
-  theme = dark
+  theme = dark,
+  ...props
 }) => {
-  const match = language == null ? void 0 : language.match(/language-(\w+)/);
+  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");
@@ -1887,6 +1880,9 @@ const CodeHighlighter = ({
       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 }),
@@ -1902,14 +1898,7 @@ const CodeHighlighter = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
-      Prism,
-      {
-        language: lang,
-        style: theme,
-        children
-      }
-    )
+    /* @__PURE__ */ jsx(Prism, { language: lang, style: theme, children })
   ] });
 };
 const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsx("table", { ...props, children });
@@ -1919,16 +1908,19 @@ const Markdown = ({
   children,
   remarkPlugins,
   rehypePlugins = [rehypeRaw, rehypeKatex],
+  theme: themeProp,
   customComponents
 }) => {
-  const { theme, markdownComponents } = useContext(ChatContext);
+  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: className,
+          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),
@@ -1957,20 +1949,27 @@ const Markdown = ({
         }
       ),
       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: ((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,
@@ -2179,8 +2178,8 @@ const commonRedactMatchers = [
   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 = lazy(() => import("./DefaultFileRenderer-CJ3jwiQa.js"));
-const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-C2tuexJf.js"));
+const DefaultFileRenderer = lazy(() => import("./DefaultFileRenderer-BrFdb4JQ.js"));
+const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-Darm68BZ.js"));
 const ImageFileRenderer = lazy(() => import("./ImageFileRenderer-C8tVW3I8.js"));
 const PDFFileRenderer = lazy(() => import("./PDFFileRenderer-DQdFS2l6.js"));
 const FILE_TYPE_RENDERER_MAP = {
@@ -2197,7 +2196,7 @@ const MessageFile = ({
 }) => {
   const { theme } = useContext(ChatContext);
   const FileRenderer = useMemo(() => {
-    const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type == null ? void 0 : type.startsWith(key)) ?? "default";
+    const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type?.startsWith(key)) ?? "default";
     return FILE_TYPE_RENDERER_MAP[Renderer] || DefaultFileRenderer;
   }, [type]);
   return /* @__PURE__ */ jsx(
@@ -2221,8 +2220,7 @@ const MessageFiles = memo(({ files, children }) => {
     }
     return files.reduce(
       (acc, file) => {
-        var _a;
-        if ((_a = file.type) == null ? void 0 : _a.startsWith("image/")) {
+        if (file.type?.startsWith("image/")) {
           acc.imageFiles.push(file);
         } else {
           acc.otherFiles.push(file);
@@ -2301,7 +2299,7 @@ const MessageQuestion = memo(
         ...props,
         children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(MessageFiles, { files }),
-          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: question }),
+          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, theme, children: question }),
           isLong && !expanded && /* @__PURE__ */ jsx(
             Button,
             {
@@ -2328,7 +2326,7 @@ const MessageResponse = memo(
         "data-compact": isCompact,
         className: cn(theme.messages.message.response),
         children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, children: response }),
+          /* @__PURE__ */ jsx(Markdown, { remarkPlugins, theme, children: response }),
           isLoading && /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -2346,7 +2344,6 @@ const MessageResponse = memo(
     );
   }
 );
-MessageResponse.displayName = "MessageResponse";
 const MessageSource = ({ title, url, image, limit = 50 }) => {
   const { theme, isCompact } = useContext(ChatContext);
   return /* @__PURE__ */ jsxs(
@@ -2478,9 +2475,9 @@ const messageVariants = {
   }
 };
 const SessionMessage = memo(
-  ({ conversation, isLast, children }) => {
+  ({ 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), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+    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,
         {
@@ -2521,10 +2518,15 @@ const SessionMessages = ({
   children,
   newSessionContent,
   limit = 10,
+  className,
   showMoreText = "Show more",
-  showScrollBottomButton = false
+  autoScroll = true,
+  showLoadMoreButton = false,
+  showScrollBottomButton,
+  loadMoreButtonDisabled,
+  onScroll,
+  onLoadMore
 }) => {
-  var _a, _b, _c, _d, _e, _f;
   const { activeSession, theme } = useContext(ChatContext);
   const contentRef = useRef(null);
   const messagesRef = useRef(null);
@@ -2546,12 +2548,12 @@ const SessionMessages = ({
     return () => currentRef.removeEventListener("scroll", handleScroll);
   }, [showScrollBottomButton]);
   useEffect(() => {
-    if (contentRef.current) {
+    if (contentRef.current && autoScroll) {
       requestAnimationFrame(
         () => contentRef.current.scrollTop = contentRef.current.scrollHeight
       );
     }
-  }, [activeSession, isAnimating]);
+  }, [activeSession, autoScroll, isAnimating]);
   const handleShowMore = () => {
     showNext(limit);
     requestAnimationFrame(() => contentRef.current.scrollTop = 0);
@@ -2565,7 +2567,7 @@ const SessionMessages = ({
     }
   };
   const reversedConvos = useMemo(
-    () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
+    () => [...activeSession?.conversations ?? []].reverse(),
     [activeSession]
   );
   const { data, hasMore, showNext } = useInfinityList({
@@ -2573,25 +2575,27 @@ const SessionMessages = ({
     size: limit
   });
   const reReversedConvo = useMemo(() => [...data].reverse(), [data]);
-  const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
+  const convosToRender = limit ? reReversedConvo : activeSession?.conversations;
   if (!activeSession) {
     return /* @__PURE__ */ jsx(SessionEmpty, { children: newSessionContent });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-hidden", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1 overflow-y-hidden", className), children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(theme.messages.content, "h-full"),
+        className: cn(theme.messages.content, className, "h-full"),
         ref: contentRef,
-        id: activeSession == null ? void 0 : activeSession.id,
+        id: activeSession?.id,
+        onScrollCapture: onScroll,
         children: [
-          hasMore && /* @__PURE__ */ jsx(
+          (showLoadMoreButton || hasMore) && /* @__PURE__ */ jsx(
             Button,
             {
+              disabled: loadMoreButtonDisabled,
               variant: "outline",
               className: cn(theme.messages.showMore),
               fullWidth: true,
-              onClick: handleShowMore,
+              onClick: onLoadMore ?? handleShowMore,
               children: showMoreText
             }
           ),
@@ -2604,7 +2608,7 @@ const SessionMessages = ({
               animate: "visible",
               onAnimationComplete: () => requestAnimationFrame(() => {
                 setIsAnimating(false);
-                if (contentRef.current) {
+                if (contentRef.current && autoScroll) {
                   contentRef.current.scrollTop = contentRef.current.scrollHeight;
                 }
               }),
@@ -2617,7 +2621,7 @@ const SessionMessages = ({
                 conversation.id
               ))
             },
-            activeSession == null ? void 0 : activeSession.id
+            activeSession?.id
           ) })
         ]
       }
@@ -2629,13 +2633,13 @@ const SessionMessages = ({
         animate: { y: 0, opacity: 1 },
         exit: { y: 100, opacity: 0 },
         transition: { duration: 0.3, ease: "easeOut" },
-        className: (_c = (_b = (_a = theme.messages) == null ? void 0 : _a.message) == null ? void 0 : _b.scrollToBottom) == null ? void 0 : _c.container,
+        className: theme.messages?.message?.scrollToBottom?.container,
         children: /* @__PURE__ */ jsx(
           IconButton,
           {
             onClick: handleScrollToBottom,
-            className: (_f = (_e = (_d = theme.messages) == null ? void 0 : _d.message) == null ? void 0 : _e.scrollToBottom) == null ? void 0 : _f.button,
-            size: "sm",
+            className: theme.messages?.message?.scrollToBottom?.button,
+            size: "small",
             children: /* @__PURE__ */ jsx(SvgArrowDown, {})
           }
         )
@@ -2705,20 +2709,20 @@ const Chat = ({
   const handleSelectSession = useCallback(
     (sessionId) => {
       setInternalActiveSessionID(sessionId);
-      onSelectSession == null ? void 0 : onSelectSession(sessionId);
+      onSelectSession?.(sessionId);
     },
     [onSelectSession]
   );
   const handleDeleteSession = useCallback(
     (sessionId) => {
       setInternalActiveSessionID(void 0);
-      onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
+      onDeleteSession?.(sessionId);
     },
     [onDeleteSession]
   );
   const handleCreateNewSession = useCallback(() => {
     setInternalActiveSessionID(void 0);
-    onNewSession == null ? void 0 : onNewSession();
+    onNewSession?.();
   }, [onNewSession]);
   useHotkeys([
     {
@@ -2811,7 +2815,7 @@ const SessionListItem = memo(
     const { activeSessionId, selectSession, deleteSession, theme } = useContext(ChatContext);
     const Comp = children ? Slot : ListItem;
     const handleSelect = useCallback(() => {
-      selectSession == null ? void 0 : selectSession(session.id);
+      selectSession?.(session.id);
     }, [selectSession, session.id]);
     const handleDelete = useCallback(
       (e) => {
@@ -2873,7 +2877,7 @@ const SessionsList = ({
       }),
       children: [
         /* @__PURE__ */ jsx(List, { children }),
-        templates && !activeSessionId && /* @__PURE__ */ jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsx("div", { onClick: () => createSession == null ? void 0 : createSession(), children: /* @__PURE__ */ jsx(
+        templates && !activeSessionId && /* @__PURE__ */ jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsx("div", { onClick: () => createSession?.(), children: /* @__PURE__ */ jsx(
           SessionListItem,
           {
             session: {
@@ -2902,7 +2906,7 @@ const NewSessionButton = ({
       fullWidth: true,
       disableMargins: true,
       color: "primary",
-      startAdornment: /* @__PURE__ */ jsx(SvgPlus, {}),
+      start: /* @__PURE__ */ jsx(SvgPlus, {}),
       className: cn(theme.sessions.create),
       disabled,
       onClick: createSession,
@@ -3038,7 +3042,7 @@ const ChatSuggestion = ({
   const { theme, disabled, isLoading } = useContext(ChatContext);
   const handleClick = () => {
     if (disabled || isLoading) return;
-    onClick == null ? void 0 : onClick(content);
+    onClick?.(content);
   };
   return /* @__PURE__ */ jsx(
     Button,
@@ -3291,8 +3295,7 @@ function parseSSELine(line) {
   return null;
 }
 async function* parseSSE(response, signal) {
-  var _a;
-  const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+  const reader = response.body?.getReader();
   if (!reader) {
     throw new Error("Response body is not readable");
   }
@@ -3344,8 +3347,7 @@ function useAgUi({
   onEventRef.current = onEvent;
   useEffect(() => {
     return () => {
-      var _a;
-      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      abortRef.current?.abort();
     };
   }, []);
   const selectSession = useCallback((sessionId) => {
@@ -3373,15 +3375,13 @@ function useAgUi({
     setActiveSessionId(id);
   }, []);
   const stopMessage = useCallback(() => {
-    var _a;
-    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    abortRef.current?.abort();
     abortRef.current = null;
     setIsLoading(false);
   }, []);
   const sendMessage = useCallback(
     async (message) => {
-      var _a, _b, _c, _d, _e, _f;
-      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      abortRef.current?.abort();
       const abortController = new AbortController();
       abortRef.current = abortController;
       let sessionId = activeSessionId;
@@ -3408,7 +3408,7 @@ function useAgUi({
       );
       setIsLoading(true);
       const currentSession = [
-        ...((_b = sessions.find((s) => s.id === sessionId)) == null ? void 0 : _b.conversations) ?? []
+        ...sessions.find((s) => s.id === sessionId)?.conversations ?? []
       ];
       const historyMessages = sessionsToAgUiMessages({
         conversations: currentSession
@@ -3456,11 +3456,11 @@ function useAgUi({
           abortController.signal
         )) {
           if (eventOrError instanceof Error) {
-            (_c = onErrorRef.current) == null ? void 0 : _c.call(onErrorRef, eventOrError);
+            onErrorRef.current?.(eventOrError);
             continue;
           }
           const event = eventOrError;
-          (_d = onEventRef.current) == null ? void 0 : _d.call(onEventRef, event);
+          onEventRef.current?.(event);
           switch (event.type) {
             case AgUiEventType.TEXT_MESSAGE_CONTENT: {
               responseText += event.delta;
@@ -3505,7 +3505,7 @@ function useAgUi({
             }
             case AgUiEventType.RUN_ERROR: {
               const err = new Error(event.message);
-              (_e = onErrorRef.current) == null ? void 0 : _e.call(onErrorRef, err);
+              onErrorRef.current?.(err);
               break;
             }
             case AgUiEventType.RUN_FINISHED: {
@@ -3518,7 +3518,7 @@ function useAgUi({
           return;
         }
         const error = err instanceof Error ? err : new Error(String(err));
-        (_f = onErrorRef.current) == null ? void 0 : _f.call(onErrorRef, error);
+        onErrorRef.current?.(error);
       } finally {
         if (abortRef.current === abortController) {
           abortRef.current = null;
@@ -3652,7 +3652,6 @@ const ComponentRenderer = ({
   definitions,
   options
 }) => {
-  var _a, _b;
   const { theme, sendMessage } = useContext(ChatContext);
   const result = useMemo(
     () => validateSpec(raw, definitions),
@@ -3660,7 +3659,7 @@ const ComponentRenderer = ({
   );
   if (!result.ok) {
     const error = result.error;
-    const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
+    const custom = options?.onError?.(error);
     if (custom !== void 0) {
       return /* @__PURE__ */ jsx(Fragment, { children: custom });
     }
@@ -3674,7 +3673,7 @@ const ComponentRenderer = ({
     );
   }
   const specs = result.specs;
-  return /* @__PURE__ */ jsx("div", { className: (_b = theme.component) == null ? void 0 : _b.base, children: specs.map((spec, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: theme.component?.base, children: specs.map((spec, index) => /* @__PURE__ */ jsx(
     SpecRenderer,
     {
       spec,
@@ -3691,7 +3690,6 @@ const SpecRenderer = ({
   options,
   sendMessage
 }) => {
-  var _a, _b;
   const definition = definitions[spec.type];
   if (!definition) {
     const error = {
@@ -3700,14 +3698,14 @@ const SpecRenderer = ({
       raw: JSON.stringify(spec),
       componentType: spec.type
     };
-    const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, 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 });
   }
   const RenderedComponent = definition.component;
-  const children = (_b = spec.children) == null ? void 0 : _b.map((child, index) => /* @__PURE__ */ jsx(
+  const children = spec.children?.map((child, index) => /* @__PURE__ */ jsx(
     SpecRenderer,
     {
       spec: child,
@@ -3728,7 +3726,6 @@ class SpecErrorBoundary extends Component {
     return { error };
   }
   render() {
-    var _a;
     if (this.state.error) {
       const { spec, options } = this.props;
       const catalogError = {
@@ -3737,7 +3734,7 @@ class SpecErrorBoundary extends Component {
         raw: JSON.stringify(spec),
         componentType: spec.type
       };
-      const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, catalogError);
+      const custom = options?.onError?.(catalogError);
       if (custom !== void 0) {
         return /* @__PURE__ */ jsx(Fragment, { children: custom });
       }
@@ -3798,14 +3795,13 @@ function getChildText(children) {
   return "";
 }
 function createComponentPre(definitions, options) {
-  const language = (options == null ? void 0 : options.language) ?? "component";
+  const language = options?.language ?? "component";
   const className = `language-${language}`;
   const ComponentPre = ({ children, ...props }) => {
-    var _a, _b;
     if (children && typeof children === "object" && "props" in children) {
       const codeElement = children;
-      if (((_a = codeElement.props) == null ? void 0 : _a.className) === className) {
-        const codeContent = getChildText((_b = codeElement.props) == null ? void 0 : _b.children);
+      if (codeElement.props?.className === className) {
+        const codeContent = getChildText(codeElement.props?.children);
         if (codeContent) {
           return /* @__PURE__ */ jsx(
             ComponentRenderer,
@@ -3917,7 +3913,7 @@ Available components:
 ${componentDocs}`;
 }
 function componentCatalog(definitions, options) {
-  const language = (options == null ? void 0 : options.language) ?? "component";
+  const language = options?.language ?? "component";
   const plugin = remarkComponent.bind(void 0, {
     language
   });
@@ -3956,7 +3952,7 @@ function createChartComponentDef() {
   };
 }
 export {
-  remarkRedact as $,
+  remarkCve as $,
   AgUiEventType as A,
   SessionMessages as B,
   ChartRenderer as C,
@@ -3981,13 +3977,14 @@ export {
   creditCardMatcher as V,
   dark as W,
   generatePrompt as X,
-  light as Y,
-  remarkComponent as Z,
-  remarkCve as _,
+  groupSessionsByDate as Y,
+  light as Z,
+  remarkComponent as _,
   SvgCopy as a,
-  ssnMatcher as a0,
-  useAgUi as a1,
-  validateSpec as a2,
+  remarkRedact as a0,
+  ssnMatcher as a1,
+  useAgUi as a2,
+  validateSpec as a3,
   AppBar as b,
   Chat as c,
   ChatBubble as d,
@@ -4014,4 +4011,4 @@ export {
   SessionMessage as y,
   SessionMessagePanel as z
 };
-//# sourceMappingURL=index-8tlsyFe-.js.map
+//# sourceMappingURL=index-iuJAmrEE.js.map