style(界面): 优化聊天页面和侧边栏样式

- 聊天页面集成 ChatHeader 组件显示助手信息
- 添加淡入、滑入等动画效果样式
- 优化侧边栏布局和新对话按钮交互
- 统一分类标签的视觉样式

src/app/chat/[id]/page.tsx

@@ -6,6 +6,7 @@ import { Share2, MoreHorizontal, Loader2, Square, Clock, ChevronDown, Pencil, Tr
 import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
 import { ChatInput } from '@/components/features/ChatInput';
 import { MessageBubble } from '@/components/features/MessageBubble';
+import { ChatHeaderInfo } from '@/components/features/ChatHeader';
 import { cn } from '@/lib/utils';
 import { useConversation, useConversations } from '@/hooks/useConversations';
 import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
@@ -263,6 +264,19 @@ export default function ChatPage({ params }: PageProps) {
     setEnableThinking(!enableThinking);
   };
 
+  // 切换模型（持久化到数据库）
+  const handleModelChange = async (modelId: string) => {
+    if (!conversation || modelId === selectedModelId) return;
+
+    try {
+      await updateConversation(chatId, { model: modelId });
+      setSelectedModelId(modelId);
+    } catch (error) {
+      console.error('Failed to change model:', error);
+      throw error;
+    }
+  };
+
   // 转换模型格式
   const modelOptions = models.map((m) => ({
     id: m.modelId,
@@ -305,7 +319,9 @@ export default function ChatPage({ params }: PageProps) {
         )}
       >
         {/* 固定顶部 Header */}
-        <header className="h-[var(--header-height)] px-4 flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-bg-primary)] sticky top-0 z-10">
+        <header className="px-4 py-2 flex flex-col gap-1 border-b border-[var(--color-border)] bg-[var(--color-bg-primary)] sticky top-0 z-10">
+          {/* 第一行：标题和操作按钮 */}
+          <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <SidebarToggle onClick={() => setSidebarOpen(!sidebarOpen)} />
 
@@ -416,6 +432,17 @@ export default function ChatPage({ params }: PageProps) {
               <MoreHorizontal size={18} />
             </button>
             </div>
+          </div>
+
+          {/* 第二行：助手和模型信息 */}
+          <div className="pl-12">
+            <ChatHeaderInfo
+              assistant={conversation?.assistant || null}
+              currentModel={selectedModelId}
+              models={modelOptions}
+              onModelChange={handleModelChange}
+            />
+          </div>
         </header>
 
         {/* 消息列表区域 */}

src/app/globals.css

@@ -258,6 +258,26 @@ body {
   animation: scaleInFast 0.15s ease-out;
 }
 
+.animate-scale-in {
+  animation: scaleInFast 0.2s ease-out;
+}
+
+/* 卡片淡入上浮动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.3s ease-out both;
+}
+
 /* ========================================
    响应式设计
    ======================================== */

src/components/layout/Sidebar.tsx

@@ -2,11 +2,11 @@
 
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import { Plus, PanelLeft, Trash2, MoreHorizontal, Loader2, Pencil, Check, X } from 'lucide-react';
+import { Plus, PanelLeft, Trash2, MoreHorizontal, Loader2, Pencil, Check, X, Bot } from 'lucide-react';
 import { UserMenu } from '@/components/ui/UserMenu';
+import { NewChatModal } from '@/components/features/NewChatModal';
 import { cn } from '@/lib/utils';
 import { useConversations } from '@/hooks/useConversations';
-import { useSettings } from '@/hooks/useSettings';
 import { useAuth } from '@/providers/AuthProvider';
 import type { Conversation } from '@/drizzle/schema';
 import { useState, useRef, useEffect } from 'react';
@@ -19,14 +19,13 @@ interface SidebarProps {
 export function Sidebar({ isOpen = true }: SidebarProps) {
   const pathname = usePathname();
   const router = useRouter();
-  const { conversations, loading, createConversation, deleteConversation, updateConversation } = useConversations();
+  const { conversations, loading, deleteConversation, updateConversation } = useConversations();
-  const { settings } = useSettings();
   const { user } = useAuth();
-  const [creatingChat, setCreatingChat] = useState(false);
   const [menuOpen, setMenuOpen] = useState<string | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingTitle, setEditingTitle] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showNewChatModal, setShowNewChatModal] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -53,23 +52,9 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
     };
   }, [menuOpen]);
 
-  // 创建新对话
+  // 创建新对话 - 显示选择助手弹框
-  const handleNewChat = async () => {
+  const handleNewChat = () => {
-    if (creatingChat) return;
+    setShowNewChatModal(true);
-
-    try {
-      setCreatingChat(true);
-      const newConversation = await createConversation({
-        model: settings?.defaultModel || 'claude-sonnet-4-20250514',
-        tools: settings?.defaultTools || [],
-        enableThinking: settings?.enableThinking || false,
-      });
-      router.push(`/chat/${newConversation.conversationId}`);
-    } catch (error) {
-      console.error('Failed to create conversation:', error);
-    } finally {
-      setCreatingChat(false);
-    }
   };
 
   // 删除对话
@@ -150,18 +135,29 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
         <div className="px-4 py-2">
           <button
             onClick={handleNewChat}
-            disabled={creatingChat}
+            className="flex items-center gap-2 text-[var(--color-primary)] text-sm font-medium py-2 hover:opacity-80 transition-opacity"
-            className="flex items-center gap-2 text-[var(--color-primary)] text-sm font-medium py-2 hover:opacity-80 transition-opacity disabled:opacity-50"
           >
-            {creatingChat ? (
-              <Loader2 size={18} className="animate-spin" />
-            ) : (
             <Plus size={18} />
-            )}
             <span>New chat</span>
           </button>
         </div>
 
+        {/* 助手库入口 */}
+        <div className="px-4 pb-2">
+          <Link
+            href="/assistants"
+            className={cn(
+              'flex items-center gap-2 text-sm font-medium py-2 transition-colors',
+              pathname === '/assistants'
+                ? 'text-[var(--color-primary)]'
+                : 'text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]'
+            )}
+          >
+            <Bot size={18} />
+            <span>助手库</span>
+          </Link>
+        </div>
+
         {/* 聊天列表 */}
         <nav className="flex-1 overflow-y-auto px-2 flex flex-col gap-1">
           {loading ? (
@@ -301,6 +297,12 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
           onClick={() => setMenuOpen(null)}
         />
       )}
+
+      {/* 新建对话弹框 */}
+      <NewChatModal
+        isOpen={showNewChatModal}
+        onClose={() => setShowNewChatModal(false)}
+      />
     </>
   );
 }