feature: accordion logs close when format layout

Author: potter-sun

packages/demo/pages/ui/+Page.tsx

@@ -119,7 +119,7 @@ export default function UI() {
 
   const getTokenByclient = useCallback(async () => {
     const TOKEN =
-      "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg5QzAwNzc1RTlGNDhEQUZGN0QzQzZGMjBBNkZDQTdDN0FDMzNDQjIiLCJ4NXQiOiJpY0FIZGVuMGphXzMwOGJ5Q21fS2ZIckRQTEkiLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwczovL2F1dGgtc3RhdGlvbi1kZXYtc3RhZ2luZy5hZXZhdGFyLmFpLyIsImV4cCI6MTc2MTExNDQ1MCwiaWF0IjoxNzYwOTQxNjUxLCJhdWQiOiJBZXZhdGFyIiwic2NvcGUiOiJBZXZhdGFyIG9mZmxpbmVfYWNjZXNzIiwianRpIjoiNzVlNTAzNzQtMDAwYS00OWUzLWFlZDYtOGM0N2IwN2YzYzFjIiwic3ViIjoiNTdiYWIyMjAtOTVkZS1kNDYxLTFlODMtM2ExY2VlOGYwYzIzIiwicHJlZmVycmVkX3VzZXJuYW1lIjoiYWZ2b2ppIiwiZW1haWwiOiJhZnZvamlAc25hcG1haWwuY2MiLCJyb2xlIjpbImJhc2ljVXNlciIsIjgwNmQzY2M2LTI2OTMtYTg0NS05Y2FhLTNhMWNlZThmNDY2ZV9Pd25lciIsIjVhN2VkOTI0LTM4NWYtMDA2YS04OWU2LTNhMWNlZThmNDU1NV9Pd25lciJdLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOiJGYWxzZSIsImVtYWlsX3ZlcmlmaWVkIjoiRmFsc2UiLCJ1bmlxdWVfbmFtZSI6ImFmdm9qaSIsInNlY3VyaXR5X3N0YW1wIjoiR1NCNE4ySUIyTElBWk5CRzUyM0tGNVo0T0YyUUo3WDIiLCJvaV9wcnN0IjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV9hdV9pZCI6ImFlNzQ5Yzk4LTg0YzgtODFmMy1lZTkzLTNhMWNlZThmMGUxMiIsImNsaWVudF9pZCI6IkFldmF0YXJBdXRoU2VydmVyIiwib2lfdGtuX2lkIjoiZGY1MTBmMWQtZWQ2ZS1kZmE5LTZlOTYtM2ExZDEyN2EwZjE1In0.LQp9Exri0cOToeXWrf8_eRl7CwBw0bCk1Wt5ypfIF-G6V7dG96I7jvaSRGub_a1EtQAz3yOZvqGyt9Qq-vayyzNITnFm05a2Ry4fkjCM_n7LS1HwDo3CRkkLkv0CsDKhL2-XI-2dmDXw9CX552UyUVC3ouqNY1VOsVATX1h29ZqozxInWHzm2MIN_KqOBDrWe36M1j5jaT0ZcHRxgIB7rr3PCw-IxrIsaUJUidVL1vuMiqRFmdtfse8F1tveeZLl6LP9UnrEsbjYnhAdguNEudUETmt4_NxYfO6zOKGJnhxvAWFE34Q7BmVuGULg2RURgDOTsUyEemmC3QNz62POZw";
+      "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg5QzAwNzc1RTlGNDhEQUZGN0QzQzZGMjBBNkZDQTdDN0FDMzNDQjIiLCJ4NXQiOiJpY0FIZGVuMGphXzMwOGJ5Q21fS2ZIckRQTEkiLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwczovL2F1dGgtc3RhdGlvbi1kZXYtc3RhZ2luZy5hZXZhdGFyLmFpLyIsImV4cCI6MTc2MTgwNTk2MywiaWF0IjoxNzYxNjMzMTY0LCJhdWQiOiJBZXZhdGFyIiwic2NvcGUiOiJBZXZhdGFyIG9mZmxpbmVfYWNjZXNzIiwianRpIjoiNzA2N2VkZWYtMGIwZi00MDNlLTkyNTQtNDBlZTBjNjJiMTdjIiwic3ViIjoiNTdiYWIyMjAtOTVkZS1kNDYxLTFlODMtM2ExY2VlOGYwYzIzIiwicHJlZmVycmVkX3VzZXJuYW1lIjoiYWZ2b2ppIiwiZW1haWwiOiJhZnZvamlAc25hcG1haWwuY2MiLCJyb2xlIjpbImJhc2ljVXNlciIsIjgwNmQzY2M2LTI2OTMtYTg0NS05Y2FhLTNhMWNlZThmNDY2ZV9Pd25lciIsIjVhN2VkOTI0LTM4NWYtMDA2YS04OWU2LTNhMWNlZThmNDU1NV9Pd25lciJdLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOiJGYWxzZSIsImVtYWlsX3ZlcmlmaWVkIjoiRmFsc2UiLCJ1bmlxdWVfbmFtZSI6ImFmdm9qaSIsInNlY3VyaXR5X3N0YW1wIjoiR1NCNE4ySUIyTElBWk5CRzUyM0tGNVo0T0YyUUo3WDIiLCJvaV9wcnN0IjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV9hdV9pZCI6ImFlNzQ5Yzk4LTg0YzgtODFmMy1lZTkzLTNhMWNlZThmMGUxMiIsImNsaWVudF9pZCI6IkFldmF0YXJBdXRoU2VydmVyIiwib2lfdGtuX2lkIjoiNmRiNTQ2ZjQtZWE0My0wZDQyLTI5N2MtM2ExZDNiYjFiNGM3In0.Oe866mgfN96JSxM45iMa62dNosvYECMPSllj1cFPoC0DOxgNXZH9dFi77_fmAQAZgelHLFXHu8qy2NHEq-kKW22tQcbAvGxSQhnWgjAZ1xlWUTAp3kRybVJNNOlFm5G2EvLzTcTE9NhDf5Vm0_PQ3IgEFWxOdNwSM_11zCLLzesJeu6Yaz5ikFR2OVICbLPoYjSP0mK04edjFX0WVeZ-u19b-yfXXD4io3m2P-zztLL2McD42RLWR58qtEcEK-5qne5va6RU16qJyUjOWI1rtTzaVKPdJ_IkQaLRANSw6ch8VxNVO1mxyhzjdz4P6SWsXrhnoR7HQAnNA3phtim6bw";
     aevatarAI.fetchRequest.setHeaders({
       Authorization: TOKEN,
     });
@@ -268,12 +268,6 @@ export default function UI() {
                 setStage(undefined);
               }}
               editWorkflow={editWorkflow}
-              onDuplicateWorkflow={async (workflow) => {
-                setStage(undefined);
-                await sleep(1000);
-                setEditWorkflow(workflow);
-                onShowWorkflow();
-              }}
             />
           </FullScreen>
         )}

packages/ui-react/src/components/AevatarItem4Workflow/AccordionLogs.tsx

@@ -11,6 +11,11 @@ import Loading from "../../assets/svg/loading.svg?react";
 import clsx from "clsx";
 import ToCopy from "../Copy";
 import { Copy } from "lucide-react";
+import { useState, forwardRef, useImperativeHandle } from "react";
+
+export interface AccordionLogsRef {
+  setOpen: (open: boolean) => void;
+}
 
 // Helper function to format object keys for preview
 const formatObjectPreview = (
@@ -139,16 +144,28 @@ const renderDataContent = (data: unknown) => {
   );
 };
 
-export default function AccordionLogs({
-  agentLogs,
-  onShowLogsDialog,
-}: {
+interface AccordionLogsProps {
   agentLogs: ExecutionLogItem;
   onShowLogsDialog: (e: React.MouseEvent<HTMLDivElement>) => void;
-}) {
+}
+
+const AccordionLogs = forwardRef<AccordionLogsRef, AccordionLogsProps>(({
+  agentLogs,
+  onShowLogsDialog,
+}, ref) => {
+  const [open, setOpen] = useState(false);
+  
+  useImperativeHandle(ref, () => ({
+    setOpen,
+  }), []);
+  
+  const handleOpenChange = (value: string) => {
+    setOpen(value === "item-1");
+  };
+  
   return (
     <div className="sdk:absolute sdk:top-0 sdk:left-0 sdk:w-full sdk:h-full">
-      <Accordion type="single" collapsible>
+      <Accordion type="single" value={open ? "item-1" : ""} onValueChange={handleOpenChange} collapsible>
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="sdk:flex sdk:items-center sdk:gap-[6px]">
@@ -262,4 +279,8 @@ export default function AccordionLogs({
       </Accordion>
     </div>
   );
-}
+});
+
+AccordionLogs.displayName = "AccordionLogs";
+
+export default AccordionLogs;

packages/ui-react/src/components/AevatarItem4Workflow/AevatarCardInner.tsx

@@ -2,15 +2,16 @@ import type { IAgentInfoDetail } from "@aevatar-react-sdk/services";
 
 import Hypotenuse from "../../assets/svg/hypotenuse.svg?react";
 import "./index.css";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsonSchemaParse } from "../../utils/jsonSchemaParse";
 import type { JSONSchemaType } from "../types";
 import clsx from "clsx";
 import type { TNodeDataClick } from "../Workflow/types";
 import HoverMenu from "./HoverMenu";
 import type { ExecutionLogItem } from "@aevatar-react-sdk/types";
-import AccordionLogs from "./AccordionLogs";
+import AccordionLogs, { type AccordionLogsRef } from "./AccordionLogs";
 import { ChevronDown } from "lucide-react";
+import { eventBus } from "@aevatar-react-sdk/utils";
 export interface IAevatarCardInnerProps {
   className?: string;
   isNew?: boolean;
@@ -55,7 +56,16 @@ export default function AevatarCardInner({
   );
 
   const [showMore, setShowMore] = useState(true);
-
+  const accordionLogsRef = useRef<AccordionLogsRef>(null);
+  useEffect(() => {
+    const listener = () => {
+      accordionLogsRef.current?.setOpen(false);
+    };
+    eventBus.addListener("formatLayout", listener);
+    return () => {
+      eventBus.removeListener("formatLayout", listener);
+    };
+  }, []);
   return (
     <div className="sdk:w-[234px]">
       {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
@@ -250,6 +260,7 @@ export default function AevatarCardInner({
       <div className="sdk:relative ">
         {agentLogs && (
           <AccordionLogs
+            ref={accordionLogsRef}
             agentLogs={agentLogs}
             onShowLogsDialog={onShowLogsDialog}
           />

packages/ui-react/src/components/Workflow/index.tsx

@@ -49,7 +49,10 @@ import {
 import { getPropertiesByDefaultValues } from "../../utils/jsonSchemaParse";
 import { applyHorizontalLayout } from "./layoutUtils";
 import { LayoutDashboard } from "lucide-react";
-import { WORKFLOW_NODE_HEIGHT, WORKFLOW_NODE_WIDTH } from "../../constants/workflow";
+import {
+  WORKFLOW_NODE_HEIGHT,
+  WORKFLOW_NODE_WIDTH,
+} from "../../constants/workflow";
 
 const getId = () => `${uuidv4()}`;
 
@@ -92,6 +95,7 @@ interface IProps {
   extraControlBar?: React.ReactNode;
   onUndoAction?: () => void;
   onRedoAction?: () => void;
+  onFormatLayout?: () => void;
 }
 
 export interface IWorkflowInstance {
@@ -123,6 +127,7 @@ export const Workflow = forwardRef(
       gaevatarTypeList,
       onUndoAction,
       onRedoAction,
+      onFormatLayout,
     }: IProps,
     ref
   ) => {
@@ -669,7 +674,8 @@ export const Workflow = forwardRef(
       setNodes(layoutedNodes);
       setEdges(layoutedEdges);
       fitView(fitViewOptions);
-    }, [nodes, edges, setNodes, fitView, setEdges]);
+      onFormatLayout?.();
+    }, [nodes, edges, setNodes, fitView, setEdges, onFormatLayout]);
 
     return (
       <div

packages/ui-react/src/components/WorkflowConfiguration/index.tsx

@@ -24,7 +24,7 @@ import type {
   IWorkflowViewDataParams,
 } from "@aevatar-react-sdk/services";
 import type { IWorkflowAevatarEditProps } from "../WorkflowAevatarEdit";
-import { sleep } from "@aevatar-react-sdk/utils";
+import { eventBus, sleep } from "@aevatar-react-sdk/utils";
 import { aevatarAI } from "../../utils";
 import { useToast } from "../../hooks/use-toast";
 import type { INode } from "../Workflow/types";
@@ -746,6 +746,9 @@ IWorkflowConfigurationProps) => {
     },
     [getWorkflowViewData, onDuplicateWorkflow]
   );
+  const onFormatLayout = useCallback(() => {
+    eventBus.emit("formatLayout");
+  }, []);
 
   return (
     <>
@@ -830,6 +833,7 @@ IWorkflowConfigurationProps) => {
               onRedoAction={() => {
                 setEditAgentOpen(undefined);
               }}
+              onFormatLayout={onFormatLayout}
             />
             <Dialog
               open={Boolean(editAgentOpen)}