Archon icon indicating copy to clipboard operation
Archon copied to clipboard
verified publisher icon coleam00

feat: implement editable tags for knowledge base items

Open leex279 opened this issue 3 months ago • 1 comments

Summary

Implements simple and focused editable tags functionality for knowledge base items, addressing the feature request in issue #538.

Features Implemented

  • ✅ Inline tag editing: Click any tag to edit it directly on knowledge cards
  • ✅ Add/remove tags: Easy tag management with "+" and "×" buttons
  • ✅ Modal tag editing: Full tag management within edit dialogs
  • ✅ Input validation: Prevents duplicates, empty tags, length limits (50 chars, 20 tags max)
  • ✅ Error handling: Toast notifications with detailed error messages
  • ✅ Keyboard support: Enter to save, Escape to cancel

Simplified Implementation

Based on user feedback, focused on essential functionality by removing:

  • ❌ Bulk tag editor (not needed)
  • ❌ Tag autocomplete suggestions (adds complexity)
  • ❌ Selection mode UI (unnecessary)

This keeps the implementation simple and focused on the core use case: editing tags on individual items.

Technical Implementation

  • EditableTags component: Core inline editing functionality
  • Enhanced EditKnowledgeItemModal: Added tag editing section
  • Updated KnowledgeItemCard: Integrated inline tag editing
  • Service enhancement: updateKnowledgeItemTags method
  • Comprehensive testing: Unit tests for core functionality

User Experience

  1. Individual Editing: Click any tag → edit inline → save with Enter or click outside
  2. Modal Editing: Click pencil icon → edit modal with tag editor section
  3. Validation: Real-time feedback for duplicates, length limits, empty tags
  4. Error Handling: Toast notifications for all operations
  5. Visual feedback: Loading states and success confirmations

Code Quality

✅ Error Handling: Follows Archon Alpha "detailed errors" philosophy
✅ Type Safety: Full TypeScript implementation
✅ Performance: Efficient operations with race condition prevention
✅ Accessibility: Keyboard navigation, focus management
✅ Testing: Unit test coverage for core functionality
✅ Code Review: All issues resolved

API Integration

  • Reuses existing PUT /api/knowledge-items/{source_id} endpoint
  • Tags stored in metadata.tags as JSON arrays (no backend changes needed)
  • Efficient validation and error handling
  • No additional API calls required

Test Plan

  • [x] Individual tag editing (add/edit/remove)
  • [x] Modal tag editing integration
  • [x] API endpoint validation
  • [x] Error handling scenarios
  • [x] Input validation and user feedback
  • [x] Keyboard shortcuts (Enter/Escape)

Database Impact

  • No schema changes required
  • Only updates existing metadata.tags field
  • Maintains backward compatibility

Fixes #538

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Inline tag editing everywhere (cards and edit modal) with validation, keyboard shortcuts, error toasts, and an optimized "tags-only" update path.
  • Refactor
    • Removed multi-item selection and selection toolbar; action controls are always visible and card interactions simplified.
  • Tests
    • Added comprehensive tests covering tag add/edit/remove, validation, and interaction states.

leex279 avatar Sep 07 '25 15:09 leex279

Walkthrough

Adds an EditableTags component and integrates inline tag editing into KnowledgeItemCard and EditKnowledgeItemModal, introduces a tags-only update method in KnowledgeBaseService, adds unit tests for tag editing, and removes selection-mode logic across KnowledgeBasePage and KnowledgeItemCard.

Changes

Cohort / File(s) Summary
Editable Tags Component
archon-ui-main/src/components/knowledge-base/EditableTags.tsx		 New reusable component for inline tag viewing/editing with validation, add/remove/rename, keyboard handling, overflow display, and error surfacing.
Modal Integration
archon-ui-main/src/components/knowledge-base/EditKnowledgeItemModal.tsx		 Adds Tags UI block using EditableTags; manages local tag state, isUpdatingTags flag, change detection to include tags only when changed, and tag error toasts.
Item Card Integration & API Usage
archon-ui-main/src/components/knowledge-base/KnowledgeItemCard.tsx		 Replaces previous tags display with EditableTags; implements async tag updates via service, toasts and error handling, adds isUpdatingTags state, and removes selection-mode props/UI from the component signature.
Service Support
archon-ui-main/src/services/knowledgeBaseService.ts		 Adds updateKnowledgeItemTags(sourceId, tags) that delegates to existing update call with logging and error wrapping.
Tests
archon-ui-main/src/components/knowledge-base/tests/EditableTags.test.tsx		 New unit tests covering rendering, edit lifecycle, add/remove, validation (length/duplicates/trim), overflow, and that onTagsUpdate receives expected arrays.
Page Removal of Selection Mode
archon-ui-main/src/pages/KnowledgeBasePage.tsx		 Removes multi-selection state, handlers, toolbar/shortcuts, selection UI, and updates usage of KnowledgeItemCard to drop selection-related props; GroupCreationModal now receives an empty preselection.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant KIC as KnowledgeItemCard
  participant ET as EditableTags
  participant S as KnowledgeBaseService
  participant API as Backend API

  U->>ET: Click tag / Add / Edit / Remove
  ET->>KIC: onTagsUpdate(updatedTags)
  KIC->>S: updateKnowledgeItemTags(sourceId, updatedTags)
  S->>API: PATCH /knowledge-items/{id} { tags }
  API-->>S: 200 OK
  S-->>KIC: Resolve
  KIC-->>ET: Success (refresh UI)
  KIC-->>U: Toast: Tags updated

  rect rgba(255,230,230,0.4)
    API-->>S: Error
    S-->>KIC: Reject(error)
    KIC-->>ET: onError(error)
    KIC-->>U: Toast: Update failed
  end

sequenceDiagram
  autonumber
  actor U as User
  participant EM as EditKnowledgeItemModal
  participant ET as EditableTags
  participant S as KnowledgeBaseService
  participant API as Backend API

  U->>ET: Edit tags in modal
  ET-->>EM: onTagsUpdate(updatedTags)
  EM->>S: updateKnowledgeItem(sourceId, { tags }) only if changed
  S->>API: PATCH { tags }
  API-->>S: 200 OK
  S-->>EM: Resolve
  EM-->>U: Toast / close modal

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Assessment against linked issues

Objective Addressed Explanation
In-line tag editing in list/grid view [#538] ✅
Edit modal supports modifying tags [#538] ✅
Bulk tag editing across multiple items [#538] ❌ Bulk selection and multi-item edit flows were removed; no bulk-edit implementation present.
Tag suggestions/autocomplete from existing tags [#538] ❌ No autocomplete/suggestion mechanism or existing-tags lookup added.
Validation/normalization (duplicates, trimming, length); backend supports PATCH [#538] ✅

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
Removal of selection-mode props and UI in KnowledgeItemCard (archon-ui-main/src/components/knowledge-base/KnowledgeItemCard.tsx) Selection-mode removal is unrelated to the #538 objectives (tag editing) and removes multi-select APIs/UX.
Removal of selection-state/toolbar/shortcuts in KnowledgeBasePage (archon-ui-main/src/pages/KnowledgeBasePage.tsx) Eliminates multi-selection flows and UI that would be required for bulk tag editing requested in #538.

"I nibble keys and trim each tag,
A purple badge, a gentle drag.
Add, rename, remove — I hop with glee,
My knowledge burrow grows tidy and free.
Tiny paws, big changes — tags for me! 🐇"

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95c13cacec1e4b26d0a2f3127033a8787e63ed97 and c39eac81dd59c3bad8617fa86d30fc27c1600b04.

📒 Files selected for processing (1)
  • archon-ui-main/src/components/knowledge-base/EditableTags.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • archon-ui-main/src/components/knowledge-base/EditableTags.tsx
✨ Finishing Touches
  • [ ] 📝 Generate Docstrings
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch feature/editable-tags-knowledge-base

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Sep 07 '25 15:09 coderabbitai[bot]

@leex279 Should we close this or do you want to reimplement this with the new components?

Wirasm avatar Sep 12 '25 14:09 Wirasm

@Wirasm i will update it. I would also like the "tags" back instead of putting in comma seperated lists.

leex279 avatar Sep 12 '25 14:09 leex279