From fe122281fdaa056386098daeffe999eb1cf0325a Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 11 Jul 2025 21:40:42 +0800
Subject: [PATCH] feat(fe): component for available apis

---
 .../home/bots/components/bot-form/BotForm.tsx |  1 +
 web/src/app/home/knowledge/KBDetailDialog.tsx |  4 +++-
 .../knowledge/components/kb-docs/KBDoc.tsx    |  5 ++++
 .../kb-docs/doc-card/DocumentCard.tsx         |  9 +++++++
 .../knowledge/components/kb-form/KBForm.tsx   | 24 ++++++++++++++++++-
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 web/src/app/home/knowledge/components/kb-docs/doc-card/DocumentCard.tsx

diff --git a/web/src/app/home/bots/components/bot-form/BotForm.tsx b/web/src/app/home/bots/components/bot-form/BotForm.tsx
index fe36d33b..e4b6d40e 100644
--- a/web/src/app/home/bots/components/bot-form/BotForm.tsx
+++ b/web/src/app/home/bots/components/bot-form/BotForm.tsx
@@ -212,6 +212,7 @@ export default function BotForm({
     });
     setAdapterNameToDynamicConfigMap(adapterNameToDynamicConfigMap);
   }
+
   async function getBotConfig(
     botId: string,
   ): Promise<z.infer<typeof formSchema>> {
diff --git a/web/src/app/home/knowledge/KBDetailDialog.tsx b/web/src/app/home/knowledge/KBDetailDialog.tsx
index e3ab4f9d..d31306bd 100644
--- a/web/src/app/home/knowledge/KBDetailDialog.tsx
+++ b/web/src/app/home/knowledge/KBDetailDialog.tsx
@@ -24,6 +24,7 @@ import { z } from 'zod';
 // import { httpClient } from '@/app/infra/http/HttpClient';
 // import { KnowledgeBase } from '@/app/infra/entities/api';
 import KBForm from '@/app/home/knowledge/components/kb-form/KBForm';
+import KBDoc from '@/app/home/knowledge/components/kb-docs/KBDoc';
 
 interface KBDetailDialogProps {
   open: boolean;
@@ -48,6 +49,7 @@ export default function KBDetailDialog({
   const { t } = useTranslation();
   const [kbId, setKbId] = useState<string | undefined>(propKbId);
   const [activeMenu, setActiveMenu] = useState('metadata');
+  const [fileId, setFileId] = useState<string | undefined>(undefined);
   // const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   useEffect(() => {
@@ -177,7 +179,7 @@ export default function KBDetailDialog({
                     onNewKbCreated={onNewKbCreated}
                   />
                 )}
-                {activeMenu === 'documents' && <div>documents</div>}
+                {activeMenu === 'documents' && <KBDoc kbId={kbId} />}
               </div>
               {activeMenu === 'metadata' && (
                 <DialogFooter className="px-6 py-4 border-t shrink-0">
diff --git a/web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx b/web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx
index e69de29b..5cc9a850 100644
--- a/web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx
+++ b/web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx
@@ -0,0 +1,5 @@
+import { useEffect, useState } from 'react';
+
+export default function KBDoc({ kbId }: { kbId: string }) {
+  return <div>Documents</div>;
+}
diff --git a/web/src/app/home/knowledge/components/kb-docs/doc-card/DocumentCard.tsx b/web/src/app/home/knowledge/components/kb-docs/doc-card/DocumentCard.tsx
new file mode 100644
index 00000000..23a884ba
--- /dev/null
+++ b/web/src/app/home/knowledge/components/kb-docs/doc-card/DocumentCard.tsx
@@ -0,0 +1,9 @@
+export default function DocumentCard({
+  kbId,
+  fileId,
+}: {
+  kbId: string;
+  fileId: string;
+}) {
+  return <div></div>;
+}
diff --git a/web/src/app/home/knowledge/components/kb-form/KBForm.tsx b/web/src/app/home/knowledge/components/kb-form/KBForm.tsx
index 0d4f0909..b56c327b 100644
--- a/web/src/app/home/knowledge/components/kb-form/KBForm.tsx
+++ b/web/src/app/home/knowledge/components/kb-form/KBForm.tsx
@@ -67,9 +67,31 @@ export default function KBForm({
   >([]);
 
   useEffect(() => {
-    getEmbeddingModelNameList();
+    getEmbeddingModelNameList().then(() => {
+      if (initKbId) {
+        getKbConfig(initKbId).then((val) => {
+          form.setValue('name', val.name);
+          form.setValue('description', val.description);
+          form.setValue('embeddingModelUUID', val.embeddingModelUUID);
+        });
+      }
+    });
   }, []);
 
+  const getKbConfig = async (
+    kbId: string,
+  ): Promise<z.infer<typeof formSchema>> => {
+    return new Promise((resolve, reject) => {
+      httpClient.getKnowledgeBase(kbId).then((res) => {
+        resolve({
+          name: res.base.name,
+          description: res.base.description,
+          embeddingModelUUID: res.base.embedding_model_uuid,
+        });
+      });
+    });
+  };
+
   const getEmbeddingModelNameList = async () => {
     const resp = await httpClient.getProviderEmbeddingModels();
     setEmbeddingModelNameList(