zclaw_openfang/desktop/src/components/Sidebar.tsx

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  SquarePen, MessageSquare, Bot, Search, X, Settings
} from 'lucide-react';
import { ConversationList } from './ConversationList';
import { CloneManager } from './CloneManager';
import { useChatStore } from '../store/chatStore';
import { containerVariants, defaultTransition } from '../lib/animations';

export type MainViewType = 'chat' | 'automation' | 'skills';

interface SidebarProps {
  onOpenSettings?: () => void;
  onMainViewChange?: (view: MainViewType) => void;
  onNewChat?: () => void;
}

type Tab = 'conversations' | 'clones';

export function Sidebar({
  onOpenSettings,
  onMainViewChange,
}: Omit<SidebarProps, 'onNewChat'>) {
  const [activeTab, setActiveTab] = useState<Tab>('conversations');
  const [searchQuery, setSearchQuery] = useState('');
  const newConversation = useChatStore((s) => s.newConversation);

  const handleNewConversation = () => {
    newConversation();
    onMainViewChange?.('chat');
  };

  const handleNavClick = (tab: Tab) => {
    setActiveTab(tab);
    if (tab === 'clones') {
      onMainViewChange?.('chat');
    } else {
      onMainViewChange?.('chat');
    }
  };

  return (
    <aside className="w-64 sidebar-bg border-r border-[#e8e6e1] dark:border-gray-800 flex flex-col h-full shrink-0">
      {/* Logo area */}
      <div className="h-14 flex items-center px-4 border-b border-[#e8e6e1]/50 dark:border-gray-800">
        <span className="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">ZCLAW</span>
        <button
          onClick={handleNewConversation}
          className="ml-auto p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-md transition-colors text-gray-600 dark:text-gray-400"
          title="新对话"
        >
          <SquarePen className="w-4 h-4" />
        </button>
      </div>

      {/* Main Nav — DeerFlow-style: new chat / conversations / agents */}
      <div className="p-2 space-y-1">
        <button
          onClick={handleNewConversation}
          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg bg-black/5 dark:bg-white/5 text-sm font-medium text-gray-900 dark:text-gray-100"
        >
          <SquarePen className="w-4 h-4" />
          新对话
        </button>
        <button
          onClick={() => handleNavClick('conversations')}
          className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
            activeTab === 'conversations'
              ? 'bg-black/5 dark:bg-white/5 font-medium text-gray-900 dark:text-gray-100'
              : 'text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5'
          }`}
        >
          <MessageSquare className="w-4 h-4" />
          对话
        </button>
        <button
          onClick={() => handleNavClick('clones')}
          className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
            activeTab === 'clones'
              ? 'bg-black/5 dark:bg-white/5 font-medium text-gray-900 dark:text-gray-100'
              : 'text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5'
          }`}
        >
          <Bot className="w-4 h-4" />
          智能体
        </button>
      </div>

      {/* Divider */}
      <div className="mx-3 border-t border-[#e8e6e1]/50 dark:border-gray-800" />

      {/* Content area */}
      <div className="flex-1 overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab}
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
            transition={defaultTransition}
            className="h-full overflow-y-auto"
          >
            {activeTab === 'conversations' && (
              <div className="p-2">
                {/* Search in conversations */}
                <div className="relative mb-2">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <input
                    type="text"
                    placeholder="搜索对话..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-9 pr-8 py-1.5 bg-white/60 dark:bg-gray-800 border border-[#e8e6e1] dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:border-gray-400 transition-all text-gray-700 dark:text-gray-300 placeholder-gray-400"
                  />
                  {searchQuery && (
                    <button
                      onClick={() => setSearchQuery('')}
                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-400"
                    >
                      <X className="w-3 h-3" />
                    </button>
                  )}
                </div>
                <ConversationList />
              </div>
            )}
            {activeTab === 'clones' && <CloneManager />}
          </motion.div>
        </AnimatePresence>
      </div>

      {/* Bottom user bar */}
      <div className="p-2 border-t border-[#e8e6e1] dark:border-gray-700">
        <button
          onClick={onOpenSettings}
          aria-label="打开设置"
          title="设置和更多"
          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
        >
          <Settings className="w-4 h-4" />
          <span>设置和更多</span>
        </button>
      </div>
    </aside>
  );
}