@nextclaw/ui 0.9.15 → 0.9.16

package/src/components/config/channel-form-fields-section.tsx

@@ -0,0 +1,155 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { TagInput } from '@/components/common/TagInput';
+import { hintForPath } from '@/lib/config-hints';
+import { t } from '@/lib/i18n';
+import { Globe, Hash, KeyRound, Mail, Settings, ToggleLeft } from 'lucide-react';
+import type { ConfigUiHints } from '@/api/types';
+import type { ChannelField } from './channel-form-fields';
+
+function getFieldIcon(fieldName: string) {
+  if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
+    return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
+  }
+  if (fieldName.includes('url') || fieldName.includes('host')) {
+    return <Globe className="h-3.5 w-3.5 text-gray-500" />;
+  }
+  if (fieldName.includes('email') || fieldName.includes('mail')) {
+    return <Mail className="h-3.5 w-3.5 text-gray-500" />;
+  }
+  if (fieldName.includes('id') || fieldName.includes('from')) {
+    return <Hash className="h-3.5 w-3.5 text-gray-500" />;
+  }
+  if (fieldName === 'enabled' || fieldName === 'consentGranted') {
+    return <ToggleLeft className="h-3.5 w-3.5 text-gray-500" />;
+  }
+  return <Settings className="h-3.5 w-3.5 text-gray-500" />;
+}
+
+type ChannelFormFieldsSectionProps = {
+  channelName: string;
+  fields: ChannelField[];
+  formData: Record<string, unknown>;
+  jsonDrafts: Record<string, string>;
+  setJsonDrafts: Dispatch<SetStateAction<Record<string, string>>>;
+  updateField: (name: string, value: unknown) => void;
+  uiHints?: ConfigUiHints;
+};
+
+export function ChannelFormFieldsSection({
+  channelName,
+  fields,
+  formData,
+  jsonDrafts,
+  setJsonDrafts,
+  updateField,
+  uiHints
+}: ChannelFormFieldsSectionProps) {
+  return (
+    <>
+      {fields.map((field) => {
+        const hint = hintForPath(`channels.${channelName}.${field.name}`, uiHints);
+        const label = hint?.label ?? field.label;
+        const placeholder = hint?.placeholder;
+
+        return (
+          <div key={field.name} className="space-y-2.5">
+            <Label htmlFor={field.name} className="flex items-center gap-2 text-sm font-medium text-gray-900">
+              {getFieldIcon(field.name)}
+              {label}
+            </Label>
+
+            {field.type === 'boolean' && (
+              <div className="flex items-center justify-between rounded-xl bg-gray-50 p-3">
+                <span className="text-sm text-gray-500">
+                  {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
+                </span>
+                <Switch
+                  id={field.name}
+                  checked={(formData[field.name] as boolean) || false}
+                  onCheckedChange={(checked) => updateField(field.name, checked)}
+                  className="data-[state=checked]:bg-emerald-500"
+                />
+              </div>
+            )}
+
+            {(field.type === 'text' || field.type === 'email') && (
+              <Input
+                id={field.name}
+                type={field.type}
+                value={(formData[field.name] as string) || ''}
+                onChange={(event) => updateField(field.name, event.target.value)}
+                placeholder={placeholder}
+                className="rounded-xl"
+              />
+            )}
+
+            {field.type === 'password' && (
+              <Input
+                id={field.name}
+                type="password"
+                value={(formData[field.name] as string) || ''}
+                onChange={(event) => updateField(field.name, event.target.value)}
+                placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
+                className="rounded-xl"
+              />
+            )}
+
+            {field.type === 'number' && (
+              <Input
+                id={field.name}
+                type="number"
+                value={(formData[field.name] as number) || 0}
+                onChange={(event) => updateField(field.name, parseInt(event.target.value, 10) || 0)}
+                placeholder={placeholder}
+                className="rounded-xl"
+              />
+            )}
+
+            {field.type === 'tags' && (
+              <TagInput
+                value={(formData[field.name] as string[]) || []}
+                onChange={(tags) => updateField(field.name, tags)}
+              />
+            )}
+
+            {field.type === 'select' && (
+              <Select
+                value={(formData[field.name] as string) || ''}
+                onValueChange={(value) => updateField(field.name, value)}
+              >
+                <SelectTrigger className="rounded-xl">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {(field.options ?? []).map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            {field.type === 'json' && (
+              <textarea
+                id={field.name}
+                value={jsonDrafts[field.name] ?? '{}'}
+                onChange={(event) =>
+                  setJsonDrafts((prev) => ({
+                    ...prev,
+                    [field.name]: event.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"
+              />
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+}

package/src/components/config/weixin-channel-auth-section.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { formatDateTime, t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+import { ExternalLink, Loader2, MessageCircleMore, QrCode } from 'lucide-react';
+import { usePollChannelAuth, useStartChannelAuth } from '@/hooks/use-channel-auth';
+import type { ChannelAuthPollResult, ChannelAuthStartResult } from '@/api/channel-auth.types';
+
+type WeixinChannelAuthSectionProps = {
+  channelConfig: Record<string, unknown>;
+  formData: Record<string, unknown>;
+  disabled?: boolean;
+};
+
+function resolveConnectedAccountIds(channelConfig: Record<string, unknown>): string[] {
+  const accounts = channelConfig.accounts;
+  const ids = new Set<string>();
+  if (typeof channelConfig.defaultAccountId === 'string' && channelConfig.defaultAccountId.trim()) {
+    ids.add(channelConfig.defaultAccountId.trim());
+  }
+  if (accounts && typeof accounts === 'object' && !Array.isArray(accounts)) {
+    for (const accountId of Object.keys(accounts)) {
+      const trimmed = accountId.trim();
+      if (trimmed) {
+        ids.add(trimmed);
+      }
+    }
+  }
+  return [...ids];
+}
+
+function resolveBaseUrl(formData: Record<string, unknown>, channelConfig: Record<string, unknown>): string | undefined {
+  if (typeof formData.baseUrl === 'string' && formData.baseUrl.trim()) {
+    return formData.baseUrl.trim();
+  }
+  if (typeof channelConfig.baseUrl === 'string' && channelConfig.baseUrl.trim()) {
+    return channelConfig.baseUrl.trim();
+  }
+  return undefined;
+}
+
+export function WeixinChannelAuthSection({
+  channelConfig,
+  formData,
+  disabled = false
+}: WeixinChannelAuthSectionProps) {
+  const queryClient = useQueryClient();
+  const startChannelAuth = useStartChannelAuth();
+  const pollChannelAuth = usePollChannelAuth();
+  const [activeSession, setActiveSession] = useState<ChannelAuthStartResult | null>(null);
+  const [authState, setAuthState] = useState<ChannelAuthPollResult | null>(null);
+
+  const connectedAccountIds = useMemo(() => resolveConnectedAccountIds(channelConfig), [channelConfig]);
+  const primaryAccountId = connectedAccountIds[0];
+  const baseUrl = resolveBaseUrl(formData, channelConfig);
+  const hasConnectedAccount = connectedAccountIds.length > 0;
+
+  useEffect(() => {
+    if (!activeSession) {
+      return;
+    }
+
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const runPoll = async () => {
+      try {
+        const result = await pollChannelAuth.mutateAsync({
+          channel: 'weixin',
+          data: { sessionId: activeSession.sessionId }
+        });
+        if (cancelled) {
+          return;
+        }
+
+        setAuthState(result);
+
+        if (result.status === 'authorized') {
+          await queryClient.invalidateQueries({ queryKey: ['config'] });
+          await queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+          toast.success(result.message || t('weixinAuthAuthorized'));
+          setActiveSession(null);
+          return;
+        }
+
+        if (result.status === 'expired' || result.status === 'error') {
+          toast.error(result.message || t('weixinAuthRetryRequired'));
+          setActiveSession(null);
+          return;
+        }
+
+        timer = setTimeout(runPoll, result.nextPollMs ?? activeSession.intervalMs);
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+        const message = error instanceof Error ? error.message : String(error);
+        toast.error(`${t('error')}: ${message}`);
+        setActiveSession(null);
+      }
+    };
+
+    timer = setTimeout(runPoll, activeSession.intervalMs);
+
+    return () => {
+      cancelled = true;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [activeSession, pollChannelAuth, queryClient]);
+
+  const handleStartAuth = async () => {
+    try {
+      const result = await startChannelAuth.mutateAsync({
+        channel: 'weixin',
+        data: {
+          baseUrl,
+          accountId:
+            typeof formData.defaultAccountId === 'string' && formData.defaultAccountId.trim()
+              ? formData.defaultAccountId.trim()
+              : undefined
+        }
+      });
+      setActiveSession(result);
+      setAuthState({
+        channel: 'weixin',
+        status: 'pending',
+        message: result.note,
+        nextPollMs: result.intervalMs
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('error')}: ${message}`);
+    }
+  };
+
+  const statusLabel = activeSession
+    ? authState?.status === 'scanned'
+      ? t('weixinAuthScanned')
+      : t('weixinAuthWaiting')
+    : hasConnectedAccount
+      ? t('weixinAuthAuthorized')
+      : t('weixinAuthNotConnected');
+
+  const connectButtonLabel = startChannelAuth.isPending
+    ? t('weixinAuthStarting')
+    : activeSession
+      ? t('weixinAuthWaiting')
+      : hasConnectedAccount
+        ? t('weixinAuthReconnect')
+        : t('weixinAuthConnect');
+
+  return (
+    <section className="rounded-2xl border border-primary/20 bg-gradient-to-br from-primary-50/70 via-white to-emerald-50/60 p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="space-y-3">
+          <div className="inline-flex items-center gap-2 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-primary shadow-sm">
+            <QrCode className="h-3.5 w-3.5" />
+            {t('weixinAuthTitle')}
+          </div>
+          <div>
+            <h4 className="text-base font-semibold text-gray-900">{t('weixinAuthDescription')}</h4>
+            <p className="mt-1 text-sm text-gray-600">{t('weixinAuthHint')}</p>
+          </div>
+          <div
+            className={cn(
+              'inline-flex w-fit items-center gap-2 rounded-full px-3 py-1 text-xs font-medium',
+              activeSession
+                ? 'bg-amber-50 text-amber-700'
+                : hasConnectedAccount
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-gray-100 text-gray-600'
+            )}
+          >
+            {activeSession ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <MessageCircleMore className="h-3.5 w-3.5" />}
+            {statusLabel}
+          </div>
+          <div className="space-y-1 text-sm text-gray-600">
+            <p>{t('weixinAuthCapabilityHint')}</p>
+            {primaryAccountId ? (
+              <p>
+                {t('weixinAuthPrimaryAccount')}: <span className="font-mono text-xs text-gray-900">{primaryAccountId}</span>
+              </p>
+            ) : null}
+            {connectedAccountIds.length > 1 ? (
+              <p>
+                {t('weixinAuthConnectedAccounts')}: <span className="font-mono text-xs text-gray-900">{connectedAccountIds.join(', ')}</span>
+              </p>
+            ) : null}
+            {baseUrl ? (
+              <p>
+                {t('weixinAuthBaseUrl')}: <span className="font-mono text-xs text-gray-900">{baseUrl}</span>
+              </p>
+            ) : null}
+          </div>
+          <Button
+            type="button"
+            onClick={handleStartAuth}
+            disabled={disabled || startChannelAuth.isPending || Boolean(activeSession)}
+            className="rounded-xl"
+          >
+            {connectButtonLabel}
+          </Button>
+        </div>
+
+        <div className="w-full max-w-sm rounded-2xl border border-dashed border-primary/25 bg-white/85 p-4 shadow-sm">
+          {activeSession ? (
+            <div className="space-y-3">
+              <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white p-3">
+                <img src={activeSession.qrCodeUrl} alt={t('weixinAuthQrAlt')} className="mx-auto aspect-square w-full max-w-[240px] object-contain" />
+              </div>
+              <div className="space-y-1 text-xs text-gray-500">
+                <p>{authState?.message || activeSession.note || t('weixinAuthScanPrompt')}</p>
+                <p>
+                  {t('weixinAuthExpiresAt')}: {formatDateTime(activeSession.expiresAt)}
+                </p>
+              </div>
+              <a
+                href={activeSession.qrCodeUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover"
+              >
+                <ExternalLink className="h-3.5 w-3.5" />
+                {t('weixinAuthOpenQr')}
+              </a>
+            </div>
+          ) : (
+            <div className="flex min-h-[280px] flex-col items-center justify-center rounded-2xl bg-gray-50/80 px-6 text-center">
+              <QrCode className="h-9 w-9 text-gray-300" />
+              <p className="mt-3 text-sm font-medium text-gray-700">{t('weixinAuthReadyTitle')}</p>
+              <p className="mt-1 text-xs leading-5 text-gray-500">{t('weixinAuthReadyDescription')}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

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/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};