openclacky 0.9.7 → 0.9.9

data/lib/clacky/web/app.js

@@ -102,6 +102,9 @@ const Router = (() => {
     _current = view;
     _params  = params;
 
+    // Close sidebar on mobile when navigating to any view
+    _mobileCloseSidebar();
+
     // ── Clean up previous state ──────────────────────────────────────────
     if (Sessions.activeId) {
       Sessions._cacheActiveAndDeselect();
@@ -290,7 +293,9 @@ WS.onEvent(ev => {
 
     // ── Session list ───────────────────────────────────────────────────
     case "session_list": {
-      Sessions.setAll(ev.sessions || []);
+      // Accept new per-source has_more map or legacy boolean
+      const hasMoreArg = ev.has_more_by_source || !!ev.has_more;
+      Sessions.setAll(ev.sessions || [], hasMoreArg);
       Sessions.renderList();
 
       // Restore URL hash once on initial connect; ignore subsequent session_list events.
@@ -423,6 +428,11 @@ WS.onEvent(ev => {
       break;
 
     // ── Info / errors ──────────────────────────────────────────────────
+    case "idle_status":
+      // Two-phase: "start" shows a spinner line, "end" updates it in-place
+      Sessions.updateIdleStatus(ev.phase, ev.message);
+      break;
+
     case "info":
       Sessions.appendInfo(ev.message);
       break;
@@ -543,11 +553,9 @@ function _addGenericFile(file) {
     .then(data => {
       if (!data.ok) { alert(`Upload failed: ${data.error}`); return; }
       _pendingFiles.push({
-        name:         data.name,
-        type:         data.type,
-        path:         data.path,
-        preview_path: data.preview_path || null,
-        mime_type:    file.type
+        name:      data.name,
+        path:      data.path,
+        mime_type: file.type
       });
       _renderAttachmentPreviews();
     })
@@ -593,17 +601,30 @@ function _renderAttachmentPreviews() {
     strip.appendChild(item);
   });
 
-  // Render file badges (PDF, ZIP, DOC, XLS, PPT, etc.)
+  // Render file cards (PDF, ZIP, DOC, XLS, PPT, etc.)
   _pendingFiles.forEach((f, idx) => {
     const item = document.createElement("div");
     item.className = "pdf-preview-item";
     item.title = f.name;
+
     const icon = document.createElement("div");
     icon.className = "pdf-preview-icon";
     icon.textContent = _docTypeIcon(f.mime_type);
+
+    const info = document.createElement("div");
+    info.className = "pdf-preview-info";
+
     const name = document.createElement("div");
     name.className = "pdf-preview-name";
     name.textContent = f.name;
+
+    const typeLabel = document.createElement("div");
+    typeLabel.className = "pdf-preview-type";
+    typeLabel.textContent = (f.name.split(".").pop() || "file").toUpperCase();
+
+    info.appendChild(name);
+    info.appendChild(typeLabel);
+
     const removeBtn = document.createElement("button");
     removeBtn.className = "pdf-preview-remove";
     removeBtn.textContent = "✕";
@@ -612,8 +633,9 @@ function _renderAttachmentPreviews() {
       _pendingFiles.splice(idx, 1);
       _renderAttachmentPreviews();
     });
+
     item.appendChild(icon);
-    item.appendChild(name);
+    item.appendChild(info);
     item.appendChild(removeBtn);
     strip.appendChild(item);
   });
@@ -642,9 +664,17 @@ function sendMessage() {
     bubbleHtml = thumbs + (bubbleHtml ? "<br>" + bubbleHtml : "");
   }
   if (_pendingFiles.length > 0) {
-    const badges = _pendingFiles
-      .map(f => `📄 <em>${escapeHtml(f.name)}</em>`)
-      .join(" ");
+    const badges = _pendingFiles.map(f => {
+      const icon = _docTypeIcon(f.mime_type);
+      const ext  = (f.name.split(".").pop() || "file").toUpperCase();
+      return `<span class="msg-pdf-badge">` +
+        `<span class="msg-pdf-badge-icon">${icon}</span>` +
+        `<span class="msg-pdf-badge-info">` +
+          `<span class="msg-pdf-badge-name">${escapeHtml(f.name)}</span>` +
+          `<span class="msg-pdf-badge-type">${escapeHtml(ext)}</span>` +
+        `</span>` +
+      `</span>`;
+    }).join(" ");
     bubbleHtml = badges + (bubbleHtml ? "<br>" + bubbleHtml : "");
   }
   Sessions.appendMsg("user", bubbleHtml);
@@ -657,11 +687,9 @@ function sendMessage() {
       data_url:  img.dataUrl
     })),
     ..._pendingFiles.map(f => ({
-      name:         f.name,
-      type:         f.type,
-      mime_type:    f.mime_type,
-      path:         f.path,
-      preview_path: f.preview_path || null
+      name:      f.name,
+      path:      f.path,
+      mime_type: f.mime_type
     }))
   ];
   _pendingImages.length = 0;
@@ -675,22 +703,92 @@ function sendMessage() {
 }
 
 // ── DOM event listeners ───────────────────────────────────────────────────
-// Sidebar toggle
+// Sidebar toggle (with mobile overlay support)
+function _isMobile() { return window.innerWidth <= 768; }
+
+function _closeSidebar() {
+  $("sidebar").classList.add("hidden");
+  $("sidebar-overlay").classList.remove("active");
+}
+
+function _openSidebar() {
+  $("sidebar").classList.remove("hidden");
+  if (_isMobile()) $("sidebar-overlay").classList.add("active");
+}
+
+function _toggleSidebar() {
+  const isHidden = $("sidebar").classList.contains("hidden");
+  isHidden ? _openSidebar() : _closeSidebar();
+}
+
 if ($("btn-toggle-sidebar")) {
-  $("btn-toggle-sidebar").addEventListener("click", () => {
-    const sidebar = $("sidebar");
-    sidebar.classList.toggle("hidden");
-  });
+  $("btn-toggle-sidebar").addEventListener("click", _toggleSidebar);
 }
 
-// New session buttons (both old and new inline button)
+// Tap overlay to close sidebar on mobile
+$("sidebar-overlay").addEventListener("click", _closeSidebar);
+
+// On mobile: start with sidebar hidden
+if (_isMobile()) _closeSidebar();
+
+// Mobile back button in chat-header: tap to go back to welcome
+const _btnBack = document.querySelector(".chat-back-btn");
+if (_btnBack) _btnBack.addEventListener("click", () => Router.navigate("welcome"));
+
+// On mobile: shorten textarea placeholder so it doesn't wrap
+if (_isMobile()) {
+  const inp = $("user-input");
+  if (inp) inp.setAttribute("placeholder", inp.placeholder.replace(/\s*[\(（].*[\)）]/, "").trim());
+}
+
+// On mobile: auto-close sidebar when switching sessions/pages
+function _mobileCloseSidebar() {
+  if (_isMobile()) _closeSidebar();
+}
+
+// ── New session split button [+ ▾] ────────────────────────────────────────
+// btn-new-session-inline: click → create General session immediately
+// btn-new-session-arrow:  click → toggle dropdown
+// dropdown items:         click → create session with chosen agent_profile
 if ($("btn-new-session")) {
-  $("btn-new-session").addEventListener("click", () => Sessions.create());
+  $("btn-new-session").addEventListener("click", () => Sessions.create("general"));
 }
 if ($("btn-new-session-inline")) {
-  $("btn-new-session-inline").addEventListener("click", () => Sessions.create());
+  $("btn-new-session-inline").addEventListener("click", () => Sessions.create("general"));
+}
+if ($("btn-new-session-arrow")) {
+  $("btn-new-session-arrow").addEventListener("click", (e) => {
+    e.stopPropagation();
+    const dd = $("new-session-dropdown");
+    if (dd) dd.hidden = !dd.hidden;
+  });
+}
+// Dropdown item clicks
+document.querySelectorAll("#new-session-dropdown .dropdown-item").forEach(item => {
+  item.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const profile = item.dataset.profile || "general";
+    $("new-session-dropdown").hidden = true;
+    Sessions.create(profile);
+  });
+});
+// Close dropdown when clicking elsewhere
+document.addEventListener("click", () => {
+  const dd = $("new-session-dropdown");
+  if (dd && !dd.hidden) dd.hidden = true;
+});
+
+$("btn-welcome-new").addEventListener("click", () => Sessions.create("general"));
+
+// ── Session source tabs ───────────────────────────────────────────────────
+document.querySelectorAll(".session-tab").forEach(btn => {
+  btn.addEventListener("click", () => Sessions.setTab(btn.dataset.tab));
+});
+
+// Load-more sessions button
+if ($("btn-load-more-sessions")) {
+  $("btn-load-more-sessions").addEventListener("click", () => Sessions.loadMoreSessions());
 }
-$("btn-welcome-new").addEventListener("click", () => Sessions.create());
 
 // Theme toggle in header
 if ($("theme-toggle-header")) {
@@ -763,12 +861,16 @@ $("user-input").addEventListener("paste", e => {
   attachItems.forEach(it => _addAttachmentFile(it.getAsFile()));
 });
 
-// Note: do NOT use a manual _composing flag + compositionstart/compositionend.
-// IMEs like Sogou fire keydown(Enter) in the same tick as compositionend, so
-// the flag would already be false when the Enter keydown arrives — causing an
-// accidental send. e.isComposing is set by the browser on the event object
-// itself and remains true for the keydown that terminates a composition,
-// which is exactly what we need.
+// Cross-browser IME composition fix:
+// Safari fires compositionend BEFORE keydown (violating W3C spec), and the
+// gap between compositionend and keydown is ~5ms on Safari. We record the
+// timestamp of compositionend and treat any Enter keydown within 20ms as
+// still-composing. Chrome is unaffected because e.isComposing is still true.
+// Reference: https://bugs.webkit.org/show_bug.cgi?id=165004
+let _lastCompositionEndTime = -Infinity;
+$("user-input").addEventListener("compositionend", () => {
+  _lastCompositionEndTime = Date.now();
+});
 
 // Hide skill autocomplete when input loses focus (unless clicking a dropdown item)
 $("user-input").addEventListener("blur", () => {
@@ -780,20 +882,24 @@ $("user-input").addEventListener("blur", () => {
 const SkillAC = (() => {
   let _visible        = false;
   let _activeIndex    = -1;
-  let _items          = [];  // filtered [{ name, description }]
-  let _sessionSkills  = [];  // skills allowed for the active session's profile
+  let _items          = [];  // filtered [{ name, description, encrypted, source }]
+  let _currentSession = null; // track active session id for live fetch
 
-  /** Fetch session-specific skill list from the server and cache it.
-   *  Called whenever the active session changes. */
-  async function _loadForSession(sessionId) {
-    if (!sessionId) { _sessionSkills = []; return; }
+  /** Called whenever the active session changes — just store the id, no prefetch. */
+  function _loadForSession(sessionId) {
+    _currentSession = sessionId || null;
+  }
+
+  /** Fetch live skill list from server for the current session. */
+  async function _fetchSkills() {
+    if (!_currentSession) return [];
     try {
-      const res  = await fetch(`/api/sessions/${sessionId}/skills`);
+      const res  = await fetch(`/api/sessions/${_currentSession}/skills`);
       const data = await res.json();
-      _sessionSkills = data.skills || [];
+      return data.skills || [];
     } catch (e) {
-      console.error("[SkillAC] loadForSession failed", e);
-      _sessionSkills = [];
+      console.error("[SkillAC] fetchSkills failed", e);
+      return [];
     }
   }
 
@@ -807,9 +913,8 @@ const SkillAC = (() => {
     return null;
   }
 
-  function _render(query) {
-    // Use session-scoped skill list when available; fall back to global Skills list
-    const all = _sessionSkills.length > 0 ? _sessionSkills : Skills.all;
+  async function _render(query) {
+    const all = await _fetchSkills();
     _items = all.filter(s => s.name.toLowerCase().startsWith(query));
 
     if (_items.length === 0) { _hide(); return; }
@@ -833,11 +938,36 @@ const SkillAC = (() => {
       nameEl.className = "skill-ac-name";
       nameEl.textContent = "/" + skill.name;
 
+      // meta: encrypted badge + source type label (subtle)
+      const metaEl = document.createElement("span");
+      metaEl.className = "skill-ac-meta";
+      if (skill.encrypted) {
+        const encBadge = document.createElement("span");
+        encBadge.className = "skill-ac-enc";
+        encBadge.textContent = "🔒";
+        metaEl.appendChild(encBadge);
+      }
+      const sourceLabel = {
+        "default":        "built-in",
+        "global_clacky":  "user",
+        "global_claude":  "user",
+        "project_clacky": "project",
+        "project_claude": "project",
+        "brand":          "brand",
+      }[skill.source_type];
+      if (sourceLabel) {
+        const srcEl = document.createElement("span");
+        srcEl.className = "skill-ac-src";
+        srcEl.textContent = sourceLabel;
+        metaEl.appendChild(srcEl);
+      }
+
       const descEl = document.createElement("span");
       descEl.className = "skill-ac-desc";
       descEl.textContent = skill.description || "";
 
       item.appendChild(nameEl);
+      item.appendChild(metaEl);
       item.appendChild(descEl);
 
       item.addEventListener("mousedown", e => {
@@ -884,18 +1014,18 @@ const SkillAC = (() => {
   }
 
   /** Open the dropdown showing all skills, used by the / button. */
-  function _openAll() {
+  async function _openAll() {
     _activeIndex = 0;  // Default to first item
-    _render("");
+    await _render("");
     $("user-input").focus();
   }
 
   /** Toggle the dropdown (open if hidden, close if visible). */
-  function _toggle() {
+  async function _toggle() {
     if (_visible) {
       _hide();
     } else {
-      _openAll();
+      await _openAll();
     }
   }
 
@@ -908,7 +1038,7 @@ const SkillAC = (() => {
       const query = _getSlashQuery(value);
       if (query === null) { _hide(); return; }
       _activeIndex = 0;  // Always highlight the first match
-      _render(query);
+      _render(query);  // async, fire-and-forget
     },
 
     /** Open dropdown with all skills (triggered by / button). */
@@ -933,7 +1063,7 @@ const SkillAC = (() => {
         _select(targetIdx);
         return true;
       }
-      if (e.key === "Enter" && !e.isComposing) {
+      if (e.key === "Enter" && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
         if (_activeIndex >= 0) {
           e.preventDefault();
           _select(_activeIndex);
@@ -960,7 +1090,7 @@ $("user-input").addEventListener("keydown", e => {
   // Let skill autocomplete consume arrow/enter/escape first
   if (SkillAC.handleKey(e)) return;
 
-  if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+  if (e.key === "Enter" && !e.shiftKey && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
     e.preventDefault();
     sendMessage();
   }

data/lib/clacky/web/brand.js

@@ -213,6 +213,20 @@ const Brand = (() => {
       const logoText  = document.getElementById("header-logo");
       const brandWrap = document.getElementById("header-brand");
 
+      // Apply theme color — overrides --color-accent-primary and --color-button-primary
+      if (info.theme_color) {
+        const root = document.documentElement;
+        root.style.setProperty("--color-accent-primary",      info.theme_color);
+        root.style.setProperty("--color-accent-hover",        info.theme_color);
+        root.style.setProperty("--color-button-primary",      info.theme_color);
+        root.style.setProperty("--color-button-primary-hover", info.theme_color);
+        // Also update browser tab color on mobile
+        const metaTheme = document.querySelector("meta[name='theme-color']");
+        if (metaTheme) metaTheme.setAttribute("content", info.theme_color);
+      }
+
+      // header-brand already has onclick="Router.navigate('chat')" in HTML, no extra link needed
+
       const hasLogo = !!(info.logo_url && logoImg);
 
       if (hasLogo) {

data/lib/clacky/web/channels.js

@@ -27,6 +27,14 @@ const Channels = (() => {
         setupCmd:  "/channel-setup setup wecom",
         testCmd:   "/channel-setup doctor",
       },
+      weixin: {
+        logo:      "信",
+        logoClass: "channel-logo-weixin",
+        name:      "Weixin (微信)",
+        desc:      I18n.t("channels.weixin.desc"),
+        setupCmd:  "/channel-setup setup weixin",
+        testCmd:   "/channel-setup doctor",
+      },
     };
   }
 
@@ -164,7 +172,7 @@ const Channels = (() => {
       const res = await fetch("/api/sessions", {
         method:  "POST",
         headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name }),
+        body:    JSON.stringify({ name, source: "setup" }),
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || I18n.t("channels.sessionError"));
@@ -173,6 +181,7 @@ const Channels = (() => {
 
       // Register in Sessions, refresh sidebar, queue command, then navigate
       Sessions.add(session);
+      Sessions.setTab("setup");
       Sessions.renderList();
       Sessions.setPendingMessage(session.id, command);
       Sessions.select(session.id);

data/lib/clacky/web/i18n.js

@@ -45,6 +45,13 @@ const I18n = (() => {
       "sessions.createError":   "Error: ",
       "sessions.thinking":      "Thinking…",
       "sessions.default_name":  "Session {{n}}",
+      "sessions.tab.manual":    "Manual",
+      "sessions.tab.scheduled": "Scheduled",
+      "sessions.tab.channel":   "Channel",
+      "sessions.tab.setup":     "Setup",
+      "sessions.newSession":    "+ New Session",
+      "sessions.loadMore":      "Load more sessions",
+      "sessions.loadingMore":   "Loading…",
 
       // ── Modal ──
       "modal.yes": "Yes",
@@ -135,7 +142,7 @@ const I18n = (() => {
 
       // ── Channels panel ──
       "channels.title":           "Channels",
-      "channels.subtitle":        "Connect IM platforms so your users can chat with the assistant via Feishu or WeCom",
+      "channels.subtitle":        "Connect IM platforms so your users can chat with the assistant via Feishu, WeCom or Weixin",
       "channels.loading":         "Loading…",
       "channels.badge.running":         "Running",
       "channels.badge.enabled":         "Enabled",
@@ -155,6 +162,7 @@ const I18n = (() => {
       "channels.noSession":       "No session returned",
       "channels.feishu.desc":     "Connect via Feishu open platform WebSocket long connection",
       "channels.wecom.desc":      "Connect via WeCom intelligent robot WebSocket",
+      "channels.weixin.desc":     "Connect via WeChat iLink bot (QR login, HTTP long-poll)",
 
       // ── Settings panel ──
       "settings.title":           "Settings",
@@ -197,13 +205,23 @@ const I18n = (() => {
       "settings.personalize.btn":          "✨ Re-run Onboard",
       "settings.personalize.btn.starting": "Starting…",
       "settings.personalize.btn.rerun":    "✨ Re-run Onboard",
+      "settings.browser.title":            "Browser",
+      "settings.browser.desc":             "Connect your browser to enable browser automation.",
+      "settings.browser.configured":       "✅ Browser connected",
+      "settings.browser.disabled":         "⏸ Browser disabled",
+      "settings.browser.btn":              "🌐 Configure Browser",
+      "settings.browser.btn.reconfigure":  "🌐 Reconfigure Browser",
+      "settings.browser.btn.starting":     "Starting…",
       "settings.brand.title":              "Brand & License",
       "settings.brand.label.brand":        "Brand",
       "settings.brand.label.status":       "Status",
       "settings.brand.label.expires":      "Expires",
+      "settings.brand.label.homepage":     "Homepage",
+      "settings.brand.label.supportContact": "Support",
       "settings.brand.label.supportQr":    "Tech Support",
       "settings.brand.label.qrHint":       "Scan with your phone camera",
       "settings.brand.btn.change":         "Change License Key",
+      "settings.brand.confirmRebind":      "Warning: all previously installed brand skills will be deleted and cannot be used. Continue?",
       "settings.brand.badge.active":       "Active",
       "settings.brand.badge.warning":      "Expiring Soon",
       "settings.brand.badge.expired":      "Expired",
@@ -296,6 +314,13 @@ const I18n = (() => {
       "sessions.createError":   "错误：",
       "sessions.thinking":      "思考中…",
       "sessions.default_name":  "对话 {{n}}",
+      "sessions.tab.manual":    "默认",
+      "sessions.tab.scheduled": "定时",
+      "sessions.tab.channel":   "频道",
+      "sessions.tab.setup":     "配置",
+      "sessions.newSession":    "+ 新会话",
+      "sessions.loadMore":      "加载更多会话",
+      "sessions.loadingMore":   "加载中…",
 
       // ── Modal ──
       "modal.yes": "确认",
@@ -386,13 +411,13 @@ const I18n = (() => {
 
       // ── Channels panel ──
       "channels.title":           "频道",
-      "channels.subtitle":        "连接即时通讯平台，让用户通过飞书或企业微信与助手对话",
+      "channels.subtitle":        "连接即时通讯平台，让用户通过飞书、企业微信或微信与助手对话",
       "channels.loading":         "加载中…",
       "channels.loadError":       "加载频道失败：{{msg}}",
-      "channels.badge.running":         "● 运行中",
-      "channels.badge.enabled":         "● 已启用",
-      "channels.badge.disabled":        "○ 未配置",
-      "channels.badge.notConfigured":   "○ 未配置",
+      "channels.badge.running":         "运行中",
+      "channels.badge.enabled":         "已启用",
+      "channels.badge.disabled":        "未配置",
+      "channels.badge.notConfigured":   "未配置",
       "channels.hint.running":          "适配器运行中，正在接受用户消息",
       "channels.hint.enabled":          "⚠ 已启用但未运行 — 适配器可能连接失败，请点击「诊断问题」排查。",
       "channels.hint.enabledNotRunning":"已启用但未运行 — 适配器可能连接失败，请点击「诊断问题」排查。",
@@ -406,6 +431,7 @@ const I18n = (() => {
       "channels.noSession":       "未返回对话",
       "channels.feishu.desc":     "通过飞书开放平台 WebSocket 长连接接入",
       "channels.wecom.desc":      "通过企业微信智能机器人 WebSocket 接入",
+      "channels.weixin.desc":     "通过微信 iLink 机器人接入（扫码登录，HTTP 长轮询）",
 
       // ── Settings panel ──
       "settings.title":           "设置",
@@ -448,13 +474,23 @@ const I18n = (() => {
       "settings.personalize.btn":          "✨ 重新引导",
       "settings.personalize.btn.starting": "启动中…",
       "settings.personalize.btn.rerun":    "✨ 重新引导",
+      "settings.browser.title":            "浏览器",
+      "settings.browser.desc":             "连接浏览器以启用浏览器自动化功能。",
+      "settings.browser.configured":       "✅ 浏览器已连接",
+      "settings.browser.disabled":         "⏸ 浏览器已禁用",
+      "settings.browser.btn":              "🌐 配置浏览器",
+      "settings.browser.btn.reconfigure":  "🌐 重新配置浏览器",
+      "settings.browser.btn.starting":     "启动中…",
       "settings.brand.title":              "品牌 & 授权",
       "settings.brand.label.brand":        "品牌",
       "settings.brand.label.status":       "状态",
       "settings.brand.label.expires":      "到期时间",
+      "settings.brand.label.homepage":     "主页",
+      "settings.brand.label.supportContact": "联系支持",
       "settings.brand.label.supportQr":    "技术支持",
       "settings.brand.label.qrHint":       "使用手机扫描二维码",
       "settings.brand.btn.change":         "更换授权码",
+      "settings.brand.confirmRebind":      "警告：所有已安装的历史品牌技能将被删除，无法继续使用。确认继续？",
       "settings.brand.badge.active":       "已激活",
       "settings.brand.badge.warning":      "即将过期",
       "settings.brand.badge.expired":      "已过期",
@@ -528,6 +564,7 @@ const I18n = (() => {
     _lang = TRANSLATIONS[code] ? code : DEFAULT_LANG;
     localStorage.setItem(STORAGE_KEY, _lang);
     applyAll();
+    document.dispatchEvent(new CustomEvent("langchange", { detail: { lang: _lang } }));
   }
 
   /**
@@ -558,7 +595,12 @@ const I18n = (() => {
     document.querySelectorAll("[data-i18n-placeholder]").forEach(el => {
       const key  = el.getAttribute("data-i18n-placeholder");
       const vars = _extractVars(el);
-      el.placeholder = t(key, vars);
+      let ph = t(key, vars);
+      // On mobile: strip the parenthetical hint so placeholder doesn't wrap
+      if (window.innerWidth <= 768) {
+        ph = ph.replace(/\s*[\(（].*[\)）]/, "").trim();
+      }
+      el.placeholder = ph;
     });
     document.querySelectorAll("[data-i18n-title]").forEach(el => {
       const key  = el.getAttribute("data-i18n-title");