Fix stream action spacing branches

This commit is contained in:
Mohamed Boudra
2026-04-22 15:49:00 +07:00
parent e4badd95f4
commit 6601db2673
2 changed files with 46 additions and 28 deletions
@@ -89,20 +89,33 @@ const isSameAssistantBlockGroup = (params: {
params.item.blockGroupId !== undefined && params.item.blockGroupId !== undefined &&
params.item.blockGroupId === params.other.blockGroupId; params.item.blockGroupId === params.other.blockGroupId;
const isAssistantBlockFragment = (params: { const getAssistantBlockSpacing = (params: {
item: StreamItem; item: StreamItem;
aboveItem: StreamItem | null | undefined; aboveItem: StreamItem | null | undefined;
belowItem: StreamItem | null | undefined; belowItem: StreamItem | null | undefined;
}) => }): "default" | "compactTop" | "compactBottom" | "compactBoth" => {
params.item.kind === "assistant_message" && if (params.item.kind !== "assistant_message") {
(isSameAssistantBlockGroup({ return "default";
}
const compactTop = isSameAssistantBlockGroup({
item: params.item, item: params.item,
other: params.aboveItem, other: params.aboveItem,
}) || });
isSameAssistantBlockGroup({ const compactBottom = isSameAssistantBlockGroup({
item: params.item, item: params.item,
other: params.belowItem, other: params.belowItem,
})); });
if (compactTop && compactBottom) {
return "compactBoth";
}
if (compactTop) {
return "compactTop";
}
if (compactBottom) {
return "compactBottom";
}
return "default";
};
export interface AgentStreamViewHandle { export interface AgentStreamViewHandle {
scrollToBottom(reason?: BottomAnchorLocalRequest["reason"]): void; scrollToBottom(reason?: BottomAnchorLocalRequest["reason"]): void;
prepareForViewportChange(): void; prepareForViewportChange(): void;
@@ -373,13 +386,11 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
index, index,
relation: "below", relation: "below",
}); });
const spacing = isAssistantBlockFragment({ const spacing = getAssistantBlockSpacing({
item, item,
aboveItem, aboveItem,
belowItem, belowItem,
}) });
? "compact"
: "default";
return ( return (
<AssistantMessage <AssistantMessage
message={item.text} message={item.text}
@@ -518,12 +529,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
return ( return (
<View style={[stylesheet.streamItemWrapper, { marginBottom: gapBelow }]}> <View style={[stylesheet.streamItemWrapper, { marginBottom: gapBelow }]}>
{content} {content}
{isEndOfAssistantTurn ? ( {isEndOfAssistantTurn ? <TurnCopyButton getContent={getTurnContent} /> : null}
<TurnCopyButton
getContent={getTurnContent}
containerStyle={stylesheet.assistantTurnCopyButton}
/>
) : null}
</View> </View>
); );
}, },
@@ -636,7 +642,11 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
<View <View
style={[ style={[
stylesheet.listHeaderContent, stylesheet.listHeaderContent,
boundary.hasLiveHead ? { paddingTop: looseGap } : null, boundary.hasLiveHead
? streamRenderStrategy.getFlatListInverted()
? { paddingBottom: looseGap }
: { paddingTop: looseGap }
: null,
]} ]}
> >
{auxiliary.pendingPermissions} {auxiliary.pendingPermissions}
@@ -644,7 +654,13 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
</View> </View>
</View> </View>
); );
}, [auxiliary.pendingPermissions, auxiliary.workingIndicator, boundary.hasLiveHead, looseGap]); }, [
auxiliary.pendingPermissions,
auxiliary.workingIndicator,
boundary.hasLiveHead,
looseGap,
streamRenderStrategy,
]);
const renderers = useMemo<StreamSegmentRenderers>( const renderers = useMemo<StreamSegmentRenderers>(
() => ({ () => ({
@@ -1049,9 +1065,6 @@ const stylesheet = StyleSheet.create((theme) => ({
listHeaderContent: { listHeaderContent: {
gap: theme.spacing[3], gap: theme.spacing[3],
}, },
assistantTurnCopyButton: {
marginTop: theme.spacing[3],
},
bottomBarWrapper: { bottomBarWrapper: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
+9 -4
View File
@@ -433,7 +433,7 @@ interface AssistantMessageProps {
serverId?: string; serverId?: string;
client?: DaemonClient | null; client?: DaemonClient | null;
disableOuterSpacing?: boolean; disableOuterSpacing?: boolean;
spacing?: "default" | "compact"; spacing?: "default" | "compactTop" | "compactBottom" | "compactBoth";
} }
export const assistantMessageStylesheet = StyleSheet.create((theme) => ({ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
@@ -441,8 +441,10 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[2], paddingHorizontal: theme.spacing[2],
paddingVertical: theme.spacing[3], paddingVertical: theme.spacing[3],
}, },
containerCompactVertical: { containerCompactTop: {
paddingTop: 0, paddingTop: 0,
},
containerCompactBottom: {
paddingBottom: 0, paddingBottom: 0,
}, },
containerSpacing: { containerSpacing: {
@@ -1107,7 +1109,7 @@ export const AssistantMessage = memo(function AssistantMessage({
}: AssistantMessageProps) { }: AssistantMessageProps) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const resolvedDisableOuterSpacing = useDisableOuterSpacing( const resolvedDisableOuterSpacing = useDisableOuterSpacing(
disableOuterSpacing ?? spacing === "compact", disableOuterSpacing ?? spacing !== "default",
); );
const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]); const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
@@ -1309,7 +1311,10 @@ export const AssistantMessage = memo(function AssistantMessage({
testID="assistant-message" testID="assistant-message"
style={[ style={[
assistantMessageStylesheet.container, assistantMessageStylesheet.container,
spacing === "compact" && assistantMessageStylesheet.containerCompactVertical, (spacing === "compactTop" || spacing === "compactBoth") &&
assistantMessageStylesheet.containerCompactTop,
(spacing === "compactBottom" || spacing === "compactBoth") &&
assistantMessageStylesheet.containerCompactBottom,
!resolvedDisableOuterSpacing && assistantMessageStylesheet.containerSpacing, !resolvedDisableOuterSpacing && assistantMessageStylesheet.containerSpacing,
]} ]}
> >