admin/OpenClaw-bot-review
1
0
Fork 0
mirror of https://github.com/xmanrui/OpenClaw-bot-review.git synced 2026-07-27 22:25:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use simpleicons platform logos with local fallback

Browse Source
This commit is contained in:
xmanrui
2026-03-02 04:57:44 +08:00
parent 57c2f73cdb
commit 18247aa7a5
5 changed files with 66 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+26 -1
View File
@@ -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>
public/assets/platform-logos/discord.svg
+7
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 526 B

public/assets/platform-logos/feishu.svg
+23
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/assets/platform-logos/telegram.svg
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

public/assets/platform-logos/whatsapp.svg
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 697 B