cx-chat 0.0.2 → 0.0.4

package/src/components/common/pagination.tsx

@@ -1,472 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import clsx from 'clsx';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import CxSelect from '@/components/cx-ui/select';
-
-interface PaginationProps {
-    /** Current page (0-indexed by default, see zeroIndexed prop) */
-    page: number;
-    /** Total number of items */
-    total: number;
-    /** Items per page */
-    pageSize: number;
-    /** Callback when page changes */
-    onPageChange: (page: number) => void;
-    /** Available page size options */
-    pageSizeOptions?: number[];
-    /** Callback when page size changes */
-    onPageSizeChange?: (size: number) => void;
-    /** Whether to show stats ("Showing X-Y of Z") */
-    showStats?: boolean;
-    /** Whether to show page size selector */
-    showSizeChanger?: boolean;
-    /** Whether to show first/last page buttons */
-    showFirstLast?: boolean;
-    /** Maximum number of page buttons to show (default: 7) */
-    maxPageButtons?: number;
-    /** Layout variant */
-    variant?: 'spread' | 'compact' | 'simple' | 'slice';
-    /** Button size */
-    size?: 'sm' | 'md';
-    /** Whether page is 0-indexed (default: true) */
-    zeroIndexed?: boolean;
-    /** Translation key prefix */
-    translationPrefix?: string;
-    /** Whether pagination is disabled */
-    disabled?: boolean;
-    /** Additional CSS class */
-    className?: string;
-    /** For simple variant without total - whether there are more views */
-    hasMore?: boolean;
-    /** slice variant: whether current page is first */
-    isFirst?: boolean;
-    /** slice variant: whether current page is last */
-    isLast?: boolean;
-}
-
-/**
- * 增强版分页组件（与 ui/Pagination 行为一致，供 table-view 等使用）
- * Enhanced Pagination Component with page numbers, ellipsis, and page size selector.
- */
-const Pagination: React.FC<PaginationProps> = ({
-    page,
-    total = 0,
-    pageSize,
-    onPageChange,
-    pageSizeOptions = [10, 20, 50, 100],
-    onPageSizeChange,
-    showStats = true,
-    showSizeChanger = false,
-    showFirstLast = true,
-    maxPageButtons = 7,
-    variant = 'spread',
-    size = 'md',
-    zeroIndexed = true,
-    translationPrefix = 'common.pagination',
-    disabled = false,
-    className,
-    hasMore = false,
-    isFirst,
-    isLast,
-}) => {
-    const { t } = useTranslation();
-    const [navLock, setNavLock] = React.useState(false)
-
-    const resolvedPageSizeNum = (() => {
-        const n = Number(pageSize);
-        return Number.isFinite(n) && n > 0 ? n : pageSizeOptions[0];
-    })();
-
-    // Normalize to 0-indexed internally
-    const currentPage = zeroIndexed ? page : page - 1;
-    const totalPages = Math.max(1, Math.ceil(total / resolvedPageSizeNum));
-
-    // Calculate displayed range
-    const startItem = total > 0 ? currentPage * resolvedPageSizeNum + 1 : 0;
-    const endItem = Math.min((currentPage + 1) * resolvedPageSizeNum, total);
-
-    // Navigation handlers
-    const goToPage = (targetPage: number) => {
-        if (disabled || navLock) return;
-        // slice 模式后端不返回 total，不能用 totalPages 去 clamp，否则“下一页”会永远被限制在第 1 页
-        const normalizedTarget =
-          variant === 'slice'
-            ? Math.max(0, targetPage)
-            : Math.max(0, Math.min(totalPages - 1, targetPage));
-        setNavLock(true)
-        onPageChange(zeroIndexed ? normalizedTarget : normalizedTarget + 1);
-    };
-
-    const handleFirst = () => goToPage(0);
-    const handleLast = () => goToPage(totalPages - 1);
-    const handlePrev = () => {
-        if (variant === 'slice') {
-            if (disabled || navLock) return
-            if (!isFirst) {
-              setNavLock(true)
-              onPageChange(zeroIndexed ? Math.max(0, currentPage - 1) : currentPage);
-            }
-        } else {
-            goToPage(currentPage - 1);
-        }
-    };
-    const handleNext = () => {
-        if (variant === 'simple') {
-            if (hasMore) onPageChange(zeroIndexed ? currentPage + 1 : currentPage + 2);
-        } else if (variant === 'slice') {
-            if (disabled || navLock) return
-            if (!isLast) {
-              setNavLock(true)
-              onPageChange(zeroIndexed ? currentPage + 1 : currentPage + 2);
-            }
-        } else {
-            goToPage(currentPage + 1);
-        }
-    };
-
-    React.useEffect(() => {
-      setNavLock(false)
-    }, [page, pageSize, disabled, variant])
-
-    const isPrevDisabled =
-      disabled ||
-      (variant === 'slice'
-        ? !!isFirst
-        : currentPage === 0);
-    const isNextDisabled =
-      disabled ||
-      (variant === 'slice'
-        ? !!isLast
-        : (variant === 'simple' ? !hasMore : currentPage >= totalPages - 1));
-
-    // Generate page numbers with ellipsis
-    const generatePageNumbers = (): (number | 'ellipsis-start' | 'ellipsis-end')[] => {
-        if (totalPages <= maxPageButtons) {
-            return Array.from({ length: totalPages }, (_, i) => i);
-        }
-
-        const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
-        const sideButtons = Math.floor((maxPageButtons - 3) / 2); // buttons on each side of current
-
-        // Always show first page
-        pages.push(0);
-
-        // Calculate range around current page
-        let rangeStart = Math.max(1, currentPage - sideButtons);
-        let rangeEnd = Math.min(totalPages - 2, currentPage + sideButtons);
-
-        // Adjust range if near edges
-        if (currentPage <= sideButtons + 1) {
-            rangeEnd = Math.min(totalPages - 2, maxPageButtons - 3);
-        } else if (currentPage >= totalPages - sideButtons - 2) {
-            rangeStart = Math.max(1, totalPages - maxPageButtons + 2);
-        }
-
-        // Add start ellipsis
-        if (rangeStart > 1) {
-            pages.push('ellipsis-start');
-        }
-
-        // Add middle views
-        for (let i = rangeStart; i <= rangeEnd; i++) {
-            pages.push(i);
-        }
-
-        // Add end ellipsis
-        if (rangeEnd < totalPages - 2) {
-            pages.push('ellipsis-end');
-        }
-
-        // Always show last page
-        if (totalPages > 1) {
-            pages.push(totalPages - 1);
-        }
-
-        return pages;
-    };
-
-    // Styles
-    const sizeClasses = {
-        sm: 'h-7 min-w-[28px] text-xs',
-        md: 'h-8 min-w-[32px] text-sm'
-    };
-
-    const buttonBase = clsx(
-        "inline-flex items-center justify-center rounded border transition-all",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        sizeClasses[size]
-    );
-
-    const navButton = clsx(
-        buttonBase,
-        "px-2 border-gray-300 dark:border-gray-600",
-        "text-gray-700 dark:text-gray-300",
-        "hover:bg-gray-50 dark:hover:bg-gray-700",
-        "active:scale-95 active:bg-gray-100 dark:active:bg-gray-600"
-    );
-
-    const pageButton = (isActive: boolean) => clsx(
-        buttonBase,
-        "px-2.5",
-        isActive
-            ? "bg-blue-600 border-blue-600 text-white hover:bg-blue-700"
-            : clsx(
-                "border-gray-300 dark:border-gray-600",
-                "text-gray-700 dark:text-gray-300",
-                "hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-blue-300 dark:hover:border-blue-500",
-                "active:scale-95"
-            )
-    );
-
-    const ellipsisClass = clsx(
-        "inline-flex items-center justify-center px-1 text-gray-400 dark:text-gray-500",
-        sizeClasses[size]
-    );
-
-    // Simple variant (for FeedbackPage style - no total)
-    if (variant === 'simple') {
-        return (
-            <div className={clsx("flex justify-between items-center pt-8", className)}>
-                <button
-                    onClick={handlePrev}
-                    disabled={isPrevDisabled}
-                    className={clsx(navButton, "px-4 py-2 rounded-lg")}
-                >
-                    {t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
-                </button>
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                    {t(`${translationPrefix}.page`, { page: currentPage + 1, defaultValue: `Page ${currentPage + 1}` })}
-                </span>
-                <button
-                    onClick={handleNext}
-                    disabled={isNextDisabled}
-                    className={clsx(navButton, "px-4 py-2 rounded-lg")}
-                >
-                    {t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
-                </button>
-            </div>
-        );
-    }
-
-    // Slice variant（后端切片：首页/上一页/下一页 + 每页条数，同一行靠右）
-    if (variant === 'slice') {
-        return (
-            <div
-                className={clsx(
-                    'flex flex-wrap items-center justify-end gap-2',
-                    className,
-                )}>
-                <button
-                    onClick={handleFirst}
-                    disabled={isPrevDisabled}
-                    className={navButton}
-                    title={t(`${translationPrefix}.first`, { defaultValue: 'First' })}
-                >
-                    <ChevronsLeft size={size === 'sm' ? 14 : 16} />
-                </button>
-                <button
-                    onClick={handlePrev}
-                    disabled={isPrevDisabled}
-                    className={navButton}
-                    title={t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
-                >
-                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
-                </button>
-                <span className="px-2 text-sm text-gray-500 dark:text-gray-400">
-                    {t(`${translationPrefix}.page`, {
-                        page: currentPage + 1,
-                        defaultValue: `Page ${currentPage + 1}`,
-                    })}
-                </span>
-                <button
-                    onClick={handleNext}
-                    disabled={isNextDisabled}
-                    className={navButton}
-                    title={t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
-                >
-                    <ChevronRight size={size === 'sm' ? 14 : 16} />
-                </button>
-                {showSizeChanger && onPageSizeChange ? (
-                    <CxSelect.Medium
-                        size="small"
-                        value={String(resolvedPageSizeNum)}
-                        onChange={(val) => {
-                            const n = Number(val);
-                            if (!Number.isFinite(n)) return;
-                            onPageSizeChange(n);
-                        }}
-                        disabled={disabled}
-                        options={pageSizeOptions.map((opt) => ({
-                            label: `${opt} ${t(`${translationPrefix}.per_page`, { defaultValue: '/ page' })}`,
-                            value: String(opt),
-                        }))}
-                        style={{ width: 120 }}
-                        getPopupContainer={() => document.body}
-                    />
-                ) : null}
-            </div>
-        );
-    }
-
-    // Compact variant (centered, no stats)
-    if (variant === 'compact') {
-        const pageNumbers = generatePageNumbers();
-        return (
-            <div className={clsx("flex justify-center items-center gap-1", className)}>
-                {showFirstLast && (
-                    <button onClick={handleFirst} disabled={isPrevDisabled} className={navButton} title={t(`${translationPrefix}.first`, { defaultValue: 'First' })}>
-                        <ChevronsLeft size={size === 'sm' ? 14 : 16} />
-                    </button>
-                )}
-                <button onClick={handlePrev} disabled={isPrevDisabled} className={navButton}>
-                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
-                </button>
-
-                {pageNumbers.map((p, idx) =>
-                    typeof p === 'number' ? (
-                        <button
-                            key={p}
-                            onClick={() => goToPage(p)}
-                            disabled={disabled}
-                            className={pageButton(p === currentPage)}
-                        >
-                            {p + 1}
-                        </button>
-                    ) : (
-                        <span key={`${p}-${idx}`} className={ellipsisClass}>...</span>
-                    )
-                )}
-
-                <button onClick={handleNext} disabled={isNextDisabled} className={navButton}>
-                    <ChevronRight size={size === 'sm' ? 14 : 16} />
-                </button>
-                {showFirstLast && (
-                    <button onClick={handleLast} disabled={isNextDisabled} className={navButton} title={t(`${translationPrefix}.last`, { defaultValue: 'Last' })}>
-                        <ChevronsRight size={size === 'sm' ? 14 : 16} />
-                    </button>
-                )}
-            </div>
-        );
-    }
-
-    // Default: spread variant (full featured)
-    const pageNumbers = generatePageNumbers();
-
-    return (
-        <div className={clsx(
-            "flex flex-wrap items-center justify-between gap-4",
-            className
-        )}>
-            {/* Left: Stats */}
-            <div className="flex items-center gap-4">
-                {showStats && (
-                    <span className="text-sm text-gray-500 dark:text-gray-400">
-                        {t(`${translationPrefix}.showing`, {
-                            start: startItem,
-                            end: endItem,
-                            total: total,
-                            defaultValue: `Showing ${startItem}-${endItem} of ${total}`
-                        })}
-                    </span>
-                )}
-
-                {/* Page Size Selector */}
-                {showSizeChanger && onPageSizeChange && (
-                    <div className="flex items-center gap-2">
-                        <CxSelect.Medium
-                            size="small"
-                            /** antd Select 受控值与 options.value 类型须一致；统一用 string 避免 number/string 混用不触发变更 */
-                            value={String(resolvedPageSizeNum)}
-                            onChange={(val) => {
-                                const n = Number(val);
-                                if (!Number.isFinite(n)) return;
-                                onPageSizeChange(n);
-                                /**
-                                 * 勿在此处再调 goToPage(0)。
-                                 * 父级若在 onPageChange 里写 handleTableChange({ current, pageSize: paginationData.pageSize })，
-                                 * 会与本次 setState 同 tick 触发，闭包里的 pageSize 仍是旧值，会把刚改的条数覆盖回去。
-                                 * 需要回到第一页时：在 onPageSizeChange 里与条数一并处理，或交给 table-view 的 handleTableChange（已按条数变化重置 page）。
-                                 */
-                            }}
-                            disabled={disabled}
-                            options={pageSizeOptions.map((opt) => ({
-                                label: `${opt} ${t(`${translationPrefix}.per_page`, { defaultValue: '/ page' })}`,
-                                value: String(opt),
-                            }))}
-                            style={{ width: 120 }}
-                            getPopupContainer={() => document.body}
-                        />
-                    </div>
-                )}
-            </div>
-
-            {/* Right: Page Navigation */}
-            <div className="flex items-center gap-1">
-                {/* First */}
-                {showFirstLast && (
-                    <button
-                        onClick={handleFirst}
-                        disabled={isPrevDisabled}
-                        className={navButton}
-                        title={t(`${translationPrefix}.first`, { defaultValue: 'First page' })}
-                    >
-                        <ChevronsLeft size={size === 'sm' ? 14 : 16} />
-                    </button>
-                )}
-
-                {/* Previous */}
-                <button
-                    onClick={handlePrev}
-                    disabled={isPrevDisabled}
-                    className={navButton}
-                    title={t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
-                >
-                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
-                </button>
-
-                {/* Page Numbers */}
-                <div className="flex items-center gap-1 mx-1">
-                    {pageNumbers.map((p, idx) =>
-                        typeof p === 'number' ? (
-                            <button
-                                key={p}
-                                onClick={() => goToPage(p)}
-                                disabled={disabled}
-                                className={pageButton(p === currentPage)}
-                            >
-                                {p + 1}
-                            </button>
-                        ) : (
-                            <span key={`${p}-${idx}`} className={ellipsisClass}>...</span>
-                        )
-                    )}
-                </div>
-
-                {/* Next */}
-                <button
-                    onClick={handleNext}
-                    disabled={isNextDisabled}
-                    className={navButton}
-                    title={t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
-                >
-                    <ChevronRight size={size === 'sm' ? 14 : 16} />
-                </button>
-
-                {/* Last */}
-                {showFirstLast && (
-                    <button
-                        onClick={handleLast}
-                        disabled={isNextDisabled}
-                        className={navButton}
-                        title={t(`${translationPrefix}.last`, { defaultValue: 'Last page' })}
-                    >
-                        <ChevronsRight size={size === 'sm' ? 14 : 16} />
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default Pagination;

package/src/components/common/path.tsx

@@ -1,175 +0,0 @@
-import { CxTag } from '@cx-ui'
-import clsx from 'clsx'
-import { Copy } from 'lucide-react'
-import { Fragment, memo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
-
-/**
- * 接口路径按 `/` 分段，每段一个 CxTag，颜色按层级循环；前导 `/` 单独展示。
- * 默认不用 `pill`，与列表「状态」等胶囊 Tag 区分。
- * 左侧复制按钮复制完整路径（自动补全前导 `/`）。
- */
-
-const SEGMENT_COLORS = [
-  '#2563eb',
-  '#0d9488',
-  '#16a34a',
-  '#ca8a04',
-  '#9333ea',
-  '#dc2626',
-]
-
-export type PathTagsProps = {
-  path?: string | null
-  /** 无有效分段时展示 */
-  emptyText?: string
-  className?: string
-  /** 是否使用胶囊 Tag；不传时 `whole` 默认 true，`segment` 默认 false */
-  pill?: boolean
-  /** 是否紧凑模式：`segment` 默认 true；`whole` 默认 false */
-  compact?: boolean
-  /** `renderMode="whole"` 时的 Tag 颜色（如与 httpMethod 同色） */
-  color?: string
-  /**
-   * 渲染模式：
-   * - whole（默认）：整条路径一个 Tag
-   * - segment：按 `/` 分段多个 Tag（历史效果）
-   */
-  renderMode?: string
-  /**
-   * `renderMode="segment"` 时的颜色模式：
-   * - same：所有分段同色（直接用 CxTag 默认样式，便于后续统一调整/一键切回）
-   * - segment：按层级循环配色（历史效果）
-   */
-  colorMode?: string
-}
-
-/** 用于展示与复制：无内容返回空串；否则保证以 `/` 开头 */
-function normalizePathForCopy(raw: string): string {
-  const s = String(raw).trim()
-  if (!s) return ''
-  return s.startsWith('/') ? s : `/${s}`
-}
-
-function splitSegments(normalized: string): string[] {
-  if (!normalized) return []
-  return normalized.split('/').filter((p) => p.length > 0)
-}
-
-function PathTagsInner({
-  path,
-  emptyText = '-',
-  className,
-  color,
-  renderMode = 'whole',
-  colorMode = 'same',
-  pill,
-  compact,
-}: PathTagsProps) {
-  const { t } = useTranslation()
-  const [showCopy, setShowCopy] = useState(false)
-  const { copy } = useCopyToClipboard()
-
-  const compactResolved = compact ?? (renderMode === 'segment')
-  const pillResolved = pill ?? (renderMode === 'whole')
-
-  // 用于显示的标准化路径（保证以 / 开头）
-  const fullPath =
-    path != null && String(path).trim() !== ''
-      ? normalizePathForCopy(String(path))
-      : ''
-  
-  // 用于复制的原始路径（只 trim，不添加前导 /）
-  const rawPathForCopy =
-    path != null && String(path).trim() !== ''
-      ? String(path).trim()
-      : ''
-  
-  const segments = fullPath ? splitSegments(fullPath) : []
-
-  if (!fullPath || segments.length === 0) {
-    return (
-      <span className="text-gray-500 dark:text-gray-400">{emptyText}</span>
-    )
-  }
-
-  return (
-    <div
-      className={clsx(
-        'inline-flex max-w-full flex-wrap items-center gap-x-1 gap-y-1',
-        compactResolved ? 'gap-x-0.5' : 'gap-x-1',
-        className,
-      )}
-      onMouseEnter={() => setShowCopy(true)}
-      onMouseLeave={() => setShowCopy(false)}>
-      <div className="inline-flex min-w-0 flex-wrap items-center gap-y-1">
-        {renderMode === 'segment' ? (
-          <>
-            <span
-              className={clsx(
-                'select-none self-center text-gray-400 dark:text-gray-500',
-                compactResolved ? 'mx-0' : 'mx-0.5',
-              )}
-              aria-hidden>
-              /
-            </span>
-            {segments.map((seg, i) => (
-              <Fragment key={`${i}-${seg}`}>
-                {i > 0 ? (
-                  <span
-                    className={clsx(
-                      'select-none self-center text-gray-400 dark:text-gray-500',
-                      compactResolved ? 'mx-0' : 'mx-0.5',
-                    )}
-                    aria-hidden>
-                    /
-                  </span>
-                ) : null}
-                <CxTag
-                  color={
-                    colorMode === 'segment'
-                      ? SEGMENT_COLORS[i % SEGMENT_COLORS.length]
-                      : undefined
-                  }
-                  pill={pillResolved}
-                  className={compactResolved ? 'px-1 py-0 text-xs' : undefined}>
-                  {seg}
-                </CxTag>
-              </Fragment>
-            ))}
-          </>
-        ) : (
-          <CxTag
-            color={color}
-            pill={pillResolved}
-            className={compactResolved ? 'px-1 py-0 text-xs' : undefined}
-          >
-            {fullPath}
-          </CxTag>
-        )}
-      </div>
-      <button
-        type="button"
-        className={clsx(
-          'inline-flex rounded p-0.5 text-gray-500 transition-all',
-          'hover:bg-gray-100 hover:text-blue-600',
-          'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-blue-400',
-          compactResolved ? 'ml-0.5' : 'ml-1',
-          !showCopy && 'opacity-0 pointer-events-none',
-        )}
-        title={t('common.copy_path')}
-        aria-label={t('common.copy_path')}
-        onClick={(e) => {
-          e.stopPropagation()
-          void copy(rawPathForCopy)
-        }}>
-        <Copy size={14} strokeWidth={2} aria-hidden />
-      </button>
-    </div>
-  )
-}
-
-PathTagsInner.displayName = 'PathTags'
-
-export const PathTags = memo(PathTagsInner)

package/src/components/common/system-logo-mark.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { useSystemConfig } from '@/config/system'
-
-type SystemLogoMarkProps = {
-  className?: string
-  /** 没有系统 Logo 时的占位形态：square=方形，circle=圆形 */
-  fallbackShape?: 'circle' | 'square'
-}
-
-/** 系统 Logo 标识：统一登录/注册/会话首页的品牌展示（有配置用配置）。 */
-export function SystemLogoMark({
-  className,
-  fallbackShape = 'square',
-}: SystemLogoMarkProps) {
-  const { systemLogo, systemName } = useSystemConfig()
-  const shapeCls =
-    fallbackShape === 'circle' ? 'rounded-full' : 'rounded-xl'
-
-  if (systemLogo) {
-    return (
-      <img
-        src={systemLogo}
-        alt={systemName}
-        className={clsx(shapeCls, 'object-cover', className)}
-        onError={(e) => {
-          e.currentTarget.style.display = 'none'
-        }}
-      />
-    )
-  }
-
-  return (
-    <div
-      className={clsx(
-        shapeCls,
-        'bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20',
-        className,
-      )}
-      aria-hidden
-    >
-      <span className="text-white font-bold">
-        {(systemName || 'A').substring(0, 2).toUpperCase()}
-      </span>
-    </div>
-  )
-}
-