@nextsparkjs/theme-default 0.1.0-beta.1

package/components/ai-chat/ConversationItem.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import { useState } from 'react'
+import { MessageSquare, Pin, MoreVertical, Pencil, Trash2, PinOff } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@nextsparkjs/core/components/ui/dropdown-menu'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@nextsparkjs/core/components/ui/dialog'
+import { Input } from '@nextsparkjs/core/components/ui/input'
+import type { ConversationInfo } from '../../lib/hooks/useConversations'
+
+interface ConversationItemProps {
+    conversation: ConversationInfo
+    isActive: boolean
+    onClick: () => void
+    onRename: (name: string) => Promise<void>
+    onDelete: () => Promise<void>
+    onTogglePin: () => Promise<void>
+}
+
+/**
+ * Format relative time (e.g., "2h ago", "3d ago")
+ */
+function formatRelativeTime(dateString: string): string {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffSecs = Math.floor(diffMs / 1000)
+    const diffMins = Math.floor(diffSecs / 60)
+    const diffHours = Math.floor(diffMins / 60)
+    const diffDays = Math.floor(diffHours / 24)
+
+    if (diffDays > 0) return `${diffDays}d ago`
+    if (diffHours > 0) return `${diffHours}h ago`
+    if (diffMins > 0) return `${diffMins}m ago`
+    return 'Just now'
+}
+
+/**
+ * Get display name for a conversation
+ */
+function getDisplayName(conversation: ConversationInfo): string {
+    if (conversation.name) return conversation.name
+    if (conversation.firstMessage) {
+        return conversation.firstMessage.slice(0, 40) + (conversation.firstMessage.length > 40 ? '...' : '')
+    }
+    return 'New conversation'
+}
+
+export function ConversationItem({
+    conversation,
+    isActive,
+    onClick,
+    onRename,
+    onDelete,
+    onTogglePin,
+}: ConversationItemProps) {
+    const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false)
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+    const [newName, setNewName] = useState(conversation.name || '')
+    const [isLoading, setIsLoading] = useState(false)
+
+    const displayName = getDisplayName(conversation)
+
+    const handleRename = async () => {
+        if (!newName.trim()) return
+        setIsLoading(true)
+        try {
+            await onRename(newName.trim())
+            setIsRenameDialogOpen(false)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleDelete = async () => {
+        setIsLoading(true)
+        try {
+            await onDelete()
+            setIsDeleteDialogOpen(false)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleTogglePin = async () => {
+        setIsLoading(true)
+        try {
+            await onTogglePin()
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <div
+                data-cy="conversation-item"
+                className={cn(
+                    'group flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer transition-colors',
+                    isActive
+                        ? 'bg-accent text-accent-foreground'
+                        : 'hover:bg-muted/50'
+                )}
+                onClick={onClick}
+            >
+                {/* Pin indicator */}
+                {conversation.isPinned && (
+                    <Pin className="h-3 w-3 text-muted-foreground flex-shrink-0" />
+                )}
+
+                {/* Icon */}
+                <MessageSquare className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{displayName}</p>
+                    <p className="text-xs text-muted-foreground">
+                        {formatRelativeTime(conversation.updatedAt)}
+                        {conversation.messageCount > 0 && (
+                            <span> &middot; {conversation.messageCount} msgs</span>
+                        )}
+                    </p>
+                </div>
+
+                {/* Actions dropdown */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={(e) => e.stopPropagation()}
+                            data-cy="conversation-menu"
+                        >
+                            <MoreVertical className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            onClick={(e: React.MouseEvent) => {
+                                e.stopPropagation()
+                                setNewName(conversation.name || displayName)
+                                setIsRenameDialogOpen(true)
+                            }}
+                            data-cy="rename-conversation"
+                        >
+                            <Pencil className="h-4 w-4 mr-2" />
+                            Rename
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            onClick={(e: React.MouseEvent) => {
+                                e.stopPropagation()
+                                handleTogglePin()
+                            }}
+                            data-cy="toggle-pin-conversation"
+                        >
+                            {conversation.isPinned ? (
+                                <>
+                                    <PinOff className="h-4 w-4 mr-2" />
+                                    Unpin
+                                </>
+                            ) : (
+                                <>
+                                    <Pin className="h-4 w-4 mr-2" />
+                                    Pin
+                                </>
+                            )}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onClick={(e: React.MouseEvent) => {
+                                e.stopPropagation()
+                                setIsDeleteDialogOpen(true)
+                            }}
+                            className="text-destructive"
+                            data-cy="delete-conversation"
+                        >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            {/* Rename Dialog */}
+            <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Rename conversation</DialogTitle>
+                        <DialogDescription>
+                            Enter a new name for this conversation.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Input
+                        value={newName}
+                        onChange={(e) => setNewName(e.target.value)}
+                        placeholder="Conversation name"
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                handleRename()
+                            }
+                        }}
+                        data-cy="rename-input"
+                    />
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setIsRenameDialogOpen(false)}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={handleRename}
+                            disabled={!newName.trim() || isLoading}
+                            data-cy="confirm-rename"
+                        >
+                            {isLoading ? 'Saving...' : 'Save'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Delete Confirmation Dialog */}
+            <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Delete conversation</DialogTitle>
+                        <DialogDescription>
+                            Are you sure you want to delete this conversation? This action cannot be undone.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setIsDeleteDialogOpen(false)}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={handleDelete}
+                            disabled={isLoading}
+                            data-cy="confirm-delete"
+                        >
+                            {isLoading ? 'Deleting...' : 'Delete'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}

package/components/ai-chat/ConversationSidebar.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { Plus, MessageSquarePlus, Loader2 } from 'lucide-react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { ScrollArea } from '@nextsparkjs/core/components/ui/scroll-area'
+import { ConversationItem } from './ConversationItem'
+import type { ConversationInfo } from '../../lib/hooks/useConversations'
+
+interface ConversationSidebarProps {
+    conversations: ConversationInfo[]
+    activeSessionId: string | null
+    onSelect: (sessionId: string) => void
+    onNew: () => Promise<void>
+    onRename: (sessionId: string, name: string) => Promise<void>
+    onDelete: (sessionId: string) => Promise<void>
+    onTogglePin: (sessionId: string) => Promise<void>
+    isLoading: boolean
+    isCreating: boolean
+    canCreateNew: boolean
+    conversationCount: number
+    maxConversations: number
+}
+
+export function ConversationSidebar({
+    conversations,
+    activeSessionId,
+    onSelect,
+    onNew,
+    onRename,
+    onDelete,
+    onTogglePin,
+    isLoading,
+    isCreating,
+    canCreateNew,
+    conversationCount,
+    maxConversations,
+}: ConversationSidebarProps) {
+    return (
+        <div
+            className="flex flex-col h-full border-r bg-muted/30"
+            data-cy="conversation-sidebar"
+        >
+            {/* Header */}
+            <div className="p-4 border-b">
+                <Button
+                    onClick={onNew}
+                    disabled={!canCreateNew || isCreating}
+                    className="w-full"
+                    data-cy="new-conversation-button"
+                >
+                    {isCreating ? (
+                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                        <Plus className="h-4 w-4 mr-2" />
+                    )}
+                    New conversation
+                </Button>
+
+                {/* Count indicator */}
+                <p className="text-xs text-muted-foreground text-center mt-2">
+                    {conversationCount} / {maxConversations} conversations
+                </p>
+            </div>
+
+            {/* Conversations List */}
+            <ScrollArea className="flex-1">
+                <div className="p-2 space-y-1">
+                    {isLoading ? (
+                        <div className="flex items-center justify-center py-8">
+                            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                        </div>
+                    ) : conversations.length === 0 ? (
+                        <div className="text-center py-8 px-4">
+                            <MessageSquarePlus className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+                            <p className="text-sm text-muted-foreground">
+                                No conversations yet.
+                            </p>
+                            <p className="text-xs text-muted-foreground mt-1">
+                                Start a new conversation to begin.
+                            </p>
+                        </div>
+                    ) : (
+                        conversations.map((conversation) => (
+                            <ConversationItem
+                                key={conversation.sessionId}
+                                conversation={conversation}
+                                isActive={conversation.sessionId === activeSessionId}
+                                onClick={() => onSelect(conversation.sessionId)}
+                                onRename={(name) => onRename(conversation.sessionId, name)}
+                                onDelete={() => onDelete(conversation.sessionId)}
+                                onTogglePin={() => onTogglePin(conversation.sessionId)}
+                            />
+                        ))
+                    )}
+                </div>
+            </ScrollArea>
+        </div>
+    )
+}

package/components/ai-chat/MarkdownRenderer.tsx

@@ -0,0 +1,15 @@
+import ReactMarkdown from 'react-markdown'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface MarkdownRendererProps {
+    content: string
+    className?: string
+}
+
+export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
+    return (
+        <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+            <ReactMarkdown>{content}</ReactMarkdown>
+        </div>
+    )
+}

package/components/ai-chat/Message.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { Message as MessageType } from '../../lib/hooks/useAiChat'
+import { MarkdownRenderer } from './MarkdownRenderer'
+import { User, Bot } from 'lucide-react'
+import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+
+interface MessageProps {
+    message: MessageType
+}
+
+export function Message({ message }: MessageProps) {
+    const isUser = message.role === 'user'
+
+    return (
+        <div
+            data-cy={createCyId('ai-chat', `message-${message.role}`)}
+            className={cn(
+                'flex w-full gap-3 p-4',
+                isUser ? 'flex-row-reverse' : 'flex-row'
+            )}
+        >
+            <div
+                className={cn(
+                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border',
+                    isUser ? 'bg-primary text-primary-foreground' : 'bg-muted'
+                )}
+            >
+                {isUser ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
+            </div>
+            <div
+                className={cn(
+                    'flex max-w-[80%] flex-col gap-1 rounded-lg px-4 py-2 text-sm',
+                    isUser
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted'
+                )}
+            >
+                <MarkdownRenderer content={message.content} />
+            </div>
+        </div>
+    )
+}

package/components/ai-chat/MessageInput.tsx

@@ -0,0 +1,49 @@
+import { KeyboardEvent } from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Textarea } from '@nextsparkjs/core/components/ui/textarea'
+import { Send } from 'lucide-react'
+import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+
+interface MessageInputProps {
+    value: string
+    onChange: (value: string) => void
+    onSend: () => void
+    isLoading: boolean
+}
+
+export function MessageInput({ value, onChange, onSend, isLoading }: MessageInputProps) {
+    const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            onSend()
+        }
+    }
+
+    return (
+        <div className="p-4 border-t bg-background">
+            <div className="flex gap-2">
+                <Textarea
+                    data-cy={createCyId('ai-chat', 'message-input')}
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Type a message..."
+                    className="min-h-[60px] resize-none"
+                    disabled={isLoading}
+                />
+                <Button
+                    data-cy={createCyId('ai-chat', 'send-btn')}
+                    size="icon"
+                    onClick={onSend}
+                    disabled={!value.trim() || isLoading}
+                    className="h-[60px] w-[60px]"
+                >
+                    <Send className="h-5 w-5" />
+                </Button>
+            </div>
+            <div className="text-xs text-muted-foreground mt-2 text-center">
+                Press Enter to send, Shift + Enter for new line
+            </div>
+        </div>
+    )
+}

package/components/ai-chat/MessageList.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react'
+import { ScrollArea } from '@nextsparkjs/core/components/ui/scroll-area'
+import { Message as MessageType } from '../../lib/hooks/useAiChat'
+import { Message } from './Message'
+import { TypingIndicator } from './TypingIndicator'
+import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+
+interface MessageListProps {
+    messages: MessageType[]
+    isLoading: boolean
+    error?: string | null
+}
+
+export function MessageList({ messages, isLoading, error }: MessageListProps) {
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollIntoView({ behavior: 'smooth' })
+        }
+    }, [messages, isLoading])
+
+    return (
+        <ScrollArea data-cy={createCyId('ai-chat', 'message-list')} className="flex-1 p-4">
+            <div className="flex flex-col gap-4">
+                {error && (
+                    <div
+                        data-cy={createCyId('ai-chat', 'error-message')}
+                        className="p-4 mb-2 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"
+                    >
+                        {error}
+                    </div>
+                )}
+                {messages.map((message) => (
+                    <Message key={message.id} message={message} />
+                ))}
+                {isLoading && (
+                    <div className="flex items-center gap-2 p-4">
+                        <TypingIndicator />
+                    </div>
+                )}
+                <div ref={scrollRef} />
+            </div>
+        </ScrollArea>
+    )
+}

package/components/ai-chat/TypingIndicator.tsx

@@ -0,0 +1,11 @@
+import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+
+export function TypingIndicator() {
+    return (
+        <div data-cy={createCyId('ai-chat', 'typing-indicator')} className="flex items-center gap-1 p-2">
+            <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.3s]" />
+            <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.15s]" />
+            <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce" />
+        </div>
+    )
+}