I'll create a chat UI for your video conference application that opens in a shadcn/ui Sheet component 12. This will include both group chat and 1v1 chat functionality with a clean, modern design.
This chat UI opens in a shadcn/ui Sheet component 2 and provides both group and 1v1 chat functionality. Here's what I've built:
Key Features
- Chat Sheet Component: Opens from the side of the screen with a message icon button trigger
Responsive Design:
- On desktop: Shows chat list and selected chat side by side
- On mobile: Shows either chat list or selected chat with back button
Chat List:
- Tabs to filter between all chats, groups, and direct messages
- Search functionality to find specific conversations
- Unread message indicators with badges
- Online status indicators for users
Chat View:
- Message history with proper alignment (sent vs received)
- User avatars and names (for group chats)
- Timestamps for messages
- Message input with send button and attachment options
How to Use
- Add the
<ChatSheet />component to your video conference UI - The chat opens in a side panel when clicked
- Users can switch between different chats and send messages
The UI is fully responsive and will adapt to both desktop and mobile views. The Sheet component from shadcn/ui 2 provides a smooth sliding animation when opening and closing the chat panel.
You can customize the colors, sizes, and functionality as needed for your specific application.
I see the issue. Let me fix the navigation so you can go back to the chat list without closing the entire sheet.
I've fixed the navigation issue so you can now go back to the chat list without closing the entire sheet. Here's what I changed:
Added Back Button on Desktop View:
- The back button is now visible in both mobile and desktop views
- Clicking it will return you to the chat list without closing the sheet
Fixed Navigation Logic:
- Added the
onBackhandler to the desktop view of the ChatView component - The handler sets the selected chat to null, which returns you to the chat list
- Added the
Now when you open any chat (group or individual), you'll see a back arrow in the top-left corner of the chat header. Clicking this will take you back to the chat list while keeping the sheet open.
This provides a consistent navigation experience across all device sizes and ensures users can easily switch between different chats without accidentally closing the entire sheet.