reachat 3.1.0 → 3.2.1

package/dist/index.css

@@ -106,6 +106,7 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --blur-md: 12px;
     --default-transition-duration: 150ms;
@@ -981,6 +982,9 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[800px\] {
+    width: 800px;
+  }
   .w-auto {
     width: auto;
   }
@@ -1142,6 +1146,9 @@
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
+  .rotate-45 {
+    rotate: 45deg;
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -1486,6 +1493,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1640,6 +1651,9 @@
   .bg-green-800 {
     background-color: var(--color-green-800);
   }
+  .bg-inherit {
+    background-color: inherit;
+  }
   .bg-lime-600 {
     background-color: var(--color-lime-600);
   }
@@ -1993,6 +2007,9 @@
   .pt-2\.5 {
     padding-top: calc(var(--spacing) * 2.5);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-7 {
     padding-top: calc(var(--spacing) * 7);
   }
@@ -2044,6 +2061,9 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pb-\[10px\] {
     padding-bottom: 10px;
   }
@@ -2369,6 +2389,10 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_4px_20px_0_\#e1e2e333_inset\] {
+    --tw-shadow: 0 4px 20px 0 var(--tw-shadow-color, #e1e2e333) inset;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0px_4px_4px_0px_rgba\(0\,0\,0\,0\.20\)\] {
     --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, rgba(0,0,0,0.20));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2471,6 +2495,10 @@
     --tw-ease: linear;
     transition-timing-function: linear;
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .will-change-\[border-color\] {
     will-change: border-color;
   }
@@ -2805,6 +2833,13 @@
       }
     }
   }
+  .hover\:border-transparent {
+    &:hover {
+      @media (hover: hover) {
+        border-color: transparent;
+      }
+    }
+  }
   .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
@@ -3368,14 +3403,6 @@
       background-color: var(--color-gray-700);
     }
   }
-  .dark\:bg-gray-700\/50 {
-    &:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *) {
-      background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
-      }
-    }
-  }
   .dark\:bg-gray-800 {
     &:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-gray-800);

package/dist/index.d.ts

@@ -12,3 +12,5 @@ export * from './ChatSuggestions';
 export * from './MessageStatus';
 export * from './useAgUi';
 export * from './ComponentCatalog';
+export * from './types';
+export * from './utils';

package/dist/index.js

@@ -10,7 +10,7 @@
     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 } from "./index-CZSBRZbI.js";
+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";
@@ -64,12 +64,13 @@ export {
   V as creditCardMatcher,
   W as dark,
   X as generatePrompt,
-  Y as light,
-  Z as remarkComponent,
-  _ as remarkCve,
-  $ as remarkRedact,
-  a0 as ssnMatcher,
-  a1 as useAgUi,
-  a2 as validateSpec
+  Y as groupSessionsByDate,
+  Z as light,
+  _ as remarkComponent,
+  $ as remarkCve,
+  a0 as remarkRedact,
+  a1 as ssnMatcher,
+  a2 as useAgUi,
+  a3 as validateSpec
 };
 //# sourceMappingURL=index.js.map

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) {
@@ -185,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",
@@ -656,7 +666,9 @@
     ({
       allowedFiles,
       placeholder = "Type a message...",
+      allowMultipleFiles = false,
       defaultValue,
+      className,
       sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
       stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
       attachIcon,
@@ -664,7 +676,8 @@
       commands,
       minHeight = 24,
       maxHeight = 200,
-      autoFocus = true
+      autoFocus = true,
+      onMessageChange
     }, ref) => {
       const {
         theme,
@@ -693,6 +706,7 @@
         setValue: (value) => {
           setMessage(value);
           inputRef.current?.setValue(value);
+          onMessageChange?.(value);
         },
         insertText: (text) => {
           inputRef.current?.insertText(text);
@@ -715,18 +729,19 @@
         },
         [sendMessage]
       );
-      const handleChange = React.useCallback((value) => {
-        setMessage(value);
-      }, []);
-      const handleFileUpload = React.useCallback(
-        (event) => {
-          const file = event.target.files?.[0];
-          if (file && fileUpload) {
-            fileUpload(file);
-          }
+      const handleChange = React.useCallback(
+        (value) => {
+          setMessage(value);
+          onMessageChange?.(value);
         },
-        [fileUpload]
+        [onMessageChange]
       );
+      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]
@@ -735,7 +750,7 @@
         () => commands ? { ...commands, trigger: commands.trigger || "/" } : void 0,
         [commands]
       );
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: reablocks.cn(theme.input.base), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn("relative flex-1", theme.input.input), children: [
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: reablocks.cn(theme.input.base, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn("relative flex-1", theme.input.input), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           RichTextInput,
           {
@@ -758,6 +773,7 @@
             FileInput,
             {
               allowedFiles,
+              multiple: allowMultipleFiles,
               onFileUpload: handleFileUpload,
               isLoading,
               disabled,
@@ -1858,14 +1874,17 @@
   const CodeHighlighter = ({
     className,
     children,
+    inlineClassName,
     copyClassName,
     copyIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgCopy, {}),
     language,
     toolbarClassName,
-    theme = dark
+    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");
@@ -1873,6 +1892,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 }),
@@ -1888,14 +1910,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 });
@@ -1905,16 +1920,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),
@@ -1943,10 +1961,17 @@
           }
         ),
         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(
@@ -2088,25 +2113,18 @@
     ] });
   };
   const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
-  function remarkCve() {
-    return (tree, _file) => {
-      mdastUtilFindAndReplace.findAndReplace(tree, [[
+  const remarkCve = () => (tree) => {
+    mdastUtilFindAndReplace.findAndReplace(tree, [
+      [
         CVE_REGEX,
-        replaceCve
-      ]]);
-    };
-    function replaceCve(value, id) {
-      return [
-        {
+        (value) => ({
           type: "link",
-          url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
-          children: [
-            { children: [{ type: "text", value: value.trim() }] }
-          ]
-        }
-      ];
-    }
-  }
+          url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${value.trim()}`,
+          children: [{ type: "text", value: value.trim() }]
+        })
+      ]
+    ]);
+  };
   const remarkComponent = (_options = {}) => {
     return () => {
     };
@@ -2446,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,
               {
@@ -2473,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,
               {
@@ -2491,7 +2509,6 @@
       );
     }
   );
-  MessageResponse.displayName = "MessageResponse";
   const MessageSource = ({ title, url, image, limit = 50 }) => {
     const { theme, isCompact } = React.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2623,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,
           {
@@ -2666,8 +2683,14 @@ ${response}` : ""}`);
     children,
     newSessionContent,
     limit = 10,
+    className,
     showMoreText = "Show more",
-    showScrollBottomButton = false
+    autoScroll = true,
+    showLoadMoreButton = false,
+    showScrollBottomButton,
+    loadMoreButtonDisabled,
+    onScroll,
+    onLoadMore
   }) => {
     const { activeSession, theme } = React.useContext(ChatContext);
     const contentRef = React.useRef(null);
@@ -2690,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);
@@ -2721,21 +2744,23 @@ ${response}` : ""}`);
     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?.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
               }
             ),
@@ -2748,7 +2773,7 @@ ${response}` : ""}`);
                 animate: "visible",
                 onAnimationComplete: () => requestAnimationFrame(() => {
                   setIsAnimating(false);
-                  if (contentRef.current) {
+                  if (contentRef.current && autoScroll) {
                     contentRef.current.scrollTop = contentRef.current.scrollHeight;
                   }
                 }),
@@ -2779,7 +2804,7 @@ ${response}` : ""}`);
             {
               onClick: handleScrollToBottom,
               className: theme.messages?.message?.scrollToBottom?.button,
-              size: "sm",
+              size: "small",
               children: /* @__PURE__ */ jsxRuntime.jsx(SvgArrowDown, {})
             }
           )
@@ -4139,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;