Feat: Cross-language query #7376 #4503 #5710 #7470 (#7554)

### What problem does this PR solve?

Feat: Cross-language query #7376 #4503  #5710 #7470
### Type of change


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

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

@@ -0,0 +1,39 @@
+import { Select as AntSelect, Form } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+const Languages = [
+  'English',
+  'Chinese',
+  'Spanish',
+  'French',
+  'German',
+  'Japanese',
+  'Korean',
+];
+
+const options = Languages.map((x) => ({ label: x, value: x }));
+
+type CrossLanguageItemProps = {
+  name?: string | Array<string>;
+};
+
+export const CrossLanguageItem = ({
+  name = ['prompt_config', 'cross_languages'],
+}: CrossLanguageItemProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Form.Item
+      label={t('chat.crossLanguage')}
+      name={name}
+      tooltip={t('chat.crossLanguageTip')}
+    >
+      <AntSelect
+        options={options}
+        allowClear
+        placeholder={t('common.languagePlaceholder')}
+        mode="multiple"
+      />
+    </Form.Item>
+  );
+};