@pubuduth-aplicy/chat-ui 2.1.56 → 2.1.58
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/Loader.tsx +4 -2
- 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 +121 -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.4125rem;
|
|
38
|
+
padding-bottom: 2.45rem;
|
|
38
39
|
/* padding-left: 1rem; */
|
|
39
40
|
padding-right: 1rem;
|
|
40
41
|
gap: 1rem;
|
|
@@ -72,6 +73,14 @@
|
|
|
72
73
|
padding-bottom: 3px;
|
|
73
74
|
}
|
|
74
75
|
|
|
76
|
+
.loader-wrapper{
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
height: 100%;
|
|
81
|
+
width: 100%;
|
|
82
|
+
}
|
|
83
|
+
|
|
75
84
|
.chatSidebarInput {
|
|
76
85
|
outline: none;
|
|
77
86
|
padding: 8px 4px; /* Keep original padding */
|
|
@@ -162,7 +171,7 @@ transition: border-color 0.3s ease-in-out;
|
|
|
162
171
|
.chatMessageContainerInner {
|
|
163
172
|
position: sticky;
|
|
164
173
|
top: 0;
|
|
165
|
-
z-index:
|
|
174
|
+
z-index: 1;
|
|
166
175
|
padding-top: 1.25rem;
|
|
167
176
|
padding-bottom: 1.25rem;
|
|
168
177
|
padding-left: 2rem;
|
|
@@ -428,18 +437,29 @@ color: black;
|
|
|
428
437
|
}
|
|
429
438
|
|
|
430
439
|
.timestamp_incomeing {
|
|
431
|
-
font-size:
|
|
432
|
-
color: #888;
|
|
433
|
-
margin-top: 4px;
|
|
434
|
-
text-align: left;
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
440
|
+
font-size: 11px;
|
|
441
|
+
color: #888;
|
|
442
|
+
margin-top: 4px;
|
|
443
|
+
text-align: left;
|
|
444
|
+
display: flex;
|
|
445
|
+
align-items: center;
|
|
446
|
+
float: left;
|
|
447
|
+
position: relative;
|
|
448
|
+
justify-content: start;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
|
|
452
|
+
.timestamp_outgoing {
|
|
453
|
+
font-size: 11px;
|
|
454
|
+
color: #888;
|
|
455
|
+
margin-top: 4px;
|
|
456
|
+
text-align: right;
|
|
457
|
+
display: flex;
|
|
458
|
+
align-items: center;
|
|
459
|
+
float: right;
|
|
460
|
+
position: relative;
|
|
461
|
+
justify-content: end;
|
|
462
|
+
}
|
|
443
463
|
|
|
444
464
|
.status-icon {
|
|
445
465
|
|
|
@@ -747,7 +767,7 @@ display: flex;
|
|
|
747
767
|
align-items: center;
|
|
748
768
|
gap: 12px;
|
|
749
769
|
padding: 12px;
|
|
750
|
-
border-radius: 8px;
|
|
770
|
+
/* border-radius: 8px; */
|
|
751
771
|
border-bottom: .5px solid lightgray;
|
|
752
772
|
background-color: white;
|
|
753
773
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
|
|
@@ -842,9 +862,26 @@ background-color: #ccc;
|
|
|
842
862
|
|
|
843
863
|
.attachments-preview {
|
|
844
864
|
display: flex;
|
|
845
|
-
flex-wrap: wrap;
|
|
865
|
+
/* flex-wrap: wrap; */
|
|
846
866
|
gap: 10px;
|
|
847
867
|
margin-bottom: 10px;
|
|
868
|
+
overflow-x: auto;
|
|
869
|
+
scroll-behavior: smooth;
|
|
870
|
+
padding: 8px;
|
|
871
|
+
flex: 1;
|
|
872
|
+
scrollbar-width: none;
|
|
873
|
+
width: 450px;
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.attachments-preview::-webkit-scrollbar {
|
|
877
|
+
display: none; /* Hide scrollbar for Chrome/Safari */
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
.file-preview-wrapper {
|
|
881
|
+
flex: 0 0 auto;
|
|
882
|
+
width: 120px;
|
|
883
|
+
height: 120px;
|
|
884
|
+
position: relative;
|
|
848
885
|
}
|
|
849
886
|
|
|
850
887
|
/*.file-preview {
|
|
@@ -859,9 +896,9 @@ background-color: #ccc;
|
|
|
859
896
|
|
|
860
897
|
.file-preview {
|
|
861
898
|
position: relative;
|
|
862
|
-
width: 246px;
|
|
863
|
-
height:
|
|
864
|
-
border-radius:
|
|
899
|
+
/* width: 246px; */
|
|
900
|
+
height: 100px; /* Increased height to accommodate filename */
|
|
901
|
+
border-radius: 8px;
|
|
865
902
|
overflow: hidden;
|
|
866
903
|
background: linear-gradient(135deg, #f9f9f9, #e9ecef);
|
|
867
904
|
border: 1px solid #dcdcdc;
|
|
@@ -873,6 +910,60 @@ background-color: #ccc;
|
|
|
873
910
|
justify-content: space-between;
|
|
874
911
|
cursor: pointer;
|
|
875
912
|
padding: 8px;
|
|
913
|
+
|
|
914
|
+
background: #fff;
|
|
915
|
+
position: relative;
|
|
916
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.attachments-preview-container {
|
|
920
|
+
display: flex;
|
|
921
|
+
align-items: center;
|
|
922
|
+
background: #f5f5f5;
|
|
923
|
+
border-radius: 8px 8px 0 0;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.add-more-files {
|
|
927
|
+
width: 120px;
|
|
928
|
+
height: 100px;
|
|
929
|
+
min-width: 120px;
|
|
930
|
+
margin-top: 10px;
|
|
931
|
+
border: 2px dashed #ccc;
|
|
932
|
+
border-radius: 8px;
|
|
933
|
+
display: flex;
|
|
934
|
+
flex-direction: column;
|
|
935
|
+
align-items: center;
|
|
936
|
+
justify-content: center;
|
|
937
|
+
cursor: pointer;
|
|
938
|
+
transition: all 0.2s;
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
.add-more-files:hover {
|
|
942
|
+
border-color: #999;
|
|
943
|
+
background: rgba(0,0,0,0.02);
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
.plus-icon {
|
|
947
|
+
font-size: 24px;
|
|
948
|
+
color: #666;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.scroll-button {
|
|
952
|
+
width: 24px;
|
|
953
|
+
height: 24px;
|
|
954
|
+
border-radius: 50%;
|
|
955
|
+
background: #fff;
|
|
956
|
+
border: 1px solid #ddd;
|
|
957
|
+
display: flex;
|
|
958
|
+
align-items: center;
|
|
959
|
+
justify-content: center;
|
|
960
|
+
cursor: pointer;
|
|
961
|
+
margin: 0 4px;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
.scroll-button:disabled {
|
|
965
|
+
opacity: 0.5;
|
|
966
|
+
cursor: not-allowed;
|
|
876
967
|
}
|
|
877
968
|
|
|
878
969
|
.file-preview:hover {
|
|
@@ -884,14 +975,14 @@ background-color: #ccc;
|
|
|
884
975
|
.file-preview video,
|
|
885
976
|
.file-preview .file-icon {
|
|
886
977
|
width: 100%;
|
|
887
|
-
height:
|
|
978
|
+
height: 50px;
|
|
888
979
|
object-fit: cover;
|
|
889
980
|
border-radius: 8px;
|
|
890
981
|
}
|
|
891
982
|
.file-preview-document span,
|
|
892
983
|
.file-name {
|
|
893
984
|
display: block;
|
|
894
|
-
font-size:
|
|
985
|
+
font-size: 10px;
|
|
895
986
|
font-weight: 500;
|
|
896
987
|
color: #333;
|
|
897
988
|
overflow: hidden;
|
|
@@ -933,6 +1024,7 @@ background-color: #ccc;
|
|
|
933
1024
|
width: 100%;
|
|
934
1025
|
height: 80px;
|
|
935
1026
|
background: #000;
|
|
1027
|
+
object-fit: cover;
|
|
936
1028
|
}
|
|
937
1029
|
|
|
938
1030
|
.file-preview-document {
|
|
@@ -940,7 +1032,7 @@ background-color: #ccc;
|
|
|
940
1032
|
flex-direction: column;
|
|
941
1033
|
align-items: center;
|
|
942
1034
|
justify-content: center;
|
|
943
|
-
height:
|
|
1035
|
+
height: 50px;
|
|
944
1036
|
padding: 10px;
|
|
945
1037
|
}
|
|
946
1038
|
|
|
@@ -951,11 +1043,12 @@ background-color: #ccc;
|
|
|
951
1043
|
}
|
|
952
1044
|
|
|
953
1045
|
.file-info {
|
|
954
|
-
padding:
|
|
955
|
-
font-size:
|
|
1046
|
+
padding: 4px;
|
|
1047
|
+
font-size: 10px;
|
|
956
1048
|
overflow: hidden;
|
|
957
1049
|
text-overflow: ellipsis;
|
|
958
1050
|
white-space: nowrap;
|
|
1051
|
+
background: rgba(0, 0, 0, 0.05);
|
|
959
1052
|
}
|
|
960
1053
|
|
|
961
1054
|
/*.file-name {
|
|
@@ -970,8 +1063,8 @@ background-color: #ccc;
|
|
|
970
1063
|
|
|
971
1064
|
.remove-file {
|
|
972
1065
|
position: absolute;
|
|
973
|
-
top:
|
|
974
|
-
right:
|
|
1066
|
+
top: 4px;
|
|
1067
|
+
right: 4px;
|
|
975
1068
|
width: 20px;
|
|
976
1069
|
height: 20px;
|
|
977
1070
|
border-radius: 50%;
|
|
@@ -1022,6 +1115,7 @@ background-color: #ccc;
|
|
|
1022
1115
|
display: flex;
|
|
1023
1116
|
flex-direction: column;
|
|
1024
1117
|
gap: 4px;
|
|
1118
|
+
white-space: nowrap;
|
|
1025
1119
|
}
|
|
1026
1120
|
|
|
1027
1121
|
.attachment-options button {
|