Andrei
e860b3848e
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 is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.