Fix: Data-source S3 page style (#12255)

### What problem does this PR solve?

Fix: Data-source S3 page style

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/dynamic-form.tsx

@@ -35,8 +35,15 @@ import { cn } from '@/lib/utils';
 import { t } from 'i18next';
 import { Loader } from 'lucide-react';
 import { MultiSelect, MultiSelectOptionType } from './ui/multi-select';
+import { Segmented } from './ui/segmented';
 import { Switch } from './ui/switch';
 
+const getNestedValue = (obj: any, path: string) => {
+  return path.split('.').reduce((current, key) => {
+    return current && current[key] !== undefined ? current[key] : undefined;
+  }, obj);
+};
+
 // Field type enumeration
 export enum FormFieldType {
   Text = 'text',
@@ -49,6 +56,7 @@ export enum FormFieldType {
   Checkbox = 'checkbox',
   Switch = 'switch',
   Tag = 'tag',
+  Segmented = 'segmented',
   Custom = 'custom',
 }
 
@@ -138,6 +146,9 @@ export const generateSchema = (fields: FormFieldConfig[]): ZodSchema<any> => {
             });
           }
           break;
+        case FormFieldType.Segmented:
+          fieldSchema = z.string();
+          break;
         case FormFieldType.Number:
           fieldSchema = z.coerce.number();
           if (field.validation?.min !== undefined) {
@@ -359,6 +370,34 @@ export const RenderField = ({
     );
   }
   switch (field.type) {
+    case FormFieldType.Segmented:
+      return (
+        <RAGFlowFormItem
+          {...field}
+          labelClassName={labelClassName || field.labelClassName}
+        >
+          {(fieldProps) => {
+            const finalFieldProps = field.onChange
+              ? {
+                  ...fieldProps,
+                  onChange: (value: any) => {
+                    fieldProps.onChange(value);
+                    field.onChange?.(value);
+                  },
+                }
+              : fieldProps;
+            return (
+              <Segmented
+                {...finalFieldProps}
+                options={field.options || []}
+                className="w-full"
+                itemClassName="flex-1 justify-center"
+                disabled={field.disabled}
+              />
+            );
+          }}
+        </RAGFlowFormItem>
+      );
     case FormFieldType.Textarea:
       return (
         <RAGFlowFormItem
@@ -634,17 +673,31 @@ const DynamicForm = {
       // Initialize form
       const form = useForm<T>({
         resolver: async (data, context, options) => {
-          const zodResult = await zodResolver(schema)(data, context, options);
+          // Filter out fields that should not render
+          const activeFields = fields.filter(
+            (field) => !field.shouldRender || field.shouldRender(data),
+          );
+
+          const activeSchema = generateSchema(activeFields);
+          const zodResult = await zodResolver(activeSchema)(
+            data,
+            context,
+            options,
+          );
 
           let combinedErrors = { ...zodResult.errors };
 
           const fieldErrors: Record<string, { type: string; message: string }> =
             {};
           for (const field of fields) {
-            if (field.customValidate && data[field.name] !== undefined) {
+            if (
+              field.customValidate &&
+              getNestedValue(data, field.name) !== undefined &&
+              (!field.shouldRender || field.shouldRender(data))
+            ) {
               try {
                 const result = await field.customValidate(
-                  data[field.name],
+                  getNestedValue(data, field.name),
                   data,
                 );
                 if (typeof result === 'string') {

web/src/components/ui/segmented.tsx

@@ -71,6 +71,9 @@ export function Segmented({
   const [selectedValue, setSelectedValue] = React.useState<
     SegmentedValue | undefined
   >(value);
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
   const handleOnChange = (e: SegmentedValue) => {
     if (onChange) {
       onChange(e);