Feat: Display the document configuration dialog with shadcn #3221 (#7302)

### What problem does this PR solve?

Feat: Display the document configuration dialog with shadcn #3221

### Type of change


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

web/src/components/excel-to-html-form-field.tsx

@@ -0,0 +1,34 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import { Switch } from './ui/switch';
+
+export function ExcelToHtmlFormField() {
+  const form = useFormContext();
+  const { t } = useTranslate('knowledgeDetails');
+
+  return (
+    <FormField
+      control={form.control}
+      name="parser_config.html4excel"
+      render={({ field }) => (
+        <FormItem defaultChecked={false}>
+          <FormLabel tooltip={t('html4excelTip')}>{t('html4excel')}</FormLabel>
+          <FormControl>
+            <Switch
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            ></Switch>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}