6.3 Angular AI Chat Widget: AiService, AiChatComponent, route, and menu

[workcontrolgit]

Summary

• Adds environment.aiEnabled: false to both environment files — AI UI hidden by default for readers without Ollama
• Adds src/app/services/api/ai.service.ts — focused service calling /api/v1/ai/chat and /api/v1/ai/hr-insight
• Adds src/app/routes/ai-chat/ — standalone AiChatComponent with two tabs (General Chat + HR Insights)
• Registers /ai-chat route in app.routes.ts
• Adds smart_toy menu item in menu.json and aiChat translation key in en-US.json

What this enables

Users can interact with the AI assistant directly from the Angular sidebar — no Swagger, no HTTP tools. HR Insights tab surfaces live workforce data answers from Article 6.2.

How to test

1. Set aiEnabled: true in src/environments/environment.ts
2. Run npm start
3. Navigate to http://localhost:4200 → log in → click AI Assistant in sidebar
4. Tab 1: type any question and send — should display AI reply
5. Tab 2: click a suggestion chip or type an HR question — should display data-grounded answer with execution time
6. Set aiEnabled: false → hot-reload → navigate to /ai-chat → should see info banner, not chat UI

Related

• Depends on Article 6.1 (POST /api/v1/ai/chat) and 6.2 (POST /api/v1/ai/hr-insight) endpoints
• Part of AngularNetTutorial Series 6 — AI App Features