Curated Chat page for specific userId, sellerId and listingId with data from json server

ShivanshPlays commented 1 week ago

Summary

This PR introduces a fully responsive and theme-specific chat page, dynamically designed to facilitate communication between users and sellers about a particular listing. Each chat page instance is unique based on sellerId, userId, and listingId. Additionally, the PR includes a preview card with a carousel, displaying listing images and information to enhance user experience.

Key Enhancements

1. Fully Responsive, Theme-Specific Chat Page

Objective: Create a responsive chat interface that aligns with the application’s theme and enhances user-seller interactions about specific listings.
Implementation:
- Designed a chat page layout that adapts smoothly to various screen sizes, providing an accessible experience on both desktop and mobile devices.
- Ensured the chat interface is visually consistent with the application's theme, including colors, fonts, and button styles, enhancing the cohesive look and feel.
- Made the chat page dynamic, generating unique instances based on sellerId, userId, and listingId, allowing for seamless communication about specific listings.

2. Dynamic Communication for Users and Sellers

-Implementation:

Integrated JSON server setup to simulate real-time message exchanges and display sample chat data, allowing for initial testing and demonstration of the chat feature.
Established structured data fetching based on sellerId, userId, and listingId to ensure that each chat instance loads only relevant messages, maintaining a targeted and relevant discussion.

3. listing Preview Card with Carousel

Objective: Provide users with a visual preview of the listing within the chat interface, ensuring quick reference and enhancing user engagement.
Implementation:
- Created a listing preview card at the top of the chat page, displaying essential listing details and images.
- Integrated a carousel component within the preview card to enable users to scroll through multiple listing images directly within the chat page.
- Ensured the carousel is responsive and maintains consistent styling with the chat page, improving the overall usability and design coherence.

Fixes #532 PR4

https://github.com/user-attachments/assets/d25fa616-3eeb-4369-a9ea-2bcafd72580c

https://github.com/user-attachments/assets/a9d88ce9-3e9d-4f21-83a7-d4bbf39a600e