@nextclaw/ui 0.9.15 → 0.9.17

package/src/components/layout/Sidebar.tsx

@@ -122,147 +122,155 @@ export function Sidebar({ mode }: SidebarProps) {
   const navItems = mode === 'main' ? mainNavItems : settingsNavItems;
 
   return (
-    <aside className="w-[240px] shrink-0 flex flex-col h-full py-6 px-4 bg-secondary">
+    <aside className="w-[240px] shrink-0 flex h-full min-h-0 flex-col overflow-hidden bg-secondary px-4 py-6">
       {mode === 'settings' ? (
-        <div className="px-2 mb-6">
-          <NavLink
-            to="/chat"
-            className="group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+        <div className="shrink-0 px-2 pb-3">
+          <div
+            className="flex items-center gap-2 px-1 py-1"
+            data-testid="settings-sidebar-header"
           >
-            <ArrowLeft className="h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800" />
-            <span>{t('backToMain')}</span>
-          </NavLink>
-          <div className="mt-5 px-1">
-            <div className="flex items-center gap-2.5">
-              <Settings className="h-5 w-5 text-gray-700" />
-              <h1 className="text-[28px] leading-none font-semibold tracking-[-0.02em] text-gray-900">{t('settings')}</h1>
-            </div>
+            <NavLink
+              to="/chat"
+              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:text-gray-900"
+            >
+              <ArrowLeft className="h-3.5 w-3.5 shrink-0 text-gray-400 group-hover:text-gray-700" />
+              <span className="truncate">{t('backToMain')}</span>
+            </NavLink>
+            <span className="h-4 w-px shrink-0 bg-[#dddfe6]" aria-hidden="true" />
+            <h1 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{t('settings')}</h1>
           </div>
         </div>
       ) : (
-        <div className="px-2 mb-8">
+        <div className="shrink-0 px-2 pb-8">
           <BrandHeader className="flex items-center gap-2.5 cursor-pointer" />
         </div>
       )}
 
-      {/* Navigation */}
-      <nav className="flex-1 flex flex-col">
-        <ul className="space-y-1">
-          {navItems.map((item) => {
-            const Icon = item.icon;
+      <div className="flex min-h-0 flex-1 flex-col">
+        {/* Navigation */}
+        <nav className="custom-scrollbar min-h-0 flex-1 overflow-y-auto pr-1">
+          <ul className="space-y-1 pb-4">
+            {navItems.map((item) => {
+              const Icon = item.icon;
 
-            return (
-              <li key={item.target}>
-                <NavLink
-                  to={item.target}
-                  className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                  )}
-                >
-                  {({ isActive }) => (
-                    <>
-                      <Icon className={cn(
-                        'h-[17px] w-[17px] transition-colors',
-                        isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                      )} />
-                      <span className="flex-1 text-left">{item.label}</span>
-                    </>
-                  )}
-                </NavLink>
-              </li>
+              return (
+                <li key={item.target}>
+                  <NavLink
+                    to={item.target}
+                    className={({ isActive }) =>
+                      cn(
+                        'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
+                        isActive
+                          ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                          : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
+                      )
+                    }
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <Icon
+                          className={cn(
+                            'h-[17px] w-[17px] transition-colors',
+                            isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
+                          )}
+                        />
+                        <span className="flex-1 text-left">{item.label}</span>
+                      </>
+                    )}
+                  </NavLink>
+                </li>
               );
             })}
           </ul>
-      </nav>
+        </nav>
 
-      {/* Help Button */}
-      <div className="pt-3 border-t border-[#dde0ea] mt-3">
-        {mode === 'settings' ? (
-          <button
-            onClick={() => presenter.accountManager.openAccountPanel()}
-            className="mb-2 w-full rounded-xl px-3 py-2.5 text-left transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900"
-          >
-            <div className="flex items-start gap-3">
-              <KeyRound className={cn('mt-0.5 h-[17px] w-[17px]', accountConnected ? 'text-emerald-600' : 'text-gray-400')} />
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center justify-between gap-3">
-                  <p className="truncate text-[14px] font-medium text-gray-900">
-                    {accountEmail || t('remoteAccountEntryManage')}
+        {/* Footer actions stay reachable while the nav scrolls independently. */}
+        <div className="mt-3 shrink-0 border-t border-[#dde0ea] bg-secondary pt-3">
+          {mode === 'settings' ? (
+            <button
+              onClick={() => presenter.accountManager.openAccountPanel()}
+              className="mb-2 w-full rounded-xl px-3 py-2.5 text-left text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-900"
+              data-testid="settings-sidebar-account-entry"
+            >
+              <div className="flex items-start gap-3">
+                <KeyRound className="mt-0.5 h-[17px] w-[17px] shrink-0 text-gray-400" />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[14px] font-medium text-gray-600">
+                    {t('remoteAccountEntryManage')}
+                  </p>
+                  <p className="mt-1 truncate text-xs text-gray-500">
+                    {accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
                   </p>
                 </div>
-                <p className="mt-1 truncate text-xs text-gray-500">
-                  {accountConnected ? t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
-                </p>
               </div>
+            </button>
+          ) : null}
+          {mode === 'main' && (
+            <div className="mb-2">
+              <NavLink
+                to="/settings"
+                className={({ isActive }) =>
+                  cn(
+                    'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
+                    isActive
+                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                      : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
+                  )
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
+                    <span className="flex-1 text-left">{t('settings')}</span>
+                  </>
+                )}
+              </NavLink>
             </div>
-          </button>
-        ) : null}
-        {mode === 'main' && (
+          )}
           <div className="mb-2">
-            <NavLink
-              to="/settings"
-              className={({ isActive }) => cn(
-                'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base',
-                isActive
-                  ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                  : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
-              )}
-            >
-              {({ isActive }) => (
-                <>
-                  <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-                  <span className="flex-1 text-left">{t('settings')}</span>
-                </>
-              )}
-            </NavLink>
+            <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
+              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
+                <div className="flex min-w-0 items-center gap-3">
+                  <Palette className="h-[17px] w-[17px] text-gray-400" />
+                  <span className="text-left">{t('theme')}</span>
+                </div>
+                <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
+              </SelectTrigger>
+              <SelectContent>
+                {THEME_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value} className="text-xs">
+                    {t(option.labelKey)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-        )}
-        <div className="mb-2">
-          <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
-            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
-              <div className="flex items-center gap-3 min-w-0">
-                <Palette className="h-[17px] w-[17px] text-gray-400" />
-                <span className="text-left">{t('theme')}</span>
-              </div>
-              <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
-            </SelectTrigger>
-            <SelectContent>
-              {THEME_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value} className="text-xs">
-                  {t(option.labelKey)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="mb-2">
-          <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
-              <div className="flex items-center gap-3 min-w-0">
-                <Languages className="h-[17px] w-[17px] text-gray-400" />
-                <span className="text-left">{t('language')}</span>
-              </div>
-              <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
-            </SelectTrigger>
-            <SelectContent>
-              {LANGUAGE_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value} className="text-xs">
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="mb-2">
+            <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
+              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
+                <div className="flex min-w-0 items-center gap-3">
+                  <Languages className="h-[17px] w-[17px] text-gray-400" />
+                  <span className="text-left">{t('language')}</span>
+                </div>
+                <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
+              </SelectTrigger>
+              <SelectContent>
+                {LANGUAGE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value} className="text-xs">
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <button
+            onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
+            className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-800"
+          >
+            <BookOpen className="h-[17px] w-[17px] text-gray-400" />
+            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+          </button>
         </div>
-        <button
-          onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-800"
-        >
-          <BookOpen className="h-[17px] w-[17px] text-gray-400" />
-          <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
-        </button>
       </div>
     </aside>
   );

package/src/components/layout/sidebar.layout.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { Sidebar } from '@/components/layout/Sidebar';
+
+const mocks = vi.hoisted(() => ({
+  openAccountPanel: vi.fn(),
+  docOpen: vi.fn(),
+  remoteStatus: {
+    data: {
+      account: {
+        loggedIn: true,
+        email: 'user@example.com'
+      }
+    }
+  }
+}));
+
+vi.mock('@/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen
+  })
+}));
+
+vi.mock('@/presenter/app-presenter-context', () => ({
+  useAppPresenter: () => ({
+    accountManager: {
+      openAccountPanel: mocks.openAccountPanel
+    }
+  })
+}));
+
+vi.mock('@/hooks/useRemoteAccess', () => ({
+  useRemoteStatus: () => mocks.remoteStatus
+}));
+
+vi.mock('@/components/providers/I18nProvider', () => ({
+  useI18n: () => ({
+    language: 'en',
+    setLanguage: vi.fn()
+  })
+}));
+
+vi.mock('@/components/providers/ThemeProvider', () => ({
+  useTheme: () => ({
+    theme: 'warm',
+    setTheme: vi.fn()
+  })
+}));
+
+describe('Sidebar', () => {
+  it('keeps the settings sidebar bounded and lets the navigation scroll independently', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const aside = container.querySelector('aside');
+    const nav = container.querySelector('nav');
+
+    expect(aside?.className).toContain('min-h-0');
+    expect(aside?.className).toContain('overflow-hidden');
+    expect(nav?.className).toContain('flex-1');
+    expect(nav?.className).toContain('min-h-0');
+    expect(nav?.className).toContain('overflow-y-auto');
+  });
+
+  it('uses a compact single-row header for settings mode', () => {
+    render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const header = screen.getByTestId('settings-sidebar-header');
+
+    expect(header).toBeTruthy();
+    expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to Main' })).toBeTruthy();
+    expect(header.className).not.toContain('bg-white');
+    expect(header.className).not.toContain('rounded-2xl');
+  });
+
+  it('renders the account entry with the same neutral visual tone as other footer items', () => {
+    render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const accountEntry = screen.getByTestId('settings-sidebar-account-entry');
+
+    expect(accountEntry).toBeTruthy();
+    expect(screen.getByText('Account and Device Entry')).toBeTruthy();
+    expect(screen.getByText('user@example.com')).toBeTruthy();
+    expect(accountEntry.className).toContain('text-gray-600');
+  });
+});

package/src/hooks/use-channel-auth.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { pollChannelAuth, startChannelAuth } from '@/api/channel-auth';
+
+export function useStartChannelAuth() {
+  return useMutation({
+    mutationFn: ({ channel, data }: { channel: string; data?: unknown }) =>
+      startChannelAuth(channel, data as Parameters<typeof startChannelAuth>[1])
+  });
+}
+
+export function usePollChannelAuth() {
+  return useMutation({
+    mutationFn: ({ channel, data }: { channel: string; data: unknown }) =>
+      pollChannelAuth(channel, data as Parameters<typeof pollChannelAuth>[1])
+  });
+}

package/src/lib/i18n.channel-auth.ts

@@ -0,0 +1,37 @@
+export const CHANNEL_AUTH_LABELS: Record<string, { zh: string; en: string }> = {
+  weixinAuthTitle: { zh: '扫码连接微信', en: 'Connect Weixin by QR' },
+  weixinAuthDescription: { zh: '微信渠道现在以扫码连接为主流程。', en: 'Weixin now uses QR login as the primary setup flow.' },
+  weixinAuthHint: {
+    zh: '通常只需要点击按钮并扫码确认，连接成功后会自动写入配置。',
+    en: 'In most cases you only need to start the flow, scan the QR code, and confirm on your phone. The config will be saved automatically.'
+  },
+  weixinAuthCapabilityHint: {
+    zh: '连接成功后，Agent 可以通过微信渠道向已知微信用户主动发消息。',
+    en: 'After connecting, the agent can proactively message known Weixin users through this channel.'
+  },
+  weixinAuthPrimaryAccount: { zh: '当前默认账号', en: 'Current default account' },
+  weixinAuthConnectedAccounts: { zh: '已连接账号', en: 'Connected accounts' },
+  weixinAuthBaseUrl: { zh: '当前接口地址', en: 'Current API base URL' },
+  weixinAuthConnect: { zh: '扫码连接微信', en: 'Scan QR to connect Weixin' },
+  weixinAuthReconnect: { zh: '重新扫码连接', en: 'Reconnect with QR' },
+  weixinAuthStarting: { zh: '正在生成二维码...', en: 'Generating QR code...' },
+  weixinAuthWaiting: { zh: '等待扫码确认', en: 'Waiting for scan confirmation' },
+  weixinAuthScanned: { zh: '已扫码，等待确认', en: 'Scanned, waiting for confirmation' },
+  weixinAuthAuthorized: { zh: '已连接', en: 'Connected' },
+  weixinAuthNotConnected: { zh: '未连接', en: 'Not connected' },
+  weixinAuthRetryRequired: { zh: '二维码已失效，请重新扫码。', en: 'QR session expired. Please start again.' },
+  weixinAuthQrAlt: { zh: '微信登录二维码', en: 'Weixin login QR code' },
+  weixinAuthScanPrompt: { zh: '请用微信扫码，并在手机上确认登录。', en: 'Scan with Weixin and confirm the login on your phone.' },
+  weixinAuthExpiresAt: { zh: '二维码过期时间', en: 'QR expires at' },
+  weixinAuthOpenQr: { zh: '新窗口打开二维码', en: 'Open QR code in new tab' },
+  weixinAuthReadyTitle: { zh: '准备连接微信', en: 'Ready to connect Weixin' },
+  weixinAuthReadyDescription: {
+    zh: '点击左侧按钮后，这里会显示二维码。整个首配流程默认不需要手动填写底层参数。',
+    en: 'After you start the flow, the QR code will appear here. Most first-time setups do not require filling low-level fields manually.'
+  },
+  weixinAuthAdvancedTitle: { zh: '高级设置', en: 'Advanced settings' },
+  weixinAuthAdvancedDescription: {
+    zh: '仅在你需要自定义接口地址、账号映射或白名单时再展开这些字段。',
+    en: 'Expand these fields only when you need to customize the API base URL, account mapping, or allowlist.'
+  }
+};

package/src/lib/i18n.ts

@@ -1,16 +1,13 @@
 import { CHANNEL_LABELS } from './i18n.channels';
+import { CHANNEL_AUTH_LABELS } from './i18n.channel-auth';
 import { MARKETPLACE_LABELS } from './i18n.marketplace';
 import { REMOTE_LABELS } from './i18n.remote';
-
 export type I18nLanguage = 'zh' | 'en';
-
 const I18N_STORAGE_KEY = 'nextclaw.ui.language';
-
 export const LANGUAGE_OPTIONS: Array<{ value: I18nLanguage; label: string }> = [
   { value: 'en', label: 'English' },
   { value: 'zh', label: '中文' }
 ];
-
 const LANGUAGE_TO_LOCALE: Record<I18nLanguage, string> = {
   en: 'en-US',
   zh: 'zh-CN'
@@ -737,6 +734,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   docBrowserNewTab: { zh: '新建标签', en: 'New Tab' },
   docBrowserCloseTab: { zh: '关闭标签', en: 'Close Tab' },
   docBrowserTabUntitled: { zh: '未命名', en: 'Untitled' },
+  ...CHANNEL_AUTH_LABELS,
 };
 
 export function t(key: string, lang: I18nLanguage = getLanguage()): string {

package/src/qrcode.d.ts

@@ -0,0 +1,10 @@
+declare module 'qrcode' {
+  export function toDataURL(
+    text: string,
+    options?: {
+      errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+      margin?: number;
+      width?: number;
+    }
+  ): Promise<string>;
+}

package/src/transport/app-client.ts

@@ -4,6 +4,11 @@ import { RemoteSessionMultiplexTransport } from './remote.transport';
 import type { AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
 
 const REMOTE_RUNTIME_PATH = '/_remote/runtime';
+const DEFAULT_REMOTE_RUNTIME: RemoteRuntimeInfo = {
+  mode: 'remote',
+  protocolVersion: 1,
+  wsPath: '/_remote/ws'
+};
 
 async function resolveRuntime(apiBase: string): Promise<AppTransport> {
   const runtimeUrl = `${apiBase.replace(/\/$/, '')}${REMOTE_RUNTIME_PATH}`;
@@ -22,17 +27,28 @@ async function resolveRuntime(apiBase: string): Promise<AppTransport> {
     return new LocalAppTransport({ apiBase });
   }
 
-  const payload = await response.json() as { ok?: boolean; data?: RemoteRuntimeInfo };
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
+  if (!contentType.includes('application/json')) {
+    return response.status >= 400
+      ? new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase)
+      : new LocalAppTransport({ apiBase });
+  }
+
+  let payload: { ok?: boolean; data?: RemoteRuntimeInfo } | null = null;
+  try {
+    payload = await response.json() as { ok?: boolean; data?: RemoteRuntimeInfo };
+  } catch {
+    return response.status >= 400
+      ? new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase)
+      : new LocalAppTransport({ apiBase });
+  }
+
   if (response.ok && payload.ok && payload.data?.mode === 'remote') {
     return new RemoteSessionMultiplexTransport(payload.data, apiBase);
   }
 
   if (response.status >= 400) {
-    return new RemoteSessionMultiplexTransport({
-      mode: 'remote',
-      protocolVersion: 1,
-      wsPath: '/_remote/ws'
-    }, apiBase);
+    return new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase);
   }
 
   return new LocalAppTransport({ apiBase });

package/dist/assets/ChannelsList-Cu_hLbps.js

@@ -1 +0,0 @@
-import{r as v,j as a,X as Z,a3 as ee,e as T,K as ae,aq as te,b1 as se,b2 as le,b3 as ne,a0 as oe,G as re,ai as ce,H as ie}from"./vendor-TJ2hy_Lv.js";import{t as e,c as P,Z as me,u as q,a as $,b as H,$ as pe,a0 as de,I as A,S as be,e as ue,f as xe,g as ye,h as ge,B as E}from"./index-D4alkESd.js";import{L as he}from"./label-CbOSodIL.js";import{S as fe}from"./switch-AuwUiga3.js";import{S as J}from"./status-dot-C8vM3IN1.js";import{L as K}from"./LogoBadge-BgjXmBcw.js";import{h as U}from"./config-hints-CApS3K_7.js";import{c as we,b as ve,a as je,C as ke}from"./config-layout-BHnOoweL.js";import{T as Se}from"./tabs-custom-CTS7SaFG.js";import{P as Ce,a as Ne}from"./page-layout-BtDnyNLf.js";function Ie({value:t,onChange:m,className:i,placeholder:o=""}){const[r,u]=v.useState(""),d=x=>{x.key==="Enter"&&r.trim()?(x.preventDefault(),m([...t,r.trim()]),u("")):x.key==="Backspace"&&!r&&t.length>0&&m(t.slice(0,-1))},g=x=>{m(t.filter((j,h)=>h!==x))};return a.jsxs("div",{className:P("flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]",i),children:[t.map((x,j)=>a.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm",children:[x,a.jsx("button",{type:"button",onClick:()=>g(j),className:"hover:text-red-300 transition-colors",children:a.jsx(Z,{className:"h-3 w-3"})})]},j)),a.jsx("input",{type:"text",value:r,onChange:x=>u(x.target.value),onKeyDown:d,className:"flex-1 outline-none min-w-[100px] bg-transparent text-sm",placeholder:o||e("enterTag")})]})}function z(t){var o,r;const m=me();return((o=t.tutorialUrls)==null?void 0:o[m])||((r=t.tutorialUrls)==null?void 0:r.default)||t.tutorialUrl}const Pe={telegram:"telegram.svg",slack:"slack.svg",discord:"discord.svg",whatsapp:"whatsapp.svg",qq:"qq.svg",feishu:"feishu.svg",dingtalk:"dingtalk.svg",wecom:"wecom.svg",weixin:"weixin.svg",mochat:"mochat.svg",email:"email.svg"};function Fe(t,m){const i=m.toLowerCase(),o=t[i];return o?`/logos/${o}`:null}function Y(t){return Fe(Pe,t)}const B=[{value:"pairing",label:"pairing"},{value:"allowlist",label:"allowlist"},{value:"open",label:"open"},{value:"disabled",label:"disabled"}],G=[{value:"open",label:"open"},{value:"allowlist",label:"allowlist"},{value:"disabled",label:"disabled"}],Te=[{value:"off",label:"off"},{value:"partial",label:"partial"},{value:"block",label:"block"},{value:"progress",label:"progress"}];function R(){return{telegram:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"proxy",type:"text",label:e("proxy")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:G},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],discord:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"gatewayUrl",type:"text",label:e("gatewayUrl")},{name:"intents",type:"number",label:e("intents")},{name:"proxy",type:"text",label:e("proxy")},{name:"mediaMaxMb",type:"number",label:e("attachmentMaxSizeMb")},{name:"streaming",type:"select",label:e("streamingMode"),options:Te},{name:"draftChunk",type:"json",label:e("draftChunkingJson")},{name:"textChunkLimit",type:"number",label:e("textChunkLimit")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:G},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],whatsapp:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"bridgeUrl",type:"text",label:e("bridgeUrl")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],feishu:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"appSecret",type:"password",label:e("appSecret")},{name:"encryptKey",type:"password",label:e("encryptKey")},{name:"verificationToken",type:"password",label:e("verificationToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],dingtalk:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"clientId",type:"text",label:e("clientId")},{name:"clientSecret",type:"password",label:e("clientSecret")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],wecom:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"corpId",type:"text",label:e("corpId")},{name:"agentId",type:"text",label:e("agentId")},{name:"secret",type:"password",label:e("secret")},{name:"token",type:"password",label:e("token")},{name:"callbackPort",type:"number",label:e("callbackPort")},{name:"callbackPath",type:"text",label:e("callbackPath")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],weixin:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"defaultAccountId",type:"text",label:e("defaultAccountId")},{name:"baseUrl",type:"text",label:e("baseUrl")},{name:"pollTimeoutMs",type:"number",label:e("pollTimeoutMs")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"accounts",type:"json",label:e("accountsJson")}],slack:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"mode",type:"text",label:e("mode")},{name:"webhookPath",type:"text",label:e("webhookPath")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"botToken",type:"password",label:e("botToken")},{name:"appToken",type:"password",label:e("appToken")}],email:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"consentGranted",type:"boolean",label:e("consentGranted")},{name:"imapHost",type:"text",label:e("imapHost")},{name:"imapPort",type:"number",label:e("imapPort")},{name:"imapUsername",type:"text",label:e("imapUsername")},{name:"imapPassword",type:"password",label:e("imapPassword")},{name:"fromAddress",type:"email",label:e("fromAddress")}],mochat:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"baseUrl",type:"text",label:e("baseUrl")},{name:"clawToken",type:"password",label:e("clawToken")},{name:"agentUserId",type:"text",label:e("agentUserId")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],qq:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"secret",type:"password",label:e("appSecret")},{name:"markdownSupport",type:"boolean",label:e("markdownSupport")},{name:"allowFrom",type:"tags",label:e("allowFrom")}]}}const Ae=t=>t.includes("token")||t.includes("secret")||t.includes("password")?a.jsx(ae,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("url")||t.includes("host")?a.jsx(te,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("email")||t.includes("mail")?a.jsx(se,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("id")||t.includes("from")?a.jsx(le,{className:"h-3.5 w-3.5 text-gray-500"}):t==="enabled"||t==="consentGranted"?a.jsx(ne,{className:"h-3.5 w-3.5 text-gray-500"}):a.jsx(oe,{className:"h-3.5 w-3.5 text-gray-500"});function D(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function V(t,m){const i={...t};for(const[o,r]of Object.entries(m)){const u=i[o];if(D(u)&&D(r)){i[o]=V(u,r);continue}i[o]=r}return i}function De(t,m){const i=t.split("."),o={};let r=o;for(let u=0;u<i.length-1;u+=1){const d=i[u];r[d]={},r=r[d]}return r[i[i.length-1]]=m,o}function Le({channelName:t}){var _,O;const{data:m}=q(),{data:i}=$(),{data:o}=H(),r=pe(),u=de(),[d,g]=v.useState({}),[x,j]=v.useState({}),[h,f]=v.useState(null),k=t?m==null?void 0:m.channels[t]:null,w=t?R()[t]??[]:[],c=o==null?void 0:o.uiHints,p=t?`channels.${t}`:null,S=((_=o==null?void 0:o.actions)==null?void 0:_.filter(s=>s.scope===p))??[],C=t&&(((O=U(`channels.${t}`,c))==null?void 0:O.label)??t),I=i==null?void 0:i.channels.find(s=>s.name===t),F=I?z(I):void 0;v.useEffect(()=>{if(k){g({...k});const s={};(t?R()[t]??[]:[]).filter(n=>n.type==="json").forEach(n=>{const y=k[n.name];s[n.name]=JSON.stringify(y??{},null,2)}),j(s)}else g({}),j({})},[k,t]);const N=(s,l)=>{g(n=>({...n,[s]:l}))},L=s=>{if(s.preventDefault(),!t)return;const l={...d};for(const n of w){if(n.type!=="password")continue;const y=l[n.name];(typeof y!="string"||y.length===0)&&delete l[n.name]}for(const n of w){if(n.type!=="json")continue;const y=x[n.name]??"";try{l[n.name]=y.trim()?JSON.parse(y):{}}catch{T.error(`${e("invalidJson")}: ${n.name}`);return}}r.mutate({channel:t,data:l})},W=s=>{if(!s||!t)return;const l=s.channels;if(!D(l))return;const n=l[t];D(n)&&g(y=>V(y,n))},Q=async s=>{if(!(!t||!p)){f(s.id);try{let l={...d};s.saveBeforeRun&&(l={...l,...s.savePatch??{}},g(l),await r.mutateAsync({channel:t,data:l}));const n=await u.mutateAsync({actionId:s.id,data:{scope:p,draftConfig:De(p,l)}});W(n.patch),n.ok?T.success(n.message||e("success")):T.error(n.message||e("error"))}catch(l){const n=l instanceof Error?l.message:String(l);T.error(`${e("error")}: ${n}`)}finally{f(null)}}};if(!t||!I||!k)return a.jsx("div",{className:we,children:a.jsxs("div",{children:[a.jsx("h3",{className:"text-base font-semibold text-gray-900",children:e("channelsSelectTitle")}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsSelectDescription")})]})});const M=!!k.enabled;return a.jsxs("div",{className:ve,children:[a.jsx("div",{className:"border-b border-gray-100 px-6 py-5",children:a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[a.jsxs("div",{className:"min-w-0",children:[a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx(K,{name:t,src:Y(t),className:P("h-9 w-9 rounded-lg border",M?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:t[0]})}),a.jsx("h3",{className:"truncate text-lg font-semibold text-gray-900 capitalize",children:C})]}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsFormDescription")}),F&&a.jsxs("a",{href:F,className:"mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover",children:[a.jsx(ee,{className:"h-3.5 w-3.5"}),e("channelsGuideTitle")]})]}),a.jsx(J,{status:M?"active":"inactive",label:M?e("statusActive"):e("statusInactive")})]})}),a.jsxs("form",{onSubmit:L,className:"flex min-h-0 flex-1 flex-col",children:[a.jsx("div",{className:"min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5",children:w.map(s=>{const l=t?U(`channels.${t}.${s.name}`,c):void 0,n=(l==null?void 0:l.label)??s.label,y=l==null?void 0:l.placeholder;return a.jsxs("div",{className:"space-y-2.5",children:[a.jsxs(he,{htmlFor:s.name,className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[Ae(s.name),n]}),s.type==="boolean"&&a.jsxs("div",{className:"flex items-center justify-between rounded-xl bg-gray-50 p-3",children:[a.jsx("span",{className:"text-sm text-gray-500",children:d[s.name]?e("enabled"):e("disabled")}),a.jsx(fe,{id:s.name,checked:d[s.name]||!1,onCheckedChange:b=>N(s.name,b),className:"data-[state=checked]:bg-emerald-500"})]}),(s.type==="text"||s.type==="email")&&a.jsx(A,{id:s.name,type:s.type,value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y,className:"rounded-xl"}),s.type==="password"&&a.jsx(A,{id:s.name,type:"password",value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y??e("leaveBlankToKeepUnchanged"),className:"rounded-xl"}),s.type==="number"&&a.jsx(A,{id:s.name,type:"number",value:d[s.name]||0,onChange:b=>N(s.name,parseInt(b.target.value,10)||0),placeholder:y,className:"rounded-xl"}),s.type==="tags"&&a.jsx(Ie,{value:d[s.name]||[],onChange:b=>N(s.name,b)}),s.type==="select"&&a.jsxs(be,{value:d[s.name]||"",onValueChange:b=>N(s.name,b),children:[a.jsx(ue,{className:"rounded-xl",children:a.jsx(xe,{})}),a.jsx(ye,{children:(s.options??[]).map(b=>a.jsx(ge,{value:b.value,children:b.label},b.value))})]}),s.type==="json"&&a.jsx("textarea",{id:s.name,value:x[s.name]??"{}",onChange:b=>j(X=>({...X,[s.name]:b.target.value})),className:"min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"})]},s.name)})}),a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4",children:[a.jsx("div",{className:"flex flex-wrap items-center gap-2",children:S.filter(s=>s.trigger==="manual").map(s=>a.jsx(E,{type:"button",onClick:()=>Q(s),disabled:r.isPending||!!h,variant:"secondary",children:h===s.id?e("connecting"):s.title},s.id))}),a.jsx(E,{type:"submit",disabled:r.isPending||!!h,children:r.isPending?e("saving"):e("save")})]})]})]})}const Me={telegram:"channelDescTelegram",slack:"channelDescSlack",email:"channelDescEmail",webhook:"channelDescWebhook",discord:"channelDescDiscord",feishu:"channelDescFeishu",weixin:"channelDescWeixin"};function Je(){const{data:t}=q(),{data:m}=$(),{data:i}=H(),[o,r]=v.useState("enabled"),[u,d]=v.useState(),[g,x]=v.useState(""),j=i==null?void 0:i.uiHints,h=m==null?void 0:m.channels,f=t==null?void 0:t.channels,k=[{id:"enabled",label:e("channelsTabEnabled"),count:(h??[]).filter(c=>{var p;return(p=f==null?void 0:f[c.name])==null?void 0:p.enabled}).length},{id:"all",label:e("channelsTabAll"),count:(h??[]).length}],w=v.useMemo(()=>{const c=g.trim().toLowerCase();return(h??[]).filter(p=>{var C;const S=((C=f==null?void 0:f[p.name])==null?void 0:C.enabled)||!1;return o==="enabled"?S:!0}).filter(p=>c?(p.displayName||p.name).toLowerCase().includes(c)||p.name.toLowerCase().includes(c):!0)},[o,f,h,g]);return v.useEffect(()=>{if(w.length===0){d(void 0);return}w.some(p=>p.name===u)||d(w[0].name)},[w,u]),!t||!m?a.jsx("div",{className:"p-8 text-gray-400",children:e("channelsLoading")}):a.jsxs(Ce,{className:"xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:pb-0",children:[a.jsx(Ne,{title:e("channelsPageTitle"),description:e("channelsPageDescription")}),a.jsxs("div",{className:P(ke,"xl:min-h-0 xl:flex-1"),children:[a.jsxs("section",{className:je,children:[a.jsx("div",{className:"border-b border-gray-100 px-4 pt-4",children:a.jsx(Se,{tabs:k,activeTab:o,onChange:r,className:"mb-0"})}),a.jsx("div",{className:"border-b border-gray-100 px-4 py-3",children:a.jsxs("div",{className:"relative",children:[a.jsx(re,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),a.jsx(A,{value:g,onChange:c=>x(c.target.value),placeholder:e("channelsFilterPlaceholder"),className:"h-10 rounded-xl pl-9"})]})}),a.jsxs("div",{className:"min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3",children:[w.map(c=>{const p=t.channels[c.name],S=(p==null?void 0:p.enabled)||!1,C=U(`channels.${c.name}`,j),I=z(c),F=(C==null?void 0:C.help)||e(Me[c.name]||"channelDescriptionDefault"),N=u===c.name;return a.jsx("button",{type:"button",onClick:()=>d(c.name),className:P("w-full rounded-xl border p-2.5 text-left transition-all",N?"border-primary/30 bg-primary-50/40 shadow-sm":"border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70"),children:a.jsxs("div",{className:"flex items-start justify-between gap-3",children:[a.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[a.jsx(K,{name:c.name,src:Y(c.name),className:P("h-10 w-10 rounded-lg border",S?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:c.name[0]})}),a.jsxs("div",{className:"min-w-0",children:[a.jsx("p",{className:"truncate text-sm font-semibold text-gray-900",children:c.displayName||c.name}),a.jsx("p",{className:"line-clamp-1 text-[11px] text-gray-500",children:F})]})]}),a.jsxs("div",{className:"flex items-center gap-2",children:[I&&a.jsx("a",{href:I,onClick:L=>L.stopPropagation(),className:"inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500",title:e("channelsGuideTitle"),children:a.jsx(ce,{className:"h-3.5 w-3.5"})}),a.jsx(J,{status:S?"active":"inactive",label:S?e("statusActive"):e("statusInactive"),className:"min-w-[56px] justify-center"})]})]})},c.name)}),w.length===0&&a.jsxs("div",{className:"flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 py-10 text-center",children:[a.jsx("div",{className:"mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white",children:a.jsx(ie,{className:"h-5 w-5 text-gray-300"})}),a.jsx("p",{className:"text-sm font-medium text-gray-700",children:e("channelsNoMatch")})]})]})]}),a.jsx(Le,{channelName:u})]})]})}export{Je as ChannelsList};