@pubuduth-aplicy/chat-ui 2.1.92 → 2.1.94

package/package.json

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

@@ -23,33 +23,50 @@ const VirtualizedChatList = ({ conversations }: Props) => {
     <div
       ref={parentRef}
       style={{
-        height: `${virtualizer.getTotalSize()}px`,
+        height: `400px`,
         width: "100%",
-        position: "relative",
+        // position: "relative",
         overflow: "auto",
       }}
     >
-      {virtualizer.getVirtualItems().map((item) => {
+      {/* {virtualizer.getVirtualItems().map((item) => {
         const conversation = conversations[item.index];
-        return (
-          <div
-            key={item.key}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: `${item.size}px`,
-              transform: `translateY(${item.start}px)`,
-            }}
-          >
-            <Conversation
-              conversation={conversation}
-              lastIdx={item.index === conversations.length - 1}
-            />
-          </div>
-        );
-      })}
+        return ( */}
+      <div
+        // key={item.key}
+        style={{
+          position: "relative",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: `${virtualizer.getTotalSize()}px`,
+          // transform: `translateY(${item.start}px)`,
+        }}
+      >
+        {virtualizer.getVirtualItems().map((item) => {
+          const conversation = conversations[item.index];
+          return (
+            <div
+              key={item.key}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${item.size}px`,
+                transform: `translateY(${item.start}px)`,
+              }}
+            >
+              <Conversation
+                conversation={conversation}
+                lastIdx={item.index === conversations.length - 1}
+              />
+            </div>
+          );
+        })}
+      </div>
+      {/* ); */}
+      {/* })} */}
     </div>
   );
 };

package/src/components/messages/Message.tsx

@@ -455,7 +455,7 @@ const Message = ({ message }: MessageProps) => {
                         cancelDownload();
                       } else {
                         handleDownload(
-                          `${cdnUrl}${media.url}`,
+                          `${cdnUrl}/${media.url}`,
                           media.name,
                           index
                         );

package/src/components/messages/MessageInput.tsx

@@ -194,8 +194,8 @@ const MessageInput = () => {
   };
 
   const getFileType = (mimeType: string): FileType | null => {
-    if (ACCEPTED_IMAGE_TYPES.includes(mimeType)) return "image";
     if (ACCEPTED_VIDEO_TYPES.includes(mimeType)) return "video";
+    if (ACCEPTED_IMAGE_TYPES.includes(mimeType)) return "image";
     if (ACCEPTED_DOCUMENT_TYPES.includes(mimeType)) return "document";
     return null;
   };

package/src/components/sidebar/Conversation.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MessageCircle } from "lucide-react";
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
@@ -143,4 +143,4 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
 };
 
-export default Conversation;
+export default memo(Conversation);

package/src/components/sidebar/Conversations.tsx

@@ -17,6 +17,10 @@ type GroupedServiceChats = {
   };
 };
 
+type Row =
+  | { type: "service-header"; serviceId: string; title: string }
+  | { type: "conversation"; conversation: ConversationType };
+
 type TabType = "personal" | "service";
 
 const Conversations = () => {
@@ -36,13 +40,13 @@ const Conversations = () => {
     const allPersonalChats: ConversationType[] = [];
     const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
 
-    groups.forEach((group, groupIndex) => {
+    groups.forEach((group) => {
    
       if (group.personalConversation) {
         allPersonalChats.push(group.personalConversation);
       }
 
-      group.serviceConversations.forEach((serviceGroup, serviceIndex) => {
+      group.serviceConversations.forEach((serviceGroup) => {
         if (!allServiceChatsMap.has(serviceGroup.serviceId)) {
           allServiceChatsMap.set(serviceGroup.serviceId, {
             serviceTitle: serviceGroup.serviceTitle,
@@ -64,7 +68,7 @@ const Conversations = () => {
       );
 
     sortConversations(allPersonalChats);
-    allServiceChatsMap.forEach((value, key) => {
+    allServiceChatsMap.forEach((value) => {
       sortConversations(value.conversations);
     });
 
@@ -320,7 +324,8 @@ const isEmpty = !showPersonalTab && !showServiceTab;
           </div>
         ) : (
           <>
-            {activeTab === "personal" && filteredPersonalChats.length > 0 && (
+          <div className="h-full overflow-auto">
+ {activeTab === "personal" && filteredPersonalChats.length > 0 && (
               <VirtualizedChatList conversations={filteredPersonalChats} />
             )}
 
@@ -340,6 +345,8 @@ const isEmpty = !showPersonalTab && !showServiceTab;
                 )}
               </div>
             )}
+          </div>
+           
           </>
         )}
       </div>