deerflow-code/frontend-web/src/components/workspace/workspace-sidebar.tsx

"use client";

import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarRail,
  useSidebar,
} from "@/components/ui/sidebar";
import { useTheme } from "@/contexts/ThemeContext";
import { cn } from "@/lib/utils";
import { usePathname } from "next/navigation";

import { GeneralQaSidebar } from "./general-qa-sidebar";
import { RecentChatList } from "./recent-chat-list";
import { WorkspaceHeader } from "./workspace-header";
import { WorkspaceNavChatList } from "./workspace-nav-chat-list";
import { WorkspaceNavMenu } from "./workspace-nav-menu";

export function WorkspaceSidebar({
  compactChrome = false,
  forceCollapsed = false,
  className,
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  compactChrome?: boolean;
  forceCollapsed?: boolean;
}) {
  const { open: isSidebarOpen } = useSidebar();
  const { theme } = useTheme();
  const pathname = usePathname();
  const useWhiteSidebar = compactChrome && theme === "light";
  // 通用问答（全量模式）左栏：新建回答 → 常用智能体 → 聊天记录（需求 0616 #1）。
  // 仅在通用问答（/page/workspace/chats*）下启用三块式布局；点击常用智能体后是
  // 「原地嵌入」（停留在 /chats/new?agent=...，仅右侧问答区换成智能体对话），左侧栏不变。
  const isGeneralQa = pathname.startsWith("/page/workspace/chats");

  if (forceCollapsed) {
    return (
      <Sidebar
        variant="sidebar"
        collapsible="icon"
        className={cn(
          "bg-sidebar [&_[data-slot=sidebar-inner]]:bg-sidebar",
          className,
        )}
        {...props}
      >
        <SidebarContent>
          <WorkspaceNavChatList />
        </SidebarContent>
      </Sidebar>
    );
  }

  // 紧凑模式：用「外层定宽容器 + transition-[width]」做展开/收起过渡动画。
  // collapsible="none" 的 Sidebar 是普通 in-flow 定宽块（非 absolute，故不受本布局对
  // sidebar-container 的 absolute/left-0 覆盖影响），外层 overflow-hidden 把它从
  // --sidebar-width 裁到 0、聊天区随宽度平滑回流；收起后整列不接收指针。
  if (compactChrome) {
    return (
      <div
        aria-hidden={!isSidebarOpen}
        className={cn(
          "h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
          isSidebarOpen ? "w-(--sidebar-width)" : "w-0 pointer-events-none",
        )}
      >
        <Sidebar
          variant="sidebar"
          collapsible="none"
          className={cn(
            "h-full w-(--sidebar-width) border-r border-border",
            useWhiteSidebar &&
              "[&_[data-slot=sidebar-inner]]:bg-white [&_[data-slot=sidebar-container]]:bg-white",
            className,
          )}
          {...props}
        >
          <SidebarContent>
            {isGeneralQa ? (
              // 全量版通用问答（/page/workspace/chats*）：新建对话侧栏独立成
              // GeneralQaSidebar（按 0616 样式参考图重画），与其余 workspace 页解耦。
              <GeneralQaSidebar />
            ) : (
              <>
                <WorkspaceNavChatList showCollapseTrigger compact />
                <RecentChatList compact />
              </>
            )}
          </SidebarContent>
          <SidebarRail />
        </Sidebar>
      </div>
    );
  }

  return (
    <>
      <Sidebar
        variant="sidebar"
        // 紧凑模式：展开时为固定宽度整列（none，无内置折叠），收起由上面的条件渲染处理；
        // 非紧凑沿用 icon。
        collapsible={compactChrome ? "none" : "icon"}
        className={cn(
          useWhiteSidebar &&
            "[&_[data-slot=sidebar-inner]]:bg-white [&_[data-slot=sidebar-container]]:bg-white",
          className,
        )}
        {...props}
      >
        {!compactChrome && (
          <SidebarHeader className="py-0">
            <WorkspaceHeader />
          </SidebarHeader>
        )}
        <SidebarContent>
          <WorkspaceNavChatList
            showCollapseTrigger={compactChrome}
            compact={compactChrome}
          />
          {isSidebarOpen && <RecentChatList compact={compactChrome} />}
          {/* 「多智能体会商」「最近写作」历史入口已移至「对话历史」页
              （/page/workspace/chats 的 Tabs，2026-08 需求）：简洁模式（本分支，
              无全局导航栏/页面侧栏时的工作区侧栏）不再在左下角展示这两个分组，
              全量模式本就不展示。 */}
        </SidebarContent>
        {!compactChrome && (
          <SidebarFooter>
            <WorkspaceNavMenu />
          </SidebarFooter>
        )}
        <SidebarRail />
      </Sidebar>
    </>
  );
}