@object-ui/components 0.3.0

package/src/ui/chatbot.tsx

@@ -0,0 +1,240 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { ScrollArea } from "./scroll-area"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import { Send } from "lucide-react"
+
+// Message type definition
+export interface ChatMessage {
+  id: string
+  role: "user" | "assistant" | "system"
+  content: string
+  timestamp?: string
+  avatar?: string
+  avatarFallback?: string
+}
+
+// Chatbot container props
+export interface ChatbotProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages?: ChatMessage[]
+  placeholder?: string
+  onSendMessage?: (message: string) => void
+  disabled?: boolean
+  showTimestamp?: boolean
+  userAvatarUrl?: string
+  userAvatarFallback?: string
+  assistantAvatarUrl?: string
+  assistantAvatarFallback?: string
+  maxHeight?: string
+}
+
+// Chatbot container component
+const Chatbot = React.forwardRef<HTMLDivElement, ChatbotProps>(
+  (
+    {
+      className,
+      messages = [],
+      placeholder = "Type your message...",
+      onSendMessage,
+      disabled = false,
+      showTimestamp = false,
+      userAvatarUrl,
+      userAvatarFallback = "You",
+      assistantAvatarUrl,
+      assistantAvatarFallback = "AI",
+      maxHeight = "500px",
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState("")
+    const scrollRef = React.useRef<HTMLDivElement>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    // Auto-scroll to bottom when new messages arrive
+    React.useEffect(() => {
+      if (scrollRef.current) {
+        const scrollElement = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]')
+        if (scrollElement) {
+          scrollElement.scrollTop = scrollElement.scrollHeight
+        }
+      }
+    }, [messages])
+
+    const handleSend = () => {
+      if (inputValue.trim() && onSendMessage) {
+        onSendMessage(inputValue.trim())
+        setInputValue("")
+        inputRef.current?.focus()
+      }
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault()
+        handleSend()
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col border rounded-lg bg-background overflow-hidden",
+          className
+        )}
+        style={{ maxHeight }}
+        {...props}
+      >
+        {/* Messages area */}
+        <ScrollArea ref={scrollRef} className="flex-1 p-4">
+          <div className="space-y-4">
+            {messages.length === 0 ? (
+              <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
+                No messages yet. Start a conversation!
+              </div>
+            ) : (
+              messages.map((message) => (
+                <ChatMessageItem
+                  key={message.id}
+                  message={message}
+                  showTimestamp={showTimestamp}
+                  userAvatarUrl={userAvatarUrl}
+                  userAvatarFallback={userAvatarFallback}
+                  assistantAvatarUrl={assistantAvatarUrl}
+                  assistantAvatarFallback={assistantAvatarFallback}
+                />
+              ))
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Input area */}
+        <div className="border-t p-4">
+          <div className="flex gap-2">
+            <Input
+              ref={inputRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              disabled={disabled}
+              className="flex-1"
+            />
+            <Button
+              onClick={handleSend}
+              disabled={disabled || !inputValue.trim()}
+              size="icon"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Chatbot.displayName = "Chatbot"
+
+// Individual message component
+export interface ChatMessageProps {
+  message: ChatMessage
+  showTimestamp?: boolean
+  userAvatarUrl?: string
+  userAvatarFallback?: string
+  assistantAvatarUrl?: string
+  assistantAvatarFallback?: string
+}
+
+const ChatMessageItem: React.FC<ChatMessageProps> = ({
+  message,
+  showTimestamp,
+  userAvatarUrl,
+  userAvatarFallback,
+  assistantAvatarUrl,
+  assistantAvatarFallback,
+}) => {
+  const isUser = message.role === "user"
+  const isSystem = message.role === "system"
+
+  if (isSystem) {
+    return (
+      <div className="flex justify-center">
+        <div className="text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full">
+          {message.content}
+        </div>
+      </div>
+    )
+  }
+
+  const avatar = isUser 
+    ? (message.avatar || userAvatarUrl)
+    : (message.avatar || assistantAvatarUrl)
+  
+  const avatarFallback = isUser
+    ? (message.avatarFallback || userAvatarFallback)
+    : (message.avatarFallback || assistantAvatarFallback)
+
+  return (
+    <div
+      className={cn(
+        "flex gap-3",
+        isUser ? "flex-row-reverse" : "flex-row"
+      )}
+    >
+      <Avatar className="h-8 w-8">
+        <AvatarImage src={avatar} />
+        <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
+      </Avatar>
+
+      <div className={cn("flex flex-col gap-1", isUser ? "items-end" : "items-start")}>
+        <div
+          className={cn(
+            "rounded-lg px-4 py-2 max-w-[70%] break-words",
+            isUser
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted"
+          )}
+        >
+          <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+        </div>
+        {showTimestamp && message.timestamp && (
+          <span className="text-xs text-muted-foreground">
+            {message.timestamp}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Typing indicator component
+export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatarSrc?: string
+  avatarFallback?: string
+}
+
+const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
+  ({ className, avatarSrc, avatarFallback = "AI", ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex gap-3", className)} {...props}>
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={avatarSrc} />
+          <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
+        </Avatar>
+        <div className="flex items-center bg-muted rounded-lg px-4 py-2">
+          <div className="flex gap-1">
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+TypingIndicator.displayName = "TypingIndicator"
+
+export { Chatbot, TypingIndicator }

package/src/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/ui/command.tsx

@@ -0,0 +1,182 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}