Skip to content

Commit

Permalink
fix api list files
Browse files Browse the repository at this point in the history
  • Loading branch information
@thewbuk
thewbuk committed Jul 29, 2024
1 parent 479759f commit 064b7a5
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 46 deletions.
2 changes: 1 addition & 1 deletion packages/toolkit/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@instill-ai/toolkit",
"version": "0.97.0-rc.8",
"version": "0.97.0-rc.11",
"description": "Instill AI's frontend toolkit",
"repository": "https://github.com/instill-ai/design-system.git",
"bugs": "https://github.com/instill-ai/design-system/issues",
Expand Down
62 changes: 31 additions & 31 deletions packages/toolkit/src/view/knowledge/components/CatalogFilesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({

return (
<div className="flex flex-col">
<div className="mb-5 flex items-center justify-between">
<div className="flex items-center justify-between mb-5">
<p className="text-semantic-fg-primary product-headings-heading-2">
{knowledgeBase.name}
</p>
Expand All @@ -259,7 +259,7 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
</div> */}
</div>
<Separator orientation="horizontal" className="mb-6" />
<div className="flex w-full flex-col gap-2">
<div className="flex flex-col w-full gap-2">
{/* <div className="flex justify-start">
<Button variant={"secondaryGrey"}>
<Icons.Plus className="w-4 h-4 stroke-semantic-fg-secondary" />
Expand All @@ -268,13 +268,13 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
</div>
</Button>
</div> */}
<div className="flex rounded border border-semantic-bg-line bg-semantic-bg-primary">
<div className="flex w-full flex-col">
<div className="flex border rounded border-semantic-bg-line bg-semantic-bg-primary">
<div className="flex flex-col w-full">
{isLoading ? (
<div className="p-8">
<Skeleton className="h-8 w-full mb-4" />
<Skeleton className="h-8 w-full mb-4" />
<Skeleton className="h-8 w-full" />
<Skeleton className="w-full h-8 mb-4" />
<Skeleton className="w-full h-8 mb-4" />
<Skeleton className="w-full h-8" />
</div>
) : files && files.length > 0 ? (
<>
Expand All @@ -290,12 +290,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "name" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -310,12 +310,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "type" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -330,12 +330,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "processStatus" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -350,12 +350,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "size" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -370,12 +370,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "totalChunks" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -390,12 +390,12 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
>
{sortConfig.key === "createTime" ? (
sortConfig.direction === "ascending" ? (
<Icons.ChevronUp className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronUp className="w-4 h-4 stroke-semantic-fg-secondary" />
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)
) : (
<Icons.ChevronDown className="h-4 w-4 stroke-semantic-fg-secondary" />
<Icons.ChevronDown className="w-4 h-4 stroke-semantic-fg-secondary" />
)}
</Button>
</div>
Expand All @@ -414,7 +414,7 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
}`}
>
<div
className="flex items-center justify-center pl-4 text-semantic-bg-secondary-alt-primary product-body-text-3-regula underline underline-offset-1 cursor-pointer truncate"
className="flex items-center justify-center pl-4 underline truncate cursor-pointer text-semantic-bg-secondary-alt-primary product-body-text-3-regula underline-offset-1"
onClick={() => handleFileClick(item)}
>
{item.name}
Expand All @@ -435,7 +435,7 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
) as FileStatus,
).variant
}
className="group relative"
className="relative group"
>
<div className="flex items-center gap-2">
<div
Expand Down Expand Up @@ -473,9 +473,9 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({
</>
) : (
<div className="flex flex-col items-center justify-center p-8 text-center">
<Icons.Gear01 className="h-16 w-16 stroke-semantic-warning-default mb-4" />
<p className="text-lg font-semibold mb-2">No files found</p>
<p className="text-semantic-fg-secondary mb-4">
<Icons.Gear01 className="w-16 h-16 mb-4 stroke-semantic-warning-default" />
<p className="mb-2 text-lg font-semibold">No files found</p>
<p className="mb-4 text-semantic-fg-secondary">
Oops... Please upload your files and click the &apos;Process Files&apos;
button before returning to this Catalog page to check the
progress and results.
Expand Down Expand Up @@ -533,4 +533,4 @@ const formatDate = (dateString: string): string => {
return date.toLocaleString();
};

export default CatalogFilesTab;
export default CatalogFilesTab;
37 changes: 23 additions & 14 deletions packages/toolkit/src/view/knowledge/components/ChunkTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { Icons, Separator, Skeleton } from "@instill-ai/design-system";
import { InstillStore, useInstillStore, useShallow } from "../../../lib";
import { InstillStore, useAuthenticatedUser, useInstillStore, useShallow } from "../../../lib";
import {
useListKnowledgeBaseFiles,
useUpdateChunk,
Expand All @@ -24,17 +24,26 @@ export const ChunkTab: React.FC<ChunkTabProps> = ({ knowledgeBase }) => {
const [selectedFile, setSelectedFile] = React.useState<Nullable<KnowledgeFile>>(null);
const [isFileDetailsOpen, setIsFileDetailsOpen] = React.useState(false);

const { accessToken } = useInstillStore(
const { accessToken, enabledQuery } = useInstillStore(
useShallow((store: InstillStore) => ({
accessToken: store.accessToken,
}))
enabledQuery: store.enabledQuery,
})),
);

const { data: files, isLoading: isLoadingFiles } = useListKnowledgeBaseFiles({
ownerId: knowledgeBase.ownerName,
const me = useAuthenticatedUser({
enabled: enabledQuery,
accessToken,
});

const {
data: files,
isLoading: isLoadingFiles,
} = useListKnowledgeBaseFiles({
namespaceId: me.data?.id ?? null,
knowledgeBaseId: knowledgeBase.kbId,
accessToken,
enabled: true,
enabled: enabledQuery && Boolean(me.data?.id),
});

const updateChunkMutation = useUpdateChunk();
Expand Down Expand Up @@ -82,7 +91,7 @@ export const ChunkTab: React.FC<ChunkTabProps> = ({ knowledgeBase }) => {

return (
<div className="flex-col">
<div className="mb-5 flex items-center justify-between">
<div className="flex items-center justify-between mb-5">
<p className="text-semantic-fg-primary product-headings-heading-2">
{knowledgeBase.name}
</p>
Expand All @@ -96,16 +105,16 @@ export const ChunkTab: React.FC<ChunkTabProps> = ({ knowledgeBase }) => {
className="flex h-[175px] w-[360px] flex-col rounded-md border border-semantic-bg-line bg-semantic-bg-primary p-5 shadow"
>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-32 rounded bg-semantic-bg-line" />
<Skeleton className="h-6 w-6 rounded bg-semantic-bg-line" />
<Skeleton className="w-32 h-6 rounded bg-semantic-bg-line" />
<Skeleton className="w-6 h-6 rounded bg-semantic-bg-line" />
</div>
<Separator orientation="horizontal" className="my-[10px]" />
<div className="flex-1">
<Skeleton className="mb-2 h-4 w-full rounded bg-semantic-bg-line" />
<Skeleton className="h-4 w-2/3 rounded bg-semantic-bg-line" />
<Skeleton className="w-full h-4 mb-2 rounded bg-semantic-bg-line" />
<Skeleton className="w-2/3 h-4 rounded bg-semantic-bg-line" />
</div>
<div className="flex items-end justify-end">
<Skeleton className="h-8 w-8 rounded bg-semantic-bg-line" />
<Skeleton className="w-8 h-8 rounded bg-semantic-bg-line" />
</div>
</div>
))}
Expand All @@ -129,8 +138,8 @@ export const ChunkTab: React.FC<ChunkTabProps> = ({ knowledgeBase }) => {
</div>
) : (
<div className="flex flex-col items-center justify-center p-8 text-center">
<Icons.DownloadCloud01 className="h-16 w-16 stroke-semantic-warning-default mb-4" />
<p className="text-lg font-semibold mb-2">No files found</p>
<Icons.DownloadCloud01 className="w-16 h-16 mb-4 stroke-semantic-warning-default" />
<p className="mb-2 text-lg font-semibold">No files found</p>
<p>
Oops… It looks like you haven&apos;t uploaded any documents yet.
Please go to the Upload Documents page to upload and process your
Expand Down

0 comments on commit 064b7a5

Please sign in to comment.