reachat 1.2.0 → 1.3.0

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("reablocks"), require("@radix-ui/react-slot"), require("framer-motion"), require("react-markdown"), require("remark-gfm"), require("react-syntax-highlighter"), require("rehype-katex"), require("remark-math"), require("mdast-util-find-and-replace"), require("remark-youtube"), require("reakeys"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "reablocks", "@radix-ui/react-slot", "framer-motion", "react-markdown", "remark-gfm", "react-syntax-highlighter", "rehype-katex", "remark-math", "mdast-util-find-and-replace", "remark-youtube", "reakeys", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.remarkGfm, global.reactSyntaxHighlighter, global.rehypeKatex, global.remarkMath, global.mdastUtilFindAndReplace, global.remarkYoutube, global.reakeys, global.dateFns));
-})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, framerMotion, ReactMarkdown, remarkGfm, reactSyntaxHighlighter, rehypeKatex, remarkMath, mdastUtilFindAndReplace, remarkYoutube, reakeys, dateFns) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("reablocks"), require("@radix-ui/react-slot"), require("framer-motion"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "reablocks", "@radix-ui/react-slot", "framer-motion", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns));
+})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, framerMotion, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -38,17 +38,24 @@
     sessions: [],
     activeSessionId: null
   });
-  const ChatInput = ({
+  const ChatInput = React.forwardRef(({
     allowedFiles,
     placeholder,
     defaultValue,
     sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
     stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
     attachIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgPaperclip, {})
-  }) => {
+  }, ref) => {
     const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } = React.useContext(ChatContext);
     const [message, setMessage] = React.useState("");
     const fileInputRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    }));
     const handleSendMessage = () => {
       if (message.trim()) {
         sendMessage == null ? void 0 : sendMessage(message);
@@ -72,15 +79,16 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         reablocks.Textarea,
         {
+          inputRef,
           containerClassName: reablocks.cn(theme.input.input),
           minRows: 1,
           autoFocus: true,
           value: message,
-          onChange: (e) => setMessage(e.target.value),
           defaultValue,
           onKeyPress: handleKeyPress,
           placeholder,
-          disabled: isLoading || disabled
+          disabled: isLoading || disabled,
+          onChange: (e) => setMessage(e.target.value)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
@@ -132,7 +140,7 @@
         )
       ] })
     ] });
-  };
+  });
   const SessionEmpty = ({
     children
   }) => {
@@ -1245,7 +1253,7 @@
   const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, children });
   const Markdown = ({
     children,
-    remarkPlugins = [remarkGfm, remarkMath],
+    remarkPlugins,
     rehypePlugins = [rehypeKatex]
   }) => {
     const { theme } = React.useContext(ChatContext);
@@ -1302,9 +1310,25 @@
     question,
     children
   }) => {
-    const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = React.useContext(ChatContext);
+    const { theme, remarkPlugins } = React.useContext(ChatContext);
     const Comp = children ? reactSlot.Slot : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.messages.message.question), children: children || /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: question }) });
+    const [expanded, setExpanded] = React.useState(false);
+    const isLong = question.length > 500;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: reablocks.cn(theme.messages.message.question, {
+      [theme.messages.message.overlay]: isLong && !expanded
+    }), children: [
+      children || /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: question }),
+      isLong && !expanded && /* @__PURE__ */ jsxRuntime.jsx(
+        reablocks.Button,
+        {
+          variant: "link",
+          size: "small",
+          className: theme.messages.message.expand,
+          onClick: () => setExpanded(true),
+          children: "Show more"
+        }
+      )
+    ] });
   };
   const MessageResponse = ({
     response,
@@ -1314,7 +1338,7 @@
     const {
       theme,
       isCompact,
-      remarkPlugins = [remarkGfm, remarkYoutube]
+      remarkPlugins
     } = React.useContext(ChatContext);
     const Comp = children ? reactSlot.Slot : "div";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1635,11 +1659,13 @@ ${response}`),
       message: {
         base: "mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent",
         question: [
-          "font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
+          "relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
           "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
         ].join(" "),
-        response: ["data-[compact=false]:px-4 text-gray-900", "dark:text-gray-100"].join(" "),
+        response: ["relative data-[compact=false]:px-4 text-gray-900", "dark:text-gray-100"].join(" "),
+        overlay: `overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200`,
         cursor: "inline-block w-1 h-4 bg-current",
+        expand: "absolute bottom-1 right-1 z-10",
         files: {
           base: "mb-2 flex flex-wrap gap-3 ",
           file: {
@@ -1738,7 +1764,7 @@ ${response}`),
     activeSessionId,
     theme: customTheme = chatTheme,
     onNewSession,
-    remarkPlugins,
+    remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
     disabled,
     style,
     className