From adaf9a7813131b528460c95836610ff688c0531a Mon Sep 17 00:00:00 2001
From: zhayujie <yjzha1996@163.com>
Date: Wed, 8 Jul 2026 10:58:41 +0800
Subject: [PATCH] fix(i18n): correct language label glyphs

---
 channel/web/chat.html            | 31 ++++++++++++++-----
 channel/web/static/js/console.js | 53 ++++++++++++++++++++++++--------
 2 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/channel/web/chat.html b/channel/web/chat.html
index 499f1e66..6381ca08 100644
--- a/channel/web/chat.html
+++ b/channel/web/chat.html
@@ -270,14 +270,29 @@
 
                 <div class="flex-1"></div>
 
-                <!-- Language Toggle -->
-                <button id="lang-toggle" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium
-                                                 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
-                                                 cursor-pointer transition-colors duration-150"
-                        onclick="toggleLanguage()">
-                    <i class="fas fa-globe text-xs"></i>
-                    <span id="lang-label">EN</span>
-                </button>
+                <!-- Language Selector (dropdown) -->
+                <div id="lang-selector" class="relative">
+                    <button id="lang-toggle" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium
+                                                     text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
+                                                     cursor-pointer transition-colors duration-150"
+                            onclick="toggleLangMenu(event)">
+                        <i class="fas fa-globe text-xs"></i>
+                        <span id="lang-label">EN</span>
+                        <i class="fas fa-chevron-down text-[10px] opacity-60"></i>
+                    </button>
+                    <div id="lang-menu" class="hidden absolute right-0 mt-1 min-w-[120px] py-1 rounded-lg z-50
+                                               bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10">
+                        <button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
+                                       hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="zh"
+                                onclick="selectLanguage('zh')">简体中文</button>
+                        <button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
+                                       hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="zh-Hant"
+                                onclick="selectLanguage('zh-Hant')">繁體中文</button>
+                        <button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
+                                       hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="en"
+                                onclick="selectLanguage('en')">English</button>
+                    </div>
+                </div>
 
                 <!-- Theme Toggle -->
                 <button id="theme-toggle" class="p-2 rounded-lg text-slate-500 dark:text-slate-400
diff --git a/channel/web/static/js/console.js b/channel/web/static/js/console.js
index 9d37ce1d..0cf74766 100644
--- a/channel/web/static/js/console.js
+++ b/channel/web/static/js/console.js
@@ -813,10 +813,17 @@ function applyI18n() {
     
     const langLabel = document.getElementById('lang-label');
     if (langLabel) {
-        if (currentLang === 'zh-Hant') langLabel.textContent = '繁中';
-        else if (currentLang === 'zh') langLabel.textContent = '簡中';
+        if (currentLang === 'zh-Hant') langLabel.textContent = '繁体';
+        else if (currentLang === 'zh') langLabel.textContent = '简体';
         else langLabel.textContent = 'EN';
     }
+    // Highlight the active option in the header language dropdown menu.
+    document.querySelectorAll('#lang-menu .lang-menu-item').forEach(item => {
+        const active = item.dataset.lang === currentLang;
+        item.classList.toggle('text-blue-600', active);
+        item.classList.toggle('dark:text-blue-400', active);
+        item.classList.toggle('font-medium', active);
+    });
     // Point the docs link to the locale-specific documentation site.
     const docsLink = document.getElementById('docs-link');
     if (docsLink) docsLink.href = currentLang === 'zh' ? 'https://docs.cowagent.ai/zh' : 'https://docs.cowagent.ai';
@@ -867,10 +874,17 @@ function syncLanguageToBackend(lang, callback) {
 function updateLangControls() {
     const langLabel = document.getElementById('lang-label');
     if (langLabel) {
-        if (currentLang === 'zh-Hant') langLabel.textContent = '繁體';
-        else if (currentLang === 'zh') langLabel.textContent = '簡體';
+        if (currentLang === 'zh-Hant') langLabel.textContent = '繁体';
+        else if (currentLang === 'zh') langLabel.textContent = '简体';
         else langLabel.textContent = 'EN';
     }
+    // Highlight the active option in the header language dropdown menu.
+    document.querySelectorAll('#lang-menu .lang-menu-item').forEach(item => {
+        const active = item.dataset.lang === currentLang;
+        item.classList.toggle('text-blue-600', active);
+        item.classList.toggle('dark:text-blue-400', active);
+        item.classList.toggle('font-medium', active);
+    });
     // The config language picker is the custom .cfg-dropdown component. Only
     // sync it once it has been initialized (i.e. the config panel was opened).
     const sel = document.getElementById('cfg-lang-select');
@@ -888,16 +902,31 @@ function updateLangControls() {
     }
 }
 
-function toggleLanguage() {
-    if (currentLang === 'zh') {
-        setLanguage('zh-Hant');
-    } else if (currentLang === 'zh-Hant') {
-        setLanguage('en');
-    } else {
-        setLanguage('zh');
-    }
+// Toggle the header language dropdown menu open/closed.
+function toggleLangMenu(event) {
+    if (event) event.stopPropagation();
+    const menu = document.getElementById('lang-menu');
+    if (menu) menu.classList.toggle('hidden');
 }
 
+// Pick a language from the dropdown, then close the menu.
+function selectLanguage(lang) {
+    const menu = document.getElementById('lang-menu');
+    if (menu) menu.classList.add('hidden');
+    setLanguage(lang);
+}
+window.toggleLangMenu = toggleLangMenu;
+window.selectLanguage = selectLanguage;
+
+// Close the language menu when clicking outside of it.
+document.addEventListener('click', (e) => {
+    const selector = document.getElementById('lang-selector');
+    const menu = document.getElementById('lang-menu');
+    if (menu && !menu.classList.contains('hidden') && selector && !selector.contains(e.target)) {
+        menu.classList.add('hidden');
+    }
+});
+
 // Refresh JS-rendered views after a language switch. Each branch uses the
 // lightweight in-memory re-render path (no extra network round-trips).
 function rerenderDynamicViews() {