reachat 1.0.1 → 1.0.3

package/dist/index.js

@@ -10,7 +10,6 @@ import { Prism } from "react-syntax-highlighter";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import remarkYoutube from "remark-youtube";
 import { useHotkeys } from "reakeys";
-import useDimensions from "react-cool-dimensions";
 import { isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, format } from "date-fns";
 const SvgSend = (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-send-horizontal", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m3 3 3 9-3 9 19-9Z" }), /* @__PURE__ */ React.createElement("path", { d: "M6 12h16" }));
 const SvgStop = (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-octagon-x", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React.createElement("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }), /* @__PURE__ */ React.createElement("path", { d: "m9 9 6 6" }));
@@ -21,21 +20,18 @@ const ChatContext = createContext({
 });
 const ChatInput = ({
   allowedFiles,
-  onSendMessage,
   placeholder,
-  onStopMessage,
-  onFileUpload,
   defaultValue,
   sendIcon = /* @__PURE__ */ jsx(SvgSend, {}),
   stopIcon = /* @__PURE__ */ jsx(SvgStop, {}),
   attachIcon = /* @__PURE__ */ jsx(SvgPaperclip, {})
 }) => {
-  const { theme, isLoading, disabled } = useContext(ChatContext);
+  const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } = useContext(ChatContext);
   const [message, setMessage] = useState("");
   const fileInputRef = useRef(null);
   const handleSendMessage = () => {
     if (message.trim()) {
-      onSendMessage == null ? void 0 : onSendMessage(message);
+      sendMessage == null ? void 0 : sendMessage(message);
       setMessage("");
     }
   };
@@ -48,8 +44,8 @@ const ChatInput = ({
   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__ */ jsxs("div", { className: cn(theme.input.base), children: [
@@ -97,7 +93,7 @@ const ChatInput = ({
       {
         title: "Stop",
         className: cn(theme.input.stop),
-        onClick: onStopMessage,
+        onClick: stopMessage,
         disabled,
         children: stopIcon
       }
@@ -1316,6 +1312,7 @@ const MessageFile = ({
   fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
 }) => {
   const { theme } = useContext(ChatContext);
+  const isImage = type == null ? void 0 : type.startsWith("image/");
   return /* @__PURE__ */ jsxs(
     "figure",
     {
@@ -1324,8 +1321,8 @@ const MessageFile = ({
         window.open(url, "_blank");
       },
       children: [
-        fileIcon,
-        (name || type) && /* @__PURE__ */ jsx("figcaption", { children: name && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) }) })
+        isImage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("img", { src: url, className: "h-10 w-10" }) }) : /* @__PURE__ */ jsx(Fragment, { children: fileIcon }),
+        name && /* @__PURE__ */ jsx("figcaption", { children: name && /* @__PURE__ */ jsx("span", { className: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) }) })
       ]
     }
   );
@@ -1632,12 +1629,35 @@ const chatTheme = {
     stop: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700"
   }
 };
+const useDimensions = () => {
+  const [ref, setRef] = useState(null);
+  const [width, setWidth] = useState(void 0);
+  const observe = useCallback((element) => {
+    if (element) setRef(element);
+  }, []);
+  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,
@@ -1699,7 +1719,10 @@ const Chat = ({
       activeSessionId: internalActiveSessionID,
       selectSession: handleSelectSession,
       deleteSession: handleDeleteSession,
-      createSession: handleCreateNewSession
+      createSession: handleCreateNewSession,
+      sendMessage: onSendMessage,
+      stopMessage: onStopMessage,
+      fileUpload: onFileUpload
     }),
     [
       isLoading,
@@ -1712,7 +1735,10 @@ const Chat = ({
       internalActiveSessionID,
       handleSelectSession,
       handleDeleteSession,
-      handleCreateNewSession
+      handleCreateNewSession,
+      onSendMessage,
+      onStopMessage,
+      onFileUpload
     ]
   );
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(