feat: draggable

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]" />

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) {