@djangocfg/ui-tools 2.1.91 → 2.1.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.91",
+  "version": "2.1.94",
   "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.91",
+    "@djangocfg/ui-core": "^2.1.94",
     "@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.91",
+    "@djangocfg/typescript-config": "^2.1.94",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/markdown/MarkdownMessage.tsx

@@ -282,6 +282,35 @@ const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean =
   ),
 };};
 
+// Check if content contains markdown syntax or line breaks
+const hasMarkdownSyntax = (text: string): boolean => {
+  // If there are line breaks (after trim), treat as markdown for proper paragraph rendering
+  if (text.trim().includes('\n')) {
+    return true;
+  }
+
+  // Common markdown patterns
+  const markdownPatterns = [
+    /^#{1,6}\s/m,           // Headers
+    /\*\*[^*]+\*\*/,        // Bold
+    /\*[^*]+\*/,            // Italic
+    /__[^_]+__/,            // Bold (underscore)
+    /_[^_]+_/,              // Italic (underscore)
+    /\[.+\]\(.+\)/,         // Links
+    /!\[.*\]\(.+\)/,        // Images
+    /```[\s\S]*```/,        // Code blocks
+    /`[^`]+`/,              // Inline code
+    /^\s*[-*+]\s/m,         // Unordered lists
+    /^\s*\d+\.\s/m,         // Ordered lists
+    /^\s*>/m,               // Blockquotes
+    /\|.+\|/,               // Tables
+    /^---+$/m,              // Horizontal rules
+    /~~[^~]+~~/,            // Strikethrough
+  ];
+
+  return markdownPatterns.some(pattern => pattern.test(text));
+};
+
 /**
  * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
  *
@@ -291,6 +320,7 @@ const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean =
  * - Mermaid diagram rendering
  * - Tables, lists, blockquotes
  * - User/assistant styling modes
+ * - Plain text optimization (skips ReactMarkdown for simple text)
  *
  * @example
  * ```tsx
@@ -306,11 +336,25 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   isUser = false,
   isCompact = false,
 }) => {
+  // Trim content to remove leading/trailing whitespace and empty lines
+  const trimmedContent = content.trim();
+
   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);
+
+  if (isPlainText) {
+    return (
+      <span className={`${textSizeClass} leading-relaxed break-words ${className}`}>
+        {trimmedContent}
+      </span>
+    );
+  }
+
   return (
     <div
       className={`
@@ -331,7 +375,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
         remarkPlugins={[remarkGfm]}
         components={components}
       >
-        {content}
+        {trimmedContent}
       </ReactMarkdown>
     </div>
   );