@nextclaw/ui 0.12.9 → 0.12.10

package/src/components/agents/AgentsPage.test.tsx

@@ -1,217 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { AgentsPage } from '@/components/agents/AgentsPage';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
-import { setLanguage } from '@/lib/i18n';
-
-const mocks = vi.hoisted(() => ({
-  createAgent: vi.fn(),
-  updateAgent: vi.fn(),
-  deleteAgent: vi.fn(),
-  sessionTypesQuery: {
-    data: {
-      defaultType: 'native',
-      options: [
-        { value: 'native', label: 'Native', ready: true },
-        { value: 'codex', label: 'Codex', ready: true },
-        { value: 'claude', label: 'Claude Code', ready: false, reasonMessage: 'Configure Claude Code first.' }
-      ]
-    }
-  },
-  agentsQuery: {
-    data: {
-      agents: [
-        {
-          id: 'main',
-          displayName: 'Main',
-          description: '系统默认入口与总控协作者。',
-          builtIn: true,
-          model: 'openai/gpt-5.1',
-          workspace: '~/.nextclaw/workspace',
-          avatarUrl: null
-        },
-        {
-          id: 'researcher',
-          displayName: 'Researcher',
-          description: '负责调研、信息筛选与结论提炼。',
-          builtIn: false,
-          model: 'openai/gpt-5.2',
-          runtime: 'codex',
-          workspace: '~/.nextclaw/workspace/agents/researcher',
-          avatarUrl: null
-        }
-      ]
-    },
-    isLoading: false
-  },
-  configQuery: {
-    data: {
-      agents: {
-        defaults: {
-          model: 'openai/gpt-5.1',
-          workspace: '~/.nextclaw/workspace'
-        }
-      },
-      providers: {
-        openai: {
-          enabled: true,
-          apiKeySet: true,
-          models: ['gpt-5.1', 'gpt-5.2']
-        }
-      }
-    }
-  },
-  configMetaQuery: {
-    data: {
-      providers: [
-        {
-          name: 'openai',
-          displayName: 'OpenAI',
-          modelPrefix: 'openai',
-          defaultModels: ['openai/gpt-5.1', 'openai/gpt-5.2'],
-          keywords: [],
-          envKey: 'OPENAI_API_KEY'
-        }
-      ]
-    }
-  }
-}));
-
-vi.mock('@/hooks/agents/useAgents', () => ({
-  useAgents: () => mocks.agentsQuery,
-  useCreateAgent: () => ({
-    mutateAsync: mocks.createAgent,
-    isPending: false
-  }),
-  useUpdateAgent: () => ({
-    mutateAsync: mocks.updateAgent,
-    isPending: false
-  }),
-  useDeleteAgent: () => ({
-    mutate: mocks.deleteAgent,
-    isPending: false
-  })
-}));
-
-vi.mock('@/hooks/useConfig', () => ({
-  useConfig: () => mocks.configQuery,
-  useConfigMeta: () => mocks.configMetaQuery
-}));
-
-vi.mock('@/hooks/use-ncp-chat-session-types', () => ({
-  useNcpChatSessionTypes: () => mocks.sessionTypesQuery
-}));
-
-describe('AgentsPage', () => {
-  beforeEach(() => {
-    setLanguage('zh');
-    mocks.createAgent.mockReset();
-    mocks.updateAgent.mockReset();
-    mocks.deleteAgent.mockReset();
-    if (!HTMLElement.prototype.hasPointerCapture) {
-      HTMLElement.prototype.hasPointerCapture = () => false;
-    }
-    if (!HTMLElement.prototype.setPointerCapture) {
-      HTMLElement.prototype.setPointerCapture = () => {};
-    }
-    if (!HTMLElement.prototype.releasePointerCapture) {
-      HTMLElement.prototype.releasePointerCapture = () => {};
-    }
-    useChatInputStore.setState({
-      snapshot: {
-        ...useChatInputStore.getState().snapshot,
-        pendingSessionType: 'native',
-        pendingProjectRoot: '/tmp/demo-project',
-        pendingProjectRootSessionKey: 'draft-session'
-      }
-    });
-    useChatSessionListStore.setState({
-      snapshot: {
-        ...useChatSessionListStore.getState().snapshot,
-        selectedAgentId: 'main',
-        selectedSessionKey: 'session-1'
-      }
-    });
-  });
-
-  it('renders the agents workspace in Chinese and keeps core actions visible', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MemoryRouter>
-        <AgentsPage />
-      </MemoryRouter>
-    );
-
-    expect(screen.getByText('Agent 管理台')).toBeTruthy();
-    expect(screen.getByText('让每个 Agent 都像真正的协作者一样存在')).toBeTruthy();
-    expect(screen.getByText('全部 Agent')).toBeTruthy();
-    expect(screen.getAllByText('主目录').length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('button', { name: '开始对话' })).toHaveLength(2);
-    expect(screen.getAllByRole('button', { name: '编辑' })).toHaveLength(2);
-    expect(screen.getByText('负责调研、信息筛选与结论提炼。')).toBeTruthy();
-    expect(screen.queryByText('专属 Agent 身份，可沉淀自己的记忆、技能与角色风格。')).toBeNull();
-    expect(screen.queryByText('Agent Gallery')).toBeNull();
-
-    await user.click(screen.getAllByRole('button', { name: '编辑' })[1]);
-
-    expect(screen.getByText('编辑 Agent 身份')).toBeTruthy();
-    expect(screen.getByText('主目录保持不变')).toBeTruthy();
-    expect(screen.getByDisplayValue('Researcher')).toBeTruthy();
-    expect(screen.getByDisplayValue('负责调研、信息筛选与结论提炼。').tagName).toBe('TEXTAREA');
-    expect(screen.getByDisplayValue('gpt-5.2')).toBeTruthy();
-  });
-
-  it('uses a runtime dropdown instead of manual text input when editing an agent', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MemoryRouter>
-        <AgentsPage />
-      </MemoryRouter>
-    );
-
-    await user.click(screen.getAllByRole('button', { name: '编辑' })[1]);
-
-    const runtimeTrigger = screen.getByRole('combobox', { name: 'Runtime' });
-    expect(screen.queryByPlaceholderText('Runtime（如 native 或 codex，可选）')).toBeNull();
-    expect(runtimeTrigger.textContent).toContain('Codex');
-    expect(screen.queryByText('跟随默认 Runtime')).toBeNull();
-
-    await user.click(runtimeTrigger);
-    await user.click(screen.getByRole('option', { name: 'Codex' }));
-    await user.click(screen.getByRole('button', { name: '保存编辑' }));
-
-    expect(mocks.updateAgent).toHaveBeenCalledWith({
-      agentId: 'researcher',
-      data: {
-        displayName: 'Researcher',
-        description: '负责调研、信息筛选与结论提炼。',
-        avatar: '',
-        model: 'openai/gpt-5.2',
-        runtime: 'codex'
-      }
-    });
-  });
-
-  it('starts a draft chat with the agent runtime as the pending session type', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MemoryRouter>
-        <AgentsPage />
-      </MemoryRouter>
-    );
-
-    await user.click(screen.getAllByRole('button', { name: '开始对话' })[1]);
-
-    expect(useChatSessionListStore.getState().snapshot.selectedAgentId).toBe('researcher');
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
-    expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
-    expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
-    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
-  });
-});

package/src/components/agents/AgentsPage.tsx

@@ -1,352 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useCreateAgent, useDeleteAgent, useAgents, useUpdateAgent } from '@/hooks/agents/useAgents';
-import { useConfig, useConfigMeta } from '@/hooks/useConfig';
-import type { AgentProfileView } from '@/api/types';
-import {
-  AgentCreateDialog,
-  AgentEditDialog,
-  type AgentCreateFormState,
-  type AgentEditFormState
-} from '@/components/agents/AgentDialogs';
-import {
-  buildSessionTypeOptions,
-  normalizeSessionType,
-  resolveAgentRuntimeSessionType,
-  resolveSessionTypeLabel
-} from '@/components/chat/useChatSessionTypeState';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { useNcpChatSessionTypes } from '@/hooks/use-ncp-chat-session-types';
-import { PageLayout } from '@/components/layout/page-layout';
-import { t } from '@/lib/i18n';
-import { buildProviderModelCatalog } from '@/lib/provider-models';
-import { cn } from '@/lib/utils';
-import { Bot, House, MessageCircle, Pencil, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
-
-const CARD_TONES = [
-  {
-    strip: 'bg-[#efc37a]',
-    chip: 'border-[#f2d7a7] bg-[#fff8eb] text-[#8d5a18]'
-  },
-  {
-    strip: 'bg-[#8fd4c0]',
-    chip: 'border-[#bde6da] bg-[#effbf7] text-[#156653]'
-  },
-  {
-    strip: 'bg-[#b7c9fb]',
-    chip: 'border-[#d7e2ff] bg-[#f4f7ff] text-[#2d4d8f]'
-  }
-] as const;
-
-function resolveAgentTone(index: number, builtIn: boolean) {
-  if (builtIn) {
-    return {
-      strip: 'bg-[#e6b765]',
-      chip: 'border-[#f2d19c] bg-[#fff8ec] text-[#90550d]'
-    };
-  }
-  return CARD_TONES[index % CARD_TONES.length];
-}
-
-export function AgentsPage() {
-  const navigate = useNavigate();
-  const agentsQuery = useAgents();
-  const configQuery = useConfig();
-  const configMetaQuery = useConfigMeta();
-  const sessionTypesQuery = useNcpChatSessionTypes();
-  const createAgent = useCreateAgent();
-  const updateAgent = useUpdateAgent();
-  const deleteAgent = useDeleteAgent();
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(null);
-  const setSessionListSnapshot = useChatSessionListStore((state) => state.setSnapshot);
-
-  const agents = useMemo(() => agentsQuery.data?.agents ?? [], [agentsQuery.data?.agents]);
-  const sortedAgents = useMemo(
-    () =>
-      [...agents].sort(
-        (left, right) =>
-          Number(Boolean(right.builtIn)) - Number(Boolean(left.builtIn)) ||
-          left.id.localeCompare(right.id)
-      ),
-    [agents]
-  );
-  const providerCatalog = useMemo(
-    () => buildProviderModelCatalog({ config: configQuery.data, meta: configMetaQuery.data, onlyConfigured: true }),
-    [configMetaQuery.data, configQuery.data]
-  );
-  const runtimeOptions = useMemo(
-    () => buildSessionTypeOptions(sessionTypesQuery.data?.options ?? []),
-    [sessionTypesQuery.data?.options]
-  );
-  const defaultRuntime = useMemo(
-    () => normalizeSessionType(sessionTypesQuery.data?.defaultType ?? 'native'),
-    [sessionTypesQuery.data?.defaultType]
-  );
-  const defaultRuntimeLabel = useMemo(
-    () => runtimeOptions.find((option) => option.value === defaultRuntime)?.label ?? resolveSessionTypeLabel(defaultRuntime),
-    [defaultRuntime, runtimeOptions]
-  );
-
-  const handleCreate = async (form: AgentCreateFormState) => {
-    await createAgent.mutateAsync({
-      data: {
-        id: form.id,
-        ...(form.displayName.trim() ? { displayName: form.displayName.trim() } : {}),
-        ...(form.description.trim() ? { description: form.description.trim() } : {}),
-        ...(form.avatar.trim() ? { avatar: form.avatar.trim() } : {}),
-        ...(form.home.trim() ? { home: form.home.trim() } : {}),
-        ...(form.model.trim() ? { model: form.model.trim() } : {}),
-        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : {})
-      }
-    });
-    setIsCreateDialogOpen(false);
-  };
-
-  const handleStartEdit = (agent: AgentProfileView) => {
-    setEditingAgent(agent);
-  };
-
-  const handleUpdate = async (agentId: string, form: AgentEditFormState) => {
-    await updateAgent.mutateAsync({
-      agentId,
-      data: {
-        displayName: form.displayName,
-        description: form.description,
-        avatar: form.avatar,
-        model: form.model,
-        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : { runtime: "" })
-      }
-    });
-    setEditingAgent(null);
-  };
-
-  const startChatWithAgent = (agent: AgentProfileView) => {
-    setSessionListSnapshot({
-      selectedAgentId: agent.id,
-      selectedSessionKey: null
-    });
-    useChatInputStore.getState().setSnapshot({
-      pendingSessionType: resolveAgentRuntimeSessionType(agent, defaultRuntime),
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
-    });
-    navigate('/chat');
-  };
-
-  return (
-    <PageLayout className="space-y-5">
-      <section className="relative overflow-hidden rounded-[28px] border border-[#f0d6aa] bg-[linear-gradient(135deg,#fff7ea_0%,#fff9f1_32%,#f2fbff_100%)] px-5 py-5 sm:px-6">
-        <div className="absolute inset-y-0 right-0 w-[46%] bg-[radial-gradient(circle_at_top_right,rgba(255,215,163,0.52),transparent_54%)]" />
-        <div className="absolute -bottom-10 left-8 h-32 w-32 rounded-full bg-[#ffe6c0]/55 blur-3xl" />
-        <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px] xl:items-center">
-          <div className="max-w-3xl space-y-3">
-            <div className="inline-flex items-center gap-2 rounded-full border border-white/70 bg-white/80 px-3 py-1 text-[11px] font-semibold tracking-[0.16em] text-[#9b6118]">
-              <Sparkles className="h-3.5 w-3.5" />
-              {t('agentsHeroEyebrow')}
-            </div>
-            <div className="space-y-2">
-              <h1 className="max-w-2xl text-[30px] font-semibold leading-tight tracking-[-0.05em] text-[#2f2212] sm:text-[38px]">
-                {t('agentsHeroTitle')}
-              </h1>
-              <p className="max-w-2xl text-sm leading-6 text-[#6d5841] sm:text-[15px] sm:leading-7">
-                {t('agentsHeroDescription')}
-              </p>
-            </div>
-            <div className="pt-1">
-              <div className="inline-flex items-center gap-3 rounded-2xl border border-[#f2d5a4] bg-white/82 px-3 py-2 text-[#7a4d12] shadow-[0_14px_30px_rgba(167,117,47,0.07)]">
-                <span className="text-[11px] font-semibold tracking-[0.14em]">
-                  {t('agentsOverviewTotal')}
-                </span>
-                <span className="text-xl font-semibold tracking-[-0.04em] text-[#1f2937]">
-                  {agents.length}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="flex shrink-0 flex-col gap-3">
-            <Button
-              type="button"
-              className="h-10 rounded-2xl bg-[#1f5c4d] px-5 text-sm font-semibold text-white hover:bg-[#184d40]"
-              onClick={() => setIsCreateDialogOpen(true)}
-            >
-              <Plus className="mr-2 h-4 w-4" />
-              {t('agentsCreateButton')}
-            </Button>
-            <div className="rounded-2xl border border-white/70 bg-white/72 px-4 py-3 text-xs leading-6 text-[#6d5841] shadow-[0_18px_40px_rgba(167,117,47,0.08)]">
-              {t('agentsCreateDialogHint')}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {agentsQuery.isLoading ? (
-          <Card className="md:col-span-2 xl:col-span-3 border-dashed border-[#d9dce3] bg-white/70">
-            <CardContent className="py-14 text-center text-sm text-gray-500">
-              {t('agentsLoading')}
-            </CardContent>
-          </Card>
-        ) : sortedAgents.length === 0 ? (
-          <Card className="md:col-span-2 xl:col-span-3 overflow-hidden border-dashed border-[#d9dce3] bg-[linear-gradient(135deg,#fff7ea_0%,#f4fbff_100%)]">
-            <CardContent className="flex min-h-[240px] flex-col items-center justify-center px-6 py-14 text-center">
-              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/80 shadow-[0_18px_44px_rgba(0,0,0,0.08)]">
-                <Bot className="h-8 w-8 text-[#d39a3b]" />
-              </div>
-              <div className="text-lg font-semibold text-[#2f2212]">{t('agentsEmpty')}</div>
-              <p className="mt-2 max-w-md text-sm leading-6 text-[#78644d]">
-                {t('agentsEmptyDescription')}
-              </p>
-              <Button
-                type="button"
-                className="mt-5 rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
-                onClick={() => setIsCreateDialogOpen(true)}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                {t('agentsCreateButton')}
-              </Button>
-            </CardContent>
-          </Card>
-        ) : (
-          sortedAgents.map((agent, index) => {
-            const tone = resolveAgentTone(index, Boolean(agent.builtIn));
-            const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || '';
-            const runtimeLabel = runtimeValue
-              ? runtimeOptions.find((option) => option.value === normalizeSessionType(runtimeValue))?.label ??
-                resolveSessionTypeLabel(runtimeValue)
-              : defaultRuntimeLabel;
-            return (
-              <Card
-                key={agent.id}
-                className="overflow-hidden border border-gray-200 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md"
-              >
-                <div className={cn('h-1.5 w-full', tone.strip)} />
-                <CardContent className="flex h-full flex-col gap-4 px-4 py-4">
-                  <div className="flex items-start gap-3">
-                    <AgentAvatar
-                      agentId={agent.id}
-                      displayName={agent.displayName}
-                      avatarUrl={agent.avatarUrl}
-                      className="h-11 w-11 shrink-0"
-                    />
-                    <div className="min-w-0 flex-1 space-y-1 pt-0.5">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <div className="truncate text-lg font-semibold tracking-[-0.03em] text-[#1f2937]">
-                          {agent.displayName?.trim() || agent.id}
-                        </div>
-                        {agent.builtIn ? (
-                          <span
-                            className={cn(
-                              'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium',
-                              tone.chip
-                            )}
-                          >
-                            <ShieldCheck className="h-3 w-3" />
-                            {t('agentsCardBuiltInTag')}
-                          </span>
-                        ) : null}
-                      </div>
-                      <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-[#94a3b8]">
-                        @{agent.id}
-                      </div>
-                    </div>
-                  </div>
-
-                  <p className="text-sm leading-6 text-[#64748b]">
-                    {agent.description?.trim() ||
-                      (agent.builtIn
-                        ? t('agentsCardBuiltInSummary')
-                        : t('agentsCardCustomSummary'))}
-                  </p>
-
-                  <div className="mt-auto flex flex-col gap-4">
-                    <div>
-                      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
-                        <Sparkles className="h-3.5 w-3.5" />
-                        {t('agentsCardRuntimeLabel')}
-                      </div>
-                      <div className="mt-1.5 text-sm leading-6 text-[#475569]">
-                        {runtimeLabel}
-                      </div>
-                    </div>
-
-                    <div className="border-t border-gray-100 pt-3">
-                      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
-                        <House className="h-3.5 w-3.5" />
-                        {t('agentsCardHomeLabel')}
-                      </div>
-                      <div className="mt-1.5 break-all text-sm leading-6 text-[#475569]">
-                        {agent.workspace ?? '-'}
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Button
-                        type="button"
-                        className="h-9 rounded-xl bg-[#1f5c4d] px-4 text-white hover:bg-[#184d40]"
-                        onClick={() => startChatWithAgent(agent)}
-                      >
-                        <MessageCircle className="mr-2 h-4 w-4" />
-                        {t('agentsCardStartChat')}
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="h-8 rounded-xl px-3 text-xs text-[#7b8794] hover:bg-[#f3f4f6] hover:text-[#475569]"
-                        onClick={() => handleStartEdit(agent)}
-                        disabled={updateAgent.isPending}
-                      >
-                        <Pencil className="mr-1.5 h-3.5 w-3.5" />
-                        {t('agentsEditAction')}
-                      </Button>
-                      {!agent.builtIn ? (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className="h-8 rounded-xl px-3 text-xs text-[#7b8794] hover:bg-[#f3f4f6] hover:text-[#475569]"
-                          onClick={() => deleteAgent.mutate({ agentId: agent.id })}
-                          disabled={deleteAgent.isPending}
-                        >
-                          <Trash2 className="mr-1.5 h-3.5 w-3.5" />
-                          {t('agentsRemoveAction')}
-                        </Button>
-                      ) : null}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })
-        )}
-      </div>
-
-      <AgentCreateDialog
-        open={isCreateDialogOpen}
-        pending={createAgent.isPending}
-        providerCatalog={providerCatalog}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        onOpenChange={setIsCreateDialogOpen}
-        onSubmit={handleCreate}
-      />
-
-      <AgentEditDialog
-        agent={editingAgent}
-        pending={updateAgent.isPending}
-        providerCatalog={providerCatalog}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        onOpenChange={(open) => {
-          if (!open && !updateAgent.isPending) {
-            setEditingAgent(null);
-          }
-        }}
-        onSubmit={handleUpdate}
-      />
-    </PageLayout>
-  );
-}

package/src/components/config/config-layout.ts

@@ -1,10 +0,0 @@
-export const CONFIG_SPLIT_GRID_CLASS = 'grid min-h-0 grid-cols-1 gap-5 xl:grid-cols-[340px_minmax(0,1fr)]';
-
-export const CONFIG_SIDEBAR_CARD_CLASS =
-  'flex min-h-[520px] min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';
-
-export const CONFIG_DETAIL_CARD_CLASS =
-  'flex min-h-[520px] min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';
-
-export const CONFIG_EMPTY_DETAIL_CARD_CLASS =
-  'flex min-h-[520px] min-w-0 items-center justify-center overflow-hidden rounded-2xl border border-gray-200/70 bg-white px-6 text-center xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';