npm - @pubuduth-aplicy/chat-ui - Versions diffs - 2.1.18 → 2.1.19 - Mend

@pubuduth-aplicy/chat-ui 2.1.18 → 2.1.19

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.

Files changed (12) hide show

package/package.json +1 -1
package/src/components/Chat.tsx +5 -6
package/src/components/messages/Message.tsx +9 -8
package/src/components/messages/MessageContainer.tsx +11 -11
package/src/components/messages/MessageInput.tsx +4 -4
package/src/components/messages/Messages.tsx +3 -3
package/src/components/sidebar/Conversation.tsx +5 -5
package/src/components/sidebar/Conversations.tsx +1 -1
package/src/components/sidebar/SearchInput.tsx +4 -4
package/src/components/sidebar/Sidebar.tsx +1 -1
package/src/index.tsx +1 -1
package/src/style/style.css +366 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/Chat.tsx CHANGED Viewed

@@ -9,19 +9,18 @@ export const Chat = () => {
 	return (
 		<>
 			<div className='container mx-auto mb-5'>
-				<div className='grid grid-cols-7 sm:h-[450px] md:h-[550px] rounded-lg overflow-hidden bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-0'>
-					<div />
+				<div className='grid-container'>
 					{selectedConversation ? (
 						<>
-							<div className={`xs:hidden grid col-span-3 border max-h-screen overflow-y-auto`}><Sidebar /></div>
-							<div className='col-span-4 border max-h-screen overflow-y-auto '>
+							<div className={`sidebarContainer`}><Sidebar /></div>
+							<div className='messageContainer'>
 								<MessageContainer />
 							</div>
 						</>
 					) : (
 						<>
-							<div className='col-span-3 border max-h-screen overflow-y-auto '><Sidebar /></div>
-							<div className='xs:hidden col-span-4 border '>
+							<div className='sidebarContainer'><Sidebar /></div>
+							<div className='messageContainer'>
 								<MessageContainer />
 							</div>
 						</>

package/src/components/messages/Message.tsx CHANGED Viewed

@@ -17,18 +17,19 @@ const Message = ({ message }: MessageProps) => {
     const { userId } = useChatContext();
 	const fromMe = message.senderId === userId;
-	const bubbleBgColor = fromMe ? "bg-green-400" : "bg-blue-700";
-	const alignItems = fromMe ? "float-right" : "float-left";
+	const bubbleBgColor = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
+	const alignItems = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
+console.log('messagedis',message);
   return (
     <>
-	  <div className='flex-grow px-8 pt-8  max-h-screen text-left text-gray-700 overflow-y-auto'>
-		<div className="relative mb-6 text-left">
-      <div className="text-gray-700">
-        <div className={`relative ${alignItems}   block rounded-md ${bubbleBgColor} py-3 px-4 text-white break-all overflow-wrap`}>
-          <p className="text-sm">{message.message}</p>
-		  <div className='chat-footer opacity-50 text-xs flex gap-1 items-center float-right'>15.00</div>
+	  <div className='chatMessage'>
+		<div className="chatMessagesContainer">
+      <div style={{color:"#374151"}}>
+        <div className={`chatMessagesBubble_inner ${alignItems} ${bubbleBgColor} `}>
+          <p style={{fontSize:"14px"}}>{message.message}</p>
+		  <div className='chatMessagesBubble_Time'>15.00</div>
         </div>
       </div>
       {/* <div className="clear-both flex text-gray-700" /> */}

package/src/components/messages/MessageContainer.tsx CHANGED Viewed

@@ -16,22 +16,22 @@ const MessageContainer = () => {
     }, [setSelectedConversation]);
     return (
-        <div className='flex flex-col justify-center h-full'>
+        <div className='chatMessageContainer'>
             {!selectedConversation ? (
                 <NoChatSelected />
             ) : (
                 <>
-                    <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">
-                        <div className="grow shrink basis-0 self-stretch justify-start items-center px-4 gap-4 flex">
-                            <button  className="text-blue-500 md:hidden">
+                    <div className="chatMessageContainerInner">
+                        <div className="chatMessageContainerInnerDiv">
+                            <button  className="chatMessageContainerInnerDiv_button">
                                 {/* <CaretLeft size={25} /> */}
                             </button>
-                            <img className="w-10 h-10 rounded-circle"  alt="Profile" />
-                            <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
-                                <div className="self-stretch justify-start items-center inline-flex">
-                                    <div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-inter leading-tight">
-                                        {selectedConversation.firstname}
+                            <img className="chatMessageContainerInnerImg"  alt="Profile" src={selectedConversation.participantDetails.idpic}/>
+                            <div className="chatMessageContainerOutter">
+                                <div className="chatMessageContainerOutterDiv">
+                                    <div className="chatMessageContainerOutterDiv_name">
+                                        {selectedConversation.participantDetails.firstname}
                                     </div>
                                 </div>
                             </div>
@@ -71,8 +71,8 @@ const NoChatSelected = () => {
     // const { authUser } = useAuthContext();
     return (
-        <div className='flex items-center justify-center w-full h-full'>
-            <div className='px-4 text-center sm:text-lg md:text-xl text-gray-200 font-semibold flex flex-col items-center gap-2'>
+        <div className='chatMessageContainerNoChat'>
+            <div className='chatMessageContainerNoChat_div'>
                 <p>Welcome   </p> {/* Safely access username */}
                 <p>Select a chat to start messaging</p>
                 {/* <Chat className='text-3xl md:text-6xl text-center' /> */}

package/src/components/messages/MessageInput.tsx CHANGED Viewed

@@ -26,17 +26,17 @@ const MessageInput = () => {
   };
   return (
-    <form className='px-4 my-3 sticky  bottom-0' onSubmit={handleSubmit}>
+    <form className='chatMessageInputDiv' onSubmit={handleSubmit}>
-      <div className='w-full '>
+      <div style={{width:"100%"}}>
         <input
           type='text'
-          className='border text-white text-sm border-none block outline-none w-full p-2.5 rounded-2xl bg-slate-500 '
+          className='chatMessageInput'
           placeholder='Send a message'
           value={message}
           onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
         />
-        <button type='submit' className='absolute inset-y-0 end-0 flex items-center pe-8'>
+        <button type='submit' className='chatMessageInputSubmit'>
           send
           {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
         </button>

package/src/components/messages/Messages.tsx CHANGED Viewed

@@ -43,9 +43,9 @@ console.log(userId);
 		// 	)}
 		// </div>
-		<div className='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
+		<div className='chatMessages'>
 			{messages?.length > 0 &&
-				messages?.map((message: any) => (
+				messages?.messages.map((message: any) => (
 					<div key={message._id} ref={lastMessageRef}>
 						<Message message={message} />
 					</div>
@@ -53,7 +53,7 @@ console.log(userId);
 			{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
 			{messages?.length === 0 && (
-				<p className='text-center'>Send a message to start the conversation</p>
+				<p style={{textAlign:"center"}}>Send a message to start the conversation</p>
 			)}
 		</div>
 	);

package/src/components/sidebar/Conversation.tsx CHANGED Viewed

@@ -27,17 +27,17 @@ console.log(conversation);
   return (
     <>
       <div
-        className={` h-[72px] p-2 py-3 hover:bg-sky-500 rounded justify-start items-center cursor-pointer gap-4 inline-flex
+        className={` chatSidebarConversationMain
 			`}
         onClick={() => setSelectedConversation(conversation)}
       >
         <img
-          className="w-12 h-12 relative rounded-[100px]"
+          className="chatSidebarConversationImg"
           src={conversation.participantDetails.profilePic|| conversation.participantDetails.idpic}
         />
-        <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
-          <div className="self-stretch justify-start items-center inline-flex">
-            <div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-['Inter'] leading-tight">
+        <div className="chatSidebarConversationContainer">
+          <div className="chatSidebarConversationInnerDiv">
+            <div className="chatSidebarConversationOuterDiv">
               {conversation.participantDetails.firstname}
             </div>
           </div>

package/src/components/sidebar/Conversations.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ const Conversations = () => {
   console.log("userId",userId);
   // const { loading, conversations } = useGetConversations();
   return (
-    <div className="py-2 flex flex-col overflow-auto">
+    <div className="chatSidebarConversations">
       {conversations?.map((conversation: any, idx: any) => (
         <Conversation
           key={conversation._id}

package/src/components/sidebar/SearchInput.tsx CHANGED Viewed

@@ -36,10 +36,10 @@ const {userId} =useChatContext()
     <>
 	<form onSubmit={handleSubmit}>
-	<div className="self-stretch h-14 px-4 py-2 justify-start items-center gap-4 inline-flex">
-		<div className="grow shrink basis-0 h-10 px-4 py-2 bg-neutral-100 rounded-[22px] justify-start items-center gap-4 flex">
-			<img src={searchicon} className="w-6 h-6 pl-[2.50px] pr-[3px] pt-[2.50px] pb-[3px] justify-center items-center flex" />
-			<input className="w-full h-5 text-slate-500 bg-neutral-100 outline-none text-base font-normal font-['Inter'] leading-tight"
+	<div className="chatSidebarSearchbar">
+		<div className="chatSidebarSearchbarContainer">
+			<img src={searchicon} className="chatSidebarSearchbarImg" />
+			<input className="chatSidebarInput"
 			placeholder='Search…'
 			value={search}
 			onChange={(e) => setSearch(e.target.value)}

package/src/components/sidebar/Sidebar.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import SearchInput from "./SearchInput";
 export const Sidebar = () => {
   return (
- <div className='flex-col  border-r  p-4 flex '>
+ <div className='chatSidebarMain'>
 			<SearchInput />
 			<div className='divider px-3'></div>
 			<Conversations />

package/src/index.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import './style/tailwind.css'
+import './style/style.css'
 export { ChatProvider } from './providers/ChatProvider';
 export { Chat } from './components/Chat';

package/src/style/style.css ADDED Viewed

@@ -0,0 +1,366 @@
+.grid-container {
+    display: grid;
+    overflow: hidden;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    background-color: #9CA3AF;
+    --bg-opacity: 0;
+    backdrop-blur: blur(16px);
+}
+.sidebarContainer {
+    grid-column: span 3;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    max-height: 100vh;
+}
+.messageContainer {
+    grid-column: span 4;
+    border: 1px solid;
+    max-height: 100vh;
+    overflow-y: auto;
+}
+.chatSidebarMain {
+    display: flex;
+    padding: 1rem;
+    flex-direction: column;
+    border-right-width: 1px;
+}
+.chatSidebarSearchbar {
+    display: inline-flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    gap: 1rem;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+    height: 3.5rem;
+}
+.chatSidebarSearchbarContainer {
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex-basis: 0px;
+    shrink: 1;
+    gap: 1rem;
+    justify-content: flex-start;
+    align-items: center;
+    height: 2.5rem;
+}
+.chatSidebarSearchbarImg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding-left: 2.50px;
+    padding-right: 3px;
+    padding-top: 2.50px;
+    padding-bottom: 3px;
+}
+.chatSidebarInput {
+    outline-style: none;
+    width: 100%;
+    height: 1.25rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 400;
+    line-height: 1.25;
+}
+.chatSidebarConversations {
+    display: flex;
+    overflow: auto;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    flex-direction: column;
+}
+.chatSidebarConversationMain {
+    display: inline-flex;
+    padding: 0.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    gap: 1rem;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    height: 72px;
+    :hover {
+        background-color: #0ea5e9;
+    }
+}
+.chatSidebarConversationImg {
+    position: relative;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 100%;
+}
+.chatSidebarConversationContainer {
+    display: inline-flex;
+    flex-basis: 0px;
+    flex-direction: column;
+    shrink: 1;
+    gap: 0.25rem;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.chatSidebarConversationInnerDiv {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+}
+.chatSidebarConversationOuterDiv {
+    flex-basis: 0px;
+    shrink: 1;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    line-height: 1.25;
+}
+.chatMessageContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+}
+.chatMessageContainerInner {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    border-bottom-width: 1px;
+    border-color: #D1D5DB;
+    height: 5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: left;
+    color: #1F2937;
+    background-color: #ffffff;
+}
+.chatMessageContainerInnerDiv {
+    display: flex;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex-basis: 0px;
+    shrink: 1;
+    gap: 1rem;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+}
+.chatMessageContainerInnerDiv_button {
+    color: #3B82F6;
+}
+.chatMessageContainerInnerImg {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 100%;
+}
+.chatMessageContainerOutter {
+    display: inline-flex;
+    flex-basis: 0px;
+    flex-direction: column;
+    shrink: 1;
+    gap: 0.25rem;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.chatMessageContainerOutterDiv {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+}
+.chatMessageContainerOutterDiv_name {
+    flex-basis: 0px;
+    shrink: 1;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    line-height: 1.25;
+}
+.chatMessageContainerNoChat {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+.chatMessageContainerNoChat_div {
+    display: flex;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+    font-weight: 600;
+    text-align: center;
+    color: #E5E7EB;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+.chatMessages {
+    overflow: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex: 1 1 0%;
+}
+.chatMessagesBubble_me{
+    float: right;
+background-color: #34D399;
+}
+.chatMessagesBubble_Other{
+    float: left;
+    background-color: #1D4ED8;
+}
+.chatMessage{
+    overflow-y: auto;
+padding-left: 2rem;
+padding-right: 2rem;
+padding-top: 2rem;
+flex-grow: 1;
+max-height: 100vh;
+text-align: left;
+color: #374151;
+}
+.chatMessagesContainer{
+    position: relative;
+margin-bottom: 1.5rem;
+text-align: left;
+}
+.chatMessagesBubble_inner{
+    display: block;
+position: relative;
+padding-top: 0.75rem;
+padding-bottom: 0.75rem;
+padding-left: 1rem;
+padding-right: 1rem;
+border-radius: 0.375rem;
+color: #ffffff;
+word-break: break-all;
+}
+.chatMessagesBubble_Time{
+    display: flex;
+float: right;
+gap: 0.25rem;
+align-items: center;
+font-size: 0.75rem;
+line-height: 1rem;
+opacity: 0.5;
+}
+.chatMessageInputDiv{
+    position: sticky;
+bottom: 0;
+padding-left: 1rem;
+padding-right: 1rem;
+margin-top: 0.75rem;
+margin-bottom: 0.75rem;
+}
+.chatMessageInput{
+    display: block;
+padding: 0.625rem;
+border-radius: 1rem;
+border-width: 1px;
+border-style: none;
+outline-style: none;
+width: 100%;
+font-size: 0.875rem;
+line-height: 1.25rem;
+}
+.chatMessageInputSubmit{
+    display: flex;
+position: absolute;
+top: 0;
+bottom: 0;
+align-items: center;
+}
+@media (min-width: 640px) {
+    .grid-container {
+        height: 450px;
+    }
+    .sidebarContainer {
+        display: none;
+    }
+    .messageContainer {
+        display: none;
+    }
+    .chatMessages {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+}
+@media (min-width: 768px) {
+    .grid-container {
+        height: 550px;
+        grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .sidebarContainer {
+        display: grid;
+        grid-column: span 3 / span 3;
+    }
+    .messageContainer {
+        display: grid;
+        grid-column: span 4 / span 4;
+    }
+    .chatMessageContainerInnerDiv_button {
+        display: none;
+    }
+    .chatMessages {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+}