[POC] feat: node-based muxing editor

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",

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() {
       <Route path="/certificates" element={<RouteCertificates />} />
       <Route path="/workspace/:name" element={<RouteWorkspace />} />
       <Route path="/workspaces" element={<RouteWorkspaces />} />
+      <Route path="/muxes" element={<RouteMuxes />} />
       <Route path="/workspace/create" element={<RouteWorkspaceCreation />} />
       <Route
         path="/certificates/security"

src/components/icons/icon-regex.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react'
+
+export const IconRegex = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    {...props}
+  >
+    <path d="M17 3v10" />
+    <path d="m12.67 5.5 8.66 5" />
+    <path d="m12.67 10.5 8.66-5" />
+    <path d="M9 17a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2z" />
+  </svg>
+)

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<SVGSVGElement>) => React.JSX.Element
+  className?: string
+  children: ReactNode
+  hasTargetLeft?: boolean
+  hasSourceRight?: boolean
+  style?: CSSProperties
+}) => {
+  return (
+    <>
+      {hasTargetLeft ? <Handle type="target" position={Position.Left} /> : null}
+
+      <div
+        style={{
+          height: config.HEIGHT_NODE,
+          ...style,
+        }}
+        className={twMerge(nodeStyles(), 'flex items-center')}
+      >
+        <div
+          className="flex shrink-0 items-center justify-center bg-gray-50"
+          style={{
+            height: config.HEIGHT_NODE,
+            width: config.HEIGHT_NODE,
+          }}
+        >
+          <Icon className="size-5" />
+        </div>
+
+        <div className={twMerge('w-full px-4 py-3', className)}>{children}</div>
+      </div>
+
+      {hasSourceRight ? (
+        <Handle type="source" position={Position.Right} />
+      ) : null}
+    </>
+  )
+}

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<Node> & {
+  data: {
+    isDisabled?: boolean
+    onChange: (id: string | undefined, v: string) => void
+  }
+}) => {
+  return (
+    <MuxNodeBase
+      style={{
+        width: config.WIDTH_NODE,
+      }}
+      hasSourceRight
+      hasTargetLeft
+      icon={IconRegex}
+      className=""
+    >
+      <FieldGroup className="grid w-full grid-cols-[1fr_2fr] items-center">
+        <Select
+          defaultSelectedKey={'all'}
+          items={[
+            {
+              textValue: 'All',
+              id: 'all',
+            },
+            {
+              textValue: 'FIM',
+              id: 'fim',
+            },
+            {
+              textValue: 'Chat',
+              id: 'chat',
+            },
+          ]}
+        >
+          <SelectButton isBorderless className="border-r border-r-gray-200" />
+        </Select>
+        <TextField
+          isDisabled={data.isDisabled}
+          type="text"
+          aria-label="Matcher"
+          onChange={(v) => data.onChange(id, v)}
+        >
+          <Input
+            isBorderless
+            icon={data.isDisabled ? <Lock01 /> : null}
+            placeholder="e.g. *.ts"
+          />
+        </TextField>
+      </FieldGroup>
+    </MuxNodeBase>
+  )
+}

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 (
+    <MuxNodeBase hasSourceRight icon={MessageDotsCircle}>
+      <span className="font-semibold">Prompt</span>
+    </MuxNodeBase>
+  )
+}

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