40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight } from "lucide-react";
|
|
import type { PersonaState } from "@/shared/ai-elements/persona";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
|
|
} from "@/features/map/core/components/map-control-styles";
|
|
import { AgentPersona } from "./agent-persona";
|
|
|
|
type AgentCollapsedRailProps = {
|
|
personaState?: PersonaState;
|
|
statusLabel?: string;
|
|
onExpand: () => void;
|
|
};
|
|
|
|
export function AgentCollapsedRail({ personaState, statusLabel = "Agent", onExpand }: AgentCollapsedRailProps) {
|
|
return (
|
|
<aside className={cn("agent-rail-enter glass-control pointer-events-auto w-[136px] p-1.5 shadow-[0_6px_18px_rgba(15,23,42,0.12)]", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}>
|
|
<button
|
|
type="button"
|
|
aria-label="展开排水助手面板"
|
|
title="展开排水助手面板"
|
|
onClick={onExpand}
|
|
className="agent-rail-item group flex h-14 w-full items-center justify-center gap-4 rounded-xl bg-white px-3 transition hover:bg-slate-50"
|
|
>
|
|
<AgentPersona
|
|
className="h-12 w-12"
|
|
fallbackClassName="h-12 w-12"
|
|
state={personaState}
|
|
statusLabel={statusLabel}
|
|
/>
|
|
<span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg !border-0 transition group-hover:translate-x-0.5">
|
|
<ChevronRight size={17} strokeWidth={2.25} aria-hidden="true" />
|
|
</span>
|
|
</button>
|
|
</aside>
|
|
);
|
|
}
|