@djangocfg/widget-code 0.1.1

package/src/markdown-message/MarkdownMessage.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import React, { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkBreaks from 'remark-breaks';
+import remarkEmoji from 'remark-emoji';
+import remarkGfm from 'remark-gfm';
+import remarkSmartypants from 'remark-smartypants';
+import type { Components } from 'react-markdown';
+
+import { useCollapsibleContent } from '../use-collapsible-content';
+import type { MarkdownMessageProps } from './types';
+import { buildSchema, buildUrlTransform } from './sanitize';
+import { looksLikePlainProse } from './plainText';
+import { createMarkdownComponents } from './components';
+import { CollapseToggle } from './CollapseToggle';
+import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './linkRules';
+import { renderableTail, splitStreamingBlocks } from './streamingBlocks';
+
+/**
+ * Shared remark plugin chain. Hoisted to a module constant so its
+ * reference is stable across every block render in streaming mode —
+ * otherwise a fresh array each render would defeat ReactMarkdown's own
+ * internal memoization and force every block to re-process.
+ *
+ * Order is load-bearing:
+ *   1. `remark-gfm` — tables, strikethrough, autolinks, task lists.
+ *   2. `remark-breaks` — chat convention: single `\n` → `<br>`.
+ *   3. `remark-smartypants` — typographic substitutions.
+ *   4. `remark-emoji` — `:smile:` → 😄.
+ */
+const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkSmartypants, remarkEmoji] as const;
+
+/** Props for a single rendered markdown block. Kept small so the memo
+ *  comparator is cheap and precise. */
+interface MarkdownBlockProps {
+  source: string;
+  components: Partial<Components>;
+  schema: ReturnType<typeof buildSchema>;
+  urlTransform: ReturnType<typeof buildUrlTransform> | undefined;
+}
+
+/**
+ * One memoized markdown block. In streaming mode the parent block-splits
+ * the document and renders each completed block through this; the memo
+ * comparator skips re-parsing any block whose `source` (and render config)
+ * is unchanged — so as tokens append to the tail, blocks 0..N-1 stay put.
+ */
+const MarkdownBlock = memo(
+  function MarkdownBlockRaw({ source, components, schema, urlTransform }: MarkdownBlockProps) {
+    return (
+      <ReactMarkdown
+        remarkPlugins={REMARK_PLUGINS as unknown as React.ComponentProps<typeof ReactMarkdown>['remarkPlugins']}
+        // rehype-raw parses inline HTML; rehype-sanitize (extended schema)
+        // runs after to keep XSS guards; rehype-external-links tags <a>.
+        // SAME chain as the non-streaming path → identical safety posture.
+        rehypePlugins={[
+          rehypeRaw,
+          [rehypeSanitize, schema],
+          [rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
+        ]}
+        components={components}
+        urlTransform={urlTransform}
+      >
+        {source}
+      </ReactMarkdown>
+    );
+  },
+  (a, b) =>
+    a.source === b.source &&
+    a.components === b.components &&
+    a.schema === b.schema &&
+    a.urlTransform === b.urlTransform,
+);
+
+/** Body text size class for the plain-text / prose wrapper. */
+const SIZE_TO_TEXT: Record<'xs' | 'sm' | 'base', string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+};
+
+/** Tailwind-typography modifier per size level. */
+const SIZE_TO_PROSE: Record<'xs' | 'sm' | 'base', string> = {
+  xs: 'prose-xs',
+  sm: 'prose-sm',
+  base: 'prose-base',
+};
+
+/**
+ * MarkdownMessage — chat-tuned markdown renderer.
+ *
+ * Features:
+ * - GitHub Flavored Markdown (GFM) via remark-gfm
+ * - Syntax-highlighted code blocks with Copy button
+ * - Mermaid diagram rendering (` ```mermaid ` fence)
+ * - Tables, lists, blockquotes scaled for chat density
+ * - User vs assistant styling modes (`isUser`)
+ * - Plain-text fast path: skips ReactMarkdown when content has no
+ *   markdown syntax (cheaper render, preserves newlines via CSS)
+ * - Optional collapsible "Read more..." for long messages
+ *
+ * Custom URL schemes (chat mentions, deep-links, custom file viewers)
+ * are best handled with the declarative `linkRules` prop — see the
+ * type definition in `./types.ts` and the storybook for examples.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownMessage content="# Hello\n\nThis is **bold** text." />
+ *
+ * // User message styling
+ * <MarkdownMessage content="Some content" isUser />
+ *
+ * // Custom URL scheme via linkRules
+ * <MarkdownMessage
+ *   content="Talk to [Vps-audi](cmdop://machine/abc-123)"
+ *   linkRules={[machineMentionRule]}
+ * />
+ * ```
+ *
+ * Memoised: re-renders only when props change. `content` is the main
+ * trigger — all other props (className, isUser, size, etc.) are
+ * compared by value/reference. `onCollapseChange` is compared by
+ * reference — callers should stabilise it with useCallback.
+ */
+function MarkdownMessageRaw({
+  content,
+  className = '',
+  isUser = false,
+  size,
+  isCompact = false,
+  plainText,
+  customComponents,
+  extraHrefProtocols,
+  linkRules,
+  collapsible = false,
+  maxLength,
+  maxLines,
+  readMoreLabel = 'Read more...',
+  showLessLabel = 'Show less',
+  defaultExpanded = false,
+  onCollapseChange,
+  streaming = false,
+  codeTheme = 'auto',
+}: MarkdownMessageProps) {
+  // Pre-process content through any rules that requested it. Done
+  // before trim so a rule can rewrite multi-line shapes too.
+  const preprocessed = React.useMemo(
+    () => applyPreprocess(content, linkRules),
+    [content, linkRules],
+  );
+
+  // Union of `extraHrefProtocols` and any `protocols` declared by rules.
+  const effectiveProtocols = React.useMemo(
+    () => collectProtocols(extraHrefProtocols, linkRules),
+    [extraHrefProtocols, linkRules],
+  );
+
+  // Effective custom components: merge linkRules' synthesized `a`
+  // renderer with any caller-provided `customComponents`. linkRules
+  // wins when both target the same href (rule is the more specific
+  // declarative claim by design).
+  const effectiveCustomComponents = React.useMemo<Partial<Components> | undefined>(() => {
+    if (!linkRules || linkRules.length === 0) return customComponents;
+    const callerA = customComponents?.a;
+    const aRenderer = buildLinkRulesComponent(linkRules, isUser, callerA);
+    return { ...(customComponents ?? {}), a: aRenderer };
+  }, [customComponents, linkRules, isUser]);
+
+  const trimmedContent = preprocessed.trim();
+
+  // Collapsible content logic — defaults kick in only when enabled.
+  const collapsibleOptions = React.useMemo(() => {
+    if (!collapsible) return {};
+    return {
+      maxLength: maxLength ?? 1000,
+      maxLines: maxLines ?? 10,
+      defaultExpanded,
+    };
+  }, [collapsible, maxLength, maxLines, defaultExpanded]);
+
+  const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } =
+    useCollapsibleContent(trimmedContent, collapsible ? collapsibleOptions : {});
+
+  React.useEffect(() => {
+    if (collapsible && shouldCollapse && onCollapseChange) {
+      onCollapseChange(isCollapsed);
+    }
+  }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
+
+  // `size` wins when set explicitly; otherwise fall back to the
+  // legacy binary `isCompact` so existing callers keep working.
+  const resolvedSize: 'xs' | 'sm' | 'base' = size ?? (isCompact ? 'xs' : 'sm');
+
+  const components = React.useMemo(() => {
+    const base = createMarkdownComponents(isUser, resolvedSize, codeTheme);
+    return effectiveCustomComponents ? { ...base, ...effectiveCustomComponents } : base;
+  }, [isUser, resolvedSize, codeTheme, effectiveCustomComponents]);
+
+  const schema = React.useMemo(() => buildSchema(effectiveProtocols), [effectiveProtocols]);
+  const urlTransform = React.useMemo(
+    () => buildUrlTransform(effectiveProtocols),
+    [effectiveProtocols],
+  );
+
+  const textSizeClass = SIZE_TO_TEXT[resolvedSize];
+  const proseClass = SIZE_TO_PROSE[resolvedSize];
+
+  // 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);
+
+  // Streaming mode is only meaningful on the markdown path and when not
+  // collapsing (collapse is a finished-message concern). `plainText` and
+  // `collapsible` both win over it.
+  const isStreamingMarkdown = streaming && !isPlainText && !collapsible;
+
+  // Block-split the in-flight document. Recomputed only when content
+  // changes; cheap (single string pass). Stable blocks feed memoized
+  // <MarkdownBlock>s so blocks 0..N-1 don't re-parse per token.
+  const split = React.useMemo(
+    () => (isStreamingMarkdown ? splitStreamingBlocks(displayContent) : null),
+    [isStreamingMarkdown, 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 (
+      // `select-text` keeps prose selectable under native-host
+      // `body { user-select: none }` (Wails/Electron); no-op on web.
+      <div
+        className={`select-text ${textSizeClass} font-normal antialiased leading-snug break-words whitespace-pre-wrap ${className}`}
+      >
+        {displayContent}
+        {collapsible && shouldCollapse && (
+          <>
+            {isCollapsed && '... '}
+            <CollapseToggle
+              isCollapsed={isCollapsed}
+              onClick={toggleCollapsed}
+              readMoreLabel={readMoreLabel}
+              showLessLabel={showLessLabel}
+              isUser={isUser}
+              isCompact={resolvedSize === 'xs'}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Prose wrapper class — shared by the static and streaming branches so
+  // typography is byte-identical whether rendered in one pass or block by
+  // block.
+  const proseWrapperClass = `
+    prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass} font-normal antialiased
+    ${isUser ? 'prose-invert' : 'dark:prose-invert'}
+    [&>*]:leading-relaxed
+    [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
+    [&_p]:my-2
+    [&_ul]:my-2 [&_ol]:my-2 [&_ul]:pl-5 [&_ol]:pl-5
+    [&_li]:my-1 [&_li>p]:my-0
+    [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-base [&_h1]:font-semibold
+    [&_h2]:mt-3.5 [&_h2]:mb-1.5 [&_h2]:text-[15px] [&_h2]:font-semibold
+    [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium
+    [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-sm [&_h4]:font-medium
+  `;
+  const proseWrapperStyle = {
+    // Inherit colors from parent — fixes issues with external CSS
+    // variables overriding prose tokens.
+    '--tw-prose-body': 'inherit',
+    '--tw-prose-headings': 'inherit',
+    '--tw-prose-bold': 'inherit',
+    '--tw-prose-links': 'inherit',
+    color: 'inherit',
+  } as React.CSSProperties;
+
+  // ── Streaming branch ──────────────────────────────────────────────────
+  // Render completed blocks as memoized markdown; hold the in-flight tail
+  // as raw text (boundary buffering) — or as an in-progress code block if
+  // it's inside an unterminated fence. Same sanitize/components chain, so
+  // identical XSS posture; just invoked per block instead of once.
+  if (isStreamingMarkdown && split) {
+    const tail = renderableTail(split.tail, split.tailInOpenFence);
+    return (
+      <div className={`select-text ${className}`}>
+        <div className={proseWrapperClass} style={proseWrapperStyle}>
+          {split.blocks.map((source, i) => (
+            <MarkdownBlock
+              // Index keys: streaming only appends/edits the tail, so
+              // earlier blocks never reorder — index keys avoid unmount
+              // churn while keeping the memo identity stable.
+              key={i}
+              source={source}
+              components={components}
+              schema={schema}
+              urlTransform={urlTransform}
+            />
+          ))}
+          {tail.source &&
+            (tail.asCode ? (
+              // Unterminated fence → render as an in-progress code block so
+              // it doesn't swallow the rest of the message. The close fence
+              // is virtual (appended to a copy); stored content is untouched.
+              <MarkdownBlock
+                key="tail-code"
+                source={tail.source}
+                components={components}
+                schema={schema}
+                urlTransform={urlTransform}
+              />
+            ) : (
+              // Boundary buffering: the trailing incomplete line/block stays
+              // raw `whitespace-pre-wrap` until a newline promotes it — no
+              // flash of half-written `**bold` / `[link](`.
+              <div className="whitespace-pre-wrap break-words leading-relaxed">
+                {tail.source}
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Static branch (finished message / non-streaming) ──────────────────
+  return (
+    // `select-text` keeps prose + code blocks selectable under native-host
+    // `body { user-select: none }` (Wails/Electron); no-op on web.
+    <div className={`select-text ${className}`}>
+      <div className={proseWrapperClass} style={proseWrapperStyle}>
+        <MarkdownBlock
+          source={displayContent}
+          components={components}
+          schema={schema}
+          urlTransform={urlTransform}
+        />
+      </div>
+      {collapsible && shouldCollapse && (
+        <CollapseToggle
+          isCollapsed={isCollapsed}
+          onClick={toggleCollapsed}
+          readMoreLabel={readMoreLabel}
+          showLessLabel={showLessLabel}
+          isUser={isUser}
+          isCompact={isCompact}
+        />
+      )}
+    </div>
+  );
+};
+
+export const MarkdownMessage = memo(MarkdownMessageRaw);
+
+export default MarkdownMessage;

package/src/markdown-message/README.md

@@ -0,0 +1,221 @@
+# MarkdownMessage
+
+Chat-tuned, read-only markdown renderer. Drop-in for any chat bubble — assistant or user.
+
+```tsx
+import { MarkdownMessage } from '@djangocfg/widget-code/markdown-message';
+
+<MarkdownMessage content={text} isUser={false} />
+```
+
+## What it gives you
+
+| Feature | Source |
+|---|---|
+| GitHub Flavored Markdown — tables, strikethrough, autolinks, task lists | `remark-gfm` |
+| Single `\n` becomes a hard line break (chat convention) | `remark-breaks` |
+| Smart typography — `"…"` → `"…"`, `--` → `—`, `...` → `…` | `remark-smartypants` |
+| Emoji shortcodes — `:rocket:` → 🚀 | `remark-emoji` |
+| External links auto-tagged with `target="_blank" rel="noopener noreferrer"` | `rehype-external-links` |
+| Inline HTML, parsed and sanitized (XSS-safe) | `rehype-raw` + `rehype-sanitize` |
+| Syntax-highlighted code fences with copy button | `<PrettyCode>` |
+| Mermaid diagrams (` ```mermaid ` fence) with click-to-fullscreen | `<Mermaid>` |
+| Custom URL schemes via declarative `linkRules` | `./linkRules.ts` |
+| Opt-in URL chips (bare URLs → favicon + middle-ellipsis chip) | `urlChipRule` · `./builtinRules.tsx` |
+| Plain-text fast path — short messages skip the markdown pipeline | `./plainText.ts` |
+| Optional collapsible "Read more" for long replies | `useCollapsibleContent` |
+| Hover-revealed copy action under the bubble (separate `<ActionRow>` export) | `<CopyButton>` (ui-core) |
+| User vs assistant palette via `isUser` flag | semantic theme tokens |
+
+## Why these plugins
+
+Chat bubbles aren't documents. We picked plugins that fix the gap between CommonMark
+and how people actually type in chats:
+
+- **`remark-breaks`** — CommonMark collapses single newlines into spaces. LLMs and
+  users routinely write joke punchlines, poems, and dialogue separated by single
+  newlines. Without this, "— Доктор, я общаюсь только через мессенджер.\n— Что жена
+  говорит?" renders as one run-on line. ChatGPT, Slack, Discord, Linear all do this.
+- **`remark-smartypants`** — Cheap "humanized" polish: ASCII quotes become typographic
+  quotes, double-dash becomes em-dash, three dots become an ellipsis. Same rule as
+  Medium / Substack. Applied before emoji so quotes around shortcodes still curl.
+- **`remark-emoji`** — Shortcode → Unicode (`:tada:` → 🎉). Already-Unicode emoji
+  pass through untouched.
+- **`rehype-external-links`** — One pass at the end tags every `<a>` that survived
+  sanitize. Replaces ad-hoc `target=_blank` checks in the `a` renderer; works for
+  custom `linkRules`-supplied anchors too.
+
+Plugin order in `MarkdownMessage.tsx` is load-bearing — see the inline comment.
+
+## Plain-text fast path
+
+`MarkdownMessage` looks at the content and decides:
+
+- **Short, single-paragraph, no markdown markers** → render as flat
+  `<div whitespace-pre-wrap>`. Cheaper, preserves newlines verbatim, doesn't
+  parse `*stars*` or `#hash` that the user happened to type.
+- **Anything else** → full ReactMarkdown pipeline.
+
+Override with `plainText={true | false}` if you know better than the heuristic
+(common case: user-typed bubbles always pass `plainText` so their `*` stays as `*`).
+
+## Custom URL schemes (`linkRules`)
+
+`linkRules` is the supported way to plug in app-specific URL handlers (`cmdop://`,
+`obsidian://`, custom file links, mention chips). Each rule:
+
+- declares its `protocols` (whitelisted into the sanitizer);
+- optionally `preprocess`es the source string;
+- `match`es an href and `render`s a custom node.
+
+```tsx
+const rules: LinkRule[] = [
+  {
+    name: 'cmdop-machine-mention',
+    protocols: ['cmdop'],
+    match: (href) => href.startsWith('cmdop://machine/'),
+    render: ({ href, children }) => <MentionChip id={href} label={children} />,
+  },
+];
+
+<MarkdownMessage content="Talk to [Server-A](cmdop://machine/abc-123)" linkRules={rules} />
+```
+
+The plain `a` renderer keeps its palette and typography; `linkRules` only fires
+when both the `protocols` and the `match` predicate accept the href. See
+`linkRules.ts` for the sanitize-extension logic.
+
+### Built-in `urlChipRule` (URL chips)
+
+`urlChipRule` (exported from `./builtinRules`) is a shipped, **opt-in** `LinkRule`
+that renders a URL as a compact `<UrlChip>` — favicon + domain + middle-ellipsis
+path (`github.com/…/README.md`), the same chip the chat composer shows while you
+type a URL. It is not applied automatically; a host appends it to its own
+`linkRules`:
+
+```tsx
+import { MarkdownMessage, urlChipRule } from '@djangocfg/widget-code/markdown-message';
+
+<MarkdownMessage content={text} linkRules={[urlChipRule]} />
+```
+
+In the Chat tool this is wired by `ChatConfig.linkChips` (off by default); when
+on, `MessageBubble` passes `linkRules={[urlChipRule]}`.
+
+Behaviour:
+
+- **Bare URLs only.** It chips a link whose rendered label *is* the href (a
+  plain autolink, trailing-slash difference tolerated). A `[labeled](url)` link
+  keeps the author's text and renders as a normal styled link — the rule falls
+  back to an `<a>` using the chat `ANCHOR` tokens so it stays colored +
+  underlined, not stripped to plain text.
+- **Scope is `http(s)` only** (`match: /^https?:\/\//i`). `mailto:` / custom
+  schemes (`cmdop://`, …) are left to other rules, so it needs no `protocols`
+  whitelist.
+- **`www.` host promotion.** Its `preprocess` hook rewrites bare `www.host…`
+  tokens to `https://www.host…` before parsing — GFM only autolinks tokens with
+  a scheme, so without this a bare `www.` host would reach neither the rule nor
+  the default anchor and render as plain text. The promotion is boundary-guarded
+  so it never double-prefixes an already-schemed URL.
+
+`UrlChip` itself is the surface-agnostic chip in `src/common/chips` — see
+[`common/chips/README.md`](../../../../common/chips/README.md).
+
+## Copy action (`<ChatMessageRow>` + `<ActionRow>`)
+
+Two pieces, two responsibilities:
+
+- **`<ActionRow>`** — dumb leaf. Knows the side (`isUser`) and the
+  text to copy (`value`). Owner controls visibility via `visible`.
+- **`<ChatMessageRow>`** — opinionated wrapper. Owns the bubble +
+  action-row layout, hover state with a 250 ms close delay, touch
+  fallback, focus management, and absolute positioning for the row
+  so a hidden row never claims vertical space.
+
+The split exists because:
+
+1. `MarkdownMessage` doesn't know whether it lives in a saturated
+   `bg-primary` bubble or a neutral card — putting the copy icon
+   inside would force it to fight the bubble's palette.
+2. CSS-only `group-hover` bridges flicker when the cursor crosses
+   the gap between the bubble and the (initially-invisible) row.
+   State + a small close timeout is the same pattern Radix Tooltip
+   uses for the same reason.
+
+```tsx
+import { MarkdownMessage, ChatMessageRow, ActionRow } from '@djangocfg/widget-code/markdown-message';
+
+function ChatBubble({ role, content }) {
+  const isUser = role === 'user';
+  return (
+    <ChatMessageRow
+      isUser={isUser}
+      actions={(visible) => (
+        <ActionRow value={content} isUser={isUser} visible={visible} />
+      )}
+    >
+      <div
+        className={
+          isUser
+            ? 'bg-primary text-primary-foreground rounded-xl px-3 py-2'
+            : 'bg-card border border-border rounded-xl px-3 py-2'
+        }
+      >
+        <MarkdownMessage content={content} isUser={isUser} plainText={isUser} />
+      </div>
+    </ChatMessageRow>
+  );
+}
+```
+
+Behaviour:
+
+- **Desktop:** hidden until you hover anywhere over the row (bubble
+  or its action area). 250 ms close delay so cursor travel from
+  bubble to button never flickers. Fades over 150 ms.
+- **Touch (`@media (hover: none), (pointer: coarse)`):** always
+  visible at full opacity, in-flow under the bubble (so it claims
+  honest layout space — touch users have no hover, the affordance
+  must always be reachable).
+- **Keyboard:** `focus-within` opens the row, `blur` outside the row
+  schedules the same close timeout.
+- **Side:** the row sits on the same side as the bubble (`isUser`
+  flips alignment); the icon itself is never mirrored.
+
+Pass the original `content` string to `ActionRow.value` so collapsed
+bubbles still copy the full text, not the truncated `displayContent`.
+
+The `actions` prop is a render-prop (`(visible, isUser) => ReactNode`)
+so it's already future-proof for richer rows like
+`[Copy] [Like] [Regenerate]`.
+
+## Files
+
+| File | Purpose |
+|---|---|
+| `MarkdownMessage.tsx` | Main component — composes plugins, runs heuristic, renders |
+| `components.tsx` | The `Components` map — typography, lists, table, code, blockquote, hr |
+| `CodeBlock.tsx` | Code-fence renderer (`PrettyCode`) + plain `<pre>` fallback |
+| `linkRules.ts` | Declarative custom-URL primitive — schema & helpers |
+| `builtinRules.tsx` | Shipped opt-in rules — `urlChipRule` (bare URL → `<UrlChip>`) |
+| `plainText.ts` | `looksLikePlainProse` heuristic + `extractTextFromChildren` utility |
+| `sanitize.ts` | Extended rehype-sanitize schema + `urlTransform` builder |
+| `CollapseToggle.tsx` | "Read more / Show less" affordance for long replies |
+| `ActionRow.tsx` | Dumb action row (copy button); owner toggles `visible` |
+| `ChatMessageRow.tsx` | Bubble + action-row wrapper with hover state and touch fallback |
+| `MarkdownMessage.story.tsx` | Storybook — kitchen sink, link rules, mermaid, soft breaks, plugin sampler |
+
+## Stories
+
+Open the storybook and look at:
+
+- `Markdown Message / Link Rules` — declarative `linkRules` API in three modes.
+- `Markdown Message / Chat Bubbles` — plain-text fast path vs heuristic vs long reply.
+- `Markdown Message / Soft Line Breaks` — the `remark-breaks` regression case (joke,
+  poem, dialogue).
+- `Markdown Message / Chat Plugins` — emoji shortcodes, smart typography, external
+  link tagging, in one bubble.
+- `Markdown Message / Kitchen Sink` — every block element together, used to spot
+  spacing regressions at a glance.
+- `Markdown Message / Mermaid Diagrams` — flowchart + sequence diagram in a bubble.
+- `Markdown Message / Copy Actions` — hover-revealed copy button on user and assistant bubbles.

package/src/markdown-message/builtinRules.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+/**
+ * Built-in `LinkRule`s shipped with `MarkdownMessage`. These are opt-in —
+ * a host enables them (e.g. via `ChatConfig.linkChips`) by appending them
+ * to its own `linkRules` array; they are NOT applied automatically.
+ *
+ * ── `urlChipRule` ──
+ *
+ * Renders a BARE web URL (a plain `https://…` autolink, where the markdown
+ * link text === the href) as a compact `<UrlChip>` (favicon + domain +
+ * middle-ellipsis path) — the same chip the composer shows while you type a
+ * URL. This makes a URL read identically across the composer and the
+ * rendered bubble (plan22's reuse goal).
+ *
+ * Deliberately CHIPS ONLY bare URLs:
+ *   - `https://github.com/wailsapp/wails`  → chip (children === href)
+ *   - `[the repo](https://github.com/...)` → NOT chipped — the author chose
+ *     custom link text, so we honour it and render a normal styled link
+ *     (fall through to the built-in anchor).
+ *
+ * Scope is `http(s)` only — `mailto:` / custom schemes (`cmdop://`, …) are
+ * left to other rules. Because it only matches `http(s)`, it needs no extra
+ * `protocols` whitelist.
+ */
+
+import type React from 'react';
+
+import { UrlChip } from '@djangocfg/widget-editor/chips';
+import { ANCHOR } from '../role-tokens';
+import { extractTextFromChildren } from './plainText';
+import type { LinkRule } from './types';
+
+/** True when the link's rendered label is just the href itself (a bare
+ *  autolinked URL), i.e. the author did NOT supply custom link text. We
+ *  compare the flattened text label to the href, tolerating a trailing
+ *  slash difference that markdown autolinkers sometimes introduce. */
+function isBareUrlLink(href: string, children: React.ReactNode): boolean {
+  const label = extractTextFromChildren(children).trim();
+  if (!label) return true; // no visible text → treat as bare
+  const strip = (s: string) => s.replace(/\/+$/, '');
+  return strip(label) === strip(href);
+}
+
+/**
+ * Promote bare `www.host…` tokens to `https://www.host…` BEFORE markdown
+ * parsing. remark-gfm only autolinks tokens with a scheme, so a bare `www.`
+ * host would otherwise reach neither this rule nor the default anchor — it
+ * renders as unstyled plain text (the reported bug). Adding the scheme lets
+ * gfm autolink it so the chip rule can claim it, matching the composer
+ * (whose autolink whitelist also chips `www.` hosts).
+ *
+ * Guards against double-prefixing: only matches a `www.` that is preceded by
+ * a whitespace / line-start / `(` boundary AND not already part of a
+ * `://www.` or `](…www.` URL.
+ */
+function promoteWwwHosts(source: string): string {
+  return source.replace(
+    /(^|[\s(])(www\.[^\s)<>]+)/gim,
+    (_m, lead: string, host: string) => `${lead}https://${host}`,
+  );
+}
+
+export const urlChipRule: LinkRule = {
+  name: 'url-chip',
+  // Promote bare `www.` hosts so gfm autolinks them (then we chip them).
+  preprocess: promoteWwwHosts,
+  // Only real web URLs. Leave mailto:/custom schemes to other rules.
+  match: (href) => /^https?:\/\//i.test(href),
+  render: ({ href, children, isUser }) => {
+    // Honour author-chosen link text: a `[label](url)` link with custom
+    // text is NOT chipped — render a normal styled link so the chosen words
+    // stay the link. Use the SAME anchor styling as the built-in renderer
+    // (`ANCHOR`) so it reads as a link (colored + underlined), not plain
+    // text — otherwise claiming the href here strips the default styling.
+    if (!isBareUrlLink(href, children)) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={isUser ? ANCHOR.user : ANCHOR.assistant}
+        >
+          {children}
+        </a>
+      );
+    }
+    return <UrlChip href={href} />;
+  },
+};
+
+export default urlChipRule;