VetsAI Refactor to Next.js

[aamarin]

---

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

---