✨ Modify KnowledgeBaseList and KnowledgeBaseContext components to improve knowledge base selection logic and UI behavior.

Author: Zhi-a

frontend/app/[locale]/knowledges/components/knowledge/KnowledgeBaseList.tsx

@@ -335,15 +335,17 @@ const KnowledgeBaseList: React.FC<KnowledgeBaseListProps> = ({
                         >
                           {kb.name}
                         </p>
-                        <button
-                          className="text-red-500 hover:text-red-700 text-xs font-medium ml-2"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onDelete(kb.id);
-                          }}
-                        >
-                          {t("common.delete")}
-                        </button>
+                        {kb.source !== "datamate" && (
+                          <button
+                            className="text-red-500 hover:text-red-700 text-xs font-medium ml-2"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onDelete(kb.id);
+                            }}
+                          >
+                            {t("common.delete")}
+                          </button>
+                        )}
                       </div>
                       <div
                         className={`flex flex-wrap items-center ${KB_LAYOUT.TAG_MARGIN} ${KB_LAYOUT.TAG_SPACING}`}
@@ -366,19 +368,19 @@ const KnowledgeBaseList: React.FC<KnowledgeBaseListProps> = ({
                           })}
                         </span>
 
-                        {/* Only show source, creation date, and model tags when there are valid documents or chunks */}
+                        {/* Always show source tag regardless of document/chunk count */}
+                        <span
+                          className={`inline-flex items-center ${KB_LAYOUT.TAG_PADDING} ${KB_LAYOUT.TAG_ROUNDED} ${KB_LAYOUT.TAG_TEXT} bg-gray-200 text-gray-800 border border-gray-200 mr-1`}
+                        >
+                          {t("knowledgeBase.tag.source", {
+                            source: kb.source,
+                          })}
+                        </span>
+
+                        {/* Only show creation date, model tags when there are valid documents or chunks */}
                         {((kb.documentCount || 0) > 0 ||
                           (kb.chunkCount || 0) > 0) && (
                           <>
-                            {/* Knowledge base source tag */}
-                            <span
-                              className={`inline-flex items-center ${KB_LAYOUT.TAG_PADDING} ${KB_LAYOUT.TAG_ROUNDED} ${KB_LAYOUT.TAG_TEXT} bg-gray-200 text-gray-800 border border-gray-200 mr-1`}
-                            >
-                              {t("knowledgeBase.tag.source", {
-                                source: kb.source,
-                              })}
-                            </span>
-
                             {/* Creation date tag - only show date */}
                             <span
                               className={`inline-flex items-center ${KB_LAYOUT.TAG_PADDING} ${KB_LAYOUT.TAG_ROUNDED} ${KB_LAYOUT.TAG_TEXT} bg-gray-200 text-gray-800 border border-gray-200 mr-1`}

frontend/app/[locale]/knowledges/contexts/KnowledgeBaseContext.tsx

@@ -166,11 +166,22 @@ export const KnowledgeBaseProvider: React.FC<KnowledgeBaseProviderProps> = ({
       if (!state.currentEmbeddingModel) {
         return false;
       }
-      // DataMate knowledge bases are always selectable (even if model doesn't match)
+
+      // Check if knowledge base has content (documents or chunks)
+      const hasContent =
+        (kb.documentCount || 0) > 0 || (kb.chunkCount || 0) > 0;
+
+      // Empty knowledge bases cannot be selected
+      if (!hasContent) {
+        return false;
+      }
+
+      // DataMate knowledge bases are selectable if they have content (even if model doesn't match)
       if (kb.source === "datamate") {
         return true;
       }
-      // Only selectable when knowledge base model exactly matches current model
+
+      // For local knowledge bases, only selectable when model exactly matches current model
       return (
         kb.embeddingModel === "unknown" ||
         kb.embeddingModel === state.currentEmbeddingModel
@@ -433,8 +444,8 @@ export const KnowledgeBaseProvider: React.FC<KnowledgeBaseProviderProps> = ({
   const refreshKnowledgeBaseData = useCallback(
     async (forceRefresh = false) => {
       try {
-        // Get latest knowledge base data directly from server, but don't reload user selections and skip DataMate sync
-        await fetchKnowledgeBases(false, false, false);
+        // Get latest knowledge base data directly from server, but don't reload user selections, include DataMate sync to prevent DataMate KBs from disappearing
+        await fetchKnowledgeBases(false, false, true);
 
         // If there is an active knowledge base, also refresh its document information
         if (state.activeKnowledgeBase) {