@nextclaw/ui 0.9.15 → 0.9.17

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.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
+
+const mocks = vi.hoisted(() => ({
+  startChannelAuthMutateAsync: vi.fn(),
+  pollChannelAuthMutateAsync: vi.fn(),
+  invalidateQueries: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries: mocks.invalidateQueries
+    })
+  };
+});
+
+vi.mock('qrcode', () => ({
+  toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
+}));
+
+vi.mock('@/hooks/use-channel-auth', () => ({
+  useStartChannelAuth: () => ({
+    mutateAsync: mocks.startChannelAuthMutateAsync,
+    isPending: false
+  }),
+  usePollChannelAuth: () => ({
+    mutateAsync: mocks.pollChannelAuthMutateAsync,
+    isPending: false
+  })
+}));
+
+describe('WeixinChannelAuthSection', () => {
+  beforeEach(() => {
+    mocks.startChannelAuthMutateAsync.mockReset();
+    mocks.pollChannelAuthMutateAsync.mockReset();
+    mocks.invalidateQueries.mockClear();
+  });
+
+  it('switches to connected state when channel config becomes authorized during an active session', async () => {
+    const user = userEvent.setup();
+    mocks.startChannelAuthMutateAsync.mockResolvedValue({
+      channel: 'weixin',
+      kind: 'qr_code',
+      sessionId: 'session-1',
+      qrCode: 'qr-token',
+      qrCodeUrl: 'https://example.com/weixin-qr.png',
+      expiresAt: '2026-03-24T10:00:00.000Z',
+      intervalMs: 60_000,
+      note: '请扫码'
+    });
+    mocks.pollChannelAuthMutateAsync.mockImplementation(() => new Promise(() => {}));
+
+    const { rerender } = render(
+      <WeixinChannelAuthSection
+        channelConfig={{ enabled: false }}
+        formData={{}}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Scan QR to connect Weixin' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Waiting for scan confirmation' })).toBeTruthy();
+    });
+
+    rerender(
+      <WeixinChannelAuthSection
+        channelConfig={{
+          enabled: true,
+          defaultAccountId: 'bot-1@im.bot',
+          accounts: {
+            'bot-1@im.bot': {
+              enabled: true
+            }
+          }
+        }}
+        formData={{}}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Connected')).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Reconnect with QR' })).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,301 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toDataURL } from 'qrcode';
+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 [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+
+  const connectedAccountIds = useMemo(() => resolveConnectedAccountIds(channelConfig), [channelConfig]);
+  const primaryAccountId = connectedAccountIds[0];
+  const baseUrl = resolveBaseUrl(formData, channelConfig);
+  const hasConnectedAccount = connectedAccountIds.length > 0;
+
+  useEffect(() => {
+    if (!hasConnectedAccount) {
+      return;
+    }
+
+    setActiveSession(null);
+    setAuthState((prev) => {
+      if (prev?.status === 'authorized') {
+        return prev;
+      }
+      return {
+        channel: 'weixin',
+        status: 'authorized',
+        message: t('weixinAuthAuthorized'),
+        accountId: primaryAccountId ?? null
+      };
+    });
+  }, [hasConnectedAccount, primaryAccountId]);
+
+  useEffect(() => {
+    if (!activeSession) {
+      setQrDataUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    void toDataURL(activeSession.qrCodeUrl, {
+      errorCorrectionLevel: 'M',
+      margin: 1,
+      width: 480
+    })
+      .then((dataUrl: string) => {
+        if (!cancelled) {
+          setQrDataUrl(dataUrl);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setQrDataUrl(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSession]);
+
+  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">
+                {qrDataUrl ? (
+                  <img src={qrDataUrl} alt={t('weixinAuthQrAlt')} className="mx-auto aspect-square w-full max-w-[240px] object-contain" />
+                ) : (
+                  <div className="flex aspect-square w-full items-center justify-center rounded-xl bg-gray-50 text-gray-500">
+                    <div className="flex flex-col items-center gap-2 text-center">
+                      <Loader2 className="h-5 w-5 animate-spin" />
+                      <p className="text-xs">{t('weixinAuthStarting')}</p>
+                    </div>
+                  </div>
+                )}
+              </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>
+  );
+}