reachat 3.0.0 → 3.2.0

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("rehype-raw"), require("reaviz"), require("mdast-util-find-and-replace"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react"), require("zod")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "rehype-raw", "reaviz", "mdast-util-find-and-replace", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react", "zod"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.rehypeRaw, global.reaviz, global.mdastUtilFindAndReplace, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2, global.zod));
-})(this, function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, rehypeRaw, reaviz, mdastUtilFindAndReplace, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2, zod) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("rehype-katex"), require("rehype-raw"), require("react-syntax-highlighter"), require("reaviz"), require("mdast-util-find-and-replace"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react"), require("zod")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "rehype-katex", "rehype-raw", "react-syntax-highlighter", "reaviz", "mdast-util-find-and-replace", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react", "zod"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.rehypeKatex, global.rehypeRaw, global.reactSyntaxHighlighter, global.reaviz, global.mdastUtilFindAndReplace, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2, global.zod));
+})(this, (function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, rehypeKatex, rehypeRaw, reactSyntaxHighlighter, reaviz, mdastUtilFindAndReplace, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2, zod) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -40,6 +40,7 @@
   const SvgPaperclip = (props) => /* @__PURE__ */ React__namespace.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__namespace.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,
@@ -55,6 +56,7 @@
           ref: fileInputRef,
           className: "hidden",
           accept: allowedFiles.join(","),
+          multiple,
           onChange: (e) => {
             onFileUpload(e);
             if (fileInputRef.current) {
@@ -70,10 +72,7 @@
           variant: "text",
           disabled: isLoading || disabled,
           className: reablocks.cn(theme.input.upload),
-          onClick: () => {
-            var _a;
-            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-          },
+          onClick: () => fileInputRef.current?.click(),
           children: attachIcon
         }
       )
@@ -188,17 +187,25 @@
           }
         },
         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",
@@ -328,18 +335,16 @@
   const POPUP_STYLE = { zIndex: 9999 };
   const MentionList = React.forwardRef(
     ({ items, command, triggerChar, config, query }, ref) => {
-      var _a;
       const [selectedIndex, setSelectedIndex] = React.useState(0);
       const itemRefs = React.useRef([]);
       const { theme } = React.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;
       React.useEffect(() => {
         setSelectedIndex(0);
       }, [items]);
       React.useEffect(() => {
-        var _a2;
         if (itemRefs.current[selectedIndex]) {
-          (_a2 = itemRefs.current[selectedIndex]) == null ? void 0 : _a2.scrollIntoView({
+          itemRefs.current[selectedIndex]?.scrollIntoView({
             block: "nearest",
             behavior: "smooth"
           });
@@ -470,10 +475,7 @@
         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
@@ -500,7 +502,7 @@
           },
           // Called when query or items change
           onUpdate: (props) => {
-            component == null ? void 0 : component.updateProps({
+            component?.updateProps({
               ...props,
               triggerChar,
               config
@@ -508,25 +510,23 @@
             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();
           }
         };
       }
@@ -546,12 +546,10 @@
       onSubmit,
       onChange
     }, ref) => {
-      var _a, _b, _c, _d;
       const { theme } = React.useContext(ChatContext);
       const containerRef = React.useRef(null);
       const suggestionActiveRef = React.useRef(false);
       const extensions = React.useMemo(() => {
-        var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
         const exts = [
           Document,
           Paragraph.configure({
@@ -570,7 +568,7 @@
           exts.push(
             Mention.configure({
               HTMLAttributes: {
-                class: reablocks.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: reablocks.cn(theme?.input?.tag?.base, theme?.input?.tag?.mention)
               },
               suggestion: createSuggestionConfig(
                 mentions,
@@ -586,7 +584,7 @@
           exts.push(
             Mention.configure({
               HTMLAttributes: {
-                class: reablocks.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: reablocks.cn(theme?.input?.tag?.base, theme?.input?.tag?.command)
               },
               suggestion: createSuggestionConfig(
                 commands,
@@ -607,13 +605,13 @@
         immediatelyRender: false,
         onUpdate: ({ editor: editor2 }) => {
           const text = editor2.getText();
-          onChange == null ? void 0 : onChange(text);
+          onChange?.(text);
         },
         editorProps: {
           attributes: {
             class: reablocks.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",
@@ -631,7 +629,7 @@
               if (text.trim() && onSubmit) {
                 event.preventDefault();
                 onSubmit(text);
-                editor == null ? void 0 : editor.commands.clearContent();
+                editor?.commands.clearContent();
                 return true;
               }
             }
@@ -648,16 +646,16 @@
       }, [editor, autoFocus]);
       React.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className: reablocks.cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }) });
@@ -668,6 +666,7 @@
     ({
       allowedFiles,
       placeholder = "Type a message...",
+      allowMultipleFiles = false,
       defaultValue,
       sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
       stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
@@ -691,43 +690,37 @@
       const inputRef = React.useRef(null);
       const containerRef = React.useRef(null);
       React.useEffect(() => {
-        var _a;
         if (autoFocus) {
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         }
       }, [activeSessionId, autoFocus]);
       React.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 = React.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 = React.useCallback(
         (value) => {
           if (value.trim()) {
-            sendMessage == null ? void 0 : sendMessage(value);
+            sendMessage?.(value);
             setMessage("");
           }
         },
@@ -736,16 +729,12 @@
       const handleChange = React.useCallback((value) => {
         setMessage(value);
       }, []);
-      const handleFileUpload = React.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 = React.useMemo(
         () => mentions ? { ...mentions, trigger: mentions.trigger || "@" } : void 0,
         [mentions]
@@ -773,10 +762,11 @@
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
-          (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          allowedFiles?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             FileInput,
             {
               allowedFiles,
+              multiple: allowMultipleFiles,
               onFileUpload: handleFileUpload,
               isLoading,
               disabled,
@@ -1877,14 +1867,17 @@
   const CodeHighlighter = ({
     className,
     children,
+    inlineClassName,
     copyClassName,
     copyIcon = /* @__PURE__ */ jsxRuntime.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");
@@ -1892,6 +1885,9 @@
         console.error("Could not copy text: ", err);
       });
     };
+    if (isInline) {
+      return /* @__PURE__ */ jsxRuntime.jsx("code", { className: reablocks.cn(inlineClassName), ...props, children });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn("relative", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(toolbarClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: lang }),
@@ -1907,14 +1903,7 @@
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactSyntaxHighlighter.Prism,
-        {
-          language: lang,
-          style: theme,
-          children
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Prism, { language: lang, style: theme, children })
     ] });
   };
   const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { ...props, children });
@@ -1924,16 +1913,19 @@
     children,
     remarkPlugins,
     rehypePlugins = [rehypeRaw, rehypeKatex],
+    theme: themeProp,
     customComponents
   }) => {
-    const { theme, markdownComponents } = React.useContext(ChatContext);
+    const { theme: contextTheme, markdownComponents } = React.useContext(ChatContext);
+    const theme = themeProp || contextTheme;
     const components = React.useMemo(() => {
       const defaultComponents = {
         code: ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
           CodeHighlighter,
           {
             ...props,
-            language: className,
+            language: reablocks.cn(className),
+            inlineClassName: reablocks.cn(theme.messages.message.markdown.inlineCode),
             className: reablocks.cn(theme.messages.message.markdown.code, className),
             copyClassName: reablocks.cn(theme.messages.message.markdown.copy),
             toolbarClassName: reablocks.cn(theme.messages.message.markdown.toolbar),
@@ -1962,20 +1954,27 @@
           }
         ),
         a: (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props, className: reablocks.cn(theme.messages.message.markdown.a) }),
+        hr: (props) => /* @__PURE__ */ jsxRuntime.jsx("hr", { ...props, className: reablocks.cn(theme.messages.message.markdown.hr) }),
         p: (props) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: reablocks.cn(theme.messages.message.markdown.p) }),
         li: (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
         ul: (props) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
         ol: (props) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: reablocks.cn(theme.messages.message.markdown.ol) }),
+        h1: (props) => /* @__PURE__ */ jsxRuntime.jsx("h1", { ...props, className: reablocks.cn(theme.messages.message.markdown.h1) }),
+        h2: (props) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ...props, className: reablocks.cn(theme.messages.message.markdown.h2) }),
+        h3: (props) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...props, className: reablocks.cn(theme.messages.message.markdown.h3) }),
+        h4: (props) => /* @__PURE__ */ jsxRuntime.jsx("h4", { ...props, className: reablocks.cn(theme.messages.message.markdown.h4) }),
+        h5: (props) => /* @__PURE__ */ jsxRuntime.jsx("h5", { ...props, className: reablocks.cn(theme.messages.message.markdown.h5) }),
+        h6: (props) => /* @__PURE__ */ jsxRuntime.jsx("h6", { ...props, className: reablocks.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__ */ jsxRuntime.jsx(
+        redact: ((props) => /* @__PURE__ */ jsxRuntime.jsx(
           reablocks.Redact,
           {
             value: props["data-redact-value"] || props.children,
             allowToggle: true,
             tooltipText: `${props["data-redact-name"] || "Sensitive"} information - Click to toggle`
           }
-        )
+        ))
       };
       return {
         ...defaultComponents,
@@ -2202,7 +2201,7 @@
   }) => {
     const { theme } = React.useContext(ChatContext);
     const FileRenderer = React.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$2;
     }, [type]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2386,8 +2385,7 @@
       }
       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);
@@ -2466,7 +2464,7 @@
           ...props,
           children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(MessageFiles, { files }),
-            /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: question }),
+            /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, theme, children: question }),
             isLong && !expanded && /* @__PURE__ */ jsxRuntime.jsx(
               reablocks.Button,
               {
@@ -2493,7 +2491,7 @@
           "data-compact": isCompact,
           className: reablocks.cn(theme.messages.message.response),
           children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: response }),
+            /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, theme, children: response }),
             isLoading && /* @__PURE__ */ jsxRuntime.jsx(
               react$1.motion.div,
               {
@@ -2511,7 +2509,6 @@
       );
     }
   );
-  MessageResponse.displayName = "MessageResponse";
   const MessageSource = ({ title, url, image, limit = 50 }) => {
     const { theme, isCompact } = React.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2643,9 +2640,9 @@ ${response}` : ""}`);
     }
   };
   const SessionMessage = React.memo(
-    ({ conversation, isLast, children }) => {
+    ({ conversation, isLast, children, className }) => {
       const { theme, isLoading } = React.useContext(ChatContext);
-      return /* @__PURE__ */ jsxRuntime.jsx(react$1.motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(react$1.motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base, className), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           MessageQuestion,
           {
@@ -2686,10 +2683,15 @@ ${response}` : ""}`);
     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 } = React.useContext(ChatContext);
     const contentRef = React.useRef(null);
     const messagesRef = React.useRef(null);
@@ -2711,12 +2713,12 @@ ${response}` : ""}`);
       return () => currentRef.removeEventListener("scroll", handleScroll);
     }, [showScrollBottomButton]);
     React.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);
@@ -2730,7 +2732,7 @@ ${response}` : ""}`);
       }
     };
     const reversedConvos = React.useMemo(
-      () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
+      () => [...activeSession?.conversations ?? []].reverse(),
       [activeSession]
     );
     const { data, hasMore, showNext } = reablocks.useInfinityList({
@@ -2738,25 +2740,27 @@ ${response}` : ""}`);
       size: limit
     });
     const reReversedConvo = React.useMemo(() => [...data].reverse(), [data]);
-    const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
+    const convosToRender = limit ? reReversedConvo : activeSession?.conversations;
     if (!activeSession) {
       return /* @__PURE__ */ jsxRuntime.jsx(SessionEmpty, { children: newSessionContent });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-y-hidden", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn("relative flex-1 overflow-y-hidden", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: reablocks.cn(theme.messages.content, "h-full"),
+          className: reablocks.cn(theme.messages.content, className, "h-full"),
           ref: contentRef,
-          id: activeSession == null ? void 0 : activeSession.id,
+          id: activeSession?.id,
+          onScrollCapture: onScroll,
           children: [
-            hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+            (showLoadMoreButton || hasMore) && /* @__PURE__ */ jsxRuntime.jsx(
               reablocks.Button,
               {
+                disabled: loadMoreButtonDisabled,
                 variant: "outline",
                 className: reablocks.cn(theme.messages.showMore),
                 fullWidth: true,
-                onClick: handleShowMore,
+                onClick: onLoadMore ?? handleShowMore,
                 children: showMoreText
               }
             ),
@@ -2769,7 +2773,7 @@ ${response}` : ""}`);
                 animate: "visible",
                 onAnimationComplete: () => requestAnimationFrame(() => {
                   setIsAnimating(false);
-                  if (contentRef.current) {
+                  if (contentRef.current && autoScroll) {
                     contentRef.current.scrollTop = contentRef.current.scrollHeight;
                   }
                 }),
@@ -2782,7 +2786,7 @@ ${response}` : ""}`);
                   conversation.id
                 ))
               },
-              activeSession == null ? void 0 : activeSession.id
+              activeSession?.id
             ) })
           ]
         }
@@ -2794,13 +2798,13 @@ ${response}` : ""}`);
           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__ */ jsxRuntime.jsx(
             reablocks.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__ */ jsxRuntime.jsx(SvgArrowDown, {})
             }
           )
@@ -2870,20 +2874,20 @@ ${response}` : ""}`);
     const handleSelectSession = React.useCallback(
       (sessionId) => {
         setInternalActiveSessionID(sessionId);
-        onSelectSession == null ? void 0 : onSelectSession(sessionId);
+        onSelectSession?.(sessionId);
       },
       [onSelectSession]
     );
     const handleDeleteSession = React.useCallback(
       (sessionId) => {
         setInternalActiveSessionID(void 0);
-        onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
+        onDeleteSession?.(sessionId);
       },
       [onDeleteSession]
     );
     const handleCreateNewSession = React.useCallback(() => {
       setInternalActiveSessionID(void 0);
-      onNewSession == null ? void 0 : onNewSession();
+      onNewSession?.();
     }, [onNewSession]);
     reakeys.useHotkeys([
       {
@@ -2976,7 +2980,7 @@ ${response}` : ""}`);
       const { activeSessionId, selectSession, deleteSession, theme } = React.useContext(ChatContext);
       const Comp = children ? reactSlot.Slot : reablocks.ListItem;
       const handleSelect = React.useCallback(() => {
-        selectSession == null ? void 0 : selectSession(session.id);
+        selectSession?.(session.id);
       }, [selectSession, session.id]);
       const handleDelete = React.useCallback(
         (e) => {
@@ -3038,7 +3042,7 @@ ${response}` : ""}`);
         }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reablocks.List, { children }),
-          templates && !activeSessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => createSession == null ? void 0 : createSession(), children: /* @__PURE__ */ jsxRuntime.jsx(
+          templates && !activeSessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => createSession?.(), children: /* @__PURE__ */ jsxRuntime.jsx(
             SessionListItem,
             {
               session: {
@@ -3067,7 +3071,7 @@ ${response}` : ""}`);
         fullWidth: true,
         disableMargins: true,
         color: "primary",
-        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(SvgPlus, {}),
+        start: /* @__PURE__ */ jsxRuntime.jsx(SvgPlus, {}),
         className: reablocks.cn(theme.sessions.create),
         disabled,
         onClick: createSession,
@@ -3203,7 +3207,7 @@ ${response}` : ""}`);
     const { theme, disabled, isLoading } = React.useContext(ChatContext);
     const handleClick = () => {
       if (disabled || isLoading) return;
-      onClick == null ? void 0 : onClick(content);
+      onClick?.(content);
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       reablocks.Button,
@@ -3456,8 +3460,7 @@ ${response}` : ""}`);
     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");
     }
@@ -3509,8 +3512,7 @@ ${response}` : ""}`);
     onEventRef.current = onEvent;
     React.useEffect(() => {
       return () => {
-        var _a;
-        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        abortRef.current?.abort();
       };
     }, []);
     const selectSession = React.useCallback((sessionId) => {
@@ -3538,15 +3540,13 @@ ${response}` : ""}`);
       setActiveSessionId(id);
     }, []);
     const stopMessage = React.useCallback(() => {
-      var _a;
-      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      abortRef.current?.abort();
       abortRef.current = null;
       setIsLoading(false);
     }, []);
     const sendMessage = React.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;
@@ -3573,7 +3573,7 @@ ${response}` : ""}`);
         );
         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
@@ -3621,11 +3621,11 @@ ${response}` : ""}`);
             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;
@@ -3670,7 +3670,7 @@ ${response}` : ""}`);
               }
               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: {
@@ -3683,7 +3683,7 @@ ${response}` : ""}`);
             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;
@@ -3817,7 +3817,6 @@ ${response}` : ""}`);
     definitions,
     options
   }) => {
-    var _a, _b;
     const { theme, sendMessage } = React.useContext(ChatContext);
     const result = React.useMemo(
       () => validateSpec(raw, definitions),
@@ -3825,7 +3824,7 @@ ${response}` : ""}`);
     );
     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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
       }
@@ -3839,7 +3838,7 @@ ${response}` : ""}`);
       );
     }
     const specs = result.specs;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: (_b = theme.component) == null ? void 0 : _b.base, children: specs.map((spec, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.component?.base, children: specs.map((spec, index) => /* @__PURE__ */ jsxRuntime.jsx(
       SpecRenderer,
       {
         spec,
@@ -3856,7 +3855,6 @@ ${response}` : ""}`);
     options,
     sendMessage
   }) => {
-    var _a, _b;
     const definition = definitions[spec.type];
     if (!definition) {
       const error = {
@@ -3865,14 +3863,14 @@ ${response}` : ""}`);
         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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
       }
       return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    const children = spec.children?.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
       SpecRenderer,
       {
         spec: child,
@@ -3893,7 +3891,6 @@ ${response}` : ""}`);
       return { error };
     }
     render() {
-      var _a;
       if (this.state.error) {
         const { spec, options } = this.props;
         const catalogError = {
@@ -3902,7 +3899,7 @@ ${response}` : ""}`);
           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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
         }
@@ -3963,14 +3960,13 @@ ${response}` : ""}`);
     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__ */ jsxRuntime.jsx(
               ComponentRenderer,
@@ -4082,7 +4078,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
     });
@@ -4168,6 +4164,7 @@ ${componentDocs}`;
   exports2.creditCardMatcher = creditCardMatcher;
   exports2.dark = dark;
   exports2.generatePrompt = generatePrompt;
+  exports2.groupSessionsByDate = groupSessionsByDate;
   exports2.light = light;
   exports2.remarkComponent = remarkComponent;
   exports2.remarkCve = remarkCve;
@@ -4176,5 +4173,5 @@ ${componentDocs}`;
   exports2.useAgUi = useAgUi;
   exports2.validateSpec = validateSpec;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));
 //# sourceMappingURL=index.umd.cjs.map