Merge branch 'feat/add-schedule' into develop

apps/agent/src/Layout/Form/LayoutBlock/index.tsx

@@ -26,6 +26,7 @@ export const LayoutBlock: FC<ILayoutBlock> = (props) => {
     scrollId,
     isMobile = false,
     errorMessage,
+    customRenderSubtitle,
   } = props
 
   return (
@@ -40,14 +41,19 @@ export const LayoutBlock: FC<ILayoutBlock> = (props) => {
             )}
             {required && <RequireIcon />}
           </div>
-          {subtitle && (
-            <Tooltip title={subtitleTips} trigger="hover">
-              <div css={applyBlockSubtitleStyle(subtitleTips !== undefined)}>
-                {subtitle}
-              </div>
-            </Tooltip>
-          )}
+          {customRenderSubtitle
+            ? customRenderSubtitle
+            : subtitle && (
+                <Tooltip title={subtitleTips} trigger="hover">
+                  <div
+                    css={applyBlockSubtitleStyle(subtitleTips !== undefined)}
+                  >
+                    {subtitle}
+                  </div>
+                </Tooltip>
+              )}
         </div>
+
         {description && <div css={descriptionStyle}>{description}</div>}
       </div>
       <div css={childrenAndErrorMessageContainerStyle}>

apps/agent/src/Layout/Form/LayoutBlock/interface.ts

@@ -11,4 +11,5 @@ export interface ILayoutBlock {
   scrollId?: string
   isMobile?: boolean
   errorMessage?: string
+  customRenderSubtitle?: ReactNode
 }

apps/agent/src/components/BlackSwitch/index.tsx

@@ -1,13 +1,17 @@
 import { ConfigProvider, Switch, SwitchProps, ThemeConfig } from "antd"
-import { FC } from "react"
+import { forwardRef } from "react"
 import BlackButtonTheme from "@/config/them/theme-blackButton.json"
 
-const BlackSwitch: FC<SwitchProps> = (antdSwitchProps) => {
-  return (
-    <ConfigProvider theme={BlackButtonTheme as ThemeConfig}>
-      <Switch {...antdSwitchProps} />
-    </ConfigProvider>
-  )
-}
+const BlackSwitch = forwardRef<HTMLButtonElement, SwitchProps>(
+  (antdSwitchProps, ref) => {
+    return (
+      <ConfigProvider theme={BlackButtonTheme as ThemeConfig}>
+        <Switch {...antdSwitchProps} ref={ref} />
+      </ConfigProvider>
+    )
+  },
+)
+
+BlackSwitch.displayName = "BlackSwitch"
 
 export default BlackSwitch

apps/agent/src/page/WorkSpace/AI/AIAgent/components/ScheduleEditor/components/RowContainer/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import { IRowContainerProps } from "./interface"
+import { RowContainerStyle, labelStyle } from "./style"
+
+const RowContainer: FC<IRowContainerProps> = (props) => {
+  const { labelName, children, enabled } = props
+  return (
+    <div css={RowContainerStyle}>
+      {labelName && <span css={labelStyle(enabled)}>{labelName}</span>}
+      {children}
+    </div>
+  )
+}
+
+export default RowContainer

apps/agent/src/page/WorkSpace/AI/AIAgent/components/ScheduleEditor/components/RowContainer/interface.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react"
+
+export interface IRowContainerProps {
+  labelName?: string
+  children: ReactNode
+  enabled: boolean
+}

apps/agent/src/page/WorkSpace/AI/AIAgent/components/ScheduleEditor/components/RowContainer/style.ts

@@ -0,0 +1,28 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-public/color-scheme"
+import { applyMobileStyle } from "@illa-public/utils"
+
+const basLayoutContainerStyle = css`
+  display: flex;
+  padding: 8px 16px;
+  width: 100%;
+`
+
+export const RowContainerStyle = css`
+  ${basLayoutContainerStyle};
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+`
+
+export const labelStyle = (enabled: boolean) => css`
+  font-size: 14px;
+  color: ${enabled ? getColor("grayBlue", "02") : getColor("grayBlue", "04")};
+  line-height: 22px;
+  font-weight: 500;
+  white-space: nowrap;
+  width: 200px;
+  ${applyMobileStyle(css`
+    width: auto;
+  `)}
+`