Skip to content

Commit ddad28c

Browse files
brandonkachenbrandonkachen
committed
fix: clean up agent toggle ui
1 parent 6253496 commit ddad28c

File tree

6 files changed

+100
-46
lines changed

6 files changed

+100
-46
lines changed

‎cli/src/chat.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,12 +254,15 @@ export const App = ({
254254
? theme.chromeText
255255
: theme.agentResponseCount
256256

257+
const logoColor =
258+
resolvedThemeName === 'dark' ? '#4ade80' : '#15803d'
259+
257260
const buildBlocks = (listId: string): ContentBlock[] => {
258261
const result: ContentBlock[] = [
259262
{
260263
type: 'text',
261264
content: '\n\n' + LOGO_BLOCK,
262-
color: theme.agentToggleExpandedBg,
265+
color: logoColor,
263266
},
264267
]
265268

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

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@ export const BranchItem = ({
9090
? `${statusLabel} ${statusIndicator}`
9191
: `${statusIndicator} ${statusLabel}`
9292
: null
93+
const showCollapsedPreview =
94+
(isStreaming && !!streamingPreview) ||
95+
(!isStreaming && !!finishedPreview)
9396

9497
const isTextRenderable = (value: ReactNode): boolean => {
9598
if (value === null || value === undefined || typeof value === 'boolean') {
@@ -186,8 +189,9 @@ export const BranchItem = ({
186189
flexDirection: 'column',
187190
gap: 0,
188191
flexShrink: 0,
189-
marginTop: 1,
192+
marginTop: 0,
190193
marginBottom: 0,
194+
paddingBottom: 0,
191195
width: '100%',
192196
}}
193197
>
@@ -211,8 +215,8 @@ export const BranchItem = ({
211215
style={{
212216
flexDirection: 'column',
213217
gap: 0,
214-
paddingLeft: 1,
215-
paddingRight: 1,
218+
paddingLeft: 0,
219+
paddingRight: 0,
216220
paddingTop: 0,
217221
paddingBottom: 0,
218222
width: '100%',
@@ -235,7 +239,7 @@ export const BranchItem = ({
235239
paddingLeft: 1,
236240
paddingRight: 1,
237241
paddingTop: 0,
238-
paddingBottom: 0,
242+
paddingBottom: isCollapsed && !showCollapsedPreview ? 0 : 1,
239243
width: '100%',
240244
}}
241245
onMouseDown={onToggle}
@@ -262,13 +266,13 @@ export const BranchItem = ({
262266
</box>
263267

264268
{isCollapsed ? (
265-
(isStreaming && streamingPreview) || (!isStreaming && finishedPreview) ? (
269+
showCollapsedPreview ? (
266270
<box
267271
style={{
268-
paddingLeft: 1,
269-
paddingRight: 1,
272+
paddingLeft: 0,
273+
paddingRight: 0,
270274
paddingTop: 0,
271-
paddingBottom: 1,
275+
paddingBottom: 1,
272276
}}
273277
>
274278
<text
@@ -286,9 +290,9 @@ export const BranchItem = ({
286290
<box
287291
style={{
288292
flexDirection: 'column',
289-
gap: 1,
290-
paddingLeft: 1,
291-
paddingRight: 1,
293+
gap: 0,
294+
paddingLeft: 0,
295+
paddingRight: 0,
292296
paddingTop: 0,
293297
paddingBottom: 0,
294298
}}
@@ -301,7 +305,9 @@ export const BranchItem = ({
301305
marginBottom: content ? 1 : 0,
302306
}}
303307
>
304-
<text {...(headerFg ? { fg: headerFg } : undefined)}>Prompt</text>
308+
<text {...(headerFg ? { fg: headerFg } : undefined)}>
309+
Prompt
310+
</text>
305311
<text
306312
fg={resolveFg(theme.agentText)}
307313
style={{ wrapMode: 'word' }}
@@ -320,12 +326,19 @@ export const BranchItem = ({
320326
</box>
321327
)}
322328
{renderExpandedContent(content)}
323-
<box style={{ alignSelf: 'flex-end', marginTop: content ? 0 : 1 }}>
329+
<box
330+
style={{
331+
alignSelf: 'flex-end',
332+
marginTop: content ? 0 : 1,
333+
paddingRight: 1,
334+
paddingBottom: 0,
335+
marginBottom: 0,
336+
}}
337+
>
324338
<RaisedPill
325339
segments={[{ text: 'Collapse', fg: collapseButtonText }]}
326340
frameColor={collapseButtonFrame}
327341
textColor={collapseButtonText}
328-
padding={0}
329342
onPress={onToggle}
330343
/>
331344
</box>

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

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export const MessageBlock = ({
112112
indentLevel: number,
113113
keyPrefix: string,
114114
branchMeta: ToolBranchMeta,
115+
marginTop: number = 0,
115116
): React.ReactNode => {
116117
if (toolBlock.toolName === 'end_turn') {
117118
return null
@@ -186,7 +187,12 @@ export const MessageBlock = ({
186187
<box
187188
key={keyPrefix}
188189
ref={(el: any) => registerAgentRef(toolBlock.toolCallId, el)}
189-
style={{ flexDirection: 'column', gap: 0, marginLeft: indentationOffset }}
190+
style={{
191+
flexDirection: 'column',
192+
gap: 0,
193+
marginLeft: indentationOffset,
194+
marginTop,
195+
}}
190196
>
191197
<ToolItem
192198
name={displayInfo.name}
@@ -209,6 +215,7 @@ export const MessageBlock = ({
209215
agentBlock: Extract<ContentBlock, { type: 'agent' }>,
210216
indentLevel: number,
211217
keyPrefix: string,
218+
marginTop: number = 0,
212219
): React.ReactNode {
213220
const isCollapsed = collapsedAgents.has(agentBlock.agentId)
214221
const isStreaming =
@@ -217,7 +224,9 @@ export const MessageBlock = ({
217224
const allTextContent =
218225
agentBlock.blocks
219226
?.filter((nested) => nested.type === 'text')
220-
.map((nested) => (nested as any).content)
227+
.map((nested) =>
228+
trimTrailingNewlines(String((nested as any).content ?? '')),
229+
)
221230
.join('') || ''
222231
const lines = allTextContent.split('\n').filter((line) => line.trim())
223232
const firstLine = lines[0] || ''
@@ -259,7 +268,12 @@ export const MessageBlock = ({
259268
<box
260269
key={keyPrefix}
261270
ref={(el: any) => registerAgentRef(agentBlock.agentId, el)}
262-
style={{ flexDirection: 'column', gap: 0, marginLeft: indentationOffset }}
271+
style={{
272+
flexDirection: 'column',
273+
gap: 0,
274+
marginLeft: indentationOffset,
275+
marginTop,
276+
}}
263277
>
264278
<BranchItem
265279
name={agentBlock.agentName}
@@ -284,6 +298,7 @@ export const MessageBlock = ({
284298
function renderAgentListBranch(
285299
agentListBlock: Extract<ContentBlock, { type: 'agent-list' }>,
286300
keyPrefix: string,
301+
marginTop: number = 0,
287302
): React.ReactNode {
288303
const TRUNCATE_LIMIT = 5
289304
const isCollapsed = collapsedAgents.has(agentListBlock.id)
@@ -341,6 +356,7 @@ export const MessageBlock = ({
341356
<box
342357
key={keyPrefix}
343358
ref={(el: any) => registerAgentRef(agentListBlock.id, el)}
359+
style={{ marginTop }}
344360
>
345361
<BranchItem
346362
name={headerText}
@@ -367,18 +383,25 @@ export const MessageBlock = ({
367383
const nestedBlocks = agentBlock.blocks ?? []
368384
const nodes: React.ReactNode[] = []
369385
const toolBranchMetaMap = buildToolBranchMeta(nestedBlocks)
386+
const indentationOffset = indentLevel * 2
370387

371388
nestedBlocks.forEach((nestedBlock, nestedIdx) => {
389+
const nestedPrevBlock =
390+
nestedIdx > 0 ? nestedBlocks[nestedIdx - 1] : null
391+
const nestedMarginTop = nestedPrevBlock ? 1 : 0
372392
if (nestedBlock.type === 'text') {
373393
const nestedStatus =
374394
typeof (nestedBlock as any).status === 'string'
375395
? (nestedBlock as any).status
376396
: undefined
377397
const isNestedStreamingText =
378398
parentIsStreaming || nestedStatus === 'running'
399+
const sanitizedNestedContent = trimTrailingNewlines(
400+
String((nestedBlock as any).content ?? ''),
401+
)
379402
const rawNestedContent = isNestedStreamingText
380-
? trimTrailingNewlines(nestedBlock.content)
381-
: nestedBlock.content.trim()
403+
? sanitizedNestedContent
404+
: sanitizedNestedContent.trim()
382405
const renderKey = `${keyPrefix}-text-${nestedIdx}`
383406
const markdownOptionsForLevel = getAgentMarkdownOptions(indentLevel)
384407
const renderedContent = hasMarkdown(rawNestedContent)
@@ -388,7 +411,8 @@ export const MessageBlock = ({
388411
: rawNestedContent
389412
const nestedTextColor = resolveThemeColor(theme.agentText)
390413
const nestedTextStyle: Record<string, unknown> = {
391-
marginLeft: Math.max(0, indentLevel * 2),
414+
marginLeft: Math.max(0, indentationOffset),
415+
marginTop: nestedMarginTop,
392416
}
393417
if (nestedTextColor) {
394418
nestedTextStyle.fg = nestedTextColor
@@ -411,6 +435,7 @@ export const MessageBlock = ({
411435
indentLevel,
412436
`${keyPrefix}-tool-${nestedBlock.toolCallId}`,
413437
branchMeta,
438+
nestedMarginTop,
414439
),
415440
)
416441
} else if (nestedBlock.type === 'agent') {
@@ -419,6 +444,7 @@ export const MessageBlock = ({
419444
nestedBlock,
420445
indentLevel,
421446
`${keyPrefix}-agent-${nestedIdx}`,
447+
nestedMarginTop,
422448
),
423449
)
424450
}
@@ -452,22 +478,25 @@ export const MessageBlock = ({
452478
{blocks ? (
453479
<box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
454480
{blocks.map((block, idx) => {
481+
const prevBlock = idx > 0 ? blocks[idx - 1] : null
482+
const marginTop = prevBlock ? 1 : 0
455483
if (block.type === 'text') {
456484
const isStreamingText = isLoading || !isComplete
457485
const hasMarkdownContent = hasMarkdown(block.content)
486+
const sanitizedContent = trimTrailingNewlines(
487+
String(block.content ?? ''),
488+
)
458489
const rawContent = isStreamingText
459-
? trimTrailingNewlines(block.content)
490+
? sanitizedContent
460491
: hasMarkdownContent
461-
? block.content
462-
: block.content.trim()
492+
? sanitizedContent
493+
: sanitizedContent.trim()
463494
const renderKey = `${messageId}-text-${idx}`
464495
const renderedContent = hasMarkdownContent
465496
? isStreamingText
466497
? renderStreamingMarkdown(rawContent, markdownOptions)
467498
: renderMarkdown(rawContent, markdownOptions)
468499
: rawContent
469-
const prevBlock = idx > 0 ? blocks[idx - 1] : null
470-
const marginTop = prevBlock && prevBlock.type === 'text' ? 1 : 0
471500
const blockTextColor = resolveThemeColor(block.color, textColor)
472501
const blockStyle: Record<string, unknown> = { marginTop }
473502
if (blockTextColor) {
@@ -482,25 +511,31 @@ export const MessageBlock = ({
482511
{renderedContent}
483512
</text>
484513
)
485-
} else if (block.type === 'tool') {
486-
const branchMeta =
487-
topLevelToolMeta?.get(idx) ?? defaultToolBranchMeta
488-
return renderToolBranch(
489-
block,
490-
0,
491-
`${messageId}-tool-${block.toolCallId}`,
492-
branchMeta,
493-
)
494-
} else if (block.type === 'agent') {
514+
}
515+
if (block.type === 'tool') {
516+
const branchMeta =
517+
topLevelToolMeta?.get(idx) ?? defaultToolBranchMeta
518+
return renderToolBranch(
519+
block,
520+
0,
521+
`${messageId}-tool-${block.toolCallId}`,
522+
branchMeta,
523+
marginTop,
524+
)
525+
}
526+
if (block.type === 'agent') {
495527
return renderAgentBranch(
496528
block,
497529
0,
498530
`${messageId}-agent-${block.agentId}`,
531+
marginTop,
499532
)
500-
} else if (block.type === 'agent-list') {
533+
}
534+
if (block.type === 'agent-list') {
501535
return renderAgentListBranch(
502536
block,
503537
`${messageId}-agent-list-${block.id}`,
538+
marginTop,
504539
)
505540
}
506541
return null
@@ -509,9 +544,10 @@ export const MessageBlock = ({
509544
) : (
510545
(() => {
511546
const isStreamingMessage = isLoading || !isComplete
547+
const sanitizedContent = trimTrailingNewlines(content)
512548
const normalizedContent = isStreamingMessage
513-
? trimTrailingNewlines(content)
514-
: content.trim()
549+
? sanitizedContent
550+
: sanitizedContent.trim()
515551
const displayContent = hasMarkdown(normalizedContent)
516552
? isStreamingMessage
517553
? renderStreamingMarkdown(normalizedContent, markdownOptions)

‎cli/src/components/raised-pill.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const RaisedPill = ({
2727
frameColor,
2828
textColor,
2929
fillColor,
30-
padding = 1,
30+
padding = 2,
3131
onPress,
3232
style,
3333
}: RaisedPillProps): React.ReactNode => {

‎cli/src/components/tool-item.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ export const ToolItem = ({
114114
<box
115115
style={{
116116
flexDirection: 'row',
117-
paddingLeft: 1,
118-
paddingRight: 1,
117+
paddingLeft: 0,
118+
paddingRight: 0,
119119
paddingTop: 0,
120120
paddingBottom: 0,
121121
}}
@@ -139,8 +139,8 @@ export const ToolItem = ({
139139
style={{
140140
flexDirection: 'row',
141141
gap: 0,
142-
paddingLeft: 1,
143-
paddingRight: 1,
142+
paddingLeft: 0,
143+
paddingRight: 0,
144144
paddingTop: 0,
145145
paddingBottom: 0,
146146
}}
@@ -189,8 +189,8 @@ export const ToolItem = ({
189189
style={{
190190
flexDirection: 'row',
191191
alignItems: 'center',
192-
paddingLeft: 1,
193-
paddingRight: 1,
192+
paddingLeft: 0,
193+
paddingRight: 0,
194194
paddingTop: 0,
195195
paddingBottom: 0,
196196
}}

‎cli/src/utils/theme-system.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,6 +517,8 @@ const MAC_TERMINAL_THEME_OVERRIDES: Record<'dark' | 'light', Partial<ChatTheme>>
517517
agentToggleHeaderText: '#0f172a',
518518
agentToggleText: '#0f172a',
519519
chromeText: '#0f172a',
520+
inputFg: '#000000',
521+
inputFocusedFg: '#000000',
520522
inputPlaceholder: '#64748b',
521523
markdown: {
522524
inlineCodeFg: '#0f62fe',

0 commit comments

Comments
 (0)