86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import { AgentCollapsedRail, AgentCommandPanel, AgentPersona } from "@/features/agent";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import { useEffect, type ComponentProps } from "react";
|
|
import {
|
|
getAgentPanelMaxWidth,
|
|
getWorkbenchViewportLayout
|
|
} from "../layout/workbench-layout";
|
|
import { useAgentPanelResize } from "../hooks/use-agent-panel-resize";
|
|
|
|
type AgentPanelProps = Omit<ComponentProps<typeof AgentCommandPanel>, "collapsing" | "onCollapse">;
|
|
|
|
type WorkbenchAgentPanelsProps = {
|
|
panelProps: AgentPanelProps;
|
|
panelOpen: boolean;
|
|
panelCollapsing: boolean;
|
|
personaState: ComponentProps<typeof AgentPersona>["state"];
|
|
statusLabel: string;
|
|
viewportWidth: number;
|
|
onCollapsePanel: () => void;
|
|
onExpandPanel: () => void;
|
|
onWidthCommit?: (width: number) => void;
|
|
};
|
|
|
|
export function WorkbenchAgentPanels({
|
|
panelProps,
|
|
panelOpen,
|
|
panelCollapsing,
|
|
personaState,
|
|
statusLabel,
|
|
viewportWidth,
|
|
onCollapsePanel,
|
|
onExpandPanel,
|
|
onWidthCommit
|
|
}: WorkbenchAgentPanelsProps) {
|
|
const resize = useAgentPanelResize(viewportWidth);
|
|
const defaultWidth = getWorkbenchViewportLayout(viewportWidth).agentWidth;
|
|
const committedWidth = resize.committedWidth ?? defaultWidth;
|
|
|
|
useEffect(() => {
|
|
onWidthCommit?.(committedWidth);
|
|
}, [committedWidth, onWidthCommit]);
|
|
|
|
return (
|
|
<div
|
|
ref={resize.panelRef}
|
|
className="pointer-events-none absolute bottom-4 left-3 top-24 z-20 hidden w-[var(--workbench-agent-width)] max-w-[620px] 2xl:w-[var(--workbench-agent-width-wide)] lg:block"
|
|
style={resize.width === null ? undefined : { width: resize.width }}
|
|
>
|
|
{panelOpen ? (
|
|
<>
|
|
<AgentCommandPanel
|
|
{...panelProps}
|
|
presentation="desktop-floating"
|
|
collapsing={panelCollapsing}
|
|
onCollapse={onCollapsePanel}
|
|
/>
|
|
<div
|
|
aria-label="调整 Agent 面板宽度"
|
|
aria-orientation="vertical"
|
|
aria-valuemax={getAgentPanelMaxWidth(viewportWidth)}
|
|
aria-valuemin={defaultWidth}
|
|
aria-valuenow={Math.round(resize.width ?? defaultWidth)}
|
|
className={cn(
|
|
"group pointer-events-auto absolute -right-3 top-4 bottom-4 z-10 flex w-6 cursor-ew-resize touch-none items-center justify-center outline-hidden",
|
|
resize.resizing && "[&>span]:bg-blue-500 [&>span]:opacity-100"
|
|
)}
|
|
role="separator"
|
|
tabIndex={0}
|
|
title="拖拽调整 Agent 面板宽度"
|
|
onKeyDown={resize.handleKeyDown}
|
|
onPointerDown={resize.handlePointerDown}
|
|
>
|
|
<span className="h-14 w-1 rounded-full bg-slate-500/60 opacity-50 shadow-xs transition-[height,background-color,opacity] group-hover:h-20 group-hover:bg-blue-500 group-hover:opacity-100 group-focus-visible:h-20 group-focus-visible:bg-blue-500 group-focus-visible:opacity-100" />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<AgentCollapsedRail
|
|
personaState={personaState}
|
|
statusLabel={statusLabel}
|
|
onExpand={onExpandPanel}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|