@nextclaw/ui 0.12.11 → 0.12.12

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

@@ -1,305 +0,0 @@
-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>;
-  channelEnabled: boolean;
-  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,
-  channelEnabled,
-  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
-      ? channelEnabled
-        ? t('weixinAuthAuthorized')
-        : t('weixinAuthConnectedDisabled')
-      : 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>{channelEnabled || !hasConnectedAccount ? t('weixinAuthCapabilityHint') : t('weixinAuthDisabledHint')}</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>
-  );
-}

package/src/components/doc-browser/index.ts

@@ -1,3 +0,0 @@
-export { DocBrowser } from './DocBrowser';
-export { DocBrowserProvider, useDocBrowser, isDocsUrl } from './DocBrowserContext';
-export { useDocLinkInterceptor } from './useDocLinkInterceptor';

package/src/components/layout/AppLayout.tsx

@@ -1,82 +0,0 @@
-import { lazy, Suspense, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { Sidebar } from "./Sidebar";
-import {
-  DocBrowserProvider,
-  useDocBrowser,
-} from "@/components/doc-browser/DocBrowserContext";
-import { useDocLinkInterceptor } from "@/components/doc-browser/useDocLinkInterceptor";
-import { useI18n } from "@/components/providers/I18nProvider";
-import { resolveUiDocumentTitle } from "@/lib/ui-document-title";
-
-const DocBrowser = lazy(async () => ({
-  default: (await import("@/components/doc-browser/DocBrowser")).DocBrowser,
-}));
-
-interface AppLayoutProps {
-  children: React.ReactNode;
-}
-
-function isMainWorkspaceRoute(pathname: string): boolean {
-  const normalized = pathname.toLowerCase();
-  return (
-    normalized === "/chat" ||
-    normalized.startsWith("/chat/") ||
-    normalized === "/skills" ||
-    normalized.startsWith("/skills/") ||
-    normalized === "/cron" ||
-    normalized.startsWith("/cron/") ||
-    normalized === "/agents" ||
-    normalized.startsWith("/agents/")
-  );
-}
-
-function AppLayoutInner({ children }: AppLayoutProps) {
-  const { isOpen, mode } = useDocBrowser();
-  useDocLinkInterceptor();
-  const { pathname } = useLocation();
-  const { language } = useI18n();
-  const isMainRoute = isMainWorkspaceRoute(pathname);
-
-  useEffect(() => {
-    document.title = resolveUiDocumentTitle(pathname);
-  }, [pathname, language]);
-
-  return (
-    <div className="h-screen flex bg-background font-sans text-foreground">
-      {!isMainRoute && <Sidebar mode="settings" />}
-      <div className="flex-1 flex min-w-0 overflow-hidden relative">
-        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-          {isMainRoute ? (
-            <div className="flex-1 h-full overflow-hidden">{children}</div>
-          ) : (
-            <main className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar">
-              <div className="mx-auto h-full max-w-6xl animate-fade-in">
-                {children}
-              </div>
-            </main>
-          )}
-        </div>
-        {/* Doc Browser: docked mode renders inline, floating mode renders as overlay */}
-        {isOpen && mode === "docked" && (
-          <Suspense fallback={null}>
-            <DocBrowser />
-          </Suspense>
-        )}
-      </div>
-      {isOpen && mode === "floating" && (
-        <Suspense fallback={null}>
-          <DocBrowser />
-        </Suspense>
-      )}
-    </div>
-  );
-}
-
-export function AppLayout({ children }: AppLayoutProps) {
-  return (
-    <DocBrowserProvider>
-      <AppLayoutInner>{children}</AppLayoutInner>
-    </DocBrowserProvider>
-  );
-}

package/src/components/marketplace/marketplace-page-parts.tsx

@@ -1,94 +0,0 @@
-import type { MarketplaceSort } from '@/api/types';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import { t } from '@/lib/i18n';
-import { PackageSearch } from 'lucide-react';
-import type { Ref } from 'react';
-
-export function FilterPanel(props: {
-  scope: 'all' | 'installed';
-  searchText: string;
-  searchPlaceholder: string;
-  sort: MarketplaceSort;
-  onSearchTextChange: (value: string) => void;
-  onSortChange: (value: MarketplaceSort) => void;
-}) {
-  return (
-    <div className="mb-4">
-      <div className="flex gap-3 items-center">
-        <div className="flex-1 min-w-0 relative">
-          <PackageSearch className="h-4 w-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
-          <input
-            value={props.searchText}
-            onChange={(event) => props.onSearchTextChange(event.target.value)}
-            placeholder={props.searchPlaceholder}
-            className="w-full h-9 border border-gray-200/80 rounded-xl pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
-          />
-        </div>
-
-        {props.scope === 'all' && (
-          <Select value={props.sort} onValueChange={(value) => props.onSortChange(value as MarketplaceSort)}>
-            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="relevance">{t('marketplaceSortRelevance')}</SelectItem>
-              <SelectItem value="updated">{t('marketplaceSortUpdated')}</SelectItem>
-            </SelectContent>
-          </Select>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function MarketplaceListSkeleton(props: {
-  count: number;
-}) {
-  return (
-    <>
-      {Array.from({ length: props.count }, (_, index) => (
-        <article
-          key={`marketplace-skeleton-${index}`}
-          className="rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
-        >
-          <div className="flex items-start gap-3.5 justify-between">
-            <div className="flex min-w-0 flex-1 gap-3">
-              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
-              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
-                <Skeleton className="h-4 w-32 max-w-[70%]" />
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-3 w-12" />
-                  <Skeleton className="h-3 w-24" />
-                </div>
-                <Skeleton className="h-3 w-full" />
-              </div>
-            </div>
-            <Skeleton className="h-8 w-20 shrink-0 rounded-xl" />
-          </div>
-        </article>
-      ))}
-    </>
-  );
-}
-
-export function MarketplaceInfiniteScrollStatus(props: {
-  hasMore: boolean;
-  loading: boolean;
-  sentinelRef: Ref<HTMLDivElement>;
-}) {
-  if (!props.hasMore && !props.loading) {
-    return null;
-  }
-
-  return (
-    <div className="py-4">
-      {props.hasMore && <div ref={props.sentinelRef} className="h-1 w-full" aria-hidden="true" />}
-      {props.loading && (
-        <div data-testid="marketplace-loading-more" className="pt-3 text-center text-xs text-gray-500">
-          {t('loading')}
-        </div>
-      )}
-    </div>
-  );
-}