@elizaos/ui 2.0.0-alpha.43 → 2.0.0-alpha.430

package/packages/app-core/src/components/conversations/ConversationsSidebar.js

@@ -0,0 +1,555 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatConversationItem, ChatSourceIcon, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, getChatSourceMeta, SidebarCollapsedActionButton, SidebarContent, SidebarPanel, SidebarScrollRegion, Switch, TooltipProvider, useIntervalWhenDocumentVisible, } from "@elizaos/ui";
+import { MessagesSquare, Plus, Settings2, Terminal as TerminalIcon, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../../api";
+import { PULSE_STATUSES, STATUS_DOT, } from "../../chat/coding-agent-session-state";
+import { useApp } from "../../state";
+import { usePtySessions } from "../../state/PtySessionsContext";
+import { ALWAYS_ON_PLUGIN_IDS, iconImageSource, resolveIcon, } from "../pages/plugin-list-utils";
+import { AppPageSidebar } from "../shared/AppPageSidebar";
+import { CollapsibleSidebarSection } from "../shared/CollapsibleSidebarSection";
+import { getBrandIcon } from "./brand-icons";
+import { ConversationRenameDialog } from "./ConversationRenameDialog";
+import { ALL_CONNECTORS_SOURCE_SCOPE, ALL_WORLDS_SCOPE, buildConversationsSidebarModel, ELIZA_SOURCE_SCOPE, TERMINAL_SOURCE_SCOPE, } from "./conversation-sidebar-model";
+/**
+ * Id namespace for inbox-chat entries merged into the sidebar list.
+ * Sidebar selection uses a flat string id; connector chats carry a
+ * prefix so we can distinguish them from dashboard conversation UUIDs.
+ */
+const INBOX_ID_PREFIX = "inbox:";
+/** Id namespace for PTY sessions surfaced under the Terminal channel. */
+const TERMINAL_ID_PREFIX = "terminal:";
+/** How often the inbox chat list refreshes while the sidebar is open. */
+const INBOX_CHATS_REFRESH_MS = 5_000;
+function railMonogram(label) {
+    const words = label.trim().split(/\s+/).filter(Boolean);
+    const initials = words
+        .slice(0, 2)
+        .map((word) => word[0]?.toUpperCase() ?? "")
+        .join("");
+    return (initials || label.slice(0, 1).toUpperCase() || "?").slice(0, 2);
+}
+function isTerminalRow(row) {
+    return row.sourceKey === TERMINAL_SOURCE_SCOPE;
+}
+function renderRailIdentity(row) {
+    if (isTerminalRow(row)) {
+        return _jsx(TerminalIcon, { className: "h-4 w-4" });
+    }
+    if (row.kind === "inbox" && typeof row.source === "string" && row.source) {
+        return _jsx(ChatSourceIcon, { source: row.source, className: "h-4 w-4" });
+    }
+    return railMonogram(row.title);
+}
+function rowListId(row) {
+    if (isTerminalRow(row))
+        return `${TERMINAL_ID_PREFIX}${row.id}`;
+    return row.kind === "inbox" ? `${INBOX_ID_PREFIX}${row.id}` : row.id;
+}
+function isLegacyUntitledConversationCandidate(conversation) {
+    if (conversation.metadata?.scope) {
+        return false;
+    }
+    return conversation.title.trim().toLowerCase() === "default";
+}
+export function ConversationsSidebar({ mobile = false, onClose, variant = "default", }) {
+    const { conversations, activeConversationId, activeInboxChat, activeTerminalSessionId, unreadConversations, handleNewConversation, handleSelectConversation, handleDeleteConversation, plugins = [], ensurePluginsLoaded = async () => { }, handlePluginToggle, setTab, setState, tab, t, } = useApp();
+    const { ptySessions } = usePtySessions();
+    const [inboxChats, setInboxChats] = useState([]);
+    const [renameTarget, setRenameTarget] = useState(null);
+    const [confirmDeleteId, setConfirmDeleteId] = useState(null);
+    const [deletingId, setDeletingId] = useState(null);
+    const [menuConversation, setMenuConversation] = useState(null);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+    const menuAnchorRef = useRef(null);
+    // Each section (messages, terminal, per-connector) is independently
+    // collapsible. Sections default to expanded — users only care that
+    // state is preserved across mounts.
+    const [collapsedSections, setCollapsedSections] = useState(() => new Set());
+    // Controlled collapse state lets us hide the sidebar's default header
+    // bar and put our own collapse button inline with the first section
+    // header (Messages), keeping that row at the top of the rail.
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [hiddenConversationIds, setHiddenConversationIds] = useState(() => new Set());
+    const CHAT_SIDEBAR_WIDTH_KEY = "milady:chat:conversations-sidebar:width";
+    const CHAT_SIDEBAR_DEFAULT_WIDTH = 240;
+    const CHAT_SIDEBAR_MIN_WIDTH = 200;
+    const CHAT_SIDEBAR_MAX_WIDTH = 520;
+    const [sidebarWidth, setSidebarWidth] = useState(() => {
+        if (typeof window === "undefined")
+            return CHAT_SIDEBAR_DEFAULT_WIDTH;
+        try {
+            const raw = window.localStorage.getItem(CHAT_SIDEBAR_WIDTH_KEY);
+            const parsed = raw ? Number.parseInt(raw, 10) : NaN;
+            if (Number.isFinite(parsed)) {
+                return Math.min(Math.max(parsed, CHAT_SIDEBAR_MIN_WIDTH), CHAT_SIDEBAR_MAX_WIDTH);
+            }
+        }
+        catch {
+            /* ignore */
+        }
+        return CHAT_SIDEBAR_DEFAULT_WIDTH;
+    });
+    const handleSidebarWidthChange = useCallback((next) => {
+        setSidebarWidth(next);
+        try {
+            window.localStorage.setItem(CHAT_SIDEBAR_WIDTH_KEY, String(next));
+        }
+        catch {
+            /* ignore */
+        }
+    }, []);
+    const toggleSectionCollapsed = useCallback((key) => {
+        setCollapsedSections((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const loadInboxChats = useCallback(async () => {
+        try {
+            const response = await client.getInboxChats();
+            setInboxChats(response.chats.map((chat) => ({
+                avatarUrl: chat.avatarUrl,
+                canSend: chat.canSend,
+                id: chat.id,
+                lastMessageAt: chat.lastMessageAt,
+                roomType: chat.roomType,
+                source: chat.source,
+                transportSource: chat.transportSource,
+                title: chat.title,
+                worldId: chat.worldId,
+                worldLabel: chat.worldLabel,
+            })));
+        }
+        catch {
+            // Keep the last successful snapshot on transient failures.
+        }
+    }, []);
+    useEffect(() => {
+        void loadInboxChats();
+    }, [loadInboxChats]);
+    useIntervalWhenDocumentVisible(() => {
+        void loadInboxChats();
+    }, INBOX_CHATS_REFRESH_MS);
+    useEffect(() => {
+        const candidates = conversations.filter((conversation) => conversation.id !== activeConversationId &&
+            isLegacyUntitledConversationCandidate(conversation));
+        if (candidates.length === 0) {
+            setHiddenConversationIds((prev) => prev.size === 0 ? prev : new Set());
+            return;
+        }
+        let cancelled = false;
+        void Promise.all(candidates.map(async (conversation) => {
+            try {
+                const { messages } = await client.getConversationMessages(conversation.id);
+                const hasUserTurn = messages.some((message) => message.role === "user");
+                return hasUserTurn ? null : conversation.id;
+            }
+            catch {
+                return null;
+            }
+        })).then((ids) => {
+            if (cancelled)
+                return;
+            setHiddenConversationIds(new Set(ids.filter((id) => typeof id === "string")));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [activeConversationId, conversations]);
+    const visibleConversations = useMemo(() => conversations.filter((conversation) => !hiddenConversationIds.has(conversation.id)), [conversations, hiddenConversationIds]);
+    // Messages section: conversations live under the eliza scope.
+    const messagesModel = useMemo(() => buildConversationsSidebarModel({
+        conversations: visibleConversations,
+        inboxChats,
+        searchQuery: "",
+        sourceScope: ELIZA_SOURCE_SCOPE,
+        t,
+        worldScope: ALL_WORLDS_SCOPE,
+    }), [inboxChats, t, visibleConversations]);
+    // Connector sections: surfaces every active connector (Discord, Telegram,
+    // …) grouped by world. One section per (source, world) tuple.
+    const connectorsModel = useMemo(() => buildConversationsSidebarModel({
+        conversations: [],
+        inboxChats,
+        searchQuery: "",
+        sourceScope: ALL_CONNECTORS_SOURCE_SCOPE,
+        t,
+        worldScope: ALL_WORLDS_SCOPE,
+    }), [inboxChats, t]);
+    const openRenameDialog = (conversation) => {
+        setConfirmDeleteId(null);
+        setMenuConversation(null);
+        setRenameTarget({ id: conversation.id, title: conversation.title });
+    };
+    const openActionsMenu = (event, conversation) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setConfirmDeleteId(null);
+        setMenuConversation(conversation);
+        if ("touches" in event) {
+            const touch = event.touches[0] ?? event.changedTouches[0];
+            setMenuPosition({ x: touch?.clientX ?? 0, y: touch?.clientY ?? 0 });
+            return;
+        }
+        setMenuPosition({ x: event.clientX, y: event.clientY });
+    };
+    const handleConfirmDelete = async (id) => {
+        if (deletingId)
+            return;
+        setDeletingId(id);
+        try {
+            await handleDeleteConversation(id);
+        }
+        finally {
+            setDeletingId(null);
+            setConfirmDeleteId((current) => (current === id ? null : current));
+        }
+    };
+    const spawnShellBusyRef = useRef(false);
+    const spawnShell = useCallback(async () => {
+        if (spawnShellBusyRef.current)
+            return;
+        spawnShellBusyRef.current = true;
+        try {
+            const { sessionId } = await client.spawnShellSession();
+            setState("activeInboxChat", null);
+            setState("activeTerminalSessionId", sessionId);
+            setTab("chat");
+        }
+        catch (err) {
+            console.error("[ConversationsSidebar] spawnShellSession failed:", err);
+        }
+        finally {
+            spawnShellBusyRef.current = false;
+        }
+    }, [setState, setTab]);
+    const selectTerminalSession = useCallback((sessionId) => {
+        setState("activeInboxChat", null);
+        setState("activeTerminalSessionId", sessionId);
+        setTab("chat");
+        onClose?.();
+    }, [onClose, setState, setTab]);
+    // If a terminal session is active but its section is collapsed, make
+    // sure the Terminal section stays visible so the user can see what's
+    // selected. Same guarantee for inbox/connector selections.
+    useEffect(() => {
+        if (!activeTerminalSessionId)
+            return;
+        setCollapsedSections((prev) => {
+            if (!prev.has(TERMINAL_SOURCE_SCOPE))
+                return prev;
+            const next = new Set(prev);
+            next.delete(TERMINAL_SOURCE_SCOPE);
+            return next;
+        });
+    }, [activeTerminalSessionId]);
+    const handleRowSelect = (row) => {
+        setConfirmDeleteId(null);
+        setMenuConversation(null);
+        if (isTerminalRow(row)) {
+            selectTerminalSession(row.id);
+            return;
+        }
+        if (row.kind === "inbox") {
+            setState("activeTerminalSessionId", null);
+            setState("activeInboxChat", {
+                avatarUrl: row.avatarUrl,
+                canSend: row.kind === "inbox" && typeof row.canSend === "boolean"
+                    ? row.canSend
+                    : undefined,
+                id: row.id,
+                source: row.source ?? "",
+                transportSource: row.transportSource,
+                title: row.title,
+                worldId: row.worldId,
+                worldLabel: row.worldLabel,
+            });
+        }
+        else {
+            setState("activeInboxChat", null);
+            setState("activeTerminalSessionId", null);
+            void handleSelectConversation(row.id);
+        }
+        setTab("chat");
+        onClose?.();
+    };
+    const handleNewChat = () => {
+        setState("activeInboxChat", null);
+        setTab("chat");
+        void handleNewConversation();
+        onClose?.();
+    };
+    const handleManageConnections = () => {
+        if (tab === "connectors") {
+            setTab("chat");
+        }
+        else {
+            setTab("connectors");
+        }
+        onClose?.();
+    };
+    const isGameModal = variant === "game-modal";
+    const isManageConnectionsActive = tab === "connectors";
+    // Plugins supply the scope-chip icons, so load them eagerly (not only
+    // when the user opens the manage panel).
+    useEffect(() => {
+        void ensurePluginsLoaded();
+    }, [ensurePluginsLoaded]);
+    const connectorPlugins = useMemo(() => plugins.filter((p) => p.category === "connector" &&
+        !ALWAYS_ON_PLUGIN_IDS.has(p.id) &&
+        p.visible !== false), [plugins]);
+    const [togglingPlugins, setTogglingPlugins] = useState(new Set());
+    const handleConnectorToggle = useCallback(async (pluginId, enabled) => {
+        setTogglingPlugins((prev) => new Set(prev).add(pluginId));
+        try {
+            await handlePluginToggle(pluginId, enabled);
+        }
+        finally {
+            setTogglingPlugins((prev) => {
+                const next = new Set(prev);
+                next.delete(pluginId);
+                return next;
+            });
+        }
+    }, [handlePluginToggle]);
+    const renderConnectorIcon = useCallback((plugin) => {
+        const Brand = getBrandIcon(plugin.id);
+        if (Brand)
+            return _jsx(Brand, { className: "h-4 w-4" });
+        const icon = resolveIcon(plugin);
+        if (!icon)
+            return _jsx("span", { className: "text-sm", children: "\uD83E\uDDE9" });
+        if (typeof icon === "string") {
+            const src = iconImageSource(icon);
+            return src ? (_jsx("img", { src: src, alt: "", className: "h-4 w-4 shrink-0 rounded-[var(--radius-sm)] object-contain", onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                } })) : (_jsx("span", { className: "text-sm", children: icon }));
+        }
+        const IconComponent = icon;
+        return _jsx(IconComponent, { className: "h-4 w-4" });
+    }, []);
+    const terminalRows = useMemo(() => ptySessions.map((session) => ({
+        id: session.sessionId,
+        kind: "conversation",
+        sortKey: 0,
+        source: TERMINAL_SOURCE_SCOPE,
+        sourceKey: TERMINAL_SOURCE_SCOPE,
+        title: session.label,
+        updatedAtLabel: "",
+        worldKey: null,
+    })), [ptySessions]);
+    const messagesSection = useMemo(() => ({
+        key: ELIZA_SOURCE_SCOPE,
+        label: t("conversations.sectionMessages", { defaultValue: "Messages" }),
+        icon: _jsx(MessagesSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        rows: messagesModel.rows,
+    }), [messagesModel.rows, t]);
+    const terminalIndicator = useMemo(() => {
+        if (ptySessions.length === 0)
+            return null;
+        // Choose the most-alerting status so the header dot reflects the session
+        // that most needs attention: error > blocked > active/tool_running.
+        const hasError = ptySessions.some((s) => s.status === "error");
+        const hasBlocked = ptySessions.some((s) => s.status === "blocked");
+        const hasActive = ptySessions.some((s) => PULSE_STATUSES.has(s.status));
+        const dominant = hasError
+            ? "error"
+            : hasBlocked
+                ? "blocked"
+                : hasActive
+                    ? "active"
+                    : (ptySessions[0]?.status ?? "active");
+        const dotClass = STATUS_DOT[dominant] ?? "bg-muted";
+        const pulse = PULSE_STATUSES.has(dominant) ? " animate-pulse" : "";
+        return (_jsxs("span", { "aria-hidden": true, "data-testid": "channel-section-indicator-terminal", className: "inline-flex items-center gap-1 rounded-full bg-bg-hover/40 px-1.5 py-0.5 text-3xs font-semibold tabular-nums text-muted", children: [_jsx("span", { className: `inline-block h-1.5 w-1.5 shrink-0 rounded-full ${dotClass}${pulse}` }), ptySessions.length] }));
+    }, [ptySessions]);
+    const terminalSection = useMemo(() => ({
+        key: TERMINAL_SOURCE_SCOPE,
+        label: t("conversations.scopeTerminal", { defaultValue: "Terminal" }),
+        icon: _jsx(TerminalIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        indicator: terminalIndicator,
+        rows: terminalRows,
+    }), [terminalIndicator, terminalRows, t]);
+    // Connector sections: one section per source (Discord, Telegram, …) with
+    // every room from that source listed underneath. No world sub-grouping
+    // and no time-bucket headers — just a flat, newest-first list.
+    // Connector sections: one section per (source, world) tuple. Each Discord
+    // server / Telegram account / etc. gets its own collapsible header listing
+    // its channels. Falls back to a single source-level section if a connector
+    // doesn't expose worlds.
+    const connectorSections = useMemo(() => {
+        const groups = new Map();
+        for (const row of connectorsModel.rows) {
+            const sourceKey = row.sourceKey;
+            const worldKey = row.worldKey;
+            const groupKey = worldKey ? `${sourceKey}:${worldKey}` : sourceKey;
+            const sourceMeta = getChatSourceMeta(sourceKey);
+            const label = row.worldLabel?.trim() || sourceMeta.label;
+            const existing = groups.get(groupKey);
+            if (existing) {
+                existing.rows.push(row);
+                continue;
+            }
+            groups.set(groupKey, {
+                key: groupKey,
+                label,
+                sourceKey,
+                worldKey,
+                rows: [row],
+            });
+        }
+        return Array.from(groups.values())
+            .map((group) => {
+            const Brand = getBrandIcon(group.sourceKey);
+            return {
+                ...group,
+                icon: Brand ? (_jsx(Brand, { className: "h-3.5 w-3.5" })) : (_jsx(ChatSourceIcon, { source: group.sourceKey, className: "h-3.5 w-3.5", decorative: true })),
+                rows: [...group.rows].sort((left, right) => right.sortKey - left.sortKey),
+            };
+        })
+            .sort((left, right) => {
+            // Group by source first, then alphabetical by world label so all
+            // Discord servers cluster, all Telegram accounts cluster, etc.
+            if (left.sourceKey !== right.sourceKey) {
+                return left.sourceKey.localeCompare(right.sourceKey);
+            }
+            return left.label.localeCompare(right.label);
+        });
+    }, [connectorsModel.rows]);
+    const terminalListId = activeTerminalSessionId
+        ? `${TERMINAL_ID_PREFIX}${activeTerminalSessionId}`
+        : null;
+    const activeListId = activeTerminalSessionId
+        ? terminalListId
+        : activeInboxChat
+            ? `${INBOX_ID_PREFIX}${activeInboxChat.id}`
+            : activeConversationId;
+    // Flat row list for the collapsed rail (mobile / collapsed sidebar).
+    const displayRows = useMemo(() => [
+        ...messagesSection.rows,
+        ...terminalSection.rows,
+        ...connectorSections.flatMap((s) => s.rows),
+    ], [messagesSection.rows, terminalSection.rows, connectorSections]);
+    const showNewChatAction = tab === "chat";
+    const showNewTerminalAction = tab === "chat";
+    const manageConnectionsButton = (() => {
+        const channelsLabel = t("conversations.channels", {
+            defaultValue: "Channels",
+        });
+        const manageLabel = t("conversations.manageConnections", {
+            defaultValue: "Manage",
+        });
+        const toggleLabel = isManageConnectionsActive ? channelsLabel : manageLabel;
+        const ToggleIcon = isManageConnectionsActive ? MessagesSquare : Settings2;
+        return (_jsxs("button", { type: "button", "data-testid": "chat-sidebar-manage-toggle", "aria-pressed": isManageConnectionsActive, "aria-label": toggleLabel, title: toggleLabel, onClick: handleManageConnections, className: `inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[var(--radius-sm)] bg-transparent px-2 text-[11px] leading-none font-medium whitespace-nowrap transition-colors ${isManageConnectionsActive ? "text-txt" : "text-muted hover:text-txt"}`, children: [_jsx(ToggleIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }), _jsx("span", { children: toggleLabel })] }));
+    })();
+    return (_jsxs(TooltipProvider, { delayDuration: 280, skipDelayDuration: 120, children: [_jsx(ConversationRenameDialog, { open: renameTarget !== null, conversationId: renameTarget?.id ?? null, initialTitle: renameTarget?.title ?? "", onClose: () => setRenameTarget(null) }), _jsxs(DropdownMenu, { open: menuConversation !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setMenuConversation(null);
+                }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { ref: menuAnchorRef, "aria-hidden": true, className: "fixed h-0 w-0 pointer-events-none", style: {
+                                left: menuPosition.x,
+                                top: menuPosition.y,
+                            } }) }), menuConversation ? (_jsxs(DropdownMenuContent, { sideOffset: 6, align: "start", className: "w-40", onCloseAutoFocus: (event) => event.preventDefault(), onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onPointerDownOutside: () => setMenuConversation(null), onInteractOutside: () => setMenuConversation(null), avoidCollisions: true, collisionPadding: 12, children: [_jsx(DropdownMenuItem, { "data-testid": "conv-menu-edit", onClick: () => {
+                                    if (!menuConversation)
+                                        return;
+                                    openRenameDialog(menuConversation);
+                                }, children: t("conversations.rename") }), _jsx(DropdownMenuItem, { "data-testid": "conv-menu-delete", className: "text-danger focus:text-danger", onClick: () => {
+                                    if (!menuConversation)
+                                        return;
+                                    setRenameTarget(null);
+                                    setConfirmDeleteId(menuConversation.id);
+                                    setMenuConversation(null);
+                                }, children: t("conversations.delete") })] })) : null] }), _jsx(AppPageSidebar, { testId: "conversations-sidebar", variant: mobile ? "mobile" : isGameModal ? "game-modal" : "default", className: mobile || isGameModal ? "!mt-0" : undefined, collapsible: !mobile && !isGameModal, collapsed: !mobile && !isGameModal ? sidebarCollapsed : undefined, onCollapsedChange: !mobile && !isGameModal ? setSidebarCollapsed : undefined, resizable: !mobile && !isGameModal, width: !mobile && !isGameModal ? sidebarWidth : undefined, minWidth: CHAT_SIDEBAR_MIN_WIDTH, maxWidth: CHAT_SIDEBAR_MAX_WIDTH, onWidthChange: handleSidebarWidthChange, onCollapseRequest: () => setSidebarCollapsed(true), contentIdentity: mobile ? "chat-mobile" : isGameModal ? "chat-modal" : "chat", collapseButtonTestId: "chat-sidebar-collapse-toggle", expandButtonTestId: "chat-sidebar-expand-toggle", collapseButtonAriaLabel: t("aria.closePanel"), expandButtonAriaLabel: t("aria.expandChatsPanel"), bottomAction: !mobile && !isGameModal ? manageConnectionsButton : undefined, collapsedRailAction: showNewTerminalAction ? (_jsx(SidebarCollapsedActionButton, { "aria-label": t("conversations.newTerminal", {
+                        defaultValue: "New terminal",
+                    }), onClick: () => void spawnShell(), children: _jsx(Plus, { className: "h-4 w-4" }) })) : showNewChatAction ? (_jsx(SidebarCollapsedActionButton, { "aria-label": t("conversations.newChat"), onClick: handleNewChat, children: _jsx(Plus, { className: "h-4 w-4" }) })) : undefined, collapsedRailItems: displayRows.map((row) => (_jsx(SidebarContent.RailItem, { "aria-label": row.title, title: row.title, active: rowListId(row) === activeListId, indicatorTone: row.kind === "conversation" &&
+                        !isTerminalRow(row) &&
+                        unreadConversations.has(row.id)
+                        ? "accent"
+                        : undefined, onClick: () => handleRowSelect(row), children: renderRailIdentity(row) }, rowListId(row)))), onMobileClose: mobile ? onClose : undefined, mobileCloseLabel: t("aria.closePanel"), mobileTitle: mobile ? (_jsx(SidebarContent.SectionLabel, { children: t("conversations.chats") })) : undefined, mobileMeta: mobile ? String(displayRows.length) : undefined, "data-no-window-drag": "", "aria-label": t("conversations.chats"), children: _jsx(SidebarScrollRegion, { variant: isGameModal ? "game-modal" : "default", className: isGameModal ? undefined : "px-1 pb-2 pt-2", children: _jsx(SidebarPanel, { variant: isGameModal ? "game-modal" : "default", className: isGameModal ? undefined : "bg-transparent gap-0 p-0 shadow-none", children: isManageConnectionsActive ? (_jsx("div", { className: "space-y-1", children: connectorPlugins.length === 0 ? (_jsx(SidebarContent.EmptyState, { className: "px-4 py-6", children: t("pluginsview.NoConnectorsAvailable", {
+                                    defaultValue: "No connectors available.",
+                                }) })) : (connectorPlugins.map((plugin) => {
+                                const isToggleBusy = togglingPlugins.has(plugin.id);
+                                const toggleDisabled = isToggleBusy ||
+                                    (togglingPlugins.size > 0 && !isToggleBusy);
+                                return (_jsxs(SidebarContent.Item, { as: "div", className: "items-center gap-1.5 px-2.5 py-2", children: [_jsxs(SidebarContent.ItemButton, { className: "items-center gap-2", onClick: () => {
+                                                /* selecting handled by main content */
+                                            }, children: [_jsx(SidebarContent.ItemIcon, { className: "mt-0 h-8 w-8 shrink-0 p-1.5", children: renderConnectorIcon(plugin) }), _jsx(SidebarContent.ItemBody, { children: _jsx("span", { className: "block truncate text-sm font-semibold leading-5 text-txt", children: plugin.name }) })] }), _jsx(Switch, { checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => {
+                                                event.stopPropagation();
+                                            }, onKeyDown: (event) => {
+                                                event.stopPropagation();
+                                            }, onCheckedChange: (checked) => {
+                                                void handleConnectorToggle(plugin.id, checked);
+                                            }, "aria-label": `${plugin.enabled ? t("common.off") : t("common.on")} ${plugin.name}` })] }, plugin.id));
+                            })) })) : (_jsxs("div", { className: "mt-0.5 space-y-2", children: [_jsx(CollapsibleChannelSection, { sectionKey: messagesSection.key, label: messagesSection.label, icon: messagesSection.icon, rows: messagesSection.rows, collapsed: collapsedSections.has(messagesSection.key), onToggleCollapsed: toggleSectionCollapsed, onAdd: showNewChatAction ? handleNewChat : undefined, addLabel: t("conversations.newChat", {
+                                        defaultValue: "New chat",
+                                    }), emptyLabel: t("conversations.noneApp", {
+                                        defaultValue: "No chats yet",
+                                    }), activeListId: activeListId, rowListId: rowListId, isTerminalRow: isTerminalRow, deletingId: deletingId, confirmDeleteId: confirmDeleteId, unreadConversations: unreadConversations, mobile: mobile, variant: variant, t: t, onCancelDelete: () => setConfirmDeleteId(null), onConfirmDelete: handleConfirmDelete, onOpenActions: openActionsMenu, onRequestDeleteConfirm: (row) => {
+                                        setMenuConversation(null);
+                                        setRenameTarget(null);
+                                        setConfirmDeleteId(row.id);
+                                    }, onRequestRename: (row) => openRenameDialog({ id: row.id, title: row.title }), onSelectRow: handleRowSelect }), _jsx(CollapsibleChannelSection, { sectionKey: terminalSection.key, label: terminalSection.label, icon: terminalSection.icon, indicator: terminalSection.indicator, rows: terminalSection.rows, collapsed: collapsedSections.has(terminalSection.key), onToggleCollapsed: toggleSectionCollapsed, onAdd: showNewTerminalAction ? () => void spawnShell() : undefined, addLabel: t("conversations.newTerminal", {
+                                        defaultValue: "New terminal",
+                                    }), activeListId: activeListId, rowListId: rowListId, isTerminalRow: isTerminalRow, deletingId: deletingId, confirmDeleteId: confirmDeleteId, unreadConversations: unreadConversations, mobile: mobile, variant: variant, t: t, onCancelDelete: () => setConfirmDeleteId(null), onConfirmDelete: handleConfirmDelete, onOpenActions: openActionsMenu, onRequestDeleteConfirm: (row) => {
+                                        setMenuConversation(null);
+                                        setRenameTarget(null);
+                                        setConfirmDeleteId(row.id);
+                                    }, onRequestRename: (row) => openRenameDialog({ id: row.id, title: row.title }), onSelectRow: handleRowSelect }), connectorSections.map((section) => (_jsx(CollapsibleChannelSection, { sectionKey: section.key, label: section.label, icon: section.icon, rows: section.rows, collapsed: collapsedSections.has(section.key), onToggleCollapsed: toggleSectionCollapsed, emptyLabel: t("conversations.none", {
+                                        defaultValue: "No chats in this view",
+                                    }), activeListId: activeListId, rowListId: rowListId, isTerminalRow: isTerminalRow, deletingId: deletingId, confirmDeleteId: confirmDeleteId, unreadConversations: unreadConversations, mobile: mobile, variant: variant, t: t, onCancelDelete: () => setConfirmDeleteId(null), onConfirmDelete: handleConfirmDelete, onOpenActions: openActionsMenu, onRequestDeleteConfirm: (row) => {
+                                        setMenuConversation(null);
+                                        setRenameTarget(null);
+                                        setConfirmDeleteId(row.id);
+                                    }, onRequestRename: (row) => openRenameDialog({ id: row.id, title: row.title }), onSelectRow: handleRowSelect }, section.key)))] })) }) }) })] }));
+}
+function CollapsibleChannelSection({ sectionKey, label, icon, indicator, rows, collapsed, onToggleCollapsed, onAdd, addLabel, emptyLabel, activeListId, rowListId, isTerminalRow, deletingId, confirmDeleteId, unreadConversations, mobile, variant, t, onCancelDelete, onConfirmDelete, onOpenActions, onRequestDeleteConfirm, onRequestRename, onSelectRow, }) {
+    return (_jsx(CollapsibleSidebarSection, { sectionKey: sectionKey, label: label, icon: icon, indicator: indicator, collapsed: collapsed, onToggleCollapsed: onToggleCollapsed, onAdd: onAdd, addLabel: addLabel, emptyLabel: emptyLabel, emptyClassName: "pl-7 pr-3 py-1 text-2xs text-muted", bodyClassName: "space-y-0 pl-4", hoverActionsOnDesktop: !mobile, testIdPrefix: "channel-section", children: rows.map((row) => {
+            const conversationId = rowListId(row);
+            return (_jsx(ChatConversationItem, { conversation: {
+                    id: conversationId,
+                    ...(row.source ? { source: row.source } : {}),
+                    title: row.title,
+                    updatedAtLabel: row.updatedAtLabel,
+                }, deleting: deletingId === row.id, isActive: conversationId === activeListId, isConfirmingDelete: row.kind === "conversation" &&
+                    !isTerminalRow(row) &&
+                    confirmDeleteId === row.id, isUnread: row.kind === "conversation" &&
+                    !isTerminalRow(row) &&
+                    unreadConversations.has(row.id), labels: {
+                    actions: t("conversations.actions", {
+                        defaultValue: "More actions",
+                    }),
+                    delete: t("conversations.delete"),
+                    deleteConfirm: t("conversations.deleteConfirm"),
+                    deleteNo: t("common.no"),
+                    deleteYes: t("common.yes"),
+                    rename: t("conversations.rename"),
+                }, mobile: mobile, onCancelDelete: onCancelDelete, onConfirmDelete: () => {
+                    if (row.kind === "inbox" || isTerminalRow(row))
+                        return;
+                    void onConfirmDelete(row.id);
+                }, onOpenActions: (event) => {
+                    if (row.kind === "inbox" || isTerminalRow(row)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        return;
+                    }
+                    onOpenActions(event, { id: row.id, title: row.title });
+                }, onRequestDeleteConfirm: () => {
+                    if (row.kind === "inbox" || isTerminalRow(row))
+                        return;
+                    onRequestDeleteConfirm(row);
+                }, onRequestRename: () => {
+                    if (row.kind === "inbox" || isTerminalRow(row))
+                        return;
+                    onRequestRename(row);
+                }, onSelect: () => onSelectRow(row), variant: variant }, conversationId));
+        }) }));
+}

package/packages/app-core/src/components/conversations/brand-icons.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+type BrandIconProps = {
+    className?: string;
+};
+/**
+ * Look up a brand icon by a free-form source string (plugin id, display name,
+ * etc). Normalizes by stripping non-alphanumeric characters so `"google-chat"`,
+ * `"Google Chat"`, and `"googlechat"` all resolve to the same icon.
+ */
+export declare function getBrandIcon(source: string): React.ComponentType<BrandIconProps> | null;
+export {};
+//# sourceMappingURL=brand-icons.d.ts.map

package/packages/app-core/src/components/conversations/brand-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-icons.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/conversations/brand-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiFF;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,GACb,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,GAAG,IAAI,CAO5C"}

package/packages/app-core/src/components/conversations/brand-icons.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseSvgProps = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+};
+function makeIcon(path) {
+    return function BrandIcon({ className }) {
+        return (_jsx("svg", { ...baseSvgProps, "aria-hidden": "true", focusable: "false", className: className, children: _jsx("path", { d: path }) }));
+    };
+}
+const DiscordIcon = makeIcon("M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037 13.78 13.78 0 0 0-.608 1.25 18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.077.077 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.075.075 0 0 0-.041-.104 13.107 13.107 0 0 1-1.872-.892.075.075 0 0 1-.008-.125c.126-.094.252-.192.372-.292a.075.075 0 0 1 .078-.01c3.927 1.793 8.18 1.793 12.061 0a.075.075 0 0 1 .079.009c.12.099.246.198.372.293a.075.075 0 0 1-.006.125c-.598.349-1.22.646-1.873.891a.075.075 0 0 0-.04.105c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03ZM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z");
+const TelegramIcon = makeIcon("M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z");
+const SlackIcon = makeIcon("M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z");
+const WhatsappIcon = makeIcon("M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z");
+const InstagramIcon = makeIcon("M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z");
+const LineIcon = makeIcon("M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016a.63.63 0 0 1-.631.629.626.626 0 0 1-.51-.252l-2.443-3.317v2.94a.63.63 0 0 1-1.259 0V8.108a.627.627 0 0 1 .628-.629c.195 0 .375.105.502.249l2.443 3.33V8.108a.63.63 0 0 1 1.26 0v4.771zm-5.741 0a.63.63 0 0 1-.629.629.63.63 0 0 1-.63-.629V8.108a.631.631 0 0 1 1.259 0v4.771zm-2.466.629H4.917a.634.634 0 0 1-.631-.629V8.108a.631.631 0 0 1 1.262 0v4.141h1.155a.629.629 0 0 1 0 1.259zM24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314Z");
+const ImessageIcon = makeIcon("M12 0C5.373 0 0 4.975 0 11.111c0 3.497 1.745 6.616 4.472 8.652.162 1.08.892 2.61 2.088 3.85.052.054.134.09.213.082.038-.005.957-.178 1.844-.727.392-.243.735-.506 1.024-.768.749.123 1.528.186 2.359.186 6.627 0 12-4.975 12-11.111S18.627 0 12 0z");
+const MsTeamsIcon = makeIcon("M20.625 8.127h-6.254a.957.957 0 0 1-.957-.957V0a7.172 7.172 0 0 1 7.21 7.17v.957zM12.458 9.087h8.166c.37 0 .668.299.668.668V16.5c0 3.728-2.87 6.75-6.417 6.75-3.546 0-6.416-3.022-6.416-6.75V9.087h4.0zM8.04 5.523a3.579 3.579 0 1 1 7.158 0 3.579 3.579 0 0 1-7.158 0zM2.99 9.087h5.051c.37 0 .668.299.668.668V16.5c0 3.728-2.522 6.75-5.635 6.75-3.112 0-5.634-3.022-5.634-6.75 0 0 0-6.745 5.55-7.413zM0 9.087c0-2.485 2.016-4.5 4.5-4.5s4.5 2.015 4.5 4.5v.036a3.72 3.72 0 0 0-.918-.036H.918A3.72 3.72 0 0 0 0 9.123v-.036z");
+const SignalIcon = makeIcon("m9.12.35.27 1.09a10.845 10.845 0 0 0-3.015 1.25l-.578-.96A11.955 11.955 0 0 1 9.12.35Zm5.76 0-.27 1.09a10.845 10.845 0 0 1 3.015 1.25l.581-.96A11.955 11.955 0 0 0 14.88.35ZM2.308 5.819a10.94 10.94 0 0 0-1.25 3.014L-.032 8.56a12.05 12.05 0 0 1 1.379-3.323Zm19.634 2.738a10.87 10.87 0 0 0-1.25-3.014l-.96.578a10.845 10.845 0 0 1 1.249 3.015ZM1.068 14.88a10.81 10.81 0 0 1-.01-5.762l-1.09-.271a11.94 11.94 0 0 0 0 6.304Zm20.652-5.762a10.81 10.81 0 0 1 .01 5.762l1.09.271a11.94 11.94 0 0 0 0-6.304ZM2.888 18.185a10.856 10.856 0 0 1-1.566-2.762l-1.054.372a12.01 12.01 0 0 0 1.734 3.053Zm16.262 2.026a10.945 10.945 0 0 1-2.762 1.566l.371 1.054a12.033 12.033 0 0 0 3.052-1.734ZM5.43 20.747a10.84 10.84 0 0 1-2.23-2.23l-.907.659a11.95 11.95 0 0 0 2.48 2.479Zm12.834-18.26a10.856 10.856 0 0 1 2.762 1.566l.747-.854a12.02 12.02 0 0 0-3.053-1.735zM3.2 5.483a10.84 10.84 0 0 1 2.23-2.23l-.657-.907a11.95 11.95 0 0 0-2.479 2.48ZM8.836 22.706a10.815 10.815 0 0 1-2.948-1.093l-2.323.767a.547.547 0 0 1-.692-.691l.767-2.324a10.91 10.91 0 0 1-1.093-2.947l-1.075.305a11.923 11.923 0 0 0 1.04 2.882l-.793 2.403a1.635 1.635 0 0 0 2.069 2.068l2.403-.793a11.896 11.896 0 0 0 2.882 1.04ZM23.885 17.24l-1.053-.374a10.81 10.81 0 0 1-1.566 2.762l.854.747a11.933 11.933 0 0 0 1.735-3.136Zm-11.879 4.944a10.8 10.8 0 0 1-2.868-.383l-.309 1.074a11.935 11.935 0 0 0 6.354 0l-.309-1.074a10.801 10.801 0 0 1-2.868.383z");
+const GoogleChatIcon = makeIcon("M21 3H3a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h3v4l4.8-4H21a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-13 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z");
+const BRAND_ICONS = {
+    discord: DiscordIcon,
+    telegram: TelegramIcon,
+    slack: SlackIcon,
+    whatsapp: WhatsappIcon,
+    instagram: InstagramIcon,
+    line: LineIcon,
+    imessage: ImessageIcon,
+    msteams: MsTeamsIcon,
+    teams: MsTeamsIcon,
+    microsoftteams: MsTeamsIcon,
+    signal: SignalIcon,
+    googlechat: GoogleChatIcon,
+};
+/**
+ * Look up a brand icon by a free-form source string (plugin id, display name,
+ * etc). Normalizes by stripping non-alphanumeric characters so `"google-chat"`,
+ * `"Google Chat"`, and `"googlechat"` all resolve to the same icon.
+ */
+export function getBrandIcon(source) {
+    const normalized = source
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, "");
+    if (!normalized)
+        return null;
+    return BRAND_ICONS[normalized] ?? null;
+}