BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify chat tool row spacing

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-05-25 01:38:19 +03:00
parent 3cdd1ede2d
commit f14fa1b307
4 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
+13 -9
View File
@@ -24,6 +24,10 @@ import JustificationBlock from './JustificationBlock';
import { areRenderRelevantPartsEqual } from '../renderCompare'; import { areRenderRelevantPartsEqual } from '../renderCompare';
import { getExternalFaviconUrl } from '@/lib/url'; import { getExternalFaviconUrl } from '@/lib/url';
const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal';
const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
interface ProgressiveGroupProps { interface ProgressiveGroupProps {
parts: TurnActivityPart[]; parts: TurnActivityPart[];
isExpanded: boolean; isExpanded: boolean;
@@ -282,7 +286,7 @@ const renderReadFilePath = (displayPath: string, animate = true) => {
return ( return (
<Text <Text
variant={animate ? 'generate-effect' : 'static'} variant={animate ? 'generate-effect' : 'static'}
className="min-w-0 flex-1 truncate whitespace-nowrap typography-meta leading-5" className={cn('min-w-0 flex-1 truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-title)' }} style={{ color: 'var(--tools-title)' }}
title={displayPath} title={displayPath}
> >
@@ -297,7 +301,7 @@ const renderReadFilePath = (displayPath: string, animate = true) => {
const displayDir = hasAbsoluteRoot ? dir.slice(1) : dir; const displayDir = hasAbsoluteRoot ? dir.slice(1) : dir;
return ( return (
<span className="min-w-0 inline-flex max-w-full flex-1 items-baseline overflow-hidden typography-meta leading-5" title={displayPath}> <span className={cn('min-w-0 inline-flex max-w-full flex-1 items-baseline overflow-hidden', TOOL_ROW_DESCRIPTION_CLASS)} title={displayPath}>
{hasAbsoluteRoot ? <span className="flex-shrink-0" style={{ color: 'var(--tools-description)' }}>/</span> : null} {hasAbsoluteRoot ? <span className="flex-shrink-0" style={{ color: 'var(--tools-description)' }}>/</span> : null}
<span <span
className="min-w-0 shrink truncate whitespace-nowrap" className="min-w-0 shrink truncate whitespace-nowrap"
@@ -739,7 +743,7 @@ const StaticToolRowInner: React.FC<{
<MinDurationShineText <MinDurationShineText
active={hasRunningActivity} active={hasRunningActivity}
minDurationMs={1000} minDurationMs={1000}
className="typography-meta leading-5 font-medium inline-flex h-5 items-center flex-shrink-0 opacity-85" className={cn(TOOL_ROW_TITLE_CLASS, 'inline-flex items-center flex-shrink-0 opacity-85')}
style={{ color: 'var(--tools-title)' }} style={{ color: 'var(--tools-title)' }}
title={displayName} title={displayName}
> >
@@ -755,7 +759,7 @@ const StaticToolRowInner: React.FC<{
event.stopPropagation(); event.stopPropagation();
handleReadFileClick(entry.path, entry.offset); handleReadFileClick(entry.path, entry.offset);
}} }}
className="inline-flex items-center justify-start gap-1 min-w-0 flex-1 text-left typography-meta leading-5 hover:opacity-90" className={cn('inline-flex !min-h-0 items-center justify-start gap-1 min-w-0 flex-1 text-left hover:opacity-90', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
title={entry.offset ? `${entry.displayPath}:${entry.offset}` : entry.displayPath} title={entry.offset ? `${entry.displayPath}:${entry.offset}` : entry.displayPath}
> >
@@ -769,7 +773,7 @@ const StaticToolRowInner: React.FC<{
<span key={`${desc}-${index}`} className="inline-flex min-w-0 flex-1"> <span key={`${desc}-${index}`} className="inline-flex min-w-0 flex-1">
<Text <Text
variant={animateTailText ? 'generate-effect' : 'static'} variant={animateTailText ? 'generate-effect' : 'static'}
className="min-w-0 flex-1 truncate whitespace-nowrap typography-meta leading-5" className={cn('min-w-0 flex-1 truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
title={desc} title={desc}
> >
@@ -787,7 +791,7 @@ const StaticToolRowInner: React.FC<{
rel="noopener noreferrer" rel="noopener noreferrer"
className={cn( className={cn(
'min-w-0 flex-1 inline-flex items-center gap-1.5 underline decoration-[color:var(--status-info)] underline-offset-2 hover:opacity-90', 'min-w-0 flex-1 inline-flex items-center gap-1.5 underline decoration-[color:var(--status-info)] underline-offset-2 hover:opacity-90',
'truncate whitespace-nowrap typography-meta' 'truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS
)} )}
style={{ color: 'var(--status-info)' }} style={{ color: 'var(--status-info)' }}
title={url} title={url}
@@ -807,7 +811,7 @@ const StaticToolRowInner: React.FC<{
event.stopPropagation(); event.stopPropagation();
handleSkillClick(entry.path); handleSkillClick(entry.path);
}} }}
className="min-w-0 flex-1 truncate whitespace-nowrap typography-meta leading-5 text-left hover:opacity-90" className={cn('!min-h-0 min-w-0 flex-1 truncate whitespace-nowrap text-left hover:opacity-90', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
title={entry.path} title={entry.path}
> >
@@ -818,7 +822,7 @@ const StaticToolRowInner: React.FC<{
{!isReadGroup && !isSearchGroup && !isFetchGroup && !isSkillGroup && descriptions.length > 0 ? ( {!isReadGroup && !isSearchGroup && !isFetchGroup && !isSkillGroup && descriptions.length > 0 ? (
<Text <Text
variant={animateTailText ? 'generate-effect' : 'static'} variant={animateTailText ? 'generate-effect' : 'static'}
className="min-w-0 flex-1 truncate whitespace-nowrap typography-meta leading-5" className={cn('min-w-0 flex-1 truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
> >
{descriptions.join(' ')} {descriptions.join(' ')}
@@ -1050,7 +1054,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
<button <button
type="button" type="button"
onClick={onToggle} onClick={onToggle}
className="typography-meta leading-5 px-2 py-1 text-muted-foreground/45 hover:text-muted-foreground/65 text-left" className="typography-meta leading-4 px-2 py-1 text-muted-foreground/45 hover:text-muted-foreground/65 text-left"
> >
+{previewHiddenCount} more... +{previewHiddenCount} more...
</button> </button>
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+11 -7
View File
@@ -12,6 +12,10 @@ import { MarkdownRenderer } from '../../MarkdownRenderer';
import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle'; import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
import type { StreamPhase } from '../types'; import type { StreamPhase } from '../types';
const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal';
const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
type PartWithText = Part & { text?: string; content?: string; time?: { start?: number; end?: number } }; type PartWithText = Part & { text?: string; content?: string; time?: { start?: number; end?: number } };
export type ReasoningVariant = 'thinking' | 'justification'; export type ReasoningVariant = 'thinking' | 'justification';
@@ -217,7 +221,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
// Short blocks: render content directly without a collapsible toggle. // Short blocks: render content directly without a collapsible toggle.
if (isShort) { if (isShort) {
return ( return (
<div className="my-1" data-reasoning-block-id={blockId} data-message-text-export-root="true"> <div data-reasoning-block-id={blockId} data-message-text-export-root="true">
<div data-message-text-export-source="true"> <div data-message-text-export-source="true">
<MarkdownRenderer <MarkdownRenderer
content={text} content={text}
@@ -239,7 +243,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
} }
return ( return (
<div className="my-1" data-reasoning-block-id={blockId} data-message-text-export-root="true"> <div data-reasoning-block-id={blockId} data-message-text-export-root="true">
<div <div
role="button" role="button"
tabIndex={0} tabIndex={0}
@@ -277,20 +281,20 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
</div> </div>
{isStreaming ? ( {isStreaming ? (
<span className="flex items-center gap-1 typography-meta font-medium" style={{ color: 'var(--tools-title)' }}> <span className={cn('flex items-center gap-1', TOOL_ROW_TITLE_CLASS)} style={{ color: 'var(--tools-title)' }}>
<span>{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}</span> <span>{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}</span>
<BusyDots /> <BusyDots />
</span> </span>
) : isExpanded ? ( ) : isExpanded ? (
<span <span
className="typography-meta font-medium" className={TOOL_ROW_TITLE_CLASS}
style={{ color: 'var(--tools-title)' }} style={{ color: 'var(--tools-title)' }}
> >
{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')} {t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}
</span> </span>
) : ( ) : (
<span <span
className="typography-meta font-medium" className={TOOL_ROW_TITLE_CLASS}
style={{ color: 'var(--tools-title)' }} style={{ color: 'var(--tools-title)' }}
> >
{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')} {t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}
@@ -298,10 +302,10 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
)} )}
</div> </div>
<div className="flex items-center gap-1 flex-1 min-w-0 typography-meta" style={{ color: 'var(--tools-description)' }}> <div className={cn('flex items-center gap-1 flex-1 min-w-0', TOOL_ROW_DESCRIPTION_CLASS)} style={{ color: 'var(--tools-description)' }}>
{!isStreaming && !isExpanded && summary ? ( {!isStreaming && !isExpanded && summary ? (
<span <span
className="min-w-0 truncate typography-meta" className={cn('min-w-0 truncate', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)', opacity: 0.8 }} style={{ color: 'var(--tools-description)', opacity: 0.8 }}
title={summary} title={summary}
> >
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+14 -10
View File
@@ -45,6 +45,10 @@ import { resolveFallbackTaskSessionId } from './resolveFallbackTaskSessionId';
import { areRenderRelevantPartsEqual } from '../renderCompare'; import { areRenderRelevantPartsEqual } from '../renderCompare';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-4 sm:!leading-6 tracking-normal';
const TOOL_ROW_TITLE_CLASS = cn('typography-meta font-medium', TOOL_ROW_TEXT_CLASS);
const TOOL_ROW_DESCRIPTION_CLASS = cn('typography-meta', TOOL_ROW_TEXT_CLASS);
type ToolStateWithMetadata = ToolStateUnion & { metadata?: Record<string, unknown>; input?: Record<string, unknown>; output?: string; error?: string; time?: { start: number; end?: number } }; type ToolStateWithMetadata = ToolStateUnion & { metadata?: Record<string, unknown>; input?: Record<string, unknown>; output?: string; error?: string; time?: { start: number; end?: number } };
interface ToolPartProps { interface ToolPartProps {
@@ -113,11 +117,11 @@ const getMultiFileDescription = (
{entries.map((entry) => { {entries.map((entry) => {
const hasPerFileDiff = entry.added !== null || entry.removed !== null; const hasPerFileDiff = entry.added !== null || entry.removed !== null;
return ( return (
<span key={entry.path} className="inline-flex min-w-0 max-w-full items-center gap-1 typography-meta leading-5" style={{ color: 'var(--tools-description)' }}> <span key={entry.path} className={cn('inline-flex min-w-0 max-w-full items-center gap-1', TOOL_ROW_DESCRIPTION_CLASS)} style={{ color: 'var(--tools-description)' }}>
{showFileIcons ? <FileTypeIcon filePath={entry.path} className="h-3.5 w-3.5" /> : null} {showFileIcons ? <FileTypeIcon filePath={entry.path} className="h-3.5 w-3.5" /> : null}
<Text <Text
variant={animate ? 'generate-effect' : 'static'} variant={animate ? 'generate-effect' : 'static'}
className="min-w-0 max-w-full truncate typography-meta leading-5" className={cn('min-w-0 max-w-full truncate', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
title={entry.path} title={entry.path}
> >
@@ -1400,7 +1404,7 @@ const renderAnimatedPathWithIcon = (path: string, animate = true, grow = true, s
{showFileIcons ? <FileTypeIcon filePath={path} className="h-3.5 w-3.5 flex-shrink-0" /> : null} {showFileIcons ? <FileTypeIcon filePath={path} className="h-3.5 w-3.5 flex-shrink-0" /> : null}
<Text <Text
variant={animate ? 'generate-effect' : 'static'} variant={animate ? 'generate-effect' : 'static'}
className={cn('min-w-0 truncate whitespace-nowrap typography-meta', grow && 'flex-1')} className={cn('min-w-0 truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS, grow && 'flex-1')}
style={{ color: 'var(--tools-title)' }} style={{ color: 'var(--tools-title)' }}
> >
{path} {path}
@@ -1417,7 +1421,7 @@ const renderAnimatedPathWithIcon = (path: string, animate = true, grow = true, s
return ( return (
<span className={cn('min-w-0 inline-flex items-center gap-1 overflow-hidden', grow && 'flex-1')} title={path}> <span className={cn('min-w-0 inline-flex items-center gap-1 overflow-hidden', grow && 'flex-1')} title={path}>
{showFileIcons ? <FileTypeIcon filePath={path} className="h-3.5 w-3.5 flex-shrink-0" /> : null} {showFileIcons ? <FileTypeIcon filePath={path} className="h-3.5 w-3.5 flex-shrink-0" /> : null}
<span className={cn('min-w-0 inline-flex max-w-full items-baseline overflow-hidden typography-meta', grow && 'flex-1')}> <span className={cn('min-w-0 inline-flex max-w-full items-baseline overflow-hidden', TOOL_ROW_DESCRIPTION_CLASS, grow && 'flex-1')}>
{hasAbsoluteRoot ? <span className="flex-shrink-0" style={{ color: 'var(--tools-description)' }}>/</span> : null} {hasAbsoluteRoot ? <span className="flex-shrink-0" style={{ color: 'var(--tools-description)' }}>/</span> : null}
<span <span
className="min-w-0 shrink truncate whitespace-nowrap" className="min-w-0 shrink truncate whitespace-nowrap"
@@ -2702,7 +2706,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
<MinDurationShineText <MinDurationShineText
active={Boolean(isActive && !isError)} active={Boolean(isActive && !isError)}
minDurationMs={300} minDurationMs={300}
className="typography-meta font-medium flex-shrink-0" className={cn(TOOL_ROW_TITLE_CLASS, 'flex-shrink-0')}
style={titleStyle} style={titleStyle}
title={displayName} title={displayName}
> >
@@ -2716,7 +2720,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
<MinDurationShineText <MinDurationShineText
active={Boolean(isActive && !isError)} active={Boolean(isActive && !isError)}
minDurationMs={300} minDurationMs={300}
className="typography-meta font-medium flex-shrink-0" className={cn(TOOL_ROW_TITLE_CLASS, 'flex-shrink-0')}
style={titleStyle} style={titleStyle}
title={displayName} title={displayName}
> >
@@ -2724,7 +2728,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
</MinDurationShineText> </MinDurationShineText>
</div> </div>
{normalizedPartTool === 'bash' && typeof effectiveTimeStart === 'number' ? ( {normalizedPartTool === 'bash' && typeof effectiveTimeStart === 'number' ? (
<span className="flex-shrink-0 tabular-nums text-muted-foreground/80 typography-meta"> <span className={cn('flex-shrink-0 tabular-nums text-muted-foreground/80', TOOL_ROW_DESCRIPTION_CLASS)}>
<LiveDuration <LiveDuration
start={effectiveTimeStart} start={effectiveTimeStart}
end={typeof effectiveTimeEnd === 'number' ? effectiveTimeEnd : undefined} end={typeof effectiveTimeEnd === 'number' ? effectiveTimeEnd : undefined}
@@ -2737,11 +2741,11 @@ const ToolPart: React.FC<ToolPartProps> = ({
</div> </div>
{!isMultiFileApplyPatch && ( {!isMultiFileApplyPatch && (
<div className="flex items-center gap-1 flex-1 min-w-0 typography-meta" style={{ color: 'var(--tools-description)' }}> <div className={cn('flex items-center gap-1 flex-1 min-w-0', TOOL_ROW_DESCRIPTION_CLASS)} style={{ color: 'var(--tools-description)' }}>
<div className="flex items-center gap-1 flex-1 min-w-0"> <div className="flex items-center gap-1 flex-1 min-w-0">
{justificationText && ( {justificationText && (
<span <span
className="min-w-0 truncate typography-meta" className={cn('min-w-0 truncate', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)', opacity: 0.8 }} style={{ color: 'var(--tools-description)', opacity: 0.8 }}
title={justificationText} title={justificationText}
> >
@@ -2754,7 +2758,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
) : ( ) : (
<Text <Text
variant={animateTailText ? 'generate-effect' : 'static'} variant={animateTailText ? 'generate-effect' : 'static'}
className="min-w-0 truncate typography-meta" className={cn('min-w-0 truncate', TOOL_ROW_DESCRIPTION_CLASS)}
style={{ color: 'var(--tools-description)' }} style={{ color: 'var(--tools-description)' }}
title={description} title={description}
> >
packages/ui/src/components/icons/FileTypeIcon.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const FileTypeIcon: React.FC<FileTypeIconProps> = ({ filePath, extension,
return ( return (
<svg <svg
className={cn('h-4 w-4 flex-shrink-0', className)} className={cn('block h-4 w-4 flex-shrink-0', className)}
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"
> >