feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

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

web/src/pages/dataflow-result/components/chunk-result-bar/checkbox-sets.tsx

@@ -0,0 +1,85 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Ban, CircleCheck, Trash2 } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type ICheckboxSetProps = {
+  selectAllChunk: (e: any) => void;
+  removeChunk: (e?: any) => void;
+  switchChunk: (available: number) => void;
+  checked: boolean;
+  selectedChunkIds: string[];
+};
+export default (props: ICheckboxSetProps) => {
+  const {
+    selectAllChunk,
+    removeChunk,
+    switchChunk,
+    checked,
+    selectedChunkIds,
+  } = props;
+  const { t } = useTranslation();
+  const handleSelectAllCheck = useCallback(
+    (e: any) => {
+      console.log('eee=', e);
+      selectAllChunk(e);
+    },
+    [selectAllChunk],
+  );
+
+  const handleDeleteClick = useCallback(() => {
+    removeChunk();
+  }, [removeChunk]);
+
+  const handleEnabledClick = useCallback(() => {
+    switchChunk(1);
+  }, [switchChunk]);
+
+  const handleDisabledClick = useCallback(() => {
+    switchChunk(0);
+  }, [switchChunk]);
+
+  const isSelected = useMemo(() => {
+    return selectedChunkIds?.length > 0;
+  }, [selectedChunkIds]);
+
+  return (
+    <div className="flex gap-[40px] py-4 px-2">
+      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-text-primary">
+        <Checkbox
+          id="all_chunks_checkbox"
+          onCheckedChange={handleSelectAllCheck}
+          checked={checked}
+          className=" data-[state=checked]:bg-text-primary data-[state=checked]:border-text-primary data-[state=checked]:text-bg-base  border-muted-foreground text-muted-foreground hover:text-bg-base hover:border-text-primary "
+        />
+        <Label htmlFor="all_chunks_checkbox">{t('chunk.selectAll')}</Label>
+      </div>
+      {isSelected && (
+        <>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleEnabledClick}
+          >
+            <CircleCheck size={16} />
+            <span className="block ml-1">{t('chunk.enable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleDisabledClick}
+          >
+            <Ban size={16} />
+            <span className="block ml-1">{t('chunk.disable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-red-400 hover:text-red-500"
+            onClick={handleDeleteClick}
+          >
+            <Trash2 size={16} />
+            <span className="block ml-1">{t('chunk.delete')}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};