restructure api calls

packages/toolkit/src/view/knowledge/KnowledgeBaseView.tsx

@@ -1,18 +1,20 @@
 import { GeneralAppPageProp } from "../../lib";
-import { Sidebar } from "./components/Sidebar";
-import { KnowledgeBaseTab } from "./components/KnowledgeBaseTab";
-import { UploadExploreTab } from "./components/UploadExploreTab";
-import { CatalogFilesTab } from "./components/CatalogFilesTab";
-import { MarkdownTab } from "./components/MarkdownTab";
+import { Sidebar } from "./components";
 import * as React from "react";
 import { KnowledgeBase } from "../../../../sdk/src/vdp/artifact/types";
 // import { Button, Icons, LinkButton } from "@instill-ai/design-system";
 import { DELETE_KNOWLEDGE_BASE_TIMEOUT, CREDIT_TIMEOUT } from "./components/undoDeleteTime";
-import { ChunkTab } from "./components/ChunkTab";
 import { ImageTab } from "./components/ImageTab";
 import { Nullable } from "@instill-ai/toolkit";
-import { RetrieveTestTab } from "./components/RetrieveTestTab";
-import CreditUsageNotification from "./components/Notifications/CreditUsageFileNotification";
+import {
+  KnowledgeBaseTab,
+  UploadExploreTab,
+  CatalogFilesTab,
+  MarkdownTab,
+  ChunkTab,
+  RetrieveTestTab
+} from "./tabs";
+import { CreditUsageNotification } from "./components/Notifications";
 
 export type KnowledgeBaseViewProps = GeneralAppPageProp;
 

packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { KnowledgeBase } from "../../../../../sdk/src/vdp/artifact/types";
 import { EditKnowledgeDialog } from "./EditKnowledgeDialog";
 import { DELETE_KNOWLEDGE_BASE_TIMEOUT } from "./undoDeleteTime";
-import DeleteKnowledgeBaseNotification from "./Notifications/DeleteKnowledgeBaseNotification";
+import { DeleteKnowledgeBaseNotification } from "./notifications";
 import { useListChunks } from "../../../lib/react-query-service/knowledge";
 import { useInstillStore, useShallow } from "../../../lib";
 import { InstillStore } from "../../../lib";

packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx

@@ -196,32 +196,6 @@ export const CreateKnowledgeDialog = ({
                 </Form.Item>
               )}
             />
-            {/* <Form.Field
-              control={form.control}
-              name="tags"
-              render={({ field }) => (
-                <Form.Item>
-                  <div className="flex items-center justify-between">
-                    <Form.Label className="text-semantic-fg-primary product-button-button-2">
-                      Tags
-                    </Form.Label>
-                    <p className="my-auto text-semantic-fg-secondary product-body-text-4-regular">
-                      Optional
-                    </p>
-                  </div>
-                  <Form.Control>
-                    <Input.Root>
-                      <Input.Core
-                        {...field}
-                        id={field.name}
-                        placeholder="Add tag"
-                      />
-                    </Input.Root>
-                  </Form.Control>
-                  <Form.Message />
-                </Form.Item>
-              )}
-            /> */}
             <div className="mt-8 flex justify-end gap-x-3">
               <Button variant="secondaryGrey" onClick={onClose}>
                 Cancel

packages/toolkit/src/view/knowledge/components/FileDetailsOverlay.tsx

@@ -30,6 +30,7 @@ const FileDetailsOverlay = ({
     highlightChunk = false,
     fileType
 }: FileDetailsOverlayProps) => {
+
     const { data: fileContent, isLoading: isLoadingContent } = useGetFileContent({
         fileUid,
         kbId,
@@ -46,7 +47,7 @@ const FileDetailsOverlay = ({
         fileUid,
     });
 
-    const highlightChunkInContent = (content: string, chunkUid?: string) => {  
+    const highlightChunkInContent = (content: string, chunkUid?: string) => {
         if (!highlightChunk || !chunkUid || !content) return content;
 
         const chunk = chunks?.find((c: { chunkUid: string; }) => c.chunkUid === chunkUid);

packages/toolkit/src/view/knowledge/components/Notifications/index.ts

@@ -0,0 +1,5 @@
+export * from './CreditUsageFileNotification';
+export * from './DeleteFileNotification';
+export * from './DeleteKnowledgeBaseNotification';
+export * from './IncorrectFormatFileNotification';
+export * from './FileSizeNotification';

packages/toolkit/src/view/knowledge/components/index.ts

@@ -0,0 +1,15 @@
+export * from './Sidebar';
+export * from '../tabs/KnowledgeBaseTab';
+export * from '../tabs/UploadExploreTab';
+export * from '../tabs/CatalogFilesTab';
+export * from '../tabs/MarkdownTab';
+export * from '../tabs/ChunkTab';
+export * from './ImageTab';
+export * from '../tabs/RetrieveTestTab';
+export * from './FileDetailsOverlay';
+export * from './KnowledgeBaseCard';
+export * from './CreateKnowledgeBaseCard';
+export * from './CreateKnowledgeDialog';
+export * from './KnowledgeSearchSort';
+export * from './ChunkCard';
+export * from './FileChunks';

packages/toolkit/src/view/knowledge/components/CatalogFilesTab.tsx → packages/toolkit/src/view/knowledge/tabs/CatalogFilesTab.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Button, Icons, Nullable, Separator, Skeleton, Tag } from "@instill-ai/design-system";
 import { KnowledgeBase, File } from "../../../../../sdk/src/vdp/artifact/types";
-import { DELETE_FILE_TIMEOUT } from "./undoDeleteTime";
-import DeleteFileNotification from "./Notifications/DeleteFileNotification";
+import { DELETE_FILE_TIMEOUT } from "../components/undoDeleteTime";
+import DeleteFileNotification from "../components/notifications";
 import { InstillStore, useInstillStore, useShallow } from "../../../lib";
 import { useListKnowledgeBaseFiles, useDeleteKnowledgeBaseFile } from "../../../lib/react-query-service/knowledge";
-import FileDetailsOverlay from "./FileDetailsOverlay";
+import FileDetailsOverlay from "../components/FileDetailsOverlay";
 
 type CatalogFilesTabProps = {
   knowledgeBase: KnowledgeBase;
@@ -60,6 +60,7 @@ export const CatalogFilesTab: React.FC<CatalogFilesTabProps> = ({ knowledgeBase
   const [isFileDetailsOpen, setIsFileDetailsOpen] = React.useState(false);
   const [selectedFile, setSelectedFile] = React.useState<Nullable<File>>(null);
 
+
   React.useEffect(() => {
     let interval: Nullable<NodeJS.Timeout> = null;
 

packages/toolkit/src/view/knowledge/components/ChunkTab.tsx → packages/toolkit/src/view/knowledge/tabs/ChunkTab.tsx

@@ -1,41 +1,40 @@
 import React from 'react';
 import { Chunk, KnowledgeBase, File } from "../../../../../sdk/src/vdp/artifact/types";
-import {  useListKnowledgeBaseFiles, useUpdateChunk } from '../../../lib/react-query-service/knowledge';
+import { useArtifactClient } from '../../../lib/react-query-service/knowledge';
 import { InstillStore, useInstillStore, useShallow } from "../../../lib";
-import FileDetailsOverlay from './FileDetailsOverlay';
+import FileDetailsOverlay from '../components/FileDetailsOverlay';
 import { Icons, Nullable, Separator, Skeleton } from '@instill-ai/design-system';
-import FileChunks from './FileChunks';
+import FileChunks from '../components/FileChunks';
 
 type ChunkTabProps = {
   knowledgeBase: KnowledgeBase;
 };
 
-export const ChunkTab = ({ knowledgeBase }: ChunkTabProps) => {
+const storeSelector = (store: InstillStore) => ({
+  accessToken: store.accessToken,
+});
+
+export const ChunkTab: React.FC<ChunkTabProps> = ({ knowledgeBase }) => {
   const [expandedFiles, setExpandedFiles] = React.useState<string[]>([]);
   const [selectedChunk, setSelectedChunk] = React.useState<Nullable<Chunk>>(null);
   const [selectedFile, setSelectedFile] = React.useState<Nullable<File>>(null);
   const [isFileDetailsOpen, setIsFileDetailsOpen] = React.useState(false);
 
-  const { accessToken } = useInstillStore(
-    useShallow((store: InstillStore) => ({
-      accessToken: store.accessToken,
-    }))
-  );
+  const { accessToken } = useInstillStore(useShallow(storeSelector));
 
-  const { data: files, isLoading: isLoadingFiles } = useListKnowledgeBaseFiles({
+  const artifactClient = useArtifactClient();
+
+  const { data: knowledgeBaseFiles, isLoading: isLoadingFiles } = artifactClient.useListKnowledgeBasesFiles({
     ownerId: knowledgeBase.ownerName,
-    knowledgeBaseId: knowledgeBase.kbId,
-    accessToken,
+    kbId: knowledgeBase.kbId,
     enabled: true,
   });
 
-  const updateChunkMutation = useUpdateChunk();
-
   React.useEffect(() => {
-    if (files && files.length > 0) {
-      setExpandedFiles([files[0].fileUid]);
+    if (knowledgeBaseFiles && knowledgeBaseFiles.length > 0) {
+      setExpandedFiles([knowledgeBaseFiles[0].fileUid]);
     }
-  }, [files]);
+  }, [knowledgeBaseFiles]);
 
   const toggleFileExpansion = (fileUid: string) => {
     setExpandedFiles(prev =>
@@ -59,9 +58,8 @@ export const ChunkTab = ({ knowledgeBase }: ChunkTabProps) => {
 
   const handleRetrievableToggle = async (chunkUid: string, currentValue: boolean) => {
     try {
-      await updateChunkMutation.mutateAsync({
+      await artifactClient.updateChunk({
         chunkUid,
-        accessToken,
         retrievable: !currentValue,
       });
     } catch (error) {
@@ -70,14 +68,14 @@ export const ChunkTab = ({ knowledgeBase }: ChunkTabProps) => {
   };
 
   return (
-<div className="flex-col">
+    <div className="flex-col">
       <div className="mb-5 flex items-center justify-between">
         <p className="text-semantic-fg-primary product-headings-heading-2">
           {knowledgeBase.name}
         </p>
       </div>
       <Separator orientation="horizontal" className="mb-6" />
-      {isLoadingFiles ? (
+      {knowledgeBaseFiles.isLoading ? (
         <div className="grid gap-16 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
           {Array.from({ length: 6 }).map((_, index) => (
             <div
@@ -100,10 +98,10 @@ export const ChunkTab = ({ knowledgeBase }: ChunkTabProps) => {
           ))}
         </div>
       ) : (
-        files && files.length > 0 ? (
+        knowledgeBaseFiles.data && knowledgeBaseFiles.data.length > 0 ? (
           <div className="flex">
             <div className="w-full pr-4">
-              {files.map((file: File) => (
+              {knowledgeBaseFiles.data.map((file: File) => (
                 <FileChunks
                   key={file.fileUid}
                   file={file}

packages/toolkit/src/view/knowledge/components/KnowledgeBaseTab.tsx → packages/toolkit/src/view/knowledge/tabs/KnowledgeBaseTab.tsx

@@ -1,26 +1,15 @@
-import { Icons, Input, Separator, Skeleton } from "@instill-ai/design-system";
-import * as React from "react";
-import { KnowledgeBaseCard } from "./KnowledgeBaseCard";
-import { CreateKnowledgeBaseCard } from "./CreateKnowledgeBaseCard";
-import { CreateKnowledgeDialog } from "./CreateKnowledgeDialog";
-import {
-  useGetKnowledgeBases,
-  useCreateKnowledgeBase,
-  useUpdateKnowledgeBase,
-  useDeleteKnowledgeBase,
-} from "../../../lib/react-query-service/knowledge";
-import {
-  InstillStore,
-  useAuthenticatedUser,
-  useInstillStore,
-  useShallow,
-} from "../../../lib";
+import * as React from 'react';
+import { Separator, Skeleton } from "@instill-ai/design-system";
 import { KnowledgeBase } from "../../../../../sdk/src/vdp/artifact/types";
+import { InstillStore, useAuthenticatedUser, useInstillStore, useShallow } from "../../../lib";
+import { useArtifactClient } from '../../../lib/react-query-service/knowledge';
 import * as z from "zod";
-import KnowledgeSearchSort, { SortAnchor, SortOrder } from "./KnowledgeSearchSort";
+import KnowledgeSearchSort, { SortAnchor, SortOrder } from "../components/KnowledgeSearchSort";
+import { CreateKnowledgeBaseCard, CreateKnowledgeDialog, KnowledgeBaseCard } from "../components";
 
 type KnowledgeBaseTabProps = {
   onKnowledgeBaseSelect: (knowledgeBase: KnowledgeBase) => void;
+  onDeleteKnowledgeBase: (knowledgeBase: KnowledgeBase) => void;
   accessToken: string | null;
 };
 
@@ -31,10 +20,11 @@ const CreateKnowledgeFormSchema = z.object({
   namespaceId: z.string().min(1, { message: "Namespace is required" }),
 });
 
-export const KnowledgeBaseTab = ({
+export const KnowledgeBaseTab: React.FC<KnowledgeBaseTabProps> = ({
   onKnowledgeBaseSelect,
+  onDeleteKnowledgeBase,
   accessToken,
-}: KnowledgeBaseTabProps) => {
+}) => {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState("");
   const [selectedSortOrder, setSelectedSortOrder] = React.useState<SortOrder>("desc");
@@ -51,30 +41,26 @@ export const KnowledgeBaseTab = ({
     accessToken,
   });
 
-  const { data: knowledgeBases, isLoading, refetch } = useGetKnowledgeBases({
-    accessToken,
-    ownerId: me.data?.id ?? null,
+  const artifactClient = useArtifactClient();
+
+  const { data: knowledgeBases, isLoading, refetch } = artifactClient.useGetKnowledgeBases({
+    ownerId: me.data?.id ?? "",
     enabled: enabledQuery && !!me.data?.id,
   });
 
-  const createKnowledgeBase = useCreateKnowledgeBase();
-  const updateKnowledgeBase = useUpdateKnowledgeBase();
-  const deleteKnowledgeBase = useDeleteKnowledgeBase();
-
   const handleCreateKnowledgeSubmit = async (
     data: z.infer<typeof CreateKnowledgeFormSchema>
   ) => {
     if (!me.data?.id || !accessToken) return;
 
     try {
-      await createKnowledgeBase.mutateAsync({
+      await artifactClient.createKnowledgeBase({
+        ownerId: me.data.id,
         payload: {
           name: data.name,
           description: data.description,
           tags: data.tags ?? [],
         },
-        ownerId: me.data.id,
-        accessToken,
       });
       refetch();
       setIsCreateDialogOpen(false);
@@ -90,11 +76,10 @@ export const KnowledgeBaseTab = ({
     if (!me.data?.id || !accessToken) return;
 
     try {
-      await updateKnowledgeBase.mutateAsync({
+      await artifactClient.updateKnowledgeBase({
         ownerId: me.data.id,
         kbId: kbId,
         payload: data,
-        accessToken,
       });
       refetch();
     } catch (error) {
@@ -112,10 +97,9 @@ export const KnowledgeBaseTab = ({
     };
 
     try {
-      await createKnowledgeBase.mutateAsync({
-        payload: clonedKnowledgeBase,
+      await artifactClient.createKnowledgeBase({
         ownerId: me.data.id,
-        accessToken,
+        payload: clonedKnowledgeBase,
       });
       refetch();
     } catch (error) {
@@ -127,10 +111,9 @@ export const KnowledgeBaseTab = ({
     if (!me.data?.id || !accessToken) return;
 
     try {
-      await deleteKnowledgeBase.mutateAsync({
+      await artifactClient.deleteKnowledgeBase({
         ownerId: me.data.id,
         kbId: kbId,
-        accessToken,
       });
       refetch();
     } catch (error) {

packages/toolkit/src/view/knowledge/components/UploadExploreTab.tsx → packages/toolkit/src/view/knowledge/tabs/UploadExploreTab.tsx

@@ -18,9 +18,9 @@ import {
   useShallow,
 } from "../../../lib";
 // import FilePreview from "./FilePreview";
-import IncorrectFormatFileNotification from "./Notifications/IncorrectFormatFileNotification";
-import FileSizeNotification from "./Notifications/FileSizeNotification";
-import { FILE_ERROR_TIMEOUT } from "./undoDeleteTime";
+import IncorrectFormatFileNotification from "../components/notifications/IncorrectFormatFileNotification";
+import FileSizeNotification from "../components/notifications/FileSizeNotification";
+import { FILE_ERROR_TIMEOUT } from "../components/undoDeleteTime";
 
 const MAX_FILE_SIZE = 15 * 1024 * 1024;
 

packages/toolkit/src/view/knowledge/tabs/index.ts

@@ -0,0 +1,6 @@
+export * from './KnowledgeBaseTab';
+export * from './UploadExploreTab';
+export * from './CatalogFilesTab';
+export * from './MarkdownTab';
+export * from './ChunkTab';
+export * from './RetrieveTestTab';