From bef0d73e83703e79e31bc178f96edfbb943c8d9b Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 6 Jul 2025 10:25:28 +0800
Subject: [PATCH] feat: basic definition

---
 web/src/app/home/knowledge/KBDetailDialog.tsx | 89 +++++++++++++++++++
 web/src/app/infra/entities/api/index.ts       | 10 +++
 web/src/app/infra/http/HttpClient.ts          | 21 +++++
 web/src/i18n/locales/en-US.ts                 |  2 +
 4 files changed, 122 insertions(+)
 create mode 100644 web/src/app/home/knowledge/KBDetailDialog.tsx

diff --git a/web/src/app/home/knowledge/KBDetailDialog.tsx b/web/src/app/home/knowledge/KBDetailDialog.tsx
new file mode 100644
index 00000000..5291dd59
--- /dev/null
+++ b/web/src/app/home/knowledge/KBDetailDialog.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { KnowledgeBase } from '@/app/infra/entities/api';
+
+interface KBDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  kbId?: string;
+  onFormSubmit: (value: z.infer<any>) => void;
+  onFormCancel: () => void;
+  onKbDeleted: () => void;
+  onNewKbCreated: (kbId: string) => void;
+}
+
+export default function KBDetailDialog({
+  open,
+  onOpenChange,
+  kbId: propKbId,
+  onFormSubmit,
+  onFormCancel,
+  onKbDeleted,
+  onNewKbCreated,
+}: KBDetailDialogProps) {
+  const { t } = useTranslation();
+  const [kbId, setKbId] = useState<string | undefined>(propKbId);
+  const [activeMenu, setActiveMenu] = useState('metadata');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  useEffect(() => {
+    setKbId(propKbId);
+    setActiveMenu('metadata');
+  }, [propKbId, open]);
+
+  const menu = [
+    {
+      key: 'metadata',
+      label: t('knowledge.metadata'),
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
+        </svg>
+      ),
+    },
+    {
+      key: 'files',
+      label: t('knowledge.files'),
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
+        </svg>
+      ),
+    },
+  ];
+
+  if (!kbId) {
+    // new kb
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="overflow-hidden p-0 !max-w-[40vw] max-h-[70vh] flex">
+          <main className="flex flex-1 flex-col h-[70vh]">
+            <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
+              <DialogTitle>{t('knowledge.newKb')}</DialogTitle>
+            </DialogHeader>
+          </main>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
diff --git a/web/src/app/infra/entities/api/index.ts b/web/src/app/infra/entities/api/index.ts
index a44b1991..b230cf9e 100644
--- a/web/src/app/infra/entities/api/index.ts
+++ b/web/src/app/infra/entities/api/index.ts
@@ -150,6 +150,16 @@ export interface KnowledgeBase {
   updated_at?: string;
 }
 
+export interface ApiRespKnowledgeBaseFiles {
+  files: KnowledgeBaseFile[];
+}
+
+export interface KnowledgeBaseFile {
+  file_id: string;
+  file_name: string;
+  status: string;
+}
+
 // plugins
 export interface ApiRespPlugins {
   plugins: Plugin[];
diff --git a/web/src/app/infra/http/HttpClient.ts b/web/src/app/infra/http/HttpClient.ts
index 5c6e0abd..8842b04d 100644
--- a/web/src/app/infra/http/HttpClient.ts
+++ b/web/src/app/infra/http/HttpClient.ts
@@ -37,6 +37,7 @@ import {
   ApiRespKnowledgeBases,
   ApiRespKnowledgeBase,
   KnowledgeBase,
+  ApiRespKnowledgeBaseFiles,
 } from '@/app/infra/entities/api';
 import { GetBotLogsRequest } from '@/app/infra/http/requestParam/bots/GetBotLogsRequest';
 import { GetBotLogsResponse } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
@@ -430,6 +431,11 @@ class HttpClient {
     return this.post(`/api/v1/platform/bots/${botId}/logs`, request);
   }
 
+  // ============ File management API ============
+  public uploadDocumentFile(file: File): Promise<{ file_id: string }> {
+    return this.post('/api/v1/files/documents', file);
+  }
+
   // ============ Knowledge Base API ============
   public getKnowledgeBases(): Promise<ApiRespKnowledgeBases> {
     return this.get('/api/v1/knowledge/bases');
@@ -443,6 +449,21 @@ class HttpClient {
     return this.post('/api/v1/knowledge/bases', base);
   }
 
+  public uploadKnowledgeBaseFile(
+    uuid: string,
+    file_id: string,
+  ): Promise<object> {
+    return this.post(`/api/v1/knowledge/bases/${uuid}/files`, {
+      file_id,
+    });
+  }
+
+  public getKnowledgeBaseFiles(
+    uuid: string,
+  ): Promise<ApiRespKnowledgeBaseFiles> {
+    return this.get(`/api/v1/knowledge/bases/${uuid}/files`);
+  }
+
   // ============ Plugins API ============
   public getPlugins(): Promise<ApiRespPlugins> {
     return this.get('/api/v1/plugins');
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index 5596e35f..7a1f79c8 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -233,6 +233,8 @@ const enUS = {
   knowledge: {
     title: 'Knowledge',
     description: 'Configuring knowledge bases for improved LLM responses',
+    metadata: 'Metadata',
+    files: 'Files',
   },
   register: {
     title: 'Initialize LangBot 👋',