feat(聊天): 添加新对话弹窗和聊天头部组件

- 新增 NewChatModal 新对话弹窗，支持快速开始和助手选择
- 新增 ChatHeader 聊天头部组件，显示当前助手和模型信息
- 支持搜索助手和显示收藏助手
- 集成 IconRenderer 显示助手图标

src/components/features/ChatHeader.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Check, Bot } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Assistant {
+  id: number;
+  name: string;
+  icon: string | null;
+  description: string | null;
+}
+
+interface Model {
+  id: string;
+  name: string;
+  displayName: string;
+  tag?: string;
+}
+
+interface ChatHeaderInfoProps {
+  assistant: Assistant | null;
+  currentModel: string;
+  models: Model[];
+  onModelChange: (modelId: string) => Promise<void>;
+}
+
+export function ChatHeaderInfo({
+  assistant,
+  currentModel,
+  models,
+  onModelChange,
+}: ChatHeaderInfoProps) {
+  const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
+  const [isChanging, setIsChanging] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // 点击外部关闭菜单
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsModelMenuOpen(false);
+      }
+    };
+    if (isModelMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isModelMenuOpen]);
+
+  // 处理模型切换
+  const handleModelSelect = async (modelId: string) => {
+    if (modelId === currentModel || isChanging) return;
+
+    try {
+      setIsChanging(true);
+      await onModelChange(modelId);
+      setIsModelMenuOpen(false);
+
+      // 显示成功提示
+      setShowSuccess(true);
+      setTimeout(() => {
+        setShowSuccess(false);
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to change model:', error);
+    } finally {
+      setIsChanging(false);
+    }
+  };
+
+  // 获取当前模型的显示名称
+  const currentModelInfo = models.find((m) => m.id === currentModel);
+  const modelDisplayName = currentModelInfo?.displayName || currentModel;
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      {/* 助手信息 */}
+      <div className="flex items-center gap-1.5 text-[var(--color-text-secondary)]">
+        {assistant ? (
+          <>
+            <span className="text-base">{assistant.icon || '🤖'}</span>
+            <span className="font-medium">{assistant.name}</span>
+          </>
+        ) : (
+          <>
+            <Bot size={16} className="text-[var(--color-text-tertiary)]" />
+            <span className="font-medium">默认助手</span>
+          </>
+        )}
+      </div>
+
+      {/* 分隔符 */}
+      <span className="text-[var(--color-text-quaternary)]">·</span>
+
+      {/* 模型选择器 */}
+      <div className="relative" ref={menuRef}>
+        <button
+          onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
+          disabled={isChanging}
+          className={cn(
+            'flex items-center gap-1 px-2 py-1 rounded-md transition-colors',
+            'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]',
+            isChanging && 'opacity-50 cursor-not-allowed'
+          )}
+        >
+          <span className="max-w-[280px] truncate">{currentModel}</span>
+          <ChevronDown
+            size={14}
+            className={cn(
+              'flex-shrink-0 transition-transform',
+              isModelMenuOpen && 'rotate-180'
+            )}
+          />
+        </button>
+
+        {/* 模型下拉菜单 */}
+        {isModelMenuOpen && (
+          <div className="absolute left-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg py-1 z-30 min-w-[280px] max-h-[400px] overflow-y-auto">
+            <div className="px-3 py-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider border-b border-[var(--color-border)]">
+              选择模型
+            </div>
+            {models.map((model) => (
+              <button
+                key={model.id}
+                onClick={() => handleModelSelect(model.id)}
+                disabled={isChanging}
+                className={cn(
+                  'w-full px-3 py-2.5 text-left text-sm flex items-center justify-between gap-2 transition-colors',
+                  model.id === currentModel
+                    ? 'bg-[var(--color-primary-light)] text-[var(--color-primary)]'
+                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]',
+                  isChanging && 'opacity-50'
+                )}
+              >
+                <div className="flex flex-col gap-0.5 min-w-0">
+                  <span className="font-medium truncate">{model.displayName}</span>
+                  <span className="text-xs text-[var(--color-text-tertiary)] truncate">
+                    {model.id}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  {model.tag && (
+                    <span className="px-1.5 py-0.5 text-xs bg-[var(--color-primary-light)] text-[var(--color-primary)] rounded">
+                      {model.tag}
+                    </span>
+                  )}
+                  {model.id === currentModel && (
+                    <Check size={16} className="text-[var(--color-primary)]" />
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 成功提示 */}
+      {showSuccess && (
+        <div className="flex items-center gap-1 text-green-600 text-xs animate-fade-in">
+          <Check size={14} />
+          <span>已切换</span>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/features/NewChatModal.tsx

@@ -0,0 +1,462 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { X, Search, Bot, Star, Clock, ChevronRight, Loader2, Library } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAuth } from '@/providers/AuthProvider';
+import { IconRenderer } from '@/components/ui/IconRenderer';
+import { useConversations } from '@/hooks/useConversations';
+import { useSettings } from '@/hooks/useSettings';
+
+interface Assistant {
+  id: number;
+  name: string;
+  description: string | null;
+  icon: string | null;
+  systemPrompt: string;
+  categoryName?: string | null;
+  tags?: string[] | null;
+}
+
+interface NewChatModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function NewChatModal({ isOpen, onClose }: NewChatModalProps) {
+  const router = useRouter();
+  const { user } = useAuth();
+  const { createConversation } = useConversations();
+  const { settings } = useSettings();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Assistant[]>([]);
+  const [favoriteAssistants, setFavoriteAssistants] = useState<Assistant[]>([]);
+  const [recentAssistants, setRecentAssistants] = useState<Assistant[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const modalRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 加载收藏和最近使用的助手
+  const loadAssistants = useCallback(async () => {
+    if (!user) return;
+
+    setIsLoading(true);
+    try {
+      // 并行加载收藏和最近使用的助手
+      const [favoritesRes, recentRes] = await Promise.all([
+        fetch(`/api/assistants?favorites=true&userId=${user.id}&limit=6`),
+        fetch('/api/assistants/recent?limit=3'),
+      ]);
+
+      if (favoritesRes.ok) {
+        const favData = await favoritesRes.json();
+        setFavoriteAssistants(favData.data || []);
+      }
+
+      if (recentRes.ok) {
+        const recentData = await recentRes.json();
+        setRecentAssistants(recentData.data || []);
+      }
+    } catch (error) {
+      console.error('Failed to load assistants:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  // 搜索助手
+  const searchAssistants = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      const res = await fetch(`/api/assistants?search=${encodeURIComponent(query)}&limit=10`);
+      if (res.ok) {
+        const data = await res.json();
+        setSearchResults(data.data || []);
+      }
+    } catch (error) {
+      console.error('Failed to search assistants:', error);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  // 处理搜索输入（防抖）
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    searchTimeoutRef.current = setTimeout(() => {
+      searchAssistants(value);
+    }, 300);
+  };
+
+  // 创建新对话
+  const handleCreateChat = async (assistant?: Assistant) => {
+    if (isCreating) return;
+
+    setIsCreating(true);
+    try {
+      const newConversation = await createConversation({
+        model: settings?.defaultModel || 'claude-sonnet-4-20250514',
+        tools: settings?.defaultTools || [],
+        enableThinking: settings?.enableThinking || false,
+        assistantId: assistant?.id,
+        systemPrompt: assistant?.systemPrompt,
+      });
+
+      onClose();
+      router.push(`/chat/${newConversation.conversationId}`);
+    } catch (error) {
+      console.error('Failed to create conversation:', error);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  // 跳转到助手库
+  const handleGoToAssistants = () => {
+    onClose();
+    router.push('/assistants');
+  };
+
+  // 打开时加载数据和聚焦搜索框
+  useEffect(() => {
+    if (isOpen) {
+      loadAssistants();
+      setSearchQuery('');
+      setSearchResults([]);
+      // 延迟聚焦，等待动画完成
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+  }, [isOpen, loadAssistants]);
+
+  // ESC 键关闭
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  // 点击遮罩关闭
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  if (!isOpen) return null;
+
+  const showSearchResults = searchQuery.trim().length > 0;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 animate-fade-in"
+      onClick={handleBackdropClick}
+    >
+      <div
+        ref={modalRef}
+        className="w-full max-w-2xl bg-[var(--color-bg-primary)] rounded-xl shadow-2xl overflow-hidden animate-scale-in"
+      >
+        {/* 标题栏 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border)]">
+          <h2 className="text-lg font-semibold text-[var(--color-text-primary)]">
+            开始新对话
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* 搜索框 */}
+        <div className="px-6 py-4">
+          <div className="relative">
+            <Search
+              size={18}
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)]"
+            />
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              placeholder="搜索助手..."
+              className="w-full pl-10 pr-4 py-2.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[var(--color-text-primary)] placeholder:text-[var(--color-text-quaternary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
+            />
+            {isSearching && (
+              <Loader2
+                size={18}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] animate-spin"
+              />
+            )}
+          </div>
+        </div>
+
+        {/* 内容区域 */}
+        <div className="px-6 pb-6 max-h-[60vh] overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 size={24} className="animate-spin text-[var(--color-primary)]" />
+            </div>
+          ) : showSearchResults ? (
+            /* 搜索结果 - 使用网格布局 */
+            <div className="space-y-3">
+              <h3 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider">
+                搜索结果
+              </h3>
+              {searchResults.length === 0 ? (
+                <p className="text-sm text-[var(--color-text-tertiary)] text-center py-8">
+                  未找到匹配的助手
+                </p>
+              ) : (
+                <div className="grid grid-cols-3 gap-3">
+                  {searchResults.map((assistant, index) => (
+                    <AssistantGridCard
+                      key={assistant.id}
+                      assistant={assistant}
+                      onClick={() => handleCreateChat(assistant)}
+                      disabled={isCreating}
+                      index={index}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : (
+            /* 默认视图：快速开始 + 收藏 + 最近使用 */
+            <div className="space-y-6">
+              {/* 快速开始 */}
+              <div>
+                <h3 className="flex items-center gap-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">
+                  <span className="text-yellow-500">⚡</span>
+                  快速开始
+                </h3>
+                <button
+                  onClick={() => handleCreateChat()}
+                  disabled={isCreating}
+                  className={cn(
+                    'w-full flex items-center gap-4 p-4 rounded border border-[var(--color-border)] transition-all duration-200 text-left group',
+                    'hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-primary)] hover:shadow-md',
+                    isCreating && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <div className="w-12 h-12 rounded bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] flex items-center justify-center shadow-sm">
+                    <Bot size={24} className="text-white" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-[var(--color-text-primary)]">默认助手</div>
+                    <div className="text-sm text-[var(--color-text-tertiary)]">
+                      使用通用 AI 助手开始对话
+                    </div>
+                  </div>
+                  {isCreating ? (
+                    <Loader2 size={18} className="animate-spin text-[var(--color-text-tertiary)]" />
+                  ) : (
+                    <ChevronRight size={18} className="text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)] transition-colors" />
+                  )}
+                </button>
+              </div>
+
+              {/* 收藏助手 - 网格布局 */}
+              {favoriteAssistants.length > 0 && (
+                <div>
+                  <h3 className="flex items-center gap-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">
+                    <Star size={14} className="text-yellow-500 fill-yellow-500" />
+                    收藏助手
+                  </h3>
+                  <div className="grid grid-cols-3 gap-3">
+                    {favoriteAssistants.map((assistant, index) => (
+                      <AssistantGridCard
+                        key={assistant.id}
+                        assistant={assistant}
+                        onClick={() => handleCreateChat(assistant)}
+                        disabled={isCreating}
+                        index={index}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* 最近使用 - 芯片式布局 */}
+              {recentAssistants.length > 0 && (
+                <div>
+                  <h3 className="flex items-center gap-2 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">
+                    <Clock size={14} className="text-blue-500" />
+                    最近使用
+                  </h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {recentAssistants.map((assistant, index) => (
+                      <AssistantChip
+                        key={assistant.id}
+                        assistant={assistant}
+                        onClick={() => handleCreateChat(assistant)}
+                        disabled={isCreating}
+                        index={index}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* 底部：浏览全部助手 */}
+        <div className="px-6 py-4 border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+          <button
+            onClick={handleGoToAssistants}
+            className="w-full flex items-center justify-center gap-2 py-2.5 text-sm font-medium text-[var(--color-primary)] hover:bg-[var(--color-bg-hover)] rounded-lg transition-colors"
+          >
+            <Library size={18} />
+            浏览全部助手
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 网格卡片组件 - 用于收藏助手和搜索结果
+function AssistantGridCard({
+  assistant,
+  onClick,
+  disabled,
+  index = 0,
+}: {
+  assistant: Assistant;
+  onClick: () => void;
+  disabled?: boolean;
+  index?: number;
+}) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        style={{ animationDelay: `${index * 50}ms` }}
+        className={cn(
+          'w-full flex flex-col items-center gap-2 p-4 rounded border border-[var(--color-border)] transition-all duration-200 text-center',
+          'hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-primary)] hover:shadow-md hover:-translate-y-0.5',
+          'animate-fade-in-up',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+      >
+        <div className="w-10 h-10 rounded bg-[var(--color-bg-tertiary)] flex items-center justify-center text-[var(--color-text-secondary)]">
+          <IconRenderer icon={assistant.icon} size={20} />
+        </div>
+        <div className="w-full">
+          <div className="font-medium text-sm text-[var(--color-text-primary)] truncate">
+            {assistant.name}
+          </div>
+          {assistant.tags && assistant.tags.length > 0 && (
+            <div className="text-xs text-[var(--color-text-tertiary)] truncate mt-0.5">
+              {assistant.tags.slice(0, 2).map((tag, i) => (
+                <span key={tag}>
+                  {i > 0 && ' · '}
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </button>
+
+      {/* Tooltip */}
+      {showTooltip && assistant.description && (
+        <div className="absolute z-10 left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-2 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg max-w-[200px] animate-fade-in pointer-events-none">
+          <p className="text-xs text-[var(--color-text-secondary)] leading-relaxed">
+            {assistant.description}
+          </p>
+          <div className="absolute left-1/2 -translate-x-1/2 top-full w-2 h-2 bg-[var(--color-bg-primary)] border-r border-b border-[var(--color-border)] transform rotate-45 -mt-1" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 芯片组件 - 用于最近使用
+function AssistantChip({
+  assistant,
+  onClick,
+  disabled,
+  index = 0,
+}: {
+  assistant: Assistant;
+  onClick: () => void;
+  disabled?: boolean;
+  index?: number;
+}) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        style={{ animationDelay: `${index * 50}ms` }}
+        className={cn(
+          'w-full flex items-center gap-2 px-3 py-2.5 rounded border border-[var(--color-border)] transition-all duration-200 text-left',
+          'hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-primary)]',
+          'animate-fade-in-up',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+      >
+        <span className="flex-shrink-0 text-[var(--color-text-secondary)]">
+          <IconRenderer icon={assistant.icon} size={18} />
+        </span>
+        <span className="text-sm font-medium text-[var(--color-text-primary)] truncate">
+          {assistant.name}
+        </span>
+      </button>
+
+      {/* Tooltip */}
+      {showTooltip && assistant.description && (
+        <div className="absolute z-10 left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-2 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg max-w-[200px] animate-fade-in pointer-events-none">
+          <p className="text-xs text-[var(--color-text-secondary)] leading-relaxed">
+            {assistant.description}
+          </p>
+          <div className="absolute left-1/2 -translate-x-1/2 top-full w-2 h-2 bg-[var(--color-bg-primary)] border-r border-b border-[var(--color-border)] transform rotate-45 -mt-1" />
+        </div>
+      )}
+    </div>
+  );
+}