@pubuduth-aplicy/chat-ui 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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/common/CollapsibleSection.tsx

@@ -35,7 +35,8 @@ const CollapsibleSection = ({
         />
       </div>
       {isOpen && (
-        <div className="p-2 text-gray-900 dark:text-gray-200">{children}</div>
+        <div className="p-2 text-gray-900 dark:text-gray-200"
+        style={{height:"400px"}}>{children}</div>
       )}
     </div>
   );

package/src/components/messages/MessageInput.tsx

@@ -9,7 +9,6 @@ import { MessageStatus } from "../../types/type";
 import { Path } from "../../lib/api/endpoint";
 import { getChatConfig } from "../../Chat.config";
 
-const MAX_FILE_SIZE_MB = 5;
 const MAX_FILE_COUNT = 5;
 const ACCEPTED_IMAGE_TYPES = [
   "image/jpeg",
@@ -440,6 +439,8 @@ const MessageInput = () => {
     attachmentsRef.current = attachments;
   }, [attachments]);
 
+  {/* File attachment handlers */}
+
   // File attachment handlers
   const handleAttachmentClick = () => {
     setShowAttachmentOptions(!showAttachmentOptions);
@@ -466,45 +467,103 @@ const MessageInput = () => {
     }
   };
 
+  const FILE_SIZE_LIMITS_MB = {
+    image: 10,
+    video: 120,
+    document: 10,
+  } as const;
+
+  const getMaxSizeForType = (type: Attachment["type"] | null) => {
+    if (!type) return 0;
+    return FILE_SIZE_LIMITS_MB[type] * 1024 * 1024;
+  };
+
+  // const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   const files = e.target.files;
+  //   if (!files || files.length === 0) return;
+
+  //   if (attachments.length + files.length > MAX_FILE_COUNT) {
+  //     alert(`You can only attach up to ${MAX_FILE_COUNT} files`);
+  //     return;
+  //   }
+
+  //   const newFilesSize = Array.from(files).reduce(
+  //     (total, file) => total + file.size,
+  //     0
+  //   );
+  //   const currentAttachmentsSize = attachments.reduce(
+  //     (total, att) => total + att.file.size,
+  //     0
+  //   );
+
+  //   if (
+  //     currentAttachmentsSize + newFilesSize >
+  //     MAX_FILE_SIZE_MB * 1024 * 1024
+  //   ) {
+  //     alert(`Total file size cannot exceed ${MAX_FILE_SIZE_MB}MB`);
+  //     return;
+  //   }
+
+  //   const newAttachments: Attachment[] = [];
+
+  //   for (let i = 0; i < files.length; i++) {
+  //     const file = files[i];
+  //     const fileType = getFileType(file.type);
+
+  //     if (!fileType) {
+  //       console.error(`Unsupported file type: ${file.type}`);
+  //       continue;
+  //     }
+
+  //     if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+  //       console.error(`File too large: ${file.name}`);
+  //       continue;
+  //     }
+
+  //     const previewUrl =
+  //       fileType === "document"
+  //         ? URL.createObjectURL(new Blob([""], { type: "application/pdf" }))
+  //         : URL.createObjectURL(file);
+
+  //     newAttachments.push({
+  //       file,
+  //       type: fileType,
+  //       previewUrl,
+  //     });
+  //   }
+
+  //   setAttachments((prev) => [...prev, ...newAttachments]);
+  //   if (fileInputRef.current) {
+  //     fileInputRef.current.value = "";
+  //   }
+  // };
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputError(null);
     const files = e.target.files;
     if (!files || files.length === 0) return;
 
-    if (attachments.length + files.length > MAX_FILE_COUNT) {
-      alert(`You can only attach up to ${MAX_FILE_COUNT} files`);
-      return;
-    }
+    const newAttachments: Attachment[] = [];
 
-    const newFilesSize = Array.from(files).reduce(
-      (total, file) => total + file.size,
-      0
-    );
-    const currentAttachmentsSize = attachments.reduce(
-      (total, att) => total + att.file.size,
-      0
-    );
-
-    if (
-      currentAttachmentsSize + newFilesSize >
-      MAX_FILE_SIZE_MB * 1024 * 1024
-    ) {
-      alert(`Total file size cannot exceed ${MAX_FILE_SIZE_MB}MB`);
-      return;
+    if (attachments.length + files.length > MAX_FILE_COUNT) {
+      return setInputError(`You can only attach up to ${MAX_FILE_COUNT} files`); // toast / inline message
     }
 
-    const newAttachments: Attachment[] = [];
-
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
       const fileType = getFileType(file.type);
 
       if (!fileType) {
-        console.error(`Unsupported file type: ${file.type}`);
+        setInputError(`Unsupported file: ${file.name}`);
         continue;
       }
 
-      if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
-        console.error(`File too large: ${file.name}`);
+      const maxSize = getMaxSizeForType(fileType);
+
+      if (file.size > maxSize) {
+        setInputError(
+          `${file.name} exceeds ${FILE_SIZE_LIMITS_MB[fileType]}MB limit`
+        );
         continue;
       }
 
@@ -520,7 +579,11 @@ const MessageInput = () => {
       });
     }
 
-    setAttachments((prev) => [...prev, ...newAttachments]);
+    if (newAttachments.length) {
+      setAttachments((prev) => [...prev, ...newAttachments]);
+      setInputError(null); 
+    }
+
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -537,6 +600,7 @@ const MessageInput = () => {
   };
 
   const removeAttachment = (index: number) => {
+    setInputError(null); 
     setAttachments((prev) => {
       const newAttachments = [...prev];
       URL.revokeObjectURL(newAttachments[index].previewUrl);
@@ -545,6 +609,8 @@ const MessageInput = () => {
     });
   };
 
+  {/* end of file attachment handlers */}
+
   return (
     <div className="message-input-container">
       {attachments.length > 0 && (

package/src/components/sidebar/Conversations.tsx

@@ -334,7 +334,7 @@ const Conversations = () => {
 
               {activeTab === "service" &&
                 Object.entries(filteredGroupedServiceChats).length > 0 && (
-                  <div className="p-2">
+                  <div className="p-2 h-[400px]">
                     {Object.entries(filteredGroupedServiceChats).map(
                       ([
                         serviceId,