mapped nest_component and set_properties action

raheeliftikhar5 · raheeliftikhar5 · commit 84c165bbfd21 · 2025-07-11T18:51:09.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx
@@ -19,7 +19,8 @@ import styled from "styled-components";
 import { ChatCompProps } from "../chatCompTypes";
 import { message } from "antd";
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
-import { addComponentAction } from "../../preLoadComp/actions/componentManagement";
+import { addComponentAction, nestComponentAction } from "../../preLoadComp/actions/componentManagement";
+import { configureComponentAction } from "../../preLoadComp/actions/componentConfiguration";
 
 const ChatContainer = styled.div<{ $autoHeight?: boolean }>`
   display: flex;
@@ -92,7 +93,7 @@ export function ChatMain(props: ChatCompProps) {
 
   // Keep the ref updated with the latest editorState
   useEffect(() => {
-    console.log("EDITOR STATE CHANGE ---> ", editorState);
+    // console.log("EDITOR STATE CHANGE ---> ", editorState);
     editorStateRef.current = editorState;
   }, [editorState]);
 
@@ -129,6 +130,30 @@ export function ChatMain(props: ChatCompProps) {
             actionPayload: action_payload,
             selectedComponent: action_parameters,
             selectedEditorComponent: null,
+            selectedNestComponent: null,
+            editorState: editorStateRef.current
+          });
+          break;
+        case "nest_component":
+          await nestComponentAction.execute({
+            actionKey: action_name,
+            actionValue: "",
+            actionPayload: action_payload,
+            selectedComponent: action_parameters,
+            selectedEditorComponent: null,
+            selectedNestComponent: null,
+            editorState: editorStateRef.current
+          });
+          break;
+        case "set_properties":
+          debugger;
+          await configureComponentAction.execute({
+            actionKey: action_name,
+            actionValue: action_parameters,
+            actionPayload: action_payload,
+            selectedEditorComponent: null,
+            selectedComponent: null,
+            selectedNestComponent: null,
             editorState: editorStateRef.current
           });
           break;
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentConfiguration.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentConfiguration.ts
@@ -1,5 +1,6 @@
 import { message } from "antd";
 import { ActionConfig, ActionExecuteParams } from "../types";
+import { getEditorComponentInfo } from "../utils";
 
 export const configureComponentAction: ActionConfig = {
   key: 'configure-components',
@@ -19,10 +20,40 @@ export const configureComponentAction: ActionConfig = {
     }
   },
   execute: async (params: ActionExecuteParams) => {
-    const { selectedEditorComponent, actionValue } = params;
+    const { selectedEditorComponent, actionValue: name, actionValue, actionPayload, editorState } = params;
+    const otherProps = actionPayload;
+    // const { name, ...otherProps } = actionPayload;
     
     try {
-      const config = JSON.parse(actionValue);
+      const componentInfo = getEditorComponentInfo(editorState, name);
+      
+      if (!componentInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found`);
+        return;
+      }
+
+      const { componentKey: parentKey, items } = componentInfo;
+    
+      if (!parentKey) {
+        message.error(`Parent component "${selectedEditorComponent}" not found in layout`);
+        return;
+      }
+
+      const parentItem = items[parentKey];
+      if (!parentItem) {
+        message.error(`Parent component "${selectedEditorComponent}" not found in items`);
+        return;
+      }
+
+      const itemComp = parentItem.children.comp;
+      const itemData = itemComp.toJsonValue();
+      const config = {
+        ...itemData,
+        ...otherProps
+      };
+      itemComp.dispatchChangeValueAction(config);
+
+      debugger;
       console.log('Configuring component:', selectedEditorComponent, 'with config:', config);
       message.info(`Configure action for component "${selectedEditorComponent}"`);
       
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts
@@ -137,14 +137,17 @@ export const nestComponentAction: ActionConfig = {
   requiresInput: false,
   isNested: true,
   execute: async (params: ActionExecuteParams) => {
-    const { selectedEditorComponent, selectedNestComponent, editorState } = params;
-    
+    // const { selectedEditorComponent, selectedNestComponent, editorState, actionPayload } = params;
+    const { editorState, actionPayload, selectedComponent: selectedNestComponent } = params;
+    const { name, layout, target: selectedEditorComponent, ...otherProps } = actionPayload;
+
     if (!selectedEditorComponent || !selectedNestComponent || !editorState) {
       message.error('Parent component, child component, and editor state are required');
       return;
     }
 
-    const parentComponentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
+    const [editorComponent, ...childComponents] = selectedEditorComponent.split('.');
+    const parentComponentInfo = getEditorComponentInfo(editorState, editorComponent);
     
     if (!parentComponentInfo) {
       message.error(`Parent component "${selectedEditorComponent}" not found`);
@@ -174,10 +177,15 @@ export const nestComponentAction: ActionConfig = {
     }
 
     try {
-
+      let compName = name;
       const nameGenerator = editorState.getNameGenerator();
       const compInfo = parseCompType(selectedNestComponent);
-      const compName = nameGenerator.genItemName(compInfo.compName);
+      if (!compName) {
+        compName = nameGenerator.genItemName(compInfo.compName);
+      }
+      // const nameGenerator = editorState.getNameGenerator();
+      // const compInfo = parseCompType(selectedNestComponent);
+      // const compName = nameGenerator.genItemName(compInfo.compName);
       const key = genRandomKey();
 
       const manifest = uiCompRegistry[selectedNestComponent];
@@ -193,15 +201,33 @@ export const nestComponentAction: ActionConfig = {
         defaultDataFn = manifest?.defaultDataFn;
       }
 
+      let compDefaultValue = defaultDataFn ? defaultDataFn(compName, nameGenerator, editorState) : undefined;
+      const compInitialValue = {
+        ...(compDefaultValue as any || {}),
+        ...otherProps,
+      }
+
       const widgetValue: GridItemDataType = {
         compType: selectedNestComponent,
         name: compName,
-        comp: defaultDataFn ? defaultDataFn(compName, nameGenerator, editorState) : undefined,
+        comp: compInitialValue,
       };
 
       const parentContainer = parentItem.children.comp;
-      
-      const realContainer = parentContainer.realSimpleContainer();
+      let originalContainer = parentContainer;
+      for (const childComponent of childComponents) {
+        originalContainer = originalContainer.children[childComponent];
+      }
+      if (originalContainer?.children?.[0]?.children?.view) {
+        originalContainer = originalContainer?.children?.[0]?.children?.view;
+      }
+
+      if (!originalContainer) {
+        message.error(`Container "${selectedEditorComponent}" cannot accept nested components`);
+        return;
+      }
+
+      const realContainer = originalContainer.realSimpleContainer();
       if (!realContainer) {
         message.error(`Container "${selectedEditorComponent}" cannot accept nested components`);
         return;
@@ -223,6 +249,7 @@ export const nestComponentAction: ActionConfig = {
         h: layoutInfo.h || 5,
         pos: itemPos,
         isDragging: false,
+        ...(layout || {}),
       };
 
       realContainer.dispatch(
