added specific chat page, where customer and vendor can chat about a specific dish

[ShivanshPlays]

Summary

This PR introduces a fully responsive and theme-specific chat page, dynamically designed to facilitate communication between customers and vendors about a particular dish. Each chat page instance is unique based on sellerId, userId, and dishId. Additionally, the PR includes a preview card with a carousel, displaying dish 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 dishs.
• 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 dishId, allowing for seamless communication about specific dishs.

2. Dynamic Communication for customers and vendors

• 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 dishId to ensure that each chat instance loads only relevant messages, maintaining a targeted and relevant discussion.

3. dish Preview Card with Carousel

• Objective: Provide customers with a visual preview of the dish within the chat interface, ensuring quick reference and enhancing user engagement.
• Implementation:
  • Created a dish preview card at the top of the chat page, displaying essential dish details and images.
  • Integrated a carousel component within the preview card to enable customers to scroll through multiple dish 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.

4. fixed build errors which were due to inconsistent following of latest nextJS syntax and lint errors by other PRs

---

PR4 #257

[github-actions]

🚀 Thank you for contributing to this project, your support is much appreciated.

Stay awesome! 😎