@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/markdownComponents.tsx

@@ -0,0 +1,257 @@
+import React from 'react';
+
+import { CopyButton } from '@renderer/components/common/CopyButton';
+import { PROSE_BODY } from '@renderer/constants/cssVariables';
+
+import { FileLink, isRelativeUrl } from './viewers/FileLink';
+import { extractTextFromReactNode } from './markdownCopyUtils';
+import { highlightSearchInChildren, type SearchContext } from './searchHighlightUtils';
+
+import type { Components } from 'react-markdown';
+
+interface MarkdownComponentOptions {
+  copyCodeBlocks?: boolean;
+}
+
+/**
+ * Create inline markdown components for rendering prose content.
+ * When searchCtx is provided, search term highlighting is applied
+ * to text nodes while preserving full markdown rendering.
+ */
+export function createMarkdownComponents(
+  searchCtx: SearchContext | null,
+  options: MarkdownComponentOptions = {}
+): Components {
+  const { copyCodeBlocks = false } = options;
+  const hl = (children: React.ReactNode): React.ReactNode =>
+    searchCtx ? highlightSearchInChildren(children, searchCtx) : children;
+
+  return {
+    // Headings - Bold text with generous spacing to break up content
+    h1: ({ children }) => (
+      <h1
+        className="mb-3 mt-6 text-lg font-semibold first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h1>
+    ),
+    h2: ({ children }) => (
+      <h2
+        className="mb-2 mt-5 text-base font-semibold first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h2>
+    ),
+    h3: ({ children }) => (
+      <h3
+        className="mb-2 mt-4 text-sm font-semibold first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h3>
+    ),
+    h4: ({ children }) => (
+      <h4
+        className="mb-1.5 mt-3 text-sm font-semibold first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h4>
+    ),
+    h5: ({ children }) => (
+      <h5
+        className="mb-1 mt-2 text-sm font-medium first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h5>
+    ),
+    h6: ({ children }) => (
+      <h6
+        className="mb-1 mt-2 text-xs font-medium first:mt-0"
+        style={{ color: 'var(--prose-heading)' }}
+      >
+        {hl(children)}
+      </h6>
+    ),
+
+    // Paragraphs
+    p: ({ children }) => (
+      <p
+        className="my-2 text-sm leading-relaxed first:mt-0 last:mb-0"
+        style={{ color: PROSE_BODY }}
+      >
+        {hl(children)}
+      </p>
+    ),
+
+    // Links — inline element, no hl(); parent block element's hl() descends here
+    a: ({ href, children }) => {
+      if (href && isRelativeUrl(href)) {
+        return <FileLink href={href}>{children}</FileLink>;
+      }
+      return (
+        <a
+          href={href}
+          className="no-underline hover:underline"
+          style={{ color: 'var(--prose-link)' }}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {children}
+        </a>
+      );
+    },
+
+    // Strong/Bold — inline element, no hl()
+    strong: ({ children }) => (
+      <strong className="font-semibold" style={{ color: 'var(--prose-heading)' }}>
+        {children}
+      </strong>
+    ),
+
+    // Emphasis/Italic — inline element, no hl()
+    em: ({ children }) => (
+      <em className="italic" style={{ color: PROSE_BODY }}>
+        {children}
+      </em>
+    ),
+
+    // Strikethrough — inline element, no hl()
+    del: ({ children }) => (
+      <del className="line-through" style={{ color: PROSE_BODY }}>
+        {children}
+      </del>
+    ),
+
+    // Inline code vs block code (block is highlighted by rehype-highlight; preserve hljs class)
+    code: ({ className, children }) => {
+      const hasLanguageClass = className?.includes('language-');
+      const content = typeof children === 'string' ? children : '';
+      const isMultiLine = content.includes('\n');
+      const isBlock = (hasLanguageClass ?? false) || isMultiLine;
+
+      if (isBlock) {
+        return (
+          <code
+            className={`block font-mono text-xs ${className ?? ''}`.trim()}
+            style={{ color: 'var(--color-text)' }}
+          >
+            {hl(children)}
+          </code>
+        );
+      }
+      // Inline code — no hl(); parent block element's hl() descends here
+      return (
+        <code
+          className="rounded px-1.5 py-0.5 font-mono text-xs"
+          style={{
+            backgroundColor: 'var(--prose-code-bg)',
+            color: 'var(--prose-code-text)',
+          }}
+        >
+          {children}
+        </code>
+      );
+    },
+
+    // Code blocks
+    pre: ({ children }) => {
+      const codeText = copyCodeBlocks ? extractTextFromReactNode(children).trim() : '';
+
+      return (
+        <pre
+          className={`my-3 overflow-x-auto rounded-lg p-3 font-mono text-xs leading-relaxed ${codeText ? 'group relative' : ''}`.trim()}
+          style={{
+            backgroundColor: 'var(--prose-pre-bg)',
+            border: '1px solid var(--prose-pre-border)',
+            color: 'var(--color-text)',
+          }}
+        >
+          {codeText ? <CopyButton text={codeText} /> : null}
+          {children}
+        </pre>
+      );
+    },
+
+    // Blockquotes
+    blockquote: ({ children }) => (
+      <blockquote
+        className="my-3 border-l-4 pl-4 italic"
+        style={{
+          borderColor: 'var(--prose-blockquote-border)',
+          color: 'var(--prose-muted)',
+        }}
+      >
+        {hl(children)}
+      </blockquote>
+    ),
+
+    // Lists
+    ul: ({ children }) => (
+      <ul className="my-2 list-disc space-y-1 pl-5" style={{ color: PROSE_BODY }}>
+        {children}
+      </ul>
+    ),
+    ol: ({ children }) => (
+      <ol className="my-2 list-decimal space-y-1 pl-5" style={{ color: PROSE_BODY }}>
+        {children}
+      </ol>
+    ),
+    li: ({ children }) => (
+      <li className="text-sm" style={{ color: PROSE_BODY }}>
+        {hl(children)}
+      </li>
+    ),
+
+    // Tables
+    table: ({ children }) => (
+      <div className="my-3 overflow-x-auto">
+        <table
+          className="min-w-full border-collapse text-sm"
+          style={{ borderColor: 'var(--prose-table-border)' }}
+        >
+          {children}
+        </table>
+      </div>
+    ),
+    thead: ({ children }) => (
+      <thead style={{ backgroundColor: 'var(--prose-table-header-bg)' }}>{children}</thead>
+    ),
+    th: ({ children }) => (
+      <th
+        className="px-3 py-2 text-left font-semibold"
+        style={{
+          border: '1px solid var(--prose-table-border)',
+          color: 'var(--prose-heading)',
+        }}
+      >
+        {hl(children)}
+      </th>
+    ),
+    td: ({ children }) => (
+      <td
+        className="px-3 py-2"
+        style={{
+          border: '1px solid var(--prose-table-border)',
+          color: PROSE_BODY,
+        }}
+      >
+        {hl(children)}
+      </td>
+    ),
+
+    // Horizontal rule
+    hr: () => <hr className="my-4" style={{ borderColor: 'var(--prose-table-border)' }} />,
+  };
+}
+
+/** Default markdown components without search highlighting (used by CompactBoundary) */
+export const markdownComponents: Components = createMarkdownComponents(null);
+
+/** Markdown components for message-style content with both whole-message and code-block copy */
+export const markdownComponentsWithCodeCopy: Components = createMarkdownComponents(null, {
+  copyCodeBlocks: true,
+});

package/src/renderer/components/chat/markdownCopyUtils.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/**
+ * Extract plain text from rendered markdown children for per-block copy actions.
+ */
+export function extractTextFromReactNode(node: React.ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractTextFromReactNode).join('');
+  }
+  if (React.isValidElement(node)) {
+    const props = node.props as { children?: React.ReactNode };
+    return extractTextFromReactNode(props.children);
+  }
+  return '';
+}

package/src/renderer/components/chat/searchHighlightUtils.ts

@@ -0,0 +1,166 @@
+/**
+ * Search highlighting utilities for use within ReactMarkdown components.
+ * Recursively processes React children to highlight search term matches
+ * while preserving the markdown-rendered element tree.
+ */
+
+import React from 'react';
+
+import type { SearchMatch } from '@renderer/store/types';
+
+/** Stable empty array for item-scoped search selectors (avoids re-renders) */
+export const EMPTY_SEARCH_MATCHES: SearchMatch[] = [];
+
+// Highlight styles matching SearchHighlight.tsx
+const baseStyles: React.CSSProperties = {
+  borderRadius: '0.125rem',
+  padding: '0 0.125rem',
+};
+
+const currentHighlightStyles: React.CSSProperties = {
+  ...baseStyles,
+  backgroundColor: 'var(--highlight-bg)',
+  color: 'var(--highlight-text)',
+  boxShadow: '0 0 0 1px var(--highlight-ring)',
+};
+
+const inactiveHighlightStyles: React.CSSProperties = {
+  ...baseStyles,
+  backgroundColor: 'var(--highlight-bg-inactive)',
+  color: 'var(--highlight-text-inactive)',
+};
+
+export interface SearchContext {
+  itemId: string;
+  query: string;
+  lowerQuery: string;
+  /** Mutable counter tracking match index within the item, incremented as text nodes are processed */
+  matchCounter: { current: number };
+  isCurrentItem: boolean;
+  currentMatchIndexInItem: number | null;
+  /** When true, render all matches using the "current" highlight style */
+  forceAllActive?: boolean;
+}
+
+/**
+ * Create a SearchContext from store state.
+ * Returns null if no search is active.
+ */
+export function createSearchContext(
+  searchQuery: string,
+  itemId: string,
+  searchMatches: SearchMatch[],
+  currentSearchIndex: number
+): SearchContext | null {
+  if (!searchQuery || searchQuery.trim().length === 0) return null;
+
+  const currentMatch = currentSearchIndex >= 0 ? searchMatches[currentSearchIndex] : null;
+  const isCurrentItem = currentMatch?.itemId === itemId;
+
+  return {
+    itemId,
+    query: searchQuery,
+    lowerQuery: searchQuery.toLowerCase(),
+    matchCounter: { current: 0 },
+    isCurrentItem,
+    currentMatchIndexInItem: isCurrentItem ? (currentMatch?.matchIndexInItem ?? null) : null,
+  };
+}
+
+/**
+ * Highlight search term matches in a text string.
+ * Increments matchCounter for each match found.
+ */
+// eslint-disable-next-line sonarjs/function-return-type -- mixed text/element return
+function highlightSearchText(text: string, ctx: SearchContext): React.ReactNode {
+  const lowerText = text.toLowerCase();
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let pos = 0;
+
+  while ((pos = lowerText.indexOf(ctx.lowerQuery, pos)) !== -1) {
+    if (pos > lastIndex) {
+      parts.push(text.slice(lastIndex, pos));
+    }
+
+    const isCurrentResult =
+      ctx.forceAllActive === true ||
+      (ctx.isCurrentItem && ctx.currentMatchIndexInItem === ctx.matchCounter.current);
+
+    parts.push(
+      React.createElement(
+        'mark',
+        {
+          key: `s-${pos}-${ctx.matchCounter.current}`,
+          style: isCurrentResult ? currentHighlightStyles : inactiveHighlightStyles,
+          'data-search-result': isCurrentResult ? 'current' : 'match',
+          'data-search-item-id': ctx.itemId,
+          'data-search-match-index': ctx.matchCounter.current,
+        },
+        text.slice(pos, pos + ctx.query.length)
+      )
+    );
+
+    lastIndex = pos + ctx.query.length;
+    pos = lastIndex;
+    ctx.matchCounter.current++;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  if (parts.length === 0) return text;
+  if (parts.length === 1) return parts[0];
+  return parts;
+}
+
+// eslint-disable-next-line sonarjs/function-return-type -- React child manipulation inherently returns mixed node types
+export function highlightQueryInText(
+  text: string,
+  query: string,
+  itemId: string,
+  options?: { forceAllActive?: boolean }
+): React.ReactNode {
+  const ctx = createSearchContext(query, itemId, [], -1);
+  if (!ctx) return text;
+  if (options?.forceAllActive) ctx.forceAllActive = true;
+  return highlightSearchInChildren(text, ctx);
+}
+
+/**
+ * Recursively process React children to highlight search terms in text nodes.
+ * Preserves the React element tree structure (markdown components, etc.)
+ * while adding <mark> tags to text content.
+ */
+// eslint-disable-next-line sonarjs/function-return-type -- React child manipulation inherently returns mixed node types
+export function highlightSearchInChildren(
+  children: React.ReactNode,
+  ctx: SearchContext
+): React.ReactNode {
+  // eslint-disable-next-line sonarjs/function-return-type -- React child manipulation inherently returns mixed node types
+  return React.Children.map(children, (child): React.ReactNode => {
+    if (typeof child === 'string') {
+      return highlightSearchText(child, ctx);
+    }
+
+    if (React.isValidElement<{ children?: React.ReactNode }>(child)) {
+      // Skip <mark> elements already created by search highlighting to prevent
+      // double-counting when hl() is applied at multiple markdown component levels
+      // (e.g., both the `strong` and `p` components process the same text)
+      if (child.type === 'mark' && (child.props as Record<string, unknown>)['data-search-result']) {
+        return child;
+      }
+
+      if (child.props.children) {
+        return React.cloneElement(
+          child,
+          undefined,
+          highlightSearchInChildren(child.props.children, ctx)
+        );
+      }
+    }
+
+    return child;
+  });
+}

package/src/renderer/components/chat/viewers/CodeBlockViewer.tsx

@@ -0,0 +1,244 @@
+import React, { useMemo, useState } from 'react';
+
+import { getBaseName } from '@renderer/utils/pathUtils';
+import { createLogger } from '@shared/utils/logger';
+import { Check, Copy, FileCode } from 'lucide-react';
+
+const logger = createLogger('Component:CodeBlockViewer');
+
+import { highlightLine } from './syntaxHighlighter';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface CodeBlockViewerProps {
+  fileName: string; // e.g., "src/components/Header.tsx"
+  content: string; // The actual file content
+  language?: string; // Inferred from file extension if not provided
+  startLine?: number; // If partial read, starting line
+  endLine?: number; // If partial read, ending line
+  maxHeight?: string; // CSS max-height class (default: "max-h-96")
+}
+
+// =============================================================================
+// Language Detection
+// =============================================================================
+
+const EXTENSION_LANGUAGE_MAP: Record<string, string> = {
+  // JavaScript/TypeScript
+  '.ts': 'typescript',
+  '.tsx': 'tsx',
+  '.js': 'javascript',
+  '.jsx': 'jsx',
+  '.mjs': 'javascript',
+  '.cjs': 'javascript',
+
+  // Python
+  '.py': 'python',
+  '.pyw': 'python',
+  '.pyx': 'python',
+
+  // Web
+  '.html': 'html',
+  '.htm': 'html',
+  '.css': 'css',
+  '.scss': 'scss',
+  '.sass': 'sass',
+  '.less': 'less',
+
+  // Data formats
+  '.json': 'json',
+  '.jsonl': 'json',
+  '.yaml': 'yaml',
+  '.yml': 'yaml',
+  '.toml': 'toml',
+  '.xml': 'xml',
+
+  // Shell
+  '.sh': 'bash',
+  '.bash': 'bash',
+  '.zsh': 'zsh',
+  '.fish': 'fish',
+
+  // Systems
+  '.rs': 'rust',
+  '.go': 'go',
+  '.c': 'c',
+  '.h': 'c',
+  '.cpp': 'cpp',
+  '.cc': 'cpp',
+  '.hpp': 'hpp',
+  '.java': 'java',
+  '.kt': 'kotlin',
+  '.swift': 'swift',
+
+  // Config
+  '.env': 'env',
+  '.gitignore': 'gitignore',
+  '.dockerignore': 'dockerignore',
+  '.md': 'markdown',
+  '.mdx': 'mdx',
+
+  // Other
+  '.sql': 'sql',
+  '.graphql': 'graphql',
+  '.gql': 'graphql',
+  '.vue': 'vue',
+  '.svelte': 'svelte',
+  '.rb': 'ruby',
+  '.php': 'php',
+  '.lua': 'lua',
+  '.r': 'r',
+  '.R': 'r',
+};
+
+/**
+ * Infer language from file name/extension.
+ */
+function inferLanguage(fileName: string): string {
+  // Check for dotfiles with specific names
+  const baseName = getBaseName(fileName);
+  if (baseName === 'Dockerfile') return 'dockerfile';
+  if (baseName === 'Makefile') return 'makefile';
+  if (baseName.startsWith('.env')) return 'env';
+
+  // Extract extension
+  const extMatch = /(\.[^./]+)$/.exec(fileName);
+  if (extMatch) {
+    const ext = extMatch[1].toLowerCase();
+    return EXTENSION_LANGUAGE_MAP[ext] ?? 'text';
+  }
+
+  return 'text';
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const CodeBlockViewer: React.FC<CodeBlockViewerProps> = ({
+  fileName,
+  content,
+  language,
+  startLine = 1,
+  endLine,
+  maxHeight = 'max-h-96',
+}): React.JSX.Element => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  // Infer language from file extension if not provided
+  const detectedLanguage = language ?? inferLanguage(fileName);
+
+  // Split content into lines
+  const lines = useMemo(() => content.split('\n'), [content]);
+  const totalLines = lines.length;
+
+  // Calculate the actual line range for display
+  const actualEndLine = endLine ?? startLine + totalLines - 1;
+
+  // Handle copy
+  const handleCopy = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch {
+      logger.error('Failed to copy to clipboard');
+    }
+  };
+
+  // Extract just the filename for display
+  const displayFileName = getBaseName(fileName) || fileName;
+
+  return (
+    <div
+      className="overflow-hidden rounded-lg shadow-sm"
+      style={{
+        backgroundColor: 'var(--code-bg)',
+        border: '1px solid var(--code-border)',
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-3 py-2"
+        style={{
+          backgroundColor: 'var(--code-header-bg)',
+          borderBottom: '1px solid var(--code-border)',
+        }}
+      >
+        <div className="flex min-w-0 items-center gap-2">
+          <FileCode className="size-4 shrink-0" style={{ color: 'var(--color-text-muted)' }} />
+          <span
+            className="truncate font-mono text-sm"
+            title={fileName}
+            style={{ color: 'var(--code-filename)' }}
+          >
+            {displayFileName}
+          </span>
+          {(startLine > 1 || endLine) && (
+            <span className="shrink-0 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              (lines {startLine}-{actualEndLine})
+            </span>
+          )}
+          <span
+            className="shrink-0 rounded px-1.5 py-0.5 text-xs"
+            style={{
+              backgroundColor: 'var(--tag-bg)',
+              color: 'var(--tag-text)',
+              border: '1px solid var(--tag-border)',
+            }}
+          >
+            {detectedLanguage}
+          </span>
+        </div>
+
+        {/* Copy button */}
+        <button
+          onClick={handleCopy}
+          className="rounded p-1 transition-colors hover:opacity-80"
+          title="Copy to clipboard"
+          style={{ backgroundColor: 'transparent' }}
+        >
+          {isCopied ? (
+            <Check className="size-4" style={{ color: 'var(--badge-success-bg)' }} />
+          ) : (
+            <Copy className="size-4" style={{ color: 'var(--color-text-muted)' }} />
+          )}
+        </button>
+      </div>
+
+      {/* Code content */}
+      <div className={`overflow-auto ${maxHeight}`}>
+        <pre className="m-0 bg-transparent p-0">
+          <code className="block font-mono text-xs leading-relaxed">
+            {lines.map((line, index) => {
+              const lineNumber = startLine + index;
+              return (
+                <div key={index} className="flex hover:bg-[var(--color-surface-overlay)]">
+                  {/* Line number */}
+                  <span
+                    className="w-12 shrink-0 select-none px-3 py-0.5 text-right"
+                    style={{
+                      color: 'var(--code-line-number)',
+                      borderRight: '1px solid var(--code-border)',
+                    }}
+                  >
+                    {lineNumber}
+                  </span>
+                  {/* Code line */}
+                  <span
+                    className="flex-1 whitespace-pre px-4 py-0.5"
+                    style={{ color: 'var(--color-text)' }}
+                  >
+                    {highlightLine(line, detectedLanguage)}
+                  </span>
+                </div>
+              );
+            })}
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+};