Open
Description
Ticket Title: Refactor and Migrate VetsAI to Next.js
Priority: Medium
Assigned To: Andre Marin
Status: To Do
Description
Refactor the VetsAI Python/Streamlit application into TypeScript and integrate it as a feature of the VWC Next.js application. This migration should maintain all existing functionality and alignment with VWC's Next.js stack.
The current application includes:
- A Streamlit-based chat interface with session state management.
- A military job code translation system (MOS, AFSC, RATE) that maps to civilian career paths.
- AI-assisted career guidance powered by OpenAI GPT-4.
- A feedback collection system that stores JSON-structured responses.
- Custom styling based on VWC brand colors.
Acceptance Criteria
1. Military Job Code Translation Service
- Migrate the job code translation logic to TypeScript.
- Preserve the current job code database structure and parsing logic.
- Ensure fallback recommendations for unrecognized codes are retained.
- Convert Python dictionary-based data structures into TypeScript interfaces.
- Maintain user session context for translations.
2. Chat System
- Recreate the Streamlit chat interface in Next.js components.
- Implement equivalent session state management in the Next.js framework.
- Preserve OpenAI integration, including current parameters and handling.
- Retain support for command-handling shortcuts (
/mos
,/afsc
,/rate
). - Ensure chat export functionality remains in JSON format.
3. Feedback System
- Replicate the feedback collection mechanism in TypeScript.
- Maintain the current data structure (timestamp, session ID, rating, text).
- Transition Python logging to a TypeScript-compatible logging solution.
- Ensure the system continues to store feedback in a JSON format.
4. UI/UX Requirements
- Apply VWC brand styling using #091f40, #c5203e, and #ffffff.
- Convert the Streamlit sidebar into a responsive Next.js component.
- Preserve the current SVG logo and existing chat input styling.
5. Testing Requirements
Ensure comprehensive testing of critical components:
- Military Job Code Translation:
- Test coverage: 80%
- Key areas: Job code parsing, category mapping, fallback recommendations.
- Chat System:
- Test coverage: 80%
- Key areas: Message handling, command processing, OpenAI integration, chat exports.
Deadline
January 15, 2024
Proposed Folder Structure
Proposed Feature-Based Directory Structure:
src/
├── features/
│ └── vetsAi/ # VetsAI Feature Module
│ ├── api/ # API Routes
│ │ ├── chat/
│ │ │ ├── messages.ts # Chat message handling
│ │ │ └── history.ts # Chat history management
│ │ ├── military/
│ │ │ └── translate.ts # Job code translation endpoint
│ │ └── feedback/
│ │ └── submit.ts # Feedback submission handling
│ ├── components/ # UI Components
│ │ ├── Chat/
│ │ │ ├── ChatInput.tsx
│ │ │ ├── ChatMessage.tsx
│ │ │ └── ChatHistory.tsx
│ │ ├── Military/
│ │ │ ├── CodeTranslator.tsx
│ │ │ └── CareerPath.tsx
│ │ └── Feedback/
│ │ └── FeedbackForm.tsx
│ ├── services/ # Core Business Logic
│ │ ├── military/
│ │ │ ├── jobCodes.ts # Job code processing
│ │ │ └── mapping.ts # Career path mapping
│ │ ├── chat/
│ │ │ └── openai.ts # OpenAI integration
│ │ └── feedback/
│ │ └── storage.ts # Feedback processing
│ └── lib/ # Shared Utilities
│ ├── constants/
│ │ ├── military.ts # Military-specific constants
│ │ └── styles.ts # VWC brand colors and themes
│ ├── types/
│ │ ├── military.ts # Military data types
│ │ ├── chat.ts # Chat-related types
│ │ └── feedback.ts # Feedback types
│ └── utils/
│ ├── logging.ts # Logging utilities
│ └── session.ts # Session management helpers
Metadata
Metadata
Assignees
Labels
No labels