reachat 1.0.1 → 1.0.3

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
 (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("mdast-util-find-and-replace"), require("remark-youtube"), require("reakeys"), require("react-cool-dimensions"), 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", "mdast-util-find-and-replace", "remark-youtube", "reakeys", "react-cool-dimensions", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reablocks = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.remarkGfm, global.reactSyntaxHighlighter, global.mdastUtilFindAndReplace, global.remarkYoutube, global.reakeys, global.useDimensions, global.dateFns));
-})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, framerMotion, ReactMarkdown, remarkGfm, reactSyntaxHighlighter, mdastUtilFindAndReplace, remarkYoutube, reakeys, useDimensions, 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("remark-gfm"), require("react-syntax-highlighter"), 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", "mdast-util-find-and-replace", "remark-youtube", "reakeys", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reablocks = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.remarkGfm, global.reactSyntaxHighlighter, global.mdastUtilFindAndReplace, global.remarkYoutube, global.reakeys, global.dateFns));
+})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, framerMotion, ReactMarkdown, remarkGfm, reactSyntaxHighlighter, mdastUtilFindAndReplace, remarkYoutube, reakeys, dateFns) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -28,21 +28,18 @@
   });
   const ChatInput = ({
     allowedFiles,
-    onSendMessage,
     placeholder,
-    onStopMessage,
-    onFileUpload,
     defaultValue,
     sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
     stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
     attachIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgPaperclip, {})
   }) => {
-    const { theme, isLoading, disabled } = React.useContext(ChatContext);
+    const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } = React.useContext(ChatContext);
     const [message, setMessage] = React.useState("");
     const fileInputRef = React.useRef(null);
     const handleSendMessage = () => {
       if (message.trim()) {
-        onSendMessage == null ? void 0 : onSendMessage(message);
+        sendMessage == null ? void 0 : sendMessage(message);
         setMessage("");
       }
     };
@@ -55,8 +52,8 @@
     const handleFileUpload = (event) => {
       var _a;
       const file = (_a = event.target.files) == null ? void 0 : _a[0];
-      if (file && onFileUpload) {
-        onFileUpload(file);
+      if (file && fileUpload) {
+        fileUpload(file);
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.base), children: [
@@ -104,7 +101,7 @@
         {
           title: "Stop",
           className: reablocks.cn(theme.input.stop),
-          onClick: onStopMessage,
+          onClick: stopMessage,
           disabled,
           children: stopIcon
         }
@@ -1323,6 +1320,7 @@
     fileIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgFile, {})
   }) => {
     const { theme } = React.useContext(ChatContext);
+    const isImage = type == null ? void 0 : type.startsWith("image/");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "figure",
       {
@@ -1331,8 +1329,8 @@
           window.open(url, "_blank");
         },
         children: [
-          fileIcon,
-          (name || type) && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { children: name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: name, limit }) }) })
+          isImage ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, className: "h-10 w-10" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fileIcon }),
+          name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { children: name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: name, limit }) }) })
         ]
       }
     );
@@ -1639,12 +1637,35 @@ ${response}`),
       stop: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700"
     }
   };
+  const useDimensions = () => {
+    const [ref, setRef] = React.useState(null);
+    const [width, setWidth] = React.useState(void 0);
+    const observe = React.useCallback((element) => {
+      if (element) setRef(element);
+    }, []);
+    React.useEffect(() => {
+      if (!ref) return;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          setWidth(entry.contentRect.width);
+        }
+      });
+      resizeObserver.observe(ref);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [ref]);
+    return { width, observe };
+  };
   const Chat = ({
     children,
     viewType = "console",
     sessions,
     onSelectSession,
     onDeleteSession,
+    onSendMessage,
+    onStopMessage,
+    onFileUpload,
     isLoading,
     activeSessionId,
     theme: customTheme = chatTheme,
@@ -1706,7 +1727,10 @@ ${response}`),
         activeSessionId: internalActiveSessionID,
         selectSession: handleSelectSession,
         deleteSession: handleDeleteSession,
-        createSession: handleCreateNewSession
+        createSession: handleCreateNewSession,
+        sendMessage: onSendMessage,
+        stopMessage: onStopMessage,
+        fileUpload: onFileUpload
       }),
       [
         isLoading,
@@ -1719,7 +1743,10 @@ ${response}`),
         internalActiveSessionID,
         handleSelectSession,
         handleDeleteSession,
-        handleCreateNewSession
+        handleCreateNewSession,
+        onSendMessage,
+        onStopMessage,
+        onFileUpload
       ]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(