File box for non img files

client/package-lock.json

@@ -13,6 +13,7 @@
         "@types/socket.io-client": "^1.4.36",
         "axios": "^1.7.7",
         "js-cookie": "^3.0.5",
+        "lucide-react": "^0.460.0",
         "nanoid": "^5.0.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -3158,6 +3159,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.460.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
+      "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

client/package.json

@@ -15,6 +15,7 @@
     "@types/socket.io-client": "^1.4.36",
     "axios": "^1.7.7",
     "js-cookie": "^3.0.5",
+    "lucide-react": "^0.460.0",
     "nanoid": "^5.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

client/src/components/chat/ContactsList.tsx

@@ -45,20 +45,9 @@ function ContactsList({
   };
 
   useEffect(() => {
-    // if (!socket) {
-    //   //console.error('Socket not initialized');
-    // }
-
     fetchContacts().catch((e) =>
       console.error('Failed to fetch contacts: ', e),
     );
-
-    // return () => {
-    //   if (!socket) {
-    //     console.error('Socket not initialized');
-    //     return;
-    //   }
-    // };
   }, []);
 
   function removeContact(usernamecontact: string) {

client/src/components/chat/FIleBox.tsx

@@ -0,0 +1,23 @@
+import { File } from 'lucide-react';
+const FileBox = ({ url }: { url: string }) => {
+  const fileNameWithSuffix = url.split('/').pop(); // 'attachment.pdf-321321321312312'
+  const fullFileName = fileNameWithSuffix?.replace(/-\d+$/, '');
+  const filename = fullFileName?.slice(0, 25) + '...';
+
+  return (
+    <div className="flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 max-w-xs shadow-sm">
+      <div className="flex items-center space-x-3">
+        <File className="text-green-100 w-6 h-6" />
+        <div className="flex-1">
+          <a
+            href={url}
+            className="text-sm hover:underline overflow-hidden text-ellipsis whitespace-normal"
+          >
+            {filename}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FileBox;

client/src/components/chat/MessagesArea.tsx

@@ -4,6 +4,7 @@ import { useOutletContext } from 'react-router-dom';
 import { sendContact } from '../../api/contactsApi.tsx';
 import LoadingWheel from './LoadingWheel.tsx';
 import { ChatMessages } from '../../pages/Chat.tsx';
+import FileBox from './FIleBox.tsx';
 
 type ContactProps = {
   usernamecontact: string;
@@ -121,21 +122,22 @@ function MessagesArea({
       className={`whitespace-pre-wrap ml-2 rounded p-1 ${
         msg.pending
           ? 'text-gray-400' // Gray style for pending messages
-          : 'hover:bg-gray-800'
+          : 'hover:bg-gray-900'
       }`}
       key={msg.message_id || msg.tempId}
     >
       {msg.sender}: {msg.message}
       {msg.attachment_url ? (
         <div className="mt-2">
-          <a href={msg.attachment_url}>
-            {' '}
+          {msg.attachment_url.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? (
             <img
               src={msg.attachment_url}
               alt="attachment"
-              className="max-w-full max-h-80 object-contain rounded"
+              className="max-w-full max-h-40 object-contain rounded"
             />
-          </a>
+          ) : (
+            <FileBox url={msg.attachment_url} />
+          )}
         </div>
       ) : null}
     </li>

server/server.js

@@ -56,7 +56,8 @@ const storage = multer.diskStorage({
   filename: function (req, file, cb) {
     const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
     const extension = extname(file.originalname);
-    const finalName = uniqueSuffix + extension;
+    //const finalName = uniqueSuffix + extension;
+    const finalName = `${file.originalname}-${Math.round(Math.random() * 1e9)}`;
     file.finalName = finalName;
     cb(null, finalName);
   },