@pubuduth-aplicy/chat-ui 2.1.5 → 2.1.7
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
CHANGED
|
@@ -1,81 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
//
|
|
3
|
-
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
// import useConversation from "../../zustand/useConversation";
|
|
3
|
+
import MessageInput from "./MessageInput";
|
|
4
4
|
// import Messages from "./Messages";
|
|
5
|
-
|
|
6
|
-
//
|
|
5
|
+
import useChatUIStore from "../../stores/Zustant";
|
|
6
|
+
// import { Chat, CaretLeft } from "@phosphor-icons/react";
|
|
7
|
+
// import { useAuthContext } from "../../context/AuthContext";
|
|
7
8
|
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
// const selectedConversation=true
|
|
12
|
-
// // useEffect(() => {
|
|
13
|
-
// // // cleanup function (unmounts)
|
|
14
|
-
// // return () => setSelectedConversation(null);
|
|
15
|
-
// // }, [setSelectedConversation]);
|
|
10
|
+
const MessageContainer = () => {
|
|
11
|
+
const { selectedConversation, setSelectedConversation } = useChatUIStore();
|
|
16
12
|
|
|
17
|
-
|
|
18
|
-
//
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// cleanup function (unmounts)
|
|
15
|
+
return () => setSelectedConversation(null);
|
|
16
|
+
}, [setSelectedConversation]);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div className='flex flex-col justify-center h-full'>
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
21
|
+
{!selectedConversation ? (
|
|
22
|
+
<NoChatSelected />
|
|
23
|
+
) : (
|
|
24
|
+
<>
|
|
25
|
+
<div className="h-20 sticky top-0 border-b border-gray-300 bg-white py-5 px-8 text-left text-sm text-gray-800 z-50">
|
|
26
|
+
<div className="grow shrink basis-0 self-stretch justify-start items-center px-4 gap-4 flex">
|
|
27
|
+
<button className="text-blue-500 md:hidden">
|
|
28
|
+
{/* <CaretLeft size={25} /> */}
|
|
29
|
+
</button>
|
|
30
|
+
<img className="w-10 h-10 rounded-circle" alt="Profile" />
|
|
31
|
+
<div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
|
|
32
|
+
<div className="self-stretch justify-start items-center inline-flex">
|
|
33
|
+
<div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-inter leading-tight">
|
|
34
|
+
{selectedConversation.username}
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
{/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
42
|
+
{/* <div className="h-14 overflow-x-hidden">
|
|
43
|
+
<div className="top-0 h-14 px-4 py-4 w-full border-b border-gray-300 justify-start items-start gap-2 inline-flex sticky z-10">
|
|
44
|
+
<div className="grow shrink basis-0 self-stretch py-2 justify-start items-center gap-4 flex">
|
|
45
|
+
<button onClick={() => setSelectedConversation(null)} className="text-blue-500 md:hidden">
|
|
46
|
+
<CaretLeft size={25} />
|
|
47
|
+
</button>
|
|
48
|
+
<img className="w-10 h-10 rounded-circle" src={selectedConversation.profile} alt="Profile" />
|
|
49
|
+
<div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
|
|
50
|
+
<div className="self-stretch justify-start items-center inline-flex">
|
|
51
|
+
<div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-inter leading-tight">
|
|
52
|
+
{selectedConversation.username}
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div> */}
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
{/* <Messages /> */}
|
|
61
|
+
<MessageInput />
|
|
62
|
+
</>
|
|
63
|
+
)}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
66
67
|
|
|
67
|
-
|
|
68
|
+
export default MessageContainer;
|
|
68
69
|
|
|
69
|
-
|
|
70
|
-
//
|
|
70
|
+
const NoChatSelected = () => {
|
|
71
|
+
// const { authUser } = useAuthContext();
|
|
71
72
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
73
|
+
return (
|
|
74
|
+
<div className='flex items-center justify-center w-full h-full'>
|
|
75
|
+
<div className='px-4 text-center sm:text-lg md:text-xl text-gray-200 font-semibold flex flex-col items-center gap-2'>
|
|
76
|
+
<p>Welcome </p> {/* Safely access username */}
|
|
77
|
+
<p>Select a chat to start messaging</p>
|
|
78
|
+
{/* <Chat className='text-3xl md:text-6xl text-center' /> */}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
};
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
//
|
|
3
|
-
//
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
// import { PaperPlaneRight } from '@phosphor-icons/react'; // Assuming you're using icons from Phosphor Icons library
|
|
3
|
+
// import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
//
|
|
5
|
+
const MessageInput = () => {
|
|
6
|
+
const [message, setMessage] = useState(""); // State for storing the message input
|
|
7
|
+
// const { loading, sendMessage } = useSendMessage(); // Custom hook for sending messages
|
|
8
8
|
|
|
9
|
-
//
|
|
10
|
-
//
|
|
11
|
-
//
|
|
12
|
-
//
|
|
13
|
-
//
|
|
14
|
-
//
|
|
15
|
-
//
|
|
9
|
+
// const handleSubmit = async (e) => {
|
|
10
|
+
// e.preventDefault();
|
|
11
|
+
// if (!message)
|
|
12
|
+
// return;
|
|
13
|
+
// await sendMessage(message);
|
|
14
|
+
// setMessage("");
|
|
15
|
+
// };
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
return (
|
|
18
|
+
<form className='px-4 my-3 sticky bottom-0'>
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
<div className='w-full '>
|
|
21
|
+
<input
|
|
22
|
+
type='text'
|
|
23
|
+
className='border text-white text-sm border-none block outline-none w-full p-2.5 rounded-2xl bg-slate-500 '
|
|
24
|
+
placeholder='Send a message'
|
|
25
|
+
value={message}
|
|
26
|
+
onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
|
|
27
|
+
/>
|
|
28
|
+
<button type='submit' className='absolute inset-y-0 end-0 flex items-center pe-8'>
|
|
29
|
+
send
|
|
30
|
+
{/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
</form>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
export default MessageInput;
|
|
@@ -14,6 +14,7 @@ interface ConversationProps {
|
|
|
14
14
|
|
|
15
15
|
const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
|
|
16
16
|
const { setSelectedConversation } = useChatUIStore();
|
|
17
|
+
console.log(conversation);
|
|
17
18
|
|
|
18
19
|
// const isSelected = selectedConversation?._id === conversation._id;
|
|
19
20
|
// const { onlineUsers } = useSocketContext();
|
|
@@ -27,12 +28,12 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
|
|
|
27
28
|
>
|
|
28
29
|
<img
|
|
29
30
|
className="w-12 h-12 relative rounded-[100px]"
|
|
30
|
-
src={conversation.profilePic}
|
|
31
|
+
src={conversation.profilePic|| conversation.idpic}
|
|
31
32
|
/>
|
|
32
33
|
<div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
|
|
33
34
|
<div className="self-stretch justify-start items-center inline-flex">
|
|
34
35
|
<div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-['Inter'] leading-tight">
|
|
35
|
-
{conversation.
|
|
36
|
+
{conversation.firstname}
|
|
36
37
|
</div>
|
|
37
38
|
</div>
|
|
38
39
|
</div>
|