Chat History UI Implementation¶

Implement the Chat History section UI based on the provided Figma design.

Figma Reference¶

https://www.figma.com/design/Ub9wWpnuDcEkxAqeHd1HJC/BMP--Web-app?node-id=46-1865&m=dev

The Chat History section should support different chat states and filtering options. The UI must follow the design system, spacing, typography, and interaction behavior defined in the Figma file.

Screens / States to Implement¶

All Chats – Empty State¶

• Display UI when no chats exist
• Show empty state illustration/message
• CTA if defined in design

All Chats – Swipe Read¶

• Swipe interaction to mark chat as read/unread
• Visual feedback when swipe action is triggered

All Chats – Selected (Single)¶

• Checkbox or selection state for one chat
• Highlight selected chat row

All Chats – Selected (Multiple)¶

• Allow multi-select chat
• Bulk actions (if defined in UI)

All Chats – Filter¶

• Implement filter dropdown / tabs
• Filter chats based on criteria from design

Unread Chats¶

• Display only unread conversations
• Highlight unread indicator

Group Chats¶

• Separate UI state for group conversations
• Show group avatar/name according to design

Functional Requirements¶

• Responsive UI
• Follow project UI components
• Use reusable components for chat list items
• Support chat selection state
• Support filtering logic
• Follow design tokens (colors, typography, spacing)

Acceptance Criteria¶

• UI matches Figma design
• All chat states render correctly
• Selection state works for single and multiple chats
• Filter functionality works
• Empty state displays correctly
• Group chat UI appears correctly