hotfix: 修复一系列问题 (#24)

1、fix: 修复transition addItem导致的数据问题 2、fix: 修复code mode数据问题 3、fix: 修复mode切换问题
myshell-ai · Sep 21, 2024 · b2cee00 · b2cee00
1 parent 6b3107d
commit b2cee00
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 32 deletions.
diff --git a/web/apps/web/src/components/app/config-form/button-config/index.tsx b/web/apps/web/src/components/app/config-form/button-config/index.tsx
@@ -1,24 +1,41 @@
 'use client';
 
-import { TValues } from '@shellagent/form-engine';
+import { TValues, TFieldMode } from '@shellagent/form-engine';
+import { useCallback } from 'react';
 
 import NodeForm from '@/components/app/node-form';
 import { useAppState } from '@/stores/app/use-app-state';
 import { buttonConfigSchema } from '@/stores/app/utils/schema';
+import { useAppStore } from '@/stores/app/app-provider';
 
 interface ButtonConfigProps {
   values: TValues;
+  id: string;
   onChange: (values: TValues) => void;
 }
 
-export const ButtonConfig = ({ values, onChange }: ButtonConfigProps) => {
+export const ButtonConfig = ({ values, onChange, id }: ButtonConfigProps) => {
+  const { setFieldsModeMap, fieldsModeMap } = useAppStore(state => ({
+    setFieldsModeMap: state.setFieldsModeMap,
+    fieldsModeMap: state.config?.fieldsModeMap,
+  }));
   const currentButtonId = useAppState(state => state.currentButtonId);
+
+  const onModeChange = useCallback(
+    (name: string, mode: TFieldMode) => {
+      setFieldsModeMap({ id: `${id}.${currentButtonId}`, name, mode });
+    },
+    [currentButtonId, id, setFieldsModeMap],
+  );
+
   return (
     <NodeForm
       key={currentButtonId}
       schema={buttonConfigSchema}
       values={values as TValues}
       onChange={onChange}
+      onModeChange={onModeChange}
+      modeMap={fieldsModeMap?.[`${id}.${currentButtonId}`] || {}}
     />
   );
 };
diff --git a/web/apps/web/src/components/app/config-form/widget-config/index.tsx b/web/apps/web/src/components/app/config-form/widget-config/index.tsx
@@ -1,24 +1,35 @@
 'use client';
 
-import { TValues, getDefaultValueBySchema } from '@shellagent/form-engine';
+import {
+  TValues,
+  getDefaultValueBySchema,
+  TFieldMode,
+} from '@shellagent/form-engine';
 import { isEmpty, merge } from 'lodash-es';
 import { useEffect, useMemo, useCallback } from 'react';
 
 import NodeForm from '@/components/app/node-form';
 import { getSchemaByWidget } from '@/stores/app/utils/get-widget-schema';
 import { useWorkflowStore } from '@/stores/workflow/workflow-provider';
+import { useAppStore } from '@/stores/app/app-provider';
 
 interface WidgetConfigProps {
   values: TValues | undefined;
   parent: string;
+  id: string;
   onChange: (values: TValues) => void;
 }
 
 export const WidgetConfig: React.FC<WidgetConfigProps> = ({
   values,
   parent,
+  id,
   onChange,
 }) => {
+  const { setFieldsModeMap, fieldsModeMap } = useAppStore(state => ({
+    setFieldsModeMap: state.setFieldsModeMap,
+    fieldsModeMap: state.config?.fieldsModeMap,
+  }));
   const { loading, getWidgetSchema, widgetSchema } = useWorkflowStore(
     state => ({
       loading: state.loading.getWidgetSchema,
@@ -74,6 +85,13 @@ export const WidgetConfig: React.FC<WidgetConfigProps> = ({
     values,
   ]);
 
+  const onModeChange = useCallback(
+    (name: string, mode: TFieldMode) => {
+      setFieldsModeMap({ id: `${id}.${parent}`, name, mode });
+    },
+    [id, setFieldsModeMap, parent],
+  );
+
   if (!values) {
     return null;
   }
@@ -85,6 +103,8 @@ export const WidgetConfig: React.FC<WidgetConfigProps> = ({
       parent={parent}
       onChange={handleOnChange}
       loading={loading?.[values.widget_class_name]}
+      onModeChange={onModeChange}
+      modeMap={fieldsModeMap?.[`${id}.${parent}`] || {}}
     />
   );
 };
diff --git a/web/apps/web/src/components/app/config-form/workflow-config/index.tsx b/web/apps/web/src/components/app/config-form/workflow-config/index.tsx
@@ -1,7 +1,11 @@
 'use client';
 
 import { NodeIdEnum } from '@shellagent/flow-engine';
-import { TValues, getDefaultValueBySchema } from '@shellagent/form-engine';
+import {
+  TValues,
+  getDefaultValueBySchema,
+  TFieldMode,
+} from '@shellagent/form-engine';
 import { merge } from 'lodash-es';
 import { useEffect, useMemo, useCallback } from 'react';
 
@@ -12,11 +16,15 @@ import { useWorkflowStore } from '@/stores/workflow/workflow-provider';
 
 interface WorkflowConfigProps {
   values: TValues | undefined;
+  parent: string;
+  id: string;
   onChange: (values: TValues) => void;
 }
 
 export const WorkflowConfig: React.FC<WorkflowConfigProps> = ({
   values,
+  parent,
+  id,
   onChange,
 }) => {
   const {
@@ -29,6 +37,11 @@ export const WorkflowConfig: React.FC<WorkflowConfigProps> = ({
     loading: state.loading,
   }));
 
+  const { setFieldsModeMap, fieldsModeMap } = useAppStore(state => ({
+    setFieldsModeMap: state.setFieldsModeMap,
+    fieldsModeMap: state.config?.fieldsModeMap,
+  }));
+
   const options = useAppStore(state => state.flowList).map(flow => ({
     label: flow.metadata?.name,
     value: `${flow.id}/latest`,
@@ -75,17 +88,27 @@ export const WorkflowConfig: React.FC<WorkflowConfigProps> = ({
     [defaultValues, onChange],
   );
 
+  const onModeChange = useCallback(
+    (name: string, mode: TFieldMode) => {
+      setFieldsModeMap({ id: `${id}.${parent}`, name, mode });
+    },
+    [id, setFieldsModeMap, parent],
+  );
+
   if (!values) {
     return null;
   }
 
   return (
     <NodeForm
       key={JSON.stringify(schema)}
+      parent={parent}
       schema={schema}
       values={values}
       onChange={handleOnChange}
       loading={loading.getProConfig}
+      onModeChange={onModeChange}
+      modeMap={fieldsModeMap?.[`${id}.${parent}`] || {}}
     />
   );
 };
diff --git a/web/apps/web/src/components/app/node-form/widgets/expression-input/index.tsx b/web/apps/web/src/components/app/node-form/widgets/expression-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   MentionsInput,
   OnChangeHandlerFunc,
@@ -76,29 +76,44 @@ const ExpressionInput: React.FC<IExpressionInputProps> = ({
     return text;
   };
 
+  // TODO 如果多个value相同，只能映射到最后一个label
   const v2l = (value: string) => {
-    return (
-      flatOptions?.reduce<string>((prev, item) => {
-        const { value, label } = item;
-        if (value && prev) {
-          prev = prev.replaceAll(
-            value,
-            `@[${label || DEFAULT_LABEL}](value:${value})`,
-          );
-        }
-        return prev;
-      }, value) || value
-    );
+    const valueToLabelMap = new Map<string, string>();
+
+    // 构建 value 到 label 的映射
+    flatOptions.forEach(item => {
+      const { value: itemValue, label } = item;
+      if (itemValue) {
+        valueToLabelMap.set(itemValue, label || DEFAULT_LABEL);
+      }
+    });
+
+    // 替换 value 为对应的 label
+    valueToLabelMap.forEach((label, itemValue) => {
+      const regex = new RegExp(`\\b${itemValue}\\b`, 'g');
+      // 确保替换时没有重复替换
+      value = value.replace(regex, match => {
+        // 检查是否已经被替换过
+        const alreadyReplaced = new RegExp(
+          `@\\[${label}\\]\\(value:${itemValue}\\)`,
+        ).test(value);
+        return alreadyReplaced ? match : `@[${label}](value:${itemValue})`;
+      });
+    });
+
+    return value;
   };
+
   const l2v = (label: string) => {
     const str =
       flatOptions?.reduce<string>((prev, item) => {
-        const { value, label } = item;
+        const { value, label: itemLabel } = item;
         if (value && prev) {
-          prev = prev.replaceAll(
-            `@[${label || DEFAULT_LABEL}](value:${value})`,
-            value || '',
+          const regex = new RegExp(
+            `@\\[${itemLabel || DEFAULT_LABEL}\\]\\(value:${value}\\)`,
+            'g',
           );
+          prev = prev.replace(regex, value || '');
         }
         return prev;
       }, label) || label;
@@ -124,7 +139,7 @@ const ExpressionInput: React.FC<IExpressionInputProps> = ({
     onChange?.(e);
   };
 
-  const newValue = value ? v2l(value) : value;
+  const newValue = useMemo(() => (value ? v2l(value) : value), [value]);
 
   const mentions =
     flatOptions?.reduce<SuggestionDataItem[]>((memo, cur) => {

diff --git a/web/apps/web/src/components/app/node-form/widgets/transition-condition-editor.tsx b/web/apps/web/src/components/app/node-form/widgets/transition-condition-editor.tsx
@@ -5,9 +5,10 @@ import {
   ArrowRightIcon,
 } from '@heroicons/react/24/outline';
 import { useReactFlowStore, NodeTypeEnum } from '@shellagent/flow-engine';
+import { TFieldMode } from '@shellagent/form-engine';
 import { Button, Input, Select, IconButton, Drawer } from '@shellagent/ui';
 import { produce } from 'immer';
-import { useRef, useState } from 'react';
+import { useRef, useState, useCallback } from 'react';
 
 import { ICondition } from '@/components/app/edges';
 import NodeForm from '@/components/app/node-form';
@@ -117,7 +118,11 @@ const TransitionConditionEditor = ({
     setOpen: state.setTargetInputsSheetOpen,
   }));
 
-  const nodeData = useAppStore(state => state.nodeData);
+  const { nodeData, setFieldsModeMap, fieldsModeMap } = useAppStore(state => ({
+    nodeData: state.nodeData,
+    setFieldsModeMap: state.setFieldsModeMap,
+    fieldsModeMap: state.config?.fieldsModeMap,
+  }));
 
   const handleOpen = (open: boolean, index: number) => {
     setOpen(open);
@@ -167,6 +172,15 @@ const TransitionConditionEditor = ({
       }));
   };
 
+  const modeId = `${source}.condition.${index}`;
+
+  const onModeChange = useCallback(
+    (name: string, mode: TFieldMode) => {
+      setFieldsModeMap({ id: modeId, name, mode });
+    },
+    [modeId, setFieldsModeMap],
+  );
+
   return (
     <div className="flex gap-3 flex-col justify-center">
       {value?.map?.((condition, index) => (
@@ -204,6 +218,8 @@ const TransitionConditionEditor = ({
           parent={`condition.${index}`}
           schema={schema}
           values={value?.[index]?.target_inputs}
+          onModeChange={onModeChange}
+          modeMap={fieldsModeMap?.[modeId] || {}}
           onChange={values =>
             onChange(
               produce(value, draft => {

diff --git a/web/apps/web/src/components/app/state-config-sheet/index.tsx b/web/apps/web/src/components/app/state-config-sheet/index.tsx
@@ -99,6 +99,7 @@ const StateConfigSheet: React.FC<{}> = () => {
       return {
         children: (
           <ButtonConfig
+            id={currentStateId}
             values={values}
             onChange={newValue =>
               nodeFormRef.current?.setValue(
@@ -119,7 +120,9 @@ const StateConfigSheet: React.FC<{}> = () => {
       return {
         children: (
           <WorkflowConfig
+            id={currentStateId}
             key={`workflow-config-${currentTaskIndex}`}
+            parent={`blocks.${currentTaskIndex}`}
             values={workflow}
             onChange={commonProps.onChange}
           />
@@ -140,6 +143,7 @@ const StateConfigSheet: React.FC<{}> = () => {
       return {
         children: (
           <WidgetConfig
+            id={currentStateId}
             key={`widget-config-${currentTaskIndex}`}
             parent={`blocks.${currentTaskIndex}`}
             values={widget}

diff --git a/web/apps/web/src/components/app/transition-sheet/index.tsx b/web/apps/web/src/components/app/transition-sheet/index.tsx
@@ -6,12 +6,7 @@ import { Drawer } from '@shellagent/ui';
 import { useInjection } from 'inversify-react';
 import { useMemo, useCallback, memo } from 'react';
 
-import {
-  ICondition,
-  ICustomEdge,
-  EdgeDataTypeEnum,
-  EdgeTypeEnum,
-} from '@/components/app/edges';
+import { ICondition, ICustomEdge, EdgeTypeEnum } from '@/components/app/edges';
 import NodeForm from '@/components/app/node-form';
 import { AppBuilderChatModel } from '@/components/chat/app-builder-chat.model';
 import { useAppState } from '@/stores/app/use-app-state';
@@ -75,7 +70,7 @@ const TransitionSheet: React.FC<{}> = () => {
               id: generateUUID(),
               custom: true,
               event_key: generateUUID(),
-              type: EdgeDataTypeEnum.CHAT,
+              type: currentEdegData.type,
               source: newEdge.source,
               target: newEdge.target,
               conditions: [

diff --git a/web/apps/web/src/stores/app/use-app-state.tsx b/web/apps/web/src/stores/app/use-app-state.tsx
@@ -63,7 +63,7 @@ const initialState: State = {
     id: '',
     custom: true,
     event_key: '',
-    type: EdgeDataTypeEnum.CHAT,
+    type: EdgeDataTypeEnum.ALWAYS,
     target: '',
     conditions: [],
   },