@huyooo/ai-chat-frontend-react 0.1.6 → 0.2.0

package/src/components/input/DropdownSelector.css

@@ -0,0 +1,159 @@
+/**
+ * DropdownSelector 组件样式
+ */
+
+.dropdown-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--chat-muted, #3c3c3c);
+  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: var(--chat-muted-hover, #444);
+  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(255, 255, 255, 0.08);
+  color: var(--chat-text, #ccc);
+}
+
+.dropdown-selector .dropdown-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  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);
+}

package/src/components/input/DropdownSelector.tsx

@@ -0,0 +1,195 @@
+/**
+ * DropdownSelector Component
+ * 与 Vue 版本 DropdownSelector.vue 保持一致
+ * 前端只负责渲染，分组数据由后端提供
+ */
+
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Icon } from '@iconify/react';
+import './DropdownSelector.css';
+
+/** 下拉选项 */
+export interface DropdownOption {
+  value: string;
+  label: string;
+  icon?: string;
+  /** 分组名称（由后端决定，前端只负责渲染） */
+  group?: 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 [menuOpen, setMenuOpen] = useState(false);
+  const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('up');
+
+  // 检查是否有选项
+  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]
+  );
+
+  /**
+   * 点击外部关闭菜单
+   */
+  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) => (
+                    <button
+                      key={opt.value}
+                      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>
+              ))}
+            </>
+          ) : (
+            /* 扁平列表模式：无分组数据时使用 */
+            sortedOptions.map((opt) => (
+              <button
+                key={opt.value}
+                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>
+  );
+}

package/src/components/input/ImagePreviewModal.css

@@ -0,0 +1,124 @@
+/* 遮罩层 */
+.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: 40px;
+  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);
+}

package/src/components/input/ImagePreviewModal.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Icon } from '@iconify/react'
+import './ImagePreviewModal.css'
+
+interface ImagePreviewModalProps {
+  visible: boolean
+  images: string[]
+  initialIndex?: number
+  onClose: () => void
+  onIndexChange?: (index: number) => void
+}
+
+export function ImagePreviewModal({
+  visible,
+  images,
+  initialIndex = 0,
+  onClose,
+  onIndexChange,
+}: ImagePreviewModalProps) {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
+
+  // 重置索引
+  useEffect(() => {
+    if (visible) {
+      setCurrentIndex(initialIndex)
+    }
+  }, [visible, initialIndex])
+
+  // 通知父组件索引变化
+  useEffect(() => {
+    onIndexChange?.(currentIndex)
+  }, [currentIndex, onIndexChange])
+
+  // 上一张
+  const prev = useCallback(() => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1)
+    }
+  }, [currentIndex])
+
+  // 下一张
+  const next = useCallback(() => {
+    if (currentIndex < images.length - 1) {
+      setCurrentIndex(currentIndex + 1)
+    }
+  }, [currentIndex, images.length])
+
+  // 键盘导航
+  useEffect(() => {
+    if (!visible) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      } else if (e.key === 'ArrowLeft') {
+        prev()
+      } else if (e.key === 'ArrowRight') {
+        next()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [visible, onClose, prev, next])
+
+  if (!visible) return null
+
+  const currentSrc = images[currentIndex] || ''
+
+  return createPortal(
+    <div className="image-preview-modal" onClick={onClose}>
+      {/* 顶部栏 */}
+      <div className="preview-header" onClick={(e) => e.stopPropagation()}>
+        {images.length > 1 && (
+          <div className="preview-counter">
+            {currentIndex + 1} / {images.length}
+          </div>
+        )}
+        <button className="preview-close-btn" title="关闭 (Esc)" onClick={onClose}>
+          <Icon icon="lucide:x" width={18} />
+        </button>
+      </div>
+
+      {/* 左导航 */}
+      {images.length > 1 && (
+        <button
+          className={`preview-nav-btn preview-nav-prev${currentIndex <= 0 ? ' disabled' : ''}`}
+          disabled={currentIndex <= 0}
+          onClick={(e) => {
+            e.stopPropagation()
+            prev()
+          }}
+        >
+          <Icon icon="lucide:chevron-left" width={20} />
+        </button>
+      )}
+
+      {/* 主图片区域 */}
+      <div className="preview-main" onClick={(e) => e.stopPropagation()}>
+        <img src={currentSrc} alt="预览" className="preview-image" />
+      </div>
+
+      {/* 右导航 */}
+      {images.length > 1 && (
+        <button
+          className={`preview-nav-btn preview-nav-next${currentIndex >= images.length - 1 ? ' disabled' : ''}`}
+          disabled={currentIndex >= images.length - 1}
+          onClick={(e) => {
+            e.stopPropagation()
+            next()
+          }}
+        >
+          <Icon icon="lucide:chevron-right" width={20} />
+        </button>
+      )}
+    </div>,
+    document.body
+  )
+}

package/src/components/input/at-views/AtBranchView.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useImperativeHandle } from 'react'
+import { Icon } from '@iconify/react'
+import './AtViewStyles.css'
+
+export interface AtPlaceholderViewProps {
+  query: string
+  activeIndex: number
+  onSelect: (path: string) => void
+  onSetActive: (index: number) => void
+  onUpdateCount: (count: number) => void
+}
+
+export interface AtPlaceholderViewHandle {
+  getActivePath: () => string | null
+  confirmActive: () => void
+}
+
+export const AtBranchView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
+  useImperativeHandle(ref, () => ({
+    getActivePath: () => null,
+    confirmActive: () => {},
+  }), [])
+
+  return (
+    <div className="at-placeholder-view">
+      <Icon icon="lucide:git-branch" width={32} className="at-placeholder-icon" />
+      <div className="at-placeholder-title">分支差异</div>
+      <div className="at-placeholder-desc">功能待实现</div>
+      <div className="at-placeholder-hint">将支持引用当前分支与主分支的差异</div>
+    </div>
+  )
+})
+
+AtBranchView.displayName = 'AtBranchView'

package/src/components/input/at-views/AtBrowserView.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useImperativeHandle } from 'react'
+import { Icon } from '@iconify/react'
+import './AtViewStyles.css'
+
+export interface AtPlaceholderViewProps {
+  query: string
+  activeIndex: number
+  onSelect: (path: string) => void
+  onSetActive: (index: number) => void
+  onUpdateCount: (count: number) => void
+}
+
+export interface AtPlaceholderViewHandle {
+  getActivePath: () => string | null
+  confirmActive: () => void
+}
+
+export const AtBrowserView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
+  useImperativeHandle(ref, () => ({
+    getActivePath: () => null,
+    confirmActive: () => {},
+  }), [])
+
+  return (
+    <div className="at-placeholder-view">
+      <Icon icon="lucide:globe" width={32} className="at-placeholder-icon" />
+      <div className="at-placeholder-title">网页</div>
+      <div className="at-placeholder-desc">功能待实现</div>
+      <div className="at-placeholder-hint">将支持引用网页内容、URL 等</div>
+    </div>
+  )
+})
+
+AtBrowserView.displayName = 'AtBrowserView'

package/src/components/input/at-views/AtChatsView.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useImperativeHandle } from 'react'
+import { Icon } from '@iconify/react'
+import './AtViewStyles.css'
+
+export interface AtPlaceholderViewProps {
+  query: string
+  activeIndex: number
+  onSelect: (path: string) => void
+  onSetActive: (index: number) => void
+  onUpdateCount: (count: number) => void
+}
+
+export interface AtPlaceholderViewHandle {
+  getActivePath: () => string | null
+  confirmActive: () => void
+}
+
+export const AtChatsView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
+  useImperativeHandle(ref, () => ({
+    getActivePath: () => null,
+    confirmActive: () => {},
+  }), [])
+
+  return (
+    <div className="at-placeholder-view">
+      <Icon icon="lucide:message-square" width={32} className="at-placeholder-icon" />
+      <div className="at-placeholder-title">历史对话</div>
+      <div className="at-placeholder-desc">功能待实现</div>
+      <div className="at-placeholder-hint">将支持引用之前的对话记录</div>
+    </div>
+  )
+})
+
+AtChatsView.displayName = 'AtChatsView'