@luxfi/ui 7.4.15 → 8.1.0

package/src/ai-chat.tsx

@@ -0,0 +1,554 @@
+"use client"
+
+import { type GuiElement, variants } from '@hanzo/ui'
+import * as React from "react"
+import { format } from "date-fns"
+import {
+  Bot,
+  Copy,
+  MoreHorizontal,
+  Paperclip,
+  RotateCcw,
+  Send,
+  User,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { cn } from "./utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@hanzo/ui"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, css, sx } from '@hanzo/ui'
+import { ScrollArea } from "@hanzo/ui"
+import { Separator } from "./separator"
+import { Textarea } from "./textarea"
+
+// Types
+export interface ChatMessage {
+  id: string
+  content: string
+  role: "user" | "assistant" | "system"
+  timestamp: Date
+  attachments?: ChatAttachment[]
+  isGenerating?: boolean
+}
+
+export interface ChatAttachment {
+  id: string
+  name: string
+  size: number
+  type: string
+  url?: string
+  file?: File
+}
+
+export interface AIChatProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages?: ChatMessage[]
+  onSendMessage?: (content: string, attachments?: ChatAttachment[]) => void
+  onRegenerateMessage?: (messageId: string) => void
+  onCopyMessage?: (content: string) => void
+  isGenerating?: boolean
+  placeholder?: string
+  maxLength?: number
+  disabled?: boolean
+  showTimestamps?: boolean
+  showAvatars?: boolean
+  userAvatar?: string
+  assistantAvatar?: string
+  userName?: string
+  assistantName?: string
+  allowAttachments?: boolean
+  maxAttachments?: number
+  maxAttachmentSize?: number
+  acceptedFileTypes?: string[]
+}
+
+// Message variants
+const messageVariants = variants(
+  "group relative flex gap-3 rounded-lg p-4 transition-colors",
+  {
+    variants: {
+      role: {
+        user: "ml-8 bg-primary text-primary-foreground",
+        assistant: "mr-8 bg-muted",
+        system: "mx-4 bg-accent text-accent-foreground text-sm",
+      },
+    },
+    defaultVariants: {
+      role: "assistant",
+    },
+  }
+)
+
+// Typing indicator component
+const TypingIndicator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <Box
+    ref={ref as never}
+    className={cn("flex items-center gap-1 text-muted-foreground", className)}
+    {...props}
+  >
+    <Box className="flex gap-1">
+      <Box className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
+      <Box className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
+      <Box className="h-2 w-2 animate-bounce rounded-full bg-current" />
+    </Box>
+    <Box tag="span" className="text-sm">AI is typing...</Box>
+  </Box>
+))
+TypingIndicator.displayName = "TypingIndicator"
+
+// Message component
+const ChatMessageComponent = React.forwardRef<
+  HTMLDivElement,
+  {
+    message: ChatMessage
+    onCopy?: (content: string) => void | Promise<void>
+    onRegenerate?: (messageId: string) => void
+    showTimestamp?: boolean
+    showAvatar?: boolean
+    userAvatar?: string
+    assistantAvatar?: string
+    userName?: string
+    assistantName?: string
+  } & Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy">
+>(
+  (
+    {
+      message,
+      onCopy,
+      onRegenerate,
+      showTimestamp = true,
+      showAvatar = true,
+      userAvatar,
+      assistantAvatar,
+      userName,
+      assistantName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [isCopied, setIsCopied] = React.useState(false)
+
+    const handleCopy = async () => {
+      if (onCopy) {
+        onCopy(message.content)
+        setIsCopied(true)
+        setTimeout(() => setIsCopied(false), 2000)
+      }
+    }
+
+    const handleRegenerate = () => {
+      if (onRegenerate && message.role === "assistant") {
+        onRegenerate(message.id)
+      }
+    }
+
+    const formatContent = (content: string) => {
+      // Basic markdown rendering - in a real implementation, you'd use a proper markdown library
+      return content
+        .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+        .replace(/\*(.*?)\*/g, "<em>$1</em>")
+        .replace(/`(.*?)`/g, '<code class="bg-muted px-1 rounded">$1</code>')
+        .replace(
+          /```([\s\S]*?)```/g,
+          '<pre class="bg-muted p-3 rounded-lg overflow-x-auto"><code>$1</code></pre>'
+        )
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn(messageVariants({ role: message.role }), className)}
+        {...props}
+      >
+        {showAvatar && message.role !== "system" && (
+          <Avatar {...sx('h-8 w-8 shrink-0')}>
+            <AvatarImage
+              src={message.role === "user" ? userAvatar : assistantAvatar}
+              alt={message.role === "user" ? userName : assistantName}
+            />
+            <AvatarFallback>
+              {message.role === "user" ? (
+                <User style={css('h-4 w-4')} />
+              ) : (
+                <Bot style={css('h-4 w-4')} />
+              )}
+            </AvatarFallback>
+          </Avatar>
+        )}
+
+        <Box className="flex-1 space-y-2">
+          <Box className="flex items-center justify-between">
+            <Box className="flex items-center gap-2">
+              {showTimestamp && (
+                <Box tag="time" className="text-xs text-muted-foreground">
+                  {format(message.timestamp, "HH:mm")}
+                </Box>
+              )}
+              {message.role !== "system" && (
+                <Box tag="span" className="text-xs font-medium">
+                  {message.role === "user"
+                    ? userName || "You"
+                    : assistantName || "AI Assistant"}
+                </Box>
+              )}
+            </Box>
+
+            {message.role !== "system" && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    {...sx('h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100')}
+                  >
+                    <MoreHorizontal style={css('h-3 w-3')} />
+                    <Box tag="span" className="sr-only">Message actions</Box>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={handleCopy}>
+                    <Copy style={css('mr-2 h-3 w-3')} />
+                    {isCopied ? "Copied!" : "Copy"}
+                  </DropdownMenuItem>
+                  {message.role === "assistant" && onRegenerate && (
+                    <DropdownMenuItem onClick={handleRegenerate}>
+                      <RotateCcw style={css('mr-2 h-3 w-3')} />
+                      Regenerate
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </Box>
+
+          <Box
+            className="prose prose-sm max-w-none dark:prose-invert"
+            dangerouslySetInnerHTML={{ __html: formatContent(message.content) }}
+          />
+
+          {message.attachments && message.attachments.length > 0 && (
+            <Box className="flex flex-wrap gap-2">
+              {message.attachments.map((attachment) => (
+                <Badge
+                  key={attachment.id}
+                  colorPalette="gray"
+                  {...sx('gap-1')}
+                >
+                  <Paperclip style={css('h-3 w-3')} />
+                  {attachment.name}
+                </Badge>
+              ))}
+            </Box>
+          )}
+
+          {message.isGenerating && <TypingIndicator className="mt-2" />}
+        </Box>
+      </Box>
+    )
+  }
+)
+ChatMessageComponent.displayName = "ChatMessage"
+
+// Attachment preview component
+const AttachmentPreview = React.forwardRef<
+  HTMLDivElement,
+  {
+    attachment: ChatAttachment
+    onRemove?: (id: string) => void
+  } & React.HTMLAttributes<HTMLDivElement>
+>(({ attachment, onRemove, className, ...props }, ref) => (
+  <Box
+    ref={ref as never}
+    className={cn(
+      "flex items-center gap-2 rounded-lg border p-2 text-sm",
+      className
+    )}
+    {...props}
+  >
+    <Paperclip style={css('h-4 w-4')} />
+    <Box className="flex-1 truncate">
+      <Box className="font-medium">{attachment.name}</Box>
+      <Box className="text-xs text-muted-foreground">
+        {(attachment.size / 1024).toFixed(1)} KB
+      </Box>
+    </Box>
+    {onRemove && (
+      <Button
+        variant="ghost"
+        size="icon"
+        {...sx('h-6 w-6')}
+        onClick={() => onRemove(attachment.id)}
+      >
+        <Box tag="span" className="sr-only">Remove attachment</Box>×
+      </Button>
+    )}
+  </Box>
+))
+AttachmentPreview.displayName = "AttachmentPreview"
+
+// Main AI Chat component
+const AIChat = React.forwardRef<HTMLDivElement, AIChatProps>(
+  (
+    {
+      messages = [],
+      onSendMessage,
+      onRegenerateMessage,
+      onCopyMessage,
+      isGenerating = false,
+      placeholder = "Type your message...",
+      maxLength = 4000,
+      disabled = false,
+      showTimestamps = true,
+      showAvatars = true,
+      userAvatar,
+      assistantAvatar,
+      userName,
+      assistantName,
+      allowAttachments = true,
+      maxAttachments = 5,
+      maxAttachmentSize = 10 * 1024 * 1024, // 10MB
+      acceptedFileTypes = ["image/*", ".pdf", ".txt", ".doc", ".docx"],
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [input, setInput] = React.useState("")
+    const [attachments, setAttachments] = React.useState<ChatAttachment[]>([])
+    const scrollAreaRef = React.useRef<HTMLDivElement | null>(null)
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+    const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+    // Auto-scroll to bottom when new messages arrive
+    React.useEffect(() => {
+      if (scrollAreaRef.current) {
+        const scrollElement = scrollAreaRef.current.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        )
+        if (scrollElement) {
+          scrollElement.scrollTop = scrollElement.scrollHeight
+        }
+      }
+    }, [messages])
+
+    // Handle file selection
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = event.target.files
+      if (!files || !allowAttachments) return
+
+      const newAttachments: ChatAttachment[] = []
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+
+        if (attachments.length + newAttachments.length >= maxAttachments) {
+          break
+        }
+
+        if (file.size > maxAttachmentSize) {
+          continue
+        }
+
+        newAttachments.push({
+          id: `${Date.now()}-${i}`,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          file,
+        })
+      }
+
+      setAttachments((prev) => [...prev, ...newAttachments])
+
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    }
+
+    // Handle sending message
+    const handleSend = () => {
+      if (!input.trim() && attachments.length === 0) return
+      if (disabled || isGenerating) return
+
+      onSendMessage?.(input, attachments.length > 0 ? attachments : undefined)
+      setInput("")
+      setAttachments([])
+
+      // Focus back to textarea
+      setTimeout(() => {
+        textareaRef.current?.focus()
+      }, 0)
+    }
+
+    // Handle key press
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault()
+        handleSend()
+      }
+    }
+
+    // Remove attachment
+    const removeAttachment = (id: string) => {
+      setAttachments((prev) => prev.filter((att) => att.id !== id))
+    }
+
+    // Handle copy
+    const handleCopy = async (content: string) => {
+      try {
+        await navigator.clipboard.writeText(content)
+        onCopyMessage?.(content)
+        toast.success("Message copied to clipboard")
+      } catch (err) {
+        console.error("Failed to copy message:", err)
+        toast.error("Failed to copy message")
+      }
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn(
+          "flex h-[600px] w-full flex-col overflow-hidden rounded-lg border bg-background",
+          className
+        )}
+        {...props}
+      >
+        {/* Messages area */}
+        <ScrollArea ref={scrollAreaRef as never} {...sx('flex-1 p-4')}>
+          <Box className="space-y-4">
+            {messages.map((message) => (
+              <ChatMessageComponent
+                key={message.id}
+                message={message}
+                onCopy={handleCopy}
+                onRegenerate={onRegenerateMessage}
+                showTimestamp={showTimestamps}
+                showAvatar={showAvatars}
+                userAvatar={userAvatar}
+                assistantAvatar={assistantAvatar}
+                userName={userName}
+                assistantName={assistantName}
+              />
+            ))}
+            {isGenerating && (
+              <Box className="mr-8 flex gap-3 rounded-lg bg-muted p-4">
+                {showAvatars && (
+                  <Avatar {...sx('h-8 w-8 shrink-0')}>
+                    <AvatarImage src={assistantAvatar} alt={assistantName} />
+                    <AvatarFallback>
+                      <Bot style={css('h-4 w-4')} />
+                    </AvatarFallback>
+                  </Avatar>
+                )}
+                <TypingIndicator />
+              </Box>
+            )}
+          </Box>
+        </ScrollArea>
+
+        <Separator />
+
+        {/* Input area */}
+        <Box className="p-4">
+          {/* Attachments preview */}
+          {attachments.length > 0 && (
+            <Box className="mb-3 space-y-2">
+              {attachments.map((attachment) => (
+                <AttachmentPreview
+                  key={attachment.id}
+                  attachment={attachment}
+                  onRemove={removeAttachment}
+                />
+              ))}
+            </Box>
+          )}
+
+          <Box className="flex gap-2">
+            <Box className="flex-1">
+              <Textarea
+                ref={textareaRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder={placeholder}
+                disabled={disabled || isGenerating}
+                maxLength={maxLength}
+                {...sx('min-h-[60px] resize-none')}
+                rows={3}
+              />
+            </Box>
+            <Box className="flex flex-col gap-2">
+              {allowAttachments && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={
+                    disabled ||
+                    isGenerating ||
+                    attachments.length >= maxAttachments
+                  }
+                >
+                  <Paperclip style={css('h-4 w-4')} />
+                  <Box tag="span" className="sr-only">Attach file</Box>
+                </Button>
+              )}
+              <Button
+                onClick={handleSend}
+                disabled={
+                  disabled ||
+                  isGenerating ||
+                  (!input.trim() && attachments.length === 0)
+                }
+                size="icon"
+              >
+                <Send style={css('h-4 w-4')} />
+                <Box tag="span" className="sr-only">Send message</Box>
+              </Button>
+            </Box>
+          </Box>
+
+          {/* Character count */}
+          {maxLength && (
+            <Box className="mt-2 text-right text-xs text-muted-foreground">
+              {input.length}/{maxLength}
+            </Box>
+          )}
+        </Box>
+
+        {/* Hidden file input */}
+        {allowAttachments && (
+          <Box tag="input"
+            ref={fileInputRef as never}
+            type="file"
+            multiple
+            accept={acceptedFileTypes.join(",")}
+            className="hidden"
+            onChange={handleFileSelect}
+          />
+        )}
+      </Box>
+    )
+  }
+)
+AIChat.displayName = "AIChat"
+
+export {
+  AIChat,
+  ChatMessageComponent as ChatMessage,
+  TypingIndicator,
+  AttachmentPreview,
+  type ChatMessage as ChatMessageType,
+}