@pubuduth-aplicy/chat-ui 2.1.56 → 2.1.57
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/Chat.tsx +50 -50
- package/src/components/common/FilePreview.tsx +6 -3
- package/src/components/messages/Message.tsx +143 -29
- package/src/components/messages/MessageContainer.tsx +158 -139
- package/src/components/messages/MessageInput.tsx +66 -11
- package/src/components/messages/Messages.tsx +30 -33
- package/src/components/sidebar/Conversation.tsx +20 -7
- package/src/components/sidebar/Conversations.tsx +26 -26
- package/src/components/sidebar/SearchInput.tsx +60 -54
- package/src/components/sidebar/Sidebar.tsx +7 -7
- package/src/lib/api/endpoint.ts +6 -4
- package/src/style/style.css +112 -27
|
@@ -7,34 +7,36 @@ import Conversation from "./Conversation";
|
|
|
7
7
|
const Conversations = () => {
|
|
8
8
|
const { userId } = useChatContext();
|
|
9
9
|
const { data: conversations } = useGetConversations(userId);
|
|
10
|
-
console.log("conversations",conversations);
|
|
11
|
-
console.log("userId",userId);
|
|
10
|
+
console.log("conversations", conversations);
|
|
11
|
+
console.log("userId", userId);
|
|
12
12
|
// const { loading, conversations } = useGetConversations();
|
|
13
13
|
return (
|
|
14
14
|
<div className="chatSidebarConversations">
|
|
15
15
|
<h2 className="text-lg font-semibold text-gray-700">All Messages</h2>
|
|
16
16
|
{(!conversations || conversations.length === 0) && (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
17
|
+
<div className="flex flex-col items-center justify-center p-8 text-center">
|
|
18
|
+
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 mb-4">
|
|
19
|
+
<svg
|
|
20
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
+
width="32"
|
|
22
|
+
height="32"
|
|
23
|
+
viewBox="0 0 24 24"
|
|
24
|
+
fill="none"
|
|
25
|
+
stroke="currentColor"
|
|
26
|
+
strokeWidth="2"
|
|
27
|
+
strokeLinecap="round"
|
|
28
|
+
strokeLinejoin="round"
|
|
29
|
+
className="text-gray-500"
|
|
30
|
+
>
|
|
31
|
+
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
|
|
32
|
+
</svg>
|
|
33
|
+
</div>
|
|
34
|
+
<h3 className="text-xl font-semibold mb-1">No Conversations</h3>
|
|
35
|
+
<p className="text-gray-500 text-sm mb-4">
|
|
36
|
+
There are no conversations under "All messages"
|
|
37
|
+
</p>
|
|
38
|
+
</div>
|
|
39
|
+
)}
|
|
38
40
|
{conversations?.map((conversation: any, idx: any) => (
|
|
39
41
|
<Conversation
|
|
40
42
|
key={conversation._id}
|
|
@@ -43,11 +45,9 @@ const Conversations = () => {
|
|
|
43
45
|
/>
|
|
44
46
|
))}
|
|
45
47
|
|
|
46
|
-
|
|
47
|
-
|
|
48
48
|
{/* {loading ? <span className='loading loading-spinner mx-auto'></span> : null} */}
|
|
49
49
|
</div>
|
|
50
50
|
);
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
export default Conversations;
|
|
53
|
+
export default Conversations;
|
|
@@ -1,68 +1,74 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
-
import
|
|
3
|
-
import searchicon from
|
|
4
|
-
import useChatUIStore from
|
|
5
|
-
import { useGetConversations } from
|
|
6
|
-
import { useChatContext } from
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import searchicon from "../../assets/icons8-search.svg";
|
|
4
|
+
import useChatUIStore from "../../stores/Zustant";
|
|
5
|
+
import { useGetConversations } from "../../hooks/queries/useChatApi";
|
|
6
|
+
import { useChatContext } from "../../providers/ChatProvider";
|
|
7
7
|
// import { MagnifyingGlass } from "@phosphor-icons/react"
|
|
8
8
|
// import useGetConversations from "../../hooks/useGetConversations";
|
|
9
9
|
// import useConversation from '../../zustand/useConversation'
|
|
10
10
|
// import toast from 'react-hot-toast';
|
|
11
11
|
|
|
12
12
|
const SearchInput = () => {
|
|
13
|
-
const {userId} =useChatContext()
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
const { userId } = useChatContext();
|
|
14
|
+
const [search, setSearch] = useState("");
|
|
15
|
+
const { setSelectedConversation } = useChatUIStore();
|
|
16
|
+
const { data } = useGetConversations(userId);
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
const handleSubmit = (e: any) => {
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
if (!search) return;
|
|
21
|
+
if (search.length < 3) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const conversation = data?.find(
|
|
26
|
+
(c: {
|
|
27
|
+
_id: string;
|
|
28
|
+
participantDetails: {
|
|
29
|
+
username: string;
|
|
30
|
+
firstname?: string;
|
|
31
|
+
idpic?: string;
|
|
32
|
+
};
|
|
33
|
+
}) =>
|
|
34
|
+
c.participantDetails.username
|
|
35
|
+
.toLowerCase()
|
|
36
|
+
.includes(search.toLowerCase())
|
|
37
|
+
);
|
|
28
38
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
if (conversation) {
|
|
40
|
+
const updatedConversation = {
|
|
41
|
+
...conversation,
|
|
42
|
+
participantDetails: {
|
|
43
|
+
...conversation.participantDetails,
|
|
44
|
+
firstname: conversation.participantDetails.username || "Unknown",
|
|
45
|
+
idpic:
|
|
46
|
+
conversation.participantDetails.profilePic || "default-idpic.png",
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
setSelectedConversation(updatedConversation);
|
|
50
|
+
setSearch("");
|
|
51
|
+
}
|
|
52
|
+
console.error("No such user found!");
|
|
53
|
+
};
|
|
44
54
|
|
|
45
55
|
return (
|
|
46
56
|
<>
|
|
57
|
+
<form onSubmit={handleSubmit}>
|
|
58
|
+
<div className="chatSidebarSearchbar">
|
|
59
|
+
<div className="chatSidebarSearchbarContainer">
|
|
60
|
+
<img src={searchicon} className="chatSidebarSearchbarImg" />
|
|
61
|
+
<input
|
|
62
|
+
className="chatSidebarInput"
|
|
63
|
+
placeholder="Search…"
|
|
64
|
+
value={search}
|
|
65
|
+
onChange={(e) => setSearch(e.target.value)}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</form>
|
|
70
|
+
</>
|
|
71
|
+
);
|
|
72
|
+
};
|
|
47
73
|
|
|
48
|
-
|
|
49
|
-
<div className="chatSidebarSearchbar">
|
|
50
|
-
<div className="chatSidebarSearchbarContainer">
|
|
51
|
-
<img src={searchicon} className="chatSidebarSearchbarImg" />
|
|
52
|
-
<input className="chatSidebarInput"
|
|
53
|
-
placeholder='Search…'
|
|
54
|
-
value={search}
|
|
55
|
-
onChange={(e) => setSearch(e.target.value)}
|
|
56
|
-
/>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</form>
|
|
60
|
-
</>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export default SearchInput
|
|
74
|
+
export default SearchInput;
|
|
@@ -3,10 +3,10 @@ import SearchInput from "./SearchInput";
|
|
|
3
3
|
|
|
4
4
|
export const Sidebar = () => {
|
|
5
5
|
return (
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
)
|
|
12
|
-
}
|
|
6
|
+
<div className="">
|
|
7
|
+
<SearchInput />
|
|
8
|
+
<div className="divider px-3"></div>
|
|
9
|
+
<Conversations />
|
|
10
|
+
</div>
|
|
11
|
+
);
|
|
12
|
+
};
|
package/src/lib/api/endpoint.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export const Path = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
getconversation: "api/chat/getConversation",
|
|
3
|
+
getmessage: "api/chat/getMessage",
|
|
4
|
+
sendmessage:"api/chat",
|
|
5
|
+
apiProxy:'/api/proxy-download',
|
|
6
|
+
preSignUrl:"/api/chat/generatePresignedUrl"
|
|
7
|
+
};
|
package/src/style/style.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
/* grid-template-columns: repeat(12, minmax(0, 1fr)); */
|
|
5
5
|
border-radius: 0.5rem;
|
|
6
6
|
width: '100%';
|
|
7
|
+
margin-top: 10px;
|
|
7
8
|
background-clip: padding-box;
|
|
8
9
|
/* background-color: #9CA3AF; */
|
|
9
10
|
--bg-opacity: 0;
|
|
@@ -33,8 +34,8 @@
|
|
|
33
34
|
|
|
34
35
|
.chatSidebarSearchbar {
|
|
35
36
|
display: inline-flex;
|
|
36
|
-
padding-top: 2.
|
|
37
|
-
padding-bottom: 2.
|
|
37
|
+
padding-top: 2.4rem;
|
|
38
|
+
padding-bottom: 2.5rem;
|
|
38
39
|
/* padding-left: 1rem; */
|
|
39
40
|
padding-right: 1rem;
|
|
40
41
|
gap: 1rem;
|
|
@@ -162,7 +163,7 @@ transition: border-color 0.3s ease-in-out;
|
|
|
162
163
|
.chatMessageContainerInner {
|
|
163
164
|
position: sticky;
|
|
164
165
|
top: 0;
|
|
165
|
-
z-index:
|
|
166
|
+
z-index: 1;
|
|
166
167
|
padding-top: 1.25rem;
|
|
167
168
|
padding-bottom: 1.25rem;
|
|
168
169
|
padding-left: 2rem;
|
|
@@ -428,18 +429,29 @@ color: black;
|
|
|
428
429
|
}
|
|
429
430
|
|
|
430
431
|
.timestamp_incomeing {
|
|
431
|
-
font-size:
|
|
432
|
-
color: #888;
|
|
433
|
-
margin-top: 4px;
|
|
434
|
-
text-align: left;
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
432
|
+
font-size: 11px;
|
|
433
|
+
color: #888;
|
|
434
|
+
margin-top: 4px;
|
|
435
|
+
text-align: left;
|
|
436
|
+
display: flex;
|
|
437
|
+
align-items: center;
|
|
438
|
+
float: left;
|
|
439
|
+
position: relative;
|
|
440
|
+
justify-content: start;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
.timestamp_outgoing {
|
|
445
|
+
font-size: 11px;
|
|
446
|
+
color: #888;
|
|
447
|
+
margin-top: 4px;
|
|
448
|
+
text-align: right;
|
|
449
|
+
display: flex;
|
|
450
|
+
align-items: center;
|
|
451
|
+
float: right;
|
|
452
|
+
position: relative;
|
|
453
|
+
justify-content: end;
|
|
454
|
+
}
|
|
443
455
|
|
|
444
456
|
.status-icon {
|
|
445
457
|
|
|
@@ -747,7 +759,7 @@ display: flex;
|
|
|
747
759
|
align-items: center;
|
|
748
760
|
gap: 12px;
|
|
749
761
|
padding: 12px;
|
|
750
|
-
border-radius: 8px;
|
|
762
|
+
/* border-radius: 8px; */
|
|
751
763
|
border-bottom: .5px solid lightgray;
|
|
752
764
|
background-color: white;
|
|
753
765
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
|
|
@@ -842,9 +854,26 @@ background-color: #ccc;
|
|
|
842
854
|
|
|
843
855
|
.attachments-preview {
|
|
844
856
|
display: flex;
|
|
845
|
-
flex-wrap: wrap;
|
|
857
|
+
/* flex-wrap: wrap; */
|
|
846
858
|
gap: 10px;
|
|
847
859
|
margin-bottom: 10px;
|
|
860
|
+
overflow-x: auto;
|
|
861
|
+
scroll-behavior: smooth;
|
|
862
|
+
padding: 8px;
|
|
863
|
+
flex: 1;
|
|
864
|
+
scrollbar-width: none;
|
|
865
|
+
width: 450px;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.attachments-preview::-webkit-scrollbar {
|
|
869
|
+
display: none; /* Hide scrollbar for Chrome/Safari */
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.file-preview-wrapper {
|
|
873
|
+
flex: 0 0 auto;
|
|
874
|
+
width: 120px;
|
|
875
|
+
height: 120px;
|
|
876
|
+
position: relative;
|
|
848
877
|
}
|
|
849
878
|
|
|
850
879
|
/*.file-preview {
|
|
@@ -859,9 +888,9 @@ background-color: #ccc;
|
|
|
859
888
|
|
|
860
889
|
.file-preview {
|
|
861
890
|
position: relative;
|
|
862
|
-
width: 246px;
|
|
863
|
-
height:
|
|
864
|
-
border-radius:
|
|
891
|
+
/* width: 246px; */
|
|
892
|
+
height: 100px; /* Increased height to accommodate filename */
|
|
893
|
+
border-radius: 8px;
|
|
865
894
|
overflow: hidden;
|
|
866
895
|
background: linear-gradient(135deg, #f9f9f9, #e9ecef);
|
|
867
896
|
border: 1px solid #dcdcdc;
|
|
@@ -873,6 +902,60 @@ background-color: #ccc;
|
|
|
873
902
|
justify-content: space-between;
|
|
874
903
|
cursor: pointer;
|
|
875
904
|
padding: 8px;
|
|
905
|
+
|
|
906
|
+
background: #fff;
|
|
907
|
+
position: relative;
|
|
908
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.attachments-preview-container {
|
|
912
|
+
display: flex;
|
|
913
|
+
align-items: center;
|
|
914
|
+
background: #f5f5f5;
|
|
915
|
+
border-radius: 8px 8px 0 0;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.add-more-files {
|
|
919
|
+
width: 120px;
|
|
920
|
+
height: 100px;
|
|
921
|
+
min-width: 120px;
|
|
922
|
+
margin-top: 10px;
|
|
923
|
+
border: 2px dashed #ccc;
|
|
924
|
+
border-radius: 8px;
|
|
925
|
+
display: flex;
|
|
926
|
+
flex-direction: column;
|
|
927
|
+
align-items: center;
|
|
928
|
+
justify-content: center;
|
|
929
|
+
cursor: pointer;
|
|
930
|
+
transition: all 0.2s;
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
.add-more-files:hover {
|
|
934
|
+
border-color: #999;
|
|
935
|
+
background: rgba(0,0,0,0.02);
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.plus-icon {
|
|
939
|
+
font-size: 24px;
|
|
940
|
+
color: #666;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.scroll-button {
|
|
944
|
+
width: 24px;
|
|
945
|
+
height: 24px;
|
|
946
|
+
border-radius: 50%;
|
|
947
|
+
background: #fff;
|
|
948
|
+
border: 1px solid #ddd;
|
|
949
|
+
display: flex;
|
|
950
|
+
align-items: center;
|
|
951
|
+
justify-content: center;
|
|
952
|
+
cursor: pointer;
|
|
953
|
+
margin: 0 4px;
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.scroll-button:disabled {
|
|
957
|
+
opacity: 0.5;
|
|
958
|
+
cursor: not-allowed;
|
|
876
959
|
}
|
|
877
960
|
|
|
878
961
|
.file-preview:hover {
|
|
@@ -884,14 +967,14 @@ background-color: #ccc;
|
|
|
884
967
|
.file-preview video,
|
|
885
968
|
.file-preview .file-icon {
|
|
886
969
|
width: 100%;
|
|
887
|
-
height:
|
|
970
|
+
height: 50px;
|
|
888
971
|
object-fit: cover;
|
|
889
972
|
border-radius: 8px;
|
|
890
973
|
}
|
|
891
974
|
.file-preview-document span,
|
|
892
975
|
.file-name {
|
|
893
976
|
display: block;
|
|
894
|
-
font-size:
|
|
977
|
+
font-size: 10px;
|
|
895
978
|
font-weight: 500;
|
|
896
979
|
color: #333;
|
|
897
980
|
overflow: hidden;
|
|
@@ -933,6 +1016,7 @@ background-color: #ccc;
|
|
|
933
1016
|
width: 100%;
|
|
934
1017
|
height: 80px;
|
|
935
1018
|
background: #000;
|
|
1019
|
+
object-fit: cover;
|
|
936
1020
|
}
|
|
937
1021
|
|
|
938
1022
|
.file-preview-document {
|
|
@@ -940,7 +1024,7 @@ background-color: #ccc;
|
|
|
940
1024
|
flex-direction: column;
|
|
941
1025
|
align-items: center;
|
|
942
1026
|
justify-content: center;
|
|
943
|
-
height:
|
|
1027
|
+
height: 50px;
|
|
944
1028
|
padding: 10px;
|
|
945
1029
|
}
|
|
946
1030
|
|
|
@@ -951,11 +1035,12 @@ background-color: #ccc;
|
|
|
951
1035
|
}
|
|
952
1036
|
|
|
953
1037
|
.file-info {
|
|
954
|
-
padding:
|
|
955
|
-
font-size:
|
|
1038
|
+
padding: 4px;
|
|
1039
|
+
font-size: 10px;
|
|
956
1040
|
overflow: hidden;
|
|
957
1041
|
text-overflow: ellipsis;
|
|
958
1042
|
white-space: nowrap;
|
|
1043
|
+
background: rgba(0, 0, 0, 0.05);
|
|
959
1044
|
}
|
|
960
1045
|
|
|
961
1046
|
/*.file-name {
|
|
@@ -970,8 +1055,8 @@ background-color: #ccc;
|
|
|
970
1055
|
|
|
971
1056
|
.remove-file {
|
|
972
1057
|
position: absolute;
|
|
973
|
-
top:
|
|
974
|
-
right:
|
|
1058
|
+
top: 4px;
|
|
1059
|
+
right: 4px;
|
|
975
1060
|
width: 20px;
|
|
976
1061
|
height: 20px;
|
|
977
1062
|
border-radius: 50%;
|