Integrate Career and Language Tabs into Unified Adaptive Learning UI

[bhasker1315]

As a developer working on the Adaptive Learning project, I want to integrate two intelligent modules—Career Guidance and Language Learning—into the unified Panel-based user interface. Both modules are powered by agent-based conversations and finite state machines (FSMs). The Career tab will simulate a virtual counselor to guide students through job exploration, certification suggestions, and skill gap analysis. The Language tab will allow students to select a language from a dropdown and learn it interactively through a chat-based experience.

The new tabs will be added to the panel_gui_tabs.py interface and should work independently while sharing the same unified layout.

Acceptance Criteria

• Both Career and Language tabs appear in the Panel UI
• CareerFSM and TeachMeFSM are initialized and respond as expected
• Dynamic agents are created based on selected language in the Language tab
• All tab logic is isolated and responsive
• Application runs via python -m src.UI.panel_gui_tabs without errors
• Code is well-documented and reviewed by a peer or professor

Conditions of Satisfaction

Tab Structure

• Condition: Career and Language tabs appear
• Test: Launch app and check for tab labels
• Satisfaction: Tabs are present and clickable

FSM Integration

• Condition: FSMs (CareerFSM, TeachMeFSM) control logic
• Test: Run user flows through both tabs
• Satisfaction: Transitions and speaker logic verified via logs

Agent Initialization

• Condition: Agents are initialized for each tab
• Test: Log output and interactive behavior
• Satisfaction: 20+ agents for Career; dynamic agents for Language work as expected

Independent Tab Operation

• Condition: Tabs work without interference
• Test: Test each tab's functionality separately
• Satisfaction: No cross-tab data leaks or crashes

Peer Review

• Condition: Code and functionality reviewed
• Test: Share with peers/professor
• Satisfaction: Positive feedback and no blockers

Definition of Done

• Both tabs are functional and appear in pn.Tabs() layout
• Career tab includes buttons for certifications, job search, and more
• Language tab uses dropdown for language selection and dynamic chat agents
• FSMs (CareerFSM, TeachMeFSM) are registered and operational
• App runs locally without any errors
• All code is commented and reflected in README
• Peer or professor has reviewed and approved the submission

Tasks & Subtasks with Estimates

ALP.11 Add Career and Language Tabs (15 hours) – #446

ALP.11.1 Create and Configure Career Tab (6 hours) – #446

• ALP.11.1.1 Create career_tab.py
• ALP.11.1.2 Set up CareerFSM with agent registration
• ALP.11.1.3 Add Panel UI and chat interface for career exploration
• ALP.11.1.4 Add buttons for job finder, gap analysis, certification, etc.

ALP.11.2 Create and Configure Language Tab (6 hours) – #446

• ALP.11.2.1 Create language_tab.py
• ALP.11.2.2 Add dropdown for selecting a language
• ALP.11.2.3 Initialize dynamic agents using create_agents(language)
• ALP.11.2.4 Register TeachMeFSM and connect to ReactiveChat

ALP.11.3 Final Integration and Validation (3 hour) – #446

• ALP.11.3.1 Import both tabs in panel_gui_tabs.py
• ALP.11.3.2 Test full app for UI alignment and logic
• ALP.11.3.3 Add docstrings and update README with new tab usage