@pubuduth-aplicy/chat-ui 2.1.13 → 2.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",
@@ -24,11 +24,13 @@
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "typescript": "^5.8.2",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"
   }

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/src/components/Chat.tsx

@@ -3,8 +3,7 @@ import MessageContainer from './messages/MessageContainer';
 import { Sidebar } from './sidebar/Sidebar'
 // import MessageContainer from './components/messages/MessageContainer'
 // import useConversation from '../../zustand/useConversation';
-
-
+import '../style.css'
 
 export const Chat = () => {
 	const { selectedConversation } = useChatUIStore();

package/src/components/messages/Messages.tsx

@@ -11,6 +11,8 @@ import useChatUIStore from "../../stores/Zustant";
 const Messages = () => {
 	const { selectedConversation } = useChatUIStore()
 	const {userId}=useChatContext()
+	console.log(selectedConversation); // Ensure chatId is correct
+console.log(userId);
 	const { data: messages, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 	// useListenMessages();
 	console.log("isLoading",isLoading);
@@ -42,15 +44,15 @@ const Messages = () => {
 		// </div>
 
 		<div className='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
-			{messages.length > 0 &&
-				messages.map((message: any) => (
+			{messages?.length > 0 &&
+				messages?.map((message: any) => (
 					<div key={message._id} ref={lastMessageRef}>
 						<Message message={message} />
 					</div>
 				))}
 
 			{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
-			{messages.length === 0 && (
+			{messages?.length === 0 && (
 				<p className='text-center'>Send a message to start the conversation</p>
 			)}
 		</div>

package/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwind.config.js

@@ -0,0 +1,66 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    fontFamily: {
+      // primary: ['Roboto', 'sans-serif'],
+      primary: ['ui-sans-serif', 'system-ui', 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
+      secondary: ['Montserrat', 'serif'],
+      // secondary: ['Dosis', 'serif'],
+      italic: ['Playfair Display', 'sans-serif'],
+    },
+    extend: {
+      colors: {
+        primary: '#12BBB5',
+        secondary: '#323232',
+        background: '#000000',
+        textGray:"#656B76",
+        bordercolor: '#EBECED',
+        graycolor: '#74788d',
+        white: '#ffffff',
+        textSecondary: '#595959',
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: '1rem', // Default padding for all screens
+          sm: '1rem', // Padding for 'sm' screen size
+          lg: '2rem', // Padding for 'lg' and larger
+        },
+        screens: {
+          '2xl': '2048px',
+        },
+      },
+
+      fontSize: {
+        xs: '.75rem', // 12px
+        sm: '.875rem', // 14px
+        base: '1rem', // 16px
+        lg: '1.125rem', // 18px
+        xl: '1.25rem', // 20px
+        title: '2rem', //32px
+      },
+      screens: {
+        xl: { max: '2048px' },
+        sm: { min: '320px' },
+      },
+
+      fontWeight: {
+        thin: '100',
+        extralight: '200',
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.app.json

@@ -3,6 +3,9 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,