{selectedFile ? (
!loading ? (
selectedFile.type === 'md' && !isShowSourceCode ? (
@@ -568,7 +608,12 @@ export default function Folder({ data }: { data?: Agent }) {
isShowSourceCode ? (
<>{selectedFile.content}
) : (
-
)
) : selectedFile.type === 'zip' ? (
@@ -660,19 +705,133 @@ function joinPath(...paths: string[]): string {
.replace(/\/+/g, '/');
}
+// Helper function to resolve relative paths (handles ../ and ./)
+function resolveRelativePath(basePath: string, relativePath: string): string {
+ // Normalize paths
+ const normalizedBase = basePath.replace(/\\/g, '/');
+ const normalizedRelative = relativePath.replace(/\\/g, '/');
+
+ // If it's not a relative path, return as-is
+ if (!normalizedRelative.startsWith('./') && !normalizedRelative.startsWith('../')) {
+ // It's a simple relative path like "script.js" or "js/script.js"
+ return joinPath(normalizedBase, normalizedRelative);
+ }
+
+ const baseParts = normalizedBase.split('/').filter(Boolean);
+ const relativeParts = normalizedRelative.split('/').filter(Boolean);
+
+ for (const part of relativeParts) {
+ if (part === '.') {
+ // Current directory, skip
+ continue;
+ } else if (part === '..') {
+ // Parent directory, go up one level
+ baseParts.pop();
+ } else {
+ // Regular path segment
+ baseParts.push(part);
+ }
+ }
+
+ return baseParts.join('/');
+}
+
// Component to render HTML with relative image paths resolved
-function HtmlRenderer({ selectedFile }: { selectedFile: FileInfo }) {
+function HtmlRenderer({
+ selectedFile,
+ projectFiles,
+ scriptsApproved,
+ onScriptsDetected,
+}: {
+ selectedFile: FileInfo;
+ projectFiles: FileInfo[];
+ scriptsApproved: boolean;
+ onScriptsDetected: (hasScripts: boolean) => void;
+}) {
+ const { t } = useTranslation();
const [processedHtml, setProcessedHtml] = useState
('');
+ const [hasScripts, setHasScripts] = useState(false);
+ const [rawHtmlWithScriptsCache, setRawHtmlWithScriptsCache] = useState('');
+ const hasShownWarningRef = useRef(null);
+ const iframeRef = useRef(null);
useEffect(() => {
const processHtml = async () => {
if (!selectedFile.content) {
setProcessedHtml('');
+ setHasScripts(false);
return;
}
let html = selectedFile.content;
+ // Get the directory of the HTML file
+ const htmlDir = getDirPath(selectedFile.path);
+
+ // Parse HTML to find referenced JS and CSS files via relative paths
+ const scriptSrcRegex = /]*src\s*=\s*["']([^"']+)["'][^>]*>/gi;
+ const linkHrefRegex = /]*href\s*=\s*["']([^"']+\.css)["'][^>]*>/gi;
+
+ const referencedPaths: Set = new Set();
+
+ // Helper to extract and resolve paths
+ const addReferencedPath = (url: string) => {
+ if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) {
+ const resolvedPath = resolveRelativePath(htmlDir, url);
+ referencedPaths.add(resolvedPath.toLowerCase());
+ }
+ };
+
+ // Extract script sources
+ let scriptMatch;
+ while ((scriptMatch = scriptSrcRegex.exec(html)) !== null) {
+ addReferencedPath(scriptMatch[1]);
+ }
+
+ // Extract CSS link hrefs
+ let linkMatch;
+ while ((linkMatch = linkHrefRegex.exec(html)) !== null) {
+ addReferencedPath(linkMatch[1]);
+ }
+
+ // Find matching files (exact path match only)
+ const relatedFiles = projectFiles.filter((file) => {
+ if (file.isFolder || !['js', 'css'].includes(file.type?.toLowerCase() || '')) return false;
+ const normalizedFilePath = file.path.replace(/\\/g, '/').toLowerCase();
+ return referencedPaths.has(normalizedFilePath);
+ });
+
+ const jsFiles = relatedFiles.filter((f) => f.type?.toLowerCase() === 'js');
+ const cssFiles = relatedFiles.filter((f) => f.type?.toLowerCase() === 'css');
+
+ // Detect inline scripts in HTML content (handle malformed closing tags like or )
+ const inlineScriptRegex = /]*>[\s\S]*?<\/\s*script\b[^>]*>/gi;
+ const hasInlineScripts = inlineScriptRegex.test(html);
+
+ // Detect inline event handlers (onclick, onload, etc.)
+ const eventHandlerRegex = /\s+on\w+\s*=\s*["'][^"']*["']/gi;
+ const hasEventHandlers = eventHandlerRegex.test(html);
+
+ const hasAnyScripts = jsFiles.length > 0 || hasInlineScripts || hasEventHandlers;
+
+ // Show warning if any scripts are found (external JS files, inline scripts, or event handlers)
+ if (hasAnyScripts && hasShownWarningRef.current !== selectedFile.path) {
+ hasShownWarningRef.current = selectedFile.path;
+ setHasScripts(true);
+ onScriptsDetected(true);
+ toast.warning(t('chat.scripts-warning'), {
+ duration: 5000,
+ icon: ,
+ });
+ } else if (!hasAnyScripts) {
+ setHasScripts(false);
+ onScriptsDetected(false);
+ } else if (hasAnyScripts) {
+ // Scripts exist but warning already shown for this file
+ setHasScripts(true);
+ onScriptsDetected(true);
+ }
+
// Strict dangerous content detection to prevent various bypass techniques
const dangerousPatterns = [
/ipcRenderer/gi,
@@ -779,9 +938,6 @@ function HtmlRenderer({ selectedFile }: { selectedFile: FileInfo }) {
return;
}
- // Get the directory of the HTML file
- const htmlDir = getDirPath(selectedFile.path);
-
// Find all img tags with relative paths (match various formats)
const imgRegex = /]*?)(?:\s*\/\s*>|>)/gi;
const matches = Array.from(html.matchAll(imgRegex));
@@ -848,7 +1004,70 @@ function HtmlRenderer({ selectedFile }: { selectedFile: FileInfo }) {
);
});
- // Sanitize the processed HTML
+ // Load and inject CSS files, replacing external link tags
+ for (const cssFile of cssFiles) {
+ try {
+ const cssContent = await window.ipcRenderer.invoke(
+ 'open-file',
+ 'css',
+ cssFile.path,
+ false
+ );
+ if (cssContent) {
+ const styleTag = ``;
+
+ // Try to replace the external link tag with inline style
+ const linkRegex = new RegExp(
+ `]*href=["'](?:[^"']*[/\\\\])?${cssFile.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["'][^>]*>`,
+ 'gi'
+ );
+ const replacedCss = processedHtmlContent.replace(linkRegex, styleTag);
+ if (replacedCss !== processedHtmlContent) {
+ processedHtmlContent = replacedCss;
+ } else {
+ // Fallback: inject CSS at the beginning of the HTML
+ if (processedHtmlContent.includes('')) {
+ processedHtmlContent = processedHtmlContent.replace(
+ '',
+ `${styleTag}`
+ );
+ } else {
+ processedHtmlContent = styleTag + processedHtmlContent;
+ }
+ }
+ }
+ } catch (error) {
+ console.error(`Failed to load CSS file: ${cssFile.path}`, error);
+ }
+ }
+
+ // Load JS files content and replace external script tags
+ for (const jsFile of jsFiles) {
+ try {
+ const jsContent = await window.ipcRenderer.invoke(
+ 'open-file',
+ 'js',
+ jsFile.path,
+ false
+ );
+ if (jsContent) {
+ // Replace external script tag with inline script
+ const scriptRegex = new RegExp(
+ `]*src=["'](?:[^"']*[/\\\\])?${jsFile.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["'][^>]*>\\s*`,
+ 'gi'
+ );
+ const inlineScriptTag = ``;
+ processedHtmlContent = processedHtmlContent.replace(scriptRegex, inlineScriptTag);
+ }
+ } catch (error) {
+ console.error(`Failed to load JS file: ${jsFile.path}`, error);
+ }
+ }
+
+ // Store raw HTML with inline scripts for iframe rendering (before sanitization)
+ const rawHtmlWithScripts = processedHtmlContent;
+
+ // Sanitize the processed HTML (for non-iframe rendering)
const sanitized = DOMPurify.sanitize(processedHtmlContent, {
USE_PROFILES: { html: true },
ALLOWED_TAGS: [
@@ -881,6 +1100,12 @@ function HtmlRenderer({ selectedFile }: { selectedFile: FileInfo }) {
'h5',
'h6',
'style',
+ 'canvas',
+ 'html',
+ 'head',
+ 'body',
+ 'title',
+ 'meta',
],
ALLOWED_ATTR: [
'href',
@@ -928,16 +1153,75 @@ function HtmlRenderer({ selectedFile }: { selectedFile: FileInfo }) {
KEEP_CONTENT: false,
});
- setProcessedHtml(sanitized);
+ // Inject JS content after sanitization (only if user is aware of scripts)
+ let finalHtml = sanitized;
+
+ // Cache raw HTML with scripts for iframe rendering (before sanitization stripped them)
+ setRawHtmlWithScriptsCache(rawHtmlWithScripts);
+
+ setProcessedHtml(finalHtml);
};
processHtml();
- }, [selectedFile]);
+ }, [selectedFile, projectFiles, onScriptsDetected, t]);
+
+ // Zoom state and controls
+ const [zoom, setZoom] = useState(100);
+
+ const handleZoomIn = () => setZoom((prev) => Math.min(prev + 10, 200));
+ const handleZoomOut = () => setZoom((prev) => Math.max(prev - 10, 50));
+ const handleZoomReset = () => setZoom(100);
+
+ // Handle scroll wheel zoom (Ctrl+scroll or pinch)
+ const handleWheel = (e: React.WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? -10 : 10;
+ setZoom((prev) => Math.min(Math.max(prev + delta, 50), 200));
+ }
+ };
return (
-
+
+ {/* Floating notch-style zoom controls */}
+
+
+ {/* Content area with zoom */}
+
+
+ {scriptsApproved && hasScripts ? (
+