@pubuduth-aplicy/chat-ui 2.0.5

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@pubuduth-aplicy/chat-ui",
+  "version": "2.0.5",
+  "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "src/index.tsx",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc ",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.67.2",
+    "axios": "^1.8.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "socket.io-client": "^4.8.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/ChatWindow.tsx

@@ -0,0 +1,15 @@
+// import { ChatWindowProps } from "./types/type";
+
+
+// export const ChatWindow: React.FC<ChatWindowProps> = ({ userId}) => {
+//     // const { messages, sendMessage, sendFile } = useChat(userId);
+//     // const [file, setFile] = useState<File | null>(null);
+
+//     return (
+//         <div className="w-full max-w-lg border p-4 rounded-lg shadow-lg bg-white">
+//             <MessageList messages={messages} />
+//             <FileUploader file={file} setFile={setFile} onUpload={sendFile} />
+//             <MessageInput onSend={sendMessage} />
+//         </div>
+//     );
+// };

package/src/assets/icons8-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg>

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/Chat.tsx

@@ -0,0 +1,52 @@
+import { Sidebar } from './sidebar/Sidebar'
+// import MessageContainer from './components/messages/MessageContainer'
+// import useConversation from '../../zustand/useConversation';
+
+
+
+export const Chat = () => {
+	// const { selectedConversation, setSelectedConversation } = useConversation();
+  return (
+	<>
+	<div className='container mx-auto mb-5'>
+<div className='grid grid-cols-1 md:grid-cols-9 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/>
+	{/* {selectedConversation? (
+		<><div className={`xs:hidden md:grid md:col-span-3 border max-h-screen overflow-y-auto`}><Sidebar /></div>
+		<div className='md:col-span-4 border max-h-screen overflow-y-auto '>
+		<MessageContainer />
+		</div></>
+	):( */}
+			<><div className='md:col-span-3 border max-h-screen overflow-y-auto '><Sidebar /></div>
+			<div className='xs:hidden  md:grid md:col-span-4 border '>
+			{/* <MessageContainer /> */}
+			</div></>
+	{/* )}	 */}
+		</div>
+	</div>
+</>
+  )
+}
+
+// const MessageBody = () => {
+
+
+//     return (
+//         <><div className='flex-grow px-8 pt-8 text-left text-gray-700 overflow-y-auto'>
+// 			<div className="relative mb-6 text-left">
+// 				<div className="text-gray-700">
+// 					<div className="absolute inset-x-0 top-0">
+// 						<img src="/images/fR71TFZIDTv2jhvKsOMhC.png" alt className="float-right inline-block h-6 w-6 sm:h-12 sm:w-12 rounded-full" />
+// 					</div>
+// 					<div className="relative float-right mr-8 sm:mr-16 inline-block rounded-md bg-blue-700 py-3 px-4 text-white">
+// 						<p className="text-sm">Hi, John</p>
+// 					</div>
+// 				</div>
+// 				<div className="clear-both flex text-gray-700" />
+// 			</div>
+// 		</div><div className="relative mt-4  flex items-start border-t  border-gray-300 sm:p-8 py-4 text-left  text-gray-700">
+// 				<input placeholder="Your Message" className="mr-4 overflow-hidden w-full flex-1 cursor-text resize-none whitespace-pre-wrap rounded-md bg-white text-sm py-2 sm:py-0 font-normal text-gray-600 opacity-70 shadow-none outline-none focus:text-gray-600 focus:opacity-100" defaultValue={""} />
+// 				<button className="relative  inline-flex h-10 w-auto flex-initial cursor-pointer items-center justify-center self-center  rounded-md bg-blue-700 px-6 text-center align-middle text-sm font-medium text-white outline-none focus:ring-2">Send</button>
+// 			</div></>
+//     );
+// };

package/src/components/messages/Message.tsx

@@ -0,0 +1,39 @@
+// /* eslint-disable @typescript-eslint/no-unused-vars */
+
+// // import { useAuthContext } from "../../context/AuthContext";
+// // import { extractTime } from "../../utils/extractTime";
+// // import useConversation from "../../zustand/useConversation";
+// const Message = ({message:any}) => {
+
+//     // const { authUser } = useAuthContext();
+// 	// const { selectedConversation } = useConversation();
+// 	// const fromMe = message.senderId === authUser._id;
+// 	// const formattedTime = extractTime(message.createdAt);
+// 	// const timeside = fromMe ? "float-right" : "float-left";
+// 	// const profilePic = fromMe ? authUser.profilePic : selectedConversation?.profilePic;
+// 	// const bubbleBgColor = fromMe ? "bg-green-400" : "bg-blue-700";
+// 	// const alignItems = fromMe ? "float-right" : "float-left";
+// 	// const shakeClass = message.shouldShake ? "shake" : "";
+// 	// const imageside= fromMe ? "inset-x-0" :"left-0";
+
+//   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   block rounded-md py-3 px-4 text-white break-all overflow-wrap`}>
+//           <p className="text-sm">dgfddfgfdg</p>
+// 		  <div className='chat-footer opacity-50 text-xs flex gap-1 items-center float-right'>
+// 			15.44
+// 		  </div>
+//         </div>
+//       </div>
+//       {/* <div className="clear-both flex text-gray-700" /> */}
+// 		</div>
+// 	  </div>
+
+//  </>
+//   )
+// }
+
+// export default Message

package/src/components/messages/MessageContainer.tsx

@@ -0,0 +1,81 @@
+// import { useEffect } from "react";
+// // import useConversation from "../../zustand/useConversation";
+// import MessageInput from "./MessageInput";
+// import Messages from "./Messages";
+// // import { Chat, CaretLeft } from "@phosphor-icons/react";
+// // import { useAuthContext } from "../../context/AuthContext";
+
+
+// const MessageContainer = () => {
+//     // const { selectedConversation, setSelectedConversation } = useConversation();
+// const selectedConversation=true
+//     // useEffect(() => {
+//     //     // cleanup function (unmounts)
+//     //     return () => setSelectedConversation(null);
+//     // }, [setSelectedConversation]);
+
+//     return (
+//         <div className='flex flex-col justify-center h-full'>
+            
+//             {!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">
+//                                 {/* <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.username} */}
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                             {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}
+//                         </div>
+//                     </div>
+
+//                     {/* <div className="h-14 overflow-x-hidden">
+//                         <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">
+//                             <div className="grow shrink basis-0 self-stretch py-2 justify-start items-center gap-4 flex">
+//                                 <button onClick={() => setSelectedConversation(null)} className="text-blue-500 md:hidden">
+//                                     <CaretLeft size={25} />
+//                                 </button>
+//                                 <img className="w-10 h-10 rounded-circle" src={selectedConversation.profile} 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.username}
+//                                         </div>
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </div> */}
+
+//                     <Messages />
+//                     <MessageInput />
+//                 </>
+//             )}
+//         </div>
+//     );
+// }
+
+// export default MessageContainer;
+
+// 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'>
+//                 <p>Welcome   </p> {/* Safely access username */}
+//                 <p>Select a chat to start messaging</p>
+//                 {/* <Chat className='text-3xl md:text-6xl text-center' /> */}
+//             </div>
+//         </div>
+//     );
+// };

package/src/components/messages/MessageInput.tsx

@@ -0,0 +1,37 @@
+// import React, { useState } from 'react';
+// // import { PaperPlaneRight } from '@phosphor-icons/react'; // Assuming you're using icons from Phosphor Icons library
+// // import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
+
+// const MessageInput = () => {
+//   const [message, setMessage] = useState(""); // State for storing the message input
+//   // const { loading, sendMessage } = useSendMessage(); // Custom hook for sending messages
+
+//   // const handleSubmit = async (e) => {
+//   //   e.preventDefault();
+//   //   if (!message) 
+// 	// return; 
+//   //   await sendMessage(message); 
+//   //   setMessage(""); 
+//   // };
+
+//   return (
+//     <form className='px-4 my-3 sticky  bottom-0'>
+     
+//       <div className='w-full '>
+//         <input
+//           type='text'
+//           className='border text-white text-sm border-none block outline-none w-full p-2.5 rounded-2xl bg-slate-500 '
+//           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'>
+//           send
+//           {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
+//         </button>
+//       </div>
+//     </form>
+//   );
+// };
+
+// export default MessageInput;

package/src/components/messages/Messages.tsx

@@ -0,0 +1,51 @@
+// import { useEffect, useRef } from "react";
+// // import useGetMessages from "../../hooks/useGetMessages";
+// // import MessageSkeleton from "../skeletons/MessageSkeleton";
+// import Message from "./Message";
+// // import useListenMessages from "../../hooks/useListenMessages";
+
+// const Messages = () => {
+// 	// const { messages, loading } = useGetMessages();
+// 	// useListenMessages();
+// 	// const lastMessageRef = useRef();
+
+// 	// useEffect(() => {
+// 	// 	setTimeout(() => {
+// 	// 		lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+// 	// 	}, 100);
+// 	// }, [messages]);
+
+// 	return (
+// 		// <div className='px-4 flex-1 overflow-auto'>
+// 		// 	{!loading &&
+// 		// 		messages.length > 0 &&
+// 		// 		messages.map((message) => (
+// 		// 			<div key={message._id} ref={lastMessageRef}>
+// 		// 				<Message message={message} />
+// 		// 			</div>
+// 		// 		))}
+
+// 		// 	{loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)}
+// 		// 	{!loading && messages.length === 0 && (
+// 		// 		<p className='text-center'>Send a message to start the conversation</p>
+// 		// 	)}
+// 		// </div>
+
+// <div className='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
+//   {/* {!loading &&
+//     messages.length > 0 &&
+//     messages.map((message) => ( */}
+//       {/* <div key={message._id} ref={lastMessageRef}>
+//         <Message message={message} />
+//       </div> */}
+//     {/* // ))} */}
+
+//   {/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)}
+//   {!loading && messages.length === 0 && (
+//     <p className='text-center'>Send a message to start the conversation</p>
+//   )} */}
+// </div>
+// 	);
+// };
+// export default Messages;
+

package/src/components/sidebar/Conversation.tsx

@@ -0,0 +1,46 @@
+// import { useSocketContext } from "../../context/SocketContext";
+// import useConversation from "../../zustand/useConversation";
+
+import useChatUIStore from "../../stores/Zustant";
+
+interface ConversationProps {
+  conversation: {
+    _id: string;
+    profilePic: string;
+    username: string;
+  };
+  lastIdx: boolean;
+}
+
+const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
+  const { setSelectedConversation } = useChatUIStore();
+
+//   const isSelected = selectedConversation?._id === conversation._id;
+  // const { onlineUsers } = useSocketContext();
+  // const isOnline = onlineUsers.includes(conversation._id);
+  return (
+    <>
+      <div
+        className={` h-[72px] p-2 py-3 hover:bg-sky-500 rounded justify-start items-center cursor-pointer gap-4 inline-flex
+			`}
+        onClick={() => setSelectedConversation(conversation)}
+      >
+        <img
+          className="w-12 h-12 relative rounded-[100px]"
+          src={conversation.profilePic}
+        />
+        <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">
+              {conversation.username}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {!lastIdx && <div className="divider my-0 py-0 h-1" />}
+    </>
+  );
+};
+
+export default Conversation;

package/src/components/sidebar/Conversations.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useGetConversations } from "../../hooks/queries/useChatApi";
+import Conversation from "./Conversation";
+
+const Conversations = () => {
+		const { data: conversations } = useGetConversations();
+	
+    // const { loading, conversations } = useGetConversations();
+  return (
+    <div className='py-2 flex flex-col overflow-auto'>
+			{conversations.map((conversation:any, idx:any) => (
+				<Conversation
+					key={conversation._id}
+					conversation={conversation}
+					lastIdx={idx === conversations.length - 1}
+				/>
+			))}
+
+			{/* {loading ? <span className='loading loading-spinner mx-auto'></span> : null} */}
+		</div>
+  )
+}
+
+export default Conversations

package/src/components/sidebar/SearchInput.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import  { useState } from 'react'
+import searchicon from '../../assets/icons8-search.svg'
+import useChatUIStore from '../../stores/Zustant';
+import { useGetConversations } from '../../hooks/queries/useChatApi';
+// import { MagnifyingGlass } from "@phosphor-icons/react"
+// import useGetConversations from "../../hooks/useGetConversations";
+// import useConversation from '../../zustand/useConversation'
+// import toast from 'react-hot-toast';
+
+const SearchInput = () => {
+
+	const [search, setSearch] = useState("");
+	const { setSelectedConversation } = useChatUIStore();
+	const { data: conversations } = useGetConversations();
+
+	const handleSubmit = (e:any) => {
+		e.preventDefault();
+		if (!search) return;
+		if (search.length < 3) {
+			return 
+		}
+
+		const conversation = conversations.find((c: { username: string }) => c.username.toLowerCase().includes(search.toLowerCase()));
+
+		if (conversation) {
+			setSelectedConversation(conversation);
+			setSearch("");
+		} 
+        console.error("No such user found!");
+	};
+    
+
+  return (
+    <>
+
+	<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"
+			placeholder='Search…'
+			value={search}
+			onChange={(e) => setSearch(e.target.value)} 
+			/> 
+		</div>
+	</div>
+	</form>
+	</>
+
+
+
+
+  )
+}
+
+export default SearchInput

package/src/components/sidebar/Sidebar.tsx

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

package/src/hooks/queries/useChatApi.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAllConversationData } from "../../service/sidebarApi";
+
+
+export const useGetConversations = () => {
+    return useQuery({
+      queryKey: ['GET_ALL_CONVERSATION'],
+      queryFn: getAllConversationData,
+      staleTime: 1 * 60 * 1000,
+      refetchOnWindowFocus: false,
+    });
+  };

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { ChatProvider } from './providers/ChatProvider';
+export { Chat } from './components/Chat';

package/src/lib/api/apiClient.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+export const apiClient = axios.create({
+    baseURL: import.meta.env.VITE_APP_BACKEND_PORT,
+    timeout: 5000,
+    withCredentials:true,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  
+  

package/src/lib/api/endpoint.ts

@@ -0,0 +1,5 @@
+export const Path = {
+    chat: "/chat",
+    getconversation: "/getConversation",
+    getmessage: "/getMessage",
+  };

package/src/providers/ChatProvider.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
+import { Socket, io } from 'socket.io-client';
+// import { apiClient } from '../lib/api/apiClient';
+// import { S3Client } from '../lib/storage/s3Client';
+// import { CryptoUtils } from '../lib/encryption/cryptoUtils';
+
+interface ChatProviderProps {
+//   apiUrl: string;
+//   s3Config: {
+//     bucket: string;
+//     region: string;
+//     accessKeyId: string;
+//     secretAccessKey: string;
+//   };
+  userId: string; // User ID for identification
+  children: ReactNode;
+}
+
+interface ChatContextType {
+//   s3Client: S3Client;
+  socket: Socket;
+//   cryptoUtils: CryptoUtils;
+  userId: string;
+}
+
+const ChatContext = createContext<ChatContextType | null>(null);
+
+export const ChatProvider: React.FC<ChatProviderProps> = ({ userId, children }) => {
+  const [socket, setSocket] = useState<Socket | null>(null);
+const apiUrl=import.meta.env.VITE_APP_BACKEND_PORT
+
+  useEffect(() => {
+    const socketInstance = io(apiUrl, { auth: { userId } });
+    setSocket(socketInstance);
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, [apiUrl, userId]);
+
+  if (!socket) return null;
+
+//   const apiClient = new ApiClient(apiUrl);
+//   const s3Client = new S3Client(s3Config);
+//   const cryptoUtils = new CryptoUtils();
+
+  return (
+    <ChatContext.Provider value={{ socket, userId }}>
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export const useChatContext = () => {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error('useChatContext must be used within a ChatProvider');
+  }
+  return context;
+};

package/src/service/sidebarApi.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { apiClient } from "../lib/api/apiClient";
+import { Path } from "../lib/api/endpoint";
+
+export const getAllConversationData = async () => {
+    try {
+      const res = await apiClient.get(Path.getconversation);
+      return res.data;
+    } catch (error: any) {
+      console.log("ERROR: ", error);
+      // logger.error(error);
+      throw error;
+    }
+  };

package/src/stores/Zustant.ts

@@ -0,0 +1,35 @@
+import {create} from 'zustand';
+
+// interface ChatUIState {
+//   isChatOpen: boolean;
+//   unreadCount: number;
+//   toggleChat: () => void;
+//   incrementUnreadCount: () => void;
+//   resetUnreadCount: () => void;
+// }
+
+interface ChatUIState {
+  isChatOpen: boolean;
+  unreadCount: number;
+  selectedConversation: {
+    _id: string;
+    profilePic: string;
+    username: string;
+  } | null;
+  setSelectedConversation: (selectedConversation: { _id: string; profilePic: string; username: string; } | null) => void;
+  toggleChat: () => void;
+  incrementUnreadCount: () => void;
+  resetUnreadCount: () => void;
+}
+
+const useChatUIStore = create<ChatUIState>((set) => ({
+  isChatOpen: false,
+  unreadCount: 0,
+  selectedConversation: null,
+  setSelectedConversation: (selectedConversation) => set({ selectedConversation }),
+  toggleChat: () => set((state) => ({ isChatOpen: !state.isChatOpen })),
+  incrementUnreadCount: () => set((state) => ({ unreadCount: state.unreadCount + 1 })),
+  resetUnreadCount: () => set({ unreadCount: 0 }),
+}));
+
+export default useChatUIStore;

package/src/types/type.ts

@@ -0,0 +1,3 @@
+export interface ChatWindowProps {
+    userId: string;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" }
+  ]
+}