43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { motion, useReducedMotion } from "motion/react";
|
|
import type { PersonaState } from "@/shared/ai-elements/persona";
|
|
import { Button } from "@/shared/ui/button";
|
|
import { AgentPersona } from "./agent-persona";
|
|
import { agentLayoutTransition } from "./agent-motion";
|
|
|
|
type AgentCollapsedRailProps = {
|
|
personaState?: PersonaState;
|
|
statusLabel?: string;
|
|
onExpand: () => void;
|
|
};
|
|
|
|
export function AgentCollapsedRail({
|
|
personaState,
|
|
statusLabel = "Agent 已就绪",
|
|
onExpand
|
|
}: AgentCollapsedRailProps) {
|
|
const expandLabel = `展开 Agent 助手面板，当前状态：${statusLabel}`;
|
|
const prefersReducedMotion = useReducedMotion();
|
|
|
|
return (
|
|
<motion.aside
|
|
aria-label="Agent 折叠栏"
|
|
initial={prefersReducedMotion ? false : { opacity: 0, x: -5, scale: 0.94 }}
|
|
animate={{ opacity: 1, x: 0, scale: 1 }}
|
|
transition={prefersReducedMotion ? { duration: 0 } : agentLayoutTransition}
|
|
style={{ transformOrigin: "left top" }}
|
|
className="agent-collapsed-rail pointer-events-auto size-[var(--workbench-agent-rail-width,64px)] rounded-full"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
aria-label={expandLabel}
|
|
title={expandLabel}
|
|
onClick={onExpand}
|
|
className="flex h-full w-full items-center justify-center rounded-full border-0 bg-transparent p-0"
|
|
>
|
|
<AgentPersona className="h-full w-full" state={personaState} />
|
|
</Button>
|
|
</motion.aside>
|
|
);
|
|
}
|