@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/components/input/DropdownSelector.css

@@ -1,231 +0,0 @@
-/**
- * DropdownSelector 组件样式
- */
-
-.dropdown-selector {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px; /* 与 ChatInput 右侧按钮一致 */
-  padding: 0 8px;
-  /* 避免用 --chat-muted 做背景（暗色下容易与 input 背景同色） */
-  background: rgba(0, 0, 0, 0.04);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 6%, transparent);
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  color: var(--chat-text-muted, #888);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.dropdown-selector:hover:not(.disabled) {
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-  color: var(--chat-text, #ccc);
-}
-
-.dropdown-selector.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.dropdown-selector .chevron {
-  color: var(--chat-text-muted, #666);
-}
-
-/* 下拉菜单 */
-.dropdown-selector .dropdown-menu {
-  position: absolute;
-  left: 0;
-  right: auto;
-  min-width: 180px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--chat-dropdown-bg, #252526);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 9999;
-  padding: 4px 8px 4px 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-/* 向上弹出 */
-.dropdown-selector .dropdown-menu.dropdown-up {
-  bottom: 100%;
-  top: auto;
-  margin-bottom: 4px;
-}
-
-/* 向下弹出 */
-.dropdown-selector .dropdown-menu.dropdown-down {
-  top: 100%;
-  bottom: auto;
-  margin-top: 4px;
-}
-
-/* 右对齐 */
-.dropdown-selector .dropdown-menu.dropdown-align-right {
-  left: auto;
-  right: 0;
-}
-
-.dropdown-selector .dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--chat-text-muted, #999);
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.dropdown-selector .dropdown-item:hover {
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-  color: var(--chat-text, #ccc);
-}
-
-.dropdown-selector .dropdown-item.active {
-  background: rgba(0, 0, 0, 0.08);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 14%, transparent);
-  color: var(--chat-text, #fff);
-}
-
-.dropdown-selector .check-icon {
-  margin-left: auto;
-  color: var(--chat-text, #ccc);
-  flex-shrink: 0;
-}
-
-.dropdown-selector .selector-text {
-  /* max-width: 150px; */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 空状态 */
-.dropdown-selector .dropdown-empty {
-  padding: 12px 10px;
-  font-size: 12px;
-  color: var(--chat-text-muted, #666);
-  text-align: center;
-}
-
-/* 分组标题 */
-.dropdown-selector .group-title {
-  padding: 8px 10px 4px;
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--chat-text-muted, #666);
-}
-
-.dropdown-selector .group-title:first-child {
-  margin-top: 0;
-}
-
-/* 选项标签 */
-.dropdown-selector .option-label {
-  flex: 1;
-  text-align: left;
-}
-
-/* 右侧容器（标签和勾选图标） */
-.dropdown-selector .option-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-/* 提供商标记 */
-.dropdown-selector .provider-badge {
-  padding: 2px 6px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #999);
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 3px;
-  white-space: nowrap;
-}
-
-.dropdown-selector .provider-badge.native {
-  color: var(--chat-text-muted, #999);
-}
-
-/* 选项包装器 */
-.dropdown-selector .dropdown-item-wrapper {
-  position: relative;
-}
-
-/* 模型特性提示框（组件内渲染，但使用 fixed 定位） */
-.ai-chat-model-tooltip {
-  /* 比之前更窄一点，避免“太宽” */
-  min-width: 160px;
-  max-width: 240px;
-  width: max-content;
-  padding: 12px;
-  background: var(--chat-dropdown-bg, #252526);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  pointer-events: none;
-}
-
-.ai-chat-model-tooltip__section {
-  margin-bottom: 10px;
-}
-
-.ai-chat-model-tooltip__section:last-child {
-  margin-bottom: 0;
-}
-
-.ai-chat-model-tooltip__title {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #888);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.ai-chat-model-tooltip__features {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ai-chat-model-tooltip__feature {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--chat-text, #ccc);
-}
-
-.ai-chat-model-tooltip__check {
-  color: #4ade80;
-  flex-shrink: 0;
-}
-
-.ai-chat-model-tooltip__cost {
-  font-size: 13px;
-  color: var(--chat-text, #ccc);
-}
-
-.ai-chat-model-tooltip__description {
-  font-size: 12px;
-  color: var(--chat-text-muted, #999);
-  line-height: 1.5;
-}

package/src/components/input/DropdownSelector.tsx

@@ -1,333 +0,0 @@
-/**
- * DropdownSelector Component
- * 与 Vue 版本 DropdownSelector.vue 保持一致
- * 前端只负责渲染，分组数据由后端提供
- */
-
-import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
-import { Icon } from '@iconify/react';
-import './DropdownSelector.css';
-
-/** 下拉选项 */
-export interface DropdownOption {
-  value: string;
-  label: string;
-  icon?: string;
-  /** 分组名称（由后端决定，前端只负责渲染） */
-  group?: string;
-  /** 模型特性信息（用于 hover 提示） */
-  tooltip?: {
-    /** 可用功能列表 */
-    features?: string[];
-    /** 开销信息（数组，分行显示） */
-    cost?: string[];
-    /** 其他描述信息 */
-    description?: string;
-  };
-}
-
-/** 分组后的选项（由后端提供） */
-export interface GroupedOptions {
-  [groupName: string]: DropdownOption[];
-}
-
-interface DropdownSelectorProps {
-  /** 当前选中的值 */
-  value: string;
-  /** 选项列表（扁平列表） */
-  options?: DropdownOption[];
-  /** 分组后的选项（优先级高于 options，由后端提供） */
-  groupedOptions?: GroupedOptions;
-  /** 占位符文本 */
-  placeholder?: string;
-  /** 选择回调 */
-  onSelect?: (value: string) => void;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 下拉菜单对齐方式 */
-  align?: 'left' | 'right';
-}
-
-export function DropdownSelector({
-  value,
-  options,
-  groupedOptions,
-  placeholder = '请选择',
-  onSelect,
-  disabled = false,
-  align = 'left',
-}: DropdownSelectorProps) {
-  const selectorRef = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const hoveredItemRef = useRef<HTMLElement | null>(null);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('up');
-  const [hoveredOption, setHoveredOption] = useState<DropdownOption | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-
-  // 检查是否有选项
-  const hasOptions = useMemo(() => {
-    if (groupedOptions && Object.keys(groupedOptions).length > 0) {
-      return Object.values(groupedOptions).some(group => group.length > 0);
-    }
-    return options && options.length > 0;
-  }, [options, groupedOptions]);
-
-  // 当前选中的选项（从扁平列表或分组数据中查找）
-  const currentOption = useMemo(() => {
-    if (groupedOptions) {
-      for (const group of Object.values(groupedOptions)) {
-        const found = group.find(opt => opt.value === value);
-        if (found) return found;
-      }
-    }
-    return options?.find(opt => opt.value === value);
-  }, [value, options, groupedOptions]);
-
-  // 排序后的选项（扁平列表模式使用）
-  const sortedOptions = useMemo(() => {
-    if (!options) return [];
-    return [...options].sort((a, b) => a.label.localeCompare(b.label));
-  }, [options]);
-
-  /**
-   * 计算下拉方向（根据可用空间）
-   */
-  const calculateDropdownDirection = useCallback((): 'up' | 'down' => {
-    if (!selectorRef.current) return 'up';
-    const rect = selectorRef.current.getBoundingClientRect();
-    const spaceAbove = rect.top;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    // 如果上方空间小于 200px 且下方空间更大，则向下弹出
-    return spaceAbove < 200 && spaceBelow > spaceAbove ? 'down' : 'up';
-  }, []);
-
-  /**
-   * 切换菜单
-   */
-  const toggleMenu = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (disabled) return;
-      if (!menuOpen) {
-        setDropdownDirection(calculateDropdownDirection());
-      }
-      setMenuOpen((prev) => !prev);
-    },
-    [menuOpen, calculateDropdownDirection, disabled]
-  );
-
-  /**
-   * 选择选项
-   */
-  const selectOption = useCallback(
-    (optValue: string) => {
-      onSelect?.(optValue);
-      setMenuOpen(false);
-    },
-    [onSelect]
-  );
-
-  /**
-   * 处理选项 hover 事件
-   */
-  const handleItemHover = useCallback((event: React.MouseEvent<HTMLDivElement>, opt: DropdownOption) => {
-    const target = event.currentTarget as HTMLElement;
-    hoveredItemRef.current = target;
-    setHoveredOption(opt);
-    
-    if (!opt.tooltip) {
-      setTooltipPosition({ top: 0, left: 0 });
-      return;
-    }
-    
-    if (!target) return;
-    
-    const rect = target.getBoundingClientRect();
-    // 提示框初始位置：右侧，距离 8px
-    setTooltipPosition({
-      top: rect.top,
-      left: rect.right + 8,
-    });
-  }, []);
-
-  /**
-   * 当提示框显示后，调整位置（避免超出视口）
-   * 使用 requestAnimationFrame 确保 tooltip 已完成渲染
-   */
-  useLayoutEffect(() => {
-    if (!hoveredOption?.tooltip || !hoveredItemRef.current) return;
-    
-    // 使用 rAF 确保 tooltip 已渲染完成
-    const rafId = requestAnimationFrame(() => {
-      if (!tooltipRef.current || !hoveredItemRef.current) return;
-      
-      const tooltip = tooltipRef.current;
-      const item = hoveredItemRef.current;
-      const itemRect = item.getBoundingClientRect();
-      const tooltipRect = tooltip.getBoundingClientRect();
-      
-      let top = itemRect.top;
-      let left = itemRect.right + 8;
-      
-      // 检查是否会超出视口右侧
-      if (left + tooltipRect.width > window.innerWidth) {
-        // 显示在左侧
-        left = itemRect.left - tooltipRect.width - 8;
-      }
-      
-      // 检查是否会超出视口底部
-      if (top + tooltipRect.height > window.innerHeight) {
-        top = window.innerHeight - tooltipRect.height - 8;
-      }
-      
-      // 检查是否会超出视口顶部
-      if (top < 8) {
-        top = 8;
-      }
-      
-      setTooltipPosition({ top, left });
-    });
-    
-    return () => cancelAnimationFrame(rafId);
-  }, [hoveredOption]);
-
-  /**
-   * 点击外部关闭菜单
-   */
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (selectorRef.current && !selectorRef.current.contains(target)) {
-        setMenuOpen(false);
-      }
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, []);
-
-  return (
-    <div 
-      ref={selectorRef} 
-      className={`dropdown-selector${disabled ? ' disabled' : ''}`}
-      onClick={!disabled ? toggleMenu : undefined}
-    >
-      {currentOption?.icon && <Icon icon={currentOption.icon} width={14} />}
-      <span className="selector-text">{currentOption?.label || placeholder}</span>
-      <Icon icon="lucide:chevron-down" width={14} className="chevron" />
-
-      {menuOpen && (
-        <div
-          className={`dropdown-menu dropdown-${dropdownDirection}${align === 'right' ? ' dropdown-align-right' : ''}`}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* 空状态 */}
-          {!hasOptions && (
-            <div className="dropdown-empty">暂无数据</div>
-          )}
-
-          {/* 分组模式：使用后端返回的分组数据 */}
-          {groupedOptions && Object.keys(groupedOptions).length > 0 ? (
-            <>
-              {Object.entries(groupedOptions).map(([groupName, groupItems]) => (
-                <div key={groupName}>
-                  <div className="group-title">{groupName}</div>
-                  {groupItems.map((opt) => (
-                    <div
-                      key={opt.value}
-                      className="dropdown-item-wrapper"
-                      onMouseEnter={(e) => handleItemHover(e, opt)}
-                      onMouseLeave={() => {
-                        setHoveredOption(null);
-                        hoveredItemRef.current = null;
-                      }}
-                    >
-                      <button
-                        className={`dropdown-item${value === opt.value ? ' active' : ''}`}
-                        onClick={() => selectOption(opt.value)}
-                      >
-                        {opt.icon && <Icon icon={opt.icon} width={14} />}
-                        <span className="option-label">{opt.label}</span>
-                        <span className="option-right">
-                          {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
-                        </span>
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </>
-          ) : (
-            /* 扁平列表模式：无分组数据时使用 */
-            sortedOptions.map((opt) => (
-              <div
-                key={opt.value}
-                className="dropdown-item-wrapper"
-                onMouseEnter={(e) => handleItemHover(e, opt)}
-                onMouseLeave={() => {
-                  setHoveredOption(null);
-                  hoveredItemRef.current = null;
-                }}
-              >
-                <button
-                  className={`dropdown-item${value === opt.value ? ' active' : ''}`}
-                  onClick={() => selectOption(opt.value)}
-                >
-                  {opt.icon && <Icon icon={opt.icon} width={14} />}
-                  <span className="option-label">{opt.label}</span>
-                  <span className="option-right">
-                    {value === opt.value && <Icon icon="lucide:check" width={14} className="check-icon" />}
-                  </span>
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-
-      {/* Hover 提示：不使用 Portal，采用 fixed 定位避免 overflow 裁剪，同时样式保持组件内可控 */}
-      {hoveredOption?.tooltip && (
-        <div
-          ref={tooltipRef}
-          className="ai-chat-model-tooltip"
-          style={{
-            position: 'fixed',
-            top: `${tooltipPosition.top}px`,
-            left: `${tooltipPosition.left}px`,
-            zIndex: 10000,
-          }}
-        >
-          {hoveredOption.tooltip.features && hoveredOption.tooltip.features.length > 0 && (
-            <div className="ai-chat-model-tooltip__section">
-              <div className="ai-chat-model-tooltip__title">可用功能</div>
-              <div className="ai-chat-model-tooltip__features">
-                {hoveredOption.tooltip.features.map((feature) => (
-                  <div key={feature} className="ai-chat-model-tooltip__feature">
-                    <Icon icon="lucide:check" width={12} className="ai-chat-model-tooltip__check" />
-                    <span>{feature}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-          {hoveredOption.tooltip.cost && hoveredOption.tooltip.cost.length > 0 && (
-            <div className="ai-chat-model-tooltip__section">
-              <div className="ai-chat-model-tooltip__title">开销</div>
-              <div className="ai-chat-model-tooltip__cost">
-                {hoveredOption.tooltip.cost.map((line, i) => (
-                  <div key={i}>{line}</div>
-                ))}
-              </div>
-            </div>
-          )}
-          {hoveredOption.tooltip.description && (
-            <div className="ai-chat-model-tooltip__section">
-              <div className="ai-chat-model-tooltip__description">{hoveredOption.tooltip.description}</div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/input/ImagePreviewModal.css

@@ -1,124 +0,0 @@
-/* 遮罩层 */
-.image-preview-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 99999;
-  display: flex;
-  flex-direction: column;
-  background: rgb(61 61 61 / 40%);
-  backdrop-filter: blur(8px);
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* 顶部栏 */
-.preview-header {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 16px 20px;
-  min-height: 52px;
-}
-
-.preview-counter {
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}
-
-.preview-close-btn {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 12px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.preview-close-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-50%) scale(1.05);
-}
-
-.preview-close-btn:active {
-  transform: translateY(-50%) scale(0.95);
-}
-
-/* 导航按钮 */
-.preview-nav-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 48px;
-  padding: 0 12px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.preview-nav-btn:hover:not(.disabled) {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-50%) scale(1.1);
-}
-
-.preview-nav-btn:active:not(.disabled) {
-  transform: translateY(-50%) scale(0.95);
-}
-
-.preview-nav-btn.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.preview-nav-prev {
-  left: 24px;
-}
-
-.preview-nav-next {
-  right: 24px;
-}
-
-/* 主图片区域 */
-.preview-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 0 80px;
-}
-
-.preview-image {
-  max-width: calc(100% - 80px);
-  max-height: calc(100vh - 140px);
-  object-fit: contain;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}