d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-02-15 05:07:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(design): change the design of tools and introduce todo list and task list.

Browse Source
This commit is contained in:
simosmik
2026-02-09 15:14:11 +00:00
committed by Haileyesus
parent 56a132d34e
commit 905ae38bf5
14 changed files with 602 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,14 +12,19 @@ export interface ToolDisplayConfig {
getValue?: (input: any) => string;
getSecondary?: (input: any) => string | undefined;
action?: 'copy' | 'open-file' | 'jump-to-results' | 'none';
style?: string;
wrapText?: boolean;
colorScheme?: {
primary?: string;
secondary?: string;
background?: string;
border?: string;
icon?: string;
};
// Collapsible config
title?: string | ((input: any) => string);
defaultOpen?: boolean;
contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text';
contentType?: 'diff' | 'markdown' | 'file-list' | 'todo-list' | 'text' | 'task';
getContentProps?: (input: any, helpers?: any) => any;
actionButton?: 'file-button' | 'none';
};
@@ -27,8 +32,10 @@ export interface ToolDisplayConfig {
hidden?: boolean;
hideOnSuccess?: boolean;
type?: 'one-line' | 'collapsible' | 'special';
title?: string | ((result: any) => string);
defaultOpen?: boolean;
// Special result handlers
contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message';
contentType?: 'markdown' | 'file-list' | 'todo-list' | 'text' | 'success-message' | 'task';
getMessage?: (result: any) => string;
getContentProps?: (result: any) => any;
};
@@ -51,14 +58,14 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
colorScheme: {
primary: 'text-green-400 font-mono',
secondary: 'text-gray-400',
background: 'bg-gray-900 dark:bg-black',
background: '',
border: 'border-green-500 dark:border-green-400',
icon: 'text-green-500 dark:text-green-400'
}
},
result: {
hideOnSuccess: true,
type: 'special' // Interactive prompts, cat -n output, etc.
type: 'special'
}
},
@@ -70,29 +77,35 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
input: {
type: 'one-line',
label: 'Read',
getValue: (input) => input.file_path,
getValue: (input) => input.file_path || '',
action: 'open-file',
colorScheme: {
primary: 'text-gray-700 dark:text-gray-300'
primary: 'text-gray-700 dark:text-gray-300',
background: '',
border: 'border-gray-300 dark:border-gray-600',
icon: 'text-gray-500 dark:text-gray-400'
}
},
result: {
hidden: true // Read results not displayed
hidden: true
}
},
Edit: {
input: {
type: 'collapsible',
title: 'View edit diff for',
title: (input) => {
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
return `${filename}`;
},
defaultOpen: false,
contentType: 'diff',
actionButton: 'file-button',
actionButton: 'none',
getContentProps: (input) => ({
oldContent: input.old_string,
newContent: input.new_string,
filePath: input.file_path,
badge: 'Diff',
badge: 'Edit',
badgeColor: 'gray'
})
},
@@ -104,15 +117,18 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
Write: {
input: {
type: 'collapsible',
title: 'Creating new file',
title: (input) => {
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
return `${filename}`;
},
defaultOpen: false,
contentType: 'diff',
actionButton: 'file-button',
actionButton: 'none',
getContentProps: (input) => ({
oldContent: '',
newContent: input.content,
filePath: input.file_path,
badge: 'New File',
badge: 'New',
badgeColor: 'green'
})
},
@@ -124,10 +140,13 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
ApplyPatch: {
input: {
type: 'collapsible',
title: 'View patch diff for',
title: (input) => {
const filename = input.file_path?.split('/').pop() || input.file_path || 'file';
return `${filename}`;
},
defaultOpen: false,
contentType: 'diff',
actionButton: 'file-button',
actionButton: 'none',
getContentProps: (input) => ({
oldContent: input.old_string,
newContent: input.new_string,
@@ -154,19 +173,25 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
action: 'jump-to-results',
colorScheme: {
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: '',
border: 'border-gray-400 dark:border-gray-500',
icon: 'text-gray-500 dark:text-gray-400'
}
},
result: {
type: 'collapsible',
defaultOpen: false,
title: (result) => {
const toolData = result.toolUseResult || {};
const count = toolData.numFiles || toolData.filenames?.length || 0;
return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
},
contentType: 'file-list',
getContentProps: (result) => {
const toolData = result.toolUseResult || {};
return {
files: toolData.filenames || [],
title: toolData.filenames ?
`Found ${toolData.numFiles || toolData.filenames.length} ${(toolData.numFiles === 1 || toolData.filenames.length === 1) ? 'file' : 'files'}`
: undefined
files: toolData.filenames || []
};
}
}
@@ -181,19 +206,25 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
action: 'jump-to-results',
colorScheme: {
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: '',
border: 'border-gray-400 dark:border-gray-500',
icon: 'text-gray-500 dark:text-gray-400'
}
},
result: {
type: 'collapsible',
defaultOpen: false,
title: (result) => {
const toolData = result.toolUseResult || {};
const count = toolData.numFiles || toolData.filenames?.length || 0;
return `Found ${count} ${count === 1 ? 'file' : 'files'}`;
},
contentType: 'file-list',
getContentProps: (result) => {
const toolData = result.toolUseResult || {};
return {
files: toolData.filenames || [],
title: toolData.filenames ?
`Found ${toolData.numFiles || toolData.filenames.length} ${(toolData.numFiles === 1 || toolData.filenames.length === 1) ? 'file' : 'files'}`
: undefined
files: toolData.filenames || []
};
}
}
@@ -206,7 +237,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
TodoWrite: {
input: {
type: 'collapsible',
title: 'Updating Todo List',
title: 'Updating todo list',
defaultOpen: false,
contentType: 'todo-list',
getContentProps: (input) => ({
@@ -216,16 +247,20 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
result: {
type: 'collapsible',
contentType: 'success-message',
getMessage: () => 'Todo list has been updated successfully'
getMessage: () => 'Todo list updated'
}
},
TodoRead: {
input: {
type: 'one-line',
label: 'Read todo list',
getValue: () => '',
action: 'none'
label: 'TodoRead',
getValue: () => 'reading list',
action: 'none',
colorScheme: {
primary: 'text-gray-500 dark:text-gray-400',
border: 'border-violet-400 dark:border-violet-500'
}
},
result: {
type: 'collapsible',
@@ -245,6 +280,97 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
}
},
// ============================================================================
// TASK TOOLS (TaskCreate, TaskUpdate, TaskList, TaskGet)
// ============================================================================
TaskCreate: {
input: {
type: 'one-line',
label: 'Task',
getValue: (input) => input.subject || 'Creating task',
getSecondary: (input) => input.status || undefined,
action: 'none',
colorScheme: {
primary: 'text-gray-700 dark:text-gray-300',
border: 'border-violet-400 dark:border-violet-500',
icon: 'text-violet-500 dark:text-violet-400'
}
},
result: {
hideOnSuccess: true
}
},
TaskUpdate: {
input: {
type: 'one-line',
label: 'Task',
getValue: (input) => {
const parts = [];
if (input.taskId) parts.push(`#${input.taskId}`);
if (input.status) parts.push(input.status);
if (input.subject) parts.push(`"${input.subject}"`);
return parts.join(' → ') || 'updating';
},
action: 'none',
colorScheme: {
primary: 'text-gray-700 dark:text-gray-300',
border: 'border-violet-400 dark:border-violet-500',
icon: 'text-violet-500 dark:text-violet-400'
}
},
result: {
hideOnSuccess: true
}
},
TaskList: {
input: {
type: 'one-line',
label: 'Tasks',
getValue: () => 'listing tasks',
action: 'none',
colorScheme: {
primary: 'text-gray-500 dark:text-gray-400',
border: 'border-violet-400 dark:border-violet-500',
icon: 'text-violet-500 dark:text-violet-400'
}
},
result: {
type: 'collapsible',
defaultOpen: true,
title: 'Task list',
contentType: 'task',
getContentProps: (result) => ({
content: String(result.content || '')
})
}
},
TaskGet: {
input: {
type: 'one-line',
label: 'Task',
getValue: (input) => input.taskId ? `#${input.taskId}` : 'fetching',
action: 'none',
colorScheme: {
primary: 'text-gray-700 dark:text-gray-300',
border: 'border-violet-400 dark:border-violet-500',
icon: 'text-violet-500 dark:text-violet-400'
}
},
result: {
type: 'collapsible',
defaultOpen: true,
title: 'Task details',
contentType: 'task',
getContentProps: (result) => ({
content: String(result.content || '')
})
}
},
// ============================================================================
// PLAN TOOLS
// ============================================================================
@@ -252,7 +378,37 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
exit_plan_mode: {
input: {
type: 'collapsible',
title: 'View implementation plan',
title: 'Implementation plan',
defaultOpen: true,
contentType: 'markdown',
getContentProps: (input) => ({
content: input.plan?.replace(/\\n/g, '\n') || input.plan
})
},
result: {
type: 'collapsible',
contentType: 'markdown',
getContentProps: (result) => {
try {
let parsed = result.content;
if (typeof parsed === 'string') {
parsed = JSON.parse(parsed);
}
return {
content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
};
} catch (e) {
return { content: '' };
}
}
}
},
// Also register as ExitPlanMode (the actual tool name used by Claude)
ExitPlanMode: {
input: {
type: 'collapsible',
title: 'Implementation plan',
defaultOpen: true,
contentType: 'markdown',
getContentProps: (input) => ({
@@ -285,7 +441,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
Default: {
input: {
type: 'collapsible',
title: 'View input parameters',
title: 'Parameters',
defaultOpen: false,
contentType: 'text',
getContentProps: (input) => ({