i18n: live-swap chat sidebar labels on language toggle
The strategic log content already refreshes via HTMX on lang-changed
(server-side translation lookup), but the chat sidebar's static labels
— title, hint, helper lede, textarea placeholder, Send button — were
baked into the HTML by Jinja at page render and only updated after a
full reload.
Add a tiny client-side i18n dictionary (CASSANDRA_I18N) plus
applyI18n(lang) in base.html. cassandraSetLang() now calls
applyI18n(newLang) right after the language PATCH succeeds and before
firing the HTMX triggers, so labels swap in step with the AI content.
Convention: <element data-i18n="key">…</element> sets textContent;
<input data-i18n-placeholder="key" …> sets .placeholder. Initial
render still goes through the existing {% if user_lang == 'it' %}
Jinja blocks so there's no flash of English on page load for IT users
— applyI18n is a no-op until the toggle is clicked.
Only the chat sidebar has bindings today. Adding more labels later is
a matter of dropping a key into the dict and tagging the element.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
48f022b71b
commit
fca05aef7a
2 changed files with 41 additions and 15 deletions
|
|
@ -154,6 +154,40 @@
|
||||||
try { localStorage.setItem('cassandra.theme', newTheme); } catch (e) {}
|
try { localStorage.setItem('cassandra.theme', newTheme); } catch (e) {}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Static-label i18n dictionary. AI-generated content is re-fetched via
|
||||||
|
// HTMX (server-side translation), but plain UI labels are baked into
|
||||||
|
// the HTML at render time. This dict + applyI18n() below let the
|
||||||
|
// language toggle swap labels live without a page refresh.
|
||||||
|
// Convention: <element data-i18n="key">… (sets textContent),
|
||||||
|
// <element data-i18n-placeholder="key" placeholder="…"> (sets .placeholder).
|
||||||
|
// First-render correctness is handled by the template's
|
||||||
|
// {% if user_lang == 'it' %} block — applyI18n only kicks in on
|
||||||
|
// subsequent toggle events.
|
||||||
|
window.CASSANDRA_I18N = {
|
||||||
|
'chat.title': { en: 'Ask Cassandra',
|
||||||
|
it: 'Chiedi a Cassandra' },
|
||||||
|
'chat.hint': { en: 'grounded on the latest log + live data',
|
||||||
|
it: "basato sull'ultimo log + dati in tempo reale" },
|
||||||
|
'chat.lede': { en: "Ask about today's analysis. The model sees the latest strategic log, live market readings across all groups, and the last 24h of thesis-filtered headlines. Refresh wipes this conversation.",
|
||||||
|
it: "Fai domande sull'analisi di oggi. Il modello vede l'ultimo log strategico, le quotazioni di mercato in tempo reale per tutti i gruppi e le ultime 24h di titoli filtrati per tesi. Un refresh della pagina cancella questa conversazione." },
|
||||||
|
'chat.placeholder': { en: 'e.g. why is the defence sleeve flat through Hormuz?',
|
||||||
|
it: 'es. perché il comparto difesa è piatto nonostante Hormuz?' },
|
||||||
|
'chat.send': { en: 'Send',
|
||||||
|
it: 'Invia' },
|
||||||
|
};
|
||||||
|
window.cassandraApplyI18n = function (lang) {
|
||||||
|
document.querySelectorAll('[data-i18n]').forEach(function (el) {
|
||||||
|
var key = el.getAttribute('data-i18n');
|
||||||
|
var entry = window.CASSANDRA_I18N[key];
|
||||||
|
if (entry && entry[lang] != null) el.textContent = entry[lang];
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(function (el) {
|
||||||
|
var key = el.getAttribute('data-i18n-placeholder');
|
||||||
|
var entry = window.CASSANDRA_I18N[key];
|
||||||
|
if (entry && entry[lang] != null) el.placeholder = entry[lang];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
window.cassandraSetLang = async function (newLang) {
|
window.cassandraSetLang = async function (newLang) {
|
||||||
var pill = document.getElementById('lang-toggle');
|
var pill = document.getElementById('lang-toggle');
|
||||||
if (!pill) return;
|
if (!pill) return;
|
||||||
|
|
@ -170,6 +204,8 @@
|
||||||
body: JSON.stringify({lang: newLang}),
|
body: JSON.stringify({lang: newLang}),
|
||||||
});
|
});
|
||||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||||
|
// Swap any static UI labels that have i18n bindings.
|
||||||
|
window.cassandraApplyI18n(newLang);
|
||||||
// Trigger HTMX-driven panels to re-fetch in the new language.
|
// Trigger HTMX-driven panels to re-fetch in the new language.
|
||||||
// Same shape as cassandraSetTone — every panel that listens to
|
// Same shape as cassandraSetTone — every panel that listens to
|
||||||
// tone-changed also listens to lang-changed.
|
// tone-changed also listens to lang-changed.
|
||||||
|
|
|
||||||
|
|
@ -33,28 +33,18 @@
|
||||||
{% if paid %}
|
{% if paid %}
|
||||||
<aside id="chat-sidebar" class="log-page__chat">
|
<aside id="chat-sidebar" class="log-page__chat">
|
||||||
<div class="chat-header">
|
<div class="chat-header">
|
||||||
<span class="chat-title">{% if user_lang == 'it' %}Chiedi a Cassandra{% else %}Ask Cassandra{% endif %}</span>
|
<span class="chat-title" data-i18n="chat.title">{% if user_lang == 'it' %}Chiedi a Cassandra{% else %}Ask Cassandra{% endif %}</span>
|
||||||
<span class="chat-hint">{% if user_lang == 'it' %}basato sull'ultimo log + dati in tempo reale{% else %}grounded on the latest log + live data{% endif %}</span>
|
<span class="chat-hint" data-i18n="chat.hint">{% if user_lang == 'it' %}basato sull'ultimo log + dati in tempo reale{% else %}grounded on the latest log + live data{% endif %}</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="chat-thread" class="chat-thread">
|
<div id="chat-thread" class="chat-thread">
|
||||||
<div class="chat-msg chat-msg--system">
|
<div class="chat-msg chat-msg--system" data-i18n="chat.lede">{% if user_lang == 'it' %}Fai domande sull'analisi di oggi. Il modello vede l'ultimo log strategico, le quotazioni di mercato in tempo reale per tutti i gruppi e le ultime 24h di titoli filtrati per tesi. Un refresh della pagina cancella questa conversazione.{% else %}Ask about today's analysis. The model sees the latest strategic log, live market readings across all groups, and the last 24h of thesis-filtered headlines. Refresh wipes this conversation.{% endif %}</div>
|
||||||
{% if user_lang == 'it' %}
|
|
||||||
Fai domande sull'analisi di oggi. Il modello vede l'ultimo log
|
|
||||||
strategico, le quotazioni di mercato in tempo reale per tutti i
|
|
||||||
gruppi e le ultime 24h di titoli filtrati per tesi. Un refresh
|
|
||||||
della pagina cancella questa conversazione.
|
|
||||||
{% else %}
|
|
||||||
Ask about today's analysis. The model sees the latest strategic log,
|
|
||||||
live market readings across all groups, and the last 24h of
|
|
||||||
thesis-filtered headlines. Refresh wipes this conversation.
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<form id="chat-form" class="chat-form" autocomplete="off">
|
<form id="chat-form" class="chat-form" autocomplete="off">
|
||||||
<textarea id="chat-input" rows="2"
|
<textarea id="chat-input" rows="2"
|
||||||
|
data-i18n-placeholder="chat.placeholder"
|
||||||
placeholder="{% if user_lang == 'it' %}es. perché il comparto difesa è piatto nonostante Hormuz?{% else %}e.g. why is the defence sleeve flat through Hormuz?{% endif %}"
|
placeholder="{% if user_lang == 'it' %}es. perché il comparto difesa è piatto nonostante Hormuz?{% else %}e.g. why is the defence sleeve flat through Hormuz?{% endif %}"
|
||||||
required></textarea>
|
required></textarea>
|
||||||
<button id="chat-send" type="submit">{% if user_lang == 'it' %}Invia{% else %}Send{% endif %}</button>
|
<button id="chat-send" type="submit" data-i18n="chat.send">{% if user_lang == 'it' %}Invia{% else %}Send{% endif %}</button>
|
||||||
</form>
|
</form>
|
||||||
</aside>
|
</aside>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue