modula-ui 1.0.0

package/src/library/pages/GroupChat/GroupChat.jsx

@@ -0,0 +1,275 @@
+"use client"
+
+import { Sidebar, SidebarContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from '@/components/ui/sidebar'
+import React, { useState, useRef, useEffect } from 'react'
+import { data } from './data'
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@/components/ui/navigation-menu'
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Send, MoreVertical, Phone, Video } from 'lucide-react'
+
+const GroupChatCode = () => {
+  const [activeNav, setActiveNav] = useState('All Chats')
+  const [selectedChat, setSelectedChat] = useState(null)
+  const messagesEndRef = useRef(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    // scrollToBottom()
+  }, [selectedChat])
+
+  const getInitials = (name) => {
+    return name
+      .split(' ')
+      .map(n => n[0])
+      .join('')
+      .toUpperCase()
+  }
+
+  // Parse timestamp strings into sortable values (lower = more recent)
+  const parseTimestamp = (timestamp) => {
+    if (timestamp.includes('m ago')) {
+      return parseInt(timestamp) // minutes
+    } else if (timestamp.includes('h ago')) {
+      return parseInt(timestamp) * 60 // hours to minutes
+    } else if (timestamp === 'Yesterday') {
+      return 24 * 60 // 1 day in minutes
+    } else if (timestamp.includes('days ago')) {
+      return parseInt(timestamp) * 24 * 60 // days to minutes
+    }
+    return 999999 // fallback for unknown formats
+  }
+
+  // Combine and sort all chats for "All Chats" view
+  const getAllChatsSorted = () => {
+    const directMessages = data.chatList.map(chat => ({ ...chat, isGroup: false }))
+    const groups = data.groupChats.map(chat => ({ ...chat, isGroup: true }))
+    return [...directMessages, ...groups].sort((a, b) => parseTimestamp(a.timestamp) - parseTimestamp(b.timestamp))
+  }
+
+  const handleChatClick = (chat, isGroup = false) => {
+    setSelectedChat({ ...chat, isGroup })
+  }
+
+  const ChatItem = ({ chat, isGroup = false, onClick }) => (
+    <div
+      className={`flex gap-3 items-center p-3 hover:bg-gray-50 cursor-pointer rounded-lg transition-colors ${selectedChat?.id === chat.id && selectedChat?.isGroup === isGroup ? 'bg-blue-50' : ''}`}
+      onClick={() => onClick(chat, isGroup)}
+    >
+      <div className='relative'>
+        <Avatar className='bg-gray-800 rounded-sm'>
+          <AvatarImage src={chat.avatar} alt={chat.name} />
+          <AvatarFallback className='bg-gray-800 text-white'>{getInitials(chat.name)}</AvatarFallback>
+        </Avatar>
+        {!isGroup && chat.isOnline && (
+          <div className='absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white' />
+        )}
+      </div>
+      <div className='flex-1 min-w-0'>
+        <div className='flex items-center justify-between mb-1'>
+          <p className='font-semibold text-sm truncate'>{chat.name}</p>
+          <span className='text-xs text-gray-500 ml-2 flex-shrink-0'>{chat.timestamp}</span>
+        </div>
+        <div className='flex items-center justify-between'>
+          <p className='text-xs text-gray-600 truncate flex-1'>{chat.lastMessage}</p>
+          {chat.unreadCount > 0 && (
+            <Badge className='ml-2 bg-blue-500 hover:bg-blue-600 text-white rounded-full h-5 min-w-5 flex items-center justify-center text-xs px-1.5'>
+              {chat.unreadCount}
+            </Badge>
+          )}
+        </div>
+        {isGroup && (
+          <p className='text-xs text-gray-400 mt-1'>{chat.memberCount} members</p>
+        )}
+      </div>
+    </div>
+  )
+
+  const MessageBubble = ({ message }) => (
+    <div className={`flex gap-3 mb-4 ${message.isCurrentUser ? 'flex-row-reverse' : ''}`}>
+      {!message.isCurrentUser && (
+        <Avatar className='w-8 h-8 bg-gray-800'>
+          <AvatarImage src={message.avatar} alt={message.sender} />
+          <AvatarFallback className='bg-gray-800 text-white'>{getInitials(message.sender)}</AvatarFallback>
+        </Avatar>
+      )}
+      <div className={`max-w-[70%] ${message.isCurrentUser ? 'text-right' : ''}`}>
+        {!message.isCurrentUser && (
+          <p className='text-xs font-medium text-gray-700 mb-1'>{message.sender}</p>
+        )}
+        <div className={`rounded-2xl px-4 py-2 inline-block ${message.isCurrentUser ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-800'}`}>
+          <p className='text-sm'>{message.content}</p>
+        </div>
+        <p className='text-xs text-gray-400 mt-1'>{message.timestamp}</p>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className='lexend flex flex-col w-full bg-white h-screen overflow-hidden'>
+      <NavigationMenu>
+        <NavigationMenuList>
+          {data.navItems.map((item) => (
+            <NavigationMenuItem key={item.title}>
+              <NavigationMenuLink
+                onClick={() => setActiveNav(item.title)}
+                isActive={activeNav === item.title}
+                className='w-full'
+              >
+                <item.icon className='w-10 h-10' />
+                <span>{item.title}</span>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          ))}
+        </NavigationMenuList>
+      </NavigationMenu>
+      <div className='flex'>
+        <div className='flex-shrink-0 w-fit h-full flex flex-col'>
+
+          <SidebarProvider className="w-fit flex-1 overflow-hidden">
+            <Sidebar className='border-r h-full w-fit'>
+              <SidebarContent className='h-full'>
+                {/* Chat Lists */}
+                <ScrollArea className='h-full'>
+                  {activeNav === 'All Chats' && (
+                    <div className='p-2'>
+                      <h3 className='text-xs font-semibold text-gray-500 uppercase px-3 py-2'>
+                        All Messages
+                      </h3>
+                      {getAllChatsSorted().map((chat) => (
+                        <ChatItem key={`${chat.isGroup ? 'group' : 'dm'}-${chat.id}`} chat={chat} isGroup={chat.isGroup} onClick={handleChatClick} />
+                      ))}
+                    </div>
+                  )}
+
+                  {activeNav === 'Direct Messages' && (
+                    <div className='p-2'>
+                      <h3 className='text-xs font-semibold text-gray-500 uppercase px-3 py-2'>
+                        Direct Messages
+                      </h3>
+                      {data.chatList.map((chat) => (
+                        <ChatItem key={chat.id} chat={chat} onClick={handleChatClick} />
+                      ))}
+                    </div>
+                  )}
+
+                  {activeNav === 'Groups' && (
+                    <div className='p-2'>
+                      <h3 className='text-xs font-semibold text-gray-500 uppercase px-3 py-2'>
+                        Groups
+                      </h3>
+                      {data.groupChats.map((chat) => (
+                        <ChatItem key={chat.id} chat={chat} isGroup={true} onClick={handleChatClick} />
+                      ))}
+                    </div>
+                  )}
+
+                  {activeNav === 'Starred' && (
+                    <div className='p-2'>
+                      <h3 className='text-xs font-semibold text-gray-500 uppercase px-3 py-2'>
+                        Starred Chats
+                      </h3>
+                      {data.chatList
+                        .filter(chat => chat.isStarred)
+                        .map((chat) => (
+                          <ChatItem key={chat.id} chat={chat} onClick={handleChatClick} />
+                        ))}
+                      {data.groupChats
+                        .filter(chat => chat.isStarred)
+                        .map((chat) => (
+                          <ChatItem key={chat.id} chat={chat} isGroup={true} onClick={handleChatClick} />
+                        ))}
+                    </div>
+                  )}
+
+                  {activeNav === 'Settings' && (
+                    <div className='p-4'>
+                      <h3 className='text-sm font-semibold mb-4'>Settings</h3>
+                      <p className='text-xs text-gray-500'>Settings panel coming soon...</p>
+                    </div>
+                  )}
+                </ScrollArea>
+              </SidebarContent>
+            </Sidebar>
+          </SidebarProvider>
+        </div>
+
+        {/* Main Chat Area */}
+        <div className='flex-1 flex flex-col bg-gray-50 h-full overflow-hidden'>
+          {selectedChat ? (
+            <div className='flex flex-col h-full'>
+              {/* Chat Header */}
+              <div className='flex-shrink-0 flex items-center justify-between p-4 bg-white border-b'>
+                <div className='flex items-center gap-3'>
+                  <Avatar className='bg-gray-800'>
+                    <AvatarImage src={selectedChat.avatar} alt={selectedChat.name} />
+                    <AvatarFallback className='bg-gray-800 text-white'>{getInitials(selectedChat.name)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className='font-semibold'>{selectedChat.name}</p>
+                    {selectedChat.isGroup ? (
+                      <p className='text-xs text-gray-500'>{selectedChat.memberCount} members</p>
+                    ) : (
+                      <p className='text-xs text-green-500'>{selectedChat.isOnline ? 'Online' : 'Offline'}</p>
+                    )}
+                  </div>
+                </div>
+                <div className='flex items-center gap-2'>
+                  <Button variant='ghost' size='icon'><Phone className='w-5 h-5' /></Button>
+                  <Button variant='ghost' size='icon'><Video className='w-5 h-5' /></Button>
+                  <Button variant='ghost' size='icon'><MoreVertical className='w-5 h-5' /></Button>
+                </div>
+              </div>
+
+              {/* Messages Area */}
+              <div className='flex-1 min-h-0 overflow-hidden'>
+                <ScrollArea className='h-full p-4'>
+                  {selectedChat.messages && selectedChat.messages.length > 0 ? (
+                    <>
+                      {selectedChat.messages.map((message) => (
+                        <MessageBubble key={message.id} message={message} />
+                      ))}
+                      <div ref={messagesEndRef} />
+                    </>
+                  ) : (
+                    <div className='flex items-center justify-center h-full text-gray-400'>
+                      <p>No messages yet. Start the conversation!</p>
+                    </div>
+                  )}
+                </ScrollArea>
+              </div>
+
+              {/* Message Input */}
+              <div className='flex-shrink-0 p-4 bg-white border-t'>
+                <div className='flex gap-2'>
+                  <Input
+                    placeholder='Type a message...'
+                    className='flex-1'
+                  />
+                  <Button size='icon'>
+                    <Send className='w-4 h-4' />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className='flex-1 flex items-center justify-center'>
+              <div className='text-center text-gray-400'>
+                <p className='text-lg font-medium'>Select a chat to start messaging</p>
+                <p className='text-sm mt-2'>Choose a conversation from the sidebar</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GroupChatCode

package/src/library/pages/GroupChat/data.js

@@ -0,0 +1,203 @@
+import { 
+    MessageSquare, 
+    MessageCircle, 
+    Users, 
+    Star, 
+    Settings 
+} from 'lucide-react';
+
+export const data = {
+    navItems: [
+        {
+            title: 'All Chats',
+            url: '#',
+            icon: MessageSquare,
+            isActive: true,
+        },
+        {
+            title: 'Direct Messages',
+            url: '#',
+            icon: MessageCircle,
+            isActive: false,
+        },
+        {
+            title: 'Groups',
+            url: '#',
+            icon: Users,
+            isActive: false,
+        },
+        {
+            title: 'Starred',
+            url: '#',
+            icon: Star,
+            isActive: false,
+        },
+        {
+            title: 'Settings',
+            url: '#',
+            icon: Settings,
+            isActive: false,
+        }
+    ],
+    chatList: [
+        {
+            id: 1,
+            name: 'Sarah Johnson',
+            avatar: '/avatars/avatar1.png',
+            lastMessage: 'Hey! Did you see the new design mockups?',
+            timestamp: '2m ago',
+            unreadCount: 3,
+            isOnline: true,
+            isStarred: false,
+        },
+        {
+            id: 2,
+            name: 'Mike Chen',
+            avatar: '/avatars/avatar2.png',
+            lastMessage: 'Thanks for the help earlier!',
+            timestamp: '15m ago',
+            unreadCount: 0,
+            isOnline: true,
+            isStarred: true,
+        },
+        {
+            id: 3,
+            name: 'Emily Rodriguez',
+            avatar: '/avatars/avatar3.png',
+            lastMessage: 'Can we schedule a meeting for tomorrow?',
+            timestamp: '1h ago',
+            unreadCount: 1,
+            isOnline: false,
+            isStarred: false,
+        },
+        // {
+        //     id: 4,
+        //     name: 'David Kim',
+        //     avatar: '/avatars/avatar4.png',
+        //     lastMessage: 'The project looks great! 🎉',
+        //     timestamp: '2h ago',
+        //     unreadCount: 0,
+        //     isOnline: false,
+        //     isStarred: true,
+        // },
+        // {
+        //     id: 5,
+        //     name: 'Lisa Anderson',
+        //     avatar: '/avatars/avatar1.png',
+        //     lastMessage: 'I\'ll send you the files in a bit',
+        //     timestamp: '3h ago',
+        //     unreadCount: 0,
+        //     isOnline: true,
+        //     isStarred: false,
+        // },
+        // {
+        //     id: 6,
+        //     name: 'James Wilson',
+        //     avatar: '/avatars/avatar2.png',
+        //     lastMessage: 'Let me know when you\'re free',
+        //     timestamp: 'Yesterday',
+        //     unreadCount: 2,
+        //     isOnline: false,
+        //     isStarred: false,
+        // },
+        // {
+        //     id: 7,
+        //     name: 'Anna Martinez',
+        //     avatar: '/avatars/avatar3.png',
+        //     lastMessage: 'Perfect, see you then!',
+        //     timestamp: 'Yesterday',
+        //     unreadCount: 0,
+        //     isOnline: true,
+        //     isStarred: false,
+        // },
+        {
+            id: 8,
+            name: 'Tom Brown',
+            avatar: '/avatars/avatar4.png',
+            lastMessage: 'Got it, thanks!',
+            timestamp: '2 days ago',
+            unreadCount: 0,
+            isOnline: false,
+            isStarred: false,
+        }
+    ],
+    groupChats: [
+        {
+            id: 1,
+            name: 'Design Team',
+            avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=DesignTeam',
+            lastMessage: 'Sarah: The new color palette is ready',
+            timestamp: '5m ago',
+            unreadCount: 5,
+            memberCount: 8,
+            isStarred: true,
+            members: ['Sarah Johnson', 'Mike Chen', 'Emily Rodriguez', 'David Kim', 'Lisa Anderson', 'James Wilson', 'Anna Martinez', 'Tom Brown'],
+            messages: [
+                { id: 1, sender: 'Sarah Johnson', avatar: '/avatars/avatar1.png', content: 'Hey team! I\'ve been working on the new color palette for the dashboard.', timestamp: '10:30 AM', isCurrentUser: false },
+                { id: 2, sender: 'Mike Chen', avatar: '/avatars/avatar2.png', content: 'Awesome! Can\'t wait to see it. What direction did you go with?', timestamp: '10:32 AM', isCurrentUser: false },
+                // { id: 3, sender: 'Sarah Johnson', avatar: '/avatars/avatar1.png', content: 'I went with a more vibrant set of colors. Think modern and energetic!', timestamp: '10:33 AM', isCurrentUser: false },
+                { id: 4, sender: 'You', avatar: '/avatars/avatar4.png', content: 'That sounds great! I was hoping we\'d move away from the muted tones.', timestamp: '10:35 AM', isCurrentUser: true },
+                // { id: 5, sender: 'Emily Rodriguez', avatar: '/avatars/avatar3.png', content: 'I agree! The current palette feels too corporate. Fresh colors would be nice.', timestamp: '10:37 AM', isCurrentUser: false },
+                // { id: 6, sender: 'David Kim', avatar: '/avatars/avatar4.png', content: 'Just make sure we maintain accessibility standards for contrast ratios 👍', timestamp: '10:40 AM', isCurrentUser: false },
+                // { id: 7, sender: 'Sarah Johnson', avatar: '/avatars/avatar1.png', content: 'Definitely! I\'ve run all the combinations through the WCAG checker.', timestamp: '10:42 AM', isCurrentUser: false },
+                // { id: 8, sender: 'You', avatar: '/avatars/avatar4.png', content: 'Perfect! When can we see the final designs?', timestamp: '10:45 AM', isCurrentUser: true },
+                // { id: 9, sender: 'Sarah Johnson', avatar: '/avatars/avatar1.png', content: 'The new color palette is ready', timestamp: '10:48 AM', isCurrentUser: false }
+            ]
+        },
+        {
+            id: 2,
+            name: 'Project Alpha',
+            avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=ProjectAlpha',
+            lastMessage: 'Mike: Meeting at 3 PM today',
+            timestamp: '30m ago',
+            unreadCount: 2,
+            memberCount: 5,
+            isStarred: false,
+            members: ['Mike Chen', 'Emily Rodriguez', 'David Kim', 'Lisa Anderson', 'Tom Brown']
+        },
+        // {
+        //     id: 3,
+        //     name: 'Marketing Squad',
+        //     avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=Marketing',
+        //     lastMessage: 'Emily: Campaign results look promising!',
+        //     timestamp: '1h ago',
+        //     unreadCount: 0,
+        //     memberCount: 6,
+        //     isStarred: true,
+        //     members: ['Emily Rodriguez', 'Sarah Johnson', 'Anna Martinez', 'James Wilson', 'Lisa Anderson', 'David Kim']
+        // },
+        // {
+        //     id: 4,
+        //     name: 'Dev Team',
+        //     avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=DevTeam',
+        //     lastMessage: 'David: Deployed to staging',
+        //     timestamp: '2h ago',
+        //     unreadCount: 1,
+        //     memberCount: 10,
+        //     isStarred: false,
+        //     members: ['David Kim', 'Mike Chen', 'Tom Brown', 'James Wilson', 'Sarah Johnson', 'Emily Rodriguez', 'Lisa Anderson', 'Anna Martinez']
+        // },
+        // {
+        //     id: 5,
+        //     name: 'Weekend Plans',
+        //     avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=Weekend',
+        //     lastMessage: 'Lisa: Who\'s up for hiking?',
+        //     timestamp: '4h ago',
+        //     unreadCount: 0,
+        //     memberCount: 4,
+        //     isStarred: false,
+        //     members: ['Lisa Anderson', 'Anna Martinez', 'Sarah Johnson', 'Mike Chen']
+        // },
+        // {
+        //     id: 6,
+        //     name: 'Book Club',
+        //     avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=BookClub',
+        //     lastMessage: 'Anna: Next meeting is on Friday',
+        //     timestamp: 'Yesterday',
+        //     unreadCount: 0,
+        //     memberCount: 7,
+        //     isStarred: false,
+        //     members: ['Anna Martinez', 'Emily Rodriguez', 'Lisa Anderson', 'Sarah Johnson', 'Tom Brown', 'James Wilson', 'David Kim']
+        // }
+    ]
+};

package/src/library/pages/GroupChat/index.jsx

@@ -0,0 +1,12 @@
+"use client"
+
+import React from 'react'
+import GroupChatCode from './GroupChat'
+
+export const GroupChat = {
+  name: "Group Chat",
+  code: "npx nora-ui add group-chat",
+  preview: (
+    <GroupChatCode />
+  )
+}