AI Hub UI

Frontend screens, components, and user flows for the AI Hub module.

Route Structure

/ai/config  →  Per-country EnvIA configuration (settings, documents, sandbox)

Requires the menu-ai-hub-config permission. The active country is driven by a cookie (ai-locale) set from the global country selector in the top bar.

Screens

Config (/ai/config)

The single screen of the module. Layout is a full-width vertical stack:

┌─────────────────────────────────────────────────────┐
│ Info banner (when country is selected)               │
│ Warning banner (when no country selected)            │
├─────────────────────────────────────────────────────┤
│ CountrySettingsPanel  (business hours + holidays)    │
├─────────────────────────────────────────────────────┤
│ CountryDocumentsPanel  (MD upload + list)            │
├─────────────────────────────────────────────────────┤
│  col-xl-8                  │  col-xl-4              │
│  EnvIA agent card          │  AgentSandbox          │
│  (read-only metadata)      │  (live chat test)      │
└────────────────────────────┴────────────────────────┘

---

CountrySettingsPanel

Edits business_hours and holidays for the active country.

State badges (header):

Badge	Condition	Meaning
cambios guardados aquí (info)	hasLocalDraft = true	Draft exists in localStorage, not yet synced to backend
cambios sin guardar (warning)	dirty = true	In-memory edits not yet saved

Business hours section:

Two slots: Lun-Vie (weekday) and Sab-Dom (weekend). Each slot takes integer hours 0–23. Setting start = end marks the slot as closed and displays the Cerrado badge. Validation runs before every save.

Holidays section:

Editable paginated list of { date, name } rows (5 per page, configurable to 10 or 25). date must be MM-DD (recurring) or YYYY-MM-DD (normalized to MM-DD on save). Adding a holiday jumps to the last page. Export serializes current state to config-{country}.json.

Draft persistence:

If the backend PATCH fails, the panel writes the current state to localStorage under the key ai-config-country:{ISO}. On next mount, the draft is restored and the info badge is shown. Clicking Descartar removes the draft and reloads from the backend snapshot.

---

CountryDocumentsPanel

Lists, uploads, previews, and deletes Markdown documents indexed for the active country. Legacy PDF documents that already exist in the database are still displayed and previewable.

Document row:

Field	Source
Icon	fa-file-lines (Markdown) / fa-file (other/legacy)
Name	file_name
Size	file_size_bytes (formatted)
Relative time	created_at
Status badge	processing_status: pending / processing / completed / failed

Upload flow:

1. Click Subir or Subir el primero → opens a hidden <input type="file">.
2. Client validates extension (md only) and size (≤ 10 MB).
3. Sends multipart/form-data to POST /ai-hub/api/documents/upload.
4. Panel refreshes the list after upload completes.

Preview flow:

Click Abrir → GET /ai-hub/api/documents/{id}/preview → signed URL (1 h TTL).

• Markdown → window.open(url, '_blank', 'noopener,noreferrer'). The tab opens synchronously to satisfy the browser gesture requirement; the URL is injected once the backend responds.
• PDF (legacy) → PDFViwer component renders inline at the bottom of the card.

Global documents:

Rows with metadata.global = true are filtered out client-side. They are managed by a different surface (cross-country catalog) and should not be edited per-country.

Pagination:

Page size options: 10, 25, 50. Page resets when the country changes or the page size is changed.

---

EnvIA Agent Card

Read-only metadata for the unified support agent.

Field	Value
Name	EnvIA
Description	i18n key ai.hub.config.agent_description
Category badge	i18n key ai.hub.config.agent_category
Status	ai.hub.config.status_online (static)
Attending	Active country name (from useAiLocale)

---

AgentSandbox

Live chat interface for testing the unified support agent against the active country's configuration.

• Calls POST /ai-hub/v1/chat with channel: 'http' and metadata.source: 'admon-sandbox'.
• Each conversation has a stable sessionId (timestamp-based). The conversationId is prefixed with sandbox- and the userId with admon-sandbox-.
• Conversation resets when the active agent or country changes, or when the manager clicks Restart conversation (new sessionId / conversationId so agentic-ai starts a fresh Redis thread).
• Message timestamps use locale.value from useI18n().

---

Service Layer

client/src/services/ai.service.js

Method	HTTP	Path	Description
getCountries()	GET	/ai-hub/v1/countries	Lists countries with businessHours and holidays
updateCountrySettings(code, payload)	PATCH	/ai-hub/v1/countries/{code}	Persists business hours and holidays
getDocuments(countryCode)	GET	/ai-hub/api/documents/{country_code}	Lists documents for a country
uploadDocument(formData)	POST	/ai-hub/api/documents/upload	Uploads Markdown document
getDocumentPreview(id)	GET	/ai-hub/api/documents/{id}/preview	Returns a signed URL
deleteDocument(id)	DELETE	/ai-hub/api/documents/{id}	Deletes document and chunks
chat(payload)	POST	/ai-hub/v1/chat	Sends a sandbox message

---

Module-Specific Components

Component	Path	Description
CountrySettingsPanel	views/ai/components/CountrySettingsPanel.vue	Business hours + holidays editor
CountryDocumentsPanel	views/ai/components/CountryDocumentsPanel.vue	Document list + upload + preview
AgentSandbox	views/ai/components/AgentSandbox.vue	Live chat sandbox
Shared admon components reused: @/components/interface/EmptyState.vue, FilePreview.offcanvas.vue (PDF + Markdown via optional kind), Bootstrap dismissable alerts.

---

User Flows

Editing business hours

Uploading a document

Testing the agent