d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-09 16:07:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(design): fix bash design and config

Browse Source
This commit is contained in:
simosmik
2026-02-09 10:36:15 +00:00
committed by Haileyesus
parent 060405c8d6
commit 56a132d34e
3 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/chat/tools/ToolRenderer.tsx
View File

@@ -76,6 +76,8 @@ export const ToolRenderer: React.FC<ToolRendererProps> = ({
secondary={secondary} secondary={secondary}
action={displayConfig.action} action={displayConfig.action}
onAction={handleAction} onAction={handleAction}
style={displayConfig.style}
wrapText={displayConfig.wrapText}
colorScheme={displayConfig.colorScheme} colorScheme={displayConfig.colorScheme}
resultId={mode === 'input' ? `tool-result-${toolId}` : undefined} resultId={mode === 'input' ? `tool-result-${toolId}` : undefined}
/> />

26
src/components/chat/tools/components/OneLineDisplay.tsx
View File

@@ -10,12 +10,17 @@ interface OneLineDisplayProps {
secondary?: string; secondary?: string;
action?: ActionType; action?: ActionType;
onAction?: () => void; onAction?: () => void;
style?: string;
wrapText?: boolean;
colorScheme?: { colorScheme?: {
primary?: string; primary?: string;
secondary?: string; secondary?: string;
background?: string;
border?: string;
icon?: string;
}; };
resultId?: string; // For jump-to-results resultId?: string;
toolResult?: any; // For showing result link toolResult?: any;
toolId?: string; toolId?: string;
} }
@@ -31,9 +36,14 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
secondary, secondary,
action = 'none', action = 'none',
onAction, onAction,
style,
wrapText = false,
colorScheme = { colorScheme = {
primary: 'text-gray-700 dark:text-gray-300', primary: 'text-gray-700 dark:text-gray-300',
secondary: 'text-gray-500 dark:text-gray-400' secondary: 'text-gray-500 dark:text-gray-400',
background: 'bg-gray-50/50 dark:bg-gray-800/30',
border: 'border-blue-400 dark:border-blue-500',
icon: 'text-blue-500 dark:text-blue-400'
}, },
resultId, resultId,
toolResult, toolResult,
@@ -102,18 +112,18 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
return null; return null;
}; };
const isTerminal = toolName === 'Bash' || icon === 'terminal'; const isTerminal = style === 'terminal';
return ( return (
<div className={`group relative ${isTerminal ? 'bg-gray-900/5 dark:bg-gray-900/30' : 'bg-gray-50/50 dark:bg-gray-800/30'} border-l-2 ${isTerminal ? 'border-green-500 dark:border-green-400' : 'border-blue-400 dark:border-blue-500'} pl-3 py-1 my-0.5`}> <div className={`group relative ${colorScheme.background} border-l-2 ${colorScheme.border} pl-3 py-1 my-0.5`}>
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 flex-1 min-w-0"> <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 flex-1 min-w-0">
{icon === 'terminal' ? ( {icon === 'terminal' ? (
<svg className="w-3.5 h-3.5 text-green-500 dark:text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className={`w-3.5 h-3.5 ${colorScheme.icon} flex-shrink-0`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg> </svg>
) : icon ? ( ) : icon ? (
<span className="text-blue-500 dark:text-blue-400 flex-shrink-0"> <span className={`${colorScheme.icon} flex-shrink-0`}>
{icon} {icon}
</span> </span>
) : label ? ( ) : label ? (
@@ -127,7 +137,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
{action === 'open-file' ? ( {action === 'open-file' ? (
renderActionButton() renderActionButton()
) : ( ) : (
<span className={`font-mono truncate flex-1 min-w-0 ${colorScheme.primary}`}> <span className={`font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'truncate'} flex-1 min-w-0 ${colorScheme.primary}`}>
{isTerminal && <span className="text-green-500 dark:text-green-400 mr-1">$</span>} {isTerminal && <span className="text-green-500 dark:text-green-400 mr-1">$</span>}
{value} {value}
</span> </span>

9
src/components/chat/tools/configs/toolConfigs.ts
View File

@@ -46,9 +46,14 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
getValue: (input) => input.command, getValue: (input) => input.command,
getSecondary: (input) => input.description, getSecondary: (input) => input.description,
action: 'copy', action: 'copy',
style: 'terminal',
wrapText: true,
colorScheme: { colorScheme: {
primary: 'text-green-600 dark:text-green-400 font-mono', primary: 'text-green-400 font-mono',
secondary: 'text-gray-500 dark:text-gray-400' secondary: 'text-gray-400',
background: 'bg-gray-900 dark:bg-black',
border: 'border-green-500 dark:border-green-400',
icon: 'text-green-500 dark:text-green-400'
} }
}, },
result: { result: {