valenti/vocero-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize developer text and identifiers in English

Browse Source
This commit is contained in:
alvaro
2026-10-05 10:13:25 -03:00
parent 6b8c27fd76
commit dfc1f663c7
20 changed files with 933 additions and 1142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
s2s-client/style.css
+38 -40
View File
@@ -143,11 +143,10 @@ body::after {
}
/* ─── Overlay unlocker TALK mode (S2S_START_SESSION_MODE=TALK) ───
Cattura QUALSIASI primo tap/click dell'utente sulla pagina, perché
i browser bloccano getUserMedia() fuori da una user gesture. Senza
questo layer il doStart() del setTimeout falliva e non si sentiva
il greet. Sopra TUTTO tranne i modali <dialog> (z-index auto di dialog
vince). */
Capture the first tap/click anywhere on the page because browsers block
getUserMedia() outside a user gesture. Without this layer, doStart() from
setTimeout failed and the greeting was silent. Above all content except
<dialog> modals, whose top layer takes priority. */
.talk-unlocker {
position: fixed;
inset: 0;
@@ -466,7 +465,7 @@ a:hover {
transform: translateY(-0.5px);
}
/* ── User avatar circle (instead of old "Utente: Nome" text) ──
/* ── User avatar circle (replaces the old user-name text) ──
* - perfectly round badge, matches the 42px icon-btn size in the topbar
* - glass + brand gradient 1px border
* - two uppercase initials (Alessandro Valenti → AV), bold white
@@ -593,8 +592,8 @@ a:hover {
height: 36px;
padding: 0 12px;
}
/* ── Footer (narrow viewport): riduci tracking per non farlo andare
* a capo in malo modo; padding compatto + line-height maggiore */
/* ── Footer (narrow viewport): reduce tracking to avoid awkward wrapping;
* use compact padding and a taller line height. */
.app-footer {
padding: 8px 14px 14px;
}
@@ -2425,7 +2424,7 @@ body.cam-on .footer {
`margin-right:22px` on `.hist-msg.assistant` and `margin-left:6px` on `.hist-msg.user`
(hard rules on the bubbles themselves so nothing can hide them).
Bottom padding BUMP 2026-09-04: 96 → 160px. The screenshot showed the last
assistant line "...Necesitas más detalles o" cut clean by the footer. 160px
assistant line asking for more details cut cleanly by the footer. 160px
inside the scroll container is 5× the real footer glass height; after we
snap scrollTop to the absolute max, the last bubble terminates at the TOP
of a 160px-high transparent region → fully visible, fully above the floating
@@ -2460,7 +2459,7 @@ body.cam-on .footer {
background-clip: content-box;
}
/* ─── Chat input row (bottom of chat panel: "sobre el botón") ──────── */
/* ─── Chat input row (bottom of chat panel, above the button) ──────── */
/* NOTE: currently HIDDEN in index.html. Kept seamless here so if/when we
re-enable it the form melts visually into the page bg, no separator frame. */
.chat-form {
@@ -3474,20 +3473,20 @@ button[data-reports-sidebar-toggle] {
flex: none;
}
/* Per-chip tint cycles (keyword-based, if no data attribute → fallback brand) */
.reports-hint .reports-list li[data-tint="mortalidad"] { background: linear-gradient(180deg, color-mix(in srgb, #ff6a75 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #ff6a75 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="mortalidad"]::before { background: #ff6a75; box-shadow: 0 0 8px 0 #ff6a75aa; }
.reports-hint .reports-list li[data-tint="metricas"] { background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #22d3ee 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="metricas"]::before { background: #22d3ee; box-shadow: 0 0 8px 0 #22d3eeaa; }
.reports-hint .reports-list li[data-tint="diario"] { background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="diario"]::before { background: #8b5cf6; box-shadow: 0 0 8px 0 #8b5cf6aa; }
.reports-hint .reports-list li[data-tint="productos"] { background: linear-gradient(180deg, color-mix(in srgb, #ec4899 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #ec4899 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="productos"]::before { background: #ec4899; box-shadow: 0 0 8px 0 #ec4899aa; }
.reports-hint .reports-list li[data-tint="mortality"] { background: linear-gradient(180deg, color-mix(in srgb, #ff6a75 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #ff6a75 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="mortality"]::before { background: #ff6a75; box-shadow: 0 0 8px 0 #ff6a75aa; }
.reports-hint .reports-list li[data-tint="metrics"] { background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #22d3ee 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="metrics"]::before { background: #22d3ee; box-shadow: 0 0 8px 0 #22d3eeaa; }
.reports-hint .reports-list li[data-tint="daily"] { background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="daily"]::before { background: #8b5cf6; box-shadow: 0 0 8px 0 #8b5cf6aa; }
.reports-hint .reports-list li[data-tint="products"] { background: linear-gradient(180deg, color-mix(in srgb, #ec4899 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #ec4899 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="products"]::before { background: #ec4899; box-shadow: 0 0 8px 0 #ec4899aa; }
.reports-hint .reports-list li[data-tint="synapse"] { background: linear-gradient(180deg, color-mix(in srgb, #fbbf24 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #fbbf24 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="synapse"]::before { background: #fbbf24; box-shadow: 0 0 8px 0 #fbbf24aa; }
.reports-hint .reports-list li[data-tint="supply"] { background: linear-gradient(180deg, color-mix(in srgb, #34d399 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #34d399 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="supply"]::before { background: #34d399; box-shadow: 0 0 8px 0 #34d399aa; }
.reports-hint .reports-list li[data-tint="finanzas"] { background: linear-gradient(180deg, color-mix(in srgb, #22c55e 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #22c55e 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="finanzas"]::before { background: #22c55e; box-shadow: 0 0 8px 0 #22c55eaa; }
.reports-hint .reports-list li[data-tint="finance"] { background: linear-gradient(180deg, color-mix(in srgb, #22c55e 14%, rgba(20,22,32,.55)), rgba(20,22,32,.55)); border-color: color-mix(in srgb, #22c55e 35%, var(--border)); }
.reports-hint .reports-list li[data-tint="finance"]::before { background: #22c55e; box-shadow: 0 0 8px 0 #22c55eaa; }
.reports-hint .reports-list li:hover {
transform: translateY(-1px) scale(1.01);
border-color: color-mix(in srgb, var(--brand) 55%, var(--border-strong));
@@ -4055,10 +4054,10 @@ button[data-reports-sidebar-toggle] {
opacity: 0.5;
}
/* ─── Webcam preview (camera tool) — HIDDEN BY DEFAULT OGGI ──────────────────
/* ─── Webcam preview (camera tool) — CURRENTLY HIDDEN BY DEFAULT ─────────────
* Floating self-view, bottom-left. Mirrored for the user; the frame sent to
* the model is drawn un-mirrored. Markup esiste per riattivazione futura.
* Per usarlo: togli hidden su cam-pip in index.html + scommenta listener in main.js. */
* the model is drawn un-mirrored. Markup is retained for future reactivation.
* To enable it, remove hidden from cam-pip in index.html and restore the main.js listener. */
.cam-pip {
position: fixed;
left: 20px;
@@ -4285,12 +4284,12 @@ html[data-theme="white"] .app-column {
margin-left: 0 !important;
}
/* ─────────────────────────────────────────────────────────────────────
USER FIX 2026-09-10 "la chat deve apparire solo nel chat box":
USER FIX 2026-09-10: show the conversation only inside the chat box.
The dark theme renders a SECOND ephemeral transcript into #bubble-stack
(floating anchored top-right — the grey/light blue bubbles the user
circled in red with an X on the last screenshot). Since the white
mobile theme shows ALL conversation exclusively inside the persistent
"Conversación" card (chat-history inside .chat-panel bounded 58dvh),
conversation card (chat-history inside .chat-panel bounded 58dvh),
we kill the parallel floating bubble stack HARD in white theme — both
the ID and the class, zero width/height/transform so it can't leave
layout artifacts. */
@@ -4543,8 +4542,8 @@ html[data-theme="white"] .topbar-right {
display: none;
}
/* ── Status card: "Listo para conversar / Informes, análisis..." ───────
User request 2026-09-10 "nascondi box listo para conversar" — hide the
/* ── Status card: ready to converse, reports and analysis ─────────────
User request 2026-09-10: hide the ready-to-converse box. Hide the
entire status card in white theme (the grey rounded banner with the
chart icon and arrow between topbar and mic stage, which the user
circled with a red X). Previously we hid only the right chevron; now
@@ -4820,7 +4819,7 @@ html[data-theme="white"] .white-stop-btn svg {
flex: none;
}
/* ── Quick actions — 3 pills (Resumen / Consultar datos / Crear respuesta).
/* ── Quick actions — 3 pills (summary / data lookup / response draft).
User request 2026-09-10 "nascondi le cose in rosso": all 3 quick action
pills are circled in red → hide the entire quick-actions container. */
html[data-theme="white"] .quick-actions {
@@ -4830,8 +4829,8 @@ html[data-theme="white"] .quick-action-btn {
display: none !important;
}
/* ── Chat panel (Conversación card): white rounded card + "En línea" pill.
CRITICAL SCROLL FIX 2026-09-10 (per "non fa lo scrolling della chatbox"):
/* ── Chat panel: white rounded conversation card + online status pill.
CRITICAL SCROLL FIX 2026-09-10: the chat box was not scrolling.
The previous white-theme override set `flex: 0 0 auto` + `max-height: none`
which removed every vertical constraint on the chat panel → it grew beyond
the viewport edge → overflow on the *page* body instead of the chat
@@ -4912,7 +4911,7 @@ html[data-theme="white"] .chat-panel-header {
border-bottom-width: 1px !important;
text-decoration: none !important;
}
/* "En línea" status pill — green dot + text */
/* Online status pill — green dot + text */
html[data-theme="white"] .chat-status-pill {
display: inline-flex;
align-items: center;
@@ -4940,10 +4939,9 @@ html[data-theme="white"] .chat-status-dot {
50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
}
/* ── Chat header actions row: contiene "En línea" status pill + Export button.
Aggiunto 2026-09-23: bottone download conversación.
Layout orizzontale, allineato a destra, auto-wrap con gap per evitare
overflow su schermi stretti. */
/* ── Chat header actions row: online status pill + conversation export button.
Added 2026-09-23. Horizontal, right-aligned layout with wrapping and gaps
to avoid overflow on narrow screens. */
.chat-header-actions {
display: inline-flex;
align-items: center;
@@ -4953,7 +4951,7 @@ html[data-theme="white"] .chat-status-dot {
flex-wrap: wrap;
min-width: 0;
}
/* Botón export conversación (icon button baseline: coerente con altri .icon-btn). */
/* Conversation export button, consistent with other .icon-btn controls. */
.chat-export-btn {
position: relative;
display: inline-flex;
@@ -4990,14 +4988,14 @@ html[data-theme="white"] .chat-status-dot {
pointer-events: none;
flex: 0 0 auto;
}
/* Feedback OK: verde temporáneo al exportar correctamente. */
/* Successful export feedback: temporarily green. */
.chat-export-btn.chat-export-ok {
background: rgba(22, 163, 74, 0.18) !important;
border-color: rgba(22, 163, 74, 0.34) !important;
color: #22c55e !important;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}
/* Feedback vacía: pulse ámbar (ningún mensaje para exportar). */
/* Empty export feedback: amber pulse when there are no messages. */
.chat-export-btn.chat-export-empty {
background: rgba(245, 158, 11, 0.18) !important;
border-color: rgba(245, 158, 11, 0.34) !important;
@@ -5039,7 +5037,7 @@ html[data-theme="white"] .chat-export-btn.chat-export-empty {
}
/* ──────────────────────────────────────────────────
THE SCROLLABLE HISTORY BOX (root cause of "non scorre")
THE SCROLLABLE HISTORY BOX (root cause of the scrolling failure)
Before: max-height:none. Now it's a flex item with flex:1 1 auto inside
.chat-panel-inner, which has a bounded 100% height of its parent.
min-height:0 is MANDATORY — without it, flex column children never shrink
@@ -5213,7 +5211,7 @@ html[data-theme="white"] #bubble-stack .bubble.user::before {
}
/* 6) META label "name HH:MM" on the same single line, ONE pseudo-element.
──── USER FIX 2026-09-10 "perche mette sempre Emilio" ────
──── USER FIX 2026-09-10: remove the hardcoded user name ────
The previous iteration hardcoded the Spanish names "Vocero" (assistant)
and "Emilio" (user) plus a fake "16:14" timestamp. Instead we now read
BOTH values dynamically from data attributes written by ui/chat.js at the