@pubuduth-aplicy/chat-ui 2.1.58 → 2.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.58",
+  "version": "2.1.60",
   "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/SystemNotice.tsx

@@ -0,0 +1,17 @@
+const SystemNotice = () => (
+    <div style={{
+      padding: "1rem",
+      border: "1px solid #ddd",
+      borderRadius: "8px",
+      margin: "1rem",
+      backgroundColor: "#f9f9f9",
+      fontSize: "14px",
+    }}>
+      <strong style={{ display: "block", marginBottom: "0.5rem", textAlign:"center", fontSize:"smaller" }}>🛡 WE HAVE YOUR BACK</strong>
+      <p style={{fontSize:"x-small"}}>For added safety and your protection, keep payments and communications within Gigmosaic. 
+        {/* <a href="#">Learn more</a> */}
+      </p>
+    </div>
+  );
+  export default SystemNotice;
+  

package/src/components/messages/MessageInput.tsx

@@ -11,8 +11,8 @@ import { getApiClient } from "../../lib/api/apiClient";
 import { MessageStatus } from "../../types/type";
 import { Path } from "../../lib/api/endpoint";
 const MAX_FILE_SIZE_MB = 5; // 5MB max file size
-const MAX_FILE_COUNT = 5; 
-const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp','video/mp4', 'video/webm', 'video/ogg'];
+const MAX_FILE_COUNT = 5;
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4', 'video/webm', 'video/ogg'];
 const ACCEPTED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg'];
 const ACCEPTED_DOCUMENT_TYPES = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
 
@@ -28,14 +28,14 @@ const MessageInput = () => {
   const apiClient = getApiClient();
   const { socket } = useChatContext();
   const { userId } = useChatContext();
-  const { selectedConversation,setMessages } = useChatUIStore();
-  const [message, setMessage] = useState(""); 
-  const [message1, setMessage1] = useState(""); 
-  const mutation = useMessageMutation(); 
+  const { selectedConversation, setMessages } = useChatUIStore();
+  const [message, setMessage] = useState("");
+  const [message1, setMessage1] = useState("");
+  const mutation = useMessageMutation();
   const [typingUser, setTypingUser] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [isTyping, setIsTyping] = useState(false); 
+  const [isTyping, setIsTyping] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -83,39 +83,41 @@ const MessageInput = () => {
     // Check for email
     const emailRegex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i;
     if (emailRegex.test(text)) {
-      return "Email addresses are not allowed.";
+      return "To protect your account, make sure not to share any personal or sensitive information.";
     }
-  
+
     // Check for phone number (very basic)
     const phoneRegex = /(\+?\d{1,4}[\s-]?)?(\(?\d{3}\)?[\s-]?)?\d{3}[\s-]?\d{4}/;
     if (phoneRegex.test(text)) {
-      return "Phone numbers are not allowed.";
+      return "To protect your account, make sure not to share any personal or sensitive information.";
     }
-  
+
     // // Check for bad words
     // for (const word of badWords) {
     //   if (text.toLowerCase().includes(word)) {
     //     return "Inappropriate language is not allowed.";
     //   }
     // }
-  
+
     return null; // No errors
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     const validationError = validateInput(newValue);
-  
+
     if (validationError) {
       setInputError(validationError);
+      setMessage(newValue);
+      setMessage1(newValue);
     } else {
       setInputError(null);
       setMessage(newValue);
       setMessage1(newValue);
-      
+
     }
   };
-  
+
 
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
@@ -148,15 +150,15 @@ const MessageInput = () => {
     return null;
   };
 
-  const uploadToS3 = async (file: File, onProgress?:(progress:number)=> void): Promise<{ url: string, name: string, size: number, type: FileType }> => {
+  const uploadToS3 = async (file: File, onProgress?: (progress: number) => void): Promise<{ url: string, name: string, size: number, type: FileType }> => {
     const response = await apiClient.post(`${Path.preSignUrl}`, {
-        fileName: file.name,
-        fileType: file.type,
-      }
+      fileName: file.name,
+      fileType: file.type,
+    }
     );
-  
+
     const { signedUrl, fileUrl } = await response.data;
-  
+
     // const uploadResponse = await fetch(signedUrl, {
     //   method: 'PUT',
     //   body: file,
@@ -194,11 +196,11 @@ const MessageInput = () => {
       xhr.onerror = () => reject(new Error('Upload failed'));
       xhr.send(file);
     });
-  
+
     // if (!uploadResponse.ok) {
     //   throw new Error('Upload failed');
     // }
-  
+
     // return {
     //   url: fileUrl,
     //   name: file.name,
@@ -241,11 +243,11 @@ const MessageInput = () => {
       try {
 
         const uploadedFiles = await Promise.all(
-          attachmentsRef.current.map(async (attachment,index) => {
+          attachmentsRef.current.map(async (attachment, index) => {
             try {
-              const result = await uploadToS3(attachment.file,(progress)=>{
-                setMessages(prev => prev.map(msg =>{
-                  if(msg._id === tempId){
+              const result = await uploadToS3(attachment.file, (progress) => {
+                setMessages(prev => prev.map(msg => {
+                  if (msg._id === tempId) {
                     const updatedMedia = [...msg.media!];
                     updatedMedia[index] = {
                       ...updatedMedia[index],
@@ -270,7 +272,7 @@ const MessageInput = () => {
             } catch (error) {
               console.error(`Error uploading file ${attachment.file.name}:`, error);
               setMessages(prev => prev.map(msg => {
-                if(msg._id === tempId){
+                if (msg._id === tempId) {
                   const updatedMedia = [...msg.media!];
                   updatedMedia[index] = {
                     ...updatedMedia[index],
@@ -287,8 +289,8 @@ const MessageInput = () => {
             }
           })
         );
-  
-   
+
+
         const successfulUploads = uploadedFiles.filter(file => file !== null);
 
         console.log("📤 Sending message:", successfulUploads);
@@ -300,33 +302,34 @@ const MessageInput = () => {
         }, {
           onSuccess: (data) => {
             console.log('Response from sendMessage:', data);
-
-            socket.emit("sendMessage", {
-              chatId: selectedConversation?._id,
-              message: message1,
-              messageId: data[1]._id,
-              attachments: successfulUploads,
-              senderId: userId,
-              receiverId: selectedConversation?.participantDetails._id,
-            });
             setMessages(prev => {
               console.log("Removing optimistic message:", prev);
-              
+
               // Definitely remove the optimistic message
               const filtered = prev.filter(msg => msg._id !== tempMessageId);
               // Add the real message from server
               console.log("Adding real message:", filtered);
-              
+
               return [...filtered, {
                 ...data[1],
-              isUploading: false,
-              isOptimistic: false}
-            ];
+                isUploading: false,
+                isOptimistic: false
+              }
+              ];
+            });
+            socket.emit("sendMessage", {
+              chatId: selectedConversation?._id,
+              message: message1,
+              messageId: data[1]._id,
+              attachments: successfulUploads,
+              senderId: userId,
+              receiverId: selectedConversation?.participantDetails._id,
             });
+
           },
           onError: (error) => {
             console.error("❌ Error in sending message:", error);
-            setMessages(prev => prev.map(msg => 
+            setMessages(prev => prev.map(msg =>
               msg._id === tempId ? { ...msg, status: 'failed' } : msg
             ));
           },
@@ -334,7 +337,7 @@ const MessageInput = () => {
 
       } catch (error) {
         console.error("❌ Error sending message:", error);
-        setMessages(prev => prev.map(msg => 
+        setMessages(prev => prev.map(msg =>
           msg._id === tempId ? { ...msg, status: 'failed' } : msg
         ));
       } finally {
@@ -398,7 +401,7 @@ const MessageInput = () => {
     // Calculate total size of new files
     const newFilesSize = Array.from(files).reduce((total, file) => total + file.size, 0);
     const currentAttachmentsSize = attachments.reduce((total, att) => total + att.file.size, 0);
-    
+
     // Check if total size would exceed the limit
     if (currentAttachmentsSize + newFilesSize > MAX_FILE_SIZE_MB * 1024 * 1024) {
       alert(`Total file size cannot exceed ${MAX_FILE_SIZE_MB}MB`);
@@ -421,7 +424,7 @@ const MessageInput = () => {
         continue;
       }
 
-      const previewUrl = fileType === 'document' 
+      const previewUrl = fileType === 'document'
         ? URL.createObjectURL(new Blob([''], { type: 'application/pdf' })) // Placeholder for documents
         : URL.createObjectURL(file);
 
@@ -437,7 +440,7 @@ const MessageInput = () => {
       fileInputRef.current.value = '';
     }
   };
-  
+
   const scrollAttachments = (direction: 'left' | 'right') => {
     if (attachmentsContainerRef.current) {
       const scrollAmount = direction === 'right' ? 200 : -200;
@@ -459,148 +462,149 @@ const MessageInput = () => {
 
   return (
     <div className="message-input-container">
-    {/* Preview area for attachments */}
-    {attachments.length > 0 && (
-      <div className="attachments-preview-container">
-        <button 
-          className="scroll-button left" 
-          onClick={() => scrollAttachments('left')}
-          disabled={attachments.length <= 3}
-        >
-          &lt;
-        </button>
-
-        <div className="attachments-preview" ref={attachmentsContainerRef}>
-        {attachments.map((attachment, index) => (
-          <FilePreview
-            key={index}
-            file={attachment.file}
-            type={attachment.type}
-            previewUrl={attachment.previewUrl}
-            onRemove={() => removeAttachment(index)}
-          />
-        ))}
-
-{attachments.length < MAX_FILE_COUNT && (
-            <div className="add-more-files" onClick={() => fileInputRef.current?.click()}>
-              <div className="plus-icon">+</div>
-              <div className="add-more-text">Add more</div>
-            </div>
-          )}
-      </div>
-
-      <button 
-          className="scroll-button right" 
-          onClick={() => scrollAttachments('right')}
-          disabled={attachments.length <= 3}
-        >
-          &gt;
-        </button>
-      </div>
-    )}
-
-    <form className="chatMessageInputform" onSubmit={handleSubmit}>
-      <div className="chatMessageInputdiv">
-        {/* Hidden file input */}
-        <input
-          type="file"
-          ref={fileInputRef}
-          style={{ display: 'none' }}
-          onChange={handleFileChange}
-          multiple
-        />
-
-        {/* Attachment button and options */}
-        <div className="attachment-container" style={{ position: 'relative' }}>
+      {/* Preview area for attachments */}
+      {attachments.length > 0 && (
+        <div className="attachments-preview-container">
           <button
-            type="button"
-            className="attachment-button"
-            onClick={handleAttachmentClick}
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              padding: '8px',
-            }}
+            className="scroll-button left"
+            onClick={() => scrollAttachments('left')}
+            disabled={attachments.length <= 3}
           >
-            <div className="attachment-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-              </svg>
-            </div>
+            &lt;
           </button>
 
-          {showAttachmentOptions && (
-            <div className="attachment-options">
-              <button
-                type="button"
-                onClick={() => handleFileSelect('image')}
-              >
-                <div className="icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                    <polyline points="21 15 16 10 5 21"></polyline>
-                  </svg>
-                </div>
-                <span>Photos & videos</span>
-              </button>
-              <button
-                type="button"
-                onClick={() => handleFileSelect('document')}
-              >
-                <div className="icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                    <polyline points="14 2 14 8 20 8"></polyline>
-                    <line x1="16" y1="13" x2="8" y2="13"></line>
-                    <line x1="16" y1="17" x2="8" y2="17"></line>
-                    <polyline points="10 9 9 9 8 9"></polyline>
-                  </svg>
-                </div>
-                <span>Document</span>
-              </button>
-            </div>
-          )}
+          <div className="attachments-preview" ref={attachmentsContainerRef}>
+            {attachments.map((attachment, index) => (
+              <FilePreview
+                key={index}
+                file={attachment.file}
+                type={attachment.type}
+                previewUrl={attachment.previewUrl}
+                onRemove={() => removeAttachment(index)}
+              />
+            ))}
+
+            {attachments.length < MAX_FILE_COUNT && (
+              <div className="add-more-files" onClick={() => fileInputRef.current?.click()}>
+                <div className="plus-icon">+</div>
+                <div className="add-more-text">Add more</div>
+              </div>
+            )}
+          </div>
+
+          <button
+            className="scroll-button right"
+            onClick={() => scrollAttachments('right')}
+            disabled={attachments.length <= 3}
+          >
+            &gt;
+          </button>
         </div>
+      )}
 
-        <textarea
-          className="chatMessageInput"
-          placeholder="Send a message"
-          value={message}
-          // onChange={(e) => {
-          //   setMessage(e.target.value)
-          //   autoResizeTextarea(e.target)
-          // }}
-          onChange={handleChange}
-          rows={1}
-          style={{ resize: "none" }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault()
-              handleSubmit(e)
-            }
-          }}
-        />
-
-{inputError && <p style={{ color: 'red', fontSize: '12px' }}>{inputError}</p>}
-        <button type="submit" className="chatMessageInputSubmit" disabled={!!inputError || isSending}>
-          <img width={10} height={10} src={paperplane} alt="send" />
-        </button>
-      </div>
-
-      {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
-        <div className="typingIndicator">
-          <div className="typing-loader">
-            <div className="ball" />
-            <div className="ball" />
-            <div className="ball" />
-            typing
+      <form className="chatMessageInputform" onSubmit={handleSubmit}>
+        {inputError && <p style={{ color: 'red', fontSize: '12px' }}>{inputError}</p>}
+
+        <div className="chatMessageInputdiv">
+          {/* Hidden file input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            multiple
+          />
+
+          {/* Attachment button and options */}
+          <div className="attachment-container" style={{ position: 'relative' }}>
+            <button
+              type="button"
+              className="attachment-button"
+              onClick={handleAttachmentClick}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '8px',
+              }}
+            >
+              <div className="attachment-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                </svg>
+              </div>
+            </button>
+
+            {showAttachmentOptions && (
+              <div className="attachment-options">
+                <button
+                  type="button"
+                  onClick={() => handleFileSelect('image')}
+                >
+                  <div className="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                      <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                      <polyline points="21 15 16 10 5 21"></polyline>
+                    </svg>
+                  </div>
+                  <span>Photos & videos</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleFileSelect('document')}
+                >
+                  <div className="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                      <polyline points="14 2 14 8 20 8"></polyline>
+                      <line x1="16" y1="13" x2="8" y2="13"></line>
+                      <line x1="16" y1="17" x2="8" y2="17"></line>
+                      <polyline points="10 9 9 9 8 9"></polyline>
+                    </svg>
+                  </div>
+                  <span>Document</span>
+                </button>
+              </div>
+            )}
           </div>
+
+          <textarea
+            className="chatMessageInput"
+            placeholder="Send a message"
+            value={message}
+            // onChange={(e) => {
+            //   setMessage(e.target.value)
+            //   autoResizeTextarea(e.target)
+            // }}
+            onChange={handleChange}
+            rows={1}
+            style={{ resize: "none" }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                handleSubmit(e)
+              }
+            }}
+          />
+
+          <button type="submit" className="chatMessageInputSubmit" disabled={!!inputError || isSending}>
+            <img width={10} height={10} src={paperplane} alt="send" />
+          </button>
         </div>
-      )}
-    </form>
-  </div>
+
+        {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
+          <div className="typingIndicator">
+            <div className="typing-loader">
+              <div className="ball" />
+              <div className="ball" />
+              <div className="ball" />
+              typing
+            </div>
+          </div>
+        )}
+      </form>
+    </div>
   );
 };
 

package/src/components/messages/Messages.tsx

@@ -7,6 +7,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { fetchMessages } from "../../service/messageService";
 import { useInView } from "react-intersection-observer";
 import Loader from "../Loader";
+import SystemNotice from "../common/SystemNotice";
 
 const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
@@ -164,6 +165,7 @@ const Messages = () => {
       className="chatMessages"
       style={{ overflowY: "auto", height: "100%", position: "relative" }}
     >
+      <SystemNotice/>
       <div ref={ref} className="my-8">
         {isFetchingNextPage ? <Loader /> : null}
       </div>

package/src/components/sidebar/Conversation.tsx

@@ -83,9 +83,17 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
             </span>
           </div>
           <p className="conversation-message">
-            {conversation.lastMessage.message.length > 50
+          {conversation.lastMessage.message.length > 50
               ? conversation.lastMessage.message.slice(0, 50) + "..."
-              : conversation.lastMessage.message}
+              :conversation.lastMessage.media.length > 0 ?
+              <div style={{display:"flex",alignItems:"center", gap:"5px"}}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+            </svg>
+            attachment
+              </div>
+              
+               :conversation.lastMessage.message}
           </p>
         </div>
       </div>

package/src/components/sidebar/Conversations.tsx

@@ -12,7 +12,7 @@ const Conversations = () => {
   // const { loading, conversations } = useGetConversations();
   return (
     <div className="chatSidebarConversations">
-      <h2 className="text-lg font-semibold text-gray-700">All Messages</h2>
+      <h2 className="text-lg font-semibold text-gray-700" style={{paddingLeft:'1rem'}}>All Messages</h2>
       {(!conversations || conversations.length === 0) && (
         <div className="flex flex-col items-center justify-center p-8 text-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 mb-4">

package/src/style/style.css

@@ -73,7 +73,7 @@
   padding-bottom: 3px;
 }
 
-.loader-wrapper{
+.loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,22 +82,24 @@
 }
 
 .chatSidebarInput {
-outline: none;
-padding: 8px 4px;         /* Keep original padding */
-font-size: 1rem;
-border-radius: 4px;
-line-height: 1.5rem;
-font-weight: 400;
-border: 1px solid #ccc;
-width: 100%;              /* Ensure full width */
-/* min-width: 400px;       */
-max-width: 600px;         
+  outline: none;
+  padding: 8px 4px;
+  /* Keep original padding */
+  font-size: 1rem;
+  border-radius: 4px;
+  line-height: 1.5rem;
+  font-weight: 400;
+  border: 1px solid #ccc;
+  width: 100%;
+  /* Ensure full width */
+  /* min-width: 400px;       */
+  max-width: 600px;
 }
 
 .chatSidebarInput:focus {
-border: 1px solid #12bbb5 !important;
-box-shadow: 0 0 5px rgba(18, 187, 181, 0.5);
-transition: border-color 0.3s ease-in-out;
+  border: 1px solid #12bbb5 !important;
+  box-shadow: 0 0 5px rgba(18, 187, 181, 0.5);
+  transition: border-color 0.3s ease-in-out;
 }
 
 .chatSidebarConversations {
@@ -122,7 +124,7 @@ transition: border-color 0.3s ease-in-out;
   /* height: 72px; */
 
   :hover {
-      background-color: transparent;
+    background-color: transparent;
   }
 }
 
@@ -210,8 +212,8 @@ transition: border-color 0.3s ease-in-out;
 
 .chatMessageContainerOutter {
   display: inline-flex;
-  flex-basis: 0px;
-  flex-direction: column;
+  /* flex-basis: 0px;
+  flex-direction: column; */
   shrink: 1;
   gap: 0.25rem;
   justify-content: flex-start;
@@ -266,7 +268,7 @@ transition: border-color 0.3s ease-in-out;
 .chatMessagesBubble_me {
   float: right;
   color: white;
-  background-color: #076663; 
+  background-color: #076663;
   padding: 0.5rem 0.875rem;
 }
 
@@ -274,7 +276,7 @@ transition: border-color 0.3s ease-in-out;
   float: left;
   background-color: #f3f4f6;
   color: #374151;
-  padding: 0.5rem 0.875rem; 
+  padding: 0.5rem 0.875rem;
 }
 
 .chatMessage {
@@ -309,10 +311,10 @@ transition: border-color 0.3s ease-in-out;
 
 .chatMessagesBubble_Time {
   display: block;
-text-align: right;
-font-size: 10px;
-color: #d1d1d1;
-margin-top: 5px;
+  text-align: right;
+  font-size: 10px;
+  color: #d1d1d1;
+  margin-top: 5px;
 }
 
 .chatMessageInputform {
@@ -326,6 +328,7 @@ margin-top: 5px;
   margin-top: 0.75rem;
   /* margin-bottom: 0.75rem; */
 }
+
 .chatMessageInputdiv {
   display: flex;
   align-items: center;
@@ -350,7 +353,8 @@ margin-top: 5px;
   line-height: 1.25rem;
   overflow-y: auto; */
   outline: none;
-  padding: 8px 4px;         /* Keep original padding */
+  padding: 8px 4px;
+  /* Keep original padding */
   font-size: 1rem;
   border-radius: 4px;
   line-height: 1.5rem;
@@ -361,17 +365,18 @@ margin-top: 5px;
   min-height: 1.47em;
   white-space: pre-wrap;
   word-break: break-all;
-  overflow-y: auto; /* Allow vertical scrolling if needed */  
+  overflow-y: auto;
+  /* Allow vertical scrolling if needed */
 }
 
 .chatMessageInput:focus {
-border: 1px solid #12bbb5 !important;
-box-shadow: 0 0 5px rgba(18, 187, 181, 0.5);
-transition: border-color 0.3s ease-in-out;
+  border: 1px solid #12bbb5 !important;
+  box-shadow: 0 0 5px rgba(18, 187, 181, 0.5);
+  transition: border-color 0.3s ease-in-out;
 }
 
 .chatMessageInput::-webkit-scrollbar {
-display: none;
+  display: none;
 }
 
 .chatMessageInputSubmit {
@@ -386,54 +391,54 @@ display: none;
 }
 
 .chat-container {
-width: 100%;
-font-family: Arial, sans-serif;
+  width: 100%;
+  font-family: Arial, sans-serif;
 }
 
 .message-row {
-display: flex;
-align-items: flex-end;
-margin-bottom: 16px;
-gap: 10px;
-word-break: break-all;
-max-width: 100%;
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 16px;
+  gap: 10px;
+  word-break: break-all;
+  max-width: 100%;
 
 }
 
 .message-row.incoming {
-justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .message-row.outgoing {
-justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 
 .bubble-container {
-display: flex;
-flex-direction: column;
-max-width: 70%;
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
 }
 
 .chat-bubble {
 
-background-color: #f3f4f6;
-border-radius: 0.5rem;
-padding: 0.5rem;
-font-size: 14px;
-max-width: 20rem;
-margin-bottom: 5px;
+  background-color: #f3f4f6;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 14px;
+  max-width: 20rem;
+  margin-bottom: 5px;
 }
 
 .outgoing .chat-bubble {
-background-color: #12bbb5;
-color: white;
+  background-color: #12bbb5;
+  color: white;
 
 }
 
 .incoming .chat-bubble {
-background-color: #dedee4b9;
-color: black;
+  background-color: #dedee4b9;
+  color: black;
 }
 
 .timestamp_incomeing {
@@ -446,35 +451,35 @@ color: black;
   float: left;
   position: relative;
   justify-content: start;
-  }
-  
-
-  .timestamp_outgoing {
-    font-size: 11px;
-    color: #888;
-    margin-top: 4px;
-    text-align: right;
-    display: flex;
-    align-items: center;
-    float: right;
-    position: relative;
-    justify-content: end;
-    }
+}
+
+
+.timestamp_outgoing {
+  font-size: 11px;
+  color: #888;
+  margin-top: 4px;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  float: right;
+  position: relative;
+  justify-content: end;
+}
 
 .status-icon {
 
-bottom: 5px;
-margin-left: 10px;
-right: 10px;
-font-size: 12px;
+  bottom: 5px;
+  margin-left: 10px;
+  right: 10px;
+  font-size: 12px;
 }
 
 .read {
-color: blue;
+  color: blue;
 }
 
-.text-sm{
-font-size: .875rem;
+.text-sm {
+  font-size: .875rem;
 }
 
 /* @media (min-width: 640px) {
@@ -500,47 +505,47 @@ font-size: .875rem;
 
 @media (min-width: 768px) {
   .grid-container {
-      height: 550px; 
-      grid-template-columns: repeat(9, minmax(0, 1fr));
+    height: 550px;
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .sidebarContainer {
-      /* display: grid; */
-      grid-column: span 4 ;
+    /* display: grid; */
+    grid-column: span 4;
   }
 
   .messageContainer {
-      display: grid;
-      grid-column: span 5;
+    display: grid;
+    grid-column: span 5;
   }
 
   .chatMessageContainerInnerDiv_button {
-      display: none;
+    display: none;
   }
 
   .chatMessages {
-      padding-left: 2rem;
-      padding-right: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 
 }
 
-.typingIndicator{
+.typingIndicator {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.2rem;
 }
 
-/* From Uiverse.io by ashish-yadv */ 
+/* From Uiverse.io by ashish-yadv */
 .typing-loader {
   width: 60px;
   display: flex;
   align-items: center;
-height: 100%;
-margin-right: 10px;
-width: 100%;
+  height: 100%;
+  margin-right: 10px;
+  width: 100%;
   font-size: smaller;
-  gap: 0.5rem;
+  gap: 0.3rem;
 }
 
 .ball {
@@ -580,7 +585,7 @@ width: 100%;
   }
 }
 
-/* From Uiverse.io by abrahamcalsin */ 
+/* From Uiverse.io by abrahamcalsin */
 .dot-spinner {
   --uib-size: 2.8rem;
   --uib-speed: .9s;
@@ -674,166 +679,168 @@ width: 100%;
 
 /* Sidebar Container */
 .chatSidebar {
-background: #ffffff;
-padding: 15px;
-border-radius: 10px;
-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-width: 300px;
+  background: #ffffff;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
 }
 
 /* Chat List */
 .chatItem {
-display: flex;
-align-items: center;
-padding: 12px;
-border-radius: 8px;
-transition: background 0.3s;
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  transition: background 0.3s;
 }
 
 .chatItem:hover {
-background: #f0f0f0;
-cursor: pointer;
+  background: #f0f0f0;
+  cursor: pointer;
 }
 
 /* Profile Images */
 .chatAvatar {
-width: 40px;
-height: 40px;
-border-radius: 50%;
-margin-right: 12px;
-border: 2px solid #ccc;
-transition: transform 0.3s ease-in-out;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 12px;
+  border: 2px solid #ccc;
+  transition: transform 0.3s ease-in-out;
 }
 
 .chatAvatar:hover {
-transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 /* Chat Details */
 .chatDetails {
-flex-grow: 1;
+  flex-grow: 1;
 }
 
 .chatName {
-font-weight: 600;
-color: #333;
+  font-weight: 600;
+  color: #333;
 }
 
 .chatMessage {
-font-size: 0.9rem;
-color: #777;
+  font-size: 0.9rem;
+  color: #777;
 }
 
 /* Chat Time */
 .chatTime {
-font-size: 0.8rem;
-color: #aaa;
+  font-size: 0.8rem;
+  color: #aaa;
 }
 
 
 
 /* Position the status dot on the corner of the profile picture */
 .chatSidebarConversationImg {
-position: relative;
-width: 3rem;
-height: 3rem;
-border-radius: 100%;
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 100%;
 }
 
 /* The status dot */
 .chatSidebarStatusDot {
-position: absolute;
-bottom: 0;
-right: 0;
-width: 12px;
-height: 12px;
-border-radius: 50%;
-border: 2px solid white; /* Border for a neat appearance */
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid white;
+  /* Border for a neat appearance */
 }
 
 
 /* For online status */
 .chatSidebarStatusDot.online {
-background-color: green;
+  background-color: green;
 }
 
 /* For offline status */
 .chatSidebarStatusDot.offline {
-background-color: rgba(179, 170, 170, 0.712);
+  background-color: rgba(179, 170, 170, 0.712);
 }
 
 .conversation-container {
-display: flex;
-align-items: center;
-gap: 12px;
-padding: 12px;
-/* border-radius: 8px; */
-border-bottom: .5px solid lightgray;
-background-color: white;
-/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-cursor: pointer;
-transition: background-color 0.3s ease-in-out;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  /* border-radius: 8px; */
+  border-bottom: .5px solid lightgray;
+  background-color: white;
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
 }
 
 .conversation-container:hover {
-background-color: #f5f5f5;
+  background-color: #f5f5f5;
 }
 
 .conversation-avatar {
-position: relative;
+  position: relative;
 }
 
 .conversation-img {
-width: 48px;
-height: 48px;
-border-radius: 50%;
-border: 2px solid #ccc;
-transition: border-color 0.3s;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  transition: border-color 0.3s;
 }
 
 .conversation-img:hover {
-border-color: #12bbb5;
+  border-color: #12bbb5;
 }
 
 
 .conversation-info {
-flex-grow: 1;
-display: flex;
-flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .conversation-header {
-display: flex;
-justify-content: space-between;
-align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .conversation-name {
-font-size: 14px;
-font-weight: bold;
-color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
 }
 
 .conversation-time {
-font-size: 12px;
-color: #777;
+  font-size: 12px;
+  color: #777;
 }
 
 .conversation-message {
-font-size: 12px;
-color: #777;
-white-space: nowrap;
-overflow: hidden;
-text-overflow: ellipsis;
+  font-size: 12px;
+  color: #777;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .divider {
-background-color: #ccc;
+  background-color: #ccc;
 
 }
 
 
 @keyframes pulse0112 {
+
   0%,
   100% {
     transform: scale(0);
@@ -874,7 +881,8 @@ background-color: #ccc;
 }
 
 .attachments-preview::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Chrome/Safari */
+  display: none;
+  /* Hide scrollbar for Chrome/Safari */
 }
 
 .file-preview-wrapper {
@@ -897,7 +905,8 @@ background-color: #ccc;
 .file-preview {
   position: relative;
   /* width: 246px; */
-  height: 100px; /* Increased height to accommodate filename */
+  height: 100px;
+  /* Increased height to accommodate filename */
   border-radius: 8px;
   overflow: hidden;
   background: linear-gradient(135deg, #f9f9f9, #e9ecef);
@@ -940,7 +949,7 @@ background-color: #ccc;
 
 .add-more-files:hover {
   border-color: #999;
-  background: rgba(0,0,0,0.02);
+  background: rgba(0, 0, 0, 0.02);
 }
 
 .plus-icon {
@@ -979,6 +988,7 @@ background-color: #ccc;
   object-fit: cover;
   border-radius: 8px;
 }
+
 .file-preview-document span,
 .file-name {
   display: block;
@@ -1109,7 +1119,7 @@ background-color: #ccc;
   left: 0;
   background-color: white;
   border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   padding: 8px;
   z-index: 1000;
   display: flex;
@@ -1142,7 +1152,8 @@ background-color: #ccc;
 
 .media-item {
   background: #f3f4f6;
-  border-radius: 0.375rem; /* reduced from 0.75rem */
+  border-radius: 0.375rem;
+  /* reduced from 0.75rem */
   padding: 0.5rem;
   overflow: hidden;
   display: flex;
@@ -1151,7 +1162,7 @@ background-color: #ccc;
   width: 246px;
 }
 
-.media-content{
+.media-content {
   width: 100%;
   object-fit: cover;
 }
@@ -1159,7 +1170,8 @@ background-color: #ccc;
 .media-preview {
   max-width: 100%;
   max-height: 200px;
-  border-radius: 0.375rem; /* reduced from 0.5rem */
+  border-radius: 0.375rem;
+  /* reduced from 0.5rem */
   object-fit: cover;
 }
 
@@ -1202,7 +1214,8 @@ background-color: #ccc;
 .document-preview {
   position: relative;
   width: 246px;
-  height: 60px; /* Increased height to accommodate filename */
+  height: 60px;
+  /* Increased height to accommodate filename */
   border-radius: 12px;
   overflow: hidden;
   background: linear-gradient(135deg, #f9f9f9, #e9ecef);
@@ -1231,8 +1244,13 @@ background-color: #ccc;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 

package/src/types/type.ts

@@ -51,6 +51,7 @@ export interface ConversationProps {
       _id: string;
       senderId: string;
       message: string;
+      media:string[];
       chatId: string;
       createdAt: string;
       updatedAt: string;