@djangocfg/ui-tools 2.1.94 → 2.1.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.94",
+  "version": "2.1.96",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -55,7 +55,7 @@
     "consola": "^3.4.2"
   },
   "dependencies": {
-    "@djangocfg/ui-core": "^2.1.94",
+    "@djangocfg/ui-core": "^2.1.96",
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
@@ -73,7 +73,7 @@
     "wavesurfer.js": "^7.12.1"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.94",
+    "@djangocfg/typescript-config": "^2.1.96",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/markdown/MarkdownMessage.tsx

@@ -9,6 +9,7 @@ import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 
 import Mermaid from '../../tools/Mermaid';
 import PrettyCode from '../../tools/PrettyCode';
+import { useCollapsibleContent } from './useCollapsibleContent';
 
 import type { Components } from 'react-markdown';
 
@@ -43,6 +44,43 @@ export interface MarkdownMessageProps {
   isUser?: boolean;
   /** Use compact size (text-xs instead of text-sm) */
   isCompact?: boolean;
+  /**
+   * Enable collapsible "Read more..." functionality
+   * When enabled, long content will be truncated with a toggle button
+   * @default false
+   */
+  collapsible?: boolean;
+  /**
+   * Maximum character length before showing "Read more..."
+   * Only applies when collapsible is true
+   * If both maxLength and maxLines are set, the stricter limit applies
+   */
+  maxLength?: number;
+  /**
+   * Maximum number of lines before showing "Read more..."
+   * Only applies when collapsible is true
+   * If both maxLength and maxLines are set, the stricter limit applies
+   */
+  maxLines?: number;
+  /**
+   * Custom "Read more" button text
+   * @default "Read more..."
+   */
+  readMoreLabel?: string;
+  /**
+   * Custom "Show less" button text
+   * @default "Show less"
+   */
+  showLessLabel?: string;
+  /**
+   * Start expanded (only applies when collapsible is true)
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Callback when collapsed state changes
+   */
+  onCollapseChange?: (isCollapsed: boolean) => void;
 }
 
 // Code block component with copy functionality
@@ -311,6 +349,82 @@ const hasMarkdownSyntax = (text: string): boolean => {
   return markdownPatterns.some(pattern => pattern.test(text));
 };
 
+/**
+ * Read more / Show less toggle button
+ */
+interface CollapseToggleProps {
+  isCollapsed: boolean;
+  onClick: () => void;
+  readMoreLabel: string;
+  showLessLabel: string;
+  isUser: boolean;
+  isCompact: boolean;
+}
+
+const CollapseToggle: React.FC<CollapseToggleProps> = ({
+  isCollapsed,
+  onClick,
+  readMoreLabel,
+  showLessLabel,
+  isUser,
+  isCompact,
+}) => {
+  const textSize = isCompact ? 'text-xs' : 'text-sm';
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        ${textSize} font-medium cursor-pointer
+        transition-colors duration-200
+        ${isUser
+          ? 'text-white/80 hover:text-white'
+          : 'text-primary hover:text-primary/80'
+        }
+        inline-flex items-center gap-1
+        mt-1
+      `}
+    >
+      {isCollapsed ? (
+        <>
+          {readMoreLabel}
+          <svg
+            className="w-3 h-3"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </>
+      ) : (
+        <>
+          {showLessLabel}
+          <svg
+            className="w-3 h-3"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 15l7-7 7 7"
+            />
+          </svg>
+        </>
+      )}
+    </button>
+  );
+};
+
 /**
  * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
  *
@@ -321,6 +435,7 @@ const hasMarkdownSyntax = (text: string): boolean => {
  * - Tables, lists, blockquotes
  * - User/assistant styling modes
  * - Plain text optimization (skips ReactMarkdown for simple text)
+ * - Collapsible "Read more..." for long messages
  *
  * @example
  * ```tsx
@@ -328,6 +443,14 @@ const hasMarkdownSyntax = (text: string): boolean => {
  *
  * // User message styling
  * <MarkdownMessage content="Some content" isUser />
+ *
+ * // Collapsible long content (for chat apps)
+ * <MarkdownMessage
+ *   content={longText}
+ *   collapsible
+ *   maxLength={300}
+ *   maxLines={5}
+ * />
  * ```
  */
 export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
@@ -335,48 +458,107 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   className = "",
   isUser = false,
   isCompact = false,
+  collapsible = false,
+  maxLength,
+  maxLines,
+  readMoreLabel = "Read more...",
+  showLessLabel = "Show less",
+  defaultExpanded = false,
+  onCollapseChange,
 }) => {
   // Trim content to remove leading/trailing whitespace and empty lines
   const trimmedContent = content.trim();
 
+  // Collapsible content logic - use defaults when collapsible is enabled
+  const collapsibleOptions = React.useMemo(() => {
+    if (!collapsible) return {};
+    // Default limits when collapsible is enabled but no limits specified
+    const effectiveMaxLength = maxLength ?? 1000;
+    const effectiveMaxLines = maxLines ?? 10;
+    return { maxLength: effectiveMaxLength, maxLines: effectiveMaxLines, defaultExpanded };
+  }, [collapsible, maxLength, maxLines, defaultExpanded]);
+
+  const {
+    isCollapsed,
+    toggleCollapsed,
+    displayContent,
+    shouldCollapse,
+  } = useCollapsibleContent(
+    trimmedContent,
+    collapsible ? collapsibleOptions : {}
+  );
+
+  // Call onCollapseChange when state changes
+  React.useEffect(() => {
+    if (collapsible && shouldCollapse && onCollapseChange) {
+      onCollapseChange(isCollapsed);
+    }
+  }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
+
   const components = React.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
 
   const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
   const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
 
   // For plain text without markdown, render directly without ReactMarkdown
-  const isPlainText = !hasMarkdownSyntax(trimmedContent);
+  const isPlainText = !hasMarkdownSyntax(displayContent);
 
+  // Render plain text
   if (isPlainText) {
     return (
       <span className={`${textSizeClass} leading-relaxed break-words ${className}`}>
-        {trimmedContent}
+        {displayContent}
+        {collapsible && shouldCollapse && (
+          <>
+            {isCollapsed && '... '}
+            <CollapseToggle
+              isCollapsed={isCollapsed}
+              onClick={toggleCollapsed}
+              readMoreLabel={readMoreLabel}
+              showLessLabel={showLessLabel}
+              isUser={isUser}
+              isCompact={isCompact}
+            />
+          </>
+        )}
       </span>
     );
   }
 
+  // Render markdown
   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}
+    <div className={className}>
+      <div
+        className={`
+          prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
+          ${isUser ? 'prose-invert' : 'dark:prose-invert'}
+        `}
+        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}
       >
-        {trimmedContent}
-      </ReactMarkdown>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={components}
+        >
+          {displayContent}
+        </ReactMarkdown>
+      </div>
+      {collapsible && shouldCollapse && (
+        <CollapseToggle
+          isCollapsed={isCollapsed}
+          onClick={toggleCollapsed}
+          readMoreLabel={readMoreLabel}
+          showLessLabel={showLessLabel}
+          isUser={isUser}
+          isCompact={isCompact}
+        />
+      )}
     </div>
   );
 };

package/src/components/markdown/index.ts

@@ -3,3 +3,12 @@
  */
 
 export { MarkdownMessage, type MarkdownMessageProps } from './MarkdownMessage';
+
+/**
+ * Hooks
+ */
+export {
+  useCollapsibleContent,
+  type UseCollapsibleContentOptions,
+  type UseCollapsibleContentResult,
+} from './useCollapsibleContent';

package/src/components/markdown/useCollapsibleContent.ts

@@ -0,0 +1,236 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+
+export interface UseCollapsibleContentOptions {
+  /**
+   * Maximum character length before collapsing
+   * If both maxLength and maxLines are set, the stricter limit applies
+   */
+  maxLength?: number;
+  /**
+   * Maximum number of lines before collapsing
+   * If both maxLength and maxLines are set, the stricter limit applies
+   */
+  maxLines?: number;
+  /**
+   * Start in expanded state (default: false - starts collapsed)
+   */
+  defaultExpanded?: boolean;
+}
+
+export interface UseCollapsibleContentResult {
+  /** Whether content is currently collapsed */
+  isCollapsed: boolean;
+  /** Toggle between collapsed/expanded state */
+  toggleCollapsed: () => void;
+  /** Set collapsed state directly */
+  setCollapsed: (collapsed: boolean) => void;
+  /** Content to display (truncated if collapsed, full if expanded) */
+  displayContent: string;
+  /** Whether the content exceeds limits and should be collapsible */
+  shouldCollapse: boolean;
+  /** Original content length */
+  originalLength: number;
+  /** Original line count */
+  originalLineCount: number;
+}
+
+/**
+ * Smart truncation that doesn't break words or markdown syntax
+ */
+function smartTruncate(content: string, maxLength: number): string {
+  if (content.length <= maxLength) {
+    return content;
+  }
+
+  // Find a good break point (space, newline) near maxLength
+  let breakPoint = maxLength;
+
+  // Look backwards for a space or newline
+  while (breakPoint > maxLength - 50 && breakPoint > 0) {
+    const char = content[breakPoint];
+    if (char === ' ' || char === '\n' || char === '\t') {
+      break;
+    }
+    breakPoint--;
+  }
+
+  // If we couldn't find a good break point, just use maxLength
+  if (breakPoint <= maxLength - 50) {
+    breakPoint = maxLength;
+  }
+
+  let truncated = content.slice(0, breakPoint).trimEnd();
+
+  // Fix unclosed markdown syntax
+  truncated = fixUnclosedMarkdown(truncated);
+
+  return truncated;
+}
+
+/**
+ * Truncate by line count
+ */
+function truncateByLines(content: string, maxLines: number): string {
+  const lines = content.split('\n');
+
+  if (lines.length <= maxLines) {
+    return content;
+  }
+
+  let truncated = lines.slice(0, maxLines).join('\n').trimEnd();
+
+  // Fix unclosed markdown syntax
+  truncated = fixUnclosedMarkdown(truncated);
+
+  return truncated;
+}
+
+/**
+ * Fix unclosed markdown syntax to prevent rendering issues
+ */
+function fixUnclosedMarkdown(content: string): string {
+  let result = content;
+
+  // Count occurrences of markdown markers
+  const countOccurrences = (str: string, marker: string): number => {
+    const escaped = marker.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const matches = str.match(new RegExp(escaped, 'g'));
+    return matches ? matches.length : 0;
+  };
+
+  // Fix unclosed bold (**) - must have even count
+  const boldCount = countOccurrences(result, '**');
+  if (boldCount % 2 !== 0) {
+    result += '**';
+  }
+
+  // Fix unclosed italic (*) - but not **
+  // Remove ** first for counting, then count single *
+  const withoutBold = result.replace(/\*\*/g, '');
+  const italicCount = countOccurrences(withoutBold, '*');
+  if (italicCount % 2 !== 0) {
+    result += '*';
+  }
+
+  // Fix unclosed inline code (`)
+  const codeCount = countOccurrences(result, '`');
+  // Ignore triple backticks for code blocks
+  const tripleCount = countOccurrences(result, '```');
+  const singleCodeCount = codeCount - (tripleCount * 3);
+  if (singleCodeCount % 2 !== 0) {
+    result += '`';
+  }
+
+  // Fix unclosed code blocks (```)
+  if (tripleCount % 2 !== 0) {
+    result += '\n```';
+  }
+
+  // Fix unclosed strikethrough (~~)
+  const strikeCount = countOccurrences(result, '~~');
+  if (strikeCount % 2 !== 0) {
+    result += '~~';
+  }
+
+  // Fix unclosed underline bold (__)
+  const underlineBoldCount = countOccurrences(result, '__');
+  if (underlineBoldCount % 2 !== 0) {
+    result += '__';
+  }
+
+  // Fix unclosed underline italic (_) - but not __
+  const withoutUnderlineBold = result.replace(/__/g, '');
+  const underlineItalicCount = countOccurrences(withoutUnderlineBold, '_');
+  if (underlineItalicCount % 2 !== 0) {
+    result += '_';
+  }
+
+  return result;
+}
+
+/**
+ * Hook for managing collapsible content with "Read more..." functionality
+ *
+ * @example
+ * ```tsx
+ * const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(
+ *   longText,
+ *   { maxLength: 300, maxLines: 5 }
+ * );
+ *
+ * return (
+ *   <div>
+ *     <Markdown content={displayContent} />
+ *     {shouldCollapse && (
+ *       <button onClick={toggleCollapsed}>
+ *         {isCollapsed ? 'Read more...' : 'Show less'}
+ *       </button>
+ *     )}
+ *   </div>
+ * );
+ * ```
+ */
+export function useCollapsibleContent(
+  content: string,
+  options: UseCollapsibleContentOptions = {}
+): UseCollapsibleContentResult {
+  const { maxLength, maxLines, defaultExpanded = false } = options;
+
+  const [isCollapsed, setIsCollapsed] = useState(!defaultExpanded);
+
+  const originalLength = content.length;
+  const originalLineCount = content.split('\n').length;
+
+  const { shouldCollapse, truncatedContent } = useMemo(() => {
+    // If no limits set, don't collapse
+    if (maxLength === undefined && maxLines === undefined) {
+      return { shouldCollapse: false, truncatedContent: content };
+    }
+
+    let needsCollapse = false;
+    let result = content;
+
+    // Check line limit first (usually more restrictive for chat)
+    if (maxLines !== undefined && originalLineCount > maxLines) {
+      needsCollapse = true;
+      result = truncateByLines(result, maxLines);
+    }
+
+    // Then check character limit
+    if (maxLength !== undefined && result.length > maxLength) {
+      needsCollapse = true;
+      result = smartTruncate(result, maxLength);
+    }
+
+    return { shouldCollapse: needsCollapse, truncatedContent: result };
+  }, [content, maxLength, maxLines, originalLineCount]);
+
+  const displayContent = useMemo(() => {
+    if (!shouldCollapse || !isCollapsed) {
+      return content;
+    }
+    return truncatedContent;
+  }, [content, truncatedContent, shouldCollapse, isCollapsed]);
+
+  const toggleCollapsed = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  const setCollapsed = useCallback((collapsed: boolean) => {
+    setIsCollapsed(collapsed);
+  }, []);
+
+  return {
+    isCollapsed,
+    toggleCollapsed,
+    setCollapsed,
+    displayContent,
+    shouldCollapse,
+    originalLength,
+    originalLineCount,
+  };
+}
+
+export default useCollapsibleContent;