@base44/superagent-native 0.0.1

package/lib/module/ChannelsPanel.js

@@ -0,0 +1,728 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { CheckCircle2, Copy, ExternalLink, MessageCircle, MessageSquare, RefreshCw, Send, Unplug } from 'lucide-react-native';
+import { editorShellStyles } from "./editorShellStyles.js";
+import { styles } from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TELEGRAM_TOKEN_PATTERN = /^\d{5,15}:[A-Za-z0-9_-]{35,50}$/;
+const TELEGRAM_TOKEN_SEARCH = /\d{5,15}:[A-Za-z0-9_-]{35,50}/;
+export function ChannelsPanel({
+  agent,
+  channelStatus,
+  connectingChannelId,
+  isLoading,
+  onDisconnectTelegram,
+  onDisconnectIMessage,
+  onGenerateIMessageCode,
+  onGenerateLineCode,
+  onOpenIMessage,
+  onOpenLine,
+  onOpenTelegram,
+  onOpenWhatsApp,
+  onRefreshChannels,
+  onSetupTelegram,
+  onShareIMessageCode,
+  onShareLineCode
+}) {
+  const imessage = channelStatus?.imessage;
+  const telegram = channelStatus?.telegram;
+  const line = channelStatus?.line;
+  const whatsapp = channelStatus?.whatsapp;
+  const supportedCount = 4;
+  return /*#__PURE__*/_jsx(View, {
+    style: editorShellStyles.settingsStack,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: editorShellStyles.panel,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: editorShellStyles.panelHeader,
+        children: [/*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: editorShellStyles.panelTitle,
+            children: "Channels"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: editorShellStyles.panelSubtitle,
+            children: "Messaging surfaces this agent can use."
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: channelStyles.headerActions,
+          children: [isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: "#FF5A1F",
+            size: "small"
+          }) : null, onRefreshChannels ? /*#__PURE__*/_jsx(Pressable, {
+            accessibilityLabel: "Refresh channels",
+            accessibilityRole: "button",
+            disabled: isLoading,
+            onPress: () => onRefreshChannels(agent.id),
+            style: ({
+              pressed
+            }) => [channelStyles.iconButton, isLoading && channelStyles.disabled, pressed && styles.pressed],
+            children: /*#__PURE__*/_jsx(RefreshCw, {
+              color: "#F4F4F5",
+              size: 17,
+              strokeWidth: 2.4
+            })
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            style: editorShellStyles.countBadge,
+            children: supportedCount
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.stack,
+        children: [/*#__PURE__*/_jsx(WhatsAppChannel, {
+          agentId: agent.id,
+          isBusy: connectingChannelId === 'whatsapp',
+          isReady: !!whatsapp?.connectUrl,
+          onOpenWhatsApp: onOpenWhatsApp
+        }), /*#__PURE__*/_jsx(IMessageChannel, {
+          agentId: agent.id,
+          imessage: imessage,
+          isBusy: connectingChannelId === 'imessage',
+          onDisconnectIMessage: onDisconnectIMessage,
+          onGenerateIMessageCode: onGenerateIMessageCode,
+          onOpenIMessage: onOpenIMessage,
+          onShareIMessageCode: onShareIMessageCode
+        }), /*#__PURE__*/_jsx(TelegramChannel, {
+          agentId: agent.id,
+          isBusy: connectingChannelId === 'telegram',
+          onDisconnectTelegram: onDisconnectTelegram,
+          onOpenTelegram: onOpenTelegram,
+          onSetupTelegram: onSetupTelegram,
+          telegram: telegram
+        }), /*#__PURE__*/_jsx(LineChannel, {
+          agentId: agent.id,
+          isBusy: connectingChannelId === 'line',
+          line: line,
+          onGenerateLineCode: onGenerateLineCode,
+          onOpenLine: onOpenLine,
+          onShareLineCode: onShareLineCode
+        })]
+      })]
+    })
+  });
+}
+function WhatsAppChannel({
+  agentId,
+  isBusy,
+  isReady,
+  onOpenWhatsApp
+}) {
+  return /*#__PURE__*/_jsx(ChannelCard, {
+    accent: "#25D366",
+    body: "Open WhatsApp with the generated activation message for this Superagent.",
+    icon: /*#__PURE__*/_jsx(MessageCircle, {
+      color: "#111111",
+      size: 20,
+      strokeWidth: 2.45
+    }),
+    status: isReady ? 'Setup link ready' : 'Needs auth token',
+    title: "WhatsApp",
+    children: /*#__PURE__*/_jsx(View, {
+      style: channelStyles.actionRow,
+      children: /*#__PURE__*/_jsx(ChannelButton, {
+        disabled: !isReady || !onOpenWhatsApp || isBusy,
+        icon: /*#__PURE__*/_jsx(ExternalLink, {
+          color: "#111111",
+          size: 15,
+          strokeWidth: 2.4
+        }),
+        isBusy: isBusy,
+        label: "Open WhatsApp",
+        onPress: () => onOpenWhatsApp?.({
+          agentId
+        })
+      })
+    })
+  });
+}
+function IMessageChannel({
+  agentId,
+  imessage,
+  isBusy,
+  onDisconnectIMessage,
+  onGenerateIMessageCode,
+  onOpenIMessage,
+  onShareIMessageCode
+}) {
+  const activation = imessage?.activation;
+  const phoneNumber = imessage?.phoneNumber ?? activation?.phoneNumber ?? null;
+  const [localError, setLocalError] = useState(null);
+  const connectIMessage = async () => {
+    if (!onGenerateIMessageCode) {
+      return;
+    }
+    setLocalError(null);
+    try {
+      const generated = await onGenerateIMessageCode({
+        agentId
+      });
+      if (generated && onOpenIMessage) {
+        await onOpenIMessage({
+          agentId,
+          ...generated
+        });
+      }
+    } catch (error) {
+      setLocalError(error instanceof Error ? error.message : 'iMessage setup failed.');
+    }
+  };
+  return /*#__PURE__*/_jsx(ChannelCard, {
+    accent: "#3B82F6",
+    body: imessage?.connected ? 'Connected and active via iMessage.' : 'Open Messages with the activation code ready to send.',
+    icon: /*#__PURE__*/_jsx(MessageSquare, {
+      color: "#FFFFFF",
+      size: 20,
+      strokeWidth: 2.45
+    }),
+    status: imessage?.connected ? 'Active' : activation ? 'Code ready' : 'Not connected',
+    title: "iMessage",
+    children: imessage?.connected ? /*#__PURE__*/_jsxs(View, {
+      style: channelStyles.connectedBox,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: channelStyles.connectedTitleRow,
+        children: [/*#__PURE__*/_jsx(CheckCircle2, {
+          color: "#34D399",
+          size: 17,
+          strokeWidth: 2.4
+        }), /*#__PURE__*/_jsx(Text, {
+          style: channelStyles.connectedTitle,
+          children: "iMessage connection"
+        })]
+      }), phoneNumber ? /*#__PURE__*/_jsxs(Text, {
+        style: channelStyles.connectedBody,
+        children: ["Number: ", phoneNumber]
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: channelStyles.actionRow,
+        children: /*#__PURE__*/_jsx(ChannelButton, {
+          danger: true,
+          disabled: !onDisconnectIMessage || isBusy,
+          icon: /*#__PURE__*/_jsx(Unplug, {
+            color: "#FCA5A5",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          isBusy: isBusy,
+          label: "Disconnect",
+          onPress: () => onDisconnectIMessage?.({
+            agentId
+          })
+        })
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: channelStyles.setupStack,
+      children: [localError ? /*#__PURE__*/_jsx(Text, {
+        style: channelStyles.errorText,
+        children: localError
+      }) : null, activation ? /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.connectedBox,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: channelStyles.codeLabel,
+          children: "Text this activation code"
+        }), /*#__PURE__*/_jsx(Text, {
+          selectable: true,
+          style: channelStyles.activationCode,
+          children: activation.code
+        }), /*#__PURE__*/_jsxs(Text, {
+          selectable: true,
+          style: channelStyles.connectedBody,
+          children: ["To: ", activation.phoneNumber]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: channelStyles.expiryText,
+          children: "Code expires in 30 minutes."
+        })]
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.actionRow,
+        children: [/*#__PURE__*/_jsx(ChannelButton, {
+          disabled: !onGenerateIMessageCode || isBusy,
+          icon: /*#__PURE__*/_jsx(MessageSquare, {
+            color: "#FFFFFF",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          isBusy: isBusy,
+          label: "Connect via iMessage",
+          onPress: connectIMessage,
+          secondary: true
+        }), activation ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ChannelButton, {
+            disabled: !onOpenIMessage || isBusy,
+            icon: /*#__PURE__*/_jsx(ExternalLink, {
+              color: "#111111",
+              size: 15,
+              strokeWidth: 2.4
+            }),
+            label: "Open Messages",
+            onPress: () => onOpenIMessage?.({
+              agentId,
+              ...activation
+            })
+          }), /*#__PURE__*/_jsx(ChannelButton, {
+            secondary: true,
+            disabled: !onShareIMessageCode,
+            icon: /*#__PURE__*/_jsx(Copy, {
+              color: "#F4F4F5",
+              size: 15,
+              strokeWidth: 2.4
+            }),
+            label: "Share code",
+            onPress: () => onShareIMessageCode?.({
+              agentId,
+              ...activation
+            })
+          })]
+        }) : null]
+      })]
+    })
+  });
+}
+function TelegramChannel({
+  agentId,
+  isBusy,
+  onDisconnectTelegram,
+  onOpenTelegram,
+  onSetupTelegram,
+  telegram
+}) {
+  const [tokenText, setTokenText] = useState('');
+  const [tokenError, setTokenError] = useState(null);
+  const token = useMemo(() => extractTelegramToken(tokenText), [tokenText]);
+  const botTitle = telegram?.botName || telegram?.botUsername || 'Telegram bot';
+  const setupTelegram = async () => {
+    if (!token) {
+      setTokenError('Paste the BotFather token to connect Telegram.');
+      return;
+    }
+    setTokenError(null);
+    try {
+      await onSetupTelegram?.({
+        agentId,
+        token
+      });
+      setTokenText('');
+    } catch (error) {
+      setTokenError(error instanceof Error ? error.message : 'Telegram setup failed.');
+    }
+  };
+  return /*#__PURE__*/_jsx(ChannelCard, {
+    accent: "#37AEE2",
+    body: telegram?.connected ? `Connected as ${botTitle}.` : 'Paste a BotFather token to register the webhook.',
+    icon: /*#__PURE__*/_jsx(Send, {
+      color: "#FFFFFF",
+      size: 19,
+      strokeWidth: 2.45
+    }),
+    status: telegram?.connected ? 'Active' : 'Not connected',
+    title: "Telegram",
+    children: telegram?.connected ? /*#__PURE__*/_jsxs(View, {
+      style: channelStyles.connectedBox,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: channelStyles.connectedTitleRow,
+        children: [/*#__PURE__*/_jsx(CheckCircle2, {
+          color: "#34D399",
+          size: 17,
+          strokeWidth: 2.4
+        }), /*#__PURE__*/_jsx(Text, {
+          style: channelStyles.connectedTitle,
+          children: botTitle
+        })]
+      }), telegram.botUsername ? /*#__PURE__*/_jsxs(Text, {
+        style: channelStyles.connectedBody,
+        children: ["@", telegram.botUsername]
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.actionRow,
+        children: [telegram.botLink ? /*#__PURE__*/_jsx(ChannelButton, {
+          icon: /*#__PURE__*/_jsx(ExternalLink, {
+            color: "#111111",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          label: "Open bot",
+          onPress: () => onOpenTelegram?.({
+            agentId,
+            url: telegram.botLink || ''
+          })
+        }) : null, /*#__PURE__*/_jsx(ChannelButton, {
+          danger: true,
+          disabled: !onDisconnectTelegram || isBusy,
+          icon: /*#__PURE__*/_jsx(Unplug, {
+            color: "#FCA5A5",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          isBusy: isBusy,
+          label: "Disconnect",
+          onPress: () => onDisconnectTelegram?.({
+            agentId
+          })
+        })]
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: channelStyles.setupStack,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: channelStyles.helpText,
+        children: "Create a bot in BotFather, then paste the full token here."
+      }), /*#__PURE__*/_jsx(TextInput, {
+        autoCapitalize: "none",
+        autoCorrect: false,
+        multiline: true,
+        onChangeText: value => {
+          setTokenText(value);
+          if (tokenError) {
+            setTokenError(null);
+          }
+        },
+        placeholder: "123456789:AA...",
+        placeholderTextColor: "#71717A",
+        style: channelStyles.tokenInput,
+        value: tokenText
+      }), tokenError ? /*#__PURE__*/_jsx(Text, {
+        style: channelStyles.errorText,
+        children: tokenError
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: channelStyles.actionRow,
+        children: /*#__PURE__*/_jsx(ChannelButton, {
+          disabled: !onSetupTelegram || isBusy,
+          icon: /*#__PURE__*/_jsx(CheckCircle2, {
+            color: "#111111",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          isBusy: isBusy,
+          label: "Connect bot",
+          onPress: setupTelegram
+        })
+      })]
+    })
+  });
+}
+function LineChannel({
+  agentId,
+  isBusy,
+  line,
+  onGenerateLineCode,
+  onOpenLine,
+  onShareLineCode
+}) {
+  const activation = line?.activation;
+  return /*#__PURE__*/_jsx(ChannelCard, {
+    accent: "#06C755",
+    body: activation ? 'Activation code is ready. Add the bot in LINE, then send this code.' : 'Generate a short-lived activation code for the shared LINE bot.',
+    icon: /*#__PURE__*/_jsx(MessageCircle, {
+      color: "#FFFFFF",
+      size: 20,
+      strokeWidth: 2.45
+    }),
+    status: activation ? 'Code ready' : 'Not connected',
+    title: "LINE",
+    children: activation ? /*#__PURE__*/_jsxs(View, {
+      style: channelStyles.connectedBox,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: channelStyles.codeLabel,
+        children: "Activation code"
+      }), /*#__PURE__*/_jsx(Text, {
+        selectable: true,
+        style: channelStyles.activationCode,
+        children: activation.code
+      }), /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.actionRow,
+        children: [/*#__PURE__*/_jsx(ChannelButton, {
+          icon: /*#__PURE__*/_jsx(ExternalLink, {
+            color: "#111111",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          label: "Open LINE",
+          onPress: () => onOpenLine?.({
+            agentId,
+            url: activation.addFriendUrl
+          })
+        }), /*#__PURE__*/_jsx(ChannelButton, {
+          secondary: true,
+          icon: /*#__PURE__*/_jsx(Copy, {
+            color: "#F4F4F5",
+            size: 15,
+            strokeWidth: 2.4
+          }),
+          label: "Share code",
+          onPress: () => onShareLineCode?.({
+            agentId,
+            ...activation
+          })
+        })]
+      })]
+    }) : /*#__PURE__*/_jsx(View, {
+      style: channelStyles.actionRow,
+      children: /*#__PURE__*/_jsx(ChannelButton, {
+        disabled: !onGenerateLineCode || isBusy,
+        icon: /*#__PURE__*/_jsx(RefreshCw, {
+          color: "#111111",
+          size: 15,
+          strokeWidth: 2.4
+        }),
+        isBusy: isBusy,
+        label: "Generate code",
+        onPress: () => onGenerateLineCode?.({
+          agentId
+        })
+      })
+    })
+  });
+}
+function ChannelCard({
+  accent,
+  body,
+  children,
+  icon,
+  status,
+  title
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: channelStyles.card,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: channelStyles.cardHeader,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [channelStyles.channelIcon, {
+          backgroundColor: accent
+        }],
+        children: icon
+      }), /*#__PURE__*/_jsxs(View, {
+        style: channelStyles.channelText,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: channelStyles.titleRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: channelStyles.channelTitle,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: channelStyles.statusBadge,
+            children: status
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: channelStyles.channelBody,
+          children: body
+        })]
+      })]
+    }), children]
+  });
+}
+function ChannelButton({
+  danger,
+  disabled,
+  icon,
+  isBusy,
+  label,
+  onPress,
+  secondary
+}) {
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    disabled: disabled,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [channelStyles.button, secondary && channelStyles.buttonSecondary, danger && channelStyles.buttonDanger, disabled && channelStyles.disabled, pressed && styles.pressed],
+    children: [isBusy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: danger || secondary ? '#F4F4F5' : '#111111',
+      size: "small"
+    }) : icon, /*#__PURE__*/_jsx(Text, {
+      style: [channelStyles.buttonText, secondary && channelStyles.buttonTextSecondary, danger && channelStyles.buttonTextDanger],
+      children: label
+    })]
+  });
+}
+function extractTelegramToken(value) {
+  const trimmed = value.trim();
+  if (TELEGRAM_TOKEN_PATTERN.test(trimmed)) {
+    return trimmed;
+  }
+  return TELEGRAM_TOKEN_SEARCH.exec(trimmed)?.[0] ?? null;
+}
+const channelStyles = StyleSheet.create({
+  actionRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 12
+  },
+  activationCode: {
+    color: '#F4F4F5',
+    fontFamily: 'Courier',
+    fontSize: 20,
+    fontWeight: '900',
+    letterSpacing: 0,
+    marginTop: 5
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 999,
+    flexDirection: 'row',
+    gap: 6,
+    minHeight: 34,
+    paddingHorizontal: 12
+  },
+  buttonDanger: {
+    backgroundColor: '#351516',
+    borderColor: '#552022',
+    borderWidth: 1
+  },
+  buttonSecondary: {
+    backgroundColor: '#242427',
+    borderColor: '#353539',
+    borderWidth: 1
+  },
+  buttonText: {
+    color: '#111111',
+    fontSize: 12,
+    fontWeight: '900'
+  },
+  buttonTextDanger: {
+    color: '#FCA5A5'
+  },
+  buttonTextSecondary: {
+    color: '#F4F4F5'
+  },
+  card: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 14,
+    borderWidth: 1,
+    marginBottom: 10,
+    padding: 12
+  },
+  cardHeader: {
+    alignItems: 'flex-start',
+    flexDirection: 'row'
+  },
+  channelBody: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: 17,
+    marginTop: 4
+  },
+  channelIcon: {
+    alignItems: 'center',
+    borderRadius: 12,
+    height: 40,
+    justifyContent: 'center',
+    marginRight: 11,
+    width: 40
+  },
+  channelText: {
+    flex: 1,
+    minWidth: 0
+  },
+  channelTitle: {
+    color: '#F4F4F5',
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: '900'
+  },
+  codeLabel: {
+    color: '#8E8E93',
+    fontSize: 11,
+    fontWeight: '900',
+    textTransform: 'uppercase'
+  },
+  connectedBody: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 4
+  },
+  connectedBox: {
+    backgroundColor: '#101012',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    marginTop: 12,
+    padding: 11
+  },
+  connectedTitle: {
+    color: '#F4F4F5',
+    flex: 1,
+    fontSize: 13,
+    fontWeight: '900',
+    marginLeft: 6
+  },
+  connectedTitleRow: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  disabled: {
+    opacity: 0.55
+  },
+  errorText: {
+    color: '#FCA5A5',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 7
+  },
+  expiryText: {
+    color: '#71717A',
+    fontSize: 11,
+    fontWeight: '700',
+    marginTop: 7
+  },
+  headerActions: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8
+  },
+  helpText: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: 17
+  },
+  iconButton: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F23',
+    borderColor: '#2A2A2A',
+    borderRadius: 11,
+    borderWidth: 1,
+    height: 34,
+    justifyContent: 'center',
+    width: 34
+  },
+  setupStack: {
+    marginTop: 12
+  },
+  stack: {
+    padding: 10
+  },
+  statusBadge: {
+    backgroundColor: '#242427',
+    borderRadius: 10,
+    color: '#C7C7CC',
+    fontSize: 10,
+    fontWeight: '900',
+    marginLeft: 8,
+    overflow: 'hidden',
+    paddingHorizontal: 7,
+    paddingVertical: 4
+  },
+  titleRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  tokenInput: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    color: '#F4F4F5',
+    fontFamily: 'Courier',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 17,
+    marginTop: 9,
+    minHeight: 72,
+    paddingHorizontal: 11,
+    paddingVertical: 10,
+    textAlignVertical: 'top'
+  }
+});
+//# sourceMappingURL=ChannelsPanel.js.map