Skip to content

Commit 8c81553

Browse files
jahoomajahooma
committed
Fix inconsistent spacing!
1 parent 35d7186 commit 8c81553

File tree

8 files changed

+15
-71
lines changed

8 files changed

+15
-71
lines changed

‎cli/src/components/blocks/agent-block-grid.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export const AgentBlockGrid = memo(
4141
availableWidth={availableWidth}
4242
getItemKey={getItemKey}
4343
renderItem={renderItem}
44-
marginTop={1}
4544
/>
4645
)
4746
},

‎cli/src/components/blocks/agent-branch-item.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
125125
if (React.isValidElement(value)) {
126126
if (value.key === null || value.key === undefined) {
127127
return (
128-
<box key="expanded-node" style={{ flexDirection: 'column', gap: 0 }}>
128+
<box key="expanded-node" style={{ flexDirection: 'column', gap: 1 }}>
129129
{value}
130130
</box>
131131
)
@@ -135,7 +135,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
135135

136136
if (Array.isArray(value)) {
137137
return (
138-
<box key="expanded-array" style={{ flexDirection: 'column', gap: 0 }}>
138+
<box key="expanded-array" style={{ flexDirection: 'column', gap: 1 }}>
139139
{value.map((child, idx) => (
140140
<box
141141
key={`expanded-array-${idx}`}
@@ -149,7 +149,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
149149
}
150150

151151
return (
152-
<box key="expanded-unknown" style={{ flexDirection: 'column', gap: 0 }}>
152+
<box key="expanded-unknown" style={{ flexDirection: 'column', gap: 1 }}>
153153
{value}
154154
</box>
155155
)

‎cli/src/components/blocks/agent-branch-wrapper.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { useTheme } from '../../hooks/use-theme'
1818
import { useChatStore } from '../../state/chat-store'
1919
import { isTextBlock } from '../../types/chat'
2020
import { getAgentStatusInfo } from '../../utils/agent-helpers'
21-
import { extractHtmlBlockMargins } from '../../utils/block-margins'
2221
import {
2322
processBlocks,
2423
type BlockProcessorHandlers,
@@ -250,9 +249,10 @@ const AgentBody = memo(
250249
const filteredNestedContent = isNestedStreamingText
251250
? trimNewlines(textBlock.content)
252251
: textBlock.content.trim()
252+
if (!filteredNestedContent) {
253+
return null
254+
}
253255
const markdownOptionsForLevel = p.getAgentMarkdownOptions(0)
254-
const marginTop = textBlock.marginTop ?? 0
255-
const marginBottom = textBlock.marginBottom ?? 0
256256
const explicitColor = textBlock.color
257257
const nestedTextColor = explicitColor ?? p.theme.foreground
258258

@@ -262,8 +262,6 @@ const AgentBody = memo(
262262
style={{
263263
wrapMode: 'word',
264264
fg: nestedTextColor,
265-
marginTop,
266-
marginBottom,
267265
}}
268266
>
269267
<ContentWithMarkdown
@@ -278,17 +276,13 @@ const AgentBody = memo(
278276

279277
if (block.type === 'html') {
280278
const htmlBlock = block as HtmlContentBlock
281-
const { marginTop, marginBottom } =
282-
extractHtmlBlockMargins(htmlBlock)
283279

284280
return (
285281
<box
286282
key={`${p.keyPrefix}-html-${index}`}
287283
style={{
288284
flexDirection: 'column',
289285
gap: 0,
290-
marginTop,
291-
marginBottom,
292286
}}
293287
>
294288
{htmlBlock.render({
@@ -390,7 +384,6 @@ export const AgentBranchWrapper = memo(
390384
flexDirection: 'column',
391385
gap: 0,
392386
width: '100%',
393-
marginTop: 1,
394387
}}
395388
>
396389
<text style={{ wrapMode: 'word' }}>

‎cli/src/components/blocks/image-block.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const ImageBlock = memo(({ block, availableWidth }: ImageBlockProps) => {
6262
if (inlineSequence) {
6363
// Render inline image using terminal escape sequence
6464
return (
65-
<box style={{ flexDirection: 'column', gap: 0, marginTop: 1, marginBottom: 1 }}>
65+
<box style={{ flexDirection: 'column', gap: 0 }}>
6666
{/* Image caption/metadata */}
6767
<text style={{ wrapMode: 'none', fg: theme.muted }}>
6868
<span attributes={TextAttributes.DIM}>📷 </span>
@@ -84,8 +84,6 @@ export const ImageBlock = memo(({ block, availableWidth }: ImageBlockProps) => {
8484
style={{
8585
flexDirection: 'column',
8686
gap: 0,
87-
marginTop: 1,
88-
marginBottom: 1,
8987
paddingLeft: 1,
9088
borderStyle: 'single',
9189
borderColor: theme.border,

‎cli/src/components/blocks/single-block.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { ContentWithMarkdown } from './content-with-markdown'
99
import { ImageBlock } from './image-block'
1010
import { UserBlockTextWithInlineCopy } from './user-content-copy'
1111
import { useTheme } from '../../hooks/use-theme'
12-
import { extractTextBlockMargins, extractHtmlBlockMargins } from '../../utils/block-margins'
1312
import { PlanBox } from '../renderers/plan-box'
1413

1514
import type {
@@ -70,9 +69,10 @@ export const SingleBlock = memo(
7069
const filteredContent = isStreamingText
7170
? trimNewlines(textBlock.content)
7271
: textBlock.content.trim()
72+
if (!filteredContent) {
73+
return null
74+
}
7375
const renderKey = `${messageId}-text-${idx}`
74-
const prevBlock = idx > 0 && blocks ? blocks[idx - 1] : null
75-
const { marginTop, marginBottom } = extractTextBlockMargins(textBlock, prevBlock)
7676
const explicitColor = textBlock.color
7777
const blockTextColor = explicitColor ?? textColor
7878

@@ -86,8 +86,8 @@ export const SingleBlock = memo(
8686
textColor={blockTextColor}
8787
codeBlockWidth={codeBlockWidth}
8888
palette={markdownPalette}
89-
marginTop={marginTop}
90-
marginBottom={marginBottom}
89+
marginTop={0}
90+
marginBottom={0}
9191
/>
9292
)
9393
}
@@ -98,8 +98,6 @@ export const SingleBlock = memo(
9898
style={{
9999
wrapMode: 'word',
100100
fg: blockTextColor,
101-
marginTop,
102-
marginBottom,
103101
}}
104102
attributes={isUser ? TextAttributes.ITALIC : undefined}
105103
>
@@ -129,15 +127,12 @@ export const SingleBlock = memo(
129127
}
130128

131129
case 'html': {
132-
const { marginTop, marginBottom } = extractHtmlBlockMargins(block)
133130
return (
134131
<box
135132
key={`${messageId}-html-${idx}`}
136133
style={{
137134
flexDirection: 'column',
138135
gap: 0,
139-
marginTop,
140-
marginBottom,
141136
width: '100%',
142137
}}
143138
>

‎cli/src/components/blocks/tool-block-group.tsx‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,20 @@ interface ToolBlockGroupProps {
99
toolBlocks: Extract<ContentBlock, { type: 'tool' }>[]
1010
keyPrefix: string
1111
startIndex: number
12+
/** @deprecated No longer used for margin calculation */
1213
nextIndex: number
14+
/** @deprecated No longer used for margin calculation */
1315
siblingBlocks: ContentBlock[]
1416
availableWidth: number
1517
onToggleCollapsed: (id: string) => void
1618
markdownPalette: MarkdownPalette
1719
}
1820

19-
const isRenderableTimelineBlock = (
20-
block: ContentBlock | null | undefined,
21-
): boolean => {
22-
if (!block) {
23-
return false
24-
}
25-
26-
if (block.type === 'tool') {
27-
return block.toolName !== 'end_turn'
28-
}
29-
30-
switch (block.type) {
31-
case 'text':
32-
case 'html':
33-
case 'agent':
34-
case 'agent-list':
35-
case 'plan':
36-
case 'mode-divider':
37-
case 'ask-user':
38-
case 'image':
39-
return true
40-
default:
41-
return false
42-
}
43-
}
44-
4521
export const ToolBlockGroup = memo(
4622
({
4723
toolBlocks,
4824
keyPrefix,
4925
startIndex,
50-
nextIndex,
51-
siblingBlocks,
5226
availableWidth,
5327
onToggleCollapsed,
5428
markdownPalette,
@@ -68,24 +42,12 @@ export const ToolBlockGroup = memo(
6842

6943
if (groupNodes.length === 0) return null
7044

71-
const hasRenderableBefore =
72-
startIndex > 0 && isRenderableTimelineBlock(siblingBlocks[startIndex - 1])
73-
let hasRenderableAfter = false
74-
for (let i = nextIndex; i < siblingBlocks.length; i++) {
75-
if (isRenderableTimelineBlock(siblingBlocks[i])) {
76-
hasRenderableAfter = true
77-
break
78-
}
79-
}
80-
8145
return (
8246
<box
8347
key={`${keyPrefix}-tool-group-${startIndex}`}
8448
style={{
8549
flexDirection: 'column',
8650
gap: 0,
87-
marginTop: hasRenderableBefore ? 1 : 0,
88-
marginBottom: hasRenderableAfter ? 1 : 0,
8951
}}
9052
>
9153
{groupNodes}

‎cli/src/components/message-block.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -264,9 +264,8 @@ export const MessageBlock = memo(({
264264
<box
265265
style={{
266266
flexDirection: 'column',
267-
gap: 0,
267+
gap: 1,
268268
width: '100%',
269-
paddingTop: 0,
270269
}}
271270
>
272271
<BlocksRenderer

‎cli/src/components/thinking.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,6 @@ export const Thinking = memo(
6565
style={{
6666
flexDirection: 'column',
6767
gap: 0,
68-
marginTop: 0,
69-
marginBottom: 0,
7068
}}
7169
onClick={onToggle}
7270
>

0 commit comments

Comments
 (0)