openclaw/apps/web/lib/diff-blocks.ts
kumarabhirup 0f6849a731
Web app: add syntax highlighting, diff viewer, rich chat editor, and file search
Syntax highlighting & code viewer:
- Add shiki for syntax-highlighted fenced code blocks in chat messages
- New SyntaxBlock component (lazy shiki, dual light/dark theme)
- New CodeViewer for workspace file panel (routes code files via isCodeFile())
- API routes (browse-file, virtual-file) now return "code" type for known extensions

Diff rendering:
- New DiffCard component for rendering unified diffs with add/remove colors
- diff-blocks.ts parser to extract fenced blocks from markdown
- Chain-of-thought tool steps show inline diffs for edit/write tools
  (synthetic from old_string/new_string or direct from tool output)
- Agent runner passes through diff/firstChangedLine from edit tool results
- Document view handles diff blocks alongside report blocks

Rich chat editor (Tiptap):
- Replace plain textarea with Tiptap-based ChatEditor
- File mention extension (@-mention files with autocomplete dropdown)
- File mention list with keyboard navigation and search via suggest-files API
- New suggest-files API endpoint for fuzzy file search

File search & navigation:
- FileSearch component in workspace sidebar (debounced search, keyboard nav)
- Search results navigate sidebar to file location and open in panel
- File picker modal for browsing/selecting workspace files

Drag & drop:
- File tree nodes support native HTML5 drag (application/x-file-mention)
  for cross-component drops (e.g. dragging files into chat editor)

Chat attachments reworked:
- Switch from browser File objects to path-based references (name + path)
- Simplified attachment strip (no media previews, shows shortened paths)

Also adds software-engineering skill and related CSS for code blocks/shiki.
2026-02-13 18:06:59 -08:00

50 lines
1.3 KiB
TypeScript

/**
* Pure utility functions for parsing ```diff blocks from chat/document text.
* Mirrors the pattern in report-blocks.ts for testability.
*/
export type DiffSegment =
| { type: "text"; text: string }
| { type: "diff-artifact"; diff: string };
/**
* Split text containing ```diff ... ``` fenced blocks into
* alternating text and diff-artifact segments.
*/
export function splitDiffBlocks(text: string): DiffSegment[] {
const diffFenceRegex = /```diff\s*\n([\s\S]*?)```/g;
const segments: DiffSegment[] = [];
let lastIndex = 0;
for (const match of text.matchAll(diffFenceRegex)) {
const before = text.slice(lastIndex, match.index);
if (before.trim()) {
segments.push({ type: "text", text: before });
}
const diffContent = match[1].trimEnd();
if (diffContent) {
segments.push({ type: "diff-artifact", diff: diffContent });
} else {
// Empty diff block -- render as plain text
segments.push({ type: "text", text: match[0] });
}
lastIndex = (match.index ?? 0) + match[0].length;
}
const remaining = text.slice(lastIndex);
if (remaining.trim()) {
segments.push({ type: "text", text: remaining });
}
return segments;
}
/**
* Check if text contains any diff fenced blocks.
*/
export function hasDiffBlocks(text: string): boolean {
return text.includes("```diff");
}