Skip to content

Commit

Permalink
Fix: More UI enhancement
Browse files Browse the repository at this point in the history 
Signed-off-by: Daishan Peng <[email protected]>
  • Loading branch information
@StrongMonkey
StrongMonkey committed Oct 31, 2024
1 parent cb702e2 commit 117c159
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 75 deletions.
80 changes: 62 additions & 18 deletions ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
}
);

Expand All @@ -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(
Expand All @@ -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,
}
);

Expand Down Expand Up @@ -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);
};

Expand All @@ -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]);

Check warning on line 257 in ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'notionSource?.state'. Either include it or remove the dependency array

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]);

Check warning on line 275 in ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'onedriveSource?.state'. Either include it or remove the dependency array

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]);

Check warning on line 293 in ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'websiteSource?.state'. Either include it or remove the dependency array

Expand Down
8 changes: 5 additions & 3 deletions ui/admin/app/components/knowledge/notion/NotionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const NotionModal: FC<NotionModalProps> = ({
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent
aria-describedby={undefined}
className="bd-secondary data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white dark:bg-secondary p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none"
className="max-h-[85vh] max-w-[85vw] bg-white dark:bg-secondary"
>
<DialogHeader>
<DialogTitle className="flex flex-row items-center text-xl font-semibold mb-4 justify-between">
Expand Down Expand Up @@ -168,7 +168,7 @@ export const NotionModal: FC<NotionModalProps> = ({
<RemoteFileItemChip
key={item.fileName}
file={item}
fileName={item.fileName}
fileName={item.fileName.split("/").pop()!}
subTitle={
knowledgeSource?.syncDetails?.notionState
?.pages?.[item.url!]?.folderPath
Expand Down Expand Up @@ -196,7 +196,9 @@ export const NotionModal: FC<NotionModalProps> = ({
</div>
</ScrollArea>
{files?.some(
(item) => item.state === KnowledgeFileState.Ingesting
(item) =>
item.state !== KnowledgeFileState.PendingApproval &&
item.state !== KnowledgeFileState.Unapproved
) && <IngestionStatusComponent files={files} />}
{!authUrl && (
<RemoteKnowledgeSourceStatus
Expand Down
77 changes: 60 additions & 17 deletions ui/admin/app/components/knowledge/onedrive/OneDriveModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
const [isAddLinkModalOpen, setIsAddLinkModalOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [links, setLinks] = useState<string[]>([]);
const [showTable, setShowTable] = useState<{ [key: number]: boolean }>({});
const [hideTable, setHideTable] = useState<{ [key: number]: boolean }>({});
const [authUrl, setAuthUrl] = useState<string>("");
useEffect(() => {
if (!knowledgeSource) return;
Expand Down Expand Up @@ -139,7 +139,7 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent
aria-describedby={undefined}
className="bd-secondary data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white dark:bg-secondary p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none"
className="max-h-[85vh] max-w-[85vw] bg-white dark:bg-secondary"
>
<DialogTitle className="flex flex-row items-center text-xl font-semibold mb-4 justify-between">
<div className="flex flex-row items-center">
Expand Down Expand Up @@ -199,6 +199,7 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
}
className="mr-2"
tabIndex={-1}
disabled={!knowledgeSource}
>
<SettingsIcon className="w-4 h-4" />
</Button>
Expand All @@ -225,8 +226,8 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
</span>
</div>
) : (
<ScrollArea className="max-h-[45vh] overflow-x-auto">
<div className="max-h-[400px] overflow-x-auto">
<div className="flex flex-col gap-2 overflow-x-auto">
<div className="overflow-x-auto">
{links.map((link, index) => (
<div key={index}>
<Button
Expand All @@ -235,16 +236,16 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
className="flex flex-row w-full items-center justify-between overflow-x-auto pr-4 h-12 cursor-pointer"
onClick={() => {
if (
showTable[index] ===
hideTable[index] ===
undefined ||
showTable[index] === false
hideTable[index] === false
) {
setShowTable((prev) => ({
setHideTable((prev) => ({
...prev,
[index]: true,
}));
} else {
setShowTable((prev) => ({
setHideTable((prev) => ({
...prev,
[index]: false,
}));
Expand Down Expand Up @@ -297,6 +298,44 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
</span>
)}
</span>
{knowledgeSource?.syncDetails
?.onedriveState?.links?.[link]
?.isFolder && (
<span className="mr-2 dark:text-white">
{
files.filter((item) => {
const { rootFolder } =
getFolderAndName(
item.fileName
);
return (
rootFolder ===
knowledgeSource
?.syncDetails
?.onedriveState
?.links?.[link]
?.name
);
}).length
}{" "}
{files.filter((item) => {
const { rootFolder } =
getFolderAndName(
item.fileName
);
return (
rootFolder ===
knowledgeSource
?.syncDetails
?.onedriveState
?.links?.[link]
?.name
);
}).length === 1
? "file"
: "files"}
</span>
)}
<Button
variant="ghost"
onClick={(e) => {
Expand All @@ -306,17 +345,19 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
>
<Trash className="h-4 w-4" />
</Button>

{knowledgeSource?.syncDetails
?.onedriveState?.links?.[link]
?.isFolder &&
(showTable[index] ? (
<ChevronUp className="h-4 w-4" />
) : (
(hideTable[index] ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronUp className="h-4 w-4" />
))}
</Button>
{showTable[index] && (
<ScrollArea className="max-h-[200px] overflow-x-auto mb-2">
{(hideTable[index] === false ||
hideTable[index] === undefined) && (
<ScrollArea className="max-h-[30vh] overflow-x-auto mb-2">
<div className="flex flex-col gap-2">
{files
.filter((item) => {
Expand Down Expand Up @@ -437,12 +478,14 @@ export const OnedriveModal: FC<OnedriveModalProps> = ({
))}
</div>
</div>
</ScrollArea>
</div>
)}

{files?.some((item) => item.approved) && (
<IngestionStatusComponent files={files} />
)}
{files?.some(
(item) =>
item.state !== KnowledgeFileState.PendingApproval &&
item.state !== KnowledgeFileState.Unapproved
) && <IngestionStatusComponent files={files} />}
{!authUrl && (
<RemoteKnowledgeSourceStatus
source={knowledgeSource}
Expand Down
Loading

0 comments on commit 117c159

Please sign in to comment.