Phase 6: Frontend Migration

[manavgup]

Phase 6: Frontend Migration

Parent Issue: #539 - Conversation System Refactoring
Depends On: Phase 5 (Testing & Validation)
Estimated Effort: 2-3 days

---

Objective

Migrate frontend to use the unified conversation API from Phase 4, removing all references to deprecated endpoints.

Current State

Frontend Components Using Old APIs:

• React conversation components
• Chat interface components
• Message list components
• Session management UI
• API client/hooks

---

Tasks

1. API Client Updates

• Audit all API calls in frontend codebase
• Update API client to use unified endpoints
• Remove references to deprecated chat_router endpoints
• Update TypeScript types for new response formats
• Add error handling for new API responses

2. Component Migration

• Update conversation list components
• Update message display components
• Update session management components
• Update chat interface
• Update any summarization UI
• Ensure backward compatibility during migration

3. State Management Updates

• Update Redux/state slices for conversations
• Update API hooks (React Query/SWR)
• Update WebSocket handlers (if applicable)
• Test state persistence
• Verify cache invalidation works correctly

4. UI Testing

• Update all frontend unit tests
• Add integration tests for API calls
• Test error boundary handling
• Test loading states
• Test empty states
• Manual UI testing

5. E2E Tests

• Create conversation E2E tests
• Send message E2E tests
• List sessions E2E tests
• Delete conversation E2E tests
• Summarization E2E tests

---

Success Criteria

• ✅ All frontend API calls use unified conversation API
• ✅ No references to deprecated endpoints
• ✅ All TypeScript types updated
• ✅ All frontend tests passing
• ✅ E2E tests covering main user flows
• ✅ No console errors or warnings
• ✅ Performance maintained or improved
• ✅ UI/UX unchanged from user perspective

---

Files to Update

Frontend API Client

• frontend/src/api/conversation.ts (update endpoints)
• frontend/src/api/chat.ts (remove or migrate)
• frontend/src/types/conversation.ts (update types)

Components

• frontend/src/components/Conversation/*.tsx
• frontend/src/components/Chat/*.tsx
• frontend/src/pages/ConversationPage.tsx

State/Hooks

• frontend/src/hooks/useConversation.ts
• frontend/src/store/conversationSlice.ts

Tests

• frontend/src/**/__tests__/*.test.tsx
• frontend/e2e/conversation.spec.ts

---

Migration Checklist

• Identify all components using old API
• Create migration plan with dependency order
• Update API client first
• Migrate components incrementally
• Test each component after migration
• Update E2E tests
• Deploy to staging for testing
• Get QA approval
• Deploy to production

---

Rollback Plan

If issues arise:

• Feature flag for new vs old API
• Ability to switch back to deprecated endpoints
• Monitoring for increased error rates
• Quick rollback procedure documented

---

Related Issues

• Refactor conversation system: eliminate 55% redundancy and fix N+1 queries #539 - Parent: Conversation System Refactoring
• Phase 4: Conversation Router Unification #558 - Phase 4: Router Unification (dependency)
• Phase 5: Testing & Validation (90%+ Coverage) #559 - Phase 5: Testing & Validation (dependency)