reachat 3.1.0 → 3.2.0

package/dist/{index-CZSBRZbI.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) {
@@ -180,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",
@@ -651,6 +661,7 @@ const ChatInput = forwardRef(
   ({
     allowedFiles,
     placeholder = "Type a message...",
+    allowMultipleFiles = false,
     defaultValue,
     sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
     stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
@@ -713,15 +724,12 @@ const ChatInput = forwardRef(
     const handleChange = useCallback((value) => {
       setMessage(value);
     }, []);
-    const handleFileUpload = useCallback(
-      (event) => {
-        const file = event.target.files?.[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]
@@ -753,6 +761,7 @@ const ChatInput = forwardRef(
           FileInput,
           {
             allowedFiles,
+            multiple: allowMultipleFiles,
             onFileUpload: handleFileUpload,
             isLoading,
             disabled,
@@ -1853,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?.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");
@@ -1868,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 }),
@@ -1883,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 });
@@ -1900,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),
@@ -1938,10 +1949,17 @@ 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(
@@ -2160,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-Day12qYs.js"));
-const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-C2E4Xnkz.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 = {
@@ -2281,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,
             {
@@ -2308,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,
             {
@@ -2326,7 +2344,6 @@ const MessageResponse = memo(
     );
   }
 );
-MessageResponse.displayName = "MessageResponse";
 const MessageSource = ({ title, url, image, limit = 50 }) => {
   const { theme, isCompact } = useContext(ChatContext);
   return /* @__PURE__ */ jsxs(
@@ -2458,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,
         {
@@ -2501,8 +2518,14 @@ const SessionMessages = ({
   children,
   newSessionContent,
   limit = 10,
+  className,
   showMoreText = "Show more",
-  showScrollBottomButton = false
+  autoScroll = true,
+  showLoadMoreButton = false,
+  showScrollBottomButton,
+  loadMoreButtonDisabled,
+  onScroll,
+  onLoadMore
 }) => {
   const { activeSession, theme } = useContext(ChatContext);
   const contentRef = useRef(null);
@@ -2525,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);
@@ -2556,21 +2579,23 @@ const SessionMessages = ({
   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?.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
             }
           ),
@@ -2583,7 +2608,7 @@ const SessionMessages = ({
               animate: "visible",
               onAnimationComplete: () => requestAnimationFrame(() => {
                 setIsAnimating(false);
-                if (contentRef.current) {
+                if (contentRef.current && autoScroll) {
                   contentRef.current.scrollTop = contentRef.current.scrollHeight;
                 }
               }),
@@ -2614,7 +2639,7 @@ const SessionMessages = ({
           {
             onClick: handleScrollToBottom,
             className: theme.messages?.message?.scrollToBottom?.button,
-            size: "sm",
+            size: "small",
             children: /* @__PURE__ */ jsx(SvgArrowDown, {})
           }
         )
@@ -3927,7 +3952,7 @@ function createChartComponentDef() {
   };
 }
 export {
-  remarkRedact as $,
+  remarkCve as $,
   AgUiEventType as A,
   SessionMessages as B,
   ChartRenderer as C,
@@ -3952,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,
@@ -3985,4 +4011,4 @@ export {
   SessionMessage as y,
   SessionMessagePanel as z
 };
-//# sourceMappingURL=index-CZSBRZbI.js.map
+//# sourceMappingURL=index-iuJAmrEE.js.map