[KM-476] [DED][FE] Knowledge (Document and DB) Flow Page

src/app/components/KnowledgeManagement.tsx

@@ -16,6 +16,7 @@ import {
   uploadDocument,
   processDocument,
   deleteDocument,
+  getDocumentTypes,
   getDatabaseClientTypes,
   connectDatabase,
   getDatabaseClients,
@@ -23,6 +24,7 @@ import {
   ingestDatabaseClient,
   type ApiDocument,
   type DocumentStatus,
+  type DocTypeInfo,
   type DbType,
   type DbTypeInfo,
   type DatabaseClient,
@@ -55,6 +57,7 @@ export default function KnowledgeManagement({
   onClose,
 }: KnowledgeManagementProps) {
   // ── Document state ──────────────────────────────────────────────────────────
+  const [docTypes, setDocTypes] = useState<DocTypeInfo[]>([]);
   const [documents, setDocuments] = useState<ApiDocument[]>([]);
   const [loadingDocs, setLoadingDocs] = useState(false);
   const [docsError, setDocsError] = useState<string | null>(null);
@@ -85,8 +88,20 @@ export default function KnowledgeManagement({
     if (!userId) return;
     loadDocuments(userId);
     loadDbData(userId);
+    getDocumentTypes()
+      .then((types) => setDocTypes(types.filter((t) => t.status === "active")))
+      .catch(() =>
+        setDocTypes([
+          { doc_type: "pdf",  max_size: 10, status: "active", message: null },
+          { doc_type: "csv",  max_size: 10, status: "active", message: null },
+          { doc_type: "xlsx", max_size: 10, status: "active", message: null },
+        ])
+      );
   }, [open]);
 
+  const acceptedExtensions = docTypes.map((t) => `.${t.doc_type}`).join(",");
+  const supportedFormatsText = docTypes.map((t) => t.doc_type.toUpperCase()).join(", ");
+
   const loadDbData = async (userId: string) => {
     setLoadingDbTypes(true);
     try {
@@ -387,12 +402,12 @@ export default function KnowledgeManagement({
                       <>Drop files, or <span className="text-[#FF8F00]">browse</span></>
                     )}
                   </p>
-                  <p className="text-xs text-slate-400 mt-0.5">PDF, CSV, XLSX</p>
+                  <p className="text-xs text-slate-400 mt-0.5">{supportedFormatsText}</p>
                 </div>
                 <input
                   id="file-upload"
                   type="file"
-                  accept=".pdf,.csv,.xlsx"
+                  accept={acceptedExtensions}
                   multiple
                   onChange={handleFileUpload}
                   className="hidden"
@@ -721,7 +736,7 @@ export default function KnowledgeManagement({
         <div className="px-5 py-3 border-t border-slate-100">
           <p className="text-[10px] text-slate-300 text-center">
             {view === "main"
-              ? "Supported formats: PDF, CSV, XLSX"
+              ? `Supported formats: ${supportedFormatsText}`
               : view === "db-select"
               ? "More integrations coming soon"
               : "Credentials are encrypted at rest"}

src/services/api.ts

@@ -65,6 +65,13 @@ export interface UploadDocumentResponse {
   data: { id: string; filename: string; status: DocumentStatus };
 }
 
+export interface DocTypeInfo {
+  doc_type: string;
+  max_size: number;
+  status: "active" | "inactive";
+  message: string | null;
+}
+
 // ─── Base Client ──────────────────────────────────────────────────────────────
 
 const BASE_URL = ((import.meta as unknown as { env: Record<string, string> }).env.VITE_API_BASE_URL) ?? "";
@@ -151,6 +158,11 @@ export const deleteDocument = (userId: string, documentId: string) =>
     { method: "DELETE" }
   );
 
+export const getDocumentTypes = (): Promise<DocTypeInfo[]> =>
+  request<{ status: string; data: DocTypeInfo[] }>("/api/v1/documents/doctypes").then(
+    (res) => res.data
+  );
+
 // ─── Database Clients ─────────────────────────────────────────────────────────
 
 export type DbType = "postgres" | "mysql" | "sqlserver" | "supabase" | "bigquery" | "snowflake";