Feat: Add the option to use the knowledge graph to the retrieval form #3221 (#8968)

### What problem does this PR solve?

Feat: Add the option to use the knowledge graph to the retrieval form
#3221
### Type of change


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

web/src/components/cross-language-form-field.tsx

@@ -0,0 +1,67 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { MultiSelect } from '@/components/ui/multi-select';
+import { cn } from '@/lib/utils';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const Languages = [
+  'English',
+  'Chinese',
+  'Spanish',
+  'French',
+  'German',
+  'Japanese',
+  'Korean',
+  'Vietnamese',
+];
+
+const options = Languages.map((x) => ({ label: x, value: x }));
+
+type CrossLanguageItemProps = {
+  name?: string;
+  vertical?: boolean;
+};
+
+export const CrossLanguageFormField = ({
+  name = 'prompt_config.cross_languages',
+  vertical = true,
+}: CrossLanguageItemProps) => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem
+          className={cn('flex', {
+            'gap-2': vertical,
+            'flex-col': vertical,
+            'justify-between': !vertical,
+            'items-center': !vertical,
+          })}
+        >
+          <FormLabel tooltip={t('chat.crossLanguageTip')}>
+            {t('chat.crossLanguage')}
+          </FormLabel>
+          <FormControl>
+            <MultiSelect
+              options={options}
+              placeholder={t('fileManager.pleaseSelect')}
+              maxCount={100}
+              {...field}
+              onValueChange={field.onChange}
+              modalPopover
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+};

web/src/components/cross-language-item-ui.tsx

@@ -1,49 +0,0 @@
-import { FormLabel } from '@/components/ui/form';
-import { MultiSelect } from '@/components/ui/multi-select';
-import { useTranslation } from 'react-i18next';
-
-const Languages = [
-  'English',
-  'Chinese',
-  'Spanish',
-  'French',
-  'German',
-  'Japanese',
-  'Korean',
-  'Vietnamese',
-];
-
-const options = Languages.map((x) => ({ label: x, value: x }));
-
-type CrossLanguageItemProps = {
-  name?: string | Array<string>;
-  onChange: (arg: string[]) => void;
-};
-
-export const CrossLanguageItem = ({
-  name = ['prompt_config', 'cross_languages'],
-  onChange = () => {},
-}: CrossLanguageItemProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <div className="pb-2">
-        <FormLabel tooltip={t('chat.crossLanguageTip')}>
-          {t('chat.crossLanguage')}
-        </FormLabel>
-      </div>
-      <MultiSelect
-        options={options}
-        onValueChange={(val) => {
-          onChange(val);
-        }}
-        //   defaultValue={field.value}
-        placeholder={t('fileManager.pleaseSelect')}
-        maxCount={100}
-        //   {...field}
-        modalPopover
-      />
-    </div>
-  );
-};