diff --git a/packages/demo/pages/ui/+Page.tsx b/packages/demo/pages/ui/+Page.tsx index 132a114..d23699e 100644 --- a/packages/demo/pages/ui/+Page.tsx +++ b/packages/demo/pages/ui/+Page.tsx @@ -31,7 +31,7 @@ ConfigProvider.setConfig({ timeout: 15000, baseURL: // "https://station-developer-dev-staging.aevatar.ai/testproject-client", - "https://station-developer-dev-staging.aevatar.ai/default-project-113b-5a7ed924-client", + "https://station-developer-testing.aevatar.ai/default-project-2a9a-b17730ff-44fd-client", }, }); @@ -119,7 +119,7 @@ export default function UI() { const getTokenByclient = useCallback(async () => { const TOKEN = - "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg5QzAwNzc1RTlGNDhEQUZGN0QzQzZGMjBBNkZDQTdDN0FDMzNDQjIiLCJ4NXQiOiJpY0FIZGVuMGphXzMwOGJ5Q21fS2ZIckRQTEkiLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwczovL2F1dGgtc3RhdGlvbi1kZXYtc3RhZ2luZy5hZXZhdGFyLmFpLyIsImV4cCI6MTc2MDUxMTkwOSwiaWF0IjoxNzYwMzM5MTEwLCJhdWQiOiJBZXZhdGFyIiwic2NvcGUiOiJBZXZhdGFyIG9mZmxpbmVfYWNjZXNzIiwianRpIjoiNzY0N2ZjZTAtOWFmYS00N2ZiLWJhMTMtOWVhOGRjNGZhMDAxIiwic3ViIjoiNTdiYWIyMjAtOTVkZS1kNDYxLTFlODMtM2ExY2VlOGYwYzIzIiwicHJlZmVycmVkX3VzZXJuYW1lIjoiYWZ2b2ppIiwiZW1haWwiOiJhZnZvamlAc25hcG1haWwuY2MiLCJyb2xlIjpbImJhc2ljVXNlciIsIjgwNmQzY2M2LTI2OTMtYTg0NS05Y2FhLTNhMWNlZThmNDY2ZV9Pd25lciIsIjVhN2VkOTI0LTM4NWYtMDA2YS04OWU2LTNhMWNlZThmNDU1NV9Pd25lciJdLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOiJGYWxzZSIsImVtYWlsX3ZlcmlmaWVkIjoiRmFsc2UiLCJ1bmlxdWVfbmFtZSI6ImFmdm9qaSIsInNlY3VyaXR5X3N0YW1wIjoiR1NCNE4ySUIyTElBWk5CRzUyM0tGNVo0T0YyUUo3WDIiLCJvaV9wcnN0IjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV9hdV9pZCI6ImFlNzQ5Yzk4LTg0YzgtODFmMy1lZTkzLTNhMWNlZThmMGUxMiIsImNsaWVudF9pZCI6IkFldmF0YXJBdXRoU2VydmVyIiwib2lfdGtuX2lkIjoiNGM1YWVkZDMtMGU4NS0xODEwLTE5YjAtM2ExY2VlOTAwNDFmIn0.of4itZLslUAmoJsfuY1vmmgELUyRs6HBm3Y1Ki1tdEPNZlLqzmhJZ41RUYKwGEljaWWvA2lQ-lktrHP0KhJZOHCkdd3Z3Refvo7C7GG9yDKFszsOX00pwjHXZhx3FusuTmhcJiXeBPjc-w2l_0YQ3OVnH1FdC31MCReF-rxwQXxrpkDUkkc0ixJAJegGvgcH8OuU1Ce0r47S2tpqnPv6O6sv8wpIIF0IWh05YvsrLWUnfKGb_Q0uh_Jo2m43T5_KdkfOXtmWq-wLAlWwBjjNXUHYEN51LA3xIOtsMpaeFVV8uDu31qgAmZeqNlk0AkBf_CTu4mHIHPBy-kBhEwcmVA"; + "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjZERTNDMzQzNTgxNEIxQ0NDQkQ2RkIyMzk2RjQxRjEyMjVFRUVGOEMiLCJ4NXQiOiJiZVBEUTFnVXNjekwxdnNqbHZRZkVpWHU3NHciLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjgwODIvIiwiZXhwIjoxNzYwNzY0ODMzLCJpYXQiOjE3NjA1OTIwMzQsImF1ZCI6IkFldmF0YXIiLCJzY29wZSI6IkFldmF0YXIgb2ZmbGluZV9hY2Nlc3MiLCJqdGkiOiI2YjkyNDk4Yi1hMTdlLTQ2ZGMtODY2Yy0zYTZkZWJiZmU1YTMiLCJzdWIiOiJkZDJkZjhjNC1lMDc0LTI5MzAtNzgwZS0zYTFjZmRhMjc5NzAiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJydW51bHIiLCJlbWFpbCI6InJ1bnVsckBzbmFwbWFpbC5jYyIsInJvbGUiOlsiMGIzYWY3YTktODlkZi1hMTQ5LWIzYjctM2ExY2ZkYTI5YTllX093bmVyIiwiYmFzaWNVc2VyIiwiYjE3NzMwZmYtNmIzOS01MjQ1LTY0Y2MtM2ExY2ZkYTI5OTk2X093bmVyIl0sInBob25lX251bWJlcl92ZXJpZmllZCI6IkZhbHNlIiwiZW1haWxfdmVyaWZpZWQiOiJGYWxzZSIsInVuaXF1ZV9uYW1lIjoicnVudWxyIiwic2VjdXJpdHlfc3RhbXAiOiJKSU42Wk1UQTZDSU9OS1QyQ0hXRU1SR1RBUUlWSkZESSIsIm9pX3Byc3QiOiJBZXZhdGFyQXV0aFNlcnZlciIsIm9pX2F1X2lkIjoiMTczNTQ5ZDItNjI4Yy05OGY4LWIxMzQtM2ExY2ZkYTI3ZWYxIiwiY2xpZW50X2lkIjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV90a25faWQiOiI0MjQyZjNhMy00ODg3LTE5YjQtOGM1OC0zYTFjZmRhMzU0OWYifQ.IrwJncCMtd7vbZfAXfB3yBKNtopCe0mvD3VbA636-aYdLu4w54RbgiW52RRlqQSOGXcn1rsvcu8N-2p1UgajE-17r3MaAOjT63vPgW5xNEOrzfm__2kzR6Znw1IfBgMYm_onmD7iENR4fhxKVQsW0bGH9Btlch-6zzOY24eimRdjaVJZ-qUezEJa8jycNm7uOlUKYDhnP7ZiVxdZL-m29iwDZX_kBzZfCLnB9KkGvw3D94cB56LzhalaIARv044-lJUHJ8jKI_8Rh9JdBsKh1syQ5fkqj_vmWWiC32FKZEqHD_vWKHFobDCXYQJG4b_Gv4XigtN4tNsCQv_IwwarsQ"; aevatarAI.fetchRequest.setHeaders({ Authorization: TOKEN, }); diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 468ccfd..444b5d0 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -63,8 +63,10 @@ "@aevatar-react-sdk/services": "workspace:*", "@aevatar-react-sdk/types": "workspace:*", "@aevatar-react-sdk/utils": "workspace:*", + "@dagrejs/dagre": "^1.1.5", "@fontsource/geist": "^5.2.7", "@hookform/resolvers": "^3.9.1", + "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-checkbox": "^1.1.5", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-icons": "^1.3.2", @@ -76,7 +78,6 @@ "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", - "@radix-ui/react-accordion": "^1.2.2", "@rjsf/core": "6.0.0-beta.1", "@rjsf/shadcn": "6.0.0-beta.1", "@rjsf/utils": "6.0.0-beta.1", @@ -96,8 +97,8 @@ "react-dnd-touch-backend": "^16.0.1", "react-dropzone": "^14.3.5", "react-hook-form": "^7.54.2", - "react-loading": "^2.0.3", "react-json-tree": "^0.20.0", + "react-loading": "^2.0.3", "react-use": "^17.6.0", "tailwind-merge": "^2.5.5", "uuid": "^11.1.0", diff --git a/packages/ui-react/src/components/AevatarItem4Workflow/AevatarCardInner.tsx b/packages/ui-react/src/components/AevatarItem4Workflow/AevatarCardInner.tsx index ded4fcf..f533232 100644 --- a/packages/ui-react/src/components/AevatarItem4Workflow/AevatarCardInner.tsx +++ b/packages/ui-react/src/components/AevatarItem4Workflow/AevatarCardInner.tsx @@ -75,7 +75,7 @@ export default function AevatarCardInner({ "sdk:aevatar-item-background sdk:border sdk:border-[var(--sdk-color-bg-primary)] sdk:group-hover:border-[var(--sdk-border-foreground)]", selected && "sdk:border-[var(--sdk-border-foreground)]! ", // "sdk:border-b-[var(--sdk-bg-accent)]!", - 'sdk:pb-[6px]', + "sdk:pb-[6px]", "sdk:max-h-[300px] sdk:overflow-y-auto", className )} @@ -97,7 +97,8 @@ export default function AevatarCardInner({ { e.stopPropagation(); diff --git a/packages/ui-react/src/components/Workflow/index.tsx b/packages/ui-react/src/components/Workflow/index.tsx index cde6088..c5b7b33 100644 --- a/packages/ui-react/src/components/Workflow/index.tsx +++ b/packages/ui-react/src/components/Workflow/index.tsx @@ -47,9 +47,18 @@ import { TooltipTrigger, } from "../ui/tooltip"; import { getPropertiesByDefaultValues } from "../../utils/jsonSchemaParse"; +import { applyHorizontalLayout } from "./layoutUtils"; +import { LayoutDashboard } from "lucide-react"; const getId = () => `${uuidv4()}`; +const fitViewOptions = { + padding: 0.1, + includeHiddenNodes: false, + minZoom: 0.1, + maxZoom: 1, +}; + interface IProps { gaevatarList?: IAgentInfoDetail[]; editWorkflow?: { @@ -200,7 +209,7 @@ export const Workflow = forwardRef( [onRemoveNode, setNodes, setEdges] ); - const { screenToFlowPosition } = useReactFlow(); + const { screenToFlowPosition, fitView } = useReactFlow(); const [dragInfo] = useDnD(); const nodesRef = useRef(nodes); const gaevatarListRef = useRef([]); @@ -547,7 +556,7 @@ export const Workflow = forwardRef( }, measured: { width: 234, - height: 301, + height: 100, }, } : { @@ -563,7 +572,7 @@ export const Workflow = forwardRef( }, measured: { width: 234, - height: 301, + height: 100, }, }; setNodes((nds) => nds.concat(newNode as any)); @@ -607,7 +616,11 @@ export const Workflow = forwardRef( const edgeTypes = useMemo( () => ({ bezier: (edgeProps) => ( - + ), }), [setEdges, isRunning] @@ -647,6 +660,16 @@ export const Workflow = forwardRef( } }, [redo, setNodes, setEdges, onRedoAction]); + const onFormatLayoutHandler = useCallback(() => { + if (nodes.length === 0) return; + + const { nodes: layoutedNodes, edges: layoutedEdges } = + applyHorizontalLayout(nodes, edges); + setNodes(layoutedNodes); + setEdges(layoutedEdges); + fitView(fitViewOptions); + }, [nodes, edges, setNodes, fitView, setEdges]); + return (
+ + + + + + + Format Layout + + + +