cynarAI/evOo-local
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(web): increase transcript bottom padding when task pill is pinned above composer

Browse Source
This commit is contained in:
cynarAI 2026-10-22 16:36:44 +02:00
parent 95061c648f
commit 9a753e9adb
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/pages/shell/transcript.tsx
View File

@ -68,6 +68,7 @@ import {
ChartBlockView, ChartBlockView,
ChoiceCard, ChoiceCard,
ExternalLinksBar, ExternalLinksBar,
extractActivePlanState,
McpApprovalCard, McpApprovalCard,
PlanCard, PlanCard,
} from "./message-cards"; } from "./message-cards";
@ -296,6 +297,10 @@ export const Transcript = memo(function Transcript({
} }
return { absorbed, stepsByPlanMsgId }; return { absorbed, stepsByPlanMsgId };
}, [coalescedMessages, runNarration.steps]); }, [coalescedMessages, runNarration.steps]);
const hasActivePlanPill = useMemo(
() => Boolean(extractActivePlanState(coalescedMessages, running, runStartedAt)),
[coalescedMessages, running, runStartedAt],
);
const trailingAnsweringBots = useMemo(() => { const trailingAnsweringBots = useMemo(() => {
const liveProgressMessages = coalescedMessages.filter( const liveProgressMessages = coalescedMessages.filter(
(message) => !runNarration.hidden.has(message.id) && message.id.startsWith("progress:"), (message) => !runNarration.hidden.has(message.id) && message.id.startsWith("progress:"),
@ -538,7 +543,7 @@ export const Transcript = memo(function Transcript({
useLayoutEffect(() => { useLayoutEffect(() => {
if (following.current) snapToEnd(); if (following.current) snapToEnd();
}, [messages, running, snapToEnd]); }, [messages, running, hasActivePlanPill, snapToEnd]);
// A question the bot waits on can scroll out of view; offer a way back to it instead of the arrow. // A question the bot waits on can scroll out of view; offer a way back to it instead of the arrow.
const [askOffscreen, setAskOffscreen] = useState(false); const [askOffscreen, setAskOffscreen] = useState(false);
@ -666,8 +671,8 @@ export const Transcript = memo(function Transcript({
) : null} ) : null}
<div <div
className={`mx-auto flex w-full flex-1 flex-col ${ className={`mx-auto flex w-full flex-1 flex-col ${
encounterMode ? "max-w-2xl gap-3 pb-28 md:pb-32" : "max-w-4xl gap-6 pb-28 md:pb-32" encounterMode ? "max-w-2xl gap-3" : "max-w-4xl gap-6"
}`} } ${hasActivePlanPill ? "pb-48 md:pb-52" : "pb-28 md:pb-32"}`}
> >
{coalescedMessages.map((message) => { {coalescedMessages.map((message) => {
if (runNarration.hidden.has(message.id)) return null; if (runNarration.hidden.has(message.id)) return null;
@ -923,7 +928,9 @@ export const Transcript = memo(function Transcript({
aria-hidden={!showJumpToLatest} aria-hidden={!showJumpToLatest}
tabIndex={showJumpToLatest ? 0 : -1} tabIndex={showJumpToLatest ? 0 : -1}
onClick={jumpToLatest} onClick={jumpToLatest}
className={`absolute bottom-24 left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border md:bottom-28 motion-reduce:transition-none ${ className={`absolute left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border motion-reduce:transition-none ${
hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
} ${
showJumpToLatest showJumpToLatest
? "translate-y-0 opacity-100" ? "translate-y-0 opacity-100"
: "pointer-events-none translate-y-2 opacity-0" : "pointer-events-none translate-y-2 opacity-0"
@ -936,7 +943,9 @@ export const Transcript = memo(function Transcript({
type="button" type="button"
data-testid="needs-you-jump" data-testid="needs-you-jump"
onClick={jumpToAsk} onClick={jumpToAsk}
className="absolute bottom-24 left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border md:bottom-28" className={`absolute left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border ${
hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
}`}
> >
<span aria-hidden="true" className="size-2 rounded-full bg-warning" /> <span aria-hidden="true" className="size-2 rounded-full bg-warning" />
{t`Needs you`} {t`Needs you`}