From e6f6560f3a4a5e4e77bd122f4de5576e4b990092 Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Mon, 23 Dec 2024 18:17:51 +0800
Subject: [PATCH] feat: draggable

---
 .../playground/components/ModelCardNode.tsx      | 13 -------------
 .../packages/core/src/pages/playground/index.tsx | 16 ++++++++--------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
index ae84a13f..10136ce9 100644
--- a/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
+++ b/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
@@ -46,19 +46,6 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
       <Handle type="target" position={Position.Left} />
       <Handle type="source" position={Position.Right} />
 
-      {/* Drag Handle - Only visible on hover */}
-      <div
-        className={`absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full transition-opacity duration-200 
-        ${isHovered ? 'opacity-100' : 'opacity-0'}`}
-      >
-        <div
-          className="w-6 h-10 flex items-center justify-center cursor-grab bg-white rounded-l-md border border-r-0 border-gray-200 hover:border-[--primary-color] hover:text-[--primary-color]"
-          onMouseDown={onDragHandleMouseDown}
-        >
-          <Icon icon="mdi:drag" className="text-xl" />
-        </div>
-      </div>
-
       <div className="flex justify-between items-center">
         <div className="flex gap-2 items-center">
           <Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
diff --git a/frontend/packages/core/src/pages/playground/index.tsx b/frontend/packages/core/src/pages/playground/index.tsx
index 81e4547e..ebe8bb59 100644
--- a/frontend/packages/core/src/pages/playground/index.tsx
+++ b/frontend/packages/core/src/pages/playground/index.tsx
@@ -58,7 +58,7 @@ const initialNodes = [
   })),
   {
     id: 'openai-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['openai-keys'],
     data: {
       title: 'API Keys',
@@ -88,7 +88,7 @@ const initialNodes = [
   },
   {
     id: 'anthropic-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['anthropic-keys'],
     data: {
       title: 'API Keys',
@@ -100,7 +100,7 @@ const initialNodes = [
   },
   {
     id: 'gemini-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['gemini-keys'],
     data: {
       title: 'API Keys',
@@ -114,7 +114,7 @@ const initialNodes = [
   },
   {
     id: 'mistral-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['mistral-keys'],
     data: {
       title: 'API Keys',
@@ -123,7 +123,7 @@ const initialNodes = [
   },
   {
     id: 'cohere-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['cohere-keys'],
     data: {
       title: 'API Keys',
@@ -136,7 +136,7 @@ const initialNodes = [
   },
   {
     id: 'azure-keys',
-    type: 'keyStatus',
+    type: 'keyCard',
     position: calculateNodePositions(modelData)['azure-keys'],
     data: {
       title: 'API Keys',
@@ -218,7 +218,7 @@ const Playground = () => {
       // Update positions of connected nodes during drag
       setNodes((nds) => {
         return nds.map((n) => {
-          if (n.type === 'keyStatus' && n.id === `${node.id}-keys`) {
+          if (n.type === 'keyCard' && n.id === `${node.id}-keys`) {
             return {
               ...n,
               position: {
@@ -252,7 +252,7 @@ const Playground = () => {
               }
             }
           }
-          if (n.type === 'keyStatus') {
+          if (n.type === 'keyCard') {
             const modelId = n.id.replace('-keys', '')
             const modelNode = sortedNodes.find((mn) => mn.id === modelId)
             if (modelNode) {