fix(kb-tags): ui fixes, delete persistence for doc page header (#841)

* fix deletion of tags + refactor next slot calc

* fix kb tag filters count ui

apps/sim/app/workspace/[workspaceId]/knowledge/components/document-tag-entry/document-tag-entry.tsx

@@ -77,9 +77,19 @@ export function DocumentTagEntry({
     return TAG_SLOTS[0] // Fallback to first slot if all are used
   }
 
-  const handleRemoveTag = (index: number) => {
+  const handleRemoveTag = async (index: number) => {
     const updatedTags = tags.filter((_, i) => i !== index)
     onTagsChange(updatedTags)
+
+    // Persist the changes if onSave is provided
+    if (onSave) {
+      try {
+        await onSave(updatedTags)
+      } catch (error) {
+        // Handle error silently - the UI will show the optimistic update
+        // but the user can retry if needed
+      }
+    }
   }
 
   // Open modal to edit tag
@@ -110,8 +120,12 @@ export function DocumentTagEntry({
     if (!editForm.displayName.trim()) return
 
     try {
+      // Calculate slot once at the beginning
+      const targetSlot =
+        editingTagIndex !== null ? tags[editingTagIndex].slot : getNextAvailableSlot()
+
       if (editingTagIndex !== null) {
-        // Editing existing tag
+        // Editing existing tag - use existing slot
         const updatedTags = [...tags]
         updatedTags[editingTagIndex] = {
           ...updatedTags[editingTagIndex],
@@ -121,10 +135,9 @@ export function DocumentTagEntry({
         }
         onTagsChange(updatedTags)
       } else {
-        // Creating new tag - calculate slot once
-        const newSlot = getNextAvailableSlot()
+        // Creating new tag - use calculated slot
         const newTag: DocumentTag = {
-          slot: newSlot,
+          slot: targetSlot,
           displayName: editForm.displayName,
           fieldType: editForm.fieldType,
           value: editForm.value,
@@ -140,9 +153,6 @@ export function DocumentTagEntry({
 
       if (!existingDefinition) {
         // Use the same slot for both tag and definition
-        const targetSlot =
-          editingTagIndex !== null ? tags[editingTagIndex].slot : getNextAvailableSlot()
-
         const newDefinition: TagDefinitionInput = {
           displayName: editForm.displayName,
           fieldType: editForm.fieldType,
@@ -174,7 +184,7 @@ export function DocumentTagEntry({
             : [
                 ...tags,
                 {
-                  slot: getNextAvailableSlot(),
+                  slot: targetSlot,
                   displayName: editForm.displayName,
                   fieldType: editForm.fieldType,
                   value: editForm.value,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -144,11 +144,13 @@ export function KnowledgeTagFilters({
   }
 
   if (isPreview) {
+    const appliedFilters = filters.filter((f) => f.tagName.trim() && f.tagValue.trim()).length
+
     return (
       <div className='space-y-1'>
         <Label className='font-medium text-muted-foreground text-xs'>Tag Filters</Label>
         <div className='text-muted-foreground text-sm'>
-          {filters.length > 0 ? `${filters.length} filter(s) applied` : 'No filters'}
+          {appliedFilters > 0 ? `${appliedFilters} filter(s) applied` : 'No filters'}
         </div>
       </div>
     )
@@ -359,7 +361,7 @@ export function KnowledgeTagFilters({
           {/* Filter count indicator */}
           {(() => {
             const appliedFilters = filters.filter(
-              (f) => f.tagName.trim() || f.tagValue.trim()
+              (f) => f.tagName.trim() && f.tagValue.trim()
             ).length
             return (
               <div className='text-muted-foreground text-xs'>