cx-chat 0.0.2 → 0.0.4

package/src/components/common/detail-link.tsx

@@ -1,67 +0,0 @@
-import clsx from 'clsx'
-import { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-import { CxTooltip } from '@cx-ui'
-
-export type DetailLinkProps = {
-  /** 显示的文本内容 */
-  text: string
-  /** 点击事件 */
-  onClick?: () => void
-  /** 额外的渲染内容（如徽章、图标等） */
-  extra?: ReactNode
-  /** 自定义类名 */
-  className?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** tooltip 提示文本，默认为"查看" */
-  title?: string
-}
-
-/**
- * 表格中可点击跳转详情的链接组件
- * 
- * @example
- * // 基础用法
- * <DetailLink text={record.name} onClick={() => handleDetail(record)} />
- * 
- * @example
- * // 带额外内容（如徽章）
- * <DetailLink 
- *   text={record.name} 
- *   onClick={() => handleDetail(record)}
- *   extra={<span className="ml-2 px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">系统</span>}
- * />
- */
-export function DetailLink({
-  text,
-  onClick,
-  extra,
-  className,
-  disabled = false,
-  title,
-}: DetailLinkProps) {
-  const { t } = useTranslation()
-  const tooltipTitle = title ?? t('common.view')
-  
-  return (
-    <CxTooltip title={tooltipTitle}>
-      <button
-        type="button"
-        className={clsx(
-          'max-w-full cursor-pointer truncate text-blue-600 hover:underline dark:text-blue-400',
-          disabled && 'cursor-not-allowed opacity-50 hover:no-underline',
-          className,
-        )}
-        disabled={disabled}
-        onClick={disabled ? undefined : onClick}>
-        <span className="inline-flex items-center gap-1">
-          <span className="truncate">{text}</span>
-          {extra}
-        </span>
-      </button>
-    </CxTooltip>
-  )
-}
-
-DetailLink.displayName = 'DetailLink'

package/src/components/common/error-boundary.tsx

@@ -1,98 +0,0 @@
-import {Component} from 'react';
-import type {ErrorInfo, ReactNode} from 'react';
-import {AlertTriangle, RefreshCcw} from 'lucide-react';
-
-interface Props {
-  children?: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-    error: null,
-  };
-
-  public static getDerivedStateFromError(error: Error): State {
-    return {hasError: true, error};
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('------- 全局错误边界捕获到错误 -------');
-    console.error('错误:', error);
-    console.error('组件堆栈:', errorInfo.componentStack);
-    console.error('----------------------------------------');
-  }
-
-  public handleReload = () => {
-    window.location.reload();
-  };
-
-  public render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      return (
-        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
-          <div
-            className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center border border-gray-200 dark:border-gray-700">
-            <div
-              className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-              <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400"/>
-            </div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-              出错了
-            </h1>
-            <p className="text-gray-500 dark:text-gray-400 mb-6">
-              应用程序遇到意外错误。请尝试重新加载页面。
-            </p>
-
-            {this.state.error && (
-              <div
-                className="mb-6 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg text-left overflow-auto max-h-32 text-xs font-mono text-red-500">
-                {this.state.error.toString()}
-              </div>
-            )}
-
-            <button
-              onClick={this.handleReload}
-              className="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-            >
-              <RefreshCcw size={18}/>
-              重新加载应用
-            </button>
-
-            <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 w-full">
-              <p className="text-sm text-gray-500 mb-3">
-                如果重新加载无法解决问题，请尝试重置应用程序。
-                <br/>
-                <span className="text-xs text-orange-500">
-                                    （这将清除您的本地会话和设置）
-                                </span>
-              </p>
-              <button
-                onClick={() => {
-                  localStorage.clear();
-                  window.location.reload();
-                }}
-                className="text-sm text-red-600 hover:text-red-700 underline underline-offset-4"
-              >
-                重置应用并清除缓存
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

package/src/components/common/language-switcher.tsx

@@ -1,91 +0,0 @@
-import { useUserPreferences } from '@/hooks/useUserPreferences';
-import { setStore } from '@/utils/storage';
-import { Check, Globe } from 'lucide-react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const languages = [
-    { code: 'zh', name: '简体中文', nativeName: '简体中文', displayCode: '中' },
-    { code: 'en', name: 'English', nativeName: 'English', displayCode: 'EN' },
-];
-
-interface LanguageSwitcherProps {
-    direction?: 'up' | 'down';
-    /** 是否在按钮上显示当前语言代码（如 EN / ZH） */
-    showCode?: boolean;
-    /** 仅本地切换语言：不调用保存语言接口（用于登录页等未登录场景） */
-    localOnly?: boolean;
-}
-
-const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ direction = 'up', showCode = false, localOnly = false }) => {
-    const { i18n } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const { saveLanguage } = useUserPreferences();
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-                setIsOpen(false);
-            }
-        };
-
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-
-    const currentCode = String(i18n.language || '').toLowerCase().startsWith('zh') ? 'zh' : 'en';
-    const currentLanguage = languages.find(lang => lang.code === currentCode) || languages[0];
-
-    const handleLanguageChange = (langCode: string) => {
-        i18n.changeLanguage(langCode);
-        if (localOnly) {
-            // localStorage.setItem('i18nextLng', langCode);
-            setStore('i18nextLng', langCode);
-        } else {
-            saveLanguage(langCode);  // Save to server
-        }
-        setIsOpen(false);
-    };
-
-    return (
-        <div className="relative" ref={dropdownRef}>
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                className={`p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-500 dark:text-gray-400${showCode ? ' flex items-center gap-1' : ''}`}
-                title={currentLanguage.nativeName}
-            >
-                <Globe size={20} />
-                {showCode && (
-                    <span className="text-[11px] font-bold tracking-wide w-4 text-center">{currentLanguage.displayCode}</span>
-                )}
-                <span className="sr-only">Switch Language</span>
-            </button>
-
-            {isOpen && (
-                <div className={`absolute right-0 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 z-50 ${direction === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'
-                    }`}>
-                    {languages.map((lang) => (
-                        <button
-                            key={lang.code}
-                            onClick={() => handleLanguageChange(lang.code)}
-                            className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                        >
-                            <span>{lang.nativeName}</span>
-                            {currentCode === lang.code && (
-                                <Check size={16} className="text-blue-600 dark:text-blue-400" />
-                            )}
-                        </button>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default LanguageSwitcher;

package/src/components/common/lite-table/index.tsx

@@ -1,135 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-
-import type { ListRenderContext } from '@/components/table-view/components/table-view.types'
-
-export function getRecordKey(record: any, rowKey: string): string | number {
-  const v = record?.[rowKey] ?? record?._id
-  if (v === undefined || v === null) {
-    return `__idx_${JSON.stringify(record).slice(0, 80)}`
-  }
-  return v
-}
-
-export function keysEqual(a: string | number, b: string | number) {
-  return String(a) === String(b)
-}
-
-export type LiteTableBaseProps = Pick<
-  ListRenderContext,
-  'columns' | 'renderCell' | 'tableData' | 't'
->
-
-export type LiteTableProps = LiteTableBaseProps & {
-  /** 行主键字段，默认 `id` */
-  rowKey?: string
-  onRowClick?: (record: any, index: number) => void
-  rowClassName?: (record: any, index: number) => string
-  /** 包裹 table 的横向滚动容器 */
-  className?: string
-}
-
-/** 从列表渲染上下文中取出 LiteTable 所需字段（忽略 `tree` 等） */
-export function pickLiteTableProps(ctx: ListRenderContext): LiteTableBaseProps {
-  return {
-    columns: ctx.columns,
-    renderCell: ctx.renderCell,
-    tableData: ctx.tableData,
-    t: ctx.t,
-  }
-}
-
-function columnAlignClass(align: string | undefined): string {
-  if (align === 'center') return 'text-center'
-  if (align === 'right') return 'text-right'
-  if (align === 'left') return 'text-left'
-  return ''
-}
-
-/** 与 antd Table 列约定一致：number 视为 px */
-function columnWidthStyle(col: {
-  width?: number | string
-}): React.CSSProperties | undefined {
-  const w = col.width
-  if (w === undefined || w === null || w === '') return undefined
-  return { width: typeof w === 'number' ? `${w}px` : w }
-}
-
-/**
- * 轻量表格（原生 table）：
- * - 适合简单展示
- * - 不依赖 antd Table
- */
-export default function LiteTable(props: LiteTableProps) {
-  const {
-    className,
-    columns,
-    onRowClick,
-    renderCell,
-    rowClassName,
-    rowKey = 'id',
-    tableData,
-    t,
-  } = props
-
-  return (
-    <div className={clsx('overflow-x-auto', className)}>
-      <table className="w-full table-fixed text-left text-sm">
-        <thead className="bg-gray-50 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400">
-          <tr>
-            {columns.map((col: any, index: number) => (
-              <th
-                key={(col.key as string) ?? col.dataIndex ?? index}
-                style={columnWidthStyle(col)}
-                className={clsx(
-                  'px-3 py-4 font-medium',
-                  columnAlignClass(col.headerAlign ?? col.align ?? 'left'),
-                )}>
-                {typeof col.title === 'string'
-                  ? t(col.title as any)
-                  : ((col.title as React.ReactNode) ?? '')}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-          {tableData.map((record: any, rowIndex: number) => (
-            <tr
-              key={String(getRecordKey(record, rowKey))}
-              role={onRowClick ? 'button' : undefined}
-              tabIndex={onRowClick ? 0 : undefined}
-              onClick={onRowClick ? () => onRowClick(record, rowIndex) : undefined}
-              onKeyDown={
-                onRowClick
-                  ? (e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault()
-                        onRowClick(record, rowIndex)
-                      }
-                    }
-                  : undefined
-              }
-              className={clsx(
-                'transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50',
-                onRowClick && 'cursor-pointer',
-                rowClassName?.(record, rowIndex),
-              )}>
-              {columns.map((col: any, colIndex: number) => (
-                <td
-                  key={(col.key as string) ?? col.dataIndex ?? colIndex}
-                  style={columnWidthStyle(col)}
-                  className={clsx(
-                    'px-3 py-4 text-gray-900 dark:text-white',
-                    columnAlignClass(col.align),
-                  )}>
-                  {renderCell(col, record, rowIndex)}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-

package/src/components/common/md-editor.tsx

@@ -1,126 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/cn'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-
-type Props = {
-  value?: string
-  onChange?: (next: string) => void
-  /** 挂最外层；作为 Form.Item 唯一直接子节点时用这里写高度，勿再外包 div（会接不到 value/onChange） */
-  className?: string
-  id?: string
-  disabled?: boolean
-}
-
-/** 左侧 Markdown 源码、右侧实时预览（与滚动大致同步） */
-export function MdEditor({ value, onChange, className, id, disabled }: Props) {
-  const { t } = useTranslation()
-  const sourceRef = useRef<HTMLTextAreaElement | null>(null)
-  const previewRef = useRef<HTMLDivElement | null>(null)
-  const activeRef = useRef<0 | 1 | 2>(0)
-  const ignoreNextRef = useRef<{ source: boolean; preview: boolean }>({
-    source: false,
-    preview: false,
-  })
-  const rafRef = useRef<number | null>(null)
-  const releaseTimerRef = useRef<number | null>(null)
-
-  const scheduleRelease = () => {
-    if (releaseTimerRef.current != null) window.clearTimeout(releaseTimerRef.current)
-    releaseTimerRef.current = window.setTimeout(() => {
-      activeRef.current = 0
-    }, 120)
-  }
-
-  const syncScroll = (from: 1 | 2) => {
-    const sourceEl = sourceRef.current
-    const previewEl = previewRef.current
-    if (!sourceEl || !previewEl) return
-    activeRef.current = from
-    scheduleRelease()
-
-    if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
-    rafRef.current = requestAnimationFrame(() => {
-      if (from === 1) {
-        ignoreNextRef.current.preview = true
-        const maxFrom = sourceEl.scrollHeight - sourceEl.clientHeight
-        const maxTo = previewEl.scrollHeight - previewEl.clientHeight
-        const ratio = maxFrom > 0 ? sourceEl.scrollTop / maxFrom : 0
-        previewEl.scrollTop = maxTo > 0 ? ratio * maxTo : 0
-        return
-      }
-      ignoreNextRef.current.source = true
-      const maxFrom = previewEl.scrollHeight - previewEl.clientHeight
-      const maxTo = sourceEl.scrollHeight - sourceEl.clientHeight
-      const ratio = maxFrom > 0 ? previewEl.scrollTop / maxFrom : 0
-      sourceEl.scrollTop = maxTo > 0 ? ratio * maxTo : 0
-    })
-  }
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
-      if (releaseTimerRef.current != null) window.clearTimeout(releaseTimerRef.current)
-    }
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={cn('flex h-full w-full min-h-0 gap-4 overflow-hidden', className)}
-    >
-      <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
-        <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
-          <h3 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
-            {t('common.md_editor.editor_source')}
-          </h3>
-        </div>
-        <div className="min-h-0 flex-1 overflow-hidden">
-          <textarea
-            ref={sourceRef}
-            className="h-full w-full min-h-0 resize-none overflow-auto border-0 bg-transparent p-3 font-mono text-sm text-gray-900 outline-none dark:text-gray-100"
-            placeholder={t('common.md_editor.raw_text_placeholder')}
-            value={value ?? ''}
-            disabled={disabled}
-            onChange={(e) => onChange?.(e.target.value)}
-            onScroll={() => {
-              if (ignoreNextRef.current.source) {
-                ignoreNextRef.current.source = false
-                return
-              }
-              if (activeRef.current === 0 || activeRef.current === 1) syncScroll(1)
-            }}
-          />
-        </div>
-      </div>
-
-      <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
-        <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
-          <h3 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
-            {t('common.md_editor.editor_preview')}
-          </h3>
-        </div>
-        <div
-          ref={previewRef}
-          className="prose prose-sm max-w-none min-h-0 flex-1 overflow-auto p-3 text-gray-900 dark:prose-invert dark:text-gray-100"
-          onScroll={() => {
-            if (ignoreNextRef.current.preview) {
-              ignoreNextRef.current.preview = false
-              return
-            }
-            if (activeRef.current === 0 || activeRef.current === 2) syncScroll(2)
-          }}
-        >
-          {(value ?? '').trim() ? (
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{value ?? ''}</ReactMarkdown>
-          ) : (
-            <span className="not-prose text-sm text-gray-400">
-              {t('common.md_editor.preview_empty')}
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/common/modal/confirm-dialog.tsx

@@ -1,113 +0,0 @@
-import React from 'react'
-import { AlertTriangle, X } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-
-import { CxButton, CxButtonCancel, CxButtonIcon } from '@cx-ui'
-
-/**
- * 基于 `ui/ConfirmDialog` 的克隆：交互与 props 一致；底部与关闭使用 `CxButton`。
- * `ui/ConfirmDialog.tsx` 保持不动作参考；需要本实现时在页面中改 import 指向本文件即可。
- */
-interface ConfirmDialogProps {
-  isOpen: boolean
-  onClose: () => void
-  onConfirm: () => void
-  title: string
-  message: string
-  /** 遮罩层额外 class（如嵌套在 antd Modal 内时用 `z-[2000]` 盖住主弹窗） */
-  overlayClassName?: string
-  confirmText?: string
-  cancelText?: string
-  /** 为 true 时隐藏取消按钮（结果提示场景只需要一个按钮） */
-  hideCancel?: boolean
-  /** 为 true 时交换主/次按钮顺序 */
-  swapButtons?: boolean
-  danger?: boolean
-}
-
-const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
-  isOpen,
-  onClose,
-  onConfirm,
-  title,
-  message,
-  overlayClassName,
-  confirmText,
-  cancelText,
-  hideCancel = false,
-  swapButtons = false,
-  danger = false,
-}) => {
-  const { t } = useTranslation()
-
-  if (!isOpen) return null
-
-  const overlayClass = ['fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50', overlayClassName]
-    .filter(Boolean)
-    .join(' ')
-
-  const confirmButton = danger ? (
-    <CxButton color="danger" variant="solid" onClick={onConfirm}>
-      {confirmText || t('common.confirm')}
-    </CxButton>
-  ) : (
-    <CxButton type="primary" onClick={onConfirm}>
-      {confirmText || t('common.confirm')}
-    </CxButton>
-  )
-
-  const cancelButton = hideCancel ? null : (
-    <CxButtonCancel onClick={onClose}>
-      {cancelText || t('common.cancel')}
-    </CxButtonCancel>
-  )
-
-  return (
-    <div className={overlayClass}>
-      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full">
-        <div className="p-6">
-          <div className="flex items-start gap-4">
-            {danger && (
-              <div className="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
-                <AlertTriangle
-                  size={20}
-                  className="text-red-600 dark:text-red-400"
-                />
-              </div>
-            )}
-            <div className="flex-1 min-w-0">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                {title}
-              </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-line max-h-[45vh] overflow-auto pr-1">
-                {message}
-              </p>
-            </div>
-            <CxButtonIcon
-              type="default"
-              icon={<X size={20} />}
-              onClick={onClose}
-              title={t('common.close')}
-              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
-            />
-          </div>
-        </div>
-        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 rounded-b-xl flex justify-end gap-3">
-          {swapButtons ? (
-            <>
-              {confirmButton}
-              {cancelButton}
-            </>
-          ) : (
-            <>
-              {cancelButton}
-              {confirmButton}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ConfirmDialog