From 117c15949e868531ed3e25530e98ed2035f690db Mon Sep 17 00:00:00 2001 From: Daishan Peng Date: Thu, 31 Oct 2024 01:45:03 -0700 Subject: [PATCH] Fix: More UI enhancement Signed-off-by: Daishan Peng --- .../knowledge/AgentKnowledgePanel.tsx | 80 ++++++++++++---- .../knowledge/notion/NotionModal.tsx | 8 +- .../knowledge/onedrive/OneDriveModal.tsx | 77 +++++++++++---- .../knowledge/website/WebsiteModal.tsx | 95 +++++++++++-------- 4 files changed, 185 insertions(+), 75 deletions(-) diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx index dd360613d..c58ab4697 100644 --- a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx +++ b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx @@ -23,6 +23,12 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { const [blockPollingOneDrive, setBlockPollingOneDrive] = useState(false); const [blockPollingNotion, setBlockPollingNotion] = useState(false); const [blockPollingWebsite, setBlockPollingWebsite] = useState(false); + const [blockPollingOneDriveFiles, setBlockPollingOneDriveFiles] = + useState(false); + const [blockPollingNotionFiles, setBlockPollingNotionFiles] = + useState(false); + const [blockPollingWebsiteFiles, setBlockPollingWebsiteFiles] = + useState(false); const [isAddFileModalOpen, setIsAddFileModalOpen] = useState(false); const [isOnedriveModalOpen, setIsOnedriveModalOpen] = useState(false); const [isNotionModalOpen, setIsNotionModalOpen] = useState(false); @@ -91,10 +97,13 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { notionSource?.id ), ({ agentId, sourceId }) => - KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId), + KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId).then( + (files) => + files.sort((a, b) => a.fileName.localeCompare(b.fileName)) + ), { revalidateOnFocus: false, - refreshInterval: blockPollingNotion ? undefined : 1000, + refreshInterval: blockPollingNotionFiles ? undefined : 1000, } ); @@ -116,10 +125,13 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { onedriveSource?.id ), ({ agentId, sourceId }) => - KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId), + KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId).then( + (files) => + files.sort((a, b) => a.fileName.localeCompare(b.fileName)) + ), { revalidateOnFocus: false, - refreshInterval: blockPollingOneDrive ? undefined : 1000, + refreshInterval: blockPollingOneDriveFiles ? undefined : 1000, } ); const onedriveFiles = useMemo( @@ -140,10 +152,13 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { websiteSource?.id ), ({ agentId, sourceId }) => - KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId), + KnowledgeService.getFilesForKnowledgeSource(agentId, sourceId).then( + (files) => + files.sort((a, b) => a.fileName.localeCompare(b.fileName)) + ), { revalidateOnFocus: false, - refreshInterval: blockPollingWebsite ? undefined : 1000, + refreshInterval: blockPollingWebsiteFiles ? undefined : 1000, } ); @@ -188,18 +203,21 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { const startPollingNotion = () => { getNotionFiles.mutate(); getKnowledgeSources.mutate(); + setBlockPollingNotionFiles(false); setBlockPollingNotion(false); }; const startPollingOneDrive = () => { getOnedriveFiles.mutate(); getKnowledgeSources.mutate(); + setBlockPollingOneDriveFiles(false); setBlockPollingOneDrive(false); }; const startPollingWebsite = () => { getWebsiteFiles.mutate(); getKnowledgeSources.mutate(); + setBlockPollingWebsiteFiles(false); setBlockPollingWebsite(false); }; @@ -215,36 +233,62 @@ export default function AgentKnowledgePanel({ agentId }: { agentId: string }) { ) ) { setBlockPollingLocalFiles(true); + } else { + setBlockPollingLocalFiles(false); } }, [localFiles]); useEffect(() => { if ( - notionFiles.every( - (file) => file.state === KnowledgeFileState.Ingested - ) + notionFiles.length > 0 && + notionFiles + .filter( + (file) => + file.state !== KnowledgeFileState.PendingApproval && + file.state !== KnowledgeFileState.Unapproved + ) + .every((file) => file.state === KnowledgeFileState.Ingested) && + notionSource?.state !== KnowledgeSourceStatus.Syncing ) { - setBlockPollingNotion(true); + setBlockPollingNotionFiles(true); + } else { + setBlockPollingNotionFiles(false); } }, [notionFiles]); useEffect(() => { if ( - onedriveFiles.every( - (file) => file.state === KnowledgeFileState.Ingested - ) + onedriveFiles.length > 0 && + onedriveFiles + .filter( + (file) => + file.state !== KnowledgeFileState.PendingApproval && + file.state !== KnowledgeFileState.Unapproved + ) + .every((file) => file.state === KnowledgeFileState.Ingested) && + onedriveSource?.state !== KnowledgeSourceStatus.Syncing ) { - setBlockPollingOneDrive(true); + setBlockPollingOneDriveFiles(true); + } else { + setBlockPollingOneDriveFiles(false); } }, [onedriveFiles]); useEffect(() => { if ( - websiteFiles.every( - (file) => file.state === KnowledgeFileState.Ingested - ) + websiteFiles.length > 0 && + websiteFiles + .filter( + (file) => + file.state !== KnowledgeFileState.PendingApproval && + file.state !== KnowledgeFileState.Unapproved + ) + .every((file) => file.state === KnowledgeFileState.Ingested) && + websiteSource?.state !== KnowledgeSourceStatus.Syncing ) { - setBlockPollingWebsite(true); + setBlockPollingWebsiteFiles(true); + } else { + setBlockPollingWebsiteFiles(false); } }, [websiteFiles]); diff --git a/ui/admin/app/components/knowledge/notion/NotionModal.tsx b/ui/admin/app/components/knowledge/notion/NotionModal.tsx index f82882707..06d3ab189 100644 --- a/ui/admin/app/components/knowledge/notion/NotionModal.tsx +++ b/ui/admin/app/components/knowledge/notion/NotionModal.tsx @@ -90,7 +90,7 @@ export const NotionModal: FC = ({ @@ -168,7 +168,7 @@ export const NotionModal: FC = ({ = ({ {files?.some( - (item) => item.state === KnowledgeFileState.Ingesting + (item) => + item.state !== KnowledgeFileState.PendingApproval && + item.state !== KnowledgeFileState.Unapproved ) && } {!authUrl && ( = ({ const [isAddLinkModalOpen, setIsAddLinkModalOpen] = useState(false); const [loading, setLoading] = useState(false); const [links, setLinks] = useState([]); - const [showTable, setShowTable] = useState<{ [key: number]: boolean }>({}); + const [hideTable, setHideTable] = useState<{ [key: number]: boolean }>({}); const [authUrl, setAuthUrl] = useState(""); useEffect(() => { if (!knowledgeSource) return; @@ -139,7 +139,7 @@ export const OnedriveModal: FC = ({
@@ -199,6 +199,7 @@ export const OnedriveModal: FC = ({ } className="mr-2" tabIndex={-1} + disabled={!knowledgeSource} > @@ -225,8 +226,8 @@ export const OnedriveModal: FC = ({
) : ( - -
+
+
{links.map((link, index) => (
+ {knowledgeSource?.syncDetails ?.onedriveState?.links?.[link] ?.isFolder && - (showTable[index] ? ( - - ) : ( + (hideTable[index] ? ( + ) : ( + ))} - {showTable[index] && ( - + {(hideTable[index] === false || + hideTable[index] === undefined) && ( +
{files .filter((item) => { @@ -437,12 +478,14 @@ export const OnedriveModal: FC = ({ ))}
- +
)} - {files?.some((item) => item.approved) && ( - - )} + {files?.some( + (item) => + item.state !== KnowledgeFileState.PendingApproval && + item.state !== KnowledgeFileState.Unapproved + ) && } {!authUrl && ( = ({ const [isAddWebsiteModalOpen, setIsAddWebsiteModalOpen] = useState(false); const [loading, setLoading] = useState(false); const [websites, setWebsites] = useState([]); - const [showTable, setShowTable] = useState<{ [key: number]: boolean }>({}); + const [hideTable, setHideTable] = useState<{ [key: number]: boolean }>({}); useEffect(() => { setWebsites(knowledgeSource?.websiteCrawlingConfig?.urls ?? []); @@ -107,16 +106,16 @@ export const WebsiteModal: FC = ({ - -
+ +
- Website + Website
-
+
@@ -164,6 +163,7 @@ export const WebsiteModal: FC = ({ } className="mr-2" tabIndex={-1} + disabled={!knowledgeSource} > @@ -173,27 +173,27 @@ export const WebsiteModal: FC = ({
-
+
{websites.map((website, index) => ( - - {/* eslint-disable-next-line */} -
{ if ( - showTable[index] === undefined || - showTable[index] === false + hideTable[index] === undefined || + hideTable[index] === false ) { - setShowTable((prev) => ({ + setHideTable((prev) => ({ ...prev, [index]: true, })); } else { - setShowTable((prev) => ({ + setHideTable((prev) => ({ ...prev, [index]: false, })); @@ -213,20 +213,41 @@ export const WebsiteModal: FC = ({
+ + { + files.filter( + (item) => + knowledgeSource?.syncDetails + ?.websiteCrawlingState + ?.pages?.[item.url!] + ?.parentURL === website + ).length + }{" "} + {files.filter( + (item) => + knowledgeSource?.syncDetails + ?.websiteCrawlingState?.pages?.[ + item.url! + ]?.parentURL === website + ).length === 1 + ? "file" + : "files"} + - {showTable[index] ? ( - - ) : ( + {hideTable[index] ? ( + ) : ( + )} -
- {showTable[index] && ( -
+ + {(hideTable[index] === false || + hideTable[index] === undefined) && ( +
{files .filter((item) => { return ( @@ -270,7 +291,7 @@ export const WebsiteModal: FC = ({ ))}
)} - +
))}
@@ -281,6 +302,19 @@ export const WebsiteModal: FC = ({ source={knowledgeSource} sourceType={RemoteKnowledgeSourceType.Website} /> + +
- -
);