[NOTICKET] Update icon file

src/app/components/KnowledgeManagement.tsx

@@ -3,12 +3,15 @@ import {
   Upload,
   Trash2,
   FileText,
+  FileSpreadsheet,
+  File,
   Check,
   Loader2,
   Database,
   X,
   ChevronLeft,
   Link,
+  Table,
 } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -22,12 +25,14 @@ import {
   getDatabaseClients,
   deleteDatabaseClient,
   ingestDatabaseClient,
+  getDataCatalog,
   type ApiDocument,
   type DocumentStatus,
   type DocTypeInfo,
   type DbType,
   type DbTypeInfo,
   type DatabaseClient,
+  type DataCatalogSource,
 } from "../../services/api";
 
 interface KnowledgeManagementProps {
@@ -35,7 +40,7 @@ interface KnowledgeManagementProps {
   onClose: () => void;
 }
 
-type View = "main" | "db-select" | "db-credentials";
+type View = "main" | "db-select" | "db-credentials" | "catalog";
 
 const LOGO_MAP: Record<string, string> = {
   postgres:  "https://cdn.simpleicons.org/postgresql/336791",
@@ -52,6 +57,17 @@ const getUserId = (): string | null => {
   return (JSON.parse(stored).user_id as string) ?? null;
 };
 
+const FILE_ICON_MAP: Record<string, { icon: React.ElementType; bg: string; color: string }> = {
+  pdf:  { icon: FileText,        bg: "bg-red-50",    color: "text-red-400"    },
+  docx: { icon: FileText,        bg: "bg-blue-50",   color: "text-blue-400"   },
+  txt:  { icon: File,            bg: "bg-slate-100", color: "text-slate-400"  },
+  csv:  { icon: FileSpreadsheet, bg: "bg-green-50",  color: "text-green-500"  },
+  xlsx: { icon: FileSpreadsheet, bg: "bg-emerald-50",color: "text-emerald-500"},
+};
+
+const getFileIcon = (fileType: string) =>
+  FILE_ICON_MAP[fileType.toLowerCase()] ?? { icon: File, bg: "bg-slate-100", color: "text-slate-400" };
+
 export default function KnowledgeManagement({
   open,
   onClose,
@@ -79,6 +95,10 @@ export default function KnowledgeManagement({
   const [deletingClient, setDeletingClient] = useState<string | null>(null);
   const pollingTimers = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
 
+  // ── Data Catalog state ──────────────────────────────────────────────────────
+  const [catalogSources, setCatalogSources] = useState<DataCatalogSource[]>([]);
+  const [loadingCatalog, setLoadingCatalog] = useState(false);
+
   // ── DB credentials form state ───────────────────────────────────────────────
   const [connectionName, setConnectionName] = useState("");
   const [dbForm, setDbForm] = useState<Record<string, string | number | boolean>>({});
@@ -355,6 +375,21 @@ export default function KnowledgeManagement({
     );
   };
 
+  const handleViewCatalog = async () => {
+    const uid = getUserId();
+    setLoadingCatalog(true);
+    setView("catalog");
+    try {
+      if (!uid) throw new Error("no user");
+      const catalog = await getDataCatalog(uid);
+      setCatalogSources(catalog.sources.filter((s) => s.source_type !== "unstructured"));
+    } catch {
+      setCatalogSources([]);
+    } finally {
+      setLoadingCatalog(false);
+    }
+  };
+
   if (!open) return null;
 
   // ── Header title & back button logic ────────────────────────────────────────
@@ -366,6 +401,8 @@ export default function KnowledgeManagement({
       ? "Connect Database"
       : view === "db-credentials"
       ? `Connect to ${selectedDbInfo?.display_name ?? selectedDbType}`
+      : view === "catalog"
+      ? "Data Catalog"
       : "Knowledge Base";
 
   const headerBack =
@@ -373,6 +410,8 @@ export default function KnowledgeManagement({
       ? () => setView("main")
       : view === "db-credentials"
       ? () => setView("db-select")
+      : view === "catalog"
+      ? () => setView("main")
       : null;
 
   // ── Render ───────────────────────────────────────────────────────────────────
@@ -399,12 +438,23 @@ export default function KnowledgeManagement({
             )}
             <h2 className="text-sm font-semibold text-slate-900">{headerTitle}</h2>
           </div>
-          <button
-            onClick={handleClose}
-            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition"
-          >
-            <X className="w-4 h-4" />
-          </button>
+          <div className="flex items-center gap-1">
+            {view === "main" && (
+              <button
+                onClick={handleViewCatalog}
+                title="View data catalog"
+                className="p-1.5 rounded-lg text-slate-400 hover:text-[#FF8F00] hover:bg-orange-50 transition"
+              >
+                <Table className="w-4 h-4" />
+              </button>
+            )}
+            <button
+              onClick={handleClose}
+              className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
         </div>
 
         {/* Content */}
@@ -570,8 +620,8 @@ export default function KnowledgeManagement({
                         key={doc.id}
                         className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition group"
                       >
-                        <div className="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0">
-                          <FileText className="w-4 h-4 text-red-400" />
+                        <div className={`w-8 h-8 rounded-lg ${getFileIcon(doc.file_type).bg} flex items-center justify-center flex-shrink-0`}>
+                          {(() => { const { icon: Icon, color } = getFileIcon(doc.file_type); return <Icon className={`w-4 h-4 ${color}`} />; })()}
                         </div>
                         <div className="flex-1 min-w-0">
                           <p className="text-sm font-medium text-slate-800 truncate" title={doc.filename}>
@@ -768,6 +818,36 @@ export default function KnowledgeManagement({
               </button>
             </div>
           )}
+
+          {/* ── VIEW: catalog ── */}
+          {view === "catalog" && (
+            <div className="space-y-2">
+              {loadingCatalog ? (
+                <div className="flex justify-center py-10">
+                  <Loader2 className="w-5 h-5 animate-spin text-slate-300" />
+                </div>
+              ) : catalogSources.length === 0 ? (
+                <p className="text-center text-xs text-slate-400 py-8">No structured data indexed yet.</p>
+              ) : (
+                catalogSources.map((src) => (
+                  <div key={src.source_id} className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-slate-100">
+                    <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0">
+                      {src.source_type === "schema"
+                        ? <Database className="w-4 h-4 text-slate-500" />
+                        : <Table className="w-4 h-4 text-slate-500" />}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-slate-800 truncate">{src.name}</p>
+                      <p className="text-xs text-slate-400">
+                        {src.source_type === "schema" ? "Database" : "Tabular"}
+                        {src.table_count != null ? ` · ${src.table_count} table${src.table_count !== 1 ? "s" : ""}` : ""}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
         </div>
 
         {/* Footer */}
@@ -777,6 +857,8 @@ export default function KnowledgeManagement({
               ? `Supported formats: ${supportedFormatsText}`
               : view === "db-select"
               ? "More integrations coming soon"
+              : view === "catalog"
+              ? "Structured data sources (database schemas & tabular files)"
               : "Credentials are encrypted at rest"}
           </p>
         </div>

src/app/components/Main.tsx

@@ -12,6 +12,7 @@ import {
   Bot,
   Loader2,
   Database,
+  Eraser,
 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -30,6 +31,7 @@ import {
   getRoom,
   createRoom,
   deleteRoom,
+  clearRoomMessages,
   streamChat,
   type ChatSource,
 } from "../../services/api";
@@ -399,6 +401,18 @@ export default function Main() {
     setCurrentChatId(null);
   };
 
+  const handleClearChat = async () => {
+    if (!currentChatId || !user || isStreaming) return;
+    try {
+      await clearRoomMessages(currentChatId, user.user_id);
+      setChats((prev) =>
+        prev.map((chat) =>
+          chat.id === currentChatId ? { ...chat, messages: [] } : chat
+        )
+      );
+    } catch { /* silent */ }
+  };
+
   const handleLogout = () => {
     localStorage.removeItem("chatbot_user");
     navigate("/login");
@@ -485,10 +499,11 @@ export default function Main() {
       const decoder = new TextDecoder();
       let buffer = "";
       let currentEvent = "";
+      let streamDone = false;
 
       while (true) {
         const { done, value } = await reader.read();
-        if (done) break;
+        if (done || streamDone) break;
 
         buffer += decoder.decode(value, { stream: true });
         const lines = buffer.split(/\r?\n/);
@@ -501,19 +516,23 @@ export default function Main() {
             const data = line.replace(/^data: ?/, "");
 
             if (currentEvent === "sources" && data) {
-              const sources: ChatSource[] = JSON.parse(data);
-              setChats((prev) =>
-                prev.map((chat) =>
-                  chat.id === roomId
-                    ? {
-                        ...chat,
-                        messages: chat.messages.map((m) =>
-                          m.id === assistantMsgId ? { ...m, sources } : m
-                        ),
-                      }
-                    : chat
-                )
-              );
+              try {
+                const sources: ChatSource[] = JSON.parse(data);
+                setChats((prev) =>
+                  prev.map((chat) =>
+                    chat.id === roomId
+                      ? {
+                          ...chat,
+                          messages: chat.messages.map((m) =>
+                            m.id === assistantMsgId ? { ...m, sources } : m
+                          ),
+                        }
+                      : chat
+                  )
+                );
+              } catch {
+                // ignore malformed sources
+              }
             } else if (currentEvent === "chunk" && data) {
               setChats((prev) =>
                 prev.map((chat) =>
@@ -545,6 +564,7 @@ export default function Main() {
                 )
               );
             } else if (currentEvent === "done") {
+              streamDone = true;
               break;
             }
           }
@@ -790,6 +810,16 @@ export default function Main() {
                 Hasil Interview
               </button>
             )}
+            {currentPhase === "analytics" && (currentChat?.messages.length ?? 0) > 0 && (
+              <button
+                onClick={handleClearChat}
+                disabled={isStreaming}
+                title="Clear chat history"
+                className="ml-auto p-1.5 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 transition disabled:opacity-40"
+              >
+                <Eraser className="w-3.5 h-3.5" />
+              </button>
+            )}
           </div>
         )}
 

src/services/api.ts

@@ -158,6 +158,13 @@ export const createRoom = (userId: string, title?: string) =>
     body: JSON.stringify({ user_id: userId, title }),
   });
 
+export const clearRoomMessages = (roomId: string, userId: string) =>
+  request<{ status: string; message: string }>(
+    ORCHESTRATION_BASE_URL,
+    `/api/v1/chat-rooms/${roomId}/messages?user_id=${userId}`,
+    { method: "DELETE" }
+  );
+
 // ─── Documents ────────────────────────────────────────────────────────────────
 
 export const getDocuments = (userId: string): Promise<ApiDocument[]> =>