@@ -29,8 +29,10 @@ import {
29
29
vscFocusBorder ,
30
30
vscInputBackground ,
31
31
} from "../ui"
32
- import { ServerIcon } from "@heroicons/react/24/outline"
32
+ import { PencilIcon , PencilSquareIcon , ServerIcon } from "@heroicons/react/24/outline"
33
33
import { vsCodeBadge } from "@vscode/webview-ui-toolkit"
34
+ import { ViewfinderCircleIcon } from "@heroicons/react/24/outline"
35
+ import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
34
36
35
37
interface ChatRowProps {
36
38
message : ClineMessage
@@ -167,10 +169,17 @@ export const ChatRowContent = ({
167
169
]
168
170
case "completion_result" :
169
171
return [
170
- < span
171
- className = "codicon codicon-check"
172
- style = { { color : successColor , marginBottom : "-1.5px" } } > </ span > ,
173
- < span style = { { color : successColor , fontWeight : "bold" } } > Task Completed</ span > ,
172
+ // <span
173
+ // className="codicon codicon-check"
174
+ // style={{ color: successColor, marginBottom: "-1.5px" }}
175
+ // >
176
+ // </span>,
177
+ < div
178
+ className = "flex items-center gap-2 p-2 rounded-lg"
179
+ style = { { background : "linear-gradient(to bottom, #E64C9E66, #E64C9E1A)" } } >
180
+ < PencilIcon className = "w-4 h-4" />
181
+ < span className = "font-bold uppercase" > Task Completed</ span >
182
+ </ div > ,
174
183
]
175
184
case "api_req_retry_delayed" :
176
185
return [ ]
@@ -272,9 +281,26 @@ export const ChatRowContent = ({
272
281
case "appliedDiff" :
273
282
return (
274
283
< >
275
- < div style = { headerStyle } >
276
- { toolIcon ( tool . tool === "appliedDiff" ? "diff" : "edit" ) }
277
- < span style = { { fontWeight : "bold" } } > Roo wants to edit this file:</ span >
284
+ < div
285
+ style = { { backgroundColor : vscEditorBackground } }
286
+ className = "flex items-center gap-2 p-2 rounded-lg mb-2" >
287
+ < PencilIcon className = "w-5 h-5" />
288
+ < div className = "flex flex-col" >
289
+ < span className = "font-bold uppercase" > Roo wants to edit</ span >
290
+ < span
291
+ style = { {
292
+ color : "var(--vscode-descriptionForeground)" ,
293
+ whiteSpace : "nowrap" ,
294
+ overflow : "hidden" ,
295
+ textOverflow : "ellipsis" ,
296
+ direction : "rtl" ,
297
+ textAlign : "left" ,
298
+ fontWeight : "bold" ,
299
+ letterSpacing : "0.03em" ,
300
+ } } >
301
+ { removeLeadingNonAlphanumeric ( tool . path ?? "" ) + "\u200E" }
302
+ </ span >
303
+ </ div >
278
304
</ div >
279
305
< CodeAccordian
280
306
isLoading = { message . partial }
@@ -304,57 +330,65 @@ export const ChatRowContent = ({
304
330
case "readFile" :
305
331
return (
306
332
< >
307
- < div style = { headerStyle } >
308
- { toolIcon ( "file-code" ) }
309
- < span style = { { fontWeight : "bold" } } >
310
- { message . type === "ask" ? "Roo wants to read this file:" : "Roo read this file:" }
311
- </ span >
312
- </ div >
313
333
{ /* <CodeAccordian
314
334
code={tool.content!}
315
335
path={tool.path!}
316
336
isExpanded={isExpanded}
317
337
onToggleExpand={onToggleExpand}
318
338
/> */ }
319
339
< div
320
- style = { {
321
- borderRadius : 3 ,
322
- backgroundColor : CODE_BLOCK_BG_COLOR ,
323
- overflow : "hidden" ,
324
- border : "1px solid var(--vscode-editorGroup-border)" ,
325
- } } >
340
+ style = { { backgroundColor : vscEditorBackground } }
341
+ className = "flex items-center gap-2 p-2 rounded-lg" >
342
+ < ViewfinderCircleIcon className = "w-6 h-6" />
326
343
< div
327
344
style = { {
328
- color : "var(--vscode-descriptionForeground)" ,
329
- display : "flex" ,
330
- alignItems : "center" ,
331
- padding : "9px 10px" ,
332
- cursor : "pointer" ,
333
- userSelect : "none" ,
334
- WebkitUserSelect : "none" ,
335
- MozUserSelect : "none" ,
336
- msUserSelect : "none" ,
337
- } }
338
- onClick = { ( ) => {
339
- vscode . postMessage ( { type : "openFile" , text : tool . content } )
345
+ backgroundColor : CODE_BLOCK_BG_COLOR ,
346
+ overflow : "hidden" ,
347
+ width : "fit-content" ,
340
348
} } >
341
- { tool . path ?. startsWith ( "." ) && < span > .</ span > }
342
- < span
349
+ < span style = { { fontWeight : "bold" } } className = "uppercase" >
350
+ { message . type === "ask" ? "Roo wants to read this file" : "Roo read this file:" }
351
+ </ span >
352
+ < div
343
353
style = { {
344
- whiteSpace : "nowrap" ,
345
- overflow : "hidden" ,
346
- textOverflow : "ellipsis" ,
347
- marginRight : "8px" ,
348
- direction : "rtl" ,
349
- textAlign : "left" ,
354
+ color : "var(--vscode-descriptionForeground)" ,
355
+ display : "flex" ,
356
+ alignItems : "center" ,
357
+ cursor : "pointer" ,
358
+ userSelect : "none" ,
359
+ WebkitUserSelect : "none" ,
360
+ MozUserSelect : "none" ,
361
+ msUserSelect : "none" ,
362
+ } }
363
+ onClick = { ( ) => {
364
+ vscode . postMessage ( { type : "openFile" , text : tool . content } )
350
365
} } >
351
- { removeLeadingNonAlphanumeric ( tool . path ?? "" ) + "\u200E" }
352
- </ span >
353
- < div style = { { flexGrow : 1 } } > </ div >
354
- < span
355
- className = { `codicon codicon-link-external` }
356
- style = { { fontSize : 13.5 , margin : "1px 0" } } > </ span >
366
+ { tool . path ?. startsWith ( "." ) && < span > .</ span > }
367
+ < span
368
+ style = { {
369
+ whiteSpace : "nowrap" ,
370
+ overflow : "hidden" ,
371
+ textOverflow : "ellipsis" ,
372
+ direction : "rtl" ,
373
+ textAlign : "left" ,
374
+ fontWeight : "bold" ,
375
+ letterSpacing : "0.03em" ,
376
+ } } >
377
+ { removeLeadingNonAlphanumeric ( tool . path ?? "" ) + "\u200E" }
378
+ </ span >
379
+ < div style = { { flexGrow : 1 } } > </ div >
380
+ { /* <span
381
+ className={`codicon codicon-link-external`}
382
+ >
383
+ </span> */ }
384
+ </ div >
357
385
</ div >
386
+ < OpenInNewWindowIcon
387
+ className = "w-5 h-5 ml-auto cursor-pointer"
388
+ onClick = { ( ) => {
389
+ vscode . postMessage ( { type : "openFile" , text : tool . content } )
390
+ } }
391
+ />
358
392
</ div >
359
393
</ >
360
394
)
@@ -540,14 +574,14 @@ export const ChatRowContent = ({
540
574
onClick = { onToggleExpand } >
541
575
{ /* <VSCodeBadge style={{ opacity: cost != null && cost > 0 ? 1 : 0 }} className=""> */ }
542
576
< div
543
- className = "flex items-center gap-2 p-2 rounded-md "
577
+ className = "flex items-center gap-2 p-2 rounded-lg "
544
578
style = { { backgroundColor : vscBadgeBackground } } >
545
579
< div className = "flex items-center gap-2 flex-grow" >
546
580
{ title } ${ Number ( cost || 0 ) ?. toFixed ( 4 ) }
547
581
</ div >
582
+ < span className = { `codicon codicon-chevron-${ isExpanded ? "up" : "down" } ` } > </ span >
548
583
</ div >
549
584
{ /* </VSCodeBadge> */ }
550
- < span className = { `codicon codicon-chevron-${ isExpanded ? "up" : "down" } ` } > </ span >
551
585
</ div >
552
586
{ ( ( cost == null && apiRequestFailedMessage ) || apiReqStreamingFailedMessage ) && (
553
587
< >
0 commit comments