@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/chat-markdown/diff-blocks/StreamingDiffBlock.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Streaming Diff Block
+ *
+ * Main component that handles streaming diff content with multiple styles.
+ * Optimized for performance with thousands of streaming chunks.
+ *
+ * State Machine:
+ * detecting → buffering → streaming → complete
+ *           ↘ fallback (if unrecognized)
+ */
+import React from "react";
+export interface StreamingDiffBlockProps {
+    content: string;
+    language?: string;
+    isStreamActive?: boolean;
+    className?: string;
+}
+/**
+ * Main StreamingDiffBlock component
+ * Highly optimized for streaming performance
+ */
+export declare const StreamingDiffBlock: React.FC<StreamingDiffBlockProps>;

package/dist/display/chat-markdown/diff-blocks/StreamingDiffBlock.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { detectDiffStyle, getDiffStyleHandler } from "./diff-style-registry.js";
+import { SearchReplaceDiffRenderer } from "./renderers/SearchReplaceDiffRenderer.js";
+import { DiffLoadingIndicator } from "./DiffLoadingIndicator.js";
+import CodeBlock from "../../../code-block/CodeBlock.js";
+import { cn } from "@ai-matrx/design-system";
+function useStreamingState(content, isStreamActive) {
+  return useMemo(() => {
+    if (!content || content.trim().length < 15) {
+      return { state: "detecting", style: "unknown", confidence: 0 };
+    }
+    const detection = detectDiffStyle(content);
+    if (detection.confidence < 0.6) {
+      if (isStreamActive) {
+        return {
+          state: "detecting",
+          style: "unknown",
+          confidence: detection.confidence
+        };
+      } else {
+        return {
+          state: "fallback",
+          style: "unknown",
+          confidence: detection.confidence
+        };
+      }
+    }
+    if (isStreamActive) {
+      return {
+        state: "streaming",
+        style: detection.style,
+        confidence: detection.confidence
+      };
+    } else {
+      return {
+        state: "complete",
+        style: detection.style,
+        confidence: detection.confidence
+      };
+    }
+  }, [content, isStreamActive]);
+}
+const StreamingDiffBlock = React.memo(
+  ({ content, language = "typescript", isStreamActive = false, className }) => {
+    const { state, style, confidence } = useStreamingState(
+      content,
+      isStreamActive
+    );
+    const handler = useMemo(() => {
+      if (style === "unknown") return null;
+      return getDiffStyleHandler(style);
+    }, [style]);
+    const parsedData = useMemo(() => {
+      if (!handler) return null;
+      return handler.parse(content);
+    }, [handler, content]);
+    switch (state) {
+      case "detecting":
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-lg border border-neutral-200 dark:border-neutral-700 bg-muted/30",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(DiffLoadingIndicator, { message: "Identifying code to target..." })
+          }
+        );
+      case "fallback":
+        return /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            showSource: true,
+            code: content,
+            language: "diff",
+            showLineNumbers: true,
+            className
+          }
+        );
+      case "streaming":
+      case "complete":
+        return renderDiffByStyle(
+          style,
+          parsedData,
+          language,
+          isStreamActive,
+          className
+        );
+      default:
+        return null;
+    }
+  }
+);
+StreamingDiffBlock.displayName = "StreamingDiffBlock";
+function renderDiffByStyle(style, parsedData, language, isStreamActive, className) {
+  switch (style) {
+    case "search-replace":
+      return /* @__PURE__ */ jsx(
+        SearchReplaceDiffRenderer,
+        {
+          data: parsedData,
+          language,
+          isStreamActive,
+          className
+        }
+      );
+    // Add more style renderers here as needed
+    // case 'unified':
+    //   return <UnifiedDiffRenderer data={parsedData} ... />;
+    case "unknown":
+    default: {
+      const fallbackData = parsedData;
+      return /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          showSource: true,
+          code: fallbackData?.search || fallbackData?.replace || "// Unknown diff format",
+          language: "diff",
+          showLineNumbers: true,
+          className
+        }
+      );
+    }
+  }
+}
+export {
+  StreamingDiffBlock
+};

package/dist/display/chat-markdown/diff-blocks/diff-style-registry.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Diff Style Registry
+ *
+ * Extensible system for detecting and handling different diff formats
+ * Optimized for streaming content with partial detection
+ */
+import { DiffStyle, DiffStyleDetection, DiffStyleHandler } from './types.js';
+/**
+ * Detect the style of diff from streaming content
+ * Optimized for partial content - returns best guess so far
+ */
+export declare function detectDiffStyle(content: string): DiffStyleDetection;
+/**
+ * Get handler for a specific style
+ */
+export declare function getDiffStyleHandler(style: DiffStyle): DiffStyleHandler | null;
+/**
+ * Quick check if content looks like any diff format
+ * Used to decide whether to use StreamingDiffBlock or regular code block
+ */
+export declare function looksLikeDiff(content: string): boolean;

package/dist/display/chat-markdown/diff-blocks/diff-style-registry.js

@@ -0,0 +1,91 @@
+const searchReplaceHandler = {
+  name: "search-replace",
+  canShowPartial: false,
+  // We buffer SEARCH, stream REPLACE
+  detect: (content) => {
+    const hasSearch = /SEARCH:/i.test(content);
+    const hasReplace = /REPLACE:/i.test(content);
+    const hasDelimiters = /<{1,3}/.test(content) && />{1,3}/.test(content);
+    let confidence = 0;
+    if (hasSearch) confidence += 0.4;
+    if (hasReplace) confidence += 0.4;
+    if (hasDelimiters) confidence += 0.2;
+    if (hasSearch && hasDelimiters) confidence = Math.max(confidence, 0.8);
+    return {
+      style: "search-replace",
+      confidence,
+      metadata: {
+        hasSearchKeyword: hasSearch,
+        hasReplaceKeyword: hasReplace,
+        hasDelimiters
+      }
+    };
+  },
+  parse: (content) => {
+    const searchMatch = content.match(/SEARCH:\s*\n\s*<<<\s*\n([\s\S]*?)(?:\n\s*>>>|$)/i);
+    const replaceMatch = content.match(/REPLACE:\s*\n\s*<<<\s*\n([\s\S]*?)(?:\n\s*>>>|$)/i);
+    const searchContent = searchMatch ? searchMatch[1] : "";
+    const replaceContent = replaceMatch ? replaceMatch[1] : "";
+    const searchComplete = !!content.match(/SEARCH:\s*\n\s*<<<\s*\n[\s\S]*?\n\s*>>>/i);
+    const replaceComplete = !!content.match(/REPLACE:\s*\n\s*<<<\s*\n[\s\S]*?\n\s*>>>/i);
+    return {
+      search: searchContent.trim(),
+      replace: replaceContent.trim(),
+      searchComplete,
+      replaceComplete,
+      isComplete: searchComplete && replaceComplete
+    };
+  }
+};
+const unifiedDiffHandler = {
+  name: "unified",
+  canShowPartial: true,
+  // Can show line by line
+  detect: (content) => {
+    const hasDiffMarkers = /^[+-](?!--)/.test(content);
+    const hasMultipleMarkers = (content.match(/^[+-]/gm) || []).length > 1;
+    let confidence = 0;
+    if (hasDiffMarkers) confidence += 0.5;
+    if (hasMultipleMarkers) confidence += 0.3;
+    return {
+      style: "unified",
+      confidence,
+      metadata: {
+        hasDiffMarkers
+      }
+    };
+  },
+  parse: (content) => {
+    return { lines: content.split("\n") };
+  }
+};
+const DIFF_STYLE_HANDLERS = [
+  searchReplaceHandler
+  // unifiedDiffHandler, // Add when ready
+  // Add more handlers here as needed
+];
+function detectDiffStyle(content) {
+  if (!content || content.trim().length < 5) {
+    return { style: "unknown", confidence: 0 };
+  }
+  let bestMatch = { style: "unknown", confidence: 0 };
+  for (const handler of DIFF_STYLE_HANDLERS) {
+    const detection = handler.detect(content);
+    if (detection.confidence > bestMatch.confidence) {
+      bestMatch = detection;
+    }
+  }
+  return bestMatch;
+}
+function getDiffStyleHandler(style) {
+  return DIFF_STYLE_HANDLERS.find((h) => h.name === style) || null;
+}
+function looksLikeDiff(content) {
+  if (!content || content.trim().length < 5) return false;
+  return /SEARCH:/i.test(content) || /^[+-](?!--)/m.test(content) || /^diff --git/m.test(content) || /<{2,3}.*>{2,3}/s.test(content);
+}
+export {
+  detectDiffStyle,
+  getDiffStyleHandler,
+  looksLikeDiff
+};

package/dist/display/chat-markdown/diff-blocks/renderers/SearchReplaceDiffRenderer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * SEARCH/REPLACE Diff Renderer
+ *
+ * Handles the streaming illusion for SEARCH/REPLACE blocks:
+ * 1. Buffer SEARCH silently (show loading)
+ * 2. Stream REPLACE as code
+ * 3. Switch to diff view when complete
+ *
+ * Features:
+ * - Collapsed preview (4 lines) when complete
+ * - Diff statistics (+/- counts)
+ * - Smooth expand/collapse with fade effect
+ */
+import React from "react";
+import type { SearchReplaceBlock } from "../types.js";
+interface SearchReplaceDiffRendererProps {
+    data: SearchReplaceBlock;
+    language?: string;
+    isStreamActive?: boolean;
+    className?: string;
+}
+/**
+ * Efficiently render SEARCH/REPLACE diff with streaming support
+ */
+export declare const SearchReplaceDiffRenderer: React.FC<SearchReplaceDiffRendererProps>;
+export {};

package/dist/display/chat-markdown/diff-blocks/renderers/SearchReplaceDiffRenderer.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { computeLineChanges } from "@ai-matrx/diff/text";
+import { DiffView } from "../../../../utils/lifted/DiffView.js";
+import CodeBlock from "../../../../code-block/CodeBlock.js";
+import { DiffLoadingIndicator } from "../DiffLoadingIndicator.js";
+import { DiffCollapsible } from "../DiffCollapsible.js";
+import { GitCompare } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { useThemeMode } from "../../../../host/app-bindings.js";
+import { ShikiCodeView } from "../../../../code-block/highlight/ShikiCodeView.js";
+const DiffPreview = ({ lines, language, maxLines = 4 }) => {
+  const mode = useThemeMode();
+  const previewLines = lines.slice(0, maxLines);
+  const getDiffLineStyle = (type) => {
+    if (type === "added") {
+      return mode === "dark" ? "bg-green-900/60 border-l-4 border-green-500" : "bg-green-100 border-l-4 border-green-600";
+    }
+    if (type === "removed") {
+      return mode === "dark" ? "bg-red-900/60 border-l-4 border-red-500" : "bg-red-100 border-l-4 border-red-600";
+    }
+    return mode === "dark" ? "bg-transparent" : "bg-transparent";
+  };
+  const getDiffLinePrefix = (type) => {
+    if (type === "added") return "+ ";
+    if (type === "removed") return "- ";
+    return "  ";
+  };
+  const getDiffLinePrefixColor = (type) => {
+    if (type === "added") {
+      return mode === "dark" ? "text-green-400" : "text-green-700";
+    }
+    if (type === "removed") {
+      return mode === "dark" ? "text-red-400" : "text-red-700";
+    }
+    return mode === "dark" ? "text-gray-500" : "text-gray-600";
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "font-mono text-xs",
+        mode === "dark" ? "bg-zinc-900" : "bg-white"
+      ),
+      children: previewLines.map((line, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex items-center", getDiffLineStyle(line.type)),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "shrink-0 w-10 text-right pr-2 select-none",
+                  mode === "dark" ? "text-gray-500" : "text-gray-400"
+                ),
+                children: line.lineNumber
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "shrink-0 w-4 select-none font-bold",
+                  getDiffLinePrefixColor(line.type)
+                ),
+                children: getDiffLinePrefix(line.type)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 pr-2 overflow-x-auto", children: /* @__PURE__ */ jsx(
+              ShikiCodeView,
+              {
+                code: line.content || " ",
+                language,
+                mode: mode === "dark" ? "dark" : "light",
+                surface: "transparent",
+                padding: { y: 0, x: 0 },
+                wrapLines: false,
+                fontSize: 12
+              }
+            ) })
+          ]
+        },
+        index
+      ))
+    }
+  );
+};
+const SearchReplaceDiffRenderer = ({ data, language = "typescript", isStreamActive = false, className }) => {
+  const { search, replace, searchComplete, replaceComplete, isComplete } = data;
+  const diffData = useMemo(() => {
+    if (!isComplete || !search || !replace) return null;
+    return computeLineChanges(search, replace);
+  }, [isComplete, search, replace]);
+  const streamScrollRef = useRef(null);
+  useEffect(() => {
+    const el = streamScrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [replace]);
+  if (!searchComplete) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-lg border border-neutral-200 dark:border-neutral-700 bg-muted/30",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(DiffLoadingIndicator, { message: "Analyzing code..." })
+      }
+    );
+  }
+  if (searchComplete && !replaceComplete) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: replace && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: streamScrollRef,
+        className: "max-h-[140px] overflow-y-auto",
+        children: /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            showSource: true,
+            code: replace,
+            language,
+            showLineNumbers: true,
+            isStreamActive
+          }
+        )
+      }
+    ) });
+  }
+  if (diffData) {
+    return /* @__PURE__ */ jsx(
+      DiffCollapsible,
+      {
+        icon: /* @__PURE__ */ jsx(GitCompare, { className: "h-3.5 w-3.5 text-emerald-500" }),
+        title: "Code Updates",
+        initialOpen: false,
+        className,
+        additions: diffData.additions,
+        deletions: diffData.deletions,
+        showPreview: true,
+        previewContent: /* @__PURE__ */ jsx(
+          DiffPreview,
+          {
+            lines: diffData.lines,
+            language,
+            maxLines: 4
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          DiffView,
+          {
+            originalCode: search,
+            modifiedCode: replace,
+            language,
+            showLineNumbers: true
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-neutral-200 dark:border-neutral-700",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          showSource: true,
+          code: replace || search || "// No content",
+          language,
+          showLineNumbers: true
+        }
+      )
+    }
+  );
+};
+export {
+  SearchReplaceDiffRenderer
+};

package/dist/display/chat-markdown/diff-blocks/types.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Streaming Diff Block Types
+ *
+ * Defines types for different streaming diff styles and their states
+ */
+/**
+ * Different styles of diffs we support
+ */
+export type DiffStyle = 'search-replace' | 'unified' | 'git' | 'inline' | 'unknown';
+/**
+ * Streaming state for diff rendering
+ */
+export type StreamingDiffState = 'detecting' | 'buffering' | 'streaming' | 'complete' | 'fallback';
+/**
+ * Parsed SEARCH/REPLACE block (streaming-aware — tracks per-block completion)
+ */
+export interface SearchReplaceBlock {
+    search: string;
+    replace: string;
+    searchComplete: boolean;
+    replaceComplete: boolean;
+    isComplete: boolean;
+}
+/**
+ * Parsed unified diff (line-based) block
+ */
+export interface UnifiedDiffBlock {
+    lines: string[];
+}
+/**
+ * Union of every shape a diff style handler's parse() can return.
+ * Extend this when a new DiffStyleHandler is added.
+ */
+export type ParsedDiffBlock = SearchReplaceBlock | UnifiedDiffBlock;
+/**
+ * Result of diff style detection
+ */
+export interface DiffStyleDetection {
+    style: DiffStyle;
+    confidence: number;
+    metadata?: {
+        hasSearchKeyword?: boolean;
+        hasReplaceKeyword?: boolean;
+        hasDelimiters?: boolean;
+        hasDiffMarkers?: boolean;
+    };
+}
+/**
+ * Configuration for a diff style handler
+ */
+export interface DiffStyleHandler {
+    name: string;
+    detect: (content: string) => DiffStyleDetection;
+    parse: (content: string) => ParsedDiffBlock;
+    canShowPartial: boolean;
+}

package/dist/display/chat-markdown/internal-handlers/BlockFallback.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { RenderBlock } from "../block-registry/BlockRenderer.js";
+interface BlockFallbackProps {
+    block: RenderBlock;
+    isStreamActive?: boolean;
+}
+/**
+ * Tiered fallback for a block whose rich renderer crashed.
+ *
+ * Ladder (each rung guarded by its own boundary):
+ *   structured renderer (already failed, handled by the caller)
+ *     → pretty JSON / code block
+ *       → plain text <pre>
+ *
+ * This replaces the old "dump raw content in a yellow warning box" behavior so
+ * a `presentation` / `quiz` / `diagram` / code block that fails to render still
+ * shows readable JSON (or code) instead of an ugly crash banner.
+ */
+export declare const BlockFallback: React.FC<BlockFallbackProps>;
+export {};

package/dist/display/chat-markdown/internal-handlers/BlockFallback.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { MarkdownErrorBoundary } from "./MarkdownErrorBoundary.js";
+import {
+  isKindJsonText,
+  rootKindSlug,
+  valueCarriesKind
+} from "@ai-matrx/content-ir/surfaces";
+const CodeBlock = lazy(
+  () => import("../../../code-block/CodeBlock.js")
+);
+const StructuredValueView = lazy(
+  () => import("../../../host/app-bindings.js").then((m) => ({ default: m.StructuredValueView }))
+);
+const PlainTextFallback = ({ content }) => /* @__PURE__ */ jsx("pre", { className: "my-2 px-3 py-2 text-sm text-neutral-700 dark:text-neutral-300 whitespace-pre-wrap break-words rounded-md border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/40 overflow-x-auto", children: content || "[empty block]" });
+function tryPrettyJson(content) {
+  const trimmed = content.trim();
+  if (!trimmed) return null;
+  const first = trimmed[0];
+  if (first !== "{" && first !== "[") return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (parsed && typeof parsed === "object") {
+      return JSON.stringify(parsed, null, 2);
+    }
+  } catch {
+  }
+  return null;
+}
+function resolveCodeFallback(block) {
+  const content = block.content ?? "";
+  const pretty = tryPrettyJson(content);
+  if (pretty !== null) {
+    return { code: pretty, language: "json" };
+  }
+  if (block.language === "json" || block.language === "yaml") {
+    return { code: content, language: block.language };
+  }
+  return { code: content, language: block.language || "" };
+}
+function crashedKindValue(block, isStreamActive) {
+  if (isStreamActive) return null;
+  const content = (block.content ?? "").trim();
+  if (!isKindJsonText(content)) return null;
+  try {
+    const value = JSON.parse(content);
+    if (!valueCarriesKind(value)) return null;
+    return { value, slug: rootKindSlug(value) };
+  } catch {
+    return null;
+  }
+}
+const BlockFallback = ({
+  block,
+  isStreamActive
+}) => {
+  const { code, language } = resolveCodeFallback(block);
+  const crashedKind = crashedKindValue(block, isStreamActive);
+  if (crashedKind) {
+    return /* @__PURE__ */ jsx(MarkdownErrorBoundary, { fallback: /* @__PURE__ */ jsx(PlainTextFallback, { content: code }), children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx("div", { className: "my-3", children: /* @__PURE__ */ jsx(
+      StructuredValueView,
+      {
+        value: crashedKind.value,
+        kind: crashedKind.slug ?? void 0,
+        note: "its view hit an error"
+      }
+    ) }) }) });
+  }
+  return /* @__PURE__ */ jsx(MarkdownErrorBoundary, { fallback: /* @__PURE__ */ jsx(PlainTextFallback, { content: code }), children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PlainTextFallback, { content: code }), children: /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      code,
+      language: language || "text",
+      fontSize: 14,
+      className: "my-3",
+      isStreamActive
+    }
+  ) }) });
+};
+export {
+  BlockFallback
+};

package/dist/display/chat-markdown/internal-handlers/InlineStatusIndicator.d.ts

@@ -0,0 +1,4 @@
+export interface InlineStatusIndicatorProps {
+    label: string;
+}
+export declare const InlineStatusIndicator: React.FC<InlineStatusIndicatorProps>;

package/dist/display/chat-markdown/internal-handlers/InlineStatusIndicator.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+const InlineStatusIndicator = ({
+  label
+}) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 py-2", children: /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: "inline-block text-sm bg-clip-text text-transparent bg-[length:200%_100%] animate-shimmer",
+    style: {
+      backgroundImage: "linear-gradient(90deg, hsl(var(--muted-foreground) / 0.3) 0%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground) / 0.3) 100%)"
+    },
+    children: label
+  }
+) });
+export {
+  InlineStatusIndicator
+};

package/dist/display/chat-markdown/internal-handlers/MarkdownErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React, { ErrorInfo } from "react";
+interface MarkdownErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback: React.ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+export declare class MarkdownErrorBoundary extends React.Component<MarkdownErrorBoundaryProps, {
+    hasError: boolean;
+}> {
+    constructor(props: MarkdownErrorBoundaryProps);
+    static getDerivedStateFromError(_: Error): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};