[WIP] transition form

myshell-ai · Jan 15, 2025 · f7bc95b · f7bc95b
1 parent dc8822f
commit f7bc95b
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 95 deletions.
diff --git a/web/apps/web/src/app/container.ts b/web/apps/web/src/app/container.ts
@@ -123,10 +123,6 @@ export const webModule = new ContainerModule(bind => {
           return model.nodeData;
         };
         /* eslint-disable no-underscore-dangle, func-names */
-        (window as any)._get_app_builder_transitions_data = function () {
-          return model.transitionsData;
-        };
-        /* eslint-disable no-underscore-dangle, func-names */
         (window as any)._get_app_builder_scopes = function () {
           return model.scopes;
         };

diff --git a/web/apps/web/src/components/app/edges/type.ts b/web/apps/web/src/components/app/edges/type.ts
@@ -33,10 +33,4 @@ export type CustomEdgeData = {
   display_name?: string;
 };
 
-export type XCustomEdgeData = {
-  id?: string;
-  type?: TransitionTargetEnum;
-  display_name?: string;
-};
-
 export type ICustomEdge = Edge<CustomEdgeData>;
diff --git a/web/apps/web/src/components/app/edges/x-custom-edge.tsx b/web/apps/web/src/components/app/edges/x-custom-edge.tsx
@@ -13,8 +13,11 @@ import React, { useEffect } from 'react';
 import { useAppState } from '@/stores/app/use-app-state';
 
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
-import { XCustomEdgeData } from './type';
-import { TransitionTypeEnum } from '@shellagent/shared/protocol/transition';
+
+import {
+  TransitionTypeEnum,
+  TransitionData,
+} from '@shellagent/shared/protocol/transition';
 export const XCustomEdge = ({
   id,
   sourceX,
@@ -29,7 +32,7 @@ export const XCustomEdge = ({
   source,
   sourceHandleId,
   data,
-}: EdgeProps<XCustomEdgeData>) => {
+}: EdgeProps<TransitionData>) => {
   const appBuilder = useInjection<AppBuilderModel>('AppBuilderModel');
   const [edgePath] = getBezierPath({
     sourceX: sourceX - 8,
@@ -76,6 +79,7 @@ export const XCustomEdge = ({
           open: true,
           source,
           sourceHandle: sourceHandleId || '',
+          id,
           data: {
             ...(data || {}),
             id,
@@ -103,7 +107,7 @@ export const XCustomEdge = ({
       <EdgeText
         x={(sourceX + targetX) / 2}
         y={(sourceY + targetY) / 2 - 10}
-        label={data?.display_name || 'transition'}
+        label={data?.name || 'transition'}
         labelStyle={{
           fill: '#202223',
           fontSize: 12,

diff --git a/web/apps/web/src/components/app/new-transition-sheet/index.tsx b/web/apps/web/src/components/app/new-transition-sheet/index.tsx
@@ -18,10 +18,16 @@ import { type TransitionData } from '@shellagent/shared/protocol/transition';
 const TransitionSheetNew: React.FC<{}> = observer(() => {
   const appBuilder = useInjection<AppBuilderModel>('AppBuilderModel');
 
+  const { setEdges, onChangeEdgeData, edges } = useReactFlowStore(state => ({
+    setEdges: state.setEdges,
+    onChangeEdgeData: state.onChangeEdgeData,
+    edges: state.edges,
+  }));
+
   const {
     sourceHandle,
     source,
-    currentEdegData,
+    currentEdgeId,
     newTransitionSheetOpen,
     setNewTransitionSheetOpen,
     transitionType,
@@ -30,59 +36,57 @@ const TransitionSheetNew: React.FC<{}> = observer(() => {
     source: state.currentTransitionSource,
     newTransitionSheetOpen: state.newTransitionSheetOpen,
     setNewTransitionSheetOpen: state.setNewTransitionSheetOpen,
-    currentEdegData: state.currentEdegData,
+    currentEdgeId: state.currentEdgeId,
     transitionType: state.transitionType,
   }));
 
-  const handleId = currentEdegData?.id as string;
-
   const handleClose = useCallback(() => {
     setNewTransitionSheetOpen({ open: false, source: '', sourceHandle: '' });
   }, []);
 
+  const edgeData = edges.find(edge => edge.id === currentEdgeId)
+    ?.data as TransitionData;
+
   const handleChange = useCallback(
     (values: TransitionData) => {
-      appBuilder.setTransitionsData(
-        currentEdegData?.source || '',
-        handleId,
-        values,
-      );
+      if (edgeData?.target !== values.target) {
+        const currentEdge = edges.find(edge => edge.id === currentEdgeId);
+        if (currentEdge) {
+          setEdges(
+            edges.map(edge => {
+              if (edge.id === currentEdge.id) {
+                return {
+                  ...edge,
+                  target: values.target,
+                  data: values,
+                };
+              }
+              return edge;
+            }),
+          );
+        }
+      } else {
+        onChangeEdgeData(currentEdgeId, values);
+      }
     },
-    [currentEdegData?.source, handleId],
+    [edgeData, edges, setEdges, onChangeEdgeData, currentEdgeId],
   );
 
   const schema = useMemo(() => {
     return getXTransitionSchema(
-      appBuilder.nodeData[currentEdegData?.target || '']?.inputs ?? {},
+      appBuilder.nodeData[edgeData?.target || '']?.inputs ?? {},
       transitionType,
     );
-  }, [appBuilder.nodeData, currentEdegData, transitionType]);
+  }, [appBuilder.nodeData, edgeData, transitionType]);
 
   const title = useMemo(() => {
-    const name =
-      appBuilder.transitionsData[currentEdegData?.source || '']?.[handleId]
-        ?.name;
     return (
       <EditableTitle
-        value={name}
-        onChange={value => {
-          if (currentEdegData?.source) {
-            appBuilder.setTransitionsData(currentEdegData.source, handleId, {
-              ...appBuilder.transitionsData[currentEdegData.source][handleId],
-              name: value,
-            });
-          }
-        }}
+        value={edgeData?.name}
+        onChange={value => handleChange({ ...edgeData, name: value })}
       />
     );
-  }, [appBuilder.transitionsData, currentEdegData?.source]);
-
-  const values = useMemo(() => {
-    return (
-      appBuilder.transitionsData[currentEdegData?.source || '']?.[handleId] ||
-      {}
-    );
-  }, [appBuilder.transitionsData, currentEdegData?.source, handleId]);
+  }, [edgeData]);
 
   return (
     <Drawer
@@ -109,7 +113,7 @@ const TransitionSheetNew: React.FC<{}> = observer(() => {
           parent="condition.twitter"
           key={sourceHandle}
           schema={schema}
-          values={values}
+          values={edgeData}
           onChange={values => handleChange(values as TransitionData)}
         />
       </SchemaProvider>

diff --git a/web/apps/web/src/components/app/new-transition-sheet/utils/index.ts b/web/apps/web/src/components/app/new-transition-sheet/utils/index.ts
diff --git a/web/apps/web/src/components/app/nodes/condition-state-node/index.tsx b/web/apps/web/src/components/app/nodes/condition-state-node/index.tsx
@@ -21,7 +21,8 @@ import { useKeyPress } from 'ahooks';
 import { useInjection } from 'inversify-react';
 import React, { useCallback, useRef, useEffect, useState } from 'react';
 
-import { EdgeDataTypeEnum, EdgeTypeEnum } from '@/components/app/edges';
+import { TransitionTargetEnum } from '@shellagent/shared/protocol/transition';
+import { EdgeTypeEnum } from '@/components/app/edges';
 import NodeCard from '@/components/app/node-card';
 import NodeForm from '@/components/app/node-form';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
@@ -180,11 +181,12 @@ const ConditionStateNode: React.FC<NodeProps<StateNodeType>> = ({
           type: EdgeTypeEnum.custom,
           data: {
             id: data.id,
-            custom: true,
-            type: EdgeDataTypeEnum.ALWAYS,
+            name: 'transition',
+            timers: {},
+            type: TransitionTargetEnum.ALWAYS,
             source: connection.source,
             target: connection.target,
-            conditions: [],
+            target_inputs: {},
           },
           style: {
             stroke: '#B6BABF',

diff --git a/web/apps/web/src/components/app/nodes/x-intro-node/index.tsx b/web/apps/web/src/components/app/nodes/x-intro-node/index.tsx
@@ -14,7 +14,7 @@ import { FormRef } from '@shellagent/ui';
 import { useInjection } from 'inversify-react';
 import React, { useCallback, useRef, useEffect, useState } from 'react';
 
-import { EdgeDataTypeEnum, EdgeTypeEnum } from '@/components/app/edges';
+import { EdgeTypeEnum } from '@/components/app/edges';
 import NodeCard from '@/components/app/node-card';
 import NodeForm from '@/components/app/node-form';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
@@ -24,6 +24,7 @@ import emitter, {
 } from '@/stores/app/models/emitter';
 import { useAppState } from '@/stores/app/use-app-state';
 import { getXStateSchema } from '@/stores/app/schema/get-x-state-schema';
+import { TransitionTargetEnum } from '@shellagent/shared/protocol/transition';
 
 const IntroNode: React.FC<NodeProps<IntroNodeType>> = ({ selected, data }) => {
   const stateFormRef = useRef<FormRef>(null);
@@ -97,11 +98,12 @@ const IntroNode: React.FC<NodeProps<IntroNodeType>> = ({ selected, data }) => {
           type: EdgeTypeEnum.custom,
           data: {
             id: data.id,
-            custom: true,
-            type: EdgeDataTypeEnum.ALWAYS,
+            name: 'transition',
+            timers: {},
+            type: TransitionTargetEnum.TIMER,
             source: connection.source,
             target: connection.target,
-            conditions: [],
+            target_inputs: {},
           },
           style: {
             stroke: '#B6BABF',

diff --git a/web/apps/web/src/components/app/nodes/x-state-node/index.tsx b/web/apps/web/src/components/app/nodes/x-state-node/index.tsx
@@ -19,9 +19,10 @@ import { customSnakeCase, getTaskDisplayName } from '@shellagent/shared/utils';
 import { FormRef } from '@shellagent/ui';
 import { useKeyPress } from 'ahooks';
 import { useInjection } from 'inversify-react';
-import React, { useCallback, useRef, useEffect, useState } from 'react';
 
-import { EdgeDataTypeEnum, EdgeTypeEnum } from '@/components/app/edges';
+import React, { useCallback, useRef, useEffect, useState } from 'react';
+import { TransitionTargetEnum } from '@shellagent/shared/protocol/transition';
+import { EdgeTypeEnum } from '@/components/app/edges';
 import NodeCard from '@/components/app/node-card';
 import NodeForm from '@/components/app/node-form';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
@@ -177,11 +178,12 @@ const XStateNode: React.FC<NodeProps<StateNodeType>> = ({ selected, data }) => {
           type: EdgeTypeEnum.custom,
           data: {
             id: data.id,
-            custom: true,
-            type: EdgeDataTypeEnum.ALWAYS,
+            name: 'transition',
+            timers: {},
+            type: TransitionTargetEnum.ALWAYS,
             source: connection.source,
             target: connection.target,
-            conditions: [],
+            target_inputs: {},
           },
           style: {
             stroke: '#B6BABF',

diff --git a/web/apps/web/src/stores/app/models/app-builder.model.ts b/web/apps/web/src/stores/app/models/app-builder.model.ts
@@ -59,14 +59,8 @@ import {
   genAutomata,
   formatReactFlow2Flow,
 } from '@/stores/app/utils/data-transformer';
-import type {
-  Config,
-  Metadata,
-  NodeDataType,
-  TransitionDataType,
-} from '@/types/app/types';
+import type { Config, Metadata, NodeDataType } from '@/types/app/types';
 import { ToastModel } from '@/utils/toast.model';
-import { type TransitionData } from '@shellagent/shared/protocol/transition';
 import {
   CascaderOption,
   convertRefOptsToCascaderOpts,
@@ -87,7 +81,6 @@ const settingsDisabled = process.env.NEXT_PUBLIC_DISABLE_SETTING === 'yes';
 @injectable()
 export class AppBuilderModel {
   nodeData: NodeDataType = {};
-  transitionsData: TransitionDataType = {};
   @observable rerenderButtons: Record<string, boolean> = {};
   @observable metadata: Metadata = {
     name: '',
@@ -178,8 +171,6 @@ export class AppBuilderModel {
       eventKey,
     );
 
-    console.log('refOpts>>', refOpts);
-
     const cascaderOpts = convertRefOptsToCascaderOpts(refOpts);
     return cascaderOpts;
   }
@@ -195,14 +186,6 @@ export class AppBuilderModel {
     this.nodeData[id] = data;
   }
 
-  @action.bound
-  setTransitionsData(id: string, handleId: string, data: TransitionData) {
-    if (!this.transitionsData[id]) {
-      this.transitionsData[id] = {};
-    }
-    this.transitionsData[id][handleId] = data;
-  }
-
   @action.bound
   deleteNodeData(id: string) {
     delete this.nodeData[id];

diff --git a/web/apps/web/src/stores/app/schema/get-transition-schema.ts b/web/apps/web/src/stores/app/schema/get-transition-schema.ts
@@ -23,12 +23,7 @@ export const getXTransitionSchema = (
     properties: {
       name: {
         type: 'string',
-        default: 'transition',
-        'x-hidden': true,
-      },
-      id: {
-        type: 'string',
-        default: generateUUID(),
+        'x-type': 'Control',
         'x-hidden': true,
       },
       type: {