fix drag drop error

microsoft · Jan 30, 2025 · f55d3db · f55d3db
1 parent 39dd1be
commit f55d3db
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 254 deletions.
diff --git a/python/packages/autogen-studio/frontend/src/components/views/gallery/default_gallery.json b/python/packages/autogen-studio/frontend/src/components/views/gallery/default_gallery.json
@@ -1,11 +1,11 @@
 {
-  "id": "default_gallery",
+  "id": "gallery_default",
   "name": "Default Component Gallery",
   "url": null,
   "metadata": {
     "author": "AutoGen Team",
-    "created_at": "2025-01-29T21:27:14.029754",
-    "updated_at": "2025-01-30T05:27:43.594Z",
+    "created_at": "2025-01-29T22:13:58.687387",
+    "updated_at": "2025-01-29T22:13:58.715730",
     "version": "1.0.0",
     "description": "A default gallery containing basic components for human-in-loop conversations",
     "tags": ["human-in-loop", "assistant"],
@@ -121,7 +121,7 @@
         "version": 1,
         "component_version": 1,
         "description": "A group chat team that have participants takes turn to publish a message\n    to all, using a ChatCompletion model to select the next speaker after each message.",
-        "label": "SelectorGroupChat_1738214891894",
+        "label": "Web Agents (Operator)",
         "config": {
           "participants": [
             {
@@ -401,6 +401,18 @@
             "model": "gpt-4o-mini"
           }
         },
+        {
+          "provider": "autogen_ext.models.openai.OpenAIChatCompletionClient",
+          "component_type": "model",
+          "version": 1,
+          "component_version": 1,
+          "description": "Example on how to use the OpenAIChatCopletionClient with local models (Ollama, vllm etc).",
+          "label": "Mistral-7B vllm",
+          "config": {
+            "model": "TheBloke/Mistral-7B-Instruct-v0.2-GGUF",
+            "base_url": "http://localhost:1234/v1"
+          }
+        },
         {
           "provider": "autogen_ext.models.openai.OpenAIChatCompletionClient",
           "component_type": "model",

diff --git a/python/packages/autogen-studio/frontend/src/components/views/team/builder/builder.tsx b/python/packages/autogen-studio/frontend/src/components/views/team/builder/builder.tsx
@@ -1,5 +1,5 @@
 //team/builder/builder.tsx
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   DndContext,
   useSensor,
@@ -31,6 +31,7 @@ import "./builder.css";
 import TeamBuilderToolbar from "./toolbar";
 import { MonacoEditor } from "../../monaco";
 import { NodeEditor } from "./node-editor/node-editor";
+import debounce from "lodash.debounce";
 
 const { Sider, Content } = Layout;
 
@@ -126,18 +127,27 @@ export const TeamBuilder: React.FC<TeamBuilderProps> = ({
 
   // Handle JSON changes
   const handleJsonChange = useCallback(
-    (value: string) => {
+    debounce((value: string) => {
       try {
         const config = JSON.parse(value);
-        loadFromJson(config);
-        // dirty ?
+        // Always consider JSON edits as changes that should affect isDirty state
+        loadFromJson(config, false);
+        // Force history update even if nodes/edges appear same
+        useTeamBuilderStore.getState().addToHistory();
       } catch (error) {
         console.error("Invalid JSON:", error);
       }
-    },
+    }, 1000),
     [loadFromJson]
   );
 
+  // Cleanup debounced function
+  useEffect(() => {
+    return () => {
+      handleJsonChange.cancel();
+    };
+  }, [handleJsonChange]);
+
   // Handle save
   const handleSave = useCallback(async () => {
     try {
@@ -233,8 +243,7 @@ export const TeamBuilder: React.FC<TeamBuilderProps> = ({
     const draggedItem = active.data.current.current;
     const dropZoneId = over.id as string;
 
-    const [nodeId, zoneType] = dropZoneId.split("-zone")[0].split("-");
-
+    const [nodeId] = dropZoneId.split("@@@");
     // Find target node
     const targetNode = nodes.find((node) => node.id === nodeId);
     if (!targetNode) return;