diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
index f8a396f34b0..32d4f68c0d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts
@@ -1,3 +1,4 @@
+export { KnowledgeFilterHeading } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading'
export { CreateBaseModal } from './create-base-modal'
export { DeleteKnowledgeBaseModal } from './delete-knowledge-base-modal'
export { EditKnowledgeBaseModal } from './edit-knowledge-base-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx
new file mode 100644
index 00000000000..4f957908e4f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx
@@ -0,0 +1,26 @@
+import { Button } from '@sim/emcn'
+import { FILTER_SECTION_LABEL_CLASS } from '@/app/workspace/[workspaceId]/components'
+
+interface KnowledgeFilterHeadingProps {
+ title: string
+ active: boolean
+ onClear: () => void
+}
+
+/** Heading and conditional clear action for a knowledge-list filter. */
+export function KnowledgeFilterHeading({ title, active, onClear }: KnowledgeFilterHeadingProps) {
+ return (
+
+ {title}
+ {active && (
+
+ )}
+
+ )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.test.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.test.tsx
index a03d3348d72..ab97f699aa9 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.test.tsx
@@ -96,7 +96,8 @@ vi.mock('@/connectors/registry', () => ({ CONNECTOR_META_REGISTRY: {} }))
vi.mock('@/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal', () => ({
BaseTagsModal: () => null,
}))
-vi.mock('@/app/workspace/[workspaceId]/knowledge/components', () => ({
+vi.mock('@/app/workspace/[workspaceId]/knowledge/components', async () => ({
+ ...(await import('@/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading')),
CreateBaseModal: () => null,
EditKnowledgeBaseModal: () => null,
KnowledgeListContextMenu: () => null,
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index 994b3d820d9..3d813532aca 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -2,7 +2,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { ChipSelectOption } from '@sim/emcn'
-import { Button, ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
+import { ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
import { createLogger } from '@sim/logger'
import { getErrorMessage } from '@sim/utils/errors'
@@ -23,7 +23,6 @@ import type {
} from '@/app/workspace/[workspaceId]/components'
import {
EMPTY_CELL_PLACEHOLDER,
- FILTER_SECTION_LABEL_CLASS,
OwnerAvatar,
ownerCell,
Resource,
@@ -70,6 +69,7 @@ import {
DeleteKnowledgeBaseModal,
EditKnowledgeBaseModal,
KnowledgeBaseContextMenu,
+ KnowledgeFilterHeading,
KnowledgeListContextMenu,
} from '@/app/workspace/[workspaceId]/knowledge/components'
import KnowledgeLoading from '@/app/workspace/[workspaceId]/knowledge/loading'
@@ -1334,18 +1334,11 @@ function KnowledgeContent() {
() => (
-
- Connectors
- {connectorFilter.length > 0 && (
-
- )}
-
+
0}
+ onClear={() => setConnectorFilter([])}
+ />
-
- Content
- {contentFilter.length > 0 && (
-
- )}
-
+
0}
+ onClear={() => setContentFilter([])}
+ />
{memberOptions.length > 0 && (
-
- Owner
- {ownerFilter.length > 0 && (
-
- )}
-
+
0}
+ onClear={() => setOwnerFilter([])}
+ />