Refactor: Datasets UI #3221 (#8349)

### What problem does this PR solve?

Refactor Datasets UI #3221.
### Type of change

- [X] New Feature (non-breaking change which adds functionality)

web/src/components/delimiter-form-field.tsx

@@ -43,17 +43,33 @@ export function DelimiterFormField() {
     <FormField
       control={form.control}
       name={'parser_config.delimiter'}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('knowledgeDetails.delimiterTip')}>
-            {t('knowledgeDetails.delimiter')}
-          </FormLabel>
-          <FormControl>
-            <DelimiterInput {...field}></DelimiterInput>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
+      render={({ field }) => {
+        if (typeof field.value === 'undefined') {
+          // default value set
+          form.setValue('parser_config.delimiter', '\n');
+        }
+        return (
+          <FormItem className=" items-center space-y-0 ">
+            <div className="flex items-center">
+              <FormLabel
+                tooltip={t('knowledgeDetails.delimiterTip')}
+                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              >
+                {t('knowledgeDetails.delimiter')}
+              </FormLabel>
+              <div className="w-3/4">
+                <FormControl>
+                  <DelimiterInput {...field}></DelimiterInput>
+                </FormControl>
+              </div>
+            </div>
+            <div className="flex pt-1">
+              <div className="w-1/4"></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        );
+      }}
     />
   );
 }