@nextclaw/ui 0.12.11 → 0.12.12

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

@@ -1,309 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type * as ReactQueryModule from "@tanstack/react-query";
-import { ChannelsList } from "@/components/config/ChannelsList";
-
-const mocks = vi.hoisted(() => ({
-  updateChannelMutate: vi.fn(),
-  updateChannelMutateAsync: vi.fn(),
-  startChannelAuthMutateAsync: vi.fn(),
-  pollChannelAuthMutateAsync: vi.fn(),
-  configQuery: {
-    data: {
-      channels: {
-        weixin: {
-          enabled: false,
-          defaultAccountId: "1344b2b24720@im.bot",
-          baseUrl: "https://ilinkai.weixin.qq.com",
-          pollTimeoutMs: 35000,
-          allowFrom: ["o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat"],
-          accounts: {
-            "1344b2b24720@im.bot": {
-              enabled: true,
-            },
-          },
-        },
-      },
-    },
-    isLoading: false,
-  },
-  metaQuery: {
-    data: {
-      channels: [
-        {
-          name: "weixin",
-          displayName: "Weixin",
-          enabled: false,
-        },
-      ],
-    },
-  },
-  schemaQuery: {
-    data: {
-      uiHints: {
-        "channels.weixin": {
-          label: "Weixin",
-          help: "Weixin QR login + getupdates long-poll channel",
-        },
-        "channels.weixin.baseUrl": {
-          label: "API Base URL",
-        },
-      },
-      actions: [],
-    },
-  },
-}));
-
-vi.mock("qrcode", () => ({
-  toDataURL: vi.fn().mockResolvedValue("data:image/png;base64,weixin-qr"),
-}));
-
-vi.mock("@tanstack/react-query", async () => {
-  const actual = await vi.importActual<typeof ReactQueryModule>(
-    "@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.updateChannelMutate,
-    mutateAsync: mocks.updateChannelMutateAsync,
-    isPending: false,
-  }),
-  useExecuteConfigAction: () => ({
-    mutateAsync: vi.fn(),
-    isPending: false,
-  }),
-}));
-
-vi.mock("@/hooks/use-channel-auth", () => ({
-  useStartChannelAuth: () => ({
-    mutateAsync: mocks.startChannelAuthMutateAsync,
-    isPending: false,
-  }),
-  usePollChannelAuth: () => ({
-    mutateAsync: mocks.pollChannelAuthMutateAsync,
-    isPending: false,
-  }),
-}));
-
-describe("ChannelsList", () => {
-  beforeEach(() => {
-    mocks.updateChannelMutate.mockReset();
-    mocks.updateChannelMutateAsync.mockReset();
-    mocks.startChannelAuthMutateAsync.mockReset();
-    mocks.pollChannelAuthMutateAsync.mockReset();
-    mocks.configQuery.data = {
-      channels: {
-        weixin: {
-          enabled: false,
-          defaultAccountId: "1344b2b24720@im.bot",
-          baseUrl: "https://ilinkai.weixin.qq.com",
-          pollTimeoutMs: 35000,
-          allowFrom: ["o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat"],
-          accounts: {
-            "1344b2b24720@im.bot": {
-              enabled: true,
-            },
-          },
-        },
-      },
-    };
-    mocks.metaQuery.data = {
-      channels: [
-        {
-          name: "weixin",
-          displayName: "Weixin",
-          enabled: false,
-        },
-      ],
-    };
-  });
-
-  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.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",
-        }),
-      });
-    });
-
-    await waitFor(() => {
-      expect(
-        screen.getByAltText("Weixin login QR code").getAttribute("src"),
-      ).toBe("data:image/png;base64,weixin-qr");
-    });
-  });
-
-  it("keeps Weixin, Feishu, Discord, and QQ at the front of the channel list", async () => {
-    const user = userEvent.setup();
-    mocks.configQuery.data = {
-      channels: {
-        telegram: { enabled: false },
-        qq: { enabled: false },
-        discord: { enabled: false },
-        weixin: { enabled: false },
-        feishu: { enabled: false },
-      },
-    } as unknown as typeof mocks.configQuery.data;
-    mocks.metaQuery.data = {
-      channels: [
-        { name: "telegram", displayName: "Telegram", enabled: false },
-        { name: "qq", displayName: "QQ", enabled: false },
-        { name: "discord", displayName: "Discord", enabled: false },
-        { name: "weixin", displayName: "Weixin", enabled: false },
-        { name: "feishu", displayName: "Feishu", enabled: false },
-      ],
-    } as typeof mocks.metaQuery.data;
-
-    const { container } = render(<ChannelsList />);
-
-    await user.click(
-      await screen.findByRole("button", { name: /All Channels/i }),
-    );
-
-    const sidebarSection = container.querySelector("section");
-    if (!(sidebarSection instanceof HTMLElement)) {
-      throw new Error("channel sidebar not found");
-    }
-
-    const channelButtons = Array.from(
-      sidebarSection.querySelectorAll('button[type="button"]'),
-    ).filter((button) =>
-      ["Weixin", "Feishu", "Discord", "QQ", "Telegram"].some((label) =>
-        button.textContent?.includes(label),
-      ),
-    );
-
-    expect(channelButtons.map((button) => button.textContent)).toEqual([
-      expect.stringContaining("Weixin"),
-      expect.stringContaining("Feishu"),
-      expect.stringContaining("Discord"),
-      expect.stringContaining("QQ"),
-      expect.stringContaining("Telegram"),
-    ]);
-  });
-
-  it("only enables internal scroll chaining on desktop-sized panes", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<ChannelsList />);
-
-    await user.click(
-      await screen.findByRole("button", { name: /All Channels/i }),
-    );
-
-    const scrollRegions = Array.from(container.querySelectorAll("div")).filter(
-      (node) => {
-        const classTokens = node.className.split(/\s+/).filter(Boolean);
-        return classTokens.includes("xl:overflow-y-auto");
-      },
-    );
-
-    expect(scrollRegions.length).toBeGreaterThanOrEqual(2);
-    scrollRegions.forEach((region) => {
-      const classTokens = region.className.split(/\s+/).filter(Boolean);
-      expect(classTokens).toContain("xl:overscroll-contain");
-      expect(classTokens).not.toContain("overflow-y-auto");
-      expect(classTokens).not.toContain("overscroll-contain");
-    });
-  });
-
-  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 = 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: {
-        value: JSON.stringify(
-          {
-            "1344b2b24720@im.bot": {
-              enabled: true,
-              baseUrl: "https://ilinkai.weixin.qq.com",
-            },
-          },
-          null,
-          2,
-        ),
-      },
-    });
-
-    await user.click(screen.getByRole("button", { name: /save/i }));
-
-    await waitFor(() => {
-      expect(mocks.updateChannelMutate).toHaveBeenCalledWith({
-        channel: "weixin",
-        data: expect.objectContaining({
-          enabled: false,
-          defaultAccountId: "1344b2b24720@im.bot",
-          baseUrl: "https://ilinkai.weixin.qq.com",
-          pollTimeoutMs: 45000,
-          allowFrom: ["o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat"],
-          accounts: {
-            "1344b2b24720@im.bot": {
-              enabled: true,
-              baseUrl: "https://ilinkai.weixin.qq.com",
-            },
-          },
-        }),
-      });
-    });
-  });
-});

package/src/components/config/ModelConfig.tsx

@@ -1,156 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
-import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
-import { hintForPath } from '@/lib/config-hints';
-import { t } from '@/lib/i18n';
-import { buildProviderModelCatalog } from '@/lib/provider-models';
-import { PageLayout, PageHeader } from '@/components/layout/page-layout';
-import { DOCS_DEFAULT_BASE_URL } from '@/components/doc-browser/DocBrowserContext';
-import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-
-const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
-
-export function ModelConfig() {
-  const { data: config, isLoading } = useConfig();
-  const { data: meta } = useConfigMeta();
-  const { data: schema } = useConfigSchema();
-  const updateModel = useUpdateModel();
-
-  const [model, setModel] = useState('');
-  const [workspace, setWorkspace] = useState('');
-  const uiHints = schema?.uiHints;
-  const modelHint = hintForPath('agents.defaults.model', uiHints);
-  const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
-
-  const providerCatalog = useMemo(
-    () => buildProviderModelCatalog({ meta, config, onlyConfigured: true }),
-    [config, meta]
-  );
-
-  useEffect(() => {
-    if (!config?.agents?.defaults) {
-      return;
-    }
-    setModel((config.agents.defaults.model || '').trim());
-    setWorkspace(config.agents.defaults.workspace || '');
-  }, [config]);
-
-  const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateModel.mutate({
-      model,
-      workspace
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="max-w-2xl space-y-6">
-        <div className="space-y-2">
-          <Skeleton className="h-8 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </div>
-        <Card className="rounded-2xl border-gray-200 p-6">
-          <div className="flex items-center gap-4 mb-6">
-            <Skeleton className="h-12 w-12 rounded-xl" />
-            <div className="space-y-2">
-              <Skeleton className="h-5 w-24" />
-              <Skeleton className="h-3 w-32" />
-            </div>
-          </div>
-          <Skeleton className="h-4 w-20 mb-2" />
-          <Skeleton className="h-10 w-full rounded-xl" />
-        </Card>
-        <Card className="rounded-2xl border-gray-200 p-6">
-          <Skeleton className="h-5 w-24 mb-2" />
-          <Skeleton className="h-10 w-full rounded-xl" />
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <PageLayout>
-      <PageHeader title={t('modelPageTitle')} description={t('modelPageDescription')} />
-
-      <form onSubmit={handleSubmit} className="space-y-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {/* Model Card */}
-          <div className="p-8 rounded-2xl bg-white border border-gray-200 shadow-card">
-            <div className="flex items-center gap-4 mb-8">
-              <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
-                <Sparkles className="h-5 w-5" />
-              </div>
-              <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="model" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                {modelHint?.label ?? 'Model Name'}
-              </Label>
-              <ProviderScopedModelInput
-                id="model"
-                value={model}
-                onChange={setModel}
-                providerCatalog={providerCatalog}
-                modelPlaceholder={modelHint?.placeholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER}
-              />
-              <p className="text-xs text-gray-400">{modelHelpText}</p>
-              <a
-                href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`}
-                className="inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors"
-              >
-                <BookOpen className="h-3.5 w-3.5" />
-                {t('channelsGuideTitle')}
-              </a>
-            </div>
-          </div>
-
-          {/* Workspace Card */}
-          <div className="p-8 rounded-2xl bg-white border border-gray-200 shadow-card">
-            <div className="flex items-center gap-4 mb-8">
-              <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
-                <Folder className="h-5 w-5" />
-              </div>
-              <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="workspace" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                {workspaceHint?.label ?? 'Default Path'}
-              </Label>
-              <Input
-                id="workspace"
-                value={workspace}
-                onChange={(e) => setWorkspace(e.target.value)}
-                placeholder={workspaceHint?.placeholder ?? '/path/to/workspace'}
-                className="rounded-xl"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-end pt-4">
-          <Button
-            type="submit"
-            disabled={updateModel.isPending}
-            size="lg"
-          >
-            {updateModel.isPending ? (
-              <Loader2 className="h-5 w-5 animate-spin" />
-            ) : (
-              t('saveChanges')
-            )}
-          </Button>
-        </div>
-      </form>
-    </PageLayout>
-  );
-}

package/src/components/config/README.md

@@ -1,2 +0,0 @@
-## 目录预算豁免
-- 原因：配置中心目录按配置面板维度组织，每个面板都需要独立入口、局部测试与装配文件；当前结构受 UI 信息架构约束，需要保留达到或超过 `12` 个直接代码文件的扁平集合。