feat: change type status

frontend/packages/core/src/pages/playground/components/NodeComponents.tsx

@@ -29,7 +29,7 @@ const KEY_SIZE = '1.25rem' // 20px
 const KEY_GAP = '0.25rem' // 4px
 const MAX_KEYS = 10
 
-export const KeyStatusNode: React.FC<NodeProps<KeyStatusNodeData>> = ({ data }) => {
+export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
   const { title, keys = [] } = data
   const totalKeys = keys.length
   const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
@@ -68,7 +68,7 @@ export const KeyStatusNode: React.FC<NodeProps<KeyStatusNodeData>> = ({ data })
   )
 }
 
-export const ModelCardNode: React.FC<NodeProps<ModelCardNodeData>> = ({ data }) => {
+export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
   const { title, status, defaultModel } = data
   return (
     <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">

frontend/packages/core/src/pages/playground/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { addEdge, Background, Controls, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
+import { addEdge, NodeTypes, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
 import { useCallback } from 'react'
 import { KeyStatusNode, ModelCardNode, ServiceCardNode } from './components/NodeComponents'
@@ -30,11 +30,11 @@ const calculateNodePositions = (models: ModelData[], startY = 50, gap = 150) =>
   )
 }
 
-const nodeTypes = {
+const nodeTypes: NodeTypes = {
   modelCard: ModelCardNode,
   keyStatus: KeyStatusNode,
   serviceCard: ServiceCardNode
-}
+} as const
 
 const initialNodes = [
   {
@@ -128,10 +128,12 @@ const Playground = () => {
         onConnect={onConnect}
         nodeTypes={nodeTypes}
         fitView
-      >
-        <Background />
-        <Controls />
-      </ReactFlow>
+        nodesDraggable={false}
+        nodesConnectable={false}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+      />
     </div>
   )
 }