diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 1c417f1d4c..9fdd36ca18 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "type": "module",
   "license": "MIT",
   "dependencies": {
diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx
index 268b164047..9af1f3f6cb 100644
--- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx
@@ -240,366 +240,386 @@ const meetingControllerChildren = {
   messages: stateComp<JSONValue>([]),
 };
 
-let MeetingControllerComp = () => <div>Meeting Component is not available. It needs Lowcoder from Version v2.4</div>;
-
-if (typeof ContainerCompBuilder === 'function') {
-
-let MTComp = (function () {
-  return new ContainerCompBuilder(
-    meetingControllerChildren, (props: any, dispatch: any) => {
-      
-      const isTopBom = ["top", "bottom"].includes(props.placement);
-      const { items, ...otherContainerProps } = props.container;
-      // const userViewMode = useUserViewMode();
-      // const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
-      const onResizeStop = useCallback(
-        (
-          e: React.SyntheticEvent,
-          node: HTMLElement,
-          size: { width: number; height: number },
-          handle: ResizeHandle
-        ) => {
-          isTopBom
-            ? dispatch(changeChildAction("height", size.height, true))
-            : dispatch(changeChildAction("width", size.width, true));
-        },
-        [dispatch, isTopBom]
-      );
-      const [userIds, setUserIds] = useState<any>([]);
-      const [updateVolume, setUpdateVolume] = useState<any>({
-        update: false,
-        userid: null,
-      });
-      const [rtmMessages, setRtmMessages] = useState<any>([]);
-      const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
-      const [localUserVideo, setLocalUserVideo] =
-        useState<IAgoraRTCRemoteUser>();
-      const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
-      const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
-
-      useEffect(() => {
-        if (userJoined) {
-          // console.log("userJoined ", userJoined);
-          
-          let prevUsers: any[] = props.participants as [];
-          // console.log("prevUsers ", prevUsers);
-          let userData = {
-            user: userJoined.uid,
-            audiostatus: userJoined.hasAudio,
-            streamingVideo: true,
-          };
-          // console.log("userData ", userData);
-          setUserIds((userIds: any) => [...userIds, userData]);
-          // console.log("userIds ", userIds);
-          /* console.log(
+let MeetingControllerComp = () => (
+  <div>
+    Meeting Component is not available. It needs Lowcoder from Version v2.4
+  </div>
+);
+
+if (typeof ContainerCompBuilder === "function") {
+  let MTComp = (function () {
+    return new ContainerCompBuilder(
+      meetingControllerChildren,
+      (props: any, dispatch: any) => {
+        const isTopBom = ["top", "bottom"].includes(props.placement);
+        const { items, ...otherContainerProps } = props.container;
+        const userViewMode = useUserViewMode();
+        const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
+        const onResizeStop = useCallback(
+          (
+            e: React.SyntheticEvent,
+            node: HTMLElement,
+            size: { width: number; height: number },
+            handle: ResizeHandle
+          ) => {
+            isTopBom
+              ? dispatch(changeChildAction("height", size.height, true))
+              : dispatch(changeChildAction("width", size.width, true));
+          },
+          [dispatch, isTopBom]
+        );
+        const [userIds, setUserIds] = useState<any>([]);
+        const [updateVolume, setUpdateVolume] = useState<any>({
+          update: false,
+          userid: null,
+        });
+        const [rtmMessages, setRtmMessages] = useState<any>([]);
+        const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
+        const [localUserVideo, setLocalUserVideo] =
+          useState<IAgoraRTCRemoteUser>();
+        const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
+        const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
+
+        useEffect(() => {
+          if (userJoined) {
+            // console.log("userJoined ", userJoined);
+
+            let prevUsers: any[] = props.participants as [];
+            // console.log("prevUsers ", prevUsers);
+            let userData = {
+              user: userJoined.uid,
+              audiostatus: userJoined.hasAudio,
+              streamingVideo: true,
+            };
+            // console.log("userData ", userData);
+            setUserIds((userIds: any) => [...userIds, userData]);
+            // console.log("userIds ", userIds);
+            /* console.log(
             "removeDuplicates ",
             removeDuplicates(getData([...prevUsers, userData]).data, "user")
           ); */
-          dispatch(
-            changeChildAction(
-              "participants",
-              removeDuplicates(getData([...prevUsers, userData]).data, "user"),
-              false
-            )
-          );
-        }
-      }, [userJoined]);
+            dispatch(
+              changeChildAction(
+                "participants",
+                removeDuplicates(
+                  getData([...prevUsers, userData]).data,
+                  "user"
+                ),
+                false
+              )
+            );
+          }
+        }, [userJoined]);
 
-      function removeDuplicates(arr: any, prop: any) {
-        const uniqueObjects = [];
-        const seenValues = new Set();
+        function removeDuplicates(arr: any, prop: any) {
+          const uniqueObjects = [];
+          const seenValues = new Set();
 
-        for (const obj of arr) {
-          const objValue = obj[prop];
+          for (const obj of arr) {
+            const objValue = obj[prop];
 
-          if (!seenValues.has(objValue)) {
-            seenValues.add(objValue);
-            uniqueObjects.push(obj);
+            if (!seenValues.has(objValue)) {
+              seenValues.add(objValue);
+              uniqueObjects.push(obj);
+            }
           }
-        }
 
-        return uniqueObjects;
-      }
-      useEffect(() => {
-        if (userLeft) {
-          let newUsers = userIds.filter(
-            (item: any) => item.user !== userLeft.uid
-          );
-          let hostExists = newUsers.filter((f: any) => f.host === true);
-          if (hostExists.length == 0 && newUsers.length > 0) {
-            newUsers[0].host = true;
-          }
-          setUserIds(newUsers);
-          dispatch(
-            changeChildAction(
-              "participants",
-              removeDuplicates(getData(newUsers).data, "user"),
-              false
-            )
-          );
+          return uniqueObjects;
         }
-      }, [userLeft]);
+        useEffect(() => {
+          if (userLeft) {
+            let newUsers = userIds.filter(
+              (item: any) => item.user !== userLeft.uid
+            );
+            let hostExists = newUsers.filter((f: any) => f.host === true);
+            if (hostExists.length == 0 && newUsers.length > 0) {
+              newUsers[0].host = true;
+            }
+            setUserIds(newUsers);
+            dispatch(
+              changeChildAction(
+                "participants",
+                removeDuplicates(getData(newUsers).data, "user"),
+                false
+              )
+            );
+          }
+        }, [userLeft]);
 
-      // console.log("sharing", props.sharing);
+        // console.log("sharing", props.sharing);
 
-      useEffect(() => {
-        if (updateVolume.userid) {
-          let prevUsers: [] = props.participants as [];
+        useEffect(() => {
+          if (updateVolume.userid) {
+            let prevUsers: [] = props.participants as [];
 
+            const updatedItems = prevUsers.map((userInfo: any) => {
+              if (
+                userInfo.user === updateVolume.userid &&
+                userInfo.speaking != updateVolume.update
+              ) {
+                return { ...userInfo, speaking: updateVolume.update };
+              }
+              return userInfo;
+            });
+            dispatch(
+              changeChildAction(
+                "participants",
+                getData(updatedItems).data,
+                false
+              )
+            );
+          }
+        }, [updateVolume]);
+
+        useEffect(() => {
+          let prevUsers: [] = props.participants as [];
           const updatedItems = prevUsers.map((userInfo: any) => {
-            if (
-              userInfo.user === updateVolume.userid &&
-              userInfo.speaking != updateVolume.update
-            ) {
-              return { ...userInfo, speaking: updateVolume.update };
+            if (userInfo.user === localUserVideo?.uid) {
+              return { ...userInfo, streamingSharing: props.sharing.value };
             }
             return userInfo;
           });
           dispatch(
             changeChildAction("participants", getData(updatedItems).data, false)
           );
-        }
-      }, [updateVolume]);
-
-      useEffect(() => {
-        let prevUsers: [] = props.participants as [];
-        const updatedItems = prevUsers.map((userInfo: any) => {
-          if (userInfo.user === localUserVideo?.uid) {
-            return { ...userInfo, streamingSharing: props.sharing.value };
-          }
-          return userInfo;
-        });
-        dispatch(
-          changeChildAction("participants", getData(updatedItems).data, false)
-        );
 
-        let localObject = {
-          user: userId + "",
-          audiostatus: props.audioControl.value,
-          streamingVideo: props.videoControl.value,
-          streamingSharing: props.sharing.value,
-          speaking: localUserSpeaking,
-        };
-        props.localUser.onChange(localObject);
-      }, [props.sharing.value]);
-
-      // console.log("participants ", props.participants);
-
-      useEffect(() => {
-        let prevUsers: [] = props.participants as [];
-        const updatedItems = prevUsers.map((userInfo: any) => {
-          if (userInfo.user === localUserVideo?.uid) {
-            return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
-          }
-          return userInfo;
-        });
-        dispatch(
-          changeChildAction("participants", getData(updatedItems).data, false)
-        );
-      }, [localUserVideo?.hasVideo]);
-
-      useEffect(() => {
-        if (rtmMessages) {
-          dispatch(
-            changeChildAction("messages", getData(rtmMessages).data, false)
-          );
-        }
-      }, [rtmMessages]);
-
-      useEffect(() => {
-        if (localUserSpeaking === true || localUserVideo) {
           let localObject = {
             user: userId + "",
             audiostatus: props.audioControl.value,
             streamingVideo: props.videoControl.value,
+            streamingSharing: props.sharing.value,
             speaking: localUserSpeaking,
           };
           props.localUser.onChange(localObject);
-        }
-      }, [localUserSpeaking]);
-
-      useEffect(() => {
-        if (rtmChannelResponse) {
-          rtmClient.on("MessageFromPeer", function (message, peerId) {
-            setRtmMessages((prevMessages: any[]) => {
-              // Check if the messages array exceeds the maximum limit
-              if (prevMessages.length >= 500) {
-                prevMessages.pop(); // Remove the oldest message
-              }
-              return [
-                ...prevMessages,
-                { peermessage: JSON.parse(message.text + ""), from: peerId },
-              ];
-            });
-          });
+        }, [props.sharing.value]);
 
-          rtmChannelResponse.on("ChannelMessage", function (message, memberId) {
-            setRtmMessages((prevMessages: any[]) => {
-              // Check if the messages array exceeds the maximum limit
-              if (prevMessages.length >= 500) {
-                prevMessages.pop(); // Remove the oldest message
-              }
-              return [
-                ...prevMessages,
-                {
-                  channelmessage: JSON.parse(message.text + ""),
-                  from: memberId,
-                },
-              ];
-            });
+        // console.log("participants ", props.participants);
+
+        useEffect(() => {
+          let prevUsers: [] = props.participants as [];
+          const updatedItems = prevUsers.map((userInfo: any) => {
+            if (userInfo.user === localUserVideo?.uid) {
+              return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
+            }
+            return userInfo;
+          });
+          dispatch(
+            changeChildAction("participants", getData(updatedItems).data, false)
+          );
+        }, [localUserVideo?.hasVideo]);
 
+        useEffect(() => {
+          if (rtmMessages) {
             dispatch(
               changeChildAction("messages", getData(rtmMessages).data, false)
             );
-          });
-        }
-      }, [rtmChannelResponse]);
-      useEffect(() => {
-        if (client) {
-          //Enable Agora to send audio bytes
-          client.enableAudioVolumeIndicator();
-          //user activity listeners
-          client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-            setUserJoined(user);
-          });
-          client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
-            setUserLeft(user);
-          });
+          }
+        }, [rtmMessages]);
+
+        useEffect(() => {
+          if (localUserSpeaking === true || localUserVideo) {
+            let localObject = {
+              user: userId + "",
+              audiostatus: props.audioControl.value,
+              streamingVideo: props.videoControl.value,
+              speaking: localUserSpeaking,
+            };
+            props.localUser.onChange(localObject);
+          }
+        }, [localUserSpeaking]);
+
+        useEffect(() => {
+          if (rtmChannelResponse) {
+            rtmClient.on("MessageFromPeer", function (message, peerId) {
+              setRtmMessages((prevMessages: any[]) => {
+                // Check if the messages array exceeds the maximum limit
+                if (prevMessages.length >= 500) {
+                  prevMessages.pop(); // Remove the oldest message
+                }
+                return [
+                  ...prevMessages,
+                  { peermessage: JSON.parse(message.text + ""), from: peerId },
+                ];
+              });
+            });
 
-          //listen to user speaking,
-          client.on("volume-indicator", (volumeInfos: any) => {
-            if (volumeInfos.length === 0) return;
-            volumeInfos.map((volumeInfo: any) => {
-              //when the volume is above 30, user is probably speaking
-              const speaking = volumeInfo.level >= 30;
-              if (
-                volumeInfo.uid === userId &&
-                props.localUser.value.speaking != speaking
-              ) {
-                setLocalUserSpeaking(speaking);
-              } else {
-                setUpdateVolume({ update: speaking, userid: volumeInfo.uid });
+            rtmChannelResponse.on(
+              "ChannelMessage",
+              function (message, memberId) {
+                setRtmMessages((prevMessages: any[]) => {
+                  // Check if the messages array exceeds the maximum limit
+                  if (prevMessages.length >= 500) {
+                    prevMessages.pop(); // Remove the oldest message
+                  }
+                  return [
+                    ...prevMessages,
+                    {
+                      channelmessage: JSON.parse(message.text + ""),
+                      from: memberId,
+                    },
+                  ];
+                });
+
+                dispatch(
+                  changeChildAction(
+                    "messages",
+                    getData(rtmMessages).data,
+                    false
+                  )
+                );
               }
+            );
+          }
+        }, [rtmChannelResponse]);
+        useEffect(() => {
+          if (client) {
+            //Enable Agora to send audio bytes
+            client.enableAudioVolumeIndicator();
+            //user activity listeners
+            client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
+              setUserJoined(user);
+            });
+            client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
+              setUserLeft(user);
             });
-          });
 
-          client.on(
-            "user-published",
-            async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
-              setLocalUserVideo(user);
-            }
-          );
-          client.on(
-            "user-unpublished",
-            (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
-              setLocalUserVideo(user);
-            }
-          );
-        }
-      }, [client]);
-
-      return (
-        <BackgroundColorContext.Provider value={props.style.background}>
-          {/* <DrawerWrapper> */}
-          <Drawer
-            // resizable={resizable}
-            onResizeStop={onResizeStop}
-            rootStyle={
-              props.visible.value
-                ? { overflow: "auto", pointerEvents: "auto" }
-                : {}
-            }
-            styles={{
-              wrapper: {
-                maxHeight: "100%",
-                maxWidth: "100%",
-              },
-              body: {
-                padding: 0,
-                backgroundColor: props.style.background,
-              },
-            }}
-            closable={false}
-            placement={props.placement}
-            open={props.visible.value}
-            getContainer={() =>
-              document.querySelector(`#${CanvasContainerID}`) || document.body
-            }
-            footer={null}
-            width={transToPxSize(props.width || DEFAULT_SIZE)}
-            height={
-              !props.autoHeight
-                ? transToPxSize(props.height || DEFAULT_SIZE)
-                : ""
-            }
-            onClose={(e: any) => {
-              props.visible.onChange(false);
-            }}
-            afterOpenChange={(visible: any) => {
-              if (!visible) {
-                props.onEvent("close");
+            //listen to user speaking,
+            client.on("volume-indicator", (volumeInfos: any) => {
+              if (volumeInfos.length === 0) return;
+              volumeInfos.map((volumeInfo: any) => {
+                //when the volume is above 30, user is probably speaking
+                const speaking = volumeInfo.level >= 30;
+                if (
+                  volumeInfo.uid === userId &&
+                  props.localUser.value.speaking != speaking
+                ) {
+                  setLocalUserSpeaking(speaking);
+                } else {
+                  setUpdateVolume({ update: speaking, userid: volumeInfo.uid });
+                }
+              });
+            });
+
+            client.on(
+              "user-published",
+              async (
+                user: IAgoraRTCRemoteUser,
+                mediaType: "video" | "audio"
+              ) => {
+                setLocalUserVideo(user);
+              }
+            );
+            client.on(
+              "user-unpublished",
+              (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+                setLocalUserVideo(user);
+              }
+            );
+          }
+        }, [client]);
+
+        return (
+          <BackgroundColorContext.Provider value={props.style.background}>
+            {/* <DrawerWrapper> */}
+            <Drawer
+              resizable={resizable}
+              onResizeStop={onResizeStop}
+              rootStyle={
+                props.visible.value
+                  ? { overflow: "auto", pointerEvents: "auto" }
+                  : {}
               }
-            }}
-            zIndex={Layers.drawer}
-            maskClosable={props.maskClosable}
-            mask={props.showMask}
-          >
-            {/* <ButtonStyle
+              styles={{
+                wrapper: {
+                  maxHeight: "100%",
+                  maxWidth: "100%",
+                },
+                body: {
+                  padding: 0,
+                  backgroundColor: props.style.background,
+                },
+              }}
+              closable={false}
+              placement={props.placement}
+              open={props.visible.value}
+              getContainer={() =>
+                document.querySelector(`#${CanvasContainerID}`) || document.body
+              }
+              footer={null}
+              width={transToPxSize(props.width || DEFAULT_SIZE)}
+              height={
+                !props.autoHeight
+                  ? transToPxSize(props.height || DEFAULT_SIZE)
+                  : ""
+              }
+              onClose={(e: any) => {
+                props.visible.onChange(false);
+              }}
+              afterOpenChange={(visible: any) => {
+                if (!visible) {
+                  props.onEvent("close");
+                }
+              }}
+              zIndex={Layers.drawer}
+              maskClosable={props.maskClosable}
+              mask={props.showMask}
+            >
+              {/* <ButtonStyle
                 onClick={() => {
                   props.visible.onChange(false);
                 }}
               >
                 <CloseOutlined />
               </ButtonStyle> */}
-            <InnerGrid
-              {...otherContainerProps}
-              items={gridItemCompToGridItems(items)}
-              autoHeight={props.autoHeight}
-              minHeight={isTopBom ? DEFAULT_SIZE + "px" : "100%"}
-              style={{ height: "100%" }}
-              containerPadding={[DEFAULT_PADDING, DEFAULT_PADDING]}
-              hintPlaceholder={HintPlaceHolder}
-              bgColor={props.style.background}
-            />
-          </Drawer>
-          {/* </DrawerWrapper> */}
-        </BackgroundColorContext.Provider>
-      );
-    }
-  )
-    .setPropertyViewFn((children: any) => (
-      <>
-        {/* {(EditorContext.editorModeStatus === "logic" ||
+              <InnerGrid
+                {...otherContainerProps}
+                items={gridItemCompToGridItems(items)}
+                autoHeight={props.autoHeight}
+                minHeight={isTopBom ? DEFAULT_SIZE + "px" : "100%"}
+                style={{ height: "100%" }}
+                containerPadding={[DEFAULT_PADDING, DEFAULT_PADDING]}
+                hintPlaceholder={HintPlaceHolder}
+                bgColor={props.style.background}
+              />
+            </Drawer>
+            {/* </DrawerWrapper> */}
+          </BackgroundColorContext.Provider>
+        );
+      }
+    )
+      .setPropertyViewFn((children: any) => (
+        <>
+          {/* {(EditorContext.editorModeStatus === "logic" ||
             EditorContext.editorModeStatus === "both") && (
             <> */}
-        <Section name={sectionNames.meetings}>
-          {children.appId.propertyView({
-            label: trans("meeting.appid"),
-          })}
-          {children.meetingName.propertyView({
-            label: trans("meeting.meetingName"),
-          })}
-          {children.localUserID.propertyView({
-            label: trans("meeting.localUserID"),
-          })}
-          {children.rtmToken.propertyView({
-            label: trans("meeting.rtmToken"),
-          })}
-          {children.rtcToken.propertyView({
-            label: trans("meeting.rtcToken"),
-          })}
-        </Section>
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {children.onMeetingEvent.getPropertyView()}
-        </Section>
-        {/* </>
+          <Section name={sectionNames.meetings}>
+            {children.appId.propertyView({
+              label: trans("meeting.appid"),
+            })}
+            {children.meetingName.propertyView({
+              label: trans("meeting.meetingName"),
+            })}
+            {children.localUserID.propertyView({
+              label: trans("meeting.localUserID"),
+            })}
+            {children.rtmToken.propertyView({
+              label: trans("meeting.rtmToken"),
+            })}
+            {children.rtcToken.propertyView({
+              label: trans("meeting.rtcToken"),
+            })}
+          </Section>
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {children.onMeetingEvent.getPropertyView()}
+          </Section>
+          {/* </>
           )} */}
 
-        {/* {(EditorContext.editorModeStatus === "layout" ||
+          {/* {(EditorContext.editorModeStatus === "layout" ||
             EditorContext.editorModeStatus === "both") && (
             <> */}
-        {/* <Section name={sectionNames.layout}>
+          {/* <Section name={sectionNames.layout}>
                 {children.placement.propertyView({
                   label: trans("meeting.placement"),
                   radioButton: true,
@@ -629,254 +649,254 @@ let MTComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section> */}
-        {/* </> */}
-        {/* )} */}
-      </>
-    ))
-    .build(); 
-  
-    })();
-
-    MTComp = class extends MTComp {
-      autoHeight(): boolean {
-        return false;
-      }
-    };
-    
-    MTComp = withMethodExposing(MTComp, [
-      {
-        method: {
-          name: "openDrawer",
-          params: [],
-        },
-        execute: (comp: any, values: any) => {
-          comp.children.visible.getView().onChange(true);
-        },
+          {/* </> */}
+          {/* )} */}
+        </>
+      ))
+      .build();
+  })();
+
+  MTComp = class extends MTComp {
+    autoHeight(): boolean {
+      return false;
+    }
+  };
+
+  MTComp = withMethodExposing(MTComp, [
+    {
+      method: {
+        name: "openDrawer",
+        params: [],
       },
-      {
-        method: {
-          name: "startSharing",
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          if (!comp.children.meetingActive.getView().value) return;
-          let sharing = !comp.children.sharing.getView().value;
-          await shareScreen(sharing);
-          comp.children.sharing.change(sharing);
-        },
+      execute: (comp: any, values: any) => {
+        comp.children.visible.getView().onChange(true);
       },
-      {
-        method: {
-          name: "audioControl",
-          description: trans("meeting.actionBtnDesc"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          if (!comp.children.meetingActive.getView().value) return;
-          let value = !comp.children.audioControl.getView().value;
-          comp.children.localUser.change({
-            user: userId + "",
-            audiostatus: value,
-            streamingVideo: comp.children.videoControl.getView().value,
-            speaking: false,
-          });
-          await turnOnMicrophone(value);
-          comp.children.audioControl.change(value);
-        },
+    },
+    {
+      method: {
+        name: "startSharing",
+        params: [],
       },
-      {
-        method: {
-          name: "videoControl",
-          description: trans("meeting.actionBtnDesc"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          //check if meeting is active
-          if (!comp.children.meetingActive.getView().value) return;
-          //toggle videoControl
-          let value = !comp.children.videoControl.getView().value;
-          if (videoTrack) {
-            videoTrack.setEnabled(value);
-          } else {
-            await turnOnCamera(value);
-          }
-          //change my local user data
-          let localData = {
-            user: userId + "",
-            streamingVideo: value,
-            audiostatus: comp.children.audioControl.getView().value,
-            speaking: comp.children.localUser.getView().value.speaking,
-          };
-    
-          comp.children.localUser.change(localData);
-          comp.children.videoControl.change(value);
-        },
+      execute: async (comp: any, values: any) => {
+        if (!comp.children.meetingActive.getView().value) return;
+        let sharing = !comp.children.sharing.getView().value;
+        await shareScreen(sharing);
+        comp.children.sharing.change(sharing);
       },
-      {
-        method: {
-          name: "startMeeting",
-          description: trans("meeting.actionBtnDesc"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          /* console.log("startMeeting ", {
+    },
+    {
+      method: {
+        name: "audioControl",
+        description: trans("meeting.actionBtnDesc"),
+        params: [],
+      },
+      execute: async (comp: any, values: any) => {
+        if (!comp.children.meetingActive.getView().value) return;
+        let value = !comp.children.audioControl.getView().value;
+        comp.children.localUser.change({
+          user: userId + "",
+          audiostatus: value,
+          streamingVideo: comp.children.videoControl.getView().value,
+          speaking: false,
+        });
+        await turnOnMicrophone(value);
+        comp.children.audioControl.change(value);
+      },
+    },
+    {
+      method: {
+        name: "videoControl",
+        description: trans("meeting.actionBtnDesc"),
+        params: [],
+      },
+      execute: async (comp: any, values: any) => {
+        //check if meeting is active
+        if (!comp.children.meetingActive.getView().value) return;
+        //toggle videoControl
+        let value = !comp.children.videoControl.getView().value;
+        if (videoTrack) {
+          videoTrack.setEnabled(value);
+        } else {
+          await turnOnCamera(value);
+        }
+        //change my local user data
+        let localData = {
+          user: userId + "",
+          streamingVideo: value,
+          audiostatus: comp.children.audioControl.getView().value,
+          speaking: comp.children.localUser.getView().value.speaking,
+        };
+
+        comp.children.localUser.change(localData);
+        comp.children.videoControl.change(value);
+      },
+    },
+    {
+      method: {
+        name: "startMeeting",
+        description: trans("meeting.actionBtnDesc"),
+        params: [],
+      },
+      execute: async (comp: any, values: any) => {
+        /* console.log("startMeeting ", {
             // user: userId + "",
             audiostatus: false,
             speaking: false,
             streamingVideo: true,
           }); */
-          if (comp.children.meetingActive.getView().value) return;
-          userId =
-            comp.children.localUserID.getView().value === ""
-              ? uuidv4()
-              : comp.children.localUserID.getView().value;
-          comp.children.localUser.change({
-            user: userId + "",
-            audiostatus: false,
-            speaking: false,
-            streamingVideo: true,
-          });
-          /* console.log("startMeeting localUser ", {
+        if (comp.children.meetingActive.getView().value) return;
+        userId =
+          comp.children.localUserID.getView().value === ""
+            ? uuidv4()
+            : comp.children.localUserID.getView().value;
+        comp.children.localUser.change({
+          user: userId + "",
+          audiostatus: false,
+          speaking: false,
+          streamingVideo: true,
+        });
+        /* console.log("startMeeting localUser ", {
             user: userId + "",
             audiostatus: false,
             speaking: false,
             streamingVideo: true,
           }); */
-    
-          comp.children.localUser.children.value.dispatch(
-            changeChildAction(
-              "localUser",
-              {
-                user: userId + "",
-                audiostatus: false,
-                speaking: false,
-                streamingVideo: true,
-              },
-              false
-            )
-          );
-          comp.children.videoControl.change(true);
-          await publishVideo(
-            comp.children.appId.getView(),
-            comp.children.meetingName.getView().value === ""
-              ? uuidv4()
-              : comp.children.meetingName.getView().value,
-            comp.children.rtmToken.getView().value,
-            comp.children.rtcToken.getView().value
-          );
-          comp.children.meetingActive.change(true);
-        },
+
+        comp.children.localUser.children.value.dispatch(
+          changeChildAction(
+            "localUser",
+            {
+              user: userId + "",
+              audiostatus: false,
+              speaking: false,
+              streamingVideo: true,
+            },
+            false
+          )
+        );
+        comp.children.videoControl.change(true);
+        await publishVideo(
+          comp.children.appId.getView(),
+          comp.children.meetingName.getView().value === ""
+            ? uuidv4()
+            : comp.children.meetingName.getView().value,
+          comp.children.rtmToken.getView().value,
+          comp.children.rtcToken.getView().value
+        );
+        comp.children.meetingActive.change(true);
       },
-      {
-        method: {
-          name: "broadCast",
-          description: trans("meeting.broadCast"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          if (!comp.children.meetingActive.getView().value) return;
-          let messagedata =
-            values !== undefined && values[0] !== undefined ? values[0] : "";
-          let toUsers: any =
-            values !== undefined && values[1] !== undefined ? values[1] : "";
-    
-          let message: any = {
-            time: Date.now(),
-            message: messagedata,
-          };
-    
-          if (toUsers.length > 0 && toUsers[0] !== undefined) {
-            toUsers.forEach((peer: any) => {
-              message.to = peer;
-              sendPeerMessageRtm(message, String(peer));
-            });
-          } else {
-            sendMessageRtm(message);
-          }
-        },
+    },
+    {
+      method: {
+        name: "broadCast",
+        description: trans("meeting.broadCast"),
+        params: [],
       },
-      {
-        method: {
-          name: "setMeetingName",
-          description: trans("meeting.meetingName"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          let meetingName: any = values[0];
-          comp.children.meetingName.change(meetingName);
-        },
+      execute: async (comp: any, values: any) => {
+        if (!comp.children.meetingActive.getView().value) return;
+        let messagedata =
+          values !== undefined && values[0] !== undefined ? values[0] : "";
+        let toUsers: any =
+          values !== undefined && values[1] !== undefined ? values[1] : "";
+
+        let message: any = {
+          time: Date.now(),
+          message: messagedata,
+        };
+
+        if (toUsers.length > 0 && toUsers[0] !== undefined) {
+          toUsers.forEach((peer: any) => {
+            message.to = peer;
+            sendPeerMessageRtm(message, String(peer));
+          });
+        } else {
+          sendMessageRtm(message);
+        }
       },
-      {
-        method: {
-          name: "setUserName",
-          description: trans("meeting.userName"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          let userName: any = values[0];
-          let userLocal = comp.children.localUser.getView().value;
-          comp.children.localUser.change({ ...userLocal, userName: userName });
-        },
+    },
+    {
+      method: {
+        name: "setMeetingName",
+        description: trans("meeting.meetingName"),
+        params: [],
       },
-      {
-        method: {
-          name: "setRTCToken",
-          description: trans("meeting.rtcToken"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          let rtcToken: any = values[0];
-          comp.children.rtcToken.change(rtcToken);
-        },
+      execute: async (comp: any, values: any) => {
+        let meetingName: any = values[0];
+        comp.children.meetingName.change(meetingName);
       },
-      {
-        method: {
-          name: "setRTMToken",
-          description: trans("meeting.rtmToken"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          let rtmToken: any = values[0];
-          comp.children.rtmToken.change(rtmToken);
-        },
+    },
+    {
+      method: {
+        name: "setUserName",
+        description: trans("meeting.userName"),
+        params: [],
       },
-      {
-        method: {
-          name: "endMeeting",
-          description: trans("meeting.actionBtnDesc"),
-          params: [],
-        },
-        execute: async (comp: any, values: any) => {
-          if (!comp.children.meetingActive.getView().value) return;
-    
-          let value = !comp.children.endCall.getView().value;
-          comp.children.endCall.change(value);
-          comp.children.meetingActive.change(false);
-    
-          await leaveChannel();
-    
-          comp.children.localUser.change({
-            user: userId + "",
-            streamingVideo: false,
-          });
-        },
+      execute: async (comp: any, values: any) => {
+        let userName: any = values[0];
+        let userLocal = comp.children.localUser.getView().value;
+        comp.children.localUser.change({ ...userLocal, userName: userName });
+      },
+    },
+    {
+      method: {
+        name: "setRTCToken",
+        description: trans("meeting.rtcToken"),
+        params: [],
+      },
+      execute: async (comp: any, values: any) => {
+        let rtcToken: any = values[0];
+        comp.children.rtcToken.change(rtcToken);
+      },
+    },
+    {
+      method: {
+        name: "setRTMToken",
+        description: trans("meeting.rtmToken"),
+        params: [],
+      },
+      execute: async (comp: any, values: any) => {
+        let rtmToken: any = values[0];
+        comp.children.rtmToken.change(rtmToken);
+      },
+    },
+    {
+      method: {
+        name: "endMeeting",
+        description: trans("meeting.actionBtnDesc"),
+        params: [],
       },
-    ]); 
-  
-    MeetingControllerComp = withExposingConfigs(MTComp, [
-      new NameConfig("appId", trans("meeting.appid")),
-      new NameConfig("localUser", trans("meeting.host")),
-      new NameConfig("participants", trans("meeting.participants")),
-      new NameConfig("meetingActive", trans("meeting.meetingActive")),
-      new NameConfig("meetingName", trans("meeting.meetingName")),
-      new NameConfig("localUserID", trans("meeting.localUserID")),
-      new NameConfig("messages", trans("meeting.messages")),
-      new NameConfig("rtmToken", trans("meeting.rtmToken")),
-      new NameConfig("rtcToken", trans("meeting.rtcToken")),
-    ]);
+      execute: async (comp: any, values: any) => {
+        if (!comp.children.meetingActive.getView().value) return;
 
+        let value = !comp.children.endCall.getView().value;
+        comp.children.endCall.change(value);
+        comp.children.meetingActive.change(false);
+
+        await leaveChannel();
+
+        comp.children.localUser.change({
+          user: userId + "",
+          streamingVideo: false,
+        });
+      },
+    },
+  ]);
+
+  MeetingControllerComp = withExposingConfigs(MTComp, [
+    new NameConfig("appId", trans("meeting.appid")),
+    new NameConfig("localUser", trans("meeting.host")),
+    new NameConfig("participants", trans("meeting.participants")),
+    new NameConfig("meetingActive", trans("meeting.meetingActive")),
+    new NameConfig("meetingName", trans("meeting.meetingName")),
+    new NameConfig("localUserID", trans("meeting.localUserID")),
+    new NameConfig("messages", trans("meeting.messages")),
+    new NameConfig("rtmToken", trans("meeting.rtmToken")),
+    new NameConfig("rtcToken", trans("meeting.rtcToken")),
+  ]);
 } else {
-  console.error("ContainerCompBuilder for Meeting Comp is not available. Please ensure that Lowcoder SDK version v2.4 or higher is installed.");
+  console.error(
+    "ContainerCompBuilder for Meeting Comp is not available. Please ensure that Lowcoder SDK version v2.4 or higher is installed."
+  );
 }
 
-export { MeetingControllerComp };
\ No newline at end of file
+export { MeetingControllerComp };
diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx
index 7c5569804c..a6d49b854b 100644
--- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx
@@ -130,7 +130,7 @@ let VideoCompBuilder = (function () {
         setVideo(userData.streamingVideo);
       }
     }, [props.userId.value]);
-    console.log("userId", userId);
+    // console.log("userId", userId);
     
 
     return (
diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
index 35b94ebdf2..dbedc1fd53 100644
--- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
@@ -231,4 +231,3 @@ export const VideoSharingStreamComp = withExposingConfigs(SharingCompBuilder, [
   new NameConfig("loading", trans("meeting.loadingDesc")),
   ...CommonNameConfig,
 ]);
- 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/index-test.tsx b/client/packages/lowcoder/src/comps/index-test.tsx
index ed770ca670..b832d8a1b3 100644
--- a/client/packages/lowcoder/src/comps/index-test.tsx
+++ b/client/packages/lowcoder/src/comps/index-test.tsx
@@ -174,7 +174,7 @@ var uiCompMap: Registry = {
     icon: VideoCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
     // comp: VideoSharingStreamComp,
-    comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }),
+    comp: remoteComp({ ...builtInRemoteComps, compName: "meetingSharing" }),
     withoutLoading: true,
     layoutInfo: {
       w: 12,
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 778271d112..f6db970115 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -122,10 +122,9 @@ const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
   packageName: "lowcoder-comps",
 };
 
-export var uiCompMap: Registry = { 
+export var uiCompMap: Registry = {
   // Dashboards
 
-  
   // charts
   chart: {
     name: trans("uiComp.chartCompName") + " (legacy)",
@@ -155,7 +154,7 @@ export var uiCompMap: Registry = {
     },
   },
 
-  candleStickChart : {
+  candleStickChart: {
     name: trans("uiComp.candleStickChartCompName"),
     enName: "Candlestick Chart",
     description: trans("uiComp.candleStickChartCompDesc"),
@@ -164,11 +163,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.candleStickChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "candleStickChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  funnelChart : {
+  funnelChart: {
     name: trans("uiComp.funnelChartCompName"),
     enName: "Sankey Chart",
     description: trans("uiComp.funnelChartCompDesc"),
@@ -177,11 +176,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.funnelChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "funnelChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  gaugeChart : {
+  gaugeChart: {
     name: trans("uiComp.gaugeChartCompName"),
     enName: "Candlestick Chart",
     description: trans("uiComp.gaugeChartCompDesc"),
@@ -190,11 +189,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.gaugeChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "gaugeChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  graphChart : {
+  graphChart: {
     name: trans("uiComp.graphChartCompName"),
     enName: "Graph Chart",
     description: trans("uiComp.graphChartCompDesc"),
@@ -203,9 +202,9 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.graphChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "graphChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
   heatmapChart: {
     name: trans("uiComp.heatmapChartCompName"),
@@ -216,11 +215,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.heatmapChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "heatmapChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  radarChart : {
+  radarChart: {
     name: trans("uiComp.radarChartCompName"),
     enName: "Radar Chart",
     description: trans("uiComp.radarChartCompDesc"),
@@ -229,11 +228,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.radarChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "radarChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  sankeyChart : {
+  sankeyChart: {
     name: trans("uiComp.sankeyChartCompName"),
     enName: "Sankey Chart",
     description: trans("uiComp.sankeyChartCompDesc"),
@@ -242,9 +241,9 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.sankeyChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "sankeyChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
   sunburstChart: {
     name: trans("uiComp.sunburstChartCompName"),
@@ -255,11 +254,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.sunburstChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "sunburstChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  themeriverChart : {
+  themeriverChart: {
     name: trans("uiComp.themeriverChartCompName"),
     enName: "Theme River Chart",
     description: trans("uiComp.themeriverChartCompDesc"),
@@ -268,11 +267,11 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.themeriverChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "themeriverChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  treeChart : {
+  treeChart: {
     name: trans("uiComp.treeChartCompName"),
     enName: "Tree Chart",
     description: trans("uiComp.treeChartCompDesc"),
@@ -280,12 +279,12 @@ export var uiCompMap: Registry = {
     icon: TreeChartCompIcon,
     keywords: trans("uiComp.treeChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "treeChart" }),
-    layoutInfo : {
-      "w": 12,
-      "h": 40
-    }
+    layoutInfo: {
+      w: 12,
+      h: 40,
+    },
   },
-  treemapChart : {
+  treemapChart: {
     name: trans("uiComp.treemapChartCompName"),
     enName: "Treemap Chart",
     description: trans("uiComp.treemapChartCompDesc"),
@@ -294,11 +293,10 @@ export var uiCompMap: Registry = {
     keywords: trans("uiComp.treemapChartCompKeywords"),
     comp: remoteComp({ ...builtInRemoteComps, compName: "treemapChart" }),
     layoutInfo: {
-      "w": 12,
-      "h": 40
-    }
+      w: 12,
+      h: 40,
+    },
   },
-  
 
   // GeoMap
 
@@ -309,7 +307,12 @@ export var uiCompMap: Registry = {
     categories: ["dashboards"],
     icon: GeoMapLayersCompIcon,
     keywords: trans("uiComp.openLayersGeoMapCompKeywords"),
-    comp: remoteComp({compName: "geo", packageName: "lowcoder-comp-geo", source: "npm", isRemote: true}),
+    comp: remoteComp({
+      compName: "geo",
+      packageName: "lowcoder-comp-geo",
+      source: "npm",
+      isRemote: true,
+    }),
     layoutInfo: {
       w: 12,
       h: 50,
@@ -355,13 +358,18 @@ export var uiCompMap: Registry = {
     categories: ["dashboards"],
     icon: PivotTableCompIcon,
     keywords: trans("uiComp.pivotTableCompKeywords"),
-    comp: remoteComp({compName: "pivottable", packageName: "lowcoder-comp-reactpivottable", source: "npm", isRemote: true}),
+    comp: remoteComp({
+      compName: "pivottable",
+      packageName: "lowcoder-comp-reactpivottable",
+      source: "npm",
+      isRemote: true,
+    }),
     layoutInfo: {
       w: 12,
       h: 50,
     },
   },
-  
+
   mermaid: {
     name: trans("uiComp.mermaidCompName"),
     enName: "Mermaid Charts",
@@ -418,8 +426,8 @@ export var uiCompMap: Registry = {
     icon: PageLayoutCompIcon,
     keywords: trans("uiComp.pageLayoutCompKeywords"),
     lazyLoad: true,
-    compName: 'PageLayoutComp',
-    compPath: 'comps/containerComp/pageLayoutComp',
+    compName: "PageLayoutComp",
+    compPath: "comps/containerComp/pageLayoutComp",
     withoutLoading: true,
     layoutInfo: {
       w: 12,
@@ -438,8 +446,8 @@ export var uiCompMap: Registry = {
     icon: ColumnLayoutCompIcon,
     keywords: trans("uiComp.responsiveLayoutCompKeywords"),
     lazyLoad: true,
-    compName: 'ColumnLayoutComp',
-    compPath: 'comps/columnLayout/index',
+    compName: "ColumnLayoutComp",
+    compPath: "comps/columnLayout/index",
     withoutLoading: true,
     layoutInfo: {
       w: 24,
@@ -692,7 +700,6 @@ export var uiCompMap: Registry = {
     withoutLoading: true,
   },
 
-
   // Scheduling
 
   calendar: {
@@ -733,7 +740,7 @@ export var uiCompMap: Registry = {
     categories: ["collaboration"],
     icon: VideoScreenshareCompIcon,
     keywords: trans("meeting.meetingCompKeywords"),
-    comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }),
+    comp: remoteComp({ ...builtInRemoteComps, compName: "meetingSharing" }),
     withoutLoading: true,
     layoutInfo: {
       w: 12,
@@ -803,7 +810,7 @@ export var uiCompMap: Registry = {
     name: trans("uiComp.commentCompName"),
     enName: "comment",
     description: trans("uiComp.commentCompDesc"),
-    categories: [ "collaboration"],
+    categories: ["collaboration"],
     icon: CommentCompIcon,
     keywords: trans("uiComp.commentCompKeywords"),
     lazyLoad: true,
@@ -1216,7 +1223,6 @@ export var uiCompMap: Registry = {
     },
   },
 
-
   // Project Management
 
   hillchart: {
@@ -1226,7 +1232,12 @@ export var uiCompMap: Registry = {
     categories: ["projectmanagement"],
     icon: HillchartCompIcon,
     keywords: trans("uiComp.hillchartCompKeywords"),
-    comp: remoteComp({compName: "hillcharts", packageName: "lowcoder-comp-hillcharts", source: "npm", isRemote: true}),
+    comp: remoteComp({
+      compName: "hillcharts",
+      packageName: "lowcoder-comp-hillcharts",
+      source: "npm",
+      isRemote: true,
+    }),
     layoutInfo: {
       w: 12,
       h: 50,
@@ -1239,7 +1250,12 @@ export var uiCompMap: Registry = {
     categories: ["projectmanagement", "documents"],
     icon: BPMNEditorCompIcon,
     keywords: trans("uiComp.bpmnEditorCompKeywords"),
-    comp: remoteComp({compName: "bpmn", packageName: "lowcoder-comp-bpmn-io", source: "npm", isRemote: true}),
+    comp: remoteComp({
+      compName: "bpmn",
+      packageName: "lowcoder-comp-bpmn-io",
+      source: "npm",
+      isRemote: true,
+    }),
     layoutInfo: {
       w: 19,
       h: 60,
@@ -1576,8 +1592,8 @@ export var uiCompMap: Registry = {
     categories: ["itemHandling", "documents"],
     keywords: trans("uiComp.transferKeywords"),
     lazyLoad: true,
-    compName: 'transferComp',
-    compPath: 'comps/transferComp',
+    compName: "transferComp",
+    compPath: "comps/transferComp",
     layoutInfo: {
       w: 12,
       h: 50,
@@ -1590,7 +1606,12 @@ export var uiCompMap: Registry = {
     categories: ["itemHandling"],
     icon: TurnstileCaptchaCompIcon,
     keywords: trans("uiComp.turnstileCaptchaCompKeywords"),
-    comp: remoteComp({compName: "cloudflareTurnstile", packageName: "lowcoder-comp-cf-turnstile", source: "npm", isRemote: true}),
+    comp: remoteComp({
+      compName: "cloudflareTurnstile",
+      packageName: "lowcoder-comp-cf-turnstile",
+      source: "npm",
+      isRemote: true,
+    }),
     layoutInfo: {
       w: 8,
       h: 20,
