Implement agent-user chat interface in vue.js

[costa-al]

Description:

We need to develop a responsive and intuitive chat interface for our application that allows users to communicate with agents in real-time. This interface should be built using Vue.js and must be compatible with both desktop and mobile devices.

Objectives:

• Real-Time Messaging: Implement real-time messaging functionality using WebSockets. Ensure messages are received and displayed without requiring the user to refresh the page.
• Message UI Components: Develop Vue components for displaying messages, including text, timestamps, and status indicators (sent, received, read).
• Input Field: Create a text input field where users can type their messages. Include features for handling multiline input and basic text formatting (e.g., bold, italics).
• Agent Identification: Clearly distinguish between messages from the user and messages from agents, possibly through different colors or avatars.
• Notifications: Implement desktop and in-browser notifications for incoming messages when the chat tab is not active.
• Accessibility: Ensure the chat UI is accessible, including keyboard navigability and screen reader support.

Technical Requirements:

• Framework: Vue.js 3.x
• State Management: Vuex for managing state
• API Integration: Integrate with backend APIs (WIP) for sending and receiving messages
• Styling: Use Tailwind CSS for styling to ensure responsiveness and maintainability
• Testing: Unit and integration tests using Jest and Vue Test Utils

Acceptance Criteria:

• Users can send and receive messages in real-time.
• Messages have appropriate timestamps.
• Interface adapts responsively to different screen sizes.
• All new components have at least 80% test coverage.
• Code follows existing project style guidelines and best practices in Vue.js development.