Spaces:
Build error
Build error
File size: 2,348 Bytes
b59aa07 |
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 |
import React from "react";
import ReactJsonView from "@microlink/react-json-view";
import { useTranslation } from "react-i18next";
import { MCPObservation } from "#/types/core/observations";
import { JSON_VIEW_THEME } from "#/utils/constants";
interface MCPObservationContentProps {
event: MCPObservation;
}
export function MCPObservationContent({ event }: MCPObservationContentProps) {
const { t } = useTranslation();
// Parse the content as JSON if possible
let outputData: unknown;
try {
outputData = JSON.parse(event.content);
} catch (e) {
// If parsing fails, use the raw content
outputData = event.content;
}
const hasArguments =
event.extras.arguments && Object.keys(event.extras.arguments).length > 0;
return (
<div className="flex flex-col gap-4">
{/* Arguments section */}
{hasArguments && (
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-300">
{t("MCP_OBSERVATION$ARGUMENTS")}
</h3>
</div>
<div className="p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 max-h-[200px] shadow-inner">
<ReactJsonView
name={false}
src={event.extras.arguments}
theme={JSON_VIEW_THEME}
collapsed={1}
displayDataTypes={false}
/>
</div>
</div>
)}
{/* Output section */}
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-300">
{t("MCP_OBSERVATION$OUTPUT")}
</h3>
</div>
<div className="p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 max-h-[300px] shadow-inner">
{typeof outputData === "object" && outputData !== null ? (
<ReactJsonView
name={false}
src={outputData}
theme={JSON_VIEW_THEME}
collapsed={1}
displayDataTypes={false}
/>
) : (
<pre className="whitespace-pre-wrap">
{event.content.trim() || t("OBSERVATION$MCP_NO_OUTPUT")}
</pre>
)}
</div>
</div>
</div>
);
}
|