From e3e5f888097f7194bc10edd061bcc14efd1e121c Mon Sep 17 00:00:00 2001
From: Hyu <chenhyu@proton.me>
Date: Sun, 11 Oct 2026 00:50:49 +0800
Subject: [PATCH] feat(bots): highlight empty routing action with amber glow

---
 .../bot-form/EventBindingsEditor.module.css   | 32 +++++++++++++++++++
 .../bot-form/EventBindingsEditor.tsx          |  8 ++++-
 web/src/i18n/locales/bot-setup.ts             | 16 +++++-----
 3 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 web/src/app/home/bots/components/bot-form/EventBindingsEditor.module.css

diff --git a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.module.css b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.module.css
new file mode 100644
index 000000000..0318c496a
--- /dev/null
+++ b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.module.css
@@ -0,0 +1,32 @@
+.emptyRouteHint {
+  --route-glow-soft: 6%;
+  --route-glow-strong: 30%;
+  animation: route-hint-glow 3.6s ease-in-out infinite;
+}
+
+:global(.dark) .emptyRouteHint {
+  --route-glow-soft: 4%;
+  --route-glow-strong: 22%;
+}
+
+.emptyRouteHint:hover,
+.emptyRouteHint:focus-visible,
+.emptyRouteHint[data-state='open'] {
+  animation: none;
+}
+
+@keyframes route-hint-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-amber-400) var(--route-glow-soft), transparent);
+  }
+  50% {
+    box-shadow: 0 0 14px 4px color-mix(in srgb, var(--color-amber-400) var(--route-glow-strong), transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .emptyRouteHint {
+    animation: none;
+  }
+}
diff --git a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
index c96a364c4..7a2b05200 100644
--- a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
+++ b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
@@ -11,6 +11,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { cn } from '@/lib/utils';
+import styles from './EventBindingsEditor.module.css';
 import type { TFunction } from 'i18next';
 import { UseFormReturn } from 'react-hook-form';
 import {
@@ -1800,7 +1801,12 @@ export default function EventBindingsEditor({
       <div className="flex flex-wrap gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="outline" size="sm">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className={bindings.length === 0 ? styles.emptyRouteHint : undefined}
+            >
               <Plus className="h-4 w-4 mr-1" />
               {t('bots.addBehavior')}
               <ChevronDown className="ml-1 h-3.5 w-3.5" />
diff --git a/web/src/i18n/locales/bot-setup.ts b/web/src/i18n/locales/bot-setup.ts
index 5f0ccbcc3..ee31f4b5e 100644
--- a/web/src/i18n/locales/bot-setup.ts
+++ b/web/src/i18n/locales/bot-setup.ts
@@ -1,48 +1,48 @@
 export default {
   "en-US": {
-    "warning": "No active event route or plugin processor is configured. This bot will connect but will not automatically reply or process events. Add a rule below and choose a processor.",
+    "warning": "No active routing. Add a rule and choose a processor to handle events.",
     "create": "Create new processor",
     "createDescription": "Create a processor and select it for this rule. Save the bot to apply the change.",
     "incompatible": "The processor was created, but it does not support this event. Choose a compatible processor."
   },
   "zh-Hans": {
-    "warning": "尚未配置已启用的事件路由或插件处理器。机器人连接后不会自动回复或处理事件，请在下方添加规则并选择处理器。",
+    "warning": "尚未配置事件处理，请添加规则并选择处理器。",
     "create": "创建新处理器",
     "createDescription": "创建成功后会选入当前规则，保存机器人后生效。",
     "incompatible": "处理器已创建，但不支持当前事件，请选择兼容的处理器。"
   },
   "zh-Hant": {
-    "warning": "尚未設定已啟用的事件路由或外掛處理器。機器人連接後不會自動回覆或處理事件，請在下方新增規則並選擇處理器。",
+    "warning": "尚未設定事件處理，請新增規則並選擇處理器。",
     "create": "建立新處理器",
     "createDescription": "建立成功後會選入目前規則，儲存機器人後生效。",
     "incompatible": "處理器已建立，但不支援目前事件，請選擇相容的處理器。"
   },
   "ja-JP": {
-    "warning": "有効なイベントルートまたはプラグイン処理が未設定です。接続しても自動返信やイベント処理は行われません。下にルールを追加し、処理を選択してください。",
+    "warning": "イベント処理が未設定です。ルールを追加し、処理を選択してください。",
     "create": "新しい処理を作成",
     "createDescription": "作成した処理を現在のルールに選択します。ボットを保存すると反映されます。",
     "incompatible": "処理は作成されましたが、このイベントに対応していません。対応する処理を選択してください。"
   },
   "es-ES": {
-    "warning": "No hay rutas activas ni procesadores de plugins. El bot se conectará, pero no responderá ni procesará eventos automáticamente. Añade una regla y elige un procesador.",
+    "warning": "Sin procesamiento de eventos. Añade una regla y elige un procesador.",
     "create": "Crear procesador",
     "createDescription": "El procesador se seleccionará para esta regla. Guarda el bot para aplicar el cambio.",
     "incompatible": "El procesador se creó, pero no admite este evento. Elige uno compatible."
   },
   "ru-RU": {
-    "warning": "Нет активных маршрутов или обработчиков плагинов. Бот подключится, но не будет автоматически отвечать или обрабатывать события. Добавьте правило и выберите обработчик.",
+    "warning": "Обработка событий не настроена. Добавьте правило и выберите обработчик.",
     "create": "Создать обработчик",
     "createDescription": "Созданный обработчик будет выбран для правила. Сохраните бота для применения.",
     "incompatible": "Обработчик создан, но не поддерживает это событие. Выберите совместимый обработчик."
   },
   "vi-VN": {
-    "warning": "Chưa có tuyến sự kiện hoặc bộ xử lý plugin đang bật. Bot sẽ kết nối nhưng không tự động trả lời hay xử lý sự kiện. Hãy thêm quy tắc và chọn bộ xử lý.",
+    "warning": "Chưa thiết lập xử lý sự kiện. Hãy thêm quy tắc và chọn bộ xử lý.",
     "create": "Tạo bộ xử lý mới",
     "createDescription": "Bộ xử lý sẽ được chọn cho quy tắc này. Lưu bot để áp dụng.",
     "incompatible": "Đã tạo bộ xử lý nhưng không hỗ trợ sự kiện này. Hãy chọn bộ xử lý tương thích."
   },
   "th-TH": {
-    "warning": "ยังไม่มีเส้นทางเหตุการณ์หรือตัวประมวลผลปลั๊กอินที่เปิดใช้งาน บอตจะเชื่อมต่อแต่ไม่ตอบกลับหรือจัดการเหตุการณ์อัตโนมัติ โปรดเพิ่มกฎและเลือกตัวประมวลผลด้านล่าง",
+    "warning": "ยังไม่ได้ตั้งค่าการจัดการเหตุการณ์ โปรดเพิ่มกฎและเลือกตัวประมวลผล",
     "create": "สร้างตัวประมวลผลใหม่",
     "createDescription": "ระบบจะเลือกตัวประมวลผลให้กฎนี้ บันทึกบอตเพื่อใช้การเปลี่ยนแปลง",
     "incompatible": "สร้างตัวประมวลผลแล้ว แต่ไม่รองรับเหตุการณ์นี้ โปรดเลือกตัวประมวลผลที่รองรับ"