@pubuduth-aplicy/chat-ui 2.1.76 → 2.1.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Chat.config.ts +1 -0
- package/src/components/Chat.tsx +0 -7
- package/src/components/messages/Message.tsx +0 -1
- package/src/components/messages/MessageContainer.tsx +0 -47
- package/src/components/messages/MessageInput.tsx +0 -3
- package/src/components/messages/Messages.tsx +8 -9
- package/src/components/sidebar/Conversation.tsx +8 -8
- package/src/components/sidebar/Conversations.tsx +3 -3
- package/src/declarations.d.ts +1 -0
- package/src/hooks/mutations/useDeleteMessage.ts +5 -5
- package/src/hooks/mutations/useEditMessage.ts +5 -5
- package/src/hooks/mutations/useSendMessage.ts +5 -5
- package/src/providers/ChatProvider.tsx +13 -13
- package/src/service/messageService.ts +1 -1
- package/src/service/sidebarApi.ts +2 -2
package/package.json
CHANGED
package/src/Chat.config.ts
CHANGED
package/src/components/Chat.tsx
CHANGED
|
@@ -15,16 +15,9 @@ export const Chat = () => {
|
|
|
15
15
|
const handleMessage = (event: MessageEvent) => {
|
|
16
16
|
try {
|
|
17
17
|
const parsed = JSON.parse(event.data);
|
|
18
|
-
console.log("Parsed WebSocket message:", parsed);
|
|
19
18
|
|
|
20
19
|
if (parsed.event === "newMessage") {
|
|
21
20
|
const message = parsed.data;
|
|
22
|
-
console.log(
|
|
23
|
-
"📨 Message received at:",
|
|
24
|
-
message.createdAt,
|
|
25
|
-
"from:",
|
|
26
|
-
message
|
|
27
|
-
);
|
|
28
21
|
// Send delivery confirmation
|
|
29
22
|
// Update UI immediately
|
|
30
23
|
setMessages((prev) => [...prev, message]);
|
|
@@ -114,7 +114,6 @@ const Message = ({ message }: MessageProps) => {
|
|
|
114
114
|
// const handleDownload = (url: string, name: string) => {
|
|
115
115
|
// saveAs(url, name);
|
|
116
116
|
// };
|
|
117
|
-
console.log("check message status", message.status);
|
|
118
117
|
|
|
119
118
|
const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
|
|
120
119
|
const [downloadProgress, setDownloadProgress] = useState<number>(0);
|
|
@@ -13,52 +13,6 @@ const MessageContainer = () => {
|
|
|
13
13
|
useChatUIStore();
|
|
14
14
|
const { socket, isUserOnline } = useChatContext();
|
|
15
15
|
const { role } = getChatConfig();
|
|
16
|
-
// useEffect(() => {
|
|
17
|
-
// if (!socket) return;
|
|
18
|
-
|
|
19
|
-
// const handleMessage = (event) => {
|
|
20
|
-
// try {
|
|
21
|
-
// const parsed = JSON.parse(event.data);
|
|
22
|
-
|
|
23
|
-
// if (parsed.event === 'newMessage') {
|
|
24
|
-
// const message = parsed.data;
|
|
25
|
-
// console.log('Received message:', message);
|
|
26
|
-
|
|
27
|
-
// if (selectedConversation?._id !== message.chatId) return;
|
|
28
|
-
|
|
29
|
-
// const messageId = message._id || message.messageId;
|
|
30
|
-
// console.log('Message ID for unread:', messageId);
|
|
31
|
-
|
|
32
|
-
// if (!messageId) {
|
|
33
|
-
// console.warn('Message has no _id or messageId, skipping unread tracking');
|
|
34
|
-
// return;
|
|
35
|
-
// }
|
|
36
|
-
|
|
37
|
-
// const updatedUnread = [
|
|
38
|
-
// ...(selectedConversation?.unreadMessageIds || []),
|
|
39
|
-
// messageId,
|
|
40
|
-
// ];
|
|
41
|
-
|
|
42
|
-
// console.log('Updated unreadMessageIds:', updatedUnread);
|
|
43
|
-
|
|
44
|
-
// setSelectedConversation({
|
|
45
|
-
// ...selectedConversation,
|
|
46
|
-
// unreadMessageIds: updatedUnread,
|
|
47
|
-
// });
|
|
48
|
-
// }
|
|
49
|
-
|
|
50
|
-
// // Handle other events...
|
|
51
|
-
|
|
52
|
-
// } catch (error) {
|
|
53
|
-
// console.error("WebSocket message parse error:", error);
|
|
54
|
-
// }
|
|
55
|
-
// };
|
|
56
|
-
|
|
57
|
-
// socket.addEventListener("message", handleMessage);
|
|
58
|
-
// return () => socket.removeEventListener("message", handleMessage);
|
|
59
|
-
// }, [socket, setMessages, selectedConversation, setSelectedConversation]);
|
|
60
|
-
|
|
61
|
-
// Join chat room when conversation is selected
|
|
62
16
|
|
|
63
17
|
useEffect(() => {
|
|
64
18
|
if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
|
|
@@ -81,7 +35,6 @@ const MessageContainer = () => {
|
|
|
81
35
|
const handleMessage = (event: MessageEvent) => {
|
|
82
36
|
try {
|
|
83
37
|
const data = JSON.parse(event.data);
|
|
84
|
-
console.log("Parsed WebSocket message in mc:", data);
|
|
85
38
|
|
|
86
39
|
if (data.event === "getOnlineUsers") {
|
|
87
40
|
setOnlineUsers(data.payload); // payload should be an array of user IDs
|
|
@@ -76,7 +76,6 @@ const MessageInput = () => {
|
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
}, [selectedConversation?._id, socket, sendMessage]);
|
|
79
|
-
console.log('selected', selectedConversation);
|
|
80
79
|
|
|
81
80
|
useEffect(() => {
|
|
82
81
|
// Clear all input state when conversation changes
|
|
@@ -136,12 +135,10 @@ const MessageInput = () => {
|
|
|
136
135
|
const handleMessage = (event: MessageEvent) => {
|
|
137
136
|
try {
|
|
138
137
|
const data = JSON.parse(event.data);
|
|
139
|
-
console.log("Received WebSocket message:", data);
|
|
140
138
|
if (
|
|
141
139
|
data.event === "typing" &&
|
|
142
140
|
data.data.chatId === selectedConversation._id
|
|
143
141
|
) {
|
|
144
|
-
console.log("Setting typing user:", data.data.userId);
|
|
145
142
|
setTypingUser(data.data.userId);
|
|
146
143
|
} else if (
|
|
147
144
|
data.event === "stopTyping" &&
|
|
@@ -44,14 +44,13 @@ const Messages = () => {
|
|
|
44
44
|
const handleMessage = (event: MessageEvent) => {
|
|
45
45
|
try {
|
|
46
46
|
const parsed = JSON.parse(event.data);
|
|
47
|
-
console.log("Parsed WebSocket message1:", parsed);
|
|
48
47
|
if (parsed.type === "newMessage" || parsed.event === "newMessage") {
|
|
49
48
|
const newMessage = parsed.data;
|
|
50
49
|
if (!newMessage) {
|
|
51
|
-
console.warn(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
);
|
|
50
|
+
// console.warn(
|
|
51
|
+
// "Received newMessage event without a message payload",
|
|
52
|
+
// parsed
|
|
53
|
+
// );
|
|
55
54
|
return;
|
|
56
55
|
}
|
|
57
56
|
|
|
@@ -74,7 +73,7 @@ const Messages = () => {
|
|
|
74
73
|
if (parsed.event === "messageStatusUpdated") {
|
|
75
74
|
const { messageId, status } = parsed.data || {};
|
|
76
75
|
if (!messageId) {
|
|
77
|
-
console.error("Missing messageId in status update", parsed);
|
|
76
|
+
// console.error("Missing messageId in status update", parsed);
|
|
78
77
|
return;
|
|
79
78
|
}
|
|
80
79
|
|
|
@@ -88,7 +87,7 @@ const Messages = () => {
|
|
|
88
87
|
return msg;
|
|
89
88
|
|
|
90
89
|
if (newIdx > currentIdx) {
|
|
91
|
-
console.log(`Updating status for ${messageId} to ${status}`);
|
|
90
|
+
// console.log(`Updating status for ${messageId} to ${status}`);
|
|
92
91
|
return { ...msg, status };
|
|
93
92
|
}
|
|
94
93
|
|
|
@@ -98,7 +97,7 @@ const Messages = () => {
|
|
|
98
97
|
}
|
|
99
98
|
|
|
100
99
|
if (parsed.event === "messageEdited") {
|
|
101
|
-
console.log("Received messageEdited event:", parsed);
|
|
100
|
+
// console.log("Received messageEdited event:", parsed);
|
|
102
101
|
|
|
103
102
|
const updatedMessage = parsed.data;
|
|
104
103
|
if (!updatedMessage || !updatedMessage.messageId) return;
|
|
@@ -113,7 +112,7 @@ const Messages = () => {
|
|
|
113
112
|
}
|
|
114
113
|
|
|
115
114
|
if (parsed.event === "messageDeleted") {
|
|
116
|
-
console.log("Received messageDeleted event:", parsed);
|
|
115
|
+
// console.log("Received messageDeleted event:", parsed);
|
|
117
116
|
|
|
118
117
|
const { messageId } = parsed.data || {};
|
|
119
118
|
if (!messageId) return;
|
|
@@ -21,14 +21,14 @@ const Conversation = ({ conversation }: ConversationProps) => {
|
|
|
21
21
|
);
|
|
22
22
|
|
|
23
23
|
const handleSelectConversation = () => {
|
|
24
|
-
console.log(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
);
|
|
24
|
+
// console.log(
|
|
25
|
+
// "Selected Conversation Data:",
|
|
26
|
+
// JSON.stringify(conversation, null, 2)
|
|
27
|
+
// );
|
|
28
28
|
setSelectedConversation(conversation);
|
|
29
29
|
const unreadMessageIds = conversation.unreadMessageIds || [];
|
|
30
30
|
if (unreadMessageIds.length > 0 && socket?.readyState === WebSocket.OPEN) {
|
|
31
|
-
console.log("unread messages", unreadMessageIds);
|
|
31
|
+
// console.log("unread messages", unreadMessageIds);
|
|
32
32
|
|
|
33
33
|
const message = {
|
|
34
34
|
event: "messageRead",
|
|
@@ -64,9 +64,9 @@ const Conversation = ({ conversation }: ConversationProps) => {
|
|
|
64
64
|
};
|
|
65
65
|
}, [socket, setOnlineUsers]);
|
|
66
66
|
|
|
67
|
-
useEffect(() => {
|
|
68
|
-
|
|
69
|
-
}, [conversation]);
|
|
67
|
+
// useEffect(() => {
|
|
68
|
+
// // console.log("Current conversation state:", conversation);
|
|
69
|
+
// }, [conversation]);
|
|
70
70
|
|
|
71
71
|
const isOnline = isUserOnline(participant?._id || "");
|
|
72
72
|
const isSelected = selectedConversation?._id === conversation._id;
|
|
@@ -35,7 +35,7 @@ const Conversations = () => {
|
|
|
35
35
|
const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
|
|
36
36
|
|
|
37
37
|
groups.forEach((group) => {
|
|
38
|
-
console.log("group", group.personalConversation);
|
|
38
|
+
// console.log("group", group.personalConversation);
|
|
39
39
|
|
|
40
40
|
if (group.personalConversation) {
|
|
41
41
|
allGeneralChats.push(group.personalConversation);
|
|
@@ -246,8 +246,8 @@ const Conversations = () => {
|
|
|
246
246
|
.filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
|
|
247
247
|
);
|
|
248
248
|
|
|
249
|
-
console.log("filteredGeneralChats",filteredGeneralChats);
|
|
250
|
-
console.log("filteredGroupedServiceChats");
|
|
249
|
+
// console.log("filteredGeneralChats",filteredGeneralChats);
|
|
250
|
+
// console.log("filteredGroupedServiceChats");
|
|
251
251
|
|
|
252
252
|
return (
|
|
253
253
|
<div className="chatSidebarConversations">
|
package/src/declarations.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export const useDeleteMessageMutation = () => {
|
|
|
8
8
|
return useMutation({
|
|
9
9
|
mutationFn: deleteMessage,
|
|
10
10
|
onSuccess: () => {
|
|
11
|
-
console.log("Message deleted successfully!", "success");
|
|
11
|
+
// console.log("Message deleted successfully!", "success");
|
|
12
12
|
// Invalidate both messages and conversations queries
|
|
13
13
|
queryClient.invalidateQueries({ queryKey: ['messages'] });
|
|
14
14
|
queryClient.invalidateQueries({ queryKey: ['conversations'] });
|
|
@@ -16,11 +16,11 @@ export const useDeleteMessageMutation = () => {
|
|
|
16
16
|
onError: (error: any) => {
|
|
17
17
|
console.error("Failed to delete message:", error);
|
|
18
18
|
|
|
19
|
-
const errorMessage =
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
// const errorMessage =
|
|
20
|
+
// error?.response?.data?.errors[0]?.msg ||
|
|
21
|
+
// "An error occurred while deleting the message.";
|
|
22
22
|
|
|
23
|
-
console.log("useDeleteMessageMutation error:", errorMessage);
|
|
23
|
+
// console.log("useDeleteMessageMutation error:", errorMessage);
|
|
24
24
|
},
|
|
25
25
|
});
|
|
26
26
|
};
|
|
@@ -8,15 +8,15 @@ export const useEditMessageMutation = () => {
|
|
|
8
8
|
return useMutation({
|
|
9
9
|
mutationFn: setEditMessage,
|
|
10
10
|
onSuccess: () => {
|
|
11
|
-
console.log("Message edited successfully!", "success");
|
|
11
|
+
// console.log("Message edited successfully!", "success");
|
|
12
12
|
queryClient.invalidateQueries({ queryKey: ['messages'] });
|
|
13
13
|
},
|
|
14
14
|
onError: (error: any) => {
|
|
15
15
|
console.error("Failed to edit message:", error);
|
|
16
|
-
const errorMessage =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
console.log("useMessageMutation edit error:", errorMessage);
|
|
16
|
+
// const errorMessage =
|
|
17
|
+
// error?.response?.data?.errors[0]?.msg ||
|
|
18
|
+
// "An error occurred while editing the message.";
|
|
19
|
+
// console.log("useMessageMutation edit error:", errorMessage);
|
|
20
20
|
},
|
|
21
21
|
});
|
|
22
22
|
|
|
@@ -7,17 +7,17 @@ export const useMessageMutation = () => {
|
|
|
7
7
|
return useMutation({
|
|
8
8
|
mutationFn: sendMessage,
|
|
9
9
|
onSuccess: () => {
|
|
10
|
-
console.log("Service submitted successfully!", "success");
|
|
10
|
+
// console.log("Service submitted successfully!", "success");
|
|
11
11
|
queryClient.invalidateQueries({ queryKey: ['messages'] });
|
|
12
12
|
},
|
|
13
13
|
onError: (error: any) => {
|
|
14
14
|
console.error("Failed to submit service data:", error);
|
|
15
15
|
|
|
16
|
-
const errorMessage =
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
// const errorMessage =
|
|
17
|
+
// error?.response?.data?.errors[0]?.msg ||
|
|
18
|
+
// "An error occurred while submitting service data.";
|
|
19
19
|
|
|
20
|
-
console.log("useSumbitServiceMutation :", errorMessage);
|
|
20
|
+
// console.log("useSumbitServiceMutation :", errorMessage);
|
|
21
21
|
},
|
|
22
22
|
});
|
|
23
23
|
};
|
|
@@ -41,19 +41,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
|
|
|
41
41
|
const reconnectAttempts = useRef(0);
|
|
42
42
|
const maxReconnectAttempts = 5;
|
|
43
43
|
const reconnectInterval = 5000; // 5 seconds
|
|
44
|
-
const {
|
|
44
|
+
const { webSocketUrl } = getChatConfig();
|
|
45
45
|
|
|
46
46
|
const connectWebSocket = useCallback(() => {
|
|
47
|
-
console.log("🔌 Creating new WebSocket connection...");
|
|
47
|
+
// console.log("🔌 Creating new WebSocket connection...");
|
|
48
48
|
|
|
49
49
|
// Convert HTTP URL to WebSocket URL
|
|
50
|
-
const wsUrl =
|
|
50
|
+
const wsUrl = webSocketUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
|
|
51
51
|
const socketInstance = new WebSocket(
|
|
52
52
|
`${wsUrl}?userId=${encodeURIComponent(userId)}`
|
|
53
53
|
);
|
|
54
54
|
|
|
55
55
|
socketInstance.onopen = () => {
|
|
56
|
-
console.log("✅ WebSocket connected");
|
|
56
|
+
// console.log("✅ WebSocket connected");
|
|
57
57
|
setIsConnected(true);
|
|
58
58
|
reconnectAttempts.current = 0;
|
|
59
59
|
|
|
@@ -71,12 +71,12 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
|
|
|
71
71
|
const data = JSON.parse(event.data);
|
|
72
72
|
|
|
73
73
|
if (data.event === "getOnlineUsers") {
|
|
74
|
-
console.log("Online users update:", data.data);
|
|
74
|
+
// console.log("Online users update:", data.data);
|
|
75
75
|
setOnlineUsers(new Set(data.data));
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
// Handle other message types here
|
|
79
|
-
console.log("Received message:", data);
|
|
79
|
+
// console.log("Received message:", data);
|
|
80
80
|
} catch (error) {
|
|
81
81
|
console.error("Error parsing message:", error);
|
|
82
82
|
}
|
|
@@ -87,23 +87,23 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
|
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
socketInstance.onclose = (event) => {
|
|
90
|
-
console.log("🔌 WebSocket connection closed", event);
|
|
91
|
-
console.log("❌ WebSocket disconnected:", event.code, event.reason);
|
|
90
|
+
// console.log("🔌 WebSocket connection closed", event);
|
|
91
|
+
// console.log("❌ WebSocket disconnected:", event.code, event.reason);
|
|
92
92
|
setIsConnected(false);
|
|
93
93
|
|
|
94
94
|
// Attempt reconnection
|
|
95
95
|
if (reconnectAttempts.current < maxReconnectAttempts) {
|
|
96
96
|
reconnectAttempts.current += 1;
|
|
97
|
-
console.log(
|
|
98
|
-
|
|
99
|
-
);
|
|
97
|
+
// console.log(
|
|
98
|
+
// `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
|
|
99
|
+
// );
|
|
100
100
|
setTimeout(connectWebSocket, reconnectInterval);
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
|
|
104
104
|
socketRef.current = socketInstance;
|
|
105
105
|
setSocket(socketInstance);
|
|
106
|
-
}, [
|
|
106
|
+
}, [webSocketUrl, userId]);
|
|
107
107
|
|
|
108
108
|
const sendMessage = useCallback((data: any) => {
|
|
109
109
|
if (socketRef.current?.readyState === WebSocket.OPEN) {
|
|
@@ -117,7 +117,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
|
|
|
117
117
|
connectWebSocket();
|
|
118
118
|
|
|
119
119
|
return () => {
|
|
120
|
-
console.log("❌ Closing WebSocket connection...");
|
|
120
|
+
// console.log("❌ Closing WebSocket connection...");
|
|
121
121
|
if (socketRef.current) {
|
|
122
122
|
socketRef.current.close(1000, "Component unmounted");
|
|
123
123
|
socketRef.current = null;
|
|
@@ -47,7 +47,7 @@ export const fetchMessages = async (chatId: string | undefined, userid: string,
|
|
|
47
47
|
const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`, {
|
|
48
48
|
params: { pagenum, limit: 20 },
|
|
49
49
|
});
|
|
50
|
-
console.log(response);
|
|
50
|
+
// console.log(response);
|
|
51
51
|
return response.data;
|
|
52
52
|
} catch (error) {
|
|
53
53
|
console.error("Error fetching messages:", error);
|
|
@@ -16,11 +16,11 @@ export const getAllConversationData = async (userid: string) => {
|
|
|
16
16
|
|
|
17
17
|
const res = await apiClient.get<ApiResponse>(endpoint);
|
|
18
18
|
if (res.data) {
|
|
19
|
-
console.log("API Response: ", res.data);
|
|
19
|
+
// console.log("API Response: ", res.data);
|
|
20
20
|
|
|
21
21
|
}
|
|
22
22
|
const conversationsWithParticipantDetails = res.data.serviceInfo;
|
|
23
|
-
console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
|
|
23
|
+
// console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
|
|
24
24
|
|
|
25
25
|
// If needed, you can map the conversations in the specific structure
|
|
26
26
|
// const formattedConversations = conversationsWithParticipantDetails?.map((conversation) => ({
|