shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-19 13:56:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

added a simple mcp ui in tests

Browse Source
This commit is contained in:
dswbx
2025-08-14 16:49:31 +02:00
parent 9ac5fa03c6
commit 63254de13a
16 changed files with 436 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
app/src/ui/components/code/JsonViewer.tsx
View File

@@ -2,6 +2,35 @@ import { TbCopy } from "react-icons/tb";
import { JsonView } from "react-json-view-lite";
import { twMerge } from "tailwind-merge";
import { IconButton } from "../buttons/IconButton";
import ErrorBoundary from "ui/components/display/ErrorBoundary";
import { forwardRef, useImperativeHandle, useState } from "react";
export type JsonViewerProps = {
json: object | null;
title?: string;
expand?: number;
showSize?: boolean;
showCopy?: boolean;
copyIconProps?: any;
className?: string;
};
const style = {
basicChildStyle: "pl-5 ml-1 border-l border-muted hover:border-primary/20",
container: "ml-[-10px]",
label: "text-primary/90 font-bold font-mono mr-2",
stringValue: "text-emerald-600 dark:text-emerald-500 font-mono select-text",
numberValue: "text-sky-500 dark:text-sky-400 font-mono",
nullValue: "text-zinc-400 font-mono",
undefinedValue: "text-zinc-400 font-mono",
otherValue: "text-zinc-400 font-mono",
booleanValue: "text-orange-500 dark:text-orange-400 font-mono",
punctuation: "text-zinc-400 font-bold font-mono m-0.5",
collapsedContent: "text-zinc-400 font-mono after:content-['...']",
collapseIcon: "text-zinc-400 font-mono font-bold text-lg after:content-['▾'] mr-1.5",
expandIcon: "text-zinc-400 font-mono font-bold text-lg after:content-['▸'] mr-1.5",
noQuotesForStringValues: false,
} as any;
export const JsonViewer = ({
json,
@@ -11,16 +40,8 @@ export const JsonViewer = ({
showCopy = false,
copyIconProps = {},
className,
}: {
json: object;
title?: string;
expand?: number;
showSize?: boolean;
showCopy?: boolean;
copyIconProps?: any;
className?: string;
}) => {
const size = showSize ? JSON.stringify(json).length : undefined;
}: JsonViewerProps) => {
const size = showSize ? (json === null ? 0 : (JSON.stringify(json)?.length ?? 0)) : undefined;
const showContext = size || title || showCopy;
function onCopy() {
@@ -31,9 +52,10 @@ export const JsonViewer = ({
<div className={twMerge("bg-primary/5 py-3 relative overflow-hidden", className)}>
{showContext && (
<div className="absolute right-4 top-3 font-mono text-zinc-400 flex flex-row gap-2 items-center">
{(title || size) && (
{(title || size !== undefined) && (
<div className="flex flex-row">
{title && <span>{title}</span>} {size && <span>({size} Bytes)</span>}
{title && <span>{title}</span>}{" "}
{size !== undefined && <span>({size} Bytes)</span>}
</div>
)}
{showCopy && (
@@ -43,30 +65,66 @@ export const JsonViewer = ({
)}
</div>
)}
<JsonView
data={json}
shouldExpandNode={(level) => level < expand}
style={
{
basicChildStyle: "pl-5 ml-1 border-l border-muted hover:border-primary/20",
container: "ml-[-10px]",
label: "text-primary/90 font-bold font-mono mr-2",
stringValue: "text-emerald-500 font-mono select-text",
numberValue: "text-sky-400 font-mono",
nullValue: "text-zinc-400 font-mono",
undefinedValue: "text-zinc-400 font-mono",
otherValue: "text-zinc-400 font-mono",
booleanValue: "text-orange-400 font-mono",
punctuation: "text-zinc-400 font-bold font-mono m-0.5",
collapsedContent: "text-zinc-400 font-mono after:content-['...']",
collapseIcon:
"text-zinc-400 font-mono font-bold text-lg after:content-['▾'] mr-1.5",
expandIcon:
"text-zinc-400 font-mono font-bold text-lg after:content-['▸'] mr-1.5",
noQuotesForStringValues: false,
} as any
}
/>
<ErrorBoundary>
<JsonView
data={json as any}
shouldExpandNode={(level) => level < expand}
style={style}
/>
</ErrorBoundary>
</div>
);
};
export type JsonViewerTabsProps = Omit<JsonViewerProps, "json"> & {
selected?: string;
tabs: {
[key: string]: JsonViewerProps & {
enabled?: boolean;
};
};
};
export type JsonViewerTabsRef = {
setSelected: (selected: string) => void;
};
export const JsonViewerTabs = forwardRef<JsonViewerTabsRef, JsonViewerTabsProps>(
({ tabs: _tabs, ...defaultProps }, ref) => {
const tabs = Object.fromEntries(
Object.entries(_tabs).filter(([_, v]) => v.enabled !== false),
);
const [selected, setSelected] = useState(defaultProps.selected ?? Object.keys(tabs)[0]);
useImperativeHandle(ref, () => ({
setSelected,
}));
return (
<div className="flex flex-col bg-primary/5 rounded-md">
<div className="flex flex-row gap-4 border-b px-3 border-primary/10">
{Object.keys(tabs).map((key) => (
<button
key={key}
type="button"
className={twMerge(
"flex flex-row text-sm cursor-pointer py-3 pt-3.5 px-1 border-b border-transparent -mb-px transition-opacity",
selected === key ? "border-primary" : "opacity-50 hover:opacity-70",
)}
onClick={() => setSelected(key)}
>
<span className="font-mono leading-none">{key}</span>
</button>
))}
</div>
{/* @ts-ignore */}
<JsonViewer
className="bg-transparent"
{...defaultProps}
{...tabs[selected as any]}
title={undefined}
/>
</div>
);
},
);