Spaces:
Running
Running
File size: 1,805 Bytes
68185ce d89db9c 68185ce d89db9c 68185ce d89db9c 68185ce d89db9c 68185ce d89db9c 68185ce |
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 |
import React from "react";
import ResultBlock from "./ResultBlock";
import type { MCPToolResult } from "../types/mcp";
const ToolResultRenderer: React.FC<{
result: MCPToolResult;
rendererCode?: string;
input?: unknown;
}> = ({ result, rendererCode, input }) => {
if (!rendererCode) {
return <ResultBlock result={result} />;
}
try {
const exportMatch = rendererCode.match(/export\s+default\s+(.*)/s);
if (!exportMatch) {
throw new Error("Invalid renderer format - no export default found");
}
const componentCode = exportMatch[1].trim();
const componentFunction = new Function(
"React",
"input",
"output",
`
const { createElement: h, Fragment } = React;
const JSXComponent = ${componentCode};
return JSXComponent(input, output);
`
);
const element = componentFunction(React, input || {}, result);
// For object results, also show the formatted JSON below the custom renderer
if (typeof result === "object" && result !== null) {
return (
<div>
{element}
<div className="mt-3 space-y-3">
<div>
<h4 className="text-sm font-medium text-gray-300 mb-2">
Request
</h4>
<ResultBlock result={input || {}} />
</div>
<div>
<h4 className="text-sm font-medium text-gray-300 mb-2">
Response
</h4>
<ResultBlock result={result} />
</div>
</div>
</div>
);
}
return element;
} catch (error) {
return (
<ResultBlock
error={error instanceof Error ? error.message : "Unknown error"}
result={result}
/>
);
}
};
export default ToolResultRenderer;
|