e6e2c706c2
* Remove unused ScenarioVariantCell fields * Refine deriveNewConstructFn * Fix prettier * Remove migration script * Add refine modal * Fix prettier * Fix diff checker overflow * Decrease diff height * Add more context to prompt refining * Auto-expand prompt when refining
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { HStack, VStack } from "@chakra-ui/react";
|
|
import React from "react";
|
|
import DiffViewer, { DiffMethod } from "react-diff-viewer";
|
|
import Prism from "prismjs";
|
|
import "prismjs/components/prism-javascript";
|
|
import "prismjs/themes/prism.css"; // choose a theme you like
|
|
|
|
const CompareFunctions = ({
|
|
originalFunction,
|
|
newFunction = "",
|
|
}: {
|
|
originalFunction: string;
|
|
newFunction?: string;
|
|
}) => {
|
|
const highlightSyntax = (str: string) => {
|
|
let highlighted;
|
|
try {
|
|
highlighted = Prism.highlight(str, Prism.languages.javascript as Prism.Grammar, "javascript");
|
|
} catch (e) {
|
|
console.error("Error highlighting:", e);
|
|
highlighted = str;
|
|
}
|
|
return <pre style={{ display: "inline" }} dangerouslySetInnerHTML={{ __html: highlighted }} />;
|
|
};
|
|
return (
|
|
<HStack w="full" spacing={5}>
|
|
<VStack w="full" spacing={4} maxH="50vh" fontSize={12} lineHeight={1} overflowY="auto">
|
|
<DiffViewer
|
|
oldValue={originalFunction}
|
|
newValue={newFunction || originalFunction}
|
|
splitView={true}
|
|
leftTitle="Original"
|
|
rightTitle={newFunction ? "Modified" : "Unmodified"}
|
|
disableWordDiff={true}
|
|
compareMethod={DiffMethod.CHARS}
|
|
renderContent={highlightSyntax}
|
|
showDiffOnly={false}
|
|
/>
|
|
</VStack>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default CompareFunctions;
|