jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Add create knowledge button (#9520)

Browse source 
* refactor: Simplify KnowledgeBaseEmptyState component and integrate handleCreateKnowledge function into KnowledgeBasesTab

- Refactored KnowledgeBaseEmptyState to accept handleCreateKnowledge as a prop, removing internal logic for flow creation.
- Updated KnowledgeBasesTab to implement handleCreateKnowledge, enhancing the flow creation process and improving component interaction.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Deon Sanchez 2025-08-25 13:09:47 -06:00 • committed by GitHub
commit 24ec2bd299
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/frontend/src/pages/MainPage/pages/filesPage/components/KnowledgeBaseEmptyState.tsx
View file

@ -1,38 +1,11 @@
import { useParams } from "react-router-dom";
import ForwardedIconComponent from "@/components/common/genericIconComponent";
import { Button } from "@/components/ui/button";
import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
import { track } from "@/customization/utils/analytics";
import useAddFlow from "@/hooks/flows/use-add-flow";
import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { useFolderStore } from "@/stores/foldersStore";
import { updateIds } from "@/utils/reactflowUtils";
const KnowledgeBaseEmptyState = () => {
const examples = useFlowsManagerStore((state) => state.examples);
const addFlow = useAddFlow();
const navigate = useCustomNavigate();
const { folderId } = useParams();
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const folderIdUrl = folderId ?? myCollectionId;
const handleCreateKnowledge = async () => {
const knowledgeBasesExample = examples.find(
(example) => example.name === "Knowledge Ingestion",
);
if (knowledgeBasesExample && knowledgeBasesExample.data) {
updateIds(knowledgeBasesExample.data);
addFlow({ flow: knowledgeBasesExample }).then((id) => {
navigate(`/flow/${id}/folder/${folderIdUrl}`);
});
track("New Flow Created", {
template: `${knowledgeBasesExample.name} Template`,
});
}
};
const KnowledgeBaseEmptyState = ({
handleCreateKnowledge,
}: {
handleCreateKnowledge: () => void;
}) => {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-8 pb-8">
<div className="flex flex-col items-center gap-2">

42
src/frontend/src/pages/MainPage/pages/filesPage/components/KnowledgeBasesTab.tsx
View file

@ -5,7 +5,10 @@ import type {
} from "ag-grid-community";
import type { AgGridReact } from "ag-grid-react";
import { useRef, useState } from "react";
import { useParams } from "react-router-dom";
import ForwardedIconComponent from "@/components/common/genericIconComponent";
import TableComponent from "@/components/core/parameterRenderComponent/components/tableComponent";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Loading from "@/components/ui/loading";
import { useDeleteKnowledgeBase } from "@/controllers/API/queries/knowledge-bases/use-delete-knowledge-base";
@ -13,8 +16,14 @@ import {
type KnowledgeBaseInfo,
useGetKnowledgeBases,
} from "@/controllers/API/queries/knowledge-bases/use-get-knowledge-bases";
import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
import { track } from "@/customization/utils/analytics";
import useAddFlow from "@/hooks/flows/use-add-flow";
import DeleteConfirmationModal from "@/modals/deleteConfirmationModal";
import useAlertStore from "@/stores/alertStore";
import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { useFolderStore } from "@/stores/foldersStore";
import { updateIds } from "@/utils/reactflowUtils";
import { cn } from "@/utils/utils";
import { createKnowledgeBaseColumns } from "../config/knowledgeBaseColumns";
import KnowledgeBaseEmptyState from "./KnowledgeBaseEmptyState";
@ -47,6 +56,13 @@ const KnowledgeBasesTab = ({
setSuccessData: state.setSuccessData,
}));
const examples = useFlowsManagerStore((state) => state.examples);
const addFlow = useAddFlow();
const navigate = useCustomNavigate();
const { folderId } = useParams();
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const folderIdUrl = folderId ?? myCollectionId;
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [knowledgeBaseToDelete, setKnowledgeBaseToDelete] =
useState<KnowledgeBaseInfo | null>(null);
@ -119,6 +135,22 @@ const KnowledgeBasesTab = ({
}
};
const handleCreateKnowledge = async () => {
const knowledgeBasesExample = examples.find(
(example) => example.name === "Knowledge Ingestion",
);
if (knowledgeBasesExample && knowledgeBasesExample.data) {
updateIds(knowledgeBasesExample.data);
addFlow({ flow: knowledgeBasesExample }).then((id) => {
navigate(`/flow/${id}/folder/${folderIdUrl}`);
});
track("New Flow Created", {
template: `${knowledgeBasesExample.name} Template`,
});
}
};
const clearSelection = () => {
setQuantitySelected(0);
setSelectedFiles([]);
@ -142,7 +174,9 @@ const KnowledgeBasesTab = ({
}
if (knowledgeBases.length === 0) {
return <KnowledgeBaseEmptyState />;
return (
<KnowledgeBaseEmptyState handleCreateKnowledge={handleCreateKnowledge} />
);
}
return (
@ -159,6 +193,12 @@ const KnowledgeBasesTab = ({
onChange={(event) => setQuickFilterText(event.target.value)}
/>
</div>
<Button
className="flex items-center gap-2 font-semibold"
onClick={handleCreateKnowledge}
>
<ForwardedIconComponent name="Plus" /> Create knowledge
</Button>
</div>
<div className="flex h-full flex-col pt-4">