@wakastellar/ui 2.1.0 → 2.1.2

package/src/blocks/chat-interface/index.tsx

@@ -0,0 +1,611 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Badge } from "../../components/badge"
+import { ScrollArea } from "../../components/scroll-area"
+import { Separator } from "../../components/separator"
+import {
+  Send,
+  Paperclip,
+  Smile,
+  MoreVertical,
+  Phone,
+  Video,
+  Search,
+  Image,
+  File,
+  Mic,
+  Check,
+  CheckCheck,
+  Clock,
+  Circle,
+  Reply,
+  Forward,
+  Trash2,
+  Copy,
+  Pin,
+  Star,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ChatUser {
+  id: string
+  name: string
+  avatar?: string
+  status?: "online" | "offline" | "away" | "busy"
+  lastSeen?: Date | string
+}
+
+export interface ChatMessage {
+  id: string
+  content: string
+  senderId: string
+  timestamp: Date | string
+  status?: "sending" | "sent" | "delivered" | "read"
+  replyTo?: string
+  attachments?: ChatAttachment[]
+  reactions?: ChatReaction[]
+}
+
+export interface ChatAttachment {
+  id: string
+  type: "image" | "file" | "audio"
+  name: string
+  url: string
+  size?: string
+  thumbnail?: string
+}
+
+export interface ChatReaction {
+  emoji: string
+  userId: string
+}
+
+export interface ChatConversation {
+  id: string
+  participants: ChatUser[]
+  lastMessage?: ChatMessage
+  unreadCount?: number
+  isPinned?: boolean
+  isGroup?: boolean
+  groupName?: string
+  groupAvatar?: string
+}
+
+export interface ChatInterfaceProps {
+  /** Current user */
+  currentUser: ChatUser
+  /** List of conversations */
+  conversations?: ChatConversation[]
+  /** Currently selected conversation */
+  selectedConversation?: ChatConversation
+  /** Messages in selected conversation */
+  messages?: ChatMessage[]
+  /** Handler for sending message */
+  onSendMessage?: (content: string, attachments?: File[]) => void
+  /** Handler for selecting conversation */
+  onSelectConversation?: (conversation: ChatConversation) => void
+  /** Handler for typing indicator */
+  onTyping?: () => void
+  /** Users currently typing */
+  typingUsers?: ChatUser[]
+  /** Show sidebar */
+  showSidebar?: boolean
+  /** Custom className */
+  className?: string
+}
+
+// ============================================
+// SUBCOMPONENTS
+// ============================================
+
+const statusColors = {
+  online: "bg-green-500",
+  offline: "bg-gray-400",
+  away: "bg-yellow-500",
+  busy: "bg-red-500",
+}
+
+function UserAvatar({ user, size = "md" }: { user: ChatUser; size?: "sm" | "md" | "lg" }) {
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-10 w-10",
+    lg: "h-12 w-12",
+  }
+
+  return (
+    <div className="relative">
+      <Avatar className={sizeClasses[size]}>
+        <AvatarImage src={user.avatar} alt={user.name} />
+        <AvatarFallback>{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+      </Avatar>
+      {user.status && (
+        <div
+          className={cn(
+            "absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background",
+            statusColors[user.status]
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+function ConversationItem({
+  conversation,
+  currentUserId,
+  isSelected,
+  onClick,
+}: {
+  conversation: ChatConversation
+  currentUserId: string
+  isSelected: boolean
+  onClick: () => void
+}) {
+  const otherParticipant = conversation.participants.find((p) => p.id !== currentUserId)
+  const displayName = conversation.isGroup ? conversation.groupName : otherParticipant?.name
+  const displayAvatar = conversation.isGroup ? conversation.groupAvatar : otherParticipant?.avatar
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full flex items-center gap-3 p-3 rounded-lg transition-colors text-left",
+        isSelected ? "bg-primary/10" : "hover:bg-muted/50"
+      )}
+    >
+      <div className="relative">
+        <Avatar>
+          <AvatarImage src={displayAvatar} />
+          <AvatarFallback>{displayName?.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        {!conversation.isGroup && otherParticipant?.status && (
+          <div
+            className={cn(
+              "absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background",
+              statusColors[otherParticipant.status]
+            )}
+          />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <span className="font-medium truncate">{displayName}</span>
+          {conversation.lastMessage && (
+            <span className="text-xs text-muted-foreground">
+              {typeof conversation.lastMessage.timestamp === "string"
+                ? conversation.lastMessage.timestamp
+                : formatTime(conversation.lastMessage.timestamp)}
+            </span>
+          )}
+        </div>
+        {conversation.lastMessage && (
+          <p className="text-sm text-muted-foreground truncate">
+            {conversation.lastMessage.content}
+          </p>
+        )}
+      </div>
+      {conversation.unreadCount && conversation.unreadCount > 0 && (
+        <Badge className="h-5 w-5 p-0 flex items-center justify-center rounded-full">
+          {conversation.unreadCount}
+        </Badge>
+      )}
+      {conversation.isPinned && (
+        <Pin className="h-3 w-3 text-muted-foreground" />
+      )}
+    </button>
+  )
+}
+
+function MessageBubble({
+  message,
+  isOwn,
+  sender,
+  showAvatar,
+}: {
+  message: ChatMessage
+  isOwn: boolean
+  sender?: ChatUser
+  showAvatar: boolean
+}) {
+  const statusIcons = {
+    sending: <Clock className="h-3 w-3" />,
+    sent: <Check className="h-3 w-3" />,
+    delivered: <CheckCheck className="h-3 w-3" />,
+    read: <CheckCheck className="h-3 w-3 text-blue-500" />,
+  }
+
+  return (
+    <div className={cn("flex gap-2 max-w-[80%]", isOwn ? "ml-auto flex-row-reverse" : "")}>
+      {showAvatar && sender && !isOwn && (
+        <UserAvatar user={sender} size="sm" />
+      )}
+      {!showAvatar && !isOwn && <div className="w-8" />}
+
+      <div className="space-y-1">
+        {!isOwn && showAvatar && sender && (
+          <span className="text-xs text-muted-foreground ml-1">{sender.name}</span>
+        )}
+
+        <div
+          className={cn(
+            "rounded-2xl px-4 py-2",
+            isOwn
+              ? "bg-primary text-primary-foreground rounded-br-md"
+              : "bg-muted rounded-bl-md"
+          )}
+        >
+          {message.replyTo && (
+            <div className={cn(
+              "text-xs mb-1 pb-1 border-b",
+              isOwn ? "border-primary-foreground/20" : "border-border"
+            )}>
+              <Reply className="h-3 w-3 inline mr-1" />
+              Reply to message
+            </div>
+          )}
+
+          <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+
+          {message.attachments && message.attachments.length > 0 && (
+            <div className="mt-2 space-y-2">
+              {message.attachments.map((attachment) => (
+                <div key={attachment.id} className="flex items-center gap-2">
+                  {attachment.type === "image" ? (
+                    <Image className="h-4 w-4" />
+                  ) : (
+                    <File className="h-4 w-4" />
+                  )}
+                  <span className="text-xs truncate">{attachment.name}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={cn("flex items-center gap-1 text-xs text-muted-foreground", isOwn ? "justify-end" : "")}>
+          <span>
+            {typeof message.timestamp === "string"
+              ? message.timestamp
+              : formatTime(message.timestamp)}
+          </span>
+          {isOwn && message.status && statusIcons[message.status]}
+        </div>
+
+        {message.reactions && message.reactions.length > 0 && (
+          <div className="flex gap-1 mt-1">
+            {Array.from(new Set(message.reactions.map((r) => r.emoji))).map((emoji) => (
+              <span key={emoji} className="text-xs bg-muted rounded-full px-2 py-0.5">
+                {emoji} {message.reactions!.filter((r) => r.emoji === emoji).length}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function TypingIndicator({ users }: { users: ChatUser[] }) {
+  if (users.length === 0) return null
+
+  const names = users.map((u) => u.name).join(", ")
+
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="flex gap-1">
+        <Circle className="h-2 w-2 animate-bounce" style={{ animationDelay: "0ms" }} />
+        <Circle className="h-2 w-2 animate-bounce" style={{ animationDelay: "150ms" }} />
+        <Circle className="h-2 w-2 animate-bounce" style={{ animationDelay: "300ms" }} />
+      </div>
+      <span>{names} {users.length === 1 ? "is" : "are"} typing...</span>
+    </div>
+  )
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function ChatInterface({
+  currentUser,
+  conversations = [],
+  selectedConversation,
+  messages = [],
+  onSendMessage,
+  onSelectConversation,
+  onTyping,
+  typingUsers = [],
+  showSidebar = true,
+  className,
+}: ChatInterfaceProps) {
+  const [inputValue, setInputValue] = React.useState("")
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const messagesEndRef = React.useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }
+
+  React.useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSend = () => {
+    if (!inputValue.trim() || !onSendMessage) return
+    onSendMessage(inputValue.trim())
+    setInputValue("")
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  const filteredConversations = conversations.filter((conv) => {
+    if (!searchQuery) return true
+    const otherParticipant = conv.participants.find((p) => p.id !== currentUser.id)
+    const name = conv.isGroup ? conv.groupName : otherParticipant?.name
+    return name?.toLowerCase().includes(searchQuery.toLowerCase())
+  })
+
+  const otherParticipant = selectedConversation?.participants.find((p) => p.id !== currentUser.id)
+  const chatTitle = selectedConversation?.isGroup
+    ? selectedConversation.groupName
+    : otherParticipant?.name
+
+  // Group messages by sender for avatar display
+  const groupedMessages = messages.reduce((acc, message, index) => {
+    const prevMessage = messages[index - 1]
+    const showAvatar = !prevMessage || prevMessage.senderId !== message.senderId
+    acc.push({ message, showAvatar })
+    return acc
+  }, [] as { message: ChatMessage; showAvatar: boolean }[])
+
+  return (
+    <div className={cn("flex h-[600px] rounded-lg border overflow-hidden", className)}>
+      {/* Sidebar */}
+      {showSidebar && (
+        <div className="w-80 border-r flex flex-col bg-card">
+          {/* Sidebar Header */}
+          <div className="p-4 border-b">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="font-semibold text-lg">Messages</h2>
+              <Button variant="ghost" size="icon">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search conversations..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+
+          {/* Conversations List */}
+          <ScrollArea className="flex-1">
+            <div className="p-2 space-y-1">
+              {filteredConversations.map((conversation) => (
+                <ConversationItem
+                  key={conversation.id}
+                  conversation={conversation}
+                  currentUserId={currentUser.id}
+                  isSelected={selectedConversation?.id === conversation.id}
+                  onClick={() => onSelectConversation?.(conversation)}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      )}
+
+      {/* Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {selectedConversation ? (
+          <>
+            {/* Chat Header */}
+            <div className="h-16 border-b flex items-center justify-between px-4 bg-card">
+              <div className="flex items-center gap-3">
+                {otherParticipant && <UserAvatar user={otherParticipant} />}
+                <div>
+                  <h3 className="font-medium">{chatTitle}</h3>
+                  {otherParticipant?.status && (
+                    <p className="text-xs text-muted-foreground capitalize">
+                      {otherParticipant.status === "online"
+                        ? "Online"
+                        : `Last seen ${otherParticipant.lastSeen || "recently"}`}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon">
+                  <Phone className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon">
+                  <Video className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Messages Area */}
+            <ScrollArea className="flex-1 p-4">
+              <div className="space-y-4">
+                {groupedMessages.map(({ message, showAvatar }) => (
+                  <MessageBubble
+                    key={message.id}
+                    message={message}
+                    isOwn={message.senderId === currentUser.id}
+                    sender={selectedConversation.participants.find(
+                      (p) => p.id === message.senderId
+                    )}
+                    showAvatar={showAvatar}
+                  />
+                ))}
+                <div ref={messagesEndRef} />
+              </div>
+              {typingUsers.length > 0 && (
+                <div className="mt-4">
+                  <TypingIndicator users={typingUsers} />
+                </div>
+              )}
+            </ScrollArea>
+
+            {/* Input Area */}
+            <div className="p-4 border-t bg-card">
+              <div className="flex items-end gap-2">
+                <Button variant="ghost" size="icon">
+                  <Paperclip className="h-4 w-4" />
+                </Button>
+                <div className="flex-1">
+                  <Input
+                    placeholder="Type a message..."
+                    value={inputValue}
+                    onChange={(e) => {
+                      setInputValue(e.target.value)
+                      onTyping?.()
+                    }}
+                    onKeyDown={handleKeyDown}
+                    className="rounded-full"
+                  />
+                </div>
+                <Button variant="ghost" size="icon">
+                  <Smile className="h-4 w-4" />
+                </Button>
+                <Button size="icon" onClick={handleSend} disabled={!inputValue.trim()}>
+                  <Send className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </>
+        ) : (
+          /* No Conversation Selected */
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center">
+              <div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
+                <Send className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h3 className="font-medium text-lg">Your Messages</h3>
+              <p className="text-muted-foreground text-sm mt-1">
+                Select a conversation to start chatting
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// PRESET DATA
+// ============================================
+
+export const defaultUsers: ChatUser[] = [
+  { id: "1", name: "John Doe", avatar: "", status: "online" },
+  { id: "2", name: "Jane Smith", avatar: "", status: "away", lastSeen: "2 hours ago" },
+  { id: "3", name: "Bob Wilson", avatar: "", status: "offline", lastSeen: "yesterday" },
+  { id: "4", name: "Alice Brown", avatar: "", status: "busy" },
+]
+
+export const defaultConversations: ChatConversation[] = [
+  {
+    id: "conv1",
+    participants: [defaultUsers[0], defaultUsers[1]],
+    lastMessage: {
+      id: "m1",
+      content: "Hey, how's the project going?",
+      senderId: "2",
+      timestamp: new Date(),
+      status: "read",
+    },
+    unreadCount: 2,
+    isPinned: true,
+  },
+  {
+    id: "conv2",
+    participants: [defaultUsers[0], defaultUsers[2]],
+    lastMessage: {
+      id: "m2",
+      content: "See you tomorrow!",
+      senderId: "1",
+      timestamp: new Date(Date.now() - 3600000),
+      status: "delivered",
+    },
+  },
+  {
+    id: "conv3",
+    isGroup: true,
+    groupName: "Project Team",
+    participants: [defaultUsers[0], defaultUsers[1], defaultUsers[2], defaultUsers[3]],
+    lastMessage: {
+      id: "m3",
+      content: "Meeting at 3pm",
+      senderId: "4",
+      timestamp: new Date(Date.now() - 7200000),
+      status: "read",
+    },
+    unreadCount: 5,
+  },
+]
+
+export const defaultMessages: ChatMessage[] = [
+  {
+    id: "msg1",
+    content: "Hey! How are you doing?",
+    senderId: "2",
+    timestamp: new Date(Date.now() - 3600000),
+    status: "read",
+  },
+  {
+    id: "msg2",
+    content: "I'm doing great, thanks for asking! Just finished the new feature.",
+    senderId: "1",
+    timestamp: new Date(Date.now() - 3500000),
+    status: "read",
+  },
+  {
+    id: "msg3",
+    content: "That's awesome! Can you show me a demo?",
+    senderId: "2",
+    timestamp: new Date(Date.now() - 3400000),
+    status: "read",
+  },
+  {
+    id: "msg4",
+    content: "Sure! Let me schedule a call for tomorrow. Does 2pm work for you?",
+    senderId: "1",
+    timestamp: new Date(Date.now() - 3300000),
+    status: "delivered",
+  },
+  {
+    id: "msg5",
+    content: "Perfect, 2pm works great!",
+    senderId: "2",
+    timestamp: new Date(Date.now() - 3200000),
+    status: "read",
+  },
+]
+
+export default ChatInterface