OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(workbench): refine agent dock and smooth map resizing

Browse Source 
Unify dock surfaces, headers and dividers, and remove the visible context strip.
Limit pointer resizing to 400-640px and reveal the edge grip on hover.
Resize and redraw the map in the same layout cycle to prevent blanking and lag.
Preserve horizontal centering during conversation control press feedback.

Validation: isolated lint, typecheck, 21 focused unit tests, and 10 relevant
browser checks passed. Snapshot baselines regenerated from the isolated change.
The existing mobile alert summary test also fails on unchanged HEAD because
the expected demo alert source is unavailable in this environment.
This commit is contained in:
jiang
2026-10-08 17:34:42 +08:00
parent 7c6d06cb43
commit d2d705ed4c
19 changed files with 680 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/agent/components/agent-command-panel.tsx
+36 -42
View File
@@ -1,7 +1,6 @@
import {
Activity,
CheckCircle2,
Clock3,
ChevronsUpDown,
ChevronLeft,
DatabaseZap,
@@ -175,7 +174,6 @@ export function AgentCommandPanel({
approvalMode = "request",
uiResults = [],
reviewPanel,
workspaceContext = [],
prompt,
onCollapse,
onPromptChange,
@@ -342,11 +340,12 @@ export function AgentCommandPanel({
<MotionConfig reducedMotion="user">
<aside
aria-label="Agent 命令面板"
data-agent-presentation={presentation}
className={cn(
"pointer-events-auto flex h-full min-h-0 w-full flex-col",
"agent-panel-shell",
presentation === "desktop-dock"
? "surface-dock overflow-hidden rounded-r-2xl border-y border-r shadow-[0_12px_32px_rgba(15,23,42,0.12)]"
? "surface-dock overflow-hidden rounded-none border-0 border-r"
: desktopFloating
? "acrylic-panel overflow-visible rounded-2xl border"
: "overflow-hidden rounded-none border-0 bg-transparent",
@@ -359,7 +358,7 @@ export function AgentCommandPanel({
floatingPresentation && "gap-1 overflow-visible p-1"
)}
>
<div className="relative z-30 h-16 shrink-0">
<div className={cn("relative z-30 shrink-0", presentation === "desktop-dock" ? "h-14" : "h-16")}>
<header
className={cn(
"agent-panel-header agent-panel-header-expandable inset-x-0 top-0 overflow-hidden",
@@ -368,9 +367,9 @@ export function AgentCommandPanel({
historyOpen && "agent-panel-header-expanded"
)}
>
<div className="flex min-h-16 items-center justify-between gap-2 px-3 py-2">
<div className={cn("flex items-center justify-between gap-2 px-3", presentation === "desktop-dock" ? "min-h-14 py-1.5" : "min-h-16 py-2")}>
<div className="flex min-w-0 flex-1 items-center gap-2.5 text-slate-900">
<AgentPersona className="h-12 w-12" state={personaState} />
<AgentPersona className={presentation === "desktop-dock" ? "h-10 w-10" : "h-12 w-12"} state={personaState} />
<div className="min-w-0 flex-1">
<div className="min-w-0">
<div className="flex min-w-0 items-center gap-2">
@@ -454,7 +453,8 @@ export function AgentCommandPanel({
id={historyPanelId}
role="region"
aria-label="Agent 历史记录"
className="agent-panel-floating-acrylic agent-panel-history-extension"
data-agent-presentation={presentation}
className="agent-panel-overlay agent-panel-floating-acrylic agent-panel-history-extension"
initial="initial"
animate="animate"
exit="exit"
@@ -468,29 +468,6 @@ export function AgentCommandPanel({
</header>
</div>
{workspaceContext.length > 0 ? (
<div className="mx-3 mb-2 flex shrink-0 items-center gap-2 overflow-x-auto rounded-lg bg-slate-900/[0.045] px-2.5 py-2 text-[10px] text-slate-500">
<Clock3 size={13} className="shrink-0 text-blue-600" aria-hidden="true" />
<span className="shrink-0 font-semibold uppercase tracking-[0.12em] text-slate-500">
当前上下文
</span>
{workspaceContext.map((item) => (
<span
key={item.id}
className={cn(
"shrink-0 rounded-md px-2 py-1",
item.tone === "info" && "bg-blue-50 text-blue-700",
item.tone === "warning" && "bg-amber-50 text-amber-700",
(!item.tone || item.tone === "neutral") && "bg-white/70 text-slate-600"
)}
title={`${item.label}：${item.value}`}
>
{item.label} · <strong className="font-semibold">{item.value}</strong>
</span>
))}
</div>
) : null}
{floatingPresentation ? (
<AnimatePresence initial={false}>
{hasConversation && !historyOpen ? (
@@ -552,6 +529,7 @@ export function AgentCommandPanel({
{messages.length > 0 ? (
<BackendMessageList
key="messages"
presentation={presentation}
messages={messages}
streaming={streaming}
streamRenderState={streamRenderState}
@@ -596,8 +574,9 @@ export function AgentCommandPanel({
streaming={streaming}
/>
<ConversationScrollButton
data-agent-presentation={presentation}
className={cn(
"agent-panel-floating-acrylic agent-conversation-scroll-button",
"agent-panel-overlay agent-panel-floating-acrylic agent-conversation-scroll-button",
floatingPresentation ? "bottom-[10.25rem] z-30" : "bottom-3"
)}
/>
@@ -659,10 +638,11 @@ export function AgentCommandPanel({
</PromptInputBody>
<PromptInputFooter className="justify-between gap-2">
<div className="flex min-w-0 items-center gap-2">
{!qaOnly ? <ApprovalModeSelect value={approvalMode} disabled={streaming} onValueChange={onApprovalModeChange} /> : <span className="px-1 text-[11px] text-slate-500">任务协作问答</span>}
{!qaOnly ? <ApprovalModeSelect presentation={presentation} value={approvalMode} disabled={streaming} onValueChange={onApprovalModeChange} /> : <span className="px-1 text-[11px] text-slate-500">任务协作问答</span>}
</div>
<div className="flex shrink-0 items-center gap-2">
<AgentModelSelect
presentation={presentation}
models={modelOptions}
value={selectedModel}
onValueChange={onSelectModel}
@@ -823,10 +803,12 @@ function VoiceInputButton({
}
function ApprovalModeSelect({
presentation,
value,
disabled,
onValueChange
}: {
presentation: AgentCommandPanelPresentation;
value: AgentApprovalMode;
disabled: boolean;
onValueChange?: (mode: AgentApprovalMode) => void;
@@ -854,10 +836,11 @@ function ApprovalModeSelect({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
data-agent-presentation={presentation}
side="top"
align="start"
sideOffset={8}
className="agent-panel-control w-[220px] rounded-xl p-2 shadow-lg"
className="agent-panel-overlay agent-panel-control w-[220px] rounded-xl p-2 shadow-lg"
>
<DropdownMenuLabel className="px-2 pb-2 pt-1 text-xs text-slate-500">
权限批准模式
@@ -996,10 +979,12 @@ function getLastUserMessageId(messages: AgentChatMessage[]) {
}
function AgentModelSelect({
presentation,
models,
value,
onValueChange
}: {
presentation: AgentCommandPanelPresentation;
models: AgentModelOption[];
value: string;
onValueChange?: (model: string) => void;
@@ -1033,10 +1018,11 @@ function AgentModelSelect({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
data-agent-presentation={presentation}
side="top"
align="end"
sideOffset={8}
className="agent-panel-control w-[230px] rounded-xl p-2 shadow-lg"
className="agent-panel-overlay agent-panel-control w-[230px] rounded-xl p-2 shadow-lg"
>
<DropdownMenuLabel className="px-2 pb-2 pt-1 text-xs text-slate-500">
模型选择
@@ -1049,7 +1035,9 @@ function AgentModelSelect({
key={model.id}
className={cn(
"rounded-lg border border-transparent px-2.5 py-2 focus:bg-slate-50",
selected && "border-violet-200 bg-violet-50 focus:bg-violet-50"
selected && (presentation === "desktop-dock"
? "border-blue-200 bg-blue-50 focus:bg-blue-50"
: "border-violet-200 bg-violet-50 focus:bg-violet-50")
)}
onSelect={() => onValueChange?.(model.id)}
>
@@ -1065,7 +1053,7 @@ function AgentModelSelect({
</span>
</span>
{selected ? (
<CheckCircle2 size={15} className="text-violet-600" aria-hidden="true" />
<CheckCircle2 size={15} className={presentation === "desktop-dock" ? "text-blue-600" : "text-violet-600"} aria-hidden="true" />
) : null}
</DropdownMenuItem>
);
@@ -1177,12 +1165,12 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
return (
<section
aria-labelledby="agent-empty-state-title"
className="mx-auto w-full max-w-[360px]"
className="agent-empty-state mx-auto w-full max-w-[360px]"
lang="zh-CN"
>
<div className="px-2 py-4">
<div className="flex items-center gap-4">
<div className="surface-control grid h-[72px] w-[72px] shrink-0 place-items-center rounded-xl shadow-[inset_0_0_0_1px_oklch(0.84_0.025_260)]">
<div className="agent-empty-mark surface-control grid h-[72px] w-[72px] shrink-0 place-items-center rounded-xl shadow-[inset_0_0_0_1px_oklch(0.84_0.025_260)]">
<AgentReadyMark />
</div>
<div className="min-w-0 flex-1 text-left">
@@ -1202,7 +1190,7 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
<ul
className={cn(
"surface-control grid grid-cols-2 overflow-hidden rounded-xl shadow-[inset_0_0_0_1px_rgba(148,163,184,0.32)]",
"agent-capabilities surface-control grid grid-cols-2 overflow-hidden rounded-xl shadow-[inset_0_0_0_1px_rgba(148,163,184,0.32)]",
compact && "hidden"
)}
aria-label="Agent 分析能力"
@@ -1211,12 +1199,12 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
<li
key={label}
className={cn(
"flex min-h-20 items-center gap-3 px-3.5 py-3 text-left",
"agent-capability flex min-h-20 items-center gap-3 px-3.5 py-3 text-left",
index % 2 === 0 && "border-r border-slate-300/80",
index < 2 && "border-b border-slate-300/80"
)}
>
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-[#f9fbfe] text-[#334155] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.28)]">
<span className="agent-capability-icon grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-[#f9fbfe] text-[#334155] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.28)]">
<Icon size={16} strokeWidth={1.8} aria-hidden="true" />
</span>
<span className="text-sm font-semibold leading-5 text-[#1e293b]">{label}</span>
@@ -1228,6 +1216,7 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
}
function BackendMessageList({
presentation,
messages,
streaming,
streamRenderState,
@@ -1243,6 +1232,7 @@ function BackendMessageList({
onStopSpeech,
qaOnly
}: {
presentation: AgentCommandPanelPresentation;
messages: AgentChatMessage[];
streaming: boolean;
streamRenderState: AgentStreamRenderState;
@@ -1299,6 +1289,7 @@ function BackendMessageList({
{message.content ? (
message.role === "assistant" ? (
<AgentSpeechMessage
presentation={presentation}
messageId={message.id}
content={message.content}
disabled={streaming && index === messages.length - 1}
@@ -1348,6 +1339,7 @@ type SpeechSelection = {
};
function AgentSpeechMessage({
presentation,
messageId,
content,
disabled,
@@ -1359,6 +1351,7 @@ function AgentSpeechMessage({
onStop,
children
}: {
presentation: AgentCommandPanelPresentation;
messageId: string;
content: string;
disabled: boolean;
@@ -1472,7 +1465,8 @@ function AgentSpeechMessage({
<motion.button
key="speech-selection-action"
type="button"
className="agent-panel-floating-acrylic agent-speech-selection-action pointer-events-auto inline-flex h-10 items-center gap-2 rounded-xl px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25"
data-agent-presentation={presentation}
className="agent-panel-overlay agent-panel-floating-acrylic agent-speech-selection-action pointer-events-auto inline-flex h-10 items-center gap-2 rounded-xl px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25"
initial={{ opacity: 0 }}
animate={{
opacity: 1,