Spaces:
Build error
Build error
File size: 4,078 Bytes
090f5c2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
/* tslint:disable */
import React, {useEffect, useRef} from 'react';
import {InteractionData} from '../types';
interface GeneratedContentProps {
htmlContent: string;
onInteract: (data: InteractionData) => void;
appContext: string | null;
isLoading: boolean; // Added isLoading prop
}
export const GeneratedContent: React.FC<GeneratedContentProps> = ({
htmlContent,
onInteract,
appContext,
isLoading,
}) => {
const contentRef = useRef<HTMLDivElement>(null);
const processedHtmlContentRef = useRef<string | null>(null); // Ref to track processed content
useEffect(() => {
const container = contentRef.current;
if (!container) return;
const handleClick = (event: MouseEvent) => {
let targetElement = event.target as HTMLElement;
while (
targetElement &&
targetElement !== container &&
!targetElement.dataset.interactionId
) {
targetElement = targetElement.parentElement as HTMLElement;
}
if (targetElement && targetElement.dataset.interactionId) {
event.preventDefault();
let interactionValue: string | undefined =
targetElement.dataset.interactionValue;
if (targetElement.dataset.valueFrom) {
const inputElement = document.getElementById(
targetElement.dataset.valueFrom,
) as HTMLInputElement | HTMLTextAreaElement;
if (inputElement) {
interactionValue = inputElement.value;
}
}
const interactionData: InteractionData = {
id: targetElement.dataset.interactionId,
type: targetElement.dataset.interactionType || 'generic_click',
value: interactionValue,
elementType: targetElement.tagName.toLowerCase(),
elementText: (
targetElement.innerText ||
(targetElement as HTMLInputElement).value ||
''
)
.trim()
.substring(0, 75),
appContext: appContext,
};
onInteract(interactionData);
}
};
container.addEventListener('click', handleClick);
// Process scripts only when loading is complete and content has changed
if (!isLoading) {
if (htmlContent !== processedHtmlContentRef.current) {
const scripts = Array.from(container.getElementsByTagName('script'));
scripts.forEach((oldScript) => {
try {
const newScript = document.createElement('script');
Array.from(oldScript.attributes).forEach((attr) =>
newScript.setAttribute(attr.name, attr.value),
);
newScript.text = oldScript.innerHTML;
if (oldScript.parentNode) {
oldScript.parentNode.replaceChild(newScript, oldScript);
} else {
console.warn(
'Script tag found without a parent node:',
oldScript,
);
}
} catch (e) {
console.error(
'Error processing/executing script tag. This usually indicates a syntax error in the LLM-generated script.',
{
scriptContent:
oldScript.innerHTML.substring(0, 500) +
(oldScript.innerHTML.length > 500 ? '...' : ''),
error: e,
},
);
}
});
processedHtmlContentRef.current = htmlContent; // Mark this content as processed
}
} else {
// If loading, reset the processed content ref. This ensures that when loading finishes,
// the new content (even if identical to a previous state before loading) is processed.
processedHtmlContentRef.current = null;
}
return () => {
container.removeEventListener('click', handleClick);
};
}, [htmlContent, onInteract, appContext, isLoading]);
return (
<div
ref={contentRef}
className="w-full h-full overflow-y-auto"
dangerouslySetInnerHTML={{__html: htmlContent}}
/>
);
};
|