@djangocfg/ui-tools 2.1.301 → 2.1.302

package/dist/index.d.ts

@@ -158,6 +158,19 @@ interface MarkdownMessageProps {
     isUser?: boolean;
     /** Use compact size (text-xs instead of text-sm) */
     isCompact?: boolean;
+    /**
+     * Force the plain-text rendering path (single `<div>` with
+     * `white-space: pre-wrap`, no ReactMarkdown). Use this for
+     * user-authored content where markdown shouldn't be parsed.
+     *
+     * When `undefined` (default) we run a small heuristic
+     * (`looksLikePlainProse`): short single-paragraph text without
+     * markdown markers → plain; everything else → ReactMarkdown.
+     *
+     * Pass an explicit `true` / `false` to opt out of the heuristic
+     * entirely.
+     */
+    plainText?: boolean;
     /**
      * Per-tag overrides merged on top of the built-in renderers.
      *

package/dist/index.mjs

@@ -4,8 +4,8 @@ import './chunk-JWB2EWQO.mjs';
 export { ImageViewer } from './chunk-GGKGH5PM.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-5LBDYFWH.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PZKAH7WQ.mjs';
-import { PlaygroundProvider } from './chunk-CKD7GNE5.mjs';
-export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, extractTextFromChildren, useCollapsibleContent } from './chunk-CKD7GNE5.mjs';
+import { PlaygroundProvider } from './chunk-47NGNO5U.mjs';
+export { MarkdownMessage, Mermaid_default as Mermaid, PrettyCode_default as PrettyCode, extractTextFromChildren, useCollapsibleContent } from './chunk-47NGNO5U.mjs';
 export { JsonTree_default as JsonTree } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 export { ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, CheckboxWidget, ColorWidget, ErrorListTemplate, FieldTemplate, JsonSchemaForm, NumberWidget, ObjectFieldTemplate, SelectWidget, SliderWidget, SwitchWidget, TextWidget, getRequiredFields, hasRequiredFields, mergeDefaults, normalizeFormData, safeJsonParse, safeJsonStringify, validateRequiredFields, validateSchema } from './chunk-JUGQNNDC.mjs';
@@ -238,7 +238,7 @@ function OpenapiLoadingFallback() {
 }
 __name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyDocsLayout = createLazyComponent(
-  () => import('./DocsLayout-MWRKNFXR.mjs').then((mod) => ({ default: mod.DocsLayout })),
+  () => import('./DocsLayout-ZHNRRAKR.mjs').then((mod) => ({ default: mod.DocsLayout })),
   {
     displayName: "LazyDocsLayout",
     fallback: /* @__PURE__ */ jsx(OpenapiLoadingFallback, {})
@@ -393,7 +393,7 @@ function LottiePlayer(props) {
 }
 __name(LottiePlayer, "LottiePlayer");
 var DocsLayout = lazy(
-  () => import('./DocsLayout-MWRKNFXR.mjs').then((mod) => ({ default: mod.DocsLayout }))
+  () => import('./DocsLayout-ZHNRRAKR.mjs').then((mod) => ({ default: mod.DocsLayout }))
 );
 var LoadingFallback7 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ __name(({ config }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.301",
+  "version": "2.1.302",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -91,8 +91,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.301",
-    "@djangocfg/ui-core": "^2.1.301",
+    "@djangocfg/i18n": "^2.1.302",
+    "@djangocfg/ui-core": "^2.1.302",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -140,10 +140,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.301",
+    "@djangocfg/i18n": "^2.1.302",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.301",
-    "@djangocfg/ui-core": "^2.1.301",
+    "@djangocfg/typescript-config": "^2.1.302",
+    "@djangocfg/ui-core": "^2.1.302",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/components/markdown/MarkdownMessage/CodeBlock.tsx

@@ -10,26 +10,20 @@ interface CodeBlockProps {
   isCompact?: boolean;
 }
 
-/** Code block with a hover-revealed Copy button on top of PrettyCode. */
+/**
+ * Markdown code block. Renders <PrettyCode> directly — its own
+ * FloatingToolbar already carries the language tag and Copy action.
+ *
+ * Earlier versions stacked an extra <CopyButton> here too, which
+ * surfaced as two copy buttons on every code fence. The fallback
+ * branch below still ships its own button because the plain <pre>
+ * has no toolbar of its own.
+ */
 export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
   const theme = useResolvedTheme();
 
   return (
-    <div className="relative group my-3">
-      <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"
-      />
-
+    <div className="my-3">
       <PrettyCode
         data={code}
         language={language}

package/src/components/markdown/MarkdownMessage/MarkdownMessage.story.tsx

@@ -169,3 +169,217 @@ export const LinkRules = () => (
     </div>
   </div>
 );
+
+// Chat-style stories — exercise the plain-text fast path so short
+// one-liners and prose paragraphs don't get prose vertical margins
+// inside a chat bubble. Compare against `LongAssistantReply` below
+// to see when the heavier ReactMarkdown pipeline kicks in.
+const SHORT_USER_LINES = [
+  'Hi',
+  'А?',
+  'How do I install cmdop?',
+  'Can you ssh into vps-audi and check uptime?',
+];
+
+const SHORT_ASSISTANT_LINES = [
+  'Sure — what do you need?',
+  'Готово, запросил статус.',
+  'Done.',
+];
+
+// Crafted to make the plain-vs-markdown contrast obvious: contains
+// `*pair*` (italic in markdown), a `#hash` token (lone hash with no
+// space — NOT a heading even in markdown, kept here to show the
+// asymmetry), and embedded newlines that should survive in plain mode.
+const CONTRAST_CONTENT = `Multi
+line
+user message
+with *asterisks*
+and #hash that should NOT format`;
+
+const LONG_ASSISTANT_REPLY = `## Установка CMDOP
+
+Запусти этот скрипт:
+
+\`\`\`bash
+curl -sSL cmdop.com/install.sh | bash
+\`\`\`
+
+Дальше:
+
+1. **Войти:** \`cmdop login\`
+2. **Подключить машину:** \`cmdop connect\`
+3. **Проверить:** \`cmdop doctor\`
+
+Если что-то не работает — скажи.`;
+
+function ChatBubble({
+  role,
+  content,
+  rules,
+  plainText,
+}: {
+  role: 'user' | 'assistant';
+  content: string;
+  rules?: LinkRule[];
+  plainText?: boolean;
+}) {
+  const isUser = role === 'user';
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
+      <div
+        className={`max-w-[85%] rounded-xl px-3 py-2 ${
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-card text-card-foreground border border-border'
+        }`}
+      >
+        <MarkdownMessage
+          content={content}
+          isUser={isUser}
+          linkRules={rules}
+          plainText={plainText}
+        />
+      </div>
+    </div>
+  );
+}
+
+export const ChatBubbles = () => (
+  <div className="mx-auto max-w-2xl space-y-6 p-6">
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        User messages — explicit <code>plainText</code>
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        ChatGPT/Claude.ai split: user-typed content stays as-typed.
+        <code> *stars* </code> aren't bold; <code># headers </code>
+        aren't headings. Newlines preserved via{' '}
+        <code>whitespace-pre-wrap</code>.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        {SHORT_USER_LINES.map((line, i) => (
+          <ChatBubble
+            key={`u-${i}`}
+            role="user"
+            content={line}
+            plainText
+            rules={onPrimaryRules}
+          />
+        ))}
+        <ChatBubble
+          role="user"
+          content={'Multi\nline\nuser message\nwith *asterisks*\nand #hash that should NOT format'}
+          plainText
+          rules={onPrimaryRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Heuristic auto-detect (no <code>plainText</code> prop)
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Without <code>plainText</code>, <code>looksLikePlainProse</code>
+        decides: short / single-paragraph / no markers → flat render;
+        long / multi-paragraph / structural → full markdown. Same
+        renderer for both branches; only margins differ.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        {SHORT_ASSISTANT_LINES.map((line, i) => (
+          <ChatBubble
+            key={`a-${i}`}
+            role="assistant"
+            content={line}
+            rules={subtleRules}
+          />
+        ))}
+        <ChatBubble
+          role="assistant"
+          content="Sure — let me check uptime and disk on the machine and report back. Should only take a couple of seconds."
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Bubble with mention chips
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Content with <code>[label](cmdop://...)</code> always goes
+        through ReactMarkdown — that's how MentionChip renders.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        <ChatBubble
+          role="user"
+          content="Спроси у @[Vps-audi](cmdop://machine/abc-123) сколько свободного места."
+          rules={onPrimaryRules}
+        />
+        <ChatBubble
+          role="assistant"
+          content="Готово — спросил [Vps-audi](cmdop://machine/abc-123)."
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Same content, two modes — side-by-side contrast
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Identical input string. Left bubble forces{' '}
+        <code>plainText</code> (user-side default in cmdop):{' '}
+        <code>*asterisks*</code> stay literal, <code>#hash</code> stays
+        literal, newlines preserved verbatim. Right bubble omits{' '}
+        <code>plainText</code> so the heuristic kicks in — short
+        content but with <code>*pair*</code> markers, so it routes
+        through ReactMarkdown and renders <em>italic</em>.
+      </p>
+      <div className="grid grid-cols-2 gap-3">
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+            plainText = true
+          </div>
+          <ChatBubble
+            role="user"
+            content={CONTRAST_CONTENT}
+            plainText
+            rules={onPrimaryRules}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+            plainText omitted → heuristic
+          </div>
+          <ChatBubble
+            role="assistant"
+            content={CONTRAST_CONTENT}
+            rules={subtleRules}
+          />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Long assistant reply (multi-paragraph + code + headings)
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Full markdown pipeline. Tight CSS overrides
+        (<code>p+p mt-2</code>, <code>p my-0</code>) keep the bubble
+        from looking airy — defaults from Tailwind's prose are too
+        loose for chat density.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="assistant"
+          content={LONG_ASSISTANT_REPLY}
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/markdown/MarkdownMessage/MarkdownMessage.tsx

@@ -10,7 +10,7 @@ import type { Components } from 'react-markdown';
 import { useCollapsibleContent } from '../useCollapsibleContent';
 import type { MarkdownMessageProps } from './types';
 import { buildSchema, buildUrlTransform } from './sanitize';
-import { hasMarkdownSyntax } from './plainText';
+import { looksLikePlainProse } from './plainText';
 import { createMarkdownComponents } from './components';
 import { CollapseToggle } from './CollapseToggle';
 import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './linkRules';
@@ -51,6 +51,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   className = '',
   isUser = false,
   isCompact = false,
+  plainText,
   customComponents,
   extraHrefProtocols,
   linkRules,
@@ -121,17 +122,34 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
   const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
 
-  // Plain-text fast path: skip ReactMarkdown when content is pure
-  // prose. Bypassed when the caller wired up custom components or
-  // link rules — those need to fire on plain `[label](custom://…)`
-  // links the fast path would otherwise print verbatim.
-  const isPlainText =
-    !effectiveCustomComponents && !hasMarkdownSyntax(displayContent);
+  // Resolve plain-vs-markdown branch:
+  //   1. Caller-passed `plainText` wins outright (explicit beats clever).
+  //   2. Caller-supplied non-`a` customComponents force the markdown
+  //      pipeline — those overrides only matter on real markdown nodes.
+  //   3. Otherwise auto-detect via `looksLikePlainProse` (short,
+  //      single-paragraph, no markdown markers). This is the chat-bubble
+  //      WhatsApp/Telegram heuristic — "would the human have written
+  //      this in one keystroke?".
+  const customComponentsBeyondLinks = React.useMemo(() => {
+    if (!customComponents) return false;
+    return Object.keys(customComponents).some((k) => k !== 'a');
+  }, [customComponents]);
+  const isPlainText = plainText !== undefined
+    ? plainText
+    : !customComponentsBeyondLinks && looksLikePlainProse(displayContent);
 
   if (isPlainText) {
+    // <div> + whitespace-pre-wrap: respects newlines AND collapses
+    // double spaces, which is what users mean when they hit Enter
+    // twice. <span> would break flow inside a flex bubble.
+    //
+    // leading-snug (1.375), not leading-relaxed (1.625) — `pre-wrap`
+    // makes every `\n` a hard line break, so the relaxed leading
+    // turns multi-line user messages into airy ladders. snug matches
+    // WhatsApp/Telegram bubble density.
     return (
-      <span
-        className={`${textSizeClass} leading-7 break-words whitespace-pre-line font-light ${className}`}
+      <div
+        className={`${textSizeClass} leading-snug break-words whitespace-pre-wrap ${className}`}
       >
         {displayContent}
         {collapsible && shouldCollapse && (
@@ -147,7 +165,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
             />
           </>
         )}
-      </span>
+      </div>
     );
   }
 
@@ -157,7 +175,11 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
         className={`
           prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
           ${isUser ? 'prose-invert' : 'dark:prose-invert'}
-          [&>*]:leading-7
+          [&>*]:leading-relaxed
+          [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
+          [&_p]:my-0 [&_p+p]:mt-2
+          [&_ul]:my-2 [&_ol]:my-2 [&_pre]:my-2 [&_blockquote]:my-2
+          [&_h1]:mt-3 [&_h1]:mb-1 [&_h2]:mt-3 [&_h2]:mb-1 [&_h3]:mt-2 [&_h3]:mb-1
         `}
         style={{
           // Inherit colors from parent — fixes issues with external

package/src/components/markdown/MarkdownMessage/plainText.ts

@@ -16,6 +16,39 @@ export function extractTextFromChildren(children: React.ReactNode): string {
   return '';
 }
 
+/**
+ * Auto-detect whether `text` should bypass ReactMarkdown and render as
+ * a flat `<div whitespace-pre-wrap>`. Used as the *fallback* when the
+ * caller doesn't pass `plainText` explicitly to `MarkdownMessage`.
+ *
+ * The signal we trust: short, single-paragraph, no markdown markers.
+ * Anything longer / multi-paragraph / structurally suggestive falls
+ * through to the markdown pipeline — false negatives there are cheap
+ * (markdown renders prose correctly), false positives in the prose
+ * branch surface as escaped `*` / `#` / etc. so we err markdown-ward.
+ *
+ * Thresholds were picked from chat-bubble UX research (see ChatGPT,
+ * Claude.ai, WhatsApp): roughly "would a person have written this in
+ * one keystroke without thinking about formatting?". If you find them
+ * too tight or too loose, tune here — every consumer goes through
+ * `MarkdownMessage` so the change is universal.
+ */
+export function looksLikePlainProse(text: string): boolean {
+  const trimmed = text.trim();
+  // Empty / whitespace-only — render as plain (cheap path, nothing to parse).
+  if (trimmed.length === 0) return true;
+  // Long enough that it's likely a structured assistant reply.
+  if (trimmed.length > 500) return false;
+  // Paragraph break → almost certainly markdown territory.
+  if (/\n\s*\n/.test(trimmed)) return false;
+  // Many single-line breaks → probably a list or stanza.
+  const newlineCount = (trimmed.match(/\n/g) || []).length;
+  if (newlineCount > 4) return false;
+  // Any markdown marker → defer to ReactMarkdown.
+  if (hasMarkdownSyntax(trimmed)) return false;
+  return true;
+}
+
 /** Affordance test: does this string look like markdown? Used to skip
  *  the (heavier) ReactMarkdown pipeline when the content is pure
  *  prose. NOT a validator — false negatives are fine; false positives

package/src/components/markdown/MarkdownMessage/types.ts

@@ -52,6 +52,19 @@ export interface MarkdownMessageProps {
   isUser?: boolean;
   /** Use compact size (text-xs instead of text-sm) */
   isCompact?: boolean;
+  /**
+   * Force the plain-text rendering path (single `<div>` with
+   * `white-space: pre-wrap`, no ReactMarkdown). Use this for
+   * user-authored content where markdown shouldn't be parsed.
+   *
+   * When `undefined` (default) we run a small heuristic
+   * (`looksLikePlainProse`): short single-paragraph text without
+   * markdown markers → plain; everything else → ReactMarkdown.
+   *
+   * Pass an explicit `true` / `false` to opt out of the heuristic
+   * entirely.
+   */
+  plainText?: boolean;
   /**
    * Per-tag overrides merged on top of the built-in renderers.
    *