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

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("motion/react"), require("reablocks"), require("react"), require("reakeys"), require("remark-gfm"), require("remark-math"), require("remark-youtube"), require("@floating-ui/react"), require("react-syntax-highlighter"), require("react-markdown"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("@radix-ui/react-slot"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "motion/react", "reablocks", "react", "reakeys", "remark-gfm", "remark-math", "remark-youtube", "@floating-ui/react", "react-syntax-highlighter", "react-markdown", "rehype-katex", "mdast-util-find-and-replace", "@radix-ui/react-slot", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.react, global.reablocks, global.React, global.reakeys, global.remarkGfm, global.remarkMath, global.remarkYoutube, global.react$1, global.reactSyntaxHighlighter, global.ReactMarkdown, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reactSlot, global.dateFns));
-})(this, (function(exports2, jsxRuntime, react, reablocks, React, reakeys, remarkGfm, remarkMath, remarkYoutube, react$1, reactSyntaxHighlighter, ReactMarkdown, rehypeKatex, mdastUtilFindAndReplace, reactSlot, dateFns) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("motion/react"), require("reablocks"), require("react"), require("reakeys"), require("remark-gfm"), require("remark-math"), require("remark-youtube"), require("@floating-ui/react"), require("react-dropzone"), require("react-syntax-highlighter"), require("react-markdown"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("@radix-ui/react-slot"), require("lodash/debounce"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "motion/react", "reablocks", "react", "reakeys", "remark-gfm", "remark-math", "remark-youtube", "@floating-ui/react", "react-dropzone", "react-syntax-highlighter", "react-markdown", "rehype-katex", "mdast-util-find-and-replace", "@radix-ui/react-slot", "lodash/debounce", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.react, global.reablocks, global.React, global.reakeys, global.remarkGfm, global.remarkMath, global.remarkYoutube, global.react$1, global.reactDropzone, global.reactSyntaxHighlighter, global.ReactMarkdown, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reactSlot, global.debounce, global.dateFns));
+})(this, (function(exports2, jsxRuntime, react, reablocks, React, reakeys, remarkGfm, remarkMath, remarkYoutube, react$1, reactDropzone, reactSyntaxHighlighter, ReactMarkdown, rehypeKatex, mdastUtilFindAndReplace, reactSlot, debounce, dateFns) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -37,6 +37,33 @@
     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",
@@ -51,7 +78,7 @@
     },
     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",
@@ -66,7 +93,11 @@
         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: {
@@ -135,6 +166,26 @@
         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"
       }
     }
   };
@@ -308,12 +359,60 @@
   );
   const SvgSend = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.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__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-upload", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ React__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }), /* @__PURE__ */ React__namespace.createElement("line", { x1: 12, x2: 12, y1: 3, y2: 15 }));
+  const FileDropzone = ({
+    allowedFiles,
+    multiple = false,
+    disabled,
+    dropIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgUpload, {}),
+    dropText = "Drop files here to upload",
+    children,
+    onFileDrop
+  }) => {
+    const { theme } = React.useContext(ChatContext);
+    const onDrop = React.useCallback(
+      (acceptedFiles) => {
+        if (onFileDrop && acceptedFiles.length > 0) {
+          if (multiple) {
+            acceptedFiles.forEach((file) => onFileDrop(file));
+          } else {
+            onFileDrop(acceptedFiles[0]);
+          }
+        }
+      },
+      [onFileDrop, multiple]
+    );
+    const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
+      onDrop,
+      multiple,
+      noClick: true,
+      noKeyboard: true,
+      disabled: disabled || !allowedFiles?.length
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: reablocks.cn(
+          theme.input.dropzone.base,
+          isDragActive && theme.input.dropzone.active
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          isDragActive && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.dropzone.overlay), children: [
+            dropIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.input.dropzone.icon), children: dropIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.input.dropzone.text), children: dropText })
+          ] }),
+          children
+        ]
+      }
+    );
+  };
   const SvgPaperclip = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.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__ */ jsxRuntime.jsx(SvgPaperclip, {})
   }) => {
@@ -341,7 +440,7 @@
         {
           title: "Upload",
           variant: "text",
-          disabled: isLoading || disabled,
+          disabled,
           className: reablocks.cn(theme.input.upload),
           onClick: () => fileInputRef.current?.click(),
           children: attachIcon
@@ -360,6 +459,8 @@
       sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
       stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
       attachIcon,
+      dropIcon,
+      dropText,
       onMessageChange
     }, ref) => {
       const {
@@ -374,7 +475,7 @@
       const [internalMessage, setInternalMessage] = React.useState("");
       const inputRef = React.useRef(null);
       React.useEffect(() => {
-        setInternalMessage(message || "");
+        setInternalMessage(message);
       }, [message]);
       React.useEffect(() => {
         if (inputRef.current) {
@@ -428,58 +529,120 @@
         },
         [onMessageChange]
       );
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.base, className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reablocks.Textarea,
-          {
-            ref: inputRef,
-            containerClassName: reablocks.cn(theme.input.input),
-            minRows: 1,
-            autoFocus: true,
-            value: internalMessage,
-            defaultValue,
-            onKeyPress: handleKeyPress,
-            placeholder,
-            disabled: isLoading || disabled,
-            onChange: handleMessageChange
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
-          allowedFiles?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            FileInput,
-            {
-              allowedFiles,
-              multiple: allowMultipleFiles,
-              onFileUpload: handleFileUpload,
-              isLoading,
-              disabled,
-              attachIcon
-            }
-          ),
-          isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-            reablocks.Button,
-            {
-              title: "Stop",
-              className: reablocks.cn(theme.input.actions.stop),
-              onClick: stopMessage,
-              disabled,
-              children: stopIcon
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reablocks.Button,
-            {
-              title: "Send",
-              className: reablocks.cn(theme.input.actions.send),
-              onClick: handleSendMessage,
-              disabled: isLoading || disabled,
-              children: sendIcon
-            }
-          )
-        ] })
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.input.base, className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        FileDropzone,
+        {
+          allowedFiles,
+          multiple: allowMultipleFiles,
+          disabled: disabled || isLoading,
+          dropIcon,
+          dropText,
+          onFileDrop: fileUpload,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reablocks.Textarea,
+              {
+                ref: inputRef,
+                containerClassName: reablocks.cn(theme.input.input),
+                minRows: 1,
+                autoFocus: true,
+                value: internalMessage,
+                defaultValue,
+                onKeyPress: handleKeyPress,
+                placeholder,
+                disabled: isLoading || disabled,
+                onChange: handleMessageChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
+              allowedFiles?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                FileInput,
+                {
+                  allowedFiles,
+                  multiple: allowMultipleFiles,
+                  onFileUpload: handleFileUpload,
+                  disabled: disabled || isLoading,
+                  attachIcon
+                }
+              ),
+              isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+                reablocks.Button,
+                {
+                  title: "Stop",
+                  className: reablocks.cn(theme.input.actions.stop),
+                  onClick: stopMessage,
+                  disabled,
+                  children: stopIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reablocks.Button,
+                {
+                  title: "Send",
+                  className: reablocks.cn(theme.input.actions.send),
+                  onClick: handleSendMessage,
+                  disabled: isLoading || disabled,
+                  children: sendIcon
+                }
+              )
+            ] })
+          ]
+        }
+      ) });
     }
   );
+  const ChatSuggestion = ({
+    content,
+    onClick
+  }) => {
+    const { theme, disabled, isLoading } = React.useContext(ChatContext);
+    const handleClick = () => {
+      if (disabled || isLoading) return;
+      onClick?.(content);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reablocks.Button,
+      {
+        type: "button",
+        variant: "outline",
+        disableMargins: true,
+        className: reablocks.cn(theme.suggestions.item.base, {
+          "opacity-50 cursor-not-allowed": disabled || isLoading
+        }),
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.suggestions.item.text), children: content })
+      }
+    );
+  };
+  const ChatSuggestions = ({
+    suggestions,
+    className,
+    onSuggestionClick,
+    children
+  }) => {
+    const { theme } = React.useContext(ChatContext);
+    if (!suggestions || suggestions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.suggestions.base, className), children: suggestions.map((suggestion) => {
+      if (children && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+          key: suggestion.id,
+          ...suggestion,
+          onClick: onSuggestionClick
+        });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ChatSuggestion,
+        {
+          ...suggestion,
+          onClick: onSuggestionClick
+        },
+        suggestion.id
+      );
+    }) });
+  };
   const SvgCopy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...props }, /* @__PURE__ */ React__namespace.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-"]': {
@@ -1599,6 +1762,131 @@
       children: [{ type: "text", value: value.trim() }]
     };
   }
+  const SvgSpinner = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+  const SvgCheck = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React__namespace.createElement("polyline", { points: "20 6 9 17 4 12" }));
+  const SvgError = (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: 2, strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 12, cy: 12, r: 10 }), /* @__PURE__ */ React__namespace.createElement("line", { x1: 15, y1: 9, x2: 9, y2: 15 }), /* @__PURE__ */ React__namespace.createElement("line", { x1: 9, y1: 9, x2: 15, y2: 15 }));
+  const StatusIcon = ({
+    state,
+    className,
+    colorClassName
+  }) => {
+    switch (state) {
+      case "loading":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            animate: { rotate: 360 },
+            transition: { duration: 1, repeat: Infinity, ease: "linear" },
+            className: reablocks.cn(className, colorClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner, { className: "w-full h-full" })
+          }
+        );
+      case "complete":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { type: "spring", stiffness: 500, damping: 25 },
+            className: reablocks.cn(className, colorClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgCheck, { className: "w-full h-full" })
+          }
+        );
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { type: "spring", stiffness: 500, damping: 25 },
+            className: reablocks.cn(className, colorClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgError, { className: "w-full h-full" })
+          }
+        );
+    }
+  };
+  const MessageStatusItem = ({ step }) => {
+    const { theme: chatTheme2 } = React.useContext(ChatContext);
+    const theme = chatTheme2.status.steps.step;
+    const stepStatus = step.status || "loading";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react.motion.div,
+      {
+        initial: { opacity: 0, x: -10 },
+        animate: { opacity: 1, x: 0 },
+        transition: { duration: 0.2 },
+        className: theme.base,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StatusIcon,
+            {
+              state: stepStatus,
+              className: theme.icon,
+              colorClassName: theme[stepStatus]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: reablocks.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 } = React.useContext(ChatContext);
+    const theme = chatTheme2.status;
+    const Comp = children ? reactSlot.Slot : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.motion.div,
+      {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.base, className), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.header, children: [
+            icon || /* @__PURE__ */ jsxRuntime.jsx(
+              StatusIcon,
+              {
+                state: status,
+                className: theme.icon.base,
+                colorClassName: theme.icon[status]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: reablocks.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__ */ jsxRuntime.jsx("div", { className: theme.steps.base, children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(MessageStatusItem, { step }, step.id)) })
+        ] }) })
+      }
+    ) });
+  };
   const SessionEmpty = ({ children }) => {
     const { theme } = React.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.empty), children });
@@ -1953,11 +2241,15 @@ ${response}`),
     const ref = React.useRef(null);
     const calculateTruncation = React.useCallback(() => {
       const el = ref.current;
-      setTruncated(el.scrollHeight > el.clientHeight);
+      if (el) {
+        setTruncated(el.scrollHeight > el.clientHeight);
+      }
     }, []);
     React.useEffect(() => {
       const el = ref.current;
-      if (!el || previewLineClamp === false) return;
+      if (!el || previewLineClamp === false) {
+        return;
+      }
       calculateTruncation();
       const resizeObserver = new ResizeObserver(() => {
         calculateTruncation();
@@ -2180,6 +2472,7 @@ ${response}`),
       }
     );
   };
+  const SvgArrowDown = (props) => /* @__PURE__ */ React__namespace.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__namespace.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: {
@@ -2196,11 +2489,29 @@ ${response}`),
     className,
     showMoreText = "Show more",
     autoScroll = true,
+    showScrollBottomButton = false,
     onScroll
   }) => {
     const { activeSession, theme } = React.useContext(ChatContext);
     const contentRef = React.useRef(null);
+    const messagesRef = React.useRef(null);
     const [isAnimating, setIsAnimating] = React.useState(true);
+    const [iAtBottom, setIsAtBottom] = React.useState(true);
+    React.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]);
     React.useEffect(() => {
       if (contentRef.current && autoScroll) {
         requestAnimationFrame(
@@ -2208,10 +2519,18 @@ ${response}`),
         );
       }
     }, [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 = React.useMemo(
       () => [...activeSession?.conversations ?? []].reverse(),
       [activeSession]
@@ -2225,46 +2544,72 @@ ${response}`),
     if (!activeSession) {
       return /* @__PURE__ */ jsxRuntime.jsx(SessionEmpty, { children: newSessionContent });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: reablocks.cn(theme.messages.content, className),
-        ref: contentRef,
-        onScrollCapture: onScroll,
-        children: [
-          hasMore && /* @__PURE__ */ jsxRuntime.jsx(
-            reablocks.Button,
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-y-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: reablocks.cn(theme.messages.content, className, "h-full"),
+          ref: contentRef,
+          id: activeSession?.id,
+          onScrollCapture: onScroll,
+          children: [
+            hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+              reablocks.Button,
+              {
+                variant: "outline",
+                className: reablocks.cn(theme.messages.showMore),
+                fullWidth: true,
+                onClick: handleShowMore,
+                children: showMoreText
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.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__ */ jsxRuntime.jsx(
+                  SessionMessage,
+                  {
+                    conversation,
+                    isLast: index === convosToRender.length - 1
+                  },
+                  conversation.id
+                ))
+              },
+              activeSession?.id
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: !iAtBottom && showScrollBottomButton && /* @__PURE__ */ jsxRuntime.jsx(
+        react.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__ */ jsxRuntime.jsx(
+            reablocks.IconButton,
             {
-              variant: "outline",
-              className: reablocks.cn(theme.messages.showMore),
-              fullWidth: true,
-              onClick: handleShowMore,
-              children: showMoreText
+              onClick: handleScrollToBottom,
+              className: theme.messages?.message?.scrollToBottom?.button,
+              size: "sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgArrowDown, {})
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            react.motion.div,
-            {
-              variants: containerVariants,
-              initial: "hidden",
-              animate: "visible",
-              onAnimationComplete: () => {
-                requestAnimationFrame(() => setIsAnimating(false));
-              },
-              children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                SessionMessage,
-                {
-                  conversation,
-                  isLast: index === conversation.length - 1
-                },
-                conversation.id
-              ))
-            },
-            activeSession?.id
-          ) })
-        ]
-      }
-    );
+          )
+        }
+      ) })
+    ] });
   };
   const SessionMessagesHeader = ({ children }) => {
     const { activeSession, theme } = React.useContext(ChatContext);
@@ -2477,7 +2822,10 @@ ${response}`),
   exports2.ChatBubble = ChatBubble;
   exports2.ChatContext = ChatContext;
   exports2.ChatInput = ChatInput;
+  exports2.ChatSuggestion = ChatSuggestion;
+  exports2.ChatSuggestions = ChatSuggestions;
   exports2.CodeHighlighter = CodeHighlighter;
+  exports2.FileDropzone = FileDropzone;
   exports2.FileInput = FileInput;
   exports2.Markdown = Markdown;
   exports2.MessageActions = MessageActions;
@@ -2487,6 +2835,8 @@ ${response}`),
   exports2.MessageResponse = MessageResponse;
   exports2.MessageSource = MessageSource;
   exports2.MessageSources = MessageSources;
+  exports2.MessageStatus = MessageStatus;
+  exports2.MessageStatusItem = MessageStatusItem;
   exports2.NewSessionButton = NewSessionButton;
   exports2.SessionEmpty = SessionEmpty;
   exports2.SessionGroups = SessionGroups;
@@ -2497,6 +2847,7 @@ ${response}`),
   exports2.SessionMessagesHeader = SessionMessagesHeader;
   exports2.SessionsGroup = SessionsGroup;
   exports2.SessionsList = SessionsList;
+  exports2.StatusIcon = StatusIcon;
   exports2.TableComponent = TableComponent;
   exports2.TableDataCell = TableDataCell;
   exports2.TableHeaderCell = TableHeaderCell;