feat: Add collapsible groups for AI chat conversations
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

Implemented mobile-first collapsible conversation groups with full group management:

Backend Changes:
- Added PATCH /api/v1/ai/conversations/:id/group endpoint to move conversations
- Added GET /api/v1/ai/groups endpoint to list user groups
- Added updateConversationGroup() service method (ai.service.ts:687-710)
- Added getConversationGroups() service method (ai.service.ts:712-730)
- Uses existing metadata field in AIConversation entity (no migration needed)
- Updated getUserConversations() to include metadata field

Frontend Changes:
- Implemented collapsible group headers with Folder/FolderOpen icons
- Added organizeConversations() to group by metadata.groupName (lines 243-271)
- Added toggleGroupCollapse() for expand/collapse functionality (lines 273-283)
- Implemented context menu with "Move to Group" and "Delete" options (lines 309-320)
- Created Move to Group dialog with existing groups list (lines 858-910)
- Created Create New Group dialog with text input (lines 912-952)
- Mobile-first design with touch-optimized targets and smooth animations
- Right-click (desktop) or long-press (mobile) for context menu
- Shows conversation count per group in header
- Indented conversations (pl: 5) show visual hierarchy
- Groups sorted alphabetically with "Ungrouped" always last

Component Growth:
- Backend: ai.controller.ts (+35 lines), ai.service.ts (+43 lines)
- Frontend: AIChatInterface.tsx (663 → 955 lines, +292 lines)

Mobile UX Enhancements:
- MoreVert icon on mobile vs Delete icon on desktop
- Touch-optimized group headers (larger padding)
- Smooth Collapse animations (timeout: 'auto')
- Context menu replaces inline actions on small screens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-02 22:29:14 +00:00
parent 9fab99da1d
commit e860b3848e
4 changed files with 448 additions and 34 deletions

View File

@@ -42,6 +42,7 @@ This document identifies features specified in the documentation that are not ye
-**Conversation Memory** (October 2, 2025): Semantic search with embeddings, conversation summarization, memory retrieval
-**Multi-Language AI** (October 2, 2025): 5 languages (en/es/fr/pt/zh) with localized prompts and safety responses
-**AI Chat Conversation History** (October 2, 2025): Full conversation management UI with sidebar, conversation switching, deletion, and persistence
-**AI Chat Collapsible Groups** (October 2, 2025): Mobile-first collapsible conversation groups with custom group management, context menus, and drag-to-organize
### Key Gaps Identified
- **Backend**: 35 features not implemented (19 completed ✅)
@@ -312,7 +313,51 @@ This document identifies features specified in the documentation that are not ye
- Priority: Medium ✅ **COMPLETE**
- Impact: Users can access chat history, switch conversations, and manage past conversations
6. **Prompt Injection Protection** ✅ COMPLETED (Previously)
6. **AI Chat Collapsible Groups** ✅ COMPLETED (October 2, 2025)
- Status: **IMPLEMENTED**
- Current: Mobile-first collapsible conversation groups with custom group management
- Implemented:
* **Backend Group API** (ai.controller.ts, ai.service.ts):
- PATCH /api/v1/ai/conversations/:id/group - Move conversation to group
- GET /api/v1/ai/groups - Get all user groups
- updateConversationGroup(userId, conversationId, groupName) service method
- getConversationGroups(userId) service method
- Uses existing metadata field in AIConversation entity
* **Collapsible Group UI** (AIChatInterface.tsx:243-271):
- organizeConversations() groups conversations by metadata.groupName
- Sorts groups alphabetically with "Ungrouped" always last
- toggleGroupCollapse(groupName) manages collapsed state
- Folder/FolderOpen icons show expand/collapse state
- Shows conversation count per group
* **Context Menu** (AIChatInterface.tsx:309-320, 820-856):
- Right-click or long-press on conversation (mobile)
- "Move to Group" option
- "Delete" option
- Mobile shows MoreVert icon, desktop shows Delete icon
* **Move to Group Dialog** (AIChatInterface.tsx:858-910):
- Lists existing groups
- "Ungrouped" option to remove from group
- "Create New Group" button
- handleMoveToGroup() updates conversation metadata
* **Create New Group Dialog** (AIChatInterface.tsx:912-952):
- Text input for new group name
- Enter key submits
- Validates non-empty group name
- handleCreateNewGroup() creates group and moves conversation
* **Mobile-First Design**:
- Touch-optimized group headers (py: 1, larger touch targets)
- Smooth Collapse animations (timeout: 'auto')
- Context menu replaces inline actions on mobile
- Hamburger menu for drawer access
- Indented conversations (pl: 5) show hierarchy
- Files:
* Backend: `ai.controller.ts` (+35 lines), `ai.service.ts` (+43 lines)
* Frontend: `AIChatInterface.tsx` (663 → 955 lines, +292 lines)
- Backend APIs: PATCH /api/v1/ai/conversations/:id/group, GET /api/v1/ai/groups
- Priority: Medium ✅ **COMPLETE**
- Impact: Organized conversation management with collapsible groups, mobile-optimized UX
7. **Prompt Injection Protection** ✅ COMPLETED (Previously)
- Status: **IMPLEMENTED**
- Current: Comprehensive security system with 25+ regex patterns
- Implemented: System manipulation detection, role change blocking, data exfiltration prevention, sanitizeInput() called in chat flow (ai.service.ts:193)