first commit
This commit is contained in:
Beyhan Oğur
@@ -0,0 +1,50 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Position } from "@xyflow/react";
|
||||
import { COND_H, COND_W, SCOPE_CONFIG, type ScopeKey } from "../constants";
|
||||
import { RFEdgeHandle } from "./rfEdgeHandle";
|
||||
|
||||
/** Width of the left scope-color strip (matches common “start node” accent bars). */
|
||||
const ACCENT_STRIP_CLASS = "w-2.5";
|
||||
|
||||
export function RFConditionNode({ data }: { data: any }) {
|
||||
const condition = data.condition as string;
|
||||
const color = data.color as string | null;
|
||||
const scopes = (data.scopes as string[] | undefined) ?? [];
|
||||
const accent = color ?? undefined;
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ width: COND_W, minHeight: COND_H }}>
|
||||
<RFEdgeHandle type="target" position={Position.Left} accentColor={accent ?? "var(--muted-foreground)"} />
|
||||
<RFEdgeHandle type="source" position={Position.Right} accentColor={accent ?? "var(--muted-foreground)"} />
|
||||
<div
|
||||
className="dark:bg-card relative z-10 flex w-full cursor-grab overflow-hidden rounded-lg border bg-white shadow-sm active:cursor-grabbing"
|
||||
style={{ minHeight: COND_H, borderColor: accent }}
|
||||
>
|
||||
<div
|
||||
className={cn("shrink-0 self-stretch", ACCENT_STRIP_CLASS, !accent && "bg-muted")}
|
||||
style={accent ? { backgroundColor: accent } : undefined}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-4 px-3 py-2.5">
|
||||
<code className="text-foreground flex-1 font-mono text-[12px] leading-snug break-all">{condition}</code>
|
||||
{scopes.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{scopes.map((sc) => {
|
||||
const cfg = SCOPE_CONFIG[sc as ScopeKey];
|
||||
return cfg ? (
|
||||
<span
|
||||
key={sc}
|
||||
className="rounded px-1 py-0 text-[9px] font-semibold"
|
||||
style={{ backgroundColor: `${cfg.color}18`, color: cfg.color }}
|
||||
>
|
||||
{cfg.label}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Handle, type HandleProps } from "@xyflow/react";
|
||||
|
||||
/** Visual diameter; React Flow’s default is ~6px — larger so half the disc reads clearly past the node edge. */
|
||||
export const RF_HANDLE_SIZE_PX = 14;
|
||||
|
||||
export type RFEdgeHandleProps = Omit<HandleProps, "className"> & {
|
||||
className?: string;
|
||||
accentColor?: string;
|
||||
};
|
||||
|
||||
export function RFEdgeHandle({ className, accentColor, style, ...rest }: RFEdgeHandleProps) {
|
||||
return (
|
||||
<Handle
|
||||
className={cn(
|
||||
"!pointer-events-auto !z-0",
|
||||
"!h-[14px] !min-h-[14px] !w-[14px] !min-w-[14px]",
|
||||
"!rounded-full !border-0 !border-none !p-0 !shadow-none",
|
||||
className,
|
||||
)}
|
||||
style={{
|
||||
...style,
|
||||
...(accentColor ? { background: accentColor } : {}),
|
||||
}}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
144
ui/app/workspace/routing-rules/tree/views/node/rfRuleNode.tsx
Normal file
144
ui/app/workspace/routing-rules/tree/views/node/rfRuleNode.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
|
||||
import { getProviderLabel } from "@/lib/constants/logs";
|
||||
import { RoutingRule } from "@/lib/types/routingRules";
|
||||
import { Position } from "@xyflow/react";
|
||||
import { Link2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { RULE_W, SCOPE_CONFIG, type ScopeKey } from "../constants";
|
||||
import { RFEdgeHandle } from "./rfEdgeHandle";
|
||||
|
||||
export function RFRuleNode({ data }: { data: any }) {
|
||||
const rule = data.rule as RoutingRule;
|
||||
const scopeColor = data.scopeColor as string;
|
||||
const cfg = SCOPE_CONFIG[rule.scope as ScopeKey];
|
||||
const multi = rule.targets.length > 1;
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
style={{ width: RULE_W }}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={hovered}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
onFocus={() => setHovered(true)}
|
||||
onBlur={() => setHovered(false)}
|
||||
onClick={() => setHovered((v) => !v)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
setHovered((v) => !v);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RFEdgeHandle type="target" position={Position.Left} accentColor={scopeColor} />
|
||||
{rule.chain_rule && <RFEdgeHandle type="source" id="chain-out" position={Position.Right} accentColor={scopeColor} />}
|
||||
<div
|
||||
className="dark:bg-card relative z-10 cursor-grab rounded-lg border-2 bg-white shadow-sm active:cursor-grabbing"
|
||||
style={{ borderColor: scopeColor, borderStyle: rule.chain_rule ? "dashed" : "solid" }}
|
||||
>
|
||||
{/* scope header */}
|
||||
<div className={`flex items-center gap-1.5 rounded-t-[6px] px-3 py-1.5 ${cfg?.headerClass ?? "bg-gray-100 dark:bg-gray-800/30"}`}>
|
||||
<span className="h-1.5 w-1.5 flex-shrink-0 rounded-full" style={{ backgroundColor: scopeColor }} />
|
||||
<span className="text-[10px] font-semibold" style={{ color: scopeColor }}>
|
||||
{cfg?.label ?? rule.scope}
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
{rule.chain_rule && <Link2 className="h-3 w-3" style={{ color: scopeColor }} />}
|
||||
{!rule.enabled && (
|
||||
<Badge variant="secondary" className="px-1 py-0 text-[9px]">
|
||||
Off
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* rule name */}
|
||||
<div className="px-3 py-2">
|
||||
<p className="text-foreground truncate text-xs font-semibold">{rule.name}</p>
|
||||
{rule.priority > 0 && <p className="text-muted-foreground mt-0.5 text-[10px]">Priority {rule.priority}</p>}
|
||||
</div>
|
||||
|
||||
{/* targets footer */}
|
||||
<div
|
||||
className="flex items-center gap-1.5 rounded-b-[6px] border-t px-3 py-1.5"
|
||||
style={{ borderColor: `${scopeColor}40`, backgroundColor: `${scopeColor}08` }}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{rule.targets
|
||||
.slice(0, 4)
|
||||
.map((t, i) =>
|
||||
t.provider ? (
|
||||
<RenderProviderIcon key={i} provider={t.provider as ProviderIconType} size={12} />
|
||||
) : (
|
||||
<span key={i} className="bg-muted-foreground/30 h-2 w-2 rounded-full" />
|
||||
),
|
||||
)}
|
||||
{rule.targets.length > 4 && <span className="text-muted-foreground text-[9px]">+{rule.targets.length - 4}</span>}
|
||||
</div>
|
||||
<span className="text-muted-foreground ml-auto text-[10px]">
|
||||
{rule.targets.length} target{rule.targets.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* hover popover */}
|
||||
{hovered && (
|
||||
<div
|
||||
className="nodrag nowheel dark:bg-card absolute top-0 left-full z-50 ml-3 min-w-[190px] rounded-lg border-2 bg-white py-1.5 shadow-xl"
|
||||
style={{ borderColor: scopeColor }}
|
||||
>
|
||||
{rule.scope !== "global" && rule.scope_id && (
|
||||
<div className="mb-1 border-b px-3 pb-1.5">
|
||||
<p className="text-muted-foreground text-[10px]">
|
||||
<span className="font-semibold" style={{ color: scopeColor }}>
|
||||
{cfg?.label ?? rule.scope}:{" "}
|
||||
</span>
|
||||
<span className="text-foreground font-medium">{rule.scope_id}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{rule.chain_rule && (
|
||||
<div className="mb-1 flex items-start gap-2 border-b px-3 pb-1.5">
|
||||
<Link2 className="mt-0.5 h-3 w-3 shrink-0" style={{ color: scopeColor }} />
|
||||
<p className="text-muted-foreground text-[10px] leading-snug">
|
||||
Chain rule — resolved provider/model feeds back as the new input and the full scope chain re-evaluates.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="mb-1 px-3 text-[10px] font-semibold tracking-wide uppercase" style={{ color: scopeColor }}>
|
||||
{rule.chain_rule ? "Resolved target (new input)" : "Targets"}
|
||||
</p>
|
||||
{rule.targets.map((t, i) => {
|
||||
const isPassthrough = !t.provider && !t.model;
|
||||
return (
|
||||
<div key={i} className="hover:bg-muted flex items-center gap-2 px-3 py-1.5">
|
||||
{t.provider ? (
|
||||
<RenderProviderIcon provider={t.provider as ProviderIconType} size={13} />
|
||||
) : (
|
||||
<span className="bg-muted-foreground/30 h-3 w-3 flex-shrink-0 rounded-full" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground truncate text-xs font-medium">
|
||||
{isPassthrough ? "Passthrough" : t.provider ? getProviderLabel(t.provider) : t.model}
|
||||
</p>
|
||||
{t.model && t.provider && <p className="text-muted-foreground truncate font-mono text-[10px]">{t.model}</p>}
|
||||
{isPassthrough && <p className="text-muted-foreground/60 text-[10px] italic">original provider & model</p>}
|
||||
</div>
|
||||
{multi && (
|
||||
<span className="ml-1 shrink-0 text-[11px] font-semibold" style={{ color: scopeColor }}>
|
||||
{Math.round(t.weight * 100)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Position } from "@xyflow/react";
|
||||
import { Network } from "lucide-react";
|
||||
import { SRC_H, SRC_W } from "../constants";
|
||||
import { RFEdgeHandle } from "./rfEdgeHandle";
|
||||
|
||||
export function RFSourceNode() {
|
||||
return (
|
||||
<div className="relative" style={{ width: SRC_W, height: SRC_H }}>
|
||||
<RFEdgeHandle type="source" position={Position.Right} accentColor="var(--primary)" />
|
||||
<div className="border-primary dark:bg-card relative z-10 flex h-full cursor-grab flex-col justify-center rounded-xl border-2 bg-white px-5 shadow-md active:cursor-grabbing">
|
||||
<div className="text-foreground flex items-center gap-2 font-semibold">
|
||||
<Network className="text-primary h-4 w-4" />
|
||||
Incoming Request
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-0.5 text-[11px]">provider · model · headers · params · limits</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user