Skip to content

VetsAI Refactor to Next.js #26

Open
@aamarin

Description

@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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions