"use client"; import { Copy, Edit, MoreVertical, RotateCcw } from "lucide-react"; import { useTheme } from "next-themes"; import React, { useEffect, useRef, useState } from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { type BundledLanguage, codeToHtml } from "shiki"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; const STREAMING_CONFIG = { CHAR_DELAY: 20, BATCH_SIZE: 3, } as const; const COPY_FEEDBACK_DURATION = 2000; interface AIMessageProps { content: string; isStreaming?: boolean; onRegenerate?: () => void; onEdit?: () => void; className?: string; skipCodeHighlighting?: boolean; } function useStreamingText(fullText: string, isStreaming: boolean): string { const [displayedText, setDisplayedText] = useState(() => isStreaming ? "" : fullText ); const timeoutRef = useRef(null); useEffect(() => { let initialTimeoutId: NodeJS.Timeout | null = null; if (!isStreaming) { initialTimeoutId = setTimeout(() => { setDisplayedText(fullText); }, 0); return () => { if (initialTimeoutId) { clearTimeout(initialTimeoutId); } }; } if (typeof window !== "undefined") { const prefersReducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; if (prefersReducedMotion) { initialTimeoutId = setTimeout(() => { setDisplayedText(fullText); }, 0); return () => { if (initialTimeoutId) { clearTimeout(initialTimeoutId); } }; } } initialTimeoutId = setTimeout(() => { setDisplayedText(""); }, 0); let currentIndex = 0; const streamNext = () => { if (currentIndex >= fullText.length) { return; } const nextIndex = Math.min( currentIndex + STREAMING_CONFIG.BATCH_SIZE, fullText.length ); setDisplayedText(fullText.slice(0, nextIndex)); currentIndex = nextIndex; timeoutRef.current = setTimeout(streamNext, STREAMING_CONFIG.CHAR_DELAY); }; streamNext(); return () => { if (initialTimeoutId) { clearTimeout(initialTimeoutId); } if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, [fullText, isStreaming]); return displayedText; } interface MessageActionsProps { onCopy: () => void; onRegenerate?: () => void; onEdit?: () => void; copied: boolean; } function MessageActions({ onCopy, onRegenerate, onEdit, copied, }: MessageActionsProps) { const hasActions = onRegenerate || onEdit; if (!hasActions) { return ( ); } return ( {copied ? "Copied!" : "Copy"} {onRegenerate && ( <> Regenerate )} {onEdit && ( <> Edit )} ); } interface HighlightedCodeBlockProps { code: string; language: string; filename?: string; skipHighlighting?: boolean; } function HighlightedCodeBlock({ code, language, filename, skipHighlighting = false, }: HighlightedCodeBlockProps) { const { theme: websiteTheme } = useTheme(); const [highlightedCode, setHighlightedCode] = useState(""); const [loading, setLoading] = useState(true); const theme = websiteTheme === "dark" ? "github-dark" : "github-light"; const lang = (language || "text") as BundledLanguage; useEffect(() => { if (skipHighlighting) { setHighlightedCode(""); setLoading(false); return; } let mounted = true; setLoading(true); const highlightCode = async () => { try { const html = await codeToHtml(code, { lang, theme, }); if (mounted) { setHighlightedCode(html); setLoading(false); } } catch { if (mounted) { setHighlightedCode(""); setLoading(false); } } }; highlightCode(); return () => { mounted = false; }; }, [code, lang, theme, skipHighlighting]); if (skipHighlighting) { return (

{filename && (

{filename}

)}

          
            {code}

); } if (loading) { return (

{filename && (

{filename}

)}

); } if (!highlightedCode) { return (

{filename && (

{filename}

)}

          {code}

); } function parseInlineStyle(styleText: string): React.CSSProperties { const styleObject: React.CSSProperties = {}; for (const declaration of styleText.split(";")) { const [prop, value] = declaration.split(":").map((s) => s.trim()); if (prop && value) { const camelProp = prop.replace(/-([a-z])/g, (_m, c) => c.toUpperCase()); (styleObject as Record)[camelProp] = value; } } return styleObject; } function domNodeToReact( node: ChildNode, key?: string | number ): React.ReactNode { if (node.nodeType === Node.TEXT_NODE) { return node.textContent; } if (node.nodeType !== Node.ELEMENT_NODE) { return null; } const el = node as HTMLElement; const tagName = el.tagName.toLowerCase(); const isCodeBlock = tagName === "pre" || tagName === "code"; const props: Record = { key }; if (el.className) { props.className = isCodeBlock ? `${el.className} whitespace-pre-wrap wrap-break-word`.trim() : el.className.trim(); } else if (isCodeBlock) { props.className = "whitespace-pre-wrap wrap-break-word"; } const styleAttr = el.getAttribute("style"); if (styleAttr) { props.style = parseInlineStyle(styleAttr); } for (const attr of el.attributes) { if (attr.name.startsWith("data-")) { props[attr.name] = attr.value; } } const children = Array.from(el.childNodes).map((child, i) => domNodeToReact(child, i) ); return React.createElement(tagName, props, ...children); } const parser = new DOMParser(); const doc = parser.parseFromString(highlightedCode, "text/html"); const pre = doc.body.querySelector("pre"); if (!pre) { return (

{filename && (

{filename}

)}

          {code}

); } return (

{filename && (

{filename}

)}

{domNodeToReact(pre)}

); } interface MarkdownContentProps { content: string; skipCodeHighlighting?: boolean; } function MarkdownContent({ content, skipCodeHighlighting = false, }: MarkdownContentProps) { return (

); } return (


                {children}

); }, a({ href, children, ...props }) { return ( {children} ); }, }} remarkPlugins={[remarkGfm]} > {content}

); } export default function AIMessage({ content, isStreaming = false, onRegenerate, onEdit, className, skipCodeHighlighting = false, }: AIMessageProps) { const [copied, setCopied] = useState(false); const displayedContent = useStreamingText(content, isStreaming); const handleCopy = async () => { try { await navigator.clipboard.writeText(content); setCopied(true); setTimeout(() => setCopied(false), COPY_FEEDBACK_DURATION); } catch {} }; return (

{isStreaming && (

); }

Welcome to HextaUI

Features

Example Usage

Example Usage