puter/paseo
1
0
Fork 0
mirror of https://github.com/getpaseo/paseo.git synced 2026-07-29 12:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix user→tool call spacing in timeline

Browse Source
This commit is contained in:
Mohamed Boudra
2026-02-04 11:23:49 +07:00
parent 6fbc09de2c
commit cec9e3b42b
1 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/app/src/components/agent-stream-view.tsx
View File

@@ -212,37 +212,46 @@ export function AgentStreamView({
const tightGap = theme.spacing[1]; // 4px
const looseGap = theme.spacing[4]; // 16px
// In inverted lists, marginBottom renders as visual gap ABOVE the item.
// Index 0 is visually at the bottom, so use the item ABOVE (index + 1) to compute spacing.
const getGapAbove = useCallback(
// The FlatList is inverted, but each row is re-inverted by RN, so `marginBottom` still
// manifests as the gap *below* the row in the final visual layout. Compute spacing
// against the item visually below (index - 1 in our inverted list).
const getGapBelow = useCallback(
(item: StreamItem, index: number) => {
const aboveItem = flatListData[index + 1];
if (!aboveItem) {
// This is the topmost item; nothing above it visually.
const belowItem = flatListData[index - 1];
if (!belowItem) {
// This is the bottommost (newest) item; nothing below it visually.
return 0;
}
// Same type groups get tight gap (4px)
if (isUserMessageItem(item) && isUserMessageItem(aboveItem)) {
if (isUserMessageItem(item) && isUserMessageItem(belowItem)) {
return tightGap;
}
if (isToolSequenceItem(item) && isToolSequenceItem(aboveItem)) {
if (isToolSequenceItem(item) && isToolSequenceItem(belowItem)) {
return tightGap;
}
// Keep tool sequences visually connected to the preceding user message / tasks.
// Give user messages more breathing room before tool sequences.
if (item.kind === "user_message" && isToolSequenceItem(belowItem)) {
return looseGap;
}
// Keep tool sequences visually connected to the preceding user/assistant message.
if (
isToolSequenceItem(item) &&
(aboveItem.kind === "user_message" ||
aboveItem.kind === "assistant_message" ||
aboveItem.kind === "todo_list")
(item.kind === "user_message" || item.kind === "assistant_message") &&
isToolSequenceItem(belowItem)
) {
return tightGap;
}
// And keep assistant messages visually connected to tool sequences (symmetry).
if (item.kind === "assistant_message" && isToolSequenceItem(aboveItem)) {
// Keep todo lists visually connected to the following tool sequence (symmetry).
if (item.kind === "todo_list" && isToolSequenceItem(belowItem)) {
return tightGap;
}
// Keep tool sequences visually connected to the assistant response (symmetry).
if (isToolSequenceItem(item) && belowItem.kind === "assistant_message") {
return tightGap;
}
@@ -380,7 +389,7 @@ export function AgentStreamView({
return null;
}
const gapAbove = getGapAbove(item, index);
const gapBelow = getGapBelow(item, index);
// Check if this is the end of a turn (before a user message or end of stream when not running)
// In inverted list: index-1 is the next item (newer in time)
@@ -393,14 +402,14 @@ export function AgentStreamView({
const getContent = () => collectTurnContent(index);
return (
<View style={[stylesheet.streamItemWrapper, { marginBottom: gapAbove }]}>
<View style={[stylesheet.streamItemWrapper, { marginBottom: gapBelow }]}>
{content}
{isEndOfTurn ? <TurnCopyButton getContent={getContent} /> : null}
</View>
);
},
[
getGapAbove,
getGapBelow,
renderStreamItemContent,
flatListData,
agent.status,