reachat 2.1.0-alpha.20 → 2.1.0-alpha.22

package/dist/{index-DNefh8rs.js → index-CWCW-OiG.js}

@@ -2,17 +2,19 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn, ConnectedOverlay, Button, Textarea, IconButton, Ellipsis, Card, Divider, useInfinityList, DateFormat, ListItem, List } from "reablocks";
 import { AnimatePresence, motion } from "motion/react";
 import * as React from "react";
-import { createContext, useState, useCallback, useEffect, useMemo, memo, useRef, useContext, forwardRef, useImperativeHandle, lazy, Suspense } from "react";
+import { createContext, useState, useCallback, useEffect, useMemo, memo, useRef, useContext, forwardRef, useImperativeHandle, isValidElement, cloneElement, lazy, Suspense } from "react";
 import { useHotkeys } from "reakeys";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkYoutube from "remark-youtube";
 import { offset } from "@floating-ui/react";
+import { useDropzone } from "react-dropzone";
 import { Prism } from "react-syntax-highlighter";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import { Slot } from "@radix-ui/react-slot";
+import debounce from "lodash/debounce";
 import { isToday, isYesterday, isThisWeek, differenceInYears, format } from "date-fns";
 const chatTheme = {
   base: "text-content-text-neutral-base",
@@ -20,6 +22,33 @@ const chatTheme = {
   companion: "w-full h-full overflow-hidden",
   empty: "text-center flex-1",
   appbar: "flex p-5",
+  status: {
+    base: "py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30",
+    header: "flex items-center gap-2",
+    icon: {
+      base: "flex-shrink-0 w-4 h-4",
+      loading: "text-blue-500 dark:text-blue-400",
+      complete: "text-green-500 dark:text-green-400",
+      error: "text-red-500 dark:text-red-400"
+    },
+    text: {
+      base: "text-sm",
+      loading: "text-gray-600 dark:text-gray-400",
+      complete: "text-gray-600 dark:text-gray-400",
+      error: "text-red-600 dark:text-red-400"
+    },
+    steps: {
+      base: "mt-1 ml-6 space-y-0.5",
+      step: {
+        base: "flex items-center gap-2",
+        icon: "flex-shrink-0 w-3.5 h-3.5",
+        text: "text-sm",
+        loading: "text-gray-500 dark:text-gray-500",
+        complete: "text-gray-500 dark:text-gray-500",
+        error: "text-red-500 dark:text-red-400"
+      }
+    }
+  },
   sessions: {
     base: "overflow-auto",
     console: "min-w-[150px] w-[30%] max-w-[300px] bg-gradient-neutral-200 p-5 rounded-3xl",
@@ -34,7 +63,7 @@ const chatTheme = {
   },
   messages: {
     base: "",
-    console: "flex flex-col mx-5 flex-1 overflow-hidden",
+    console: "flex flex-col mx-5 flex-1 min-h-0",
     companion: "flex w-full h-full",
     back: "self-start pl-0 my-2 ",
     inner: "flex-1 h-full flex flex-col",
@@ -49,7 +78,11 @@ const chatTheme = {
       response: "relative data-[compact=false]:px-4 text-content-text-neutral-base",
       overlay: "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent after:to-effects-shadows-base-2-xl",
       cursor: "inline-block w-1 h-4 bg-current",
-      expand: "absolute bottom-0 right-1 z-10",
+      expand: "absolute bottom-1 right-1 z-10",
+      scrollToBottom: {
+        container: "absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10",
+        button: "rounded-full p-2 shadow-lg"
+      },
       files: {
         base: "mb-2 flex flex-wrap gap-3 ",
         file: {
@@ -118,6 +151,26 @@ const chatTheme = {
       base: "absolute flex gap-2 items-center right-2 inset-y-1/2 -translate-y-1/2 z-10",
       send: "px-3 py-3 hover:bg-primary-hover rounded-full size-8",
       stop: "px-2 py-2 bg-content-assets-semantic-error-base text-white rounded-full hover:bg-content-assets-semantic-error-1 size-8"
+    },
+    dropzone: {
+      base: "relative w-full",
+      active: "ring-1 ring-primary ring-offset-2 rounded-3xl",
+      overlay: "absolute inset-0 bg-primary/10 border-2 border-dashed border-primary rounded-3xl flex items-center justify-center gap-1.5 z-20 backdrop-blur-sm",
+      text: "text-primary font-medium text-sm",
+      icon: "[&>svg]:w-4 [&>svg]:h-4 text-primary"
+    }
+  },
+  suggestions: {
+    base: "flex flex-wrap gap-2 mt-4",
+    item: {
+      base: [
+        "rounded-full! max-w-full py-2 px-4",
+        "bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700",
+        "dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200",
+        "[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0"
+      ].join(" "),
+      icon: "w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0",
+      text: "text-sm truncate"
     }
   }
 };
@@ -291,12 +344,60 @@ const ChatBubble = memo(
 );
 const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M15.3451 0.654003C15.0011 0.310003 14.5001 0.191003 14.0401 0.339003L1.11712 4.493C0.626116 4.651 0.286116 5.067 0.230116 5.58C0.174116 6.092 0.417116 6.572 0.862116 6.831L5.43812 9.5L9.39112 5.546C9.68412 5.253 10.1591 5.253 10.4521 5.546C10.7451 5.839 10.7451 6.314 10.4521 6.607L6.49812 10.561L9.16712 15.137C9.40211 15.539 9.81712 15.776 10.2741 15.776C10.3221 15.776 10.3711 15.773 10.4201 15.768C10.9321 15.712 11.3491 15.372 11.5061 14.882L15.6611 1.96C15.8091 1.497 15.6881 0.997003 15.3451 0.654003Z", fill: "currentColor" }));
 const SvgStop = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 37.690466 12.309534 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 13.390466 46 4 36.609534 4 25 C 4 13.390466 13.390466 4 25 4 z M 32.990234 15.986328 A 1.0001 1.0001 0 0 0 32.292969 16.292969 L 25 23.585938 L 17.707031 16.292969 A 1.0001 1.0001 0 0 0 16.990234 15.990234 A 1.0001 1.0001 0 0 0 16.292969 17.707031 L 23.585938 25 L 16.292969 32.292969 A 1.0001 1.0001 0 1 0 17.707031 33.707031 L 25 26.414062 L 32.292969 33.707031 A 1.0001 1.0001 0 1 0 33.707031 32.292969 L 26.414062 25 L 33.707031 17.707031 A 1.0001 1.0001 0 0 0 32.990234 15.986328 z", fill: "currentColor" }));
+const SvgUpload = (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-upload", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ React.createElement("polyline", { points: "17 8 12 3 7 8" }), /* @__PURE__ */ React.createElement("line", { x1: 12, x2: 12, y1: 3, y2: 15 }));
+const FileDropzone = ({
+  allowedFiles,
+  multiple = false,
+  disabled,
+  dropIcon = /* @__PURE__ */ jsx(SvgUpload, {}),
+  dropText = "Drop files here to upload",
+  children,
+  onFileDrop
+}) => {
+  const { theme } = useContext(ChatContext);
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      if (onFileDrop && acceptedFiles.length > 0) {
+        if (multiple) {
+          acceptedFiles.forEach((file) => onFileDrop(file));
+        } else {
+          onFileDrop(acceptedFiles[0]);
+        }
+      }
+    },
+    [onFileDrop, multiple]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple,
+    noClick: true,
+    noKeyboard: true,
+    disabled: disabled || !allowedFiles?.length
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps(),
+      className: cn(
+        theme.input.dropzone.base,
+        isDragActive && theme.input.dropzone.active
+      ),
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+        isDragActive && /* @__PURE__ */ jsxs("div", { className: cn(theme.input.dropzone.overlay), children: [
+          dropIcon && /* @__PURE__ */ jsx("span", { className: cn(theme.input.dropzone.icon), children: dropIcon }),
+          /* @__PURE__ */ jsx("span", { className: cn(theme.input.dropzone.text), children: dropText })
+        ] }),
+        children
+      ]
+    }
+  );
+};
 const SvgPaperclip = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M25.3,56.007c-3.409,0-6.818-1.297-9.414-3.893c-2.595-2.596-3.893-6.005-3.893-9.415c0-3.409,1.298-6.819,3.893-9.414 l20.4-20.4c1.847-1.847,4.302-2.864,6.914-2.864c2.611,0,5.067,1.017,6.914,2.864c3.812,3.813,3.812,10.016,0,13.829l-20.4,20.4 c-2.438,2.439-6.385,2.441-8.828,0c-2.434-2.435-2.434-6.395,0-8.829l13.7-13.7c0.781-0.781,2.047-0.781,2.828,0 c0.781,0.781,0.781,2.047,0,2.828l-13.7,13.7c-0.874,0.875-0.874,2.297,0.001,3.172c0.847,0.846,2.324,0.846,3.171,0l20.4-20.4 c2.252-2.253,2.252-5.919,0-8.172c-1.092-1.091-2.543-1.692-4.086-1.692c-1.544,0-2.994,0.601-4.086,1.692l-20.4,20.4 c-1.815,1.816-2.723,4.201-2.723,6.586c0,2.385,0.908,4.77,2.723,6.586c1.816,1.815,4.201,2.723,6.586,2.723 c2.385,0,4.771-0.907,6.586-2.723l12.7-12.7c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828l-12.7,12.7 C32.119,54.709,28.71,56.007,25.3,56.007z", fill: "currentColor" }));
 const FileInput = ({
   allowedFiles,
   multiple,
   onFileUpload,
-  isLoading,
   disabled,
   attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
 }) => {
@@ -324,7 +425,7 @@ const FileInput = ({
       {
         title: "Upload",
         variant: "text",
-        disabled: isLoading || disabled,
+        disabled,
         className: cn(theme.input.upload),
         onClick: () => fileInputRef.current?.click(),
         children: attachIcon
@@ -343,6 +444,8 @@ const ChatInput = forwardRef(
     sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
     stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
     attachIcon,
+    dropIcon,
+    dropText,
     onMessageChange
   }, ref) => {
     const {
@@ -357,7 +460,7 @@ const ChatInput = forwardRef(
     const [internalMessage, setInternalMessage] = useState("");
     const inputRef = useRef(null);
     useEffect(() => {
-      setInternalMessage(message || "");
+      setInternalMessage(message);
     }, [message]);
     useEffect(() => {
       if (inputRef.current) {
@@ -411,58 +514,120 @@ const ChatInput = forwardRef(
       },
       [onMessageChange]
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn(theme.input.base, className), children: [
-      /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          ref: inputRef,
-          containerClassName: cn(theme.input.input),
-          minRows: 1,
-          autoFocus: true,
-          value: internalMessage,
-          defaultValue,
-          onKeyPress: handleKeyPress,
-          placeholder,
-          disabled: isLoading || disabled,
-          onChange: handleMessageChange
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
-        allowedFiles?.length > 0 && /* @__PURE__ */ jsx(
-          FileInput,
-          {
-            allowedFiles,
-            multiple: allowMultipleFiles,
-            onFileUpload: handleFileUpload,
-            isLoading,
-            disabled,
-            attachIcon
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx(
-          Button,
-          {
-            title: "Stop",
-            className: cn(theme.input.actions.stop),
-            onClick: stopMessage,
-            disabled,
-            children: stopIcon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            title: "Send",
-            className: cn(theme.input.actions.send),
-            onClick: handleSendMessage,
-            disabled: isLoading || disabled,
-            children: sendIcon
-          }
-        )
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: cn(theme.input.base, className), children: /* @__PURE__ */ jsxs(
+      FileDropzone,
+      {
+        allowedFiles,
+        multiple: allowMultipleFiles,
+        disabled: disabled || isLoading,
+        dropIcon,
+        dropText,
+        onFileDrop: fileUpload,
+        children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: inputRef,
+              containerClassName: cn(theme.input.input),
+              minRows: 1,
+              autoFocus: true,
+              value: internalMessage,
+              defaultValue,
+              onKeyPress: handleKeyPress,
+              placeholder,
+              disabled: isLoading || disabled,
+              onChange: handleMessageChange
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
+            allowedFiles?.length > 0 && /* @__PURE__ */ jsx(
+              FileInput,
+              {
+                allowedFiles,
+                multiple: allowMultipleFiles,
+                onFileUpload: handleFileUpload,
+                disabled: disabled || isLoading,
+                attachIcon
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx(
+              Button,
+              {
+                title: "Stop",
+                className: cn(theme.input.actions.stop),
+                onClick: stopMessage,
+                disabled,
+                children: stopIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                title: "Send",
+                className: cn(theme.input.actions.send),
+                onClick: handleSendMessage,
+                disabled: isLoading || disabled,
+                children: sendIcon
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
   }
 );
+const ChatSuggestion = ({
+  content,
+  onClick
+}) => {
+  const { theme, disabled, isLoading } = useContext(ChatContext);
+  const handleClick = () => {
+    if (disabled || isLoading) return;
+    onClick?.(content);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      disableMargins: true,
+      className: cn(theme.suggestions.item.base, {
+        "opacity-50 cursor-not-allowed": disabled || isLoading
+      }),
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      children: /* @__PURE__ */ jsx("span", { className: cn(theme.suggestions.item.text), children: content })
+    }
+  );
+};
+const ChatSuggestions = ({
+  suggestions,
+  className,
+  onSuggestionClick,
+  children
+}) => {
+  const { theme } = useContext(ChatContext);
+  if (!suggestions || suggestions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(theme.suggestions.base, className), children: suggestions.map((suggestion) => {
+    if (children && isValidElement(children)) {
+      return cloneElement(children, {
+        key: suggestion.id,
+        ...suggestion,
+        onClick: onSuggestionClick
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      ChatSuggestion,
+      {
+        ...suggestion,
+        onClick: onSuggestionClick
+      },
+      suggestion.id
+    );
+  }) });
+};
 const SvgCopy = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.75 6C2.164 6 2.5 6.336 2.5 6.75V13.25C2.5 13.939 3.061 14.5 3.75 14.5H12.25C12.664 14.5 13 14.836 13 15.25C13 15.664 12.664 16 12.25 16H3.75C2.233 16 1 14.767 1 13.25V6.75C1 6.336 1.336 6 1.75 6ZM14.25 2C15.7688 2 17 3.23122 17 4.75V10.25C17 11.7688 15.7688 13 14.25 13H6.75C5.23122 13 4 11.7688 4 10.25V4.75C4 3.23122 5.23122 2 6.75 2H14.25Z", fill: "currentColor" }));
 const dark = {
   'code[class*="language-"]': {
@@ -1582,6 +1747,131 @@ function replaceCve(value) {
     children: [{ type: "text", value: value.trim() }]
   };
 }
+const SvgSpinner = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+const SvgCheck = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("polyline", { points: "20 6 9 17 4 12" }));
+const SvgError = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 10 }), /* @__PURE__ */ React.createElement("line", { x1: 15, y1: 9, x2: 9, y2: 15 }), /* @__PURE__ */ React.createElement("line", { x1: 9, y1: 9, x2: 15, y2: 15 }));
+const StatusIcon = ({
+  state,
+  className,
+  colorClassName
+}) => {
+  switch (state) {
+    case "loading":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: { rotate: 360 },
+          transition: { duration: 1, repeat: Infinity, ease: "linear" },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgSpinner, { className: "w-full h-full" })
+        }
+      );
+    case "complete":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { scale: 0, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { type: "spring", stiffness: 500, damping: 25 },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgCheck, { className: "w-full h-full" })
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { scale: 0, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { type: "spring", stiffness: 500, damping: 25 },
+          className: cn(className, colorClassName),
+          children: /* @__PURE__ */ jsx(SvgError, { className: "w-full h-full" })
+        }
+      );
+  }
+};
+const MessageStatusItem = ({ step }) => {
+  const { theme: chatTheme2 } = useContext(ChatContext);
+  const theme = chatTheme2.status.steps.step;
+  const stepStatus = step.status || "loading";
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, x: -10 },
+      animate: { opacity: 1, x: 0 },
+      transition: { duration: 0.2 },
+      className: theme.base,
+      children: [
+        /* @__PURE__ */ jsx(
+          StatusIcon,
+          {
+            state: stepStatus,
+            className: theme.icon,
+            colorClassName: theme[stepStatus]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              theme.text,
+              stepStatus === "loading" && theme.loading,
+              stepStatus === "complete" && theme.complete,
+              stepStatus === "error" && theme.error
+            ),
+            children: step.text
+          }
+        )
+      ]
+    }
+  );
+};
+const MessageStatus = ({
+  status = "loading",
+  text,
+  steps,
+  icon,
+  className,
+  children
+}) => {
+  const { theme: chatTheme2 } = useContext(ChatContext);
+  const theme = chatTheme2.status;
+  const Comp = children ? Slot : "div";
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.2 },
+      children: /* @__PURE__ */ jsx(Comp, { className: cn(theme.base, className), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: theme.header, children: [
+          icon || /* @__PURE__ */ jsx(
+            StatusIcon,
+            {
+              state: status,
+              className: theme.icon.base,
+              colorClassName: theme.icon[status]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                theme.text.base,
+                status === "loading" && theme.text.loading,
+                status === "complete" && theme.text.complete,
+                status === "error" && theme.text.error
+              ),
+              children: text
+            }
+          )
+        ] }),
+        steps && steps.length > 0 && /* @__PURE__ */ jsx("div", { className: theme.steps.base, children: steps.map((step) => /* @__PURE__ */ jsx(MessageStatusItem, { step }, step.id)) })
+      ] }) })
+    }
+  ) });
+};
 const SessionEmpty = ({ children }) => {
   const { theme } = useContext(ChatContext);
   return /* @__PURE__ */ jsx("div", { className: cn(theme.empty), children });
@@ -1664,9 +1954,9 @@ ${response}`),
 };
 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-CszY8p_0.js")
+  () => import("./DefaultFileRenderer-3oHDLIk4.js")
 );
-const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-B7eSDub6.js"));
+const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-DC2ZhtNx.js"));
 const ImageFileRenderer = lazy(() => import("./ImageFileRenderer-C8tVW3I8.js"));
 const PDFFileRenderer = lazy(() => import("./PDFFileRenderer-BBn2EVrV.js"));
 const FILE_TYPE_RENDERER_MAP = {
@@ -1768,11 +2058,15 @@ const MessageQuestion = ({
   const ref = useRef(null);
   const calculateTruncation = useCallback(() => {
     const el = ref.current;
-    setTruncated(el.scrollHeight > el.clientHeight);
+    if (el) {
+      setTruncated(el.scrollHeight > el.clientHeight);
+    }
   }, []);
   useEffect(() => {
     const el = ref.current;
-    if (!el || previewLineClamp === false) return;
+    if (!el || previewLineClamp === false) {
+      return;
+    }
     calculateTruncation();
     const resizeObserver = new ResizeObserver(() => {
       calculateTruncation();
@@ -1995,6 +2289,7 @@ const SessionMessagePanel = ({
     }
   );
 };
+const SvgArrowDown = (props) => /* @__PURE__ */ React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0 mix-blend-luminosity", "aria-hidden": "true", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 3C10.2761 3.00006 10.5 3.2239 10.5 3.5V15.293L14.6465 11.1465C14.8418 10.9514 15.1583 10.9513 15.3536 11.1465C15.5487 11.3417 15.5486 11.6583 15.3536 11.8535L10.3535 16.8535C10.2598 16.9473 10.1326 17 10 17C9.90062 17 9.8042 16.9703 9.72268 16.916L9.64651 16.8535L4.6465 11.8535C4.45138 11.6582 4.45128 11.3417 4.6465 11.1465C4.84172 10.9513 5.15827 10.9514 5.35353 11.1465L9.50003 15.293V3.5C9.50003 3.22386 9.72389 3 10 3Z" }));
 const containerVariants = {
   hidden: {},
   visible: {
@@ -2011,11 +2306,29 @@ const SessionMessages = ({
   className,
   showMoreText = "Show more",
   autoScroll = true,
+  showScrollBottomButton = false,
   onScroll
 }) => {
   const { activeSession, theme } = useContext(ChatContext);
   const contentRef = useRef(null);
+  const messagesRef = useRef(null);
   const [isAnimating, setIsAnimating] = useState(true);
+  const [iAtBottom, setIsAtBottom] = useState(true);
+  useEffect(() => {
+    if (!contentRef.current || !showScrollBottomButton) {
+      return;
+    }
+    const handleScroll = debounce(() => {
+      if (contentRef.current) {
+        setIsAtBottom(
+          contentRef.current.scrollHeight - contentRef.current.clientHeight === contentRef.current.scrollTop
+        );
+      }
+    }, 50);
+    const currentRef = contentRef.current;
+    currentRef.addEventListener("scroll", handleScroll);
+    return () => currentRef.removeEventListener("scroll", handleScroll);
+  }, [showScrollBottomButton]);
   useEffect(() => {
     if (contentRef.current && autoScroll) {
       requestAnimationFrame(
@@ -2023,10 +2336,18 @@ const SessionMessages = ({
       );
     }
   }, [activeSession, autoScroll, isAnimating]);
-  function handleShowMore() {
+  const handleShowMore = () => {
     showNext(limit);
     requestAnimationFrame(() => contentRef.current.scrollTop = 0);
-  }
+  };
+  const handleScrollToBottom = () => {
+    if (contentRef.current) {
+      contentRef.current.scrollTo({
+        top: contentRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  };
   const reversedConvos = useMemo(
     () => [...activeSession?.conversations ?? []].reverse(),
     [activeSession]
@@ -2040,46 +2361,72 @@ const SessionMessages = ({
   if (!activeSession) {
     return /* @__PURE__ */ jsx(SessionEmpty, { children: newSessionContent });
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(theme.messages.content, className),
-      ref: contentRef,
-      onScrollCapture: onScroll,
-      children: [
-        hasMore && /* @__PURE__ */ jsx(
-          Button,
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(theme.messages.content, className, "h-full"),
+        ref: contentRef,
+        id: activeSession?.id,
+        onScrollCapture: onScroll,
+        children: [
+          hasMore && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: cn(theme.messages.showMore),
+              fullWidth: true,
+              onClick: handleShowMore,
+              children: showMoreText
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: messagesRef,
+              variants: containerVariants,
+              initial: "hidden",
+              animate: "visible",
+              onAnimationComplete: () => requestAnimationFrame(() => {
+                setIsAnimating(false);
+                if (contentRef.current && autoScroll) {
+                  contentRef.current.scrollTop = contentRef.current.scrollHeight;
+                }
+              }),
+              children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsx(
+                SessionMessage,
+                {
+                  conversation,
+                  isLast: index === convosToRender.length - 1
+                },
+                conversation.id
+              ))
+            },
+            activeSession?.id
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !iAtBottom && showScrollBottomButton && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { y: 100, opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+        exit: { y: 100, opacity: 0 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: theme.messages?.message?.scrollToBottom?.container,
+        children: /* @__PURE__ */ jsx(
+          IconButton,
           {
-            variant: "outline",
-            className: cn(theme.messages.showMore),
-            fullWidth: true,
-            onClick: handleShowMore,
-            children: showMoreText
+            onClick: handleScrollToBottom,
+            className: theme.messages?.message?.scrollToBottom?.button,
+            size: "sm",
+            children: /* @__PURE__ */ jsx(SvgArrowDown, {})
           }
-        ),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            variants: containerVariants,
-            initial: "hidden",
-            animate: "visible",
-            onAnimationComplete: () => {
-              requestAnimationFrame(() => setIsAnimating(false));
-            },
-            children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsx(
-              SessionMessage,
-              {
-                conversation,
-                isLast: index === conversation.length - 1
-              },
-              conversation.id
-            ))
-          },
-          activeSession?.id
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    ) })
+  ] });
 };
 const SessionMessagesHeader = ({ children }) => {
   const { activeSession, theme } = useContext(ChatContext);
@@ -2289,10 +2636,16 @@ const SessionsList = ({
 };
 export {
   AppBar as A,
-  chatTheme as B,
+  SessionMessages as B,
   ChatContext as C,
-  groupSessionsByDate as D,
-  FileInput as F,
+  SessionMessagesHeader as D,
+  SessionGroups as E,
+  FileDropzone as F,
+  SessionListItem as G,
+  SessionsGroup as H,
+  SessionsList as I,
+  chatTheme as J,
+  groupSessionsByDate as K,
   Markdown as M,
   NewSessionButton as N,
   SvgFile as S,
@@ -2301,27 +2654,27 @@ export {
   Chat as b,
   ChatBubble as c,
   ChatInput as d,
-  CodeHighlighter as e,
-  TableHeaderCell as f,
-  TableDataCell as g,
-  dark as h,
-  SessionEmpty as i,
-  MessageActions as j,
-  MessageFile as k,
+  FileInput as e,
+  ChatSuggestions as f,
+  ChatSuggestion as g,
+  CodeHighlighter as h,
+  TableHeaderCell as i,
+  TableDataCell as j,
+  dark as k,
   light as l,
-  MessageFiles as m,
-  MessageQuestion as n,
-  MessageResponse as o,
-  MessageSource as p,
-  MessageSources as q,
+  MessageStatus as m,
+  MessageStatusItem as n,
+  StatusIcon as o,
+  SessionEmpty as p,
+  MessageActions as q,
   remarkCve as r,
-  SessionMessage as s,
-  SessionMessagePanel as t,
-  SessionMessages as u,
-  SessionMessagesHeader as v,
-  SessionGroups as w,
-  SessionListItem as x,
-  SessionsGroup as y,
-  SessionsList as z
+  MessageFile as s,
+  MessageFiles as t,
+  MessageQuestion as u,
+  MessageResponse as v,
+  MessageSource as w,
+  MessageSources as x,
+  SessionMessage as y,
+  SessionMessagePanel as z
 };
-//# sourceMappingURL=index-DNefh8rs.js.map
+//# sourceMappingURL=index-CWCW-OiG.js.map