mirror of
https://github.com/HKUDS/nanobot.git
synced 2026-08-14 16:19:17 +03:00
feat(webui): polish sidebar and session transitions (#5393)
This commit is contained in:
chengyongru
+463
-276
File diff suppressed because it is too large
Load Diff
@@ -319,7 +319,7 @@ export function AgentActivityCluster({
|
||||
syncActivityScrollFade();
|
||||
}, [syncActivityScrollFade]);
|
||||
|
||||
if (!hasVisibleActivity) return null;
|
||||
if (!hasVisibleActivity && !isTurnStreaming) return null;
|
||||
|
||||
if (hasOnlyFileActivity) {
|
||||
return (
|
||||
@@ -343,6 +343,7 @@ export function AgentActivityCluster({
|
||||
contentRef={activityContentRef}
|
||||
fadeTop={activityScrollFade.top}
|
||||
fadeBottom={activityScrollFade.bottom}
|
||||
hasDetails={hasVisibleActivity}
|
||||
onToggle={toggleOuter}
|
||||
onScroll={onActivityScroll}
|
||||
>
|
||||
@@ -382,7 +383,13 @@ function activityDurationMs(
|
||||
const timestamps = messages
|
||||
.map((message) => message.createdAt)
|
||||
.filter((value) => Number.isFinite(value));
|
||||
if (!timestamps.length) return 0;
|
||||
if (!timestamps.length) {
|
||||
return active
|
||||
&& typeof activeStartedAtMs === "number"
|
||||
&& Number.isFinite(activeStartedAtMs)
|
||||
? Math.max(0, now - activeStartedAtMs)
|
||||
: 0;
|
||||
}
|
||||
const first = active && Number.isFinite(activeStartedAtMs)
|
||||
? activeStartedAtMs!
|
||||
: Math.min(...timestamps);
|
||||
|
||||
@@ -83,7 +83,6 @@ import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
|
||||
import { useLogoFallback } from "@/hooks/useLogoFallback";
|
||||
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
||||
import type { SendAttachment, SendOptions } from "@/hooks/useNanobotStream";
|
||||
import { usePageVisibility } from "@/hooks/usePageVisibility";
|
||||
import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
|
||||
import type {
|
||||
CliAppInfo,
|
||||
@@ -207,8 +206,6 @@ interface ThreadComposerProps {
|
||||
onStop?: () => void;
|
||||
surfaceRef?: Ref<HTMLDivElement>;
|
||||
onTranscribeAudio?: (dataUrl: string, options?: { durationMs?: number }) => Promise<string>;
|
||||
/** Unix seconds from server; turn elapsed timer above input while set. */
|
||||
runStartedAt?: number | null;
|
||||
/** Sustained objective for this chat (WebSocket ``goal_state``). */
|
||||
goalState?: GoalStateWsPayload;
|
||||
workspaceScope?: WorkspaceScopePayload | null;
|
||||
@@ -695,63 +692,38 @@ function mcpPresetMentionPayload(preset: McpPresetInfo): OutboundMcpPresetMentio
|
||||
};
|
||||
}
|
||||
|
||||
function RunPulseIcon() {
|
||||
return (
|
||||
<span className="run-pulse-icon relative flex h-4 w-4 shrink-0 items-center justify-center" aria-hidden>
|
||||
<span className="run-pulse-icon__ring" />
|
||||
<span className="run-pulse-icon__dot" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function RunElapsedStrip({
|
||||
startedAt,
|
||||
function GoalStateStrip({
|
||||
goalState,
|
||||
}: {
|
||||
startedAt: number | null;
|
||||
goalState?: GoalStateWsPayload;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const pageVisible = usePageVisibility();
|
||||
const [goalPanelOpen, setGoalPanelOpen] = useState(false);
|
||||
const showTimer = startedAt != null;
|
||||
const stripLabel = goalStateStripPreview(goalState, t);
|
||||
const showGoal = !!stripLabel?.trim();
|
||||
const active = showTimer || showGoal;
|
||||
const active = !!stripLabel?.trim();
|
||||
const [, setTick] = useState(0);
|
||||
const stripWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const expandToggleRef = useRef<HTMLButtonElement>(null);
|
||||
const stripSnapshotRef = useRef<{
|
||||
startedAt: number | null;
|
||||
goalState?: GoalStateWsPayload;
|
||||
stripLabel: string | null;
|
||||
} | null>(null);
|
||||
const [panelMaxPx, setPanelMaxPx] = useState(280);
|
||||
|
||||
if (active) {
|
||||
stripSnapshotRef.current = { startedAt, goalState, stripLabel };
|
||||
stripSnapshotRef.current = { goalState, stripLabel };
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) setGoalPanelOpen(false);
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
if (startedAt == null || !pageVisible) return;
|
||||
setTick((n) => n + 1);
|
||||
const id = window.setInterval(() => setTick((n) => n + 1), 1000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [pageVisible, startedAt]);
|
||||
|
||||
const display = active
|
||||
? { startedAt, goalState, stripLabel }
|
||||
? { goalState, stripLabel }
|
||||
: stripSnapshotRef.current;
|
||||
const displayStartedAt = display?.startedAt ?? null;
|
||||
const displayGoalState = display?.goalState;
|
||||
const displayStripLabel = display?.stripLabel ?? null;
|
||||
const displayShowTimer = displayStartedAt != null;
|
||||
const displayShowGoal = !!displayStripLabel?.trim();
|
||||
|
||||
const objectiveFull = displayGoalState?.objective?.trim() ?? "";
|
||||
const summaryFull = displayGoalState?.ui_summary?.trim() ?? "";
|
||||
@@ -819,17 +791,11 @@ function RunElapsedStrip({
|
||||
};
|
||||
}, [goalPanelOpen]);
|
||||
|
||||
const elapsed =
|
||||
displayStartedAt != null ? Math.max(0, Math.floor(Date.now() / 1000 - displayStartedAt)) : 0;
|
||||
const m = Math.floor(elapsed / 60);
|
||||
const sec = elapsed % 60;
|
||||
const shortElapsed = m > 0 ? `${m}:${sec.toString().padStart(2, "0")}` : `${sec}s`;
|
||||
const timerTitle = displayShowTimer
|
||||
? t("thread.composer.runRuntimeTitle", { elapsed: shortElapsed })
|
||||
: null;
|
||||
if (!display) return null;
|
||||
|
||||
const ariaParts = [timerTitle, displayShowGoal ? displayStripLabel : null].filter(Boolean);
|
||||
const ariaLabel = ariaParts.join(" · ");
|
||||
const ariaLabel = displayStripLabel
|
||||
? t("thread.composer.goalStateStrip", { label: displayStripLabel })
|
||||
: t("thread.composer.goalStateFallback");
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -838,6 +804,11 @@ function RunElapsedStrip({
|
||||
data-composer-status-drawer=""
|
||||
data-state={active ? "open" : "closed"}
|
||||
aria-hidden={active ? undefined : true}
|
||||
onTransitionEnd={(event) => {
|
||||
if (active || event.target !== event.currentTarget) return;
|
||||
stripSnapshotRef.current = null;
|
||||
setTick((n) => n + 1);
|
||||
}}
|
||||
>
|
||||
{goalPanelOpen && canExpandGoal && markdownBody ? (
|
||||
<div
|
||||
@@ -891,19 +862,9 @@ function RunElapsedStrip({
|
||||
role="status"
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{displayShowTimer ? (
|
||||
<RunPulseIcon />
|
||||
) : (
|
||||
<Target className="h-4 w-4 shrink-0 text-primary/75" aria-hidden />
|
||||
)}
|
||||
<Target className="h-4 w-4 shrink-0 text-primary/75" aria-hidden />
|
||||
<span className="flex min-w-0 flex-1 items-center gap-1.5 text-[12px] font-medium text-foreground/75">
|
||||
{timerTitle ? <span className="shrink-0">{timerTitle}</span> : null}
|
||||
{timerTitle && displayShowGoal ? (
|
||||
<span className="shrink-0 text-muted-foreground/45" aria-hidden>
|
||||
·
|
||||
</span>
|
||||
) : null}
|
||||
{displayShowGoal ? (
|
||||
{displayStripLabel ? (
|
||||
<span className="truncate">
|
||||
{t("thread.composer.goalStateStrip", { label: displayStripLabel })}
|
||||
</span>
|
||||
@@ -963,7 +924,6 @@ export function ThreadComposer({
|
||||
onStop,
|
||||
surfaceRef,
|
||||
onTranscribeAudio,
|
||||
runStartedAt = null,
|
||||
goalState,
|
||||
workspaceScope = null,
|
||||
workspaceControlsHidden = false,
|
||||
@@ -2370,7 +2330,7 @@ export function ThreadComposer({
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
|
||||
<GoalStateStrip goalState={goalState} />
|
||||
<div className="relative">
|
||||
{hasMentionDecorations ? (
|
||||
<ComposerCliMentionOverlay
|
||||
|
||||
@@ -11,6 +11,9 @@ interface ThreadMessagesProps {
|
||||
temporary?: boolean;
|
||||
/** When true, agent turn still in flight — keeps activity timeline expanded. */
|
||||
isStreaming?: boolean;
|
||||
activeTurnId?: string | null;
|
||||
/** Optimistic or canonical active-turn start, in unix seconds. */
|
||||
runStartedAt?: number | null;
|
||||
hiddenUserMessageCount?: number;
|
||||
cliApps?: CliAppInfo[];
|
||||
mcpPresets?: McpPresetInfo[];
|
||||
@@ -53,6 +56,8 @@ export function ThreadMessages({
|
||||
messages,
|
||||
temporary = false,
|
||||
isStreaming = false,
|
||||
activeTurnId = null,
|
||||
runStartedAt = null,
|
||||
hiddenUserMessageCount = 0,
|
||||
cliApps = [],
|
||||
mcpPresets = [],
|
||||
@@ -74,6 +79,16 @@ export function ThreadMessages({
|
||||
() => isStreaming ? currentActivityClusterIndices(units) : new Set<number>(),
|
||||
[isStreaming, units],
|
||||
);
|
||||
const pendingTurn = useMemo(
|
||||
() => pendingTurnProjection(messages, activeTurnId),
|
||||
[activeTurnId, messages],
|
||||
);
|
||||
const pendingActivity = (
|
||||
isStreaming
|
||||
&& liveActivityClusterIndices.size === 0
|
||||
&& pendingTurn !== null
|
||||
&& !pendingTurn.hasVisibleOutput
|
||||
) ? pendingTurn : null;
|
||||
const unitKeys = useMemo(() => unitKeysForDisplay(units), [units]);
|
||||
let nextUserIndex = hiddenUserMessageCount;
|
||||
|
||||
@@ -136,10 +151,68 @@ export function ThreadMessages({
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{pendingActivity ? (
|
||||
<div className={units.length > 0 ? "mt-5" : undefined}>
|
||||
<AgentActivityCluster
|
||||
messages={[]}
|
||||
isTurnStreaming
|
||||
hasBodyBelow={false}
|
||||
startedAtMs={
|
||||
runStartedAt != null
|
||||
? runStartedAt * 1000
|
||||
: pendingActivity.startedAtMs
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PendingTurnProjection {
|
||||
startedAtMs?: number;
|
||||
hasVisibleOutput: boolean;
|
||||
}
|
||||
|
||||
function pendingTurnProjection(
|
||||
messages: UIMessage[],
|
||||
activeTurnId: string | null,
|
||||
): PendingTurnProjection | null {
|
||||
let promptIndex = -1;
|
||||
for (let index = messages.length - 1; index >= 0; index -= 1) {
|
||||
const message = messages[index];
|
||||
if (
|
||||
message.role === "user"
|
||||
&& message.deliveryStatus !== "failed"
|
||||
&& (activeTurnId === null || message.turnId === activeTurnId)
|
||||
) {
|
||||
promptIndex = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (promptIndex < 0) return null;
|
||||
|
||||
const prompt = messages[promptIndex];
|
||||
const hasVisibleOutput = messages.slice(promptIndex + 1).some((message) => {
|
||||
if (message.role === "user") return false;
|
||||
if (activeTurnId && message.turnId && message.turnId !== activeTurnId) return false;
|
||||
return (
|
||||
message.content.trim().length > 0
|
||||
|| !!message.reasoning?.trim()
|
||||
|| !!message.reasoningStreaming
|
||||
|| message.kind === "trace"
|
||||
|| !!message.media?.length
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
...(typeof prompt.createdAt === "number" && Number.isFinite(prompt.createdAt)
|
||||
? { startedAtMs: prompt.createdAt }
|
||||
: {}),
|
||||
hasVisibleOutput,
|
||||
};
|
||||
}
|
||||
|
||||
interface ThreadDisplayUnitProps {
|
||||
unit: DisplayUnit;
|
||||
marginTop: string;
|
||||
|
||||
@@ -1458,7 +1458,6 @@ export function ThreadShell({
|
||||
skills={skills}
|
||||
onStop={stop}
|
||||
onTranscribeAudio={transcribeAudio}
|
||||
runStartedAt={currentRunStartedAt}
|
||||
goalState={currentGoalState}
|
||||
workspaceScope={workspaceScope}
|
||||
workspaceControlsHidden={temporary}
|
||||
@@ -1505,7 +1504,6 @@ export function ThreadShell({
|
||||
sessions={mentionSessions}
|
||||
skills={skills}
|
||||
surfaceRef={composerSurfaceRef}
|
||||
runStartedAt={currentRunStartedAt}
|
||||
onTranscribeAudio={transcribeAudio}
|
||||
goalState={currentGoalState}
|
||||
workspaceScope={workspaceScope}
|
||||
@@ -1579,6 +1577,7 @@ export function ThreadShell({
|
||||
messages={displayMessages}
|
||||
temporary={temporary}
|
||||
isStreaming={turnActive}
|
||||
runStartedAt={currentRunStartedAt}
|
||||
emptyState={emptyState}
|
||||
composer={composerPortalTarget === undefined ? composer : null}
|
||||
activeTurnId={viewportTurnId}
|
||||
|
||||
@@ -37,6 +37,8 @@ interface ThreadViewportProps {
|
||||
messages: UIMessage[];
|
||||
temporary?: boolean;
|
||||
isStreaming: boolean;
|
||||
/** Optimistic or canonical start time for the active turn, in unix seconds. */
|
||||
runStartedAt?: number | null;
|
||||
composer?: ReactNode;
|
||||
emptyState?: ReactNode;
|
||||
scrollToBottomSignal?: number;
|
||||
@@ -64,6 +66,9 @@ const DEFAULT_SCROLL_BUTTON_BOTTOM_PX = 192;
|
||||
const EXTERNAL_COMPOSER_SCROLL_BUTTON_BOTTOM_PX = 16;
|
||||
const SCROLL_BUTTON_COMPOSER_GAP_PX = 16;
|
||||
const SOFT_KEYBOARD_MIN_INSET_PX = 80;
|
||||
const SESSION_HANDOFF_EXIT_DURATION_MS = 80;
|
||||
const SESSION_HANDOFF_ENTER_DURATION_MS = 140;
|
||||
const SESSION_HANDOFF_OPACITY = 0.82;
|
||||
export const INITIAL_HISTORY_WINDOW = 160;
|
||||
export const HISTORY_WINDOW_INCREMENT = 120;
|
||||
|
||||
@@ -104,6 +109,13 @@ function isThreadDisclosureTarget(target: EventTarget | null): boolean {
|
||||
&& target.closest("[data-thread-disclosure]") !== null;
|
||||
}
|
||||
|
||||
function isKeyboardControl(element: Element | null): boolean {
|
||||
return element instanceof HTMLElement
|
||||
&& element.closest(
|
||||
"button, a[href], select, [role='button'], [role='menuitem'], [role='option']",
|
||||
) !== null;
|
||||
}
|
||||
|
||||
type ThreadScrollDirection = "backward" | "forward";
|
||||
|
||||
const KEYBOARD_SCROLL_DIRECTIONS: Readonly<
|
||||
@@ -161,6 +173,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
messages,
|
||||
temporary = false,
|
||||
isStreaming,
|
||||
runStartedAt = null,
|
||||
composer,
|
||||
emptyState,
|
||||
scrollToBottomSignal = 0,
|
||||
@@ -187,9 +200,12 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const messageRegionRef = useRef<HTMLDivElement>(null);
|
||||
const messageContentRef = useRef<HTMLDivElement>(null);
|
||||
const emptyStateRef = useRef<HTMLDivElement>(null);
|
||||
const composerDockRef = useRef<HTMLDivElement>(null);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const lastConversationKeyRef = useRef<string | null>(conversationKey);
|
||||
const conversationHandoffPendingRef = useRef(false);
|
||||
const conversationHandoffAnimationRef = useRef<Animation | null>(null);
|
||||
const pendingConversationScrollRef = useRef(true);
|
||||
const pendingPromptJumpRef = useRef<string | null>(null);
|
||||
const restoreScrollAfterPrependRef =
|
||||
@@ -422,11 +438,27 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
useLayoutEffect(() => {
|
||||
if (lastConversationKeyRef.current === conversationKey) return;
|
||||
lastConversationKeyRef.current = conversationKey;
|
||||
conversationHandoffAnimationRef.current?.cancel();
|
||||
conversationHandoffAnimationRef.current = null;
|
||||
conversationHandoffPendingRef.current = true;
|
||||
pendingConversationScrollRef.current = true;
|
||||
threadMotionRef.current?.reset();
|
||||
setAtBottom(true);
|
||||
setVisibleMessageCount(INITIAL_HISTORY_WINDOW);
|
||||
}, [conversationKey]);
|
||||
|
||||
const surface = hasMessages ? messageRegionRef.current : emptyStateRef.current;
|
||||
const reduceMotion = typeof window.matchMedia === "function"
|
||||
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
if (!surface || reduceMotion || typeof surface.animate !== "function") return;
|
||||
conversationHandoffAnimationRef.current = surface.animate(
|
||||
[{ opacity: 1 }, { opacity: SESSION_HANDOFF_OPACITY }],
|
||||
{
|
||||
duration: SESSION_HANDOFF_EXIT_DURATION_MS,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
fill: "forwards",
|
||||
},
|
||||
);
|
||||
}, [conversationKey, hasMessages]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!conversationReady) {
|
||||
@@ -513,11 +545,41 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
scrollToBottom,
|
||||
]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!conversationReady || !conversationHandoffPendingRef.current) return;
|
||||
conversationHandoffPendingRef.current = false;
|
||||
conversationHandoffAnimationRef.current?.cancel();
|
||||
conversationHandoffAnimationRef.current = null;
|
||||
const surface = hasMessages ? messageRegionRef.current : emptyStateRef.current;
|
||||
const reduceMotion = typeof window.matchMedia === "function"
|
||||
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
if (!surface || reduceMotion || typeof surface.animate !== "function") return;
|
||||
|
||||
const animation = surface.animate(
|
||||
[{ opacity: SESSION_HANDOFF_OPACITY }, { opacity: 1 }],
|
||||
{
|
||||
duration: SESSION_HANDOFF_ENTER_DURATION_MS,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
},
|
||||
);
|
||||
conversationHandoffAnimationRef.current = animation;
|
||||
const clearAnimation = () => {
|
||||
if (conversationHandoffAnimationRef.current === animation) {
|
||||
conversationHandoffAnimationRef.current = null;
|
||||
}
|
||||
};
|
||||
animation.onfinish = clearAnimation;
|
||||
animation.oncancel = clearAnimation;
|
||||
}, [conversationReady, hasMessages]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
threadMotionRef.current?.invalidateGeometry();
|
||||
}, [composer, hasMessages, visibleMessages.length]);
|
||||
|
||||
useEffect(() => () => threadMotionRef.current?.dispose(), []);
|
||||
useEffect(() => () => {
|
||||
conversationHandoffAnimationRef.current?.cancel();
|
||||
threadMotionRef.current?.dispose();
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
@@ -530,10 +592,13 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
const invalidateGeometry = () => {
|
||||
threadMotionRef.current?.invalidateGeometry();
|
||||
};
|
||||
invalidateGeometry();
|
||||
const reconcileObservedGeometry = () => {
|
||||
threadMotionRef.current?.reconcileObservedGeometry();
|
||||
};
|
||||
reconcileObservedGeometry();
|
||||
const observer = typeof ResizeObserver === "undefined"
|
||||
? null
|
||||
: new ResizeObserver(invalidateGeometry);
|
||||
: new ResizeObserver(reconcileObservedGeometry);
|
||||
observer?.observe(el);
|
||||
if (content) observer?.observe(content);
|
||||
if (messageRegion) observer?.observe(messageRegion);
|
||||
@@ -623,6 +688,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
yieldCameraToUser();
|
||||
return;
|
||||
}
|
||||
if (isKeyboardControl(event.target as Element | null)) return;
|
||||
handleDirectionalInput(keyboardScrollDirection(event));
|
||||
};
|
||||
el.addEventListener("scroll", handleScroll, { passive: true });
|
||||
@@ -690,6 +756,8 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
messages={visibleMessages}
|
||||
temporary={temporary}
|
||||
isStreaming={isStreaming}
|
||||
activeTurnId={activeTurnId}
|
||||
runStartedAt={runStartedAt}
|
||||
hiddenUserMessageCount={hiddenUserMessageCount}
|
||||
cliApps={cliApps}
|
||||
mcpPresets={mcpPresets}
|
||||
@@ -704,6 +772,8 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
ref={emptyStateRef}
|
||||
data-testid="thread-empty-region"
|
||||
className={cn(
|
||||
"row-start-1 flex min-h-0 min-w-0 w-full items-center justify-center",
|
||||
hasComposer && "sm:items-end sm:pb-8",
|
||||
|
||||
@@ -12,6 +12,7 @@ interface ThinkingReasoningShellProps {
|
||||
contentRef: Ref<HTMLDivElement>;
|
||||
fadeTop: boolean;
|
||||
fadeBottom: boolean;
|
||||
hasDetails?: boolean;
|
||||
onToggle: () => void;
|
||||
onScroll: () => void;
|
||||
}
|
||||
@@ -25,6 +26,7 @@ export function ThinkingReasoningShell({
|
||||
contentRef,
|
||||
fadeTop,
|
||||
fadeBottom,
|
||||
hasDetails = true,
|
||||
onToggle,
|
||||
onScroll,
|
||||
}: ThinkingReasoningShellProps) {
|
||||
@@ -33,80 +35,100 @@ export function ThinkingReasoningShell({
|
||||
className="flex w-full max-w-[45rem] animate-in flex-col fade-in duration-300 motion-reduce:animate-none"
|
||||
data-state={active ? "thinking" : "done"}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-thread-disclosure=""
|
||||
className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
|
||||
onClick={onToggle}
|
||||
aria-expanded={expanded}
|
||||
aria-label={label}
|
||||
aria-live={active ? "polite" : undefined}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
|
||||
active && "animate-pulse motion-reduce:animate-none",
|
||||
)}
|
||||
{hasDetails ? (
|
||||
<button
|
||||
type="button"
|
||||
data-thread-disclosure=""
|
||||
className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
|
||||
onClick={onToggle}
|
||||
aria-expanded={expanded}
|
||||
aria-label={label}
|
||||
aria-live={active ? "polite" : undefined}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 transition-transform [transition-duration:220ms] ease-out",
|
||||
"motion-reduce:transition-none",
|
||||
expanded && "rotate-180",
|
||||
)}
|
||||
>
|
||||
<ChevronDown
|
||||
<span
|
||||
className={cn(
|
||||
"h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
|
||||
"group-hover:text-muted-foreground motion-reduce:transition-none",
|
||||
"min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
|
||||
active && "animate-pulse motion-reduce:animate-none",
|
||||
)}
|
||||
strokeWidth={1.8}
|
||||
aria-hidden
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
{...(!expanded ? { inert: "" } : {})}
|
||||
aria-hidden={!expanded}
|
||||
className={cn(
|
||||
"grid transition-[grid-template-rows,opacity] [transition-duration:220ms] ease-out motion-reduce:transition-none",
|
||||
expanded
|
||||
? "grid-rows-[1fr] opacity-100"
|
||||
: "pointer-events-none grid-rows-[0fr] opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="relative min-h-0 overflow-hidden">
|
||||
<div
|
||||
ref={viewportRef}
|
||||
data-testid={expanded ? "agent-activity-scroll" : undefined}
|
||||
data-fade-top={fadeTop}
|
||||
data-fade-bottom={fadeBottom}
|
||||
onScroll={onScroll}
|
||||
className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
<div ref={contentRef} className="flex flex-col gap-0.5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
{fadeTop ? (
|
||||
<span
|
||||
data-testid="activity-scroll-fade-top"
|
||||
className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 transition-transform [transition-duration:220ms] ease-out",
|
||||
"motion-reduce:transition-none",
|
||||
expanded && "rotate-180",
|
||||
)}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
|
||||
"group-hover:text-muted-foreground motion-reduce:transition-none",
|
||||
)}
|
||||
strokeWidth={1.8}
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{fadeBottom ? (
|
||||
<span
|
||||
data-testid="activity-scroll-fade-bottom"
|
||||
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<div
|
||||
className="inline-flex min-h-5 items-center self-start"
|
||||
role="status"
|
||||
aria-label={label}
|
||||
aria-live={active ? "polite" : undefined}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
|
||||
active && "animate-pulse motion-reduce:animate-none",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasDetails ? (
|
||||
<div
|
||||
{...(!expanded ? { inert: "" } : {})}
|
||||
aria-hidden={!expanded}
|
||||
className={cn(
|
||||
"grid transition-[grid-template-rows,opacity] [transition-duration:220ms] ease-out motion-reduce:transition-none",
|
||||
expanded
|
||||
? "grid-rows-[1fr] opacity-100"
|
||||
: "pointer-events-none grid-rows-[0fr] opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="relative min-h-0 overflow-hidden">
|
||||
<div
|
||||
ref={viewportRef}
|
||||
data-testid={expanded ? "agent-activity-scroll" : undefined}
|
||||
data-fade-top={fadeTop}
|
||||
data-fade-bottom={fadeBottom}
|
||||
onScroll={onScroll}
|
||||
className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
<div ref={contentRef} className="flex flex-col gap-0.5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
{fadeTop ? (
|
||||
<span
|
||||
data-testid="activity-scroll-fade-top"
|
||||
className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{fadeBottom ? (
|
||||
<span
|
||||
data-testid="activity-scroll-fade-bottom"
|
||||
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -147,10 +147,10 @@ function defaultScheduler(): ThreadMotionScheduler {
|
||||
}
|
||||
|
||||
/**
|
||||
* Owns the policy that turns discrete layout events into automatic tail
|
||||
* pinning or explicit camera navigation. Callers only invalidate geometry;
|
||||
* one display frame coalesces those notifications and reads the authoritative
|
||||
* layout before applying either policy.
|
||||
* Owns the policy that turns layout events into automatic tail pinning or
|
||||
* explicit camera navigation. Discrete notifications are coalesced into one
|
||||
* display frame. ResizeObserver deliveries reconcile immediately because they
|
||||
* already carry the browser's authoritative layout and run before paint.
|
||||
*/
|
||||
export class ThreadMotionCoordinator {
|
||||
private readonly camera: ThreadMotionCamera;
|
||||
@@ -240,6 +240,15 @@ export class ThreadMotionCoordinator {
|
||||
this.measurementFrameId = this.scheduler.request(this.flushGeometry);
|
||||
}
|
||||
|
||||
reconcileObservedGeometry(): void {
|
||||
if (this.measurementFrameId !== null) {
|
||||
this.scheduler.cancel(this.measurementFrameId);
|
||||
this.measurementFrameId = null;
|
||||
}
|
||||
this.geometryDirty = true;
|
||||
this.flushGeometry();
|
||||
}
|
||||
|
||||
handleComposerInput(): void {
|
||||
// Input and protocol completion can arrive in either order. Remember
|
||||
// editing that starts just before turn_end so the completion drawer
|
||||
|
||||
@@ -220,7 +220,9 @@ export function PaneWorkbench({
|
||||
const gridRef = useRef<HTMLDivElement | null>(null);
|
||||
const paneRefs = useRef(new Map<string, HTMLElement>());
|
||||
const lastRectsRef = useRef(new Map<string, DOMRect>());
|
||||
const lastElementRectsRef = useRef(new Map<HTMLElement, DOMRect>());
|
||||
const pendingRectsRef = useRef<Map<string, DOMRect> | null>(null);
|
||||
const pendingElementRectsRef = useRef<Map<HTMLElement, DOMRect> | null>(null);
|
||||
const animationsRef = useRef(new Map<string, Animation>());
|
||||
const sourceSplitRatiosKey = splitRatios.join("\u0000");
|
||||
const [previewSplitRatios, setPreviewSplitRatios] = useState(splitRatios);
|
||||
@@ -284,24 +286,36 @@ export function PaneWorkbench({
|
||||
return rects;
|
||||
}, []);
|
||||
|
||||
const measurePaneElements = useCallback(() => {
|
||||
const rects = new Map<HTMLElement, DOMRect>();
|
||||
for (const element of paneRefs.current.values()) {
|
||||
if (!element.hidden) rects.set(element, element.getBoundingClientRect());
|
||||
}
|
||||
return rects;
|
||||
}, []);
|
||||
|
||||
const captureLayout = useCallback(() => {
|
||||
pendingRectsRef.current = measurePanes();
|
||||
pendingElementRectsRef.current = measurePaneElements();
|
||||
for (const animation of animationsRef.current.values()) animation.cancel();
|
||||
animationsRef.current.clear();
|
||||
}, [measurePanes]);
|
||||
}, [measurePaneElements, measurePanes]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const previousRects = pendingRectsRef.current ?? lastRectsRef.current;
|
||||
const previousElementRects = pendingElementRectsRef.current ?? lastElementRectsRef.current;
|
||||
pendingRectsRef.current = null;
|
||||
pendingElementRectsRef.current = null;
|
||||
const nextRects = measurePanes();
|
||||
const nextElementRects = measurePaneElements();
|
||||
const reduceMotion = typeof window.matchMedia === "function"
|
||||
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
if (!reduceMotion) {
|
||||
for (const [key, nextRect] of nextRects) {
|
||||
const previousRect = previousRects.get(key);
|
||||
const element = paneRefs.current.get(key);
|
||||
if (!element) continue;
|
||||
const previousRect = previousRects.get(key) ?? previousElementRects.get(element);
|
||||
if (!previousRect) {
|
||||
if (previousRects.size === 0 || typeof element.animate !== "function") continue;
|
||||
const animation = element.animate(
|
||||
@@ -356,7 +370,8 @@ export function PaneWorkbench({
|
||||
}
|
||||
}
|
||||
lastRectsRef.current = nextRects;
|
||||
}, [activePaneKey, effectiveLayout, measurePanes, paneOrder]);
|
||||
lastElementRectsRef.current = nextElementRects;
|
||||
}, [activePaneKey, effectiveLayout, measurePaneElements, measurePanes, paneOrder]);
|
||||
|
||||
useEffect(() => () => {
|
||||
for (const animation of animationsRef.current.values()) animation.cancel();
|
||||
|
||||
@@ -478,50 +478,6 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes run-pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.76;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes run-pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.42);
|
||||
opacity: 0.34;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.28);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.run-pulse-icon {
|
||||
color: hsl(204 82% 46%);
|
||||
}
|
||||
.run-pulse-icon__ring,
|
||||
.run-pulse-icon__dot {
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.run-pulse-icon__ring {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: hsl(204 82% 46% / 0.22);
|
||||
animation: run-pulse-ring 1.55s ease-out infinite;
|
||||
}
|
||||
.run-pulse-icon__dot {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: currentColor;
|
||||
box-shadow: 0 0 0 1px hsl(204 82% 46% / 0.14);
|
||||
animation: run-pulse-dot 1.55s ease-in-out infinite;
|
||||
}
|
||||
@keyframes queued-prompt-row-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -552,18 +508,6 @@
|
||||
.thread-layout {
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
.run-pulse-icon,
|
||||
.run-pulse-icon * {
|
||||
animation: none;
|
||||
}
|
||||
.run-pulse-icon__ring {
|
||||
opacity: 0.18;
|
||||
transform: scale(1);
|
||||
}
|
||||
.run-pulse-icon__dot {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.queued-prompt-row {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@@ -2040,18 +2040,20 @@ describe("App layout", () => {
|
||||
act(() => {
|
||||
for (const handler of runStatusHandlers) handler("chat-a", 12_345);
|
||||
});
|
||||
expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument();
|
||||
expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument();
|
||||
|
||||
act(() => {
|
||||
for (const handler of runStatusHandlers) handler("chat-a", null);
|
||||
});
|
||||
expect(within(sidebar).queryByTitle("Agent running")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "Agent running" }))
|
||||
.not.toBeInTheDocument();
|
||||
expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(within(sidebar).getByRole("button", { name: /^Working chat$/ }));
|
||||
});
|
||||
expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "New activity" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show an updated dot later when the active session finishes", async () => {
|
||||
@@ -2092,18 +2094,21 @@ describe("App layout", () => {
|
||||
act(() => {
|
||||
for (const handler of runStatusHandlers) handler("chat-a", 12_345);
|
||||
});
|
||||
expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument();
|
||||
expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument();
|
||||
|
||||
act(() => {
|
||||
for (const handler of runStatusHandlers) handler("chat-a", null);
|
||||
});
|
||||
expect(within(sidebar).queryByTitle("Agent running")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "Agent running" }))
|
||||
.not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "New activity" }))
|
||||
.not.toBeInTheDocument();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(within(sidebar).getByRole("button", { name: /^Other chat$/ }));
|
||||
});
|
||||
expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "New activity" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("marks inactive sessions when a thread update arrives", async () => {
|
||||
@@ -2138,13 +2143,14 @@ describe("App layout", () => {
|
||||
for (const handler of sessionUpdateHandlers) handler("chat-b", "thread");
|
||||
});
|
||||
|
||||
expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
|
||||
expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(within(sidebar).getByRole("button", { name: /^Scheduled update target$/ }));
|
||||
});
|
||||
|
||||
expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
|
||||
expect(within(sidebar).queryByRole("img", { name: "New activity" }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("restores sidebar run indicators after a page reload", async () => {
|
||||
@@ -2177,9 +2183,9 @@ describe("App layout", () => {
|
||||
await waitFor(() => expect(connectSpy).toHaveBeenCalled());
|
||||
const sidebar = screen.getByRole("navigation", { name: "Sidebar navigation" });
|
||||
await waitFor(() =>
|
||||
expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument(),
|
||||
expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument(),
|
||||
);
|
||||
expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
|
||||
expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
|
||||
expect(attachSpy).toHaveBeenCalledWith("chat-a");
|
||||
});
|
||||
|
||||
@@ -3099,13 +3105,10 @@ describe("App layout", () => {
|
||||
.toBeTruthy();
|
||||
|
||||
const alphaGroup = alphaTab.closest("[data-sidebar-tab-group]") as HTMLElement;
|
||||
const paneTitles = within(alphaGroup)
|
||||
.getAllByRole("button")
|
||||
.filter((button) => (
|
||||
button.closest("[data-sidebar-pane]") && button.hasAttribute("title")
|
||||
))
|
||||
.map((button) => button.getAttribute("title"));
|
||||
expect(paneTitles).toEqual(["Alpha child", "Alpha tab"]);
|
||||
const alphaChild = within(alphaGroup).getByRole("button", { name: "Alpha child" });
|
||||
const alphaRoot = within(alphaGroup).getByRole("button", { name: "Alpha tab" });
|
||||
expect(alphaChild.compareDocumentPosition(alphaRoot) & Node.DOCUMENT_POSITION_FOLLOWING)
|
||||
.toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses one active pane without workbench editing controls on mobile", async () => {
|
||||
|
||||
@@ -18,13 +18,54 @@ function session(overrides: Partial<ChatSummary>): ChatSummary {
|
||||
};
|
||||
}
|
||||
|
||||
function rect(top: number): DOMRect {
|
||||
return {
|
||||
x: 0,
|
||||
y: top,
|
||||
width: 240,
|
||||
height: 32,
|
||||
top,
|
||||
right: 240,
|
||||
bottom: top + 32,
|
||||
left: 0,
|
||||
toJSON: () => ({}),
|
||||
};
|
||||
}
|
||||
|
||||
describe("ChatList", () => {
|
||||
const originalAnimate = HTMLElement.prototype.animate;
|
||||
const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
|
||||
|
||||
afterEach(() => {
|
||||
HTMLElement.prototype.animate = originalAnimate;
|
||||
HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
|
||||
localStorage.removeItem("nanobot-webui.collapsed-pane-groups.v1");
|
||||
vi.restoreAllMocks();
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it("opens a conversation's existing actions from the row context menu", async () => {
|
||||
const onTogglePin = vi.fn();
|
||||
render(
|
||||
<ChatList
|
||||
sessions={[session({ chatId: "review", title: "Review the patch" })]}
|
||||
activeKey="websocket:review"
|
||||
onSelect={vi.fn()}
|
||||
onRequestDelete={vi.fn()}
|
||||
onTogglePin={onTogglePin}
|
||||
onRequestRename={vi.fn()}
|
||||
onToggleArchive={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const row = screen.getByRole("button", { name: "Review the patch" })
|
||||
.closest("[data-chat-row]")!;
|
||||
fireEvent.contextMenu(row);
|
||||
fireEvent.click(await screen.findByRole("menuitem", { name: "Pin" }));
|
||||
|
||||
expect(onTogglePin).toHaveBeenCalledWith("websocket:review");
|
||||
});
|
||||
|
||||
it("keeps tab grouping out of drag protocols while exposing inactive panes as mention sources", () => {
|
||||
render(
|
||||
<ChatList
|
||||
@@ -71,6 +112,46 @@ describe("ChatList", () => {
|
||||
expect(document.querySelector("[data-pane-snap-slot]")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("opens grouped pane and tab actions from their context menus", async () => {
|
||||
const onRequestRename = vi.fn();
|
||||
const onDissolveTab = vi.fn();
|
||||
render(
|
||||
<ChatList
|
||||
sessions={[session({ chatId: "root", title: "Root topic" })]}
|
||||
activeKey="websocket:root"
|
||||
paneGroups={{
|
||||
"websocket:root": {
|
||||
tabKey: "websocket:root",
|
||||
title: "Root topic",
|
||||
activePaneKey: "websocket:root",
|
||||
panes: [
|
||||
{ key: "websocket:root", chatId: "root", title: "Root topic" },
|
||||
{ key: "websocket:child", chatId: "child", title: "Research pane" },
|
||||
],
|
||||
},
|
||||
}}
|
||||
onSelect={vi.fn()}
|
||||
onRequestDelete={vi.fn()}
|
||||
onTogglePin={vi.fn()}
|
||||
onRequestRename={onRequestRename}
|
||||
onToggleArchive={vi.fn()}
|
||||
onDissolveTab={onDissolveTab}
|
||||
/>,
|
||||
);
|
||||
|
||||
const paneRow = screen.getByRole("button", { name: "Research pane" })
|
||||
.closest("[data-sidebar-pane]")!;
|
||||
fireEvent.contextMenu(paneRow);
|
||||
fireEvent.click(await screen.findByRole("menuitem", { name: "Rename" }));
|
||||
expect(onRequestRename).toHaveBeenCalledWith("websocket:child", "Research pane");
|
||||
|
||||
const tabRow = screen.getByRole("button", { name: "Tab: Root topic" })
|
||||
.closest("[data-workbench-tab]")!;
|
||||
fireEvent.contextMenu(tabRow);
|
||||
fireEvent.click(await screen.findByRole("menuitem", { name: "Dissolve group" }));
|
||||
expect(onDissolveTab).toHaveBeenCalledWith("websocket:root");
|
||||
});
|
||||
|
||||
it("creates a visible tab in place and only moves panes into visible tabs", async () => {
|
||||
const onAttachPane = vi.fn();
|
||||
const onCreateTab = vi.fn();
|
||||
@@ -324,21 +405,25 @@ describe("ChatList", () => {
|
||||
expect(tabHeader).not.toHaveAttribute("data-chat-row");
|
||||
expect(tabHeader).not.toHaveAttribute("data-sidebar-pane");
|
||||
expect(tabButton).not.toHaveAttribute("aria-current");
|
||||
expect(tabButton.querySelector("svg")).not.toBeInTheDocument();
|
||||
expect(tabButton.querySelector(".lucide-folder-tree")).toBeInTheDocument();
|
||||
const paneList = within(tabGroup).getByRole("list", { name: "Panes in Root topic" });
|
||||
expect(tabSurface).toContainElement(paneList);
|
||||
const activePane = within(tabGroup).getByRole("button", { name: "Research pane" });
|
||||
expect(activePane).toHaveAttribute("aria-current", "true");
|
||||
expect(activePane.closest("[data-sidebar-pane]")).toHaveClass(
|
||||
"bg-sidebar-selected",
|
||||
"rounded-[0.65rem]",
|
||||
);
|
||||
expect(activePane.closest("[data-sidebar-pane]")).toHaveClass("rounded-[0.65rem]");
|
||||
expect(activePane.querySelector("[data-sidebar-selection-track]"))
|
||||
.toHaveAttribute("data-active", "true");
|
||||
expect(screen.getByRole("button", {
|
||||
name: "Research pane pane actions",
|
||||
})).toHaveClass("opacity-0");
|
||||
expect(within(tabGroup).getByRole("button", { name: "Root topic" }))
|
||||
.not.toHaveAttribute("aria-current");
|
||||
expect(tabGroup).not.toHaveTextContent("2/4");
|
||||
expect(paneList).toHaveClass(
|
||||
"rounded-es-[14px]",
|
||||
"border-s-2",
|
||||
"border-sidebar-foreground/25",
|
||||
);
|
||||
|
||||
const collapse = within(tabGroup).getByRole("button", {
|
||||
name: "Collapse panes in Root topic",
|
||||
@@ -354,7 +439,6 @@ describe("ChatList", () => {
|
||||
})).toHaveAttribute("aria-expanded", "false");
|
||||
expect(within(tabGroup).getByRole("button", { name: "Tab: Root topic" }))
|
||||
.not.toHaveAttribute("aria-current");
|
||||
expect(tabSurface).toHaveClass("bg-sidebar-foreground/[0.045]");
|
||||
|
||||
fireEvent.click(within(tabGroup).getByRole("button", {
|
||||
name: "Expand panes in Root topic",
|
||||
@@ -517,10 +601,13 @@ describe("ChatList", () => {
|
||||
);
|
||||
|
||||
const pinnedSection = screen.getByRole("region", { name: "Pinned" });
|
||||
expect(within(pinnedSection).getByTitle("Pinned")).toBeInTheDocument();
|
||||
expect(
|
||||
within(screen.getByRole("region", { name: "Earlier" })).queryByTitle("Pinned"),
|
||||
).not.toBeInTheDocument();
|
||||
within(pinnedSection)
|
||||
.getByText("Pinned chat")
|
||||
.closest("[data-chat-row]")
|
||||
?.querySelector("[data-sidebar-pinned-indicator]"),
|
||||
).toBeInTheDocument();
|
||||
expect(document.querySelectorAll("[data-sidebar-pinned-indicator]")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("groups WebUI chats by workspace project while preserving in-project sorting and activity", () => {
|
||||
@@ -574,8 +661,16 @@ describe("ChatList", () => {
|
||||
|
||||
const nanobotSection = screen.getByRole("region", { name: "nanobot" });
|
||||
const nanobotText = nanobotSection.textContent ?? "";
|
||||
const projectSurface = nanobotSection.querySelector(
|
||||
"[data-sidebar-project-surface]",
|
||||
);
|
||||
|
||||
expect(screen.getByRole("region", { name: "nanobot-bench" })).toBeInTheDocument();
|
||||
expect(projectSurface).toHaveClass(
|
||||
"rounded-es-[16px]",
|
||||
"border-s-2",
|
||||
"border-sidebar-foreground/10",
|
||||
);
|
||||
expect(within(nanobotSection).getByText("Alpha task")).toBeInTheDocument();
|
||||
expect(within(nanobotSection).getByText("Zeta task")).toBeInTheDocument();
|
||||
expect(nanobotText.indexOf("Alpha task")).toBeLessThan(nanobotText.indexOf("Zeta task"));
|
||||
@@ -630,7 +725,7 @@ describe("ChatList", () => {
|
||||
expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("switches row-owned tab highlights without a moving selection surface", () => {
|
||||
it("grows and retracts the row-owned selection track", () => {
|
||||
const props = {
|
||||
sessions: [
|
||||
session({ chatId: "active", title: "Active topic" }),
|
||||
@@ -650,12 +745,10 @@ describe("ChatList", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
const activeButton = screen.getByTitle("Active topic");
|
||||
const activeButton = screen.getByRole("button", { name: "Active topic" });
|
||||
expect(activeButton).toHaveAttribute("aria-current", "page");
|
||||
expect(activeButton.closest("[data-sidebar-tab]")).toHaveClass(
|
||||
"bg-sidebar-selected",
|
||||
);
|
||||
expect(screen.queryByTestId("sessions-selection-highlight")).not.toBeInTheDocument();
|
||||
expect(activeButton.querySelector("[data-sidebar-selection-track]"))
|
||||
.toHaveClass("origin-left", "scale-x-100", "transition-transform", "bg-current");
|
||||
|
||||
rerender(
|
||||
<ChatList
|
||||
@@ -664,11 +757,16 @@ describe("ChatList", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByTitle("Active topic")).not.toHaveAttribute("aria-current");
|
||||
expect(screen.getByTitle("Inactive topic")).toHaveAttribute("aria-current", "page");
|
||||
expect(screen.getByTitle("Inactive topic").closest("[data-sidebar-tab]")).toHaveClass(
|
||||
"bg-sidebar-selected",
|
||||
);
|
||||
expect(screen.getByRole("button", { name: "Active topic" }))
|
||||
.not.toHaveAttribute("aria-current");
|
||||
expect(screen.getByRole("button", { name: "Inactive topic" }))
|
||||
.toHaveAttribute("aria-current", "page");
|
||||
expect(screen.getByRole("button", { name: "Active topic" })
|
||||
.querySelector("[data-sidebar-selection-track]"))
|
||||
.toHaveClass("scale-x-0");
|
||||
expect(screen.getByRole("button", { name: "Inactive topic" })
|
||||
.querySelector("[data-sidebar-selection-track]"))
|
||||
.toHaveClass("scale-x-100");
|
||||
});
|
||||
|
||||
it("restores collapsed tabs from the local UI preference", () => {
|
||||
@@ -743,21 +841,111 @@ describe("ChatList", () => {
|
||||
expect(onToggleGroup).toHaveBeenCalledWith("project:/Users/me/nanobot");
|
||||
expect(within(projectSection).queryByText("Alpha task")).not.toBeInTheDocument();
|
||||
|
||||
fireEvent.click(
|
||||
within(projectSection).getByRole("button", { name: "Start a new topic in Photos" }),
|
||||
);
|
||||
const projectButton = within(projectSection).getByRole("button", { name: "Photos" });
|
||||
fireEvent.contextMenu(projectButton);
|
||||
fireEvent.click(await screen.findByRole("menuitem", { name: "New topic" }));
|
||||
expect(onNewChatInProject).toHaveBeenCalledWith("/Users/me/nanobot", "Photos");
|
||||
expect(onToggleGroup).toHaveBeenCalledTimes(1);
|
||||
|
||||
fireEvent.pointerDown(
|
||||
within(projectSection).getByLabelText("Topic actions for Photos"),
|
||||
{ button: 0 },
|
||||
);
|
||||
fireEvent.contextMenu(projectButton);
|
||||
fireEvent.click(await screen.findByRole("menuitem", { name: "Rename" }));
|
||||
|
||||
expect(onRequestRenameProject).toHaveBeenCalledWith("/Users/me/nanobot", "Photos");
|
||||
});
|
||||
|
||||
it("animates project disclosure and surrounding layout like tab groups", () => {
|
||||
let collapsed = false;
|
||||
const onToggleGroup = vi.fn();
|
||||
const animate = vi.fn(() => ({
|
||||
addEventListener: vi.fn(),
|
||||
cancel: vi.fn(),
|
||||
}) as unknown as Animation);
|
||||
HTMLElement.prototype.animate = animate;
|
||||
HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
|
||||
const followsCollapsedProject = this.textContent?.includes("Beta") ?? false;
|
||||
return rect(followsCollapsedProject ? (collapsed ? 64 : 160) : 0);
|
||||
};
|
||||
const sessions = [
|
||||
session({
|
||||
chatId: "alpha",
|
||||
title: "Alpha task",
|
||||
workspaceScope: {
|
||||
project_path: "/Users/me/alpha",
|
||||
project_name: "Alpha project",
|
||||
access_mode: "restricted",
|
||||
},
|
||||
}),
|
||||
session({
|
||||
chatId: "beta",
|
||||
title: "Beta task",
|
||||
workspaceScope: {
|
||||
project_path: "/Users/me/beta",
|
||||
project_name: "Beta project",
|
||||
access_mode: "restricted",
|
||||
},
|
||||
}),
|
||||
];
|
||||
const props = {
|
||||
sessions,
|
||||
activeKey: "websocket:alpha",
|
||||
onSelect: vi.fn(),
|
||||
onRequestDelete: vi.fn(),
|
||||
onTogglePin: vi.fn(),
|
||||
onRequestRename: vi.fn(),
|
||||
onRequestRenameProject: vi.fn(),
|
||||
onToggleArchive: vi.fn(),
|
||||
onToggleGroup,
|
||||
};
|
||||
|
||||
const { rerender } = render(
|
||||
<ChatList {...props} collapsedGroups={{ "project:/Users/me/alpha": false }} />,
|
||||
);
|
||||
|
||||
const projectButton = screen.getByRole("button", { name: "Alpha project" });
|
||||
const disclosureButton = screen.getByRole("button", {
|
||||
name: "Projects: Alpha project",
|
||||
});
|
||||
expect(projectButton).toHaveAttribute("aria-expanded", "true");
|
||||
expect(disclosureButton).toHaveAttribute("aria-expanded", "true");
|
||||
const expandedIcon = disclosureButton
|
||||
.querySelector("[data-sidebar-project-disclosure-icon]");
|
||||
expect(expandedIcon).toHaveClass(
|
||||
"transition-transform",
|
||||
"duration-200",
|
||||
"ease-out",
|
||||
"motion-reduce:transition-none",
|
||||
);
|
||||
expect(expandedIcon).not.toHaveClass("rotate-90");
|
||||
expect(screen.getByRole("button", { name: "Topic actions for Alpha project" })
|
||||
.compareDocumentPosition(disclosureButton) & Node.DOCUMENT_POSITION_FOLLOWING)
|
||||
.toBeTruthy();
|
||||
|
||||
fireEvent.click(disclosureButton);
|
||||
expect(onToggleGroup).toHaveBeenCalledWith("project:/Users/me/alpha");
|
||||
collapsed = true;
|
||||
rerender(
|
||||
<ChatList {...props} collapsedGroups={{ "project:/Users/me/alpha": true }} />,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("button", { name: "Projects: Alpha project" })
|
||||
.querySelector("[data-sidebar-project-disclosure-icon]"))
|
||||
.toHaveClass("rotate-90");
|
||||
expect(projectButton).toHaveAttribute("aria-expanded", "false");
|
||||
expect(animate).toHaveBeenCalledWith(
|
||||
[
|
||||
{ transform: "translateY(96px)" },
|
||||
{ transform: "translateY(0)" },
|
||||
],
|
||||
{
|
||||
duration: 180,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
},
|
||||
);
|
||||
expect(screen.getByRole("button", { name: "Beta project" })
|
||||
.closest("[data-sidebar-group-header]"))
|
||||
.toHaveAttribute("data-sidebar-group-header", "project:/Users/me/beta");
|
||||
});
|
||||
|
||||
it("hides the updated dot for the active chat", () => {
|
||||
const sessions = [
|
||||
session({
|
||||
|
||||
@@ -314,6 +314,51 @@ describe("PaneWorkbench", () => {
|
||||
await waitFor(() => expect(animate).toHaveBeenCalledTimes(4));
|
||||
});
|
||||
|
||||
it("keeps a retargeted pane surface in the same physical motion", async () => {
|
||||
const common = {
|
||||
layout: "columns" as const,
|
||||
showLayoutControl: false,
|
||||
onActivatePane: vi.fn(),
|
||||
onAddPane: vi.fn(),
|
||||
onLayoutChange: vi.fn(),
|
||||
onPaneOrderChange: vi.fn(),
|
||||
renderPane: (pane: { title: string }) => <span>{pane.title}</span>,
|
||||
};
|
||||
const { rerender } = render(
|
||||
<PaneWorkbench
|
||||
{...common}
|
||||
panes={[
|
||||
{ key: "alpha", reactKey: "tab-root", title: "Alpha" },
|
||||
{ key: "beta", reactKey: "pane:beta", title: "Beta" },
|
||||
]}
|
||||
activePaneKey="alpha"
|
||||
/>,
|
||||
);
|
||||
animate.mockClear();
|
||||
|
||||
rerender(
|
||||
<PaneWorkbench
|
||||
{...common}
|
||||
panes={[
|
||||
{ key: "beta", reactKey: "pane:beta", title: "Beta" },
|
||||
{ key: "gamma", reactKey: "tab-root", title: "Gamma" },
|
||||
]}
|
||||
activePaneKey="gamma"
|
||||
/>,
|
||||
);
|
||||
|
||||
await waitFor(() => expect(animate).toHaveBeenCalledWith(
|
||||
[
|
||||
{ transform: "translate(-500px, 0px) scale(1, 1)" },
|
||||
{ transform: "translate(0, 0) scale(1, 1)" },
|
||||
],
|
||||
{
|
||||
duration: 260,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
},
|
||||
));
|
||||
});
|
||||
|
||||
it("renders only the active pane and hides workbench controls on mobile", () => {
|
||||
vi.stubGlobal("matchMedia", vi.fn((query: string) => ({
|
||||
matches: query.includes("max-width: 767px"),
|
||||
|
||||
@@ -1326,54 +1326,21 @@ describe("ThreadComposer", () => {
|
||||
expect(screen.getByLabelText("Paste path")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows turn run timer when runStartedAt is set", () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date((1_000 + 125) * 1000));
|
||||
|
||||
render(
|
||||
<ThreadComposer
|
||||
onSend={vi.fn()}
|
||||
placeholder="Type your message..."
|
||||
runStartedAt={1000}
|
||||
/>,
|
||||
);
|
||||
|
||||
const status = screen.getByRole("status");
|
||||
expect(status).toHaveTextContent(/Running/);
|
||||
expect(status).toHaveTextContent(/2:05/);
|
||||
expect(status).toHaveClass("composer-status-drawer-content");
|
||||
expect(status.closest("[data-composer-status-drawer]")).toHaveAttribute(
|
||||
"data-state",
|
||||
"open",
|
||||
);
|
||||
expect(status.querySelector(".run-pulse-icon")).not.toBeNull();
|
||||
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it("opens and closes the run timer through one persistent drawer", () => {
|
||||
it("closes the sustained goal through its existing drawer", () => {
|
||||
const { container, rerender } = render(
|
||||
<ThreadComposer
|
||||
onSend={vi.fn()}
|
||||
placeholder="Type your message..."
|
||||
runStartedAt={null}
|
||||
goalState={{
|
||||
active: true,
|
||||
objective: "Ship the release",
|
||||
ui_summary: "Preparing release",
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
const drawer = container.querySelector("[data-composer-status-drawer]");
|
||||
expect(drawer).not.toBeNull();
|
||||
expect(drawer).toHaveAttribute("data-state", "closed");
|
||||
expect(drawer).toHaveAttribute("aria-hidden", "true");
|
||||
|
||||
rerender(
|
||||
<ThreadComposer
|
||||
onSend={vi.fn()}
|
||||
placeholder="Type your message..."
|
||||
runStartedAt={Math.floor(Date.now() / 1000)}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(container.querySelector("[data-composer-status-drawer]")).toBe(drawer);
|
||||
expect(drawer).toHaveAttribute("data-state", "open");
|
||||
expect(drawer).not.toHaveAttribute("aria-hidden");
|
||||
const status = screen.getByRole("status");
|
||||
@@ -1383,7 +1350,7 @@ describe("ThreadComposer", () => {
|
||||
<ThreadComposer
|
||||
onSend={vi.fn()}
|
||||
placeholder="Type your message..."
|
||||
runStartedAt={null}
|
||||
goalState={{ active: false }}
|
||||
/>,
|
||||
);
|
||||
|
||||
@@ -1392,6 +1359,9 @@ describe("ThreadComposer", () => {
|
||||
expect(drawer).toHaveAttribute("aria-hidden", "true");
|
||||
expect(screen.queryByRole("status")).not.toBeInTheDocument();
|
||||
expect(drawer?.querySelector('[role="status"]')).toBe(status);
|
||||
|
||||
fireEvent.transitionEnd(drawer as Element, { propertyName: "grid-template-rows" });
|
||||
expect(container.querySelector("[data-composer-status-drawer]")).toBeNull();
|
||||
});
|
||||
|
||||
it("opens an upward anchored goal panel with markdown content when expand is clicked", async () => {
|
||||
|
||||
@@ -16,6 +16,54 @@ afterEach(() => {
|
||||
});
|
||||
|
||||
describe("ThreadMessages", () => {
|
||||
it("shows optimistic turn progress in the thread before the first agent output", () => {
|
||||
vi.useFakeTimers();
|
||||
const now = new Date("2026-08-13T10:00:05.000Z").getTime();
|
||||
vi.setSystemTime(now);
|
||||
const prompt: UIMessage = {
|
||||
id: "u-optimistic",
|
||||
role: "user",
|
||||
content: "check this",
|
||||
turnId: "turn-optimistic",
|
||||
turnPhase: "user",
|
||||
deliveryStatus: "sending",
|
||||
createdAt: now - 5_000,
|
||||
};
|
||||
const { rerender } = render(
|
||||
<ThreadMessages
|
||||
messages={[prompt]}
|
||||
isStreaming
|
||||
activeTurnId="turn-optimistic"
|
||||
runStartedAt={(now - 5_000) / 1000}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("status", { name: "Thinking for 5s" })).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ThreadMessages
|
||||
messages={[
|
||||
{ ...prompt, deliveryStatus: "accepted" },
|
||||
{
|
||||
id: "t-optimistic",
|
||||
role: "tool",
|
||||
kind: "trace",
|
||||
content: "web_search()",
|
||||
traces: ["web_search()"],
|
||||
turnId: "turn-optimistic",
|
||||
turnPhase: "activity",
|
||||
createdAt: now,
|
||||
},
|
||||
]}
|
||||
isStreaming
|
||||
activeTurnId="turn-optimistic"
|
||||
runStartedAt={(now - 5_000) / 1000}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("button", { name: "Working for 5s" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not move a mounted tail answer into offscreen rendering on the next turn", () => {
|
||||
const completed: UIMessage[] = [
|
||||
{ id: "u1", role: "user", content: "question", createdAt: 1 },
|
||||
|
||||
@@ -120,6 +120,31 @@ describe("ThreadMotionCoordinator", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("reconciles observed layout growth before the next paint", () => {
|
||||
const {
|
||||
camera,
|
||||
coordinator,
|
||||
frames,
|
||||
scheduler,
|
||||
advanceFrame,
|
||||
setGeometry,
|
||||
} = motionHarness();
|
||||
|
||||
coordinator.resumeAutoFollow();
|
||||
advanceFrame();
|
||||
camera.jumpTo.mockClear();
|
||||
scheduler.cancel.mockClear();
|
||||
|
||||
setGeometry({ scrollTop: 1_400, scrollHeight: 2_054 });
|
||||
coordinator.invalidateGeometry();
|
||||
coordinator.reconcileObservedGeometry();
|
||||
|
||||
expect(camera.jumpTo).toHaveBeenCalledWith(1_554);
|
||||
expect(scheduler.cancel).toHaveBeenCalledTimes(1);
|
||||
expect(frames).toHaveLength(0);
|
||||
expect(coordinator.snapshot()).toMatchObject({ measurementPending: false });
|
||||
});
|
||||
|
||||
it("pins repeated output growth on each authoritative geometry frame", () => {
|
||||
const {
|
||||
camera,
|
||||
|
||||
@@ -241,6 +241,10 @@ describe("ThreadViewport", () => {
|
||||
takeUserControl.mockClear();
|
||||
fireEvent.keyDown(disclosure, { key: "Enter" });
|
||||
expect(takeUserControl).toHaveBeenCalledTimes(1);
|
||||
|
||||
takeUserControl.mockClear();
|
||||
fireEvent.keyDown(disclosure, { key: " " });
|
||||
expect(takeUserControl).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("top-aligns short threads in the message rendering area", () => {
|
||||
@@ -653,7 +657,7 @@ describe("ThreadViewport", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("coalesces streamed layout growth into frame-driven camera targets", async () => {
|
||||
it("settles observed streamed layout growth before paint", async () => {
|
||||
const resizeObserver = stubResizeObserver();
|
||||
const followTo = vi.spyOn(ThreadCameraController.prototype, "followTo")
|
||||
.mockReturnValue("started");
|
||||
@@ -740,10 +744,7 @@ describe("ThreadViewport", () => {
|
||||
});
|
||||
act(() => {
|
||||
contentObserver!.callback([], contentObserver as unknown as ResizeObserver);
|
||||
contentObserver!.callback([], contentObserver as unknown as ResizeObserver);
|
||||
});
|
||||
expect(followTo).not.toHaveBeenCalled();
|
||||
await flushAnimationFrame();
|
||||
expect(followTo).toHaveBeenCalledTimes(1);
|
||||
expect(followTo).toHaveBeenLastCalledWith(1448);
|
||||
followTo.mockClear();
|
||||
@@ -1959,6 +1960,12 @@ describe("ThreadViewport", () => {
|
||||
it("waits for the next conversation's transcript before restoring its bottom", async () => {
|
||||
const jumpTo = vi.spyOn(ThreadCameraController.prototype, "jumpTo");
|
||||
const followTo = vi.spyOn(ThreadCameraController.prototype, "followTo");
|
||||
const handoffAnimation = {
|
||||
cancel: vi.fn(),
|
||||
oncancel: null,
|
||||
onfinish: null,
|
||||
} as unknown as Animation;
|
||||
const animate = vi.fn(() => handoffAnimation);
|
||||
const oldMessages: UIMessage[] = [
|
||||
{
|
||||
id: "old-user",
|
||||
@@ -1998,6 +2005,7 @@ describe("ThreadViewport", () => {
|
||||
scrollHeight: { configurable: true, value: 2400 },
|
||||
clientHeight: { configurable: true, value: 600 },
|
||||
scrollTop: { configurable: true, writable: true, value: 300 },
|
||||
animate: { configurable: true, value: animate },
|
||||
});
|
||||
jumpTo.mockClear();
|
||||
|
||||
@@ -2013,6 +2021,14 @@ describe("ThreadViewport", () => {
|
||||
);
|
||||
expect(scroller.scrollTop).toBe(300);
|
||||
expect(jumpTo).not.toHaveBeenCalled();
|
||||
expect(animate).toHaveBeenCalledWith(
|
||||
[{ opacity: 1 }, { opacity: 0.82 }],
|
||||
{
|
||||
duration: 80,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
fill: "forwards",
|
||||
},
|
||||
);
|
||||
|
||||
Object.defineProperty(scroller, "scrollHeight", {
|
||||
configurable: true,
|
||||
@@ -2033,6 +2049,17 @@ describe("ThreadViewport", () => {
|
||||
await flushAnimationFrame();
|
||||
expect(jumpTo.mock.calls).toEqual([[2400]]);
|
||||
expect(followTo).toHaveBeenCalledWith(2400);
|
||||
expect(handoffAnimation.cancel).toHaveBeenCalled();
|
||||
expect(animate).toHaveBeenCalledWith(
|
||||
[{ opacity: 0.82 }, { opacity: 1 }],
|
||||
{
|
||||
duration: 140,
|
||||
easing: "cubic-bezier(0.2, 0, 0, 1)",
|
||||
},
|
||||
);
|
||||
expect(jumpTo.mock.invocationCallOrder[0]).toBeLessThan(
|
||||
animate.mock.invocationCallOrder[1],
|
||||
);
|
||||
});
|
||||
|
||||
it("waits for hydrated messages before fulfilling open-chat bottom scroll", async () => {
|
||||
|
||||
Reference in New Issue
Block a user