diff --git a/src/components/features/ChatInput.tsx b/src/components/features/ChatInput.tsx index db22ed2..db4a80f 100644 --- a/src/components/features/ChatInput.tsx +++ b/src/components/features/ChatInput.tsx @@ -1,10 +1,11 @@ 'use client'; import { useState, useRef } from 'react'; -import { Plus, ArrowUp, Upload } from 'lucide-react'; +import { Paperclip, ArrowUp, Upload } from 'lucide-react'; import { ModelSelector } from './ModelSelector'; import { ToolsDropdown } from './ToolsDropdown'; import { FilePreviewList } from './FilePreviewList'; +import { Tooltip } from '@/components/ui/Tooltip'; import { useFileUpload } from '@/hooks/useFileUpload'; import { cn } from '@/lib/utils'; import type { Model, Tool } from '@/types'; @@ -136,17 +137,18 @@ export function ChatInput({ {/* 左侧按钮 */}
{/* 添加附件 */} - + + + {/* 隐藏的文件输入 */} {/* 发送按钮 */} - + + +
diff --git a/src/components/features/ToolsDropdown.tsx b/src/components/features/ToolsDropdown.tsx index 41cfee6..f39704c 100644 --- a/src/components/features/ToolsDropdown.tsx +++ b/src/components/features/ToolsDropdown.tsx @@ -3,6 +3,7 @@ import { useState, useRef, useEffect } from 'react'; import { Wrench, Search, Terminal, Globe, Check } from 'lucide-react'; import { Toggle } from '@/components/ui/Toggle'; +import { Tooltip } from '@/components/ui/Tooltip'; import { cn } from '@/lib/utils'; import type { Tool } from '@/types'; @@ -41,20 +42,21 @@ export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsD
{/* 触发按钮 */}
- + + + {enabledCount > 0 && ( - + {enabledCount} )} diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx new file mode 100644 index 0000000..60f653d --- /dev/null +++ b/src/components/ui/Tooltip.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { ReactNode } from 'react'; +import { cn } from '@/lib/utils'; + +interface TooltipProps { + children: ReactNode; + content: string; + position?: 'top' | 'bottom' | 'left' | 'right'; + className?: string; +} + +/** + * Tooltip 组件 + * 鼠标悬停时显示提示文字 + */ +export function Tooltip({ children, content, position = 'top', className }: TooltipProps) { + const positionStyles = { + top: 'bottom-full left-1/2 -translate-x-1/2 mb-2', + bottom: 'top-full left-1/2 -translate-x-1/2 mt-2', + left: 'right-full top-1/2 -translate-y-1/2 mr-2', + right: 'left-full top-1/2 -translate-y-1/2 ml-2', + }; + + const arrowStyles = { + top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-800 border-x-transparent border-b-transparent', + bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-800 border-x-transparent border-t-transparent', + left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-800 border-y-transparent border-r-transparent', + right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-800 border-y-transparent border-l-transparent', + }; + + return ( +
+ {children} +
+ {content} + {/* 小三角箭头 */} +
+
+
+ ); +}