[Feat]: AI Chat component enhancements

.github/workflows/docker-images.yml

@@ -80,18 +80,21 @@ jobs:
           # Image names
           ALLINONE_IMAGE_NAMES=lowcoderorg/lowcoder-ce:${IMAGE_TAG}
           FRONTEND_IMAGE_NAMES=lowcoderorg/lowcoder-ce-frontend:${IMAGE_TAG}
+          FRONTEND_EE_IMAGE_NAMES=lowcoderorg/lowcoder-enterprise-frontend:${IMAGE_TAG}
           APISERVICE_IMAGE_NAMES=lowcoderorg/lowcoder-ce-api-service:${IMAGE_TAG}
           NODESERVICE_IMAGE_NAMES=lowcoderorg/lowcoder-ce-node-service:${IMAGE_TAG}
 
           if [[ "${IS_LATEST}" == "true" ]]; then
                ALLINONE_IMAGE_NAMES="lowcoderorg/lowcoder-ce:latest,${ALLINONE_IMAGE_NAMES}"
                FRONTEND_IMAGE_NAMES="lowcoderorg/lowcoder-ce-frontend:latest,${FRONTEND_IMAGE_NAMES}"
+               FRONTEND_EE_IMAGE_NAMES="lowcoderorg/lowcoder-enterprise-frontend:latest,${FRONTEND_EE_IMAGE_NAMES}"
                APISERVICE_IMAGE_NAMES="lowcoderorg/lowcoder-ce-api-service:latest,${APISERVICE_IMAGE_NAMES}"
                NODESERVICE_IMAGE_NAMES="lowcoderorg/lowcoder-ce-node-service:latest,${NODESERVICE_IMAGE_NAMES}"
           fi;
 
           echo "ALLINONE_IMAGE_NAMES=${ALLINONE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
           echo "FRONTEND_IMAGE_NAMES=${FRONTEND_IMAGE_NAMES}" >> "${GITHUB_ENV}"
+          echo "FRONTEND_EE_IMAGE_NAMES=${FRONTEND_EE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
           echo "APISERVICE_IMAGE_NAMES=${APISERVICE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
           echo "NODESERVICE_IMAGE_NAMES=${NODESERVICE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
 
@@ -146,6 +149,24 @@ jobs:
           push: true
           tags: ${{ env.FRONTEND_IMAGE_NAMES }}
 
+      - name: Build and push the enterprise edition frontend image
+        if: ${{ env.BUILD_FRONTEND == 'true' }}
+        uses: docker/build-push-action@v6
+        env:
+          NODE_ENV: production
+        with:
+          file: ./deploy/docker/Dockerfile
+          target: lowcoder-enterprise-frontend
+          build-args: |
+            REACT_APP_ENV=production
+            REACT_APP_EDITION=enterprise
+            REACT_APP_COMMIT_ID="dev #${{ env.SHORT_SHA }}"
+          platforms: |
+            linux/amd64
+            linux/arm64
+          push: true
+          tags: ${{ env.FRONTEND_EE_IMAGE_NAMES }}
+
       - name: Build and push the node service image
         if: ${{ env.BUILD_NODESERVICE == 'true' }}
         uses: docker/build-push-action@v6

client/VERSION

@@ -1 +1 @@
-2.7.2
+2.7.6

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.7.2",
+  "version": "2.7.6",
   "type": "module",
   "private": true,
   "workspaces": [
@@ -15,6 +15,7 @@
     "start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
     "translate": "node --loader ts-node/esm ./scripts/translate.js",
     "build": "yarn node ./scripts/build.js",
+    "build:ee": "REACT_APP_EDITION=enterprise yarn node ./scripts/build.js",
     "test": "jest && yarn workspace lowcoder-comps test",
     "prepare": "yarn workspace lowcoder prepare",
     "build:core": "yarn workspace lowcoder-core build",
@@ -56,7 +57,7 @@
     "shelljs": "^0.8.5",
     "svgo": "^3.0.0",
     "ts-node": "^10.4.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.6.2",
     "whatwg-fetch": "^3.6.2"
   },
   "lint-staged": {
@@ -80,6 +81,7 @@
     "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
+    "dompurify": "^3.3.1",
     "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
     "react-countup": "^6.5.3",

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.7.2",
+  "version": "2.7.6",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

@@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   const [chartSize, setChartSize] = useState<ChartSize>();
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
+  const [chartKey, setChartKey] = useState(0);
+  const prevRaceMode = useRef<boolean>();
   const defaultChartTheme = {
     color: chartColorPalette,
     backgroundColor: "#fff",
@@ -73,6 +75,17 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+
+  // Detect race mode changes and force chart recreation
+  const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();
+  useEffect(() => {
+    if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) {
+      // Force chart recreation when race mode changes
+      setChartKey(prev => prev + 1);
+    }
+    prevRaceMode.current = currentRaceMode;
+  }, [currentRaceMode]);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
@@ -160,7 +173,6 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   useResizeDetector({
     targetRef: containerRef,
     onResize: ({width, height}) => {
-      console.log('barChart - resize');
       if (width && height) {
         setChartSize({ w: width, h: height });
       }
@@ -176,11 +188,13 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   return (
     <div ref={containerRef} style={{height: '100%'}}>
       <ReactECharts
+        key={chartKey}
         ref={(e) => (echartsCompRef.current = e)}
         style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
+        notMerge={!currentRaceMode}
+        lazyUpdate={!currentRaceMode}
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts

@@ -201,6 +201,15 @@ export function getEchartsConfig(
       animationEasing: 'linear',
       animationEasingUpdate: 'linear',
     }
+  } else {
+    // Ensure proper animation settings when race is disabled
+    config = {
+      ...config,
+      animationDuration: 1000,
+      animationDurationUpdate: 1000,
+      animationEasing: 'cubicOut',
+      animationEasingUpdate: 'cubicOut',
+    }
   }
   if (props.data.length <= 0) {
     // no data
@@ -333,6 +342,21 @@ export function getEchartsConfig(
           animationDurationUpdate: 300
         },
       }
+    } else {
+      // Reset axis animations when race is disabled
+      config = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+        yAxis: {
+          ...config.yAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+      }
     }
   }
   // console.log("Echarts transformedData and config", transformedData, config);

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

@@ -53,7 +53,7 @@ export const BarChartConfig = (function () {
         type: "bar",
         subtype: props.type,
         realtimeSort: props.race,
-        seriesLayoutBy: props.race?'column':undefined,
+        seriesLayoutBy: props.race?'column':'row',
         label: {
           show: props.showLabel,
           position: "top",

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -268,6 +268,7 @@ let CalendarBasicComp = (function () {
     const ref = createRef<HTMLDivElement>();
     const editEvent = useRef<EventInput>();
     const initData = useRef<boolean>(false);
+    const clickTimeout = useRef<NodeJS.Timeout | null>(null);
     const [form] = Form.useForm(); 
     const [left, setLeft] = useState<number | undefined>(undefined);
     const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
@@ -370,6 +371,15 @@ let CalendarBasicComp = (function () {
         initData.current = true;
       }
     }, [JSON.stringify(initialEvents), comp?.children?.comp?.children?.initialData]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+      return () => {
+        if (clickTimeout.current) {
+          clearTimeout(clickTimeout.current);
+        }
+      };
+    }, []);
 
     const resources = useMemo(() => props.resources.value, [props.resources.value]);
 
@@ -850,22 +860,30 @@ let CalendarBasicComp = (function () {
       handleEventDataChange,
     ]); 
 
+    const handleSingleClick = useCallback(() => {
+      // Prevent double click from triggering the event
+      // Use a timeout to debounce rapid clicks
+      if (clickTimeout.current) {
+        clearTimeout(clickTimeout.current);
+        clickTimeout.current = null;
+        return; // This was a double click, don't trigger
+      }
+
+      clickTimeout.current = setTimeout(() => {
+        props.onEvent('click');
+        clickTimeout.current = null;
+      }, 150); // Small delay to catch double clicks
+    }, [props.onEvent]);
+
     const handleDbClick = useCallback(() => {
-      const event = props.updatedEventsData.find(
-        (item: EventType) => item.id === editEvent.current?.id
-      ) as EventType;
       if (!props.editable || !editEvent.current) {
         return;
       }
-      if (event) {
-        showModal(event, true);
+      if (onEventVal && onEventVal.some((e: any) => e.name === 'doubleClick')) {
+        // Check if 'doubleClick' is included in the array
+        props.onEvent('doubleClick');
       } else {
-        if (onEventVal && onEventVal.some((e: any) => e.name === 'doubleClick')) {
-          // Check if 'doubleClick' is included in the array
-          props.onEvent('doubleClick');
-        } else {
-          showModal(editEvent.current as EventType, false);
-        }
+        showModal(editEvent.current as EventType, false);
       }
     }, [
       editEvent,
@@ -974,6 +992,9 @@ let CalendarBasicComp = (function () {
             allDaySlot={props.showAllDay}
             eventContent={renderEventContent}
             select={(info) => handleCreate(info)}
+            dateClick={() => {
+              handleSingleClick();
+            }}
             eventClick={(info) => {
               const event = events.find(
                 (item: EventInput) => item.id === info.event.id
@@ -982,6 +1003,7 @@ let CalendarBasicComp = (function () {
               setTimeout(() => {
                 editEvent.current = undefined;
               }, 500);
+              handleSingleClick();
             }}
             moreLinkClick={(info) => {
               let left = 0;

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx

@@ -174,6 +174,7 @@ LineChartTmpComp = withViewFn(LineChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx

@@ -194,6 +194,7 @@ PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />
@@ -302,7 +303,7 @@ let PieChartComp = withExposingConfigs(PieChartTmpComp, [
 
 
 export const PieChartCompWithDefault = withDefault(PieChartComp, {
-  xAxisKey: "date",
+  xAxisKey: "name",
   series: [
     {
       dataIndex: genRandomKey(),

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -172,15 +172,7 @@ export function getEchartsConfig(
       }
     },
     tooltip: props.tooltip && {
-      trigger: "axis",
-      axisPointer: {
-        type: "line",
-        lineStyle: {
-          color: "rgba(0,0,0,0.2)",
-          width: 2,
-          type: "solid"
-        }
-      }
+      trigger: "item",
     },
     grid: {
       ...gridPos,

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx

@@ -175,6 +175,7 @@ ScatterChartTmpComp = withViewFn(ScatterChartTmpComp, (comp) => {
         notMerge
         lazyUpdate
         opts={{ locale: getEchartsLocale() }}
+        theme={themeConfig}
         option={option}
         mode={mode}
       />

client/packages/lowcoder-core/lib/index.js

@@ -1692,11 +1692,12 @@ class CodeNode extends AbstractNode {
                 // if query is dependent on itself, mark as ready
                 if (pathsArr?.[0] === options?.queryName)
                     return;
+                // TODO: check if this is needed after removing lazy load
                 // wait for lazy loaded comps to load before executing query on page load
-                if (value && !Object.keys(value).length && paths.size) {
-                    isFetching = true;
-                    ready = false;
-                }
+                // if (value && !Object.keys(value).length && paths.size) {
+                //   isFetching = true;
+                //   ready = false;
+                // }
                 if (_.has(value, IS_FETCHING_FIELD)) {
                     isFetching = isFetching || value.isFetching === true;
                 }

client/packages/lowcoder-core/src/eval/codeNode.tsx

@@ -176,11 +176,12 @@ export class CodeNode extends AbstractNode<ValueAndMsg<unknown>> {
         // if query is dependent on itself, mark as ready
         if (pathsArr?.[0] === options?.queryName) return;
 
+        // TODO: check if this is needed after removing lazy load
         // wait for lazy loaded comps to load before executing query on page load
-        if (value && !Object.keys(value).length && paths.size) {
-          isFetching = true;
-          ready = false;
-        }
+        // if (value && !Object.keys(value).length && paths.size) {
+        //   isFetching = true;
+        //   ready = false;
+        // }
         if (_.has(value, IS_FETCHING_FIELD)) {
           isFetching = isFetching || value.isFetching === true;
         }

client/packages/lowcoder-design/src/components/Dropdown.tsx

@@ -159,16 +159,6 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
   const { placement = "right" } = props;
   const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
 
-  useEffect(() => {
-    const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
-    for (let index = 0; index < dropdownElems.length; index++) {
-      const element = dropdownElems[index];
-      element.style.maxHeight = "300px";
-      element.style.overflowY = "scroll";
-      element.style.minWidth = "150px";
-      element.style.paddingRight = "10px";
-    }
-  }, []);
 
   return (
     <FlexDiv style={props.style} className={props.className}>