@nextclaw/ui 0.9.14 → 0.9.16

package/src/components/config/ChannelForm.tsx

@@ -1,47 +1,25 @@
 import { useEffect, useState } from 'react';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { TagInput } from '@/components/common/TagInput';
 import { StatusDot } from '@/components/ui/status-dot';
 import { LogoBadge } from '@/components/common/LogoBadge';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import { Settings, ToggleLeft, Hash, Mail, Globe, KeyRound, BookOpen } from 'lucide-react';
+import { BookOpen, ChevronDown } from 'lucide-react';
 import type { ConfigActionManifest } from '@/api/types';
 import { resolveChannelTutorialUrl } from '@/lib/channel-tutorials';
 import { getChannelLogo } from '@/lib/logos';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
+import { ChannelFormFieldsSection } from './channel-form-fields-section';
 import { buildChannelFields } from './channel-form-fields';
+import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
 
 type ChannelFormProps = {
   channelName?: string;
 };
 
-const 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" />;
-};
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -93,6 +71,7 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
     : channelName;
   const channelMeta = meta?.channels.find((item) => item.name === channelName);
   const tutorialUrl = channelMeta ? resolveChannelTutorialUrl(channelMeta) : undefined;
+  const isWeixinChannel = channelName === 'weixin';
 
   useEffect(() => {
     if (channelConfig) {
@@ -251,111 +230,45 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
 
       <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
         <div className="min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5">
-          {fields.map((field) => {
-            const hint = channelName
-              ? hintForPath(`channels.${channelName}.${field.name}`, uiHints)
-              : undefined;
-            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"
-                    />
+          {isWeixinChannel ? (
+            <>
+              <WeixinChannelAuthSection
+                channelConfig={channelConfig}
+                formData={formData}
+                disabled={updateChannel.isPending || Boolean(runningActionId)}
+              />
+              <details className="group rounded-2xl border border-gray-200/80 bg-white">
+                <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-5 py-4 text-sm font-medium text-gray-900">
+                  <div>
+                    <p>{t('weixinAuthAdvancedTitle')}</p>
+                    <p className="mt-1 text-xs font-normal text-gray-500">{t('weixinAuthAdvancedDescription')}</p>
                   </div>
-                )}
-
-                {(field.type === 'text' || field.type === 'email') && (
-                  <Input
-                    id={field.name}
-                    type={field.type}
-                    value={(formData[field.name] as string) || ''}
-                    onChange={(e) => updateField(field.name, e.target.value)}
-                    placeholder={placeholder}
-                    className="rounded-xl"
-                  />
-                )}
-
-                {field.type === 'password' && (
-                  <Input
-                    id={field.name}
-                    type="password"
-                    value={(formData[field.name] as string) || ''}
-                    onChange={(e) => updateField(field.name, e.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={(e) => updateField(field.name, parseInt(e.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)}
+                  <ChevronDown className="h-4 w-4 text-gray-400 transition-transform group-open:rotate-180" />
+                </summary>
+                <div className="space-y-6 border-t border-gray-100 px-5 py-5">
+                  <ChannelFormFieldsSection
+                    channelName={channelName}
+                    fields={fields}
+                    formData={formData}
+                    jsonDrafts={jsonDrafts}
+                    setJsonDrafts={setJsonDrafts}
+                    updateField={updateField}
+                    uiHints={uiHints}
                   />
-                )}
-
-                {field.type === 'select' && (
-                  <Select
-                    value={(formData[field.name] as string) || ''}
-                    onValueChange={(v) => updateField(field.name, v)}
-                  >
-                    <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>
-            );
-          })}
+                </div>
+              </details>
+            </>
+          ) : (
+            <ChannelFormFieldsSection
+              channelName={channelName}
+              fields={fields}
+              formData={formData}
+              jsonDrafts={jsonDrafts}
+              setJsonDrafts={setJsonDrafts}
+              updateField={updateField}
+              uiHints={uiHints}
+            />
+          )}
         </div>
 
         <div className="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4">

package/src/components/config/ChannelsList.test.tsx

@@ -3,8 +3,10 @@ import userEvent from '@testing-library/user-event';
 import { ChannelsList } from '@/components/config/ChannelsList';
 
 const mocks = vi.hoisted(() => ({
-  mutate: vi.fn(),
-  mutateAsync: vi.fn(),
+  updateChannelMutate: vi.fn(),
+  updateChannelMutateAsync: vi.fn(),
+  startChannelAuthMutateAsync: vi.fn(),
+  pollChannelAuthMutateAsync: vi.fn(),
   configQuery: {
     data: {
       channels: {
@@ -51,13 +53,23 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries: vi.fn().mockResolvedValue(undefined)
+    })
+  };
+});
+
 vi.mock('@/hooks/useConfig', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
   useConfigSchema: () => mocks.schemaQuery,
   useUpdateChannel: () => ({
-    mutate: mocks.mutate,
-    mutateAsync: mocks.mutateAsync,
+    mutate: mocks.updateChannelMutate,
+    mutateAsync: mocks.updateChannelMutateAsync,
     isPending: false
   }),
   useExecuteConfigAction: () => ({
@@ -66,27 +78,76 @@ vi.mock('@/hooks/useConfig', () => ({
   })
 }));
 
+vi.mock('@/hooks/use-channel-auth', () => ({
+  useStartChannelAuth: () => ({
+    mutateAsync: mocks.startChannelAuthMutateAsync,
+    isPending: false
+  }),
+  usePollChannelAuth: () => ({
+    mutateAsync: mocks.pollChannelAuthMutateAsync,
+    isPending: false
+  })
+}));
+
 describe('ChannelsList', () => {
   beforeEach(() => {
-    mocks.mutate.mockReset();
-    mocks.mutateAsync.mockReset();
+    mocks.updateChannelMutate.mockReset();
+    mocks.updateChannelMutateAsync.mockReset();
+    mocks.startChannelAuthMutateAsync.mockReset();
+    mocks.pollChannelAuthMutateAsync.mockReset();
   });
 
-  it('renders weixin and submits weixin-specific config fields', async () => {
+  it('renders weixin qr auth card and starts channel auth', 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-23T10:00:00.000Z',
+      intervalMs: 60_000,
+      note: '请扫码'
+    });
 
     render(<ChannelsList />);
 
     await user.click(await screen.findByRole('button', { name: /All Channels/i }));
 
     expect((await screen.findAllByText('Weixin')).length).toBeGreaterThan(0);
-    expect(await screen.findByLabelText('Default Account ID')).toBeTruthy();
+    expect(await screen.findByRole('button', { name: 'Reconnect with QR' })).toBeTruthy();
+    expect(screen.getByText('Weixin now uses QR login as the primary setup flow.')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Reconnect with QR' }));
+
+    await waitFor(() => {
+      expect(mocks.startChannelAuthMutateAsync).toHaveBeenCalledWith({
+        channel: 'weixin',
+        data: expect.objectContaining({
+          accountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com'
+        })
+      });
+    });
+  });
+
+  it('saves weixin advanced settings from the advanced section', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+    await user.click(await screen.findByText('Advanced settings'));
 
     const timeoutInput = await screen.findByLabelText('Long Poll Timeout (ms)');
     await user.clear(timeoutInput);
     await user.type(timeoutInput, '45000');
 
-    const accountsJson = await screen.findByLabelText('Accounts JSON');
+    const accountsJson = container.querySelector('textarea#accounts') as HTMLTextAreaElement | null;
+    expect(accountsJson).toBeTruthy();
+    if (!accountsJson) {
+      throw new Error('accounts textarea not found');
+    }
     await user.clear(accountsJson);
     fireEvent.change(accountsJson, {
       target: {
@@ -106,7 +167,7 @@ describe('ChannelsList', () => {
     await user.click(screen.getByRole('button', { name: /save/i }));
 
     await waitFor(() => {
-      expect(mocks.mutate).toHaveBeenCalledWith({
+      expect(mocks.updateChannelMutate).toHaveBeenCalledWith({
         channel: 'weixin',
         data: expect.objectContaining({
           enabled: false,

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