@pubuduth-aplicy/chat-ui 2.1.69 → 2.1.71
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/components/messages/Message.tsx +287 -184
- package/src/components/sidebar/Conversation.tsx +72 -43
- package/src/style/style.css +320 -88
- package/src/types/type.ts +3 -1
|
@@ -5,24 +5,27 @@ import { ConversationProps } from "../../types/type";
|
|
|
5
5
|
import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
|
|
6
6
|
|
|
7
7
|
const Conversation = ({ conversation }: ConversationProps) => {
|
|
8
|
-
const {
|
|
9
|
-
|
|
8
|
+
const {
|
|
9
|
+
setSelectedConversation,
|
|
10
|
+
setOnlineUsers,
|
|
11
|
+
onlineUsers,
|
|
12
|
+
selectedConversation,
|
|
13
|
+
} = useChatUIStore();
|
|
10
14
|
const { socket, sendMessage } = useChatContext();
|
|
11
|
-
|
|
15
|
+
const { role } = getChatConfig();
|
|
12
16
|
const handleSelectConversation = async () => {
|
|
13
17
|
setSelectedConversation(conversation);
|
|
14
18
|
|
|
15
19
|
const unreadMessages = conversation.unreadMessageIds || [];
|
|
16
20
|
if (unreadMessages.length > 0) {
|
|
17
21
|
console.log("Marking messages as read:", unreadMessages);
|
|
18
|
-
|
|
22
|
+
|
|
19
23
|
sendMessage({
|
|
20
24
|
event: "messageRead",
|
|
21
|
-
data:{
|
|
25
|
+
data: {
|
|
22
26
|
messageIds: unreadMessages,
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
27
|
+
chatId: conversation._id,
|
|
28
|
+
},
|
|
26
29
|
});
|
|
27
30
|
}
|
|
28
31
|
};
|
|
@@ -53,7 +56,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
|
|
|
53
56
|
conversation?.participantDetails?._id &&
|
|
54
57
|
onlineUsers?.includes(conversation.participantDetails._id);
|
|
55
58
|
|
|
56
|
-
|
|
59
|
+
const isSelected = selectedConversation?._id === conversation._id;
|
|
57
60
|
|
|
58
61
|
return (
|
|
59
62
|
<>
|
|
@@ -65,54 +68,80 @@ const Conversation = ({ conversation }: ConversationProps) => {
|
|
|
65
68
|
<img
|
|
66
69
|
className="conversation-img"
|
|
67
70
|
src={
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
role === "admin" &&
|
|
72
|
+
Array.isArray(selectedConversation?.participantDetails)
|
|
73
|
+
? selectedConversation.participantDetails[1]?.profilePic
|
|
74
|
+
: !Array.isArray(selectedConversation?.participantDetails)
|
|
75
|
+
? selectedConversation?.participantDetails?.profilePic
|
|
76
|
+
: undefined
|
|
73
77
|
}
|
|
74
|
-
|
|
75
78
|
alt="User Avatar"
|
|
76
79
|
/>
|
|
77
80
|
<span
|
|
78
|
-
className={`chatSidebarStatusDot ${
|
|
79
|
-
isUserOnline && "online"
|
|
80
|
-
}`}
|
|
81
|
+
className={`chatSidebarStatusDot ${isUserOnline && "online"}`}
|
|
81
82
|
></span>
|
|
82
83
|
</div>
|
|
83
84
|
|
|
84
85
|
<div className="conversation-info">
|
|
85
86
|
<div className="conversation-header">
|
|
86
87
|
<p className="conversation-name">
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
88
|
+
{role === "admin" &&
|
|
89
|
+
Array.isArray(selectedConversation?.participantDetails)
|
|
90
|
+
? selectedConversation.participantDetails[1]?.firstname
|
|
91
|
+
: !Array.isArray(selectedConversation?.participantDetails)
|
|
92
|
+
? selectedConversation?.participantDetails?.firstname
|
|
93
|
+
: undefined}
|
|
94
94
|
</p>
|
|
95
95
|
<span className="conversation-time">
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
96
|
+
{conversation.lastMessage.status === 'deleted' ? (
|
|
97
|
+
// Show deleted timestamp if message is deleted
|
|
98
|
+
new Date(conversation.lastMessage.updatedAt).toLocaleTimeString([], {
|
|
99
|
+
hour: "2-digit",
|
|
100
|
+
minute: "2-digit",
|
|
101
|
+
})
|
|
102
|
+
) : conversation.lastMessage.status === 'edited' ? (
|
|
103
|
+
// Show updated timestamp if message was edited
|
|
104
|
+
new Date(conversation.lastMessage.updatedAt).toLocaleTimeString([], {
|
|
105
|
+
hour: "2-digit",
|
|
106
|
+
minute: "2-digit",
|
|
107
|
+
})
|
|
108
|
+
) : (
|
|
109
|
+
// Default to created timestamp
|
|
110
|
+
new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
|
|
111
|
+
hour: "2-digit",
|
|
112
|
+
minute: "2-digit",
|
|
113
|
+
})
|
|
114
|
+
)}
|
|
103
115
|
</span>
|
|
104
116
|
</div>
|
|
105
117
|
<p className="conversation-message">
|
|
106
|
-
{conversation.lastMessage.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
118
|
+
{conversation.lastMessage.status === "deleted" ? (
|
|
119
|
+
"This message was deleted"
|
|
120
|
+
) : conversation.lastMessage.type !== "system" &&
|
|
121
|
+
conversation.lastMessage.message.length > 50 ? (
|
|
122
|
+
conversation.lastMessage.message.slice(0, 50) + "..."
|
|
123
|
+
) : conversation.lastMessage.media.length > 0 ? (
|
|
124
|
+
<div
|
|
125
|
+
style={{ display: "flex", alignItems: "center", gap: "5px" }}
|
|
126
|
+
>
|
|
127
|
+
<svg
|
|
128
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
129
|
+
width="18"
|
|
130
|
+
height="18"
|
|
131
|
+
viewBox="0 0 24 24"
|
|
132
|
+
fill="none"
|
|
133
|
+
stroke="currentColor"
|
|
134
|
+
strokeWidth="2"
|
|
135
|
+
strokeLinecap="round"
|
|
136
|
+
strokeLinejoin="round"
|
|
137
|
+
>
|
|
138
|
+
<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>
|
|
139
|
+
</svg>
|
|
140
|
+
attachment
|
|
141
|
+
</div>
|
|
142
|
+
) : (
|
|
143
|
+
conversation.lastMessage.message
|
|
144
|
+
)}
|
|
116
145
|
</p>
|
|
117
146
|
</div>
|
|
118
147
|
</div>
|
|
@@ -120,4 +149,4 @@ const Conversation = ({ conversation }: ConversationProps) => {
|
|
|
120
149
|
);
|
|
121
150
|
};
|
|
122
151
|
|
|
123
|
-
export default Conversation;
|
|
152
|
+
export default Conversation;
|