11import {
2- CREATE_FILE_TOOL_NAME ,
3- EDIT_FILE_TOOL_NAME ,
2+ BASH_EDIT_TOOL_NAME ,
3+ BASH_EDIT_TOOL_PARAMETERS ,
4+ BASH_READ_TOOL_NAME ,
5+ BASH_READ_TOOL_PARAMETERS ,
6+ EXIT_PLAN_MODE_TOOL_NAME ,
7+ FUZZY_EDIT_FILE_TOOL_NAME ,
8+ FUZZY_EDIT_FILE_TOOL_PARAMETERS ,
9+ GREP_TOOL_NAME ,
410 LIST_FILES_TOOL_NAME ,
11+ LIST_FILES_TOOL_PARAMETERS ,
512 ONLOOK_INSTRUCTIONS_TOOL_NAME ,
6- READ_FILES_TOOL_NAME ,
13+ READ_FILE_TOOL_NAME ,
14+ READ_FILE_TOOL_PARAMETERS ,
715 READ_STYLE_GUIDE_TOOL_NAME ,
816 SANDBOX_TOOL_NAME ,
917 SCRAPE_URL_TOOL_NAME ,
10- TERMINAL_COMMAND_TOOL_NAME
18+ SCRAPE_URL_TOOL_PARAMETERS ,
19+ SEARCH_REPLACE_EDIT_FILE_TOOL_NAME ,
20+ SEARCH_REPLACE_EDIT_FILE_TOOL_PARAMETERS ,
21+ SEARCH_REPLACE_MULTI_EDIT_FILE_TOOL_NAME ,
22+ SEARCH_REPLACE_MULTI_EDIT_FILE_TOOL_PARAMETERS ,
23+ TERMINAL_COMMAND_TOOL_NAME ,
24+ TODO_WRITE_TOOL_NAME ,
25+ TODO_WRITE_TOOL_PARAMETERS ,
26+ WRITE_FILE_TOOL_NAME ,
27+ WRITE_FILE_TOOL_PARAMETERS
1128} from '@onlook/ai' ;
1229import { Icons } from '@onlook/ui/icons' ;
1330import { cn } from '@onlook/ui/utils' ;
1431import type { ToolInvocation } from 'ai' ;
32+ import { z } from 'zod' ;
1533
1634// Map tool names to specific icon components
1735const TOOL_ICONS : Record < string , any > = {
1836 [ LIST_FILES_TOOL_NAME ] : Icons . ListBullet ,
19- [ READ_FILES_TOOL_NAME ] : Icons . EyeOpen ,
37+ [ READ_FILE_TOOL_NAME ] : Icons . EyeOpen ,
2038 [ READ_STYLE_GUIDE_TOOL_NAME ] : Icons . Brand ,
2139 [ ONLOOK_INSTRUCTIONS_TOOL_NAME ] : Icons . OnlookLogo ,
22- [ EDIT_FILE_TOOL_NAME ] : Icons . Pencil ,
23- [ CREATE_FILE_TOOL_NAME ] : Icons . FilePlus ,
40+ [ SEARCH_REPLACE_EDIT_FILE_TOOL_NAME ] : Icons . Pencil ,
41+ [ SEARCH_REPLACE_MULTI_EDIT_FILE_TOOL_NAME ] : Icons . Pencil ,
42+ [ FUZZY_EDIT_FILE_TOOL_NAME ] : Icons . Pencil ,
43+ [ WRITE_FILE_TOOL_NAME ] : Icons . FilePlus ,
2444 [ TERMINAL_COMMAND_TOOL_NAME ] : Icons . Terminal ,
45+ [ BASH_EDIT_TOOL_NAME ] : Icons . Terminal ,
46+ [ GREP_TOOL_NAME ] : Icons . MagnifyingGlass ,
2547 [ SCRAPE_URL_TOOL_NAME ] : Icons . Globe ,
2648 [ SANDBOX_TOOL_NAME ] : Icons . Cube ,
27- } ;
49+ [ TODO_WRITE_TOOL_NAME ] : Icons . ListBullet ,
50+ [ EXIT_PLAN_MODE_TOOL_NAME ] : Icons . ListBullet ,
51+ [ BASH_READ_TOOL_NAME ] : Icons . EyeOpen ,
52+ } as const ;
2853
2954export function ToolCallSimple ( {
3055 toolInvocation,
@@ -40,59 +65,105 @@ export function ToolCallSimple({
4065
4166 const getLabel = ( ) => {
4267 try {
43- let label = '' ;
44- if ( toolName === TERMINAL_COMMAND_TOOL_NAME ) {
45- return 'Terminal' ;
46- }
47- if ( toolName === EDIT_FILE_TOOL_NAME ) {
48- if ( toolInvocation . args && 'path' in toolInvocation . args ) {
49- label = "Editing " + ( toolInvocation . args . path . split ( '/' ) . pop ( ) || '' ) ;
50- } else {
51- label = "Editing file" ;
52- }
53- } else if ( toolName === CREATE_FILE_TOOL_NAME ) {
54- if ( toolInvocation . args && 'path' in toolInvocation . args ) {
55- label = "Creating file " + ( toolInvocation . args . path . split ( '/' ) . pop ( ) || '' ) ;
56- } else {
57- label = "Creating file" ;
58- }
59- } else if ( toolName === LIST_FILES_TOOL_NAME ) {
60- if ( toolInvocation . args && 'path' in toolInvocation . args ) {
61- label = "Reading directory " + ( toolInvocation . args . path . split ( '/' ) . pop ( ) || '' ) ;
62- } else {
63- label = "Reading directory" ;
64- }
65- } else if ( toolName === READ_FILES_TOOL_NAME ) {
66- if ( toolInvocation . args && 'paths' in toolInvocation . args ) {
67- label = "Reading file" + ( toolInvocation . args . paths . length > 1 ? 's' : '' ) + ' ' + ( toolInvocation . args . paths . map ( ( path : string ) => path . split ( '/' ) . pop ( ) ) . join ( ', ' ) || '' ) ;
68- } else {
69- label = "Reading files" ;
70- }
71- } else if ( toolName === READ_STYLE_GUIDE_TOOL_NAME ) {
72- label = "Reading style guide" ;
73- } else if ( toolName === ONLOOK_INSTRUCTIONS_TOOL_NAME ) {
74- label = "Reading Onlook instructions" ;
75- } else if ( toolName === SCRAPE_URL_TOOL_NAME ) {
76- if ( toolInvocation . args && 'url' in toolInvocation . args ) {
77- try {
78- const url = new URL ( toolInvocation . args . url as string ) ;
79- label = "Visiting " + url . hostname ;
80- } catch {
81- label = "Visiting URL" ;
68+ switch ( toolName as keyof typeof TOOL_ICONS ) {
69+ case TERMINAL_COMMAND_TOOL_NAME :
70+ return 'Terminal' ;
71+ case SEARCH_REPLACE_EDIT_FILE_TOOL_NAME :
72+ const params = toolInvocation . args as z . infer < typeof SEARCH_REPLACE_EDIT_FILE_TOOL_PARAMETERS > ;
73+ if ( params . file_path ) {
74+ return 'Editing ' + ( params . file_path . split ( '/' ) . pop ( ) || '' ) ;
75+ } else {
76+ return 'Editing file' ;
77+ }
78+ case SEARCH_REPLACE_MULTI_EDIT_FILE_TOOL_NAME :
79+ const params1 = toolInvocation . args as z . infer < typeof SEARCH_REPLACE_MULTI_EDIT_FILE_TOOL_PARAMETERS > ;
80+ if ( params1 . edits ) {
81+ return 'Editing ' + ( params1 . edits . map ( ( edit : { old_string : string ; new_string : string ; replace_all : boolean ; } ) => edit . old_string ) . join ( ', ' ) || '' ) ;
82+ } else {
83+ return 'Editing files' ;
84+ }
85+ case FUZZY_EDIT_FILE_TOOL_NAME :
86+ const params2 = toolInvocation . args as z . infer < typeof FUZZY_EDIT_FILE_TOOL_PARAMETERS > ;
87+ if ( params2 . file_path ) {
88+ return 'Editing ' + ( params2 . file_path . split ( '/' ) . pop ( ) || '' ) ;
89+ } else {
90+ return 'Editing file' ;
91+ }
92+ case WRITE_FILE_TOOL_NAME :
93+ const params3 = toolInvocation . args as z . infer < typeof WRITE_FILE_TOOL_PARAMETERS > ;
94+ if ( params3 . file_path ) {
95+ return 'Creating file ' + ( params3 . file_path . split ( '/' ) . pop ( ) || '' ) ;
96+ } else {
97+ return 'Creating file' ;
98+ }
99+ case LIST_FILES_TOOL_NAME :
100+ const params4 = toolInvocation . args as z . infer < typeof LIST_FILES_TOOL_PARAMETERS > ;
101+ if ( params4 . path ) {
102+ return 'Reading directory ' + ( params4 . path . split ( '/' ) . pop ( ) || '' ) ;
103+ } else {
104+ return 'Reading directory' ;
105+ }
106+ case READ_FILE_TOOL_NAME :
107+ const params5 = toolInvocation . args as z . infer < typeof READ_FILE_TOOL_PARAMETERS > ;
108+ if ( params5 . file_path ) {
109+ return 'Reading file ' + ( params5 . file_path . split ( '/' ) . pop ( ) || '' ) ;
110+ } else {
111+ return 'Reading files' ;
112+ }
113+ case SCRAPE_URL_TOOL_NAME :
114+ const params6 = toolInvocation . args as z . infer < typeof SCRAPE_URL_TOOL_PARAMETERS > ;
115+ if ( params6 . url ) {
116+ return 'Visiting ' + ( new URL ( params6 . url ) . hostname || 'URL' ) ;
117+ } else {
118+ return 'Visiting URL' ;
82119 }
83- } else {
84- label = "Visiting URL" ;
85- }
86- } else {
87- label = toolName . replace ( / [ - _ ] / g, ' ' ) . replace ( / \b \w / g, c => c . toUpperCase ( ) ) ;
120+ case SANDBOX_TOOL_NAME :
121+ if ( toolInvocation . args && 'command' in toolInvocation . args ) {
122+ return 'Sandbox: ' + toolInvocation . args . command ;
123+ } else {
124+ return 'Sandbox' ;
125+ }
126+ case GREP_TOOL_NAME :
127+ if ( toolInvocation . args && 'pattern' in toolInvocation . args ) {
128+ return 'Searching for ' + toolInvocation . args . pattern ;
129+ } else {
130+ return 'Searching' ;
131+ }
132+ case BASH_EDIT_TOOL_NAME :
133+ const params7 = toolInvocation . args as z . infer < typeof BASH_EDIT_TOOL_PARAMETERS > ;
134+ if ( params7 . command ) {
135+ return 'Running command ' + ( params7 . command . split ( '/' ) . pop ( ) || '' ) ;
136+ } else {
137+ return 'Running command' ;
138+ }
139+ case BASH_READ_TOOL_NAME :
140+ const params8 = toolInvocation . args as z . infer < typeof BASH_READ_TOOL_PARAMETERS > ;
141+ if ( params8 . command ) {
142+ return 'Reading file ' + ( params8 . command . split ( '/' ) . pop ( ) || '' ) ;
143+ } else {
144+ return 'Reading file' ;
145+ }
146+ case TODO_WRITE_TOOL_NAME :
147+ const params9 = toolInvocation . args as z . infer < typeof TODO_WRITE_TOOL_PARAMETERS > ;
148+ if ( params9 . todos ) {
149+ return 'Writing todos ' + ( params9 . todos . map ( ( todo : { content : string ; status : string ; priority : string ; } ) => todo . content ) . join ( ', ' ) || '' ) ;
150+ } else {
151+ return 'Writing todos' ;
152+ }
153+ case EXIT_PLAN_MODE_TOOL_NAME :
154+ return 'Exiting plan mode' ;
155+ case READ_STYLE_GUIDE_TOOL_NAME :
156+ return 'Reading style guide' ;
157+ case ONLOOK_INSTRUCTIONS_TOOL_NAME :
158+ return 'Reading Onlook instructions' ;
159+ default :
160+ return toolName . replace ( / [ - _ ] / g, ' ' ) . replace ( / \b \w / g, c => c . toUpperCase ( ) ) ;
88161 }
89- return label ;
90162 } catch ( error ) {
91163 console . error ( 'Error getting label' , error ) ;
92164 return toolName . replace ( / [ - _ ] / g, ' ' ) . replace ( / \b \w / g, c => c . toUpperCase ( ) ) ;
93165 }
94166 }
95-
96167 return (
97168 < div className = { cn ( 'flex items-center gap-2 ml-2 text-foreground-tertiary/80' , className ) } >
98169 < Icon className = "w-4 h-4" />
0 commit comments