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 { 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 {
parts: TurnActivityPart[];
isExpanded: boolean;
@@ -282,7 +286,7 @@ const renderReadFilePath = (displayPath: string, animate = true) => {
return (
<Text
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)' }}
title={displayPath}
>
@@ -297,7 +301,7 @@ const renderReadFilePath = (displayPath: string, animate = true) => {
const displayDir = hasAbsoluteRoot ? dir.slice(1) : dir;
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}
<span
className="min-w-0 shrink truncate whitespace-nowrap"
@@ -739,7 +743,7 @@ const StaticToolRowInner: React.FC<{
<MinDurationShineText
active={hasRunningActivity}
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)' }}
title={displayName}
>
@@ -755,7 +759,7 @@ const StaticToolRowInner: React.FC<{
event.stopPropagation();
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)' }}
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">
<Text
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)' }}
title={desc}
>
@@ -787,7 +791,7 @@ const StaticToolRowInner: React.FC<{
rel="noopener noreferrer"
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',
'truncate whitespace-nowrap typography-meta'
'truncate whitespace-nowrap', TOOL_ROW_DESCRIPTION_CLASS
)}
style={{ color: 'var(--status-info)' }}
title={url}
@@ -807,7 +811,7 @@ const StaticToolRowInner: React.FC<{
event.stopPropagation();
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)' }}
title={entry.path}
>
@@ -818,7 +822,7 @@ const StaticToolRowInner: React.FC<{
{!isReadGroup && !isSearchGroup && !isFetchGroup && !isSkillGroup && descriptions.length > 0 ? (
<Text
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)' }}
>
{descriptions.join(' ')}
@@ -1050,7 +1054,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
<button
type="button"
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...
</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 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 } };
export type ReasoningVariant = 'thinking' | 'justification';
@@ -217,7 +221,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
// Short blocks: render content directly without a collapsible toggle.
if (isShort) {
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">
<MarkdownRenderer
content={text}
@@ -239,7 +243,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
}
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
role="button"
tabIndex={0}
@@ -277,20 +281,20 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
</div>
{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>
<BusyDots />
</span>
) : isExpanded ? (
<span
className="typography-meta font-medium"
className={TOOL_ROW_TITLE_CLASS}
style={{ color: 'var(--tools-title)' }}
>
{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}
</span>
) : (
<span
className="typography-meta font-medium"
className={TOOL_ROW_TITLE_CLASS}
style={{ color: 'var(--tools-title)' }}
>
{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}
@@ -298,10 +302,10 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
)}
</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 ? (
<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 }}
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 { 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 } };
interface ToolPartProps {
@@ -113,11 +117,11 @@ const getMultiFileDescription = (
{entries.map((entry) => {
const hasPerFileDiff = entry.added !== null || entry.removed !== null;
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}
<Text
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)' }}
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}
<Text
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)' }}
>
{path}
@@ -1417,7 +1421,7 @@ const renderAnimatedPathWithIcon = (path: string, animate = true, grow = true, s
return (
<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}
<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}
<span
className="min-w-0 shrink truncate whitespace-nowrap"
@@ -2702,7 +2706,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
<MinDurationShineText
active={Boolean(isActive && !isError)}
minDurationMs={300}
className="typography-meta font-medium flex-shrink-0"
className={cn(TOOL_ROW_TITLE_CLASS, 'flex-shrink-0')}
style={titleStyle}
title={displayName}
>
@@ -2716,7 +2720,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
<MinDurationShineText
active={Boolean(isActive && !isError)}
minDurationMs={300}
className="typography-meta font-medium flex-shrink-0"
className={cn(TOOL_ROW_TITLE_CLASS, 'flex-shrink-0')}
style={titleStyle}
title={displayName}
>
@@ -2724,7 +2728,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
</MinDurationShineText>
</div>
{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
start={effectiveTimeStart}
end={typeof effectiveTimeEnd === 'number' ? effectiveTimeEnd : undefined}
@@ -2737,11 +2741,11 @@ const ToolPart: React.FC<ToolPartProps> = ({
</div>
{!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">
{justificationText && (
<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 }}
title={justificationText}
>
@@ -2754,7 +2758,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
) : (
<Text
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)' }}
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 (
<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"
focusable="false"
>