feat(web): 重构组件样式并添加确认对话框组件

- 优化组件视觉风格: 使用渐变色、阴影和圆角增强现代感
- 添加 ConfirmDialog 组件和 useConfirm hook 用于确认操作
- 改进聊天界面: 添加滚动到底部按钮、斜杠命令自动弹出
- 统一组件间距和颜色方案，提升 UI 一致性

web/client/src/components/chat/ChatInput.tsx

@@ -1,5 +1,5 @@
-import { useState, useRef } from 'react';
-import { Send, Terminal, Image, Play, FileText, ArrowUp } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Terminal, Image, Play, FileText, ArrowUp } from 'lucide-react';
 
 const SLASH_COMMANDS = [
   { cmd: '/run', desc: '执行 pipeline 阶段', icon: Play },
@@ -19,6 +19,16 @@ export function ChatInput({ onSend, disabled }: { onSend: (content: string) => v
     ? SLASH_COMMANDS.filter((c) => c.cmd.startsWith(input.split(' ')[0]))
     : [];
 
+  // Auto-show/hide slash command menu
+  useEffect(() => {
+    if (input.startsWith('/') && matchingCmds.length > 0) {
+      setShowCmds(true);
+      setCmdIdx(0);
+    } else {
+      setShowCmds(false);
+    }
+  }, [input, matchingCmds.length]);
+
   const handleSend = () => {
     if (!input.trim() || disabled) return;
     onSend(input.trim());