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}
+ {/* 小三角箭头 */}
+
+
+
+ );
+}