Feat: Display the video field in the parser operator #9869 (#10728)

### What problem does this PR solve?

Feat: Display the video field in the parser operator #9869

### Type of change


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

web/src/components/collapse.tsx

@@ -100,7 +100,7 @@ export function NodeCollapsible<T extends any[]>({
     >
       {nextItems.slice(0, 3).map(children)}
       <CollapsibleContent className={nextClassName}>
-        {nextItems.slice(3).map(children)}
+        {nextItems.slice(3).map((x, idx) => children(x, idx + 3))}
       </CollapsibleContent>
       {nextItems.length > 3 && (
         <CollapsibleTrigger

web/src/locales/en.ts

@@ -1633,6 +1633,7 @@ This delimiter is used to split the input text into several text pieces echo of
         word: 'Word',
         slides: 'PPT',
         audio: 'Audio',
+        video: 'Video',
       },
       fields: 'Field',
       addParser: 'Add Parser',

web/src/pages/agent/form/parser-form/index.tsx

@@ -35,14 +35,14 @@ import { EmailFormFields } from './email-form-fields';
 import { ImageFormFields } from './image-form-fields';
 import { PdfFormFields } from './pdf-form-fields';
 import { buildFieldNameWithPrefix } from './utils';
-import { VideoFormFields } from './video-form-fields';
+import { AudioFormFields, VideoFormFields } from './video-form-fields';
 
 const outputList = buildOutputList(initialParserValues.outputs);
 
 const FileFormatWidgetMap = {
   [FileType.PDF]: PdfFormFields,
   [FileType.Video]: VideoFormFields,
-  [FileType.Audio]: VideoFormFields,
+  [FileType.Audio]: AudioFormFields,
   [FileType.Email]: EmailFormFields,
   [FileType.Image]: ImageFormFields,
 };
@@ -162,13 +162,7 @@ const ParserForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
   const defaultValues = useFormValues(initialParserValues, node);
 
-  const FileFormatOptions = buildOptions(
+  const FileFormatOptions = buildOptions(FileType, t, 'flow.fileFormatOptions');
-    FileType,
-    t,
-    'flow.fileFormatOptions',
-  ).filter(
-    (x) => x.value !== FileType.Video, // Temporarily hide the video option
-  );
 
   const form = useForm<z.infer<typeof FormSchema>>({
     defaultValues,

web/src/pages/agent/form/parser-form/video-form-fields.tsx

@@ -5,7 +5,7 @@ import {
   OutputFormatFormFieldProps,
 } from './common-form-fields';
 
-export function VideoFormFields({ prefix }: OutputFormatFormFieldProps) {
+export function AudioFormFields({ prefix }: OutputFormatFormFieldProps) {
   const modelOptions = useComposeLlmOptionsByModelTypes([
     LlmModelType.Speech2text,
   ]);
@@ -20,3 +20,19 @@ export function VideoFormFields({ prefix }: OutputFormatFormFieldProps) {
     </>
   );
 }
+
+export function VideoFormFields({ prefix }: OutputFormatFormFieldProps) {
+  const modelOptions = useComposeLlmOptionsByModelTypes([
+    LlmModelType.Image2text,
+  ]);
+
+  return (
+    <>
+      {/* Multimodal Model */}
+      <LargeModelFormField
+        prefix={prefix}
+        options={modelOptions}
+      ></LargeModelFormField>
+    </>
+  );
+}

web/src/pages/dataflow-result/index.tsx

@@ -65,7 +65,7 @@ const Chunk = () => {
     navigateToDatasetOverview,
     navigateToDatasetList,
     navigateToAgents,
-    navigateToDataflow,
+    navigateToAgent,
   } = useNavigatePage();
   let fileUrl = useGetDocumentUrl(isAgent);
 
@@ -179,7 +179,7 @@ const Chunk = () => {
                     navigateToDatasetOverview(knowledgeId)();
                   }
                   if (agentId) {
-                    navigateToDataflow(agentId)();
+                    navigateToAgent(agentId)();
                   }
                 }}
               >