Feat: Add description for tag parsing method #4368 (#4402)

### What problem does this PR solve?

Feat: Add description for tag parsing method #4368

### Type of change


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

web/src/pages/add-knowledge/components/knowledge-setting/tag-tabs.tsx

@@ -1,20 +1,40 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Segmented } from 'antd';
+import { SegmentedLabeledOption } from 'antd/es/segmented';
+import { upperFirst } from 'lodash';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { TagTable } from './tag-table';
 import { TagWordCloud } from './tag-word-cloud';
 
+enum TagType {
+  Cloud = 'cloud',
+  Table = 'table',
+}
+
+const TagContentMap = {
+  [TagType.Cloud]: <TagWordCloud></TagWordCloud>,
+  [TagType.Table]: <TagTable></TagTable>,
+};
+
 export function TagTabs() {
+  const [value, setValue] = useState<TagType>(TagType.Cloud);
+  const { t } = useTranslation();
+
+  const options: SegmentedLabeledOption[] = [TagType.Cloud, TagType.Table].map(
+    (x) => ({
+      label: t(`knowledgeConfiguration.tag${upperFirst(x)}`),
+      value: x,
+    }),
+  );
+
   return (
-    <Tabs defaultValue="account" className="mt-4">
-      <TabsList>
-        <TabsTrigger value="account">Word cloud</TabsTrigger>
-        <TabsTrigger value="password">Table</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <TagWordCloud></TagWordCloud>
-      </TabsContent>
-      <TabsContent value="password">
-        <TagTable></TagTable>
-      </TabsContent>
-    </Tabs>
+    <section className="mt-4">
+      <Segmented
+        value={value}
+        options={options}
+        onChange={(val) => setValue(val as TagType)}
+      />
+      {TagContentMap[value]}
+    </section>
   );
 }

web/src/pages/add-knowledge/components/knowledge-setting/utils.ts

@@ -16,4 +16,5 @@ export const ImageMap = {
   table: getImageName('table', 2),
   one: getImageName('one', 2),
   knowledge_graph: getImageName('knowledge-graph', 2),
+  tag: getImageName('tag', 2),
 };

web/src/pages/flow/form/generate-form/dynamic-parameters.tsx

@@ -1,9 +1,10 @@
 import { EditableCell, EditableRow } from '@/components/editable-cell';
 import { useTranslate } from '@/hooks/common-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Flex, Select, Table, TableProps } from 'antd';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IGenerateParameter, RAGFlowNodeType } from '../../interface';
+import { IGenerateParameter } from '../../interface';
 import { useHandleOperateParameters } from './hooks';
 
 import styles from './index.less';
@@ -46,7 +47,7 @@ const DynamicParameters = ({ node }: IProps) => {
       }),
     },
     {
-      title: t('componentId'),
+      title: t('value'),
       dataIndex: 'component_id',
       key: 'component_id',
       align: 'center',