Fix connected sources display

web/src/app/chat/Chat.tsx

@@ -40,6 +40,8 @@ import { ResizableSection } from "@/components/resizable/ResizableSection";
 import { DanswerInitializingLoader } from "@/components/DanswerInitializingLoader";
 import { ChatIntro } from "./ChatIntro";
 import { HEADER_PADDING } from "@/lib/constants";
+import { getSourcesForPersona } from "@/lib/sources";
+import { computeAvailableFilters } from "@/lib/filters";
 
 const MAX_INPUT_HEIGHT = 200;
 
@@ -164,6 +166,12 @@ export const Chat = ({
   }, [defaultSelectedPersonaId]);
 
   const filterManager = useFilters();
+  const [finalAvailableSources, finalAvailableDocumentSets] =
+    computeAvailableFilters({
+      selectedPersona,
+      availableSources,
+      availableDocumentSets,
+    });
 
   // state for cancelling streaming
   const [isCancelled, setIsCancelled] = useState(false);
@@ -461,7 +469,7 @@ export const Chat = ({
                 !isFetchingChatMessages &&
                 !isStreaming && (
                   <ChatIntro
-                    availableSources={availableSources}
+                    availableSources={finalAvailableSources}
                     availablePersonas={availablePersonas}
                     selectedPersona={selectedPersona}
                     handlePersonaSelect={(persona) => {
@@ -616,8 +624,8 @@ export const Chat = ({
                     ) : (
                       <ChatFilters
                         {...filterManager}
-                        existingSources={availableSources}
-                        availableDocumentSets={availableDocumentSets}
+                        existingSources={finalAvailableSources}
+                        availableDocumentSets={finalAvailableDocumentSets}
                         availableTags={availableTags}
                       />
                     )}

web/src/app/chat/ChatIntro.tsx

@@ -1,4 +1,4 @@
-import { listSourceMetadata } from "@/lib/sources";
+import { getSourceMetadataForSources, listSourceMetadata } from "@/lib/sources";
 import { ValidSources } from "@/lib/types";
 import Image from "next/image";
 import { Persona } from "../admin/personas/interfaces";
@@ -8,6 +8,7 @@ import { HoverPopup } from "@/components/HoverPopup";
 import { Modal } from "@/components/Modal";
 import { useState } from "react";
 import { FaRobot } from "react-icons/fa";
+import { SourceMetadata } from "@/lib/search/interfaces";
 
 const MAX_PERSONAS_TO_DISPLAY = 4;
 
@@ -90,10 +91,7 @@ export function ChatIntro({
   const [isAllPersonaOptionVisible, setIsAllPersonaOptionVisible] =
     useState(false);
 
-  const allSources = listSourceMetadata();
-  const availableSourceMetadata = allSources.filter((source) =>
-    availableSources.includes(source.internalName)
-  );
+  const availableSourceMetadata = getSourceMetadataForSources(availableSources);
 
   return (
     <>
@@ -133,29 +131,31 @@ export function ChatIntro({
                   <p className="font-bold mb-1 mt-4 text-emphasis">
                     Knowledge Sets:{" "}
                   </p>
-                  {selectedPersona.document_sets.map((documentSet) => (
-                    <div key={documentSet.id} className="w-fit">
-                      <HoverPopup
-                        mainContent={
-                          <span className="flex w-fit p-1 rounded border border-border text-xs font-medium cursor-default">
-                            <div className="mr-1 my-auto">
-                              <FiBookmark />
+                  <div className="flex flex-wrap gap-x-2">
+                    {selectedPersona.document_sets.map((documentSet) => (
+                      <div key={documentSet.id} className="w-fit">
+                        <HoverPopup
+                          mainContent={
+                            <span className="flex w-fit p-1 rounded border border-border text-xs font-medium cursor-default">
+                              <div className="mr-1 my-auto">
+                                <FiBookmark />
+                              </div>
+                              {documentSet.name}
+                            </span>
+                          }
+                          popupContent={
+                            <div className="flex py-1 w-96">
+                              <FiInfo className="my-auto mr-2" />
+                              <div className="text-sm">
+                                {documentSet.description}
+                              </div>
                             </div>
-                            {documentSet.name}
-                          </span>
-                        }
-                        popupContent={
-                          <div className="flex py-1 w-96">
-                            <FiInfo className="my-auto mr-2" />
-                            <div className="text-sm">
-                              {documentSet.description}
-                            </div>
-                          </div>
-                        }
-                        direction="top"
-                      />
-                    </div>
-                  ))}
+                          }
+                          direction="top"
+                        />
+                      </div>
+                    ))}
+                  </div>
                 </div>
               )}
               {availableSources.length > 0 && (

web/src/components/search/SearchSection.tsx

@@ -22,6 +22,7 @@ import { useFilters, useObjectState } from "@/lib/hooks";
 import { questionValidationStreamed } from "@/lib/search/streamingQuestionValidation";
 import { Persona } from "@/app/admin/personas/interfaces";
 import { PersonaSelector } from "./PersonaSelector";
+import { computeAvailableFilters } from "@/lib/filters";
 
 const SEARCH_DEFAULT_OVERRIDES_START: SearchDefaultOverrides = {
   forceDisplayQA: false,
@@ -61,9 +62,6 @@ export const SearchSection = ({
   const [validQuestionResponse, setValidQuestionResponse] =
     useObjectState<ValidQuestionResponse>(VALID_QUESTION_RESPONSE_DEFAULT);
 
-  // Filters
-  const filterManager = useFilters();
-
   // Search Type
   const [selectedSearchType, setSelectedSearchType] =
     useState<SearchType>(defaultSearchType);
@@ -72,6 +70,18 @@ export const SearchSection = ({
     personas[0]?.id || 0
   );
 
+  // Filters
+  const filterManager = useFilters();
+  const availableSources = connectors.map((connector) => connector.source);
+  const [finalAvailableSources, finalAvailableDocumentSets] =
+    computeAvailableFilters({
+      selectedPersona: personas.find(
+        (persona) => persona.id === selectedPersona
+      ),
+      availableSources: availableSources,
+      availableDocumentSets: documentSets,
+    });
+
   // Overrides for default behavior that only last a single query
   const [defaultOverrides, setDefaultOverrides] =
     useState<SearchDefaultOverrides>(SEARCH_DEFAULT_OVERRIDES_START);
@@ -207,8 +217,8 @@ export const SearchSection = ({
         {(connectors.length > 0 || documentSets.length > 0) && (
           <SourceSelector
             {...filterManager}
-            availableDocumentSets={documentSets}
-            existingSources={connectors.map((connector) => connector.source)}
+            availableDocumentSets={finalAvailableDocumentSets}
+            existingSources={finalAvailableSources}
             availableTags={tags}
           />
         )}

web/src/lib/filters.ts

@@ -0,0 +1,32 @@
+import { Persona } from "@/app/admin/personas/interfaces";
+import { DocumentSet, ValidSources } from "./types";
+import { getSourcesForPersona } from "./sources";
+
+export function computeAvailableFilters({
+  selectedPersona,
+  availableSources,
+  availableDocumentSets,
+}: {
+  selectedPersona: Persona | undefined | null;
+  availableSources: ValidSources[];
+  availableDocumentSets: DocumentSet[];
+}): [ValidSources[], DocumentSet[]] {
+  const finalAvailableSources =
+    selectedPersona && selectedPersona.document_sets.length
+      ? getSourcesForPersona(selectedPersona)
+      : availableSources;
+
+  // only display document sets that are available to the persona
+  // in filters
+  const personaDocumentSetIds =
+    selectedPersona && selectedPersona.document_sets.length
+      ? selectedPersona.document_sets.map((documentSet) => documentSet.id)
+      : null;
+  const finalAvailableDocumentSets = personaDocumentSetIds
+    ? availableDocumentSets.filter((documentSet) =>
+        personaDocumentSetIds.includes(documentSet.id)
+      )
+    : availableDocumentSets;
+
+  return [finalAvailableSources, finalAvailableDocumentSets];
+}

web/src/lib/sources.ts

@@ -26,6 +26,7 @@ import {
 } from "@/components/icons/icons";
 import { ValidSources } from "./types";
 import { SourceCategory, SourceMetadata } from "./search/interfaces";
+import { Persona } from "@/app/admin/personas/interfaces";
 
 interface PartialSourceMetadata {
   icon: React.FC<{ size?: number; className?: string }>;
@@ -186,3 +187,19 @@ export function listSourceMetadata(): SourceMetadata[] {
 export function getSourceDisplayName(sourceType: ValidSources): string | null {
   return getSourceMetadata(sourceType).displayName;
 }
+
+export function getSourceMetadataForSources(sources: ValidSources[]) {
+  return sources.map((source) => getSourceMetadata(source));
+}
+
+export function getSourcesForPersona(persona: Persona): ValidSources[] {
+  const personaSources: ValidSources[] = [];
+  persona.document_sets.forEach((documentSet) => {
+    documentSet.cc_pair_descriptors.forEach((ccPair) => {
+      if (!personaSources.includes(ccPair.connector.source)) {
+        personaSources.push(ccPair.connector.source);
+      }
+    });
+  });
+  return personaSources;
+}