feat: add multiple data

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

@@ -10,10 +10,13 @@ import './styles.css'
 const modelData: ModelData[] = [
   { id: 'openai', type: 'openai', title: 'OpenAI', status: 'success', defaultModel: 'gpt-4' },
   { id: 'anthropic', type: 'anthropic', title: 'Anthropic', status: 'success', defaultModel: 'claude-2' },
-  { id: 'gemini', type: 'gemini', title: 'Google Gemini', status: 'failure', defaultModel: 'gemini-pro' }
+  { id: 'gemini', type: 'gemini', title: 'Google Gemini', status: 'failure', defaultModel: 'gemini-pro' },
+  { id: 'mistral', type: 'mistral', title: 'Mistral AI', status: 'success', defaultModel: 'mistral-medium' },
+  { id: 'cohere', type: 'cohere', title: 'Cohere', status: 'success', defaultModel: 'command' },
+  { id: 'azure', type: 'azure', title: 'Azure OpenAI', status: 'success', defaultModel: 'gpt-4-turbo' }
 ]
 
-const calculateNodePositions = (models: ModelData[], startY = 50, gap = 150) => {
+const calculateNodePositions = (models: ModelData[], startY = 50, gap = 120) => {
   return models.reduce(
     (acc, model, index) => {
       acc[model.id] = {
@@ -40,7 +43,7 @@ const initialNodes = [
   {
     id: 'service',
     type: 'serviceCard',
-    position: { x: 50, y: 200 },
+    position: { x: 50, y: 50 },
     data: {}
   },
   ...modelData.map((model) => ({
@@ -62,7 +65,24 @@ const initialNodes = [
       keys: [
         { keyID: 1, status: 'success', priority: 1 },
         { keyID: 2, status: 'success', priority: 2 },
-        { keyID: 3, status: 'failure', priority: 3 }
+        { keyID: 3, status: 'failure', priority: 3 },
+        { keyID: 4, status: 'success', priority: 4 },
+        { keyID: 5, status: 'success', priority: 5 },
+        { keyID: 6, status: 'failure', priority: 6 },
+        { keyID: 7, status: 'success', priority: 7 },
+        { keyID: 8, status: 'success', priority: 8 },
+        { keyID: 9, status: 'failure', priority: 9 },
+        { keyID: 10, status: 'success', priority: 10 },
+        { keyID: 11, status: 'success', priority: 11 },
+        { keyID: 12, status: 'failure', priority: 12 },
+        { keyID: 13, status: 'success', priority: 13 },
+        { keyID: 14, status: 'success', priority: 14 },
+        { keyID: 15, status: 'failure', priority: 15 },
+        { keyID: 16, status: 'success', priority: 16 },
+        { keyID: 17, status: 'success', priority: 17 },
+        { keyID: 18, status: 'failure', priority: 18 },
+        { keyID: 19, status: 'success', priority: 19 },
+        { keyID: 20, status: 'success', priority: 20 }
       ]
     }
   },
@@ -91,18 +111,93 @@ const initialNodes = [
         { keyID: 4, status: 'failure', priority: 4 }
       ]
     }
+  },
+  {
+    id: 'mistral-keys',
+    type: 'keyStatus',
+    position: calculateNodePositions(modelData)['mistral-keys'],
+    data: {
+      title: 'API Keys',
+      keys: []
+    }
+  },
+  {
+    id: 'cohere-keys',
+    type: 'keyStatus',
+    position: calculateNodePositions(modelData)['cohere-keys'],
+    data: {
+      title: 'API Keys',
+      keys: [
+        { keyID: 1, status: 'failure', priority: 1 },
+        { keyID: 2, status: 'success', priority: 2 },
+        { keyID: 3, status: 'success', priority: 3 }
+      ]
+    }
+  },
+  {
+    id: 'azure-keys',
+    type: 'keyStatus',
+    position: calculateNodePositions(modelData)['azure-keys'],
+    data: {
+      title: 'API Keys',
+      keys: [
+        { keyID: 1, status: 'success', priority: 1 },
+        { keyID: 2, status: 'success', priority: 2 },
+        { keyID: 3, status: 'success', priority: 3 }
+      ]
+    }
   }
 ]
 
 const initialEdges = [
-  ...modelData.map((model) => ({
-    id: `service-${model.id}`,
+  {
+    id: 'service-openai',
     source: 'service',
-    target: model.id,
-    animated: true,
-    label: 'apis',
-    style: { stroke: '#3d46f2', cursor: 'pointer' }
-  })),
+    target: 'openai',
+    label: 'apis(12)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
+  {
+    id: 'service-anthropic',
+    source: 'service',
+    target: 'anthropic',
+    label: 'apis(8)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
+  {
+    id: 'service-gemini',
+    source: 'service',
+    target: 'gemini',
+    label: 'apis(5)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
+  {
+    id: 'service-mistral',
+    source: 'service',
+    target: 'mistral',
+    label: 'apis(4)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
+  {
+    id: 'service-cohere',
+    source: 'service',
+    target: 'cohere',
+    label: 'apis(6)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
+  {
+    id: 'service-azure',
+    source: 'service',
+    target: 'azure',
+    label: 'apis(10)',
+    style: { stroke: '#3d46f2', cursor: 'pointer' },
+    labelStyle: { fill: '#3d46f2', fontSize: 12, cursor: 'pointer' }
+  },
   ...modelData.map((model) => ({
     id: `${model.id}-keys`,
     source: model.id,
@@ -127,6 +222,11 @@ const Playground = () => {
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         nodeTypes={nodeTypes}
+        defaultEdgeOptions={{
+          type: 'step',
+          style: { stroke: '#3d46f2', strokeWidth: 2 },
+          animated: true
+        }}
         fitView
         nodesDraggable={false}
         nodesConnectable={false}