diff --git a/package-lock.json b/package-lock.json index e9aa8b42..51653db3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@types/prismjs": "^1.26.5", "@types/react-syntax-highlighter": "^15.5.13", "@untitled-ui/icons-react": "^0.1.4", + "@xyflow/react": "^12.4.4", "clsx": "^2.1.1", "date-fns": "^4.1.0", "fuse.js": "^7.0.0", @@ -4536,6 +4537,55 @@ "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", + "license": "MIT" + }, + "node_modules/@types/d3-drag": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz", + "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==", + "license": "MIT", + "dependencies": { + "@types/d3-selection": "*" + } + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "license": "MIT", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-selection": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz", + "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==", + "license": "MIT" + }, + "node_modules/@types/d3-transition": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz", + "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==", + "license": "MIT", + "dependencies": { + "@types/d3-selection": "*" + } + }, + "node_modules/@types/d3-zoom": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz", + "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==", + "license": "MIT", + "dependencies": { + "@types/d3-interpolate": "*", + "@types/d3-selection": "*" + } + }, "node_modules/@types/debug": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", @@ -5230,6 +5280,36 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@xyflow/react": { + "version": "12.4.4", + "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.4.4.tgz", + "integrity": "sha512-9RZ9dgKZNJOlbrXXST5HPb5TcXPOIDGondjwcjDro44OQRPl1E0ZRPTeWPGaQtVjbg4WpR4BUYwOeshNI2TuVg==", + "license": "MIT", + "dependencies": { + "@xyflow/system": "0.0.52", + "classcat": "^5.0.3", + "zustand": "^4.4.0" + }, + "peerDependencies": { + "react": ">=17", + "react-dom": ">=17" + } + }, + "node_modules/@xyflow/system": { + "version": "0.0.52", + "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.52.tgz", + "integrity": "sha512-pJBMaoh/GEebIABWEIxAai0yf57dm+kH7J/Br+LnLFPuJL87Fhcmm4KFWd/bCUy/kCWUg+2/yFAGY0AUHRPOnQ==", + "license": "MIT", + "dependencies": { + "@types/d3-drag": "^3.0.7", + "@types/d3-selection": "^3.0.10", + "@types/d3-transition": "^3.0.8", + "@types/d3-zoom": "^3.0.8", + "d3-drag": "^3.0.0", + "d3-selection": "^3.0.0", + "d3-zoom": "^3.0.0" + } + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -6029,6 +6109,12 @@ "consola": "^3.2.3" } }, + "node_modules/classcat": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz", + "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==", + "license": "MIT" + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -6345,6 +6431,111 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "license": "ISC", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "d3-selection": "2 - 3" + } + }, + "node_modules/d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "license": "ISC", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/data-urls": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", @@ -15101,6 +15292,34 @@ "zod": "^3.18.0" } }, + "node_modules/zustand": { + "version": "4.5.6", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.6.tgz", + "integrity": "sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==", + "license": "MIT", + "dependencies": { + "use-sync-external-store": "^1.2.2" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/zwitch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", diff --git a/package.json b/package.json index 5fe1bab1..8cca6ce3 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@types/prismjs": "^1.26.5", "@types/react-syntax-highlighter": "^15.5.13", "@untitled-ui/icons-react": "^0.1.4", + "@xyflow/react": "^12.4.4", "clsx": "^2.1.1", "date-fns": "^4.1.0", "fuse.js": "^7.0.0", diff --git a/src/Page.tsx b/src/Page.tsx index e2d4c30d..6968face 100644 --- a/src/Page.tsx +++ b/src/Page.tsx @@ -11,6 +11,7 @@ import { RouteNotFound } from './routes/route-not-found' import { RouteProvider } from './routes/route-providers' import { RouteProviderCreate } from './routes/route-provider-create' import { RouteProviderUpdate } from './routes/route-provider-update' +import { RouteMuxes } from './routes/route-mux-config' export default function Page() { return ( @@ -20,6 +21,7 @@ export default function Page() { } /> } /> } /> + } /> } /> ) => ( + + + + + + +) diff --git a/src/features/muxing/components/mux-node-base.tsx b/src/features/muxing/components/mux-node-base.tsx new file mode 100644 index 00000000..74b3fed2 --- /dev/null +++ b/src/features/muxing/components/mux-node-base.tsx @@ -0,0 +1,55 @@ +import { Handle, Position } from '@xyflow/react' +import * as config from '../constants/mux-node-config' +import { twMerge } from 'tailwind-merge' +import { tv } from 'tailwind-variants' +import { CSSProperties, ReactNode } from 'react' + +const nodeStyles = tv({ + base: 'w-full overflow-hidden rounded border border-gray-200 bg-base shadow-sm', +}) + +export const MuxNodeBase = ({ + hasSourceRight, + hasTargetLeft, + children, + className, + icon: Icon, + style, +}: { + icon: (props: React.SVGProps) => React.JSX.Element + className?: string + children: ReactNode + hasTargetLeft?: boolean + hasSourceRight?: boolean + style?: CSSProperties +}) => { + return ( + <> + {hasTargetLeft ? : null} + +
+
+ +
+ +
{children}
+
+ + {hasSourceRight ? ( + + ) : null} + + ) +} diff --git a/src/features/muxing/components/mux-node-matcher.tsx b/src/features/muxing/components/mux-node-matcher.tsx new file mode 100644 index 00000000..823c1baa --- /dev/null +++ b/src/features/muxing/components/mux-node-matcher.tsx @@ -0,0 +1,69 @@ +import { MuxNodeBase } from './mux-node-base' +import { Lock01 } from '@untitled-ui/icons-react' +import * as config from '../constants/mux-node-config' +import SvgDrag from '@/components/icons/Drag' +import { + FieldGroup, + Input, + Select, + SelectButton, + TextField, +} from '@stacklok/ui-kit' +import { IconRegex } from '@/components/icons/icon-regex' +import { Node } from '@xyflow/react' + +export const MuxNodeMatcher = ({ + id, + data, +}: Partial & { + data: { + isDisabled?: boolean + onChange: (id: string | undefined, v: string) => void + } +}) => { + return ( + + + + data.onChange(id, v)} + > + : null} + placeholder="e.g. *.ts" + /> + + + + ) +} diff --git a/src/features/muxing/components/mux-node-prompt.tsx b/src/features/muxing/components/mux-node-prompt.tsx new file mode 100644 index 00000000..f7be4239 --- /dev/null +++ b/src/features/muxing/components/mux-node-prompt.tsx @@ -0,0 +1,10 @@ +import { MuxNodeBase } from './mux-node-base' +import { MessageDotsCircle } from '@untitled-ui/icons-react' + +export const MuxNodePrompt = () => { + return ( + + Prompt + + ) +} diff --git a/src/features/muxing/constants/mux-node-config.tsx b/src/features/muxing/constants/mux-node-config.tsx new file mode 100644 index 00000000..74296c85 --- /dev/null +++ b/src/features/muxing/constants/mux-node-config.tsx @@ -0,0 +1,7 @@ +export const GRID_SIZE = 90 +export const PADDING_GROUP = 12 +export const HEIGHT_GROUP_HEADER = 40 +export const HEIGHT_NODE = 64 +export const HEIGHT_CONTAINER = 512 +export const WIDTH_GROUP = 500 +export const WIDTH_NODE = WIDTH_GROUP - PADDING_GROUP * 2 diff --git a/src/routes/route-mux-config.tsx b/src/routes/route-mux-config.tsx new file mode 100644 index 00000000..b847f2a6 --- /dev/null +++ b/src/routes/route-mux-config.tsx @@ -0,0 +1,550 @@ +import { PageContainer } from '@/components/page-container' +import { + Node, + ReactFlow, + Controls, + Background, + applyNodeChanges, + applyEdgeChanges, + addEdge, + Position, + Handle, + ConnectionLineType, + OnNodeDrag, +} from '@xyflow/react' +import { useCallback, useState } from 'react' +import * as config from '../features/muxing/constants/mux-node-config' +import '@xyflow/react/dist/style.css' +import { + Button, + ComboBox, + ComboBoxInput, + FieldGroup, + Heading, + Input, + Select, + SelectButton, + TextField, + Tooltip, + TooltipInfoButton, + TooltipTrigger, +} from '@stacklok/ui-kit' +import { tv } from 'tailwind-variants' +import { PageHeading } from '@/components/heading' +import { + ChartBreakoutCircle, + Lock01, + Plus, + SearchMd, +} from '@untitled-ui/icons-react' +import { twMerge } from 'tailwind-merge' +import SvgDrag from '@/components/icons/Drag' +import { IconRegex } from '@/components/icons/icon-regex' +import { MuxNodePrompt } from '@/features/muxing/components/mux-node-prompt' +import { MuxNodeMatcher } from '@/features/muxing/components/mux-node-matcher' + +const nodeStyles = tv({ + base: 'w-full rounded border border-gray-200 bg-base p-4 shadow-sm', +}) +const groupStyles = tv({ + base: `bg-gray-50/50 -z-10 h-auto min-h-[calc(100%-48px)] rounded-lg !border + !border-gray-200 stroke-gray-200 backdrop-blur-sm`, +}) + +enum NodeType { + MATCHER_GROUP = 'matcherGroup', + MODEL_GROUP = 'modelGroup', + PROMPT = 'prompt', + MATCHER = 'matcher', + MODEL = 'model', +} + +function computeGroupNodeY(index: number) { + return ( + config.PADDING_GROUP * 4 + + config.HEIGHT_GROUP_HEADER + + config.HEIGHT_NODE * index + + config.PADDING_GROUP * index + ) +} + +const initialNodes: Node[] = [ + { + id: 'prompt', + type: NodeType.PROMPT, + data: { label: 'Prompt' }, + position: { x: 50, y: config.HEIGHT_CONTAINER / 2 }, + origin: [0.5, 0.5], + sourcePosition: Position.Right, + draggable: false, + }, + { + id: 'matcher-group', + type: NodeType.MATCHER_GROUP, + data: { + title: 'Matchers', + description: + 'Matchers use regex patterns to route requests to specific models.', + }, + position: { + x: 200, + y: config.HEIGHT_CONTAINER / 2 - config.HEIGHT_GROUP_HEADER / 2, + }, + origin: [0, 0.5], + style: { + width: config.WIDTH_GROUP, + // height: '100%', + }, + draggable: false, + }, + { + id: 'model-group', + type: NodeType.MODEL_GROUP, + data: { + title: 'Models', + description: 'Add model nodes here', + }, + position: { + x: 720, + y: config.HEIGHT_CONTAINER / 2 - config.HEIGHT_GROUP_HEADER / 2, + }, + origin: [0, 0.5], + style: { + width: config.WIDTH_GROUP, + // height: '100%', + }, + draggable: false, + }, + + { + id: 'matcher-0', + type: NodeType.MATCHER, + data: { label: 'catch-all', isDisabled: true }, + position: { + x: 250, + y: computeGroupNodeY(0), + }, + parentId: 'matcher-group', + origin: [0.5, 0.5], + extent: 'parent', + targetPosition: Position.Left, + sourcePosition: Position.Right, + }, +] + +const EDGE = { + type: ConnectionLineType.Bezier, + animated: true, +} + +const initialEdges = [ + { + id: 'edge-0', + source: 'prompt', + target: 'matcher-0', + ...EDGE, + }, + { + id: 'edge-1', + source: 'matcher-0', + target: 'model-0', + ...EDGE, + }, +] + +/** + * Ensures correct ordering of "matcher" nodes, + * both visually, and in the list of nodes. + */ +function alignMatcherNodes(nodes: Node[]) { + const matcherNodes = nodes.filter((n) => n.type === NodeType.MATCHER) + + // Ensure that the last matcher node is always + // `matcher-0` (the catch-all matcher) + if ( + matcherNodes.length > 0 && + matcherNodes[matcherNodes.length - 1]?.id !== 'matcher-0' + ) { + const catchallNodeIndex = matcherNodes.findIndex( + (n) => n.id === 'matcher-0' + ) + if (catchallNodeIndex !== -1) { + const fallbackNode = matcherNodes.splice(catchallNodeIndex, 1)[0] + if (fallbackNode) matcherNodes.push(fallbackNode) + } + } + + // Update Y position of matcher nodes, so that their + // visual position reflects their position in the list + matcherNodes.forEach((n, i) => { + n.position.y = computeGroupNodeY(i) + }) + + // Re-integrate the matcher nodes into the node list + return nodes.map((n) => + n.type === NodeType.MATCHER ? matcherNodes.shift() : n + ) +} + +function isOverlapping(node1: Node, node2: Node) { + const node1Bottom = node1.position.y + config.HEIGHT_NODE + const node2Bottom = node2.position.y + config.HEIGHT_NODE + + return ( + node1.position.y < node2Bottom && + node1Bottom > node2.position.y && + node1.position.x < node2.position.x + config.WIDTH_NODE && + node1.position.x + config.WIDTH_NODE > node2.position.x + ) +} + +export function RouteMuxes() { + const [nodes, setNodes] = useState(initialNodes) + const [edges, setEdges] = useState(initialEdges) + + const onNodesChange = (changes) => + setNodes((nds) => applyNodeChanges(changes, nds)) + const onEdgesChange = (changes) => + setEdges((eds) => + applyEdgeChanges( + { + ...changes, + ...EDGE, + }, + eds + ) + ) + + const onConnect = useCallback( + (params) => + setEdges((eds) => + addEdge( + { + ...params, + ...EDGE, + }, + eds + ) + ), + [] + ) + + const addMatcherNode = () => { + const matcherNodes = nodes.filter( + (node) => node.type === 'matcher' && node.id !== 'matcher-0' + ) + const newNode: Node = { + id: `matcher-${matcherNodes.length + 1}`, + type: 'matcher', + data: { label: '', onChange: handleNodeChange }, + position: { + x: config.WIDTH_GROUP / 2, + y: computeGroupNodeY(0), + }, + parentId: 'matcher-group', + origin: [0.5, 0.5], + extent: 'parent', + targetPosition: Position.Left, + sourcePosition: Position.Right, + } + setNodes((nds) => { + const updatedNodes = [...nds, newNode] + return alignMatcherNodes(updatedNodes) + }) + + const newEdge = { + id: `edge-${nodes.length}`, + source: 'prompt', + target: newNode.id, + type: ConnectionLineType.Bezier, + animated: true, + } + setEdges((eds) => [...eds, newEdge]) + } + + const addModelNode = useCallback(() => { + const newNode: Node = { + id: `model-${nodes.length}`, + type: NodeType.MODEL, + data: { label: 'Qwen', onChange: handleNodeChange }, + position: { + x: 250, + y: + nodes.filter((node) => node.id.startsWith('model')).length * + GRID_SIZE, + }, + origin: [0.5, 0.5], + parentId: 'model-group', + extent: 'parent', + targetPosition: Position.Right, + } + setNodes((nds) => [...nds, newNode]) + }, [nodes]) + + const handleNodeChange = (id, value) => { + setNodes((nds) => + nds.map((node) => + node.id === id + ? { ...node, data: { ...node.data, label: value } } + : node + ) + ) + } + + const onNodeDragStop = useCallback>((event, node) => { + setNodes((nds) => { + const updatedNodes = nds.map((n) => + n.id === node.id ? { ...n, position: node.position } : n + ) + + const overlappingNode = updatedNodes.find( + (n) => n.id !== node.id && isOverlapping(n, node) + ) + + if (overlappingNode) { + const nodeIndex = updatedNodes.findIndex((n) => n.id === node.id) + const overlappingNodeIndex = updatedNodes.findIndex( + (n) => n.id === overlappingNode.id + ) + + if (nodeIndex !== -1 && overlappingNodeIndex !== -1) { + const temp = updatedNodes[nodeIndex] + if ( + updatedNodes[overlappingNodeIndex] && + updatedNodes[nodeIndex] && + temp + ) { + updatedNodes[nodeIndex] = updatedNodes[overlappingNodeIndex] + updatedNodes[overlappingNodeIndex] = temp + + updatedNodes[nodeIndex].position.y = computeGroupNodeY(nodeIndex) + updatedNodes[overlappingNodeIndex].position.y = + computeGroupNodeY(overlappingNodeIndex) + } + } + } + + return alignMatcherNodes(updatedNodes) + }) + }, []) + + return ( + + +

+ Model muxing (or multiplexing), allows you to configure your AI + assistant once and use CodeGate workspaces to switch between LLM + providers and models without reconfiguring your development environment. +

+

+ Configure your IDE integration to send OpenAI-compatible requests to{' '} + + http://localhost:8989/v1/mux + {' '} + and configure the routing from here. +

+
+ console.log('onNodeDragStop', args)} + onNodeDragStart={onNodeDragStop} + nodeTypes={{ + prompt: MuxNodePrompt, + matcher: MuxNodeMatcher, + model: ModelNode, + matcherGroup: (props) => ( + n.type === NodeType.MATCHER) + .length, + }} + /> + ), + modelGroup: (props) => ( + n.type === NodeType.MODEL) + .length, + }} + /> + ), + }} + > + + + +
+ + ) +} + +const GroupNode = ({ + id, + data, + ...rest +}: Partial & { + data: { + title: string + description: string + onAddNode: (id: string | undefined) => void + numNodes: number + } +}) => { + console.debug('👉 data:', rest) + return ( +
+
+ + {data.title} ({data.numNodes}) + + + + {data.description} + + + +
+
+ ) +} + +const MatcherNode = ({ + id, + data, +}: Partial & { + data: { + isDisabled?: boolean + onChange: (id: string | undefined, v: string) => void + } +}) => { + return ( + <> + + +
+ + + data.onChange(id, v)} + > + : } + placeholder="e.g. *.ts" + /> + +
+ + + ) +} + +const ModelNode = ({ id, data }) => { + return ( + <> + + +
+ + + } + isBorderless + placeholder="Search for a model..." + /> + + +
+ + ) +}