@pubuduth-aplicy/chat-ui 2.2.15 → 2.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/Message.tsx

@@ -159,6 +159,26 @@ const Message = ({ message }: MessageProps) => {
     setLocalStatus(message.status);
   }, [message.status]);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        optionsRef.current &&
+        !optionsRef.current.contains(e.target as Node)
+      ) {
+        setShowOptions(false);
+        setShowDeleteOption(false);
+      }
+    };
+
+    if (showOptions || showDeleteOption) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showOptions, showDeleteOption]);
+
   // const handleDownload = (url: string, name: string) => {
   //   saveAs(url, name);
   // };
@@ -597,6 +617,7 @@ const Message = ({ message }: MessageProps) => {
       <div className={`message-row ${alignItems}`}>
         <div
           className="bubble-container"
+          ref={optionsRef}
           onMouseEnter={() => fromMe && !hasMedia && setShowOptions(true)}
           onMouseLeave={() =>
             fromMe && !showDeleteOption && setShowOptions(false)
@@ -658,7 +679,7 @@ const Message = ({ message }: MessageProps) => {
                       >
                         <Pencil size={16} />
                       </button>
-                      <div className="more-options-container" ref={optionsRef}>
+                      <div className="more-options-container">
                         <button
                           className="message-option-btn more-btn"
                           onClick={() => setShowDeleteOption(!showDeleteOption)}

package/src/components/messages/MessageInput.tsx

@@ -359,7 +359,7 @@ const MessageInput = () => {
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
-      if ((!message && attachmentsRef.current.length === 0) || isSending)
+      if ((!message.trim() && attachmentsRef.current.length === 0) || isSending)
         return;
       setIsSending(true);
       setAttachments([]);

package/src/style/style.css

@@ -939,6 +939,7 @@
   padding: 10px;
   position: sticky;
   bottom: 0;
+  z-index: 2;
   background: #fff;
   border-top: 1px solid #eaeaea;
 }
@@ -1190,6 +1191,7 @@
 }
 
 .attachment-options {
+  width: 150px;
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -1492,7 +1494,7 @@
   border-radius: 18px;
   padding: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 10;
+  z-index: 1;
   transition: opacity 0.2s ease;
 }