@djangocfg/ui-nextjs 2.1.90 → 2.1.92

package/src/components/markdown/MarkdownMessage.tsx

@@ -1,340 +0,0 @@
-'use client';
-
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-import { CopyButton } from '@djangocfg/ui-core/components';
-
-import { useResolvedTheme } from '../../hooks/useResolvedTheme';
-import Mermaid from '../../tools/Mermaid';
-import PrettyCode from '../../tools/PrettyCode';
-
-import type { Components } from 'react-markdown';
-
-// Helper function to extract text content from React children
-const extractTextFromChildren = (children: React.ReactNode): string => {
-  if (typeof children === 'string') {
-    return children;
-  }
-
-  if (typeof children === 'number') {
-    return String(children);
-  }
-
-  if (React.isValidElement(children)) {
-    const props = children.props as { children?: React.ReactNode };
-    return extractTextFromChildren(props.children);
-  }
-
-  if (Array.isArray(children)) {
-    return children.map(extractTextFromChildren).join('');
-  }
-
-  return '';
-};
-
-export interface MarkdownMessageProps {
-  /** Markdown content to render */
-  content: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether the message is from the user (affects styling) */
-  isUser?: boolean;
-  /** Use compact size (text-xs instead of text-sm) */
-  isCompact?: boolean;
-}
-
-// Code block component with copy functionality
-interface CodeBlockProps {
-  code: string;
-  language: string;
-  isUser: boolean;
-  isCompact?: boolean;
-}
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
-  const theme = useResolvedTheme();
-
-  return (
-    <div className="relative group my-3">
-      {/* Copy button */}
-      <CopyButton
-        value={code}
-        variant="ghost"
-        className={`
-          absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-          h-8 w-8
-          ${isUser
-            ? 'hover:bg-white/20 text-white'
-            : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
-          }
-        `}
-        title="Copy code"
-      />
-
-      {/* Code content */}
-      <PrettyCode
-        data={code}
-        language={language}
-        className={isCompact ? 'text-xs' : 'text-sm'}
-        customBg={isUser ? "bg-white/10" : "bg-muted dark:bg-muted"}
-        mode={theme}
-        isCompact={isCompact}
-      />
-    </div>
-  );
-};
-
-// Custom components for markdown in chat
-// Base size: text-sm (14px) for normal, text-xs (12px) for compact
-const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean = false): Components => {
-  // Text size classes based on compact mode
-  const textSize = isCompact ? 'text-xs' : 'text-sm';
-  const headingBase = isCompact ? 'text-sm' : 'text-base';
-  const headingSm = isCompact ? 'text-xs' : 'text-sm';
-
-  return {
-  // Headings - scaled for chat context
-  h1: ({ children }) => (
-    <h1 className={`${headingBase} font-bold mb-2 mt-3 first:mt-0`}>{children}</h1>
-  ),
-  h2: ({ children }) => (
-    <h2 className={`${headingSm} font-bold mb-2 mt-3 first:mt-0`}>{children}</h2>
-  ),
-  h3: ({ children }) => (
-    <h3 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h3>
-  ),
-  h4: ({ children }) => (
-    <h4 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h4>
-  ),
-  h5: ({ children }) => (
-    <h5 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h5>
-  ),
-  h6: ({ children }) => (
-    <h6 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h6>
-  ),
-
-  // Paragraphs - compact spacing for chat
-  p: ({ children }) => (
-    <p className={`${textSize} mb-2 last:mb-0 leading-relaxed break-words`}>{children}</p>
-  ),
-
-  // Lists - compact
-  ul: ({ children }) => (
-    <ul className={`list-disc list-inside mb-2 space-y-1 ${textSize}`}>{children}</ul>
-  ),
-  ol: ({ children }) => (
-    <ol className={`list-decimal list-inside mb-2 space-y-1 ${textSize}`}>{children}</ol>
-  ),
-  li: ({ children }) => (
-    <li className="break-words">{children}</li>
-  ),
-
-  // Links - appropriate for chat context
-  a: ({ href, children }) => (
-    <a
-      href={href}
-      className={`${textSize} text-primary underline hover:text-primary/80 transition-colors break-all`}
-      target={href?.startsWith('http') ? '_blank' : undefined}
-      rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
-    >
-      {children}
-    </a>
-  ),
-
-  // Code blocks - using CodeBlock component with copy functionality
-  pre: ({ children }) => {
-    // Extract code content and language
-    let codeContent = '';
-    let language = 'plaintext';
-
-    if (React.isValidElement(children)) {
-      const child = children;
-
-      if (child.type === 'code' || (typeof child.type === 'function' && child.type.name === 'code')) {
-        const codeProps = child.props as { className?: string; children?: React.ReactNode };
-        const rawClassName = codeProps.className;
-        language = rawClassName?.replace(/language-/, '').trim() || 'plaintext';
-        codeContent = extractTextFromChildren(codeProps.children).trim();
-      } else {
-        codeContent = extractTextFromChildren(children).trim();
-      }
-    } else {
-      codeContent = extractTextFromChildren(children).trim();
-    }
-
-    // If still no content, show placeholder
-    if (!codeContent) {
-      return (
-        <div className="my-3 p-3 bg-muted rounded text-sm text-muted-foreground">
-          No content available
-        </div>
-      );
-    }
-
-    // Handle Mermaid diagrams separately
-    if (language === 'mermaid') {
-      return (
-        <div className="my-3 max-w-full overflow-x-auto">
-          <Mermaid chart={codeContent} className="max-w-[600px] mx-auto" isCompact={isCompact} />
-        </div>
-      );
-    }
-
-    // Try to use CodeBlock component, fallback to simple pre if it fails
-    try {
-      return <CodeBlock code={codeContent} language={language} isUser={isUser} isCompact={isCompact} />;
-    } catch (error) {
-      // Fallback to simple pre element with copy button
-      console.warn('CodeBlock failed, using fallback:', error);
-      return (
-        <div className="relative group my-3">
-          <CopyButton
-            value={codeContent}
-            variant="ghost"
-            className={`
-              absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-              h-8 w-8
-              ${isUser
-                ? 'hover:bg-white/20 text-white'
-                : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
-              }
-            `}
-            title="Copy code"
-          />
-          <pre className={`
-            p-3 rounded text-xs font-mono overflow-x-auto
-            ${isUser
-              ? 'bg-white/10 text-white'
-              : 'bg-muted text-foreground'
-            }
-          `}>
-            <code>{codeContent}</code>
-          </pre>
-        </div>
-      );
-    }
-  },
-
-  // Inline code
-  code: ({ children, className }) => {
-    // If it's inside a pre tag, let pre handle it
-    if (className?.includes('language-')) {
-      return <code className={className}>{children}</code>;
-    }
-
-    // Extract text content safely
-    const codeContent = extractTextFromChildren(children);
-
-    // Inline code styling
-    return (
-      <code className="px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all">
-        {codeContent}
-      </code>
-    );
-  },
-
-  // Blockquotes
-  blockquote: ({ children }) => (
-    <blockquote className={`${textSize} border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words`}>
-      {children}
-    </blockquote>
-  ),
-
-  // Tables - compact for chat
-  table: ({ children }) => (
-    <div className="overflow-x-auto my-3">
-      <table className={`min-w-full ${textSize} border-collapse`}>
-        {children}
-      </table>
-    </div>
-  ),
-  thead: ({ children }) => (
-    <thead className="bg-muted/50">
-      {children}
-    </thead>
-  ),
-  tbody: ({ children }) => (
-    <tbody>{children}</tbody>
-  ),
-  tr: ({ children }) => (
-    <tr className="border-b border-border/50">{children}</tr>
-  ),
-  th: ({ children }) => (
-    <th className="px-2 py-1 text-left font-medium break-words">{children}</th>
-  ),
-  td: ({ children }) => (
-    <td className="px-2 py-1 break-words">{children}</td>
-  ),
-
-  // Horizontal rule
-  hr: () => (
-    <hr className="my-3 border-0 h-px bg-border" />
-  ),
-
-  // Strong and emphasis
-  strong: ({ children }) => (
-    <strong className="font-semibold">{children}</strong>
-  ),
-  em: ({ children }) => (
-    <em className="italic">{children}</em>
-  ),
-};};
-
-/**
- * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
- *
- * Features:
- * - GitHub Flavored Markdown (GFM) support
- * - Syntax highlighted code blocks with copy button
- * - Mermaid diagram rendering
- * - Tables, lists, blockquotes
- * - User/assistant styling modes
- *
- * @example
- * ```tsx
- * <MarkdownMessage content="# Hello\n\nThis is **bold** text." />
- *
- * // User message styling
- * <MarkdownMessage content="Some content" isUser />
- * ```
- */
-export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
-  content,
-  className = "",
-  isUser = false,
-  isCompact = false,
-}) => {
-  const components = React.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
-
-  const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
-  const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
-
-  return (
-    <div
-      className={`
-        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
-        ${isUser ? 'prose-invert' : 'dark:prose-invert'}
-        ${className}
-      `}
-      style={{
-        // Inherit colors from parent - fixes issues with external CSS variables
-        '--tw-prose-body': 'inherit',
-        '--tw-prose-headings': 'inherit',
-        '--tw-prose-bold': 'inherit',
-        '--tw-prose-links': 'inherit',
-        color: 'inherit',
-      } as React.CSSProperties}
-    >
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={components}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  );
-};
-
-export default MarkdownMessage;

package/src/components/markdown/index.ts

@@ -1,5 +0,0 @@
-/**
- * Markdown Components
- */
-
-export { MarkdownMessage, type MarkdownMessageProps } from './MarkdownMessage';

package/src/components/menubar.tsx

@@ -1,275 +0,0 @@
-"use client"
-
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import Link from 'next/link';
-import * as React from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-150 min-w-32 overflow-hidden rounded-md border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-150 min-w-48 overflow-hidden rounded-md border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
-    href?: string
-    key?: React.Key
-  }
->(({ className, inset, href, children, ...props }, ref) => {
-  const classes = cn(
-    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    inset && "pl-8",
-    className
-  )
-
-  if (href) {
-    return (
-      <MenubarPrimitive.Item asChild ref={ref} {...props}>
-        <Link href={href} className={classes}>
-          {children}
-        </Link>
-      </MenubarPrimitive.Item>
-    )
-  }
-
-  return (
-    <MenubarPrimitive.Item
-      ref={ref}
-      className={classes}
-      {...props}
-    >
-      {children}
-    </MenubarPrimitive.Item>
-  )
-})
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & { key?: React.Key }
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & { key?: React.Key }
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}