From 18247aa7a59bf0e94507533ba0509da81d98cc8d Mon Sep 17 00:00:00 2001
From: xmanrui <841206367@qq.com>
Date: Mon, 2 Mar 2026 04:57:44 +0800
Subject: [PATCH] feat(ui): use simpleicons platform logos with local fallback

---
 app/page.tsx                              | 27 ++++++++++++++++++++++-
 public/assets/platform-logos/discord.svg  |  7 ++++++
 public/assets/platform-logos/feishu.svg   | 23 +++++++++++++++++++
 public/assets/platform-logos/telegram.svg |  5 +++++
 public/assets/platform-logos/whatsapp.svg |  5 +++++
 5 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/platform-logos/discord.svg
 create mode 100644 public/assets/platform-logos/feishu.svg
 create mode 100644 public/assets/platform-logos/telegram.svg
 create mode 100644 public/assets/platform-logos/whatsapp.svg

diff --git a/app/page.tsx b/app/page.tsx
index bbd5d06..08cb4d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -186,6 +186,20 @@ interface PlatformTestResult {
 function PlatformBadge({ platform, agentId, gatewayPort, gatewayToken, gatewayHost, t, testResult }: { platform: Platform; agentId: string; gatewayPort: number; gatewayToken?: string; gatewayHost?: string; t: TFunc; testResult?: PlatformTestResult | null }) {
   const pName = platform.name;
   const badgeWidthClass = "w-[8.25rem]";
+  const remoteLogoSrc = pName === "feishu"
+    ? "https://cdn.simpleicons.org/lark/2E5BFF"
+    : pName === "telegram"
+    ? "https://cdn.simpleicons.org/telegram/26A5E4"
+    : pName === "whatsapp"
+    ? "https://cdn.simpleicons.org/whatsapp/25D366"
+    : "https://cdn.simpleicons.org/discord/5865F2";
+  const logoFallbackSrc = pName === "feishu"
+    ? "/assets/platform-logos/feishu.svg"
+    : pName === "telegram"
+    ? "/assets/platform-logos/telegram.svg"
+    : pName === "whatsapp"
+    ? "/assets/platform-logos/whatsapp.svg"
+    : "/assets/platform-logos/discord.svg";
 
   let sessionKey: string;
   if (pName === "feishu" && platform.botOpenId) {
@@ -210,10 +224,11 @@ function PlatformBadge({ platform, agentId, gatewayPort, gatewayToken, gatewayHo
     ? "bg-green-500/20 text-green-300 border border-green-500/30 hover:bg-green-500/40 hover:border-green-400"
     : "bg-purple-500/20 text-purple-300 border border-purple-500/30 hover:bg-purple-500/40 hover:border-purple-400";
 
-  const label = pName === "feishu" ? t("platform.feishu")
+  const labelRaw = pName === "feishu" ? t("platform.feishu")
     : pName === "telegram" ? t("platform.telegram")
     : pName === "whatsapp" ? t("platform.whatsapp")
     : t("platform.discord");
+  const label = labelRaw.replace(/^[^\p{L}\p{N}]+/u, "").trim();
 
   return (
     <div className="inline-flex items-center gap-1.5 max-w-full">
@@ -225,6 +240,16 @@ function PlatformBadge({ platform, agentId, gatewayPort, gatewayToken, gatewayHo
         title={t("agent.openChat")}
         className={`inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-xs font-medium cursor-pointer transition-all hover:scale-105 hover:shadow-md min-w-0 ${badgeWidthClass} ${badgeStyle}`}
       >
+        <img
+          src={remoteLogoSrc}
+          alt={`${label} logo`}
+          className="w-3.5 h-3.5 shrink-0"
+          onError={(e) => {
+            if (e.currentTarget.dataset.fallbackApplied === "1") return;
+            e.currentTarget.dataset.fallbackApplied = "1";
+            e.currentTarget.src = logoFallbackSrc;
+          }}
+        />
         <span className="shrink-0">{label}</span>
         {pName === "feishu" && platform.accountId && (
           <span className="opacity-60 truncate max-w-[4.5rem]">({platform.accountId})</span>
diff --git a/public/assets/platform-logos/discord.svg b/public/assets/platform-logos/discord.svg
new file mode 100644
index 0000000..2cae4ae
--- /dev/null
+++ b/public/assets/platform-logos/discord.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Discord logo">
+  <circle cx="32" cy="32" r="28" fill="#5865F2"/>
+  <path d="M17 44c4 3 10 5 15 5s11-2 15-5c1-8-1-15-4-21-3-2-6-3-10-4l-1 3a30 30 0 0 0-8 0l-1-3c-4 1-7 2-10 4-3 6-5 13-4 21z" fill="#fff"/>
+  <ellipse cx="27" cy="33" rx="3" ry="3.5" fill="#5865F2"/>
+  <ellipse cx="37" cy="33" rx="3" ry="3.5" fill="#5865F2"/>
+  <path d="M24 39c2 2 5 3 8 3s6-1 8-3" stroke="#5865F2" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+</svg>
diff --git a/public/assets/platform-logos/feishu.svg b/public/assets/platform-logos/feishu.svg
new file mode 100644
index 0000000..c094a91
--- /dev/null
+++ b/public/assets/platform-logos/feishu.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Feishu logo">
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="36%" r="72%">
+      <stop offset="0%" stop-color="#ffffff"/>
+      <stop offset="100%" stop-color="#e9edf4"/>
+    </radialGradient>
+    <linearGradient id="wingGreen" x1="16" y1="16" x2="36" y2="34" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#4BE7AE"/>
+      <stop offset="1" stop-color="#17C684"/>
+    </linearGradient>
+    <linearGradient id="wingBlue" x1="26" y1="28" x2="50" y2="48" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3FA9FF"/>
+      <stop offset="1" stop-color="#2D5BFF"/>
+    </linearGradient>
+  </defs>
+
+  <circle cx="32" cy="32" r="28" fill="url(#bg)"/>
+  <circle cx="32" cy="32" r="27.5" fill="none" stroke="#d9dee8"/>
+
+  <path d="M16 21.2c0-4.1 3.3-7.4 7.4-7.4h18.7L30.9 25c-1.8 1.8-4.6 2.1-6.8.7L16 20.2z" fill="url(#wingGreen)"/>
+  <path d="M49.8 42.8c0 4.1-3.3 7.4-7.4 7.4H23.7L34.9 39c1.8-1.8 4.6-2.1 6.8-.7l8.1 4.5z" fill="url(#wingBlue)"/>
+  <path d="M24.6 29.3h12.1c5.3 0 9.7 4.3 9.7 9.7h-12c-5.4 0-9.8-4.3-9.8-9.7z" fill="#fff"/>
+</svg>
diff --git a/public/assets/platform-logos/telegram.svg b/public/assets/platform-logos/telegram.svg
new file mode 100644
index 0000000..4c57223
--- /dev/null
+++ b/public/assets/platform-logos/telegram.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Telegram logo">
+  <circle cx="32" cy="32" r="28" fill="#26A5E4"/>
+  <path d="M15 31.5 47.5 18c1.6-.7 3.1.8 2.6 2.4L43 47.5c-.4 1.7-2.5 2.3-3.8 1.1l-8.7-8.2-4.5 4.3c-.8.8-2.1.5-2.5-.5l-2.4-8.1-8-2c-1.4-.4-1.5-2.4-.1-2.9z" fill="#fff"/>
+  <path d="m22 34 17-11-13 13z" fill="#26A5E4"/>
+</svg>
diff --git a/public/assets/platform-logos/whatsapp.svg b/public/assets/platform-logos/whatsapp.svg
new file mode 100644
index 0000000..7af839f
--- /dev/null
+++ b/public/assets/platform-logos/whatsapp.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="WhatsApp logo">
+  <circle cx="32" cy="32" r="28" fill="#25D366"/>
+  <path d="M32 16c-8.8 0-16 7-16 15.7 0 3 .9 5.8 2.5 8.2L16 48l8.4-2.4c2.3 1.2 4.9 1.9 7.6 1.9 8.8 0 16-7 16-15.8S40.8 16 32 16z" fill="#fff"/>
+  <path d="M40.8 36.2c-.4 1.2-2.2 2.3-3.2 2.4-.8.1-1.7.2-5.4-1.4-4.8-2.2-7.8-7-8-7.3-.2-.3-1.9-2.5-1.9-4.8 0-2.3 1.2-3.4 1.6-3.9.4-.4.9-.5 1.2-.5h.9c.3 0 .7 0 1 .7.4 1 .9 2.5 1 2.7.1.2.2.5 0 .8-.2.3-.3.5-.6.8-.3.3-.5.5-.7.8-.2.3-.4.6-.2 1 .2.4 1.1 1.8 2.4 2.9 1.7 1.5 3.2 2 3.6 2.2.4.1.7.1.9-.2.3-.3 1.2-1.3 1.5-1.8.3-.4.6-.4 1-.3.4.1 2.3 1.1 2.7 1.3.4.2.7.3.8.5.1.2.1 1-.3 2.2z" fill="#25D366"/>
+</svg>