@@ -29,10 +29,11 @@ import {
29
29
vscFocusBorder ,
30
30
vscInputBackground ,
31
31
} from "../ui"
32
- import { PencilIcon , PencilSquareIcon , ServerIcon } from "@heroicons/react/24/outline"
32
+ import { PencilIcon , PencilSquareIcon , ServerIcon , PlusCircleIcon } from "@heroicons/react/24/outline"
33
33
import { vsCodeBadge } from "@vscode/webview-ui-toolkit"
34
34
import { ViewfinderCircleIcon } from "@heroicons/react/24/outline"
35
35
import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
36
+ import { Tail , Tail2 } from "../ui/tail"
36
37
37
38
interface ChatRowProps {
38
39
message : ClineMessage
@@ -289,6 +290,7 @@ export const ChatRowContent = ({
289
290
< PencilIcon className = "w-5 h-5" />
290
291
< div className = "flex flex-col" >
291
292
< span className = "font-bold uppercase" > Roo wants to edit</ span >
293
+
292
294
< span
293
295
style = { {
294
296
color : "var(--vscode-descriptionForeground)" ,
@@ -316,9 +318,12 @@ export const ChatRowContent = ({
316
318
case "newFileCreated" :
317
319
return (
318
320
< >
319
- < div style = { headerStyle } >
320
- { toolIcon ( "new-file" ) }
321
- < span style = { { fontWeight : "bold" } } > Roo wants to create a new file:</ span >
321
+ < div
322
+ style = { { ...headerStyle , backgroundColor : vscEditorBackground } }
323
+ className = "flex items-center gap-2 p-2 rounded-lg" >
324
+ { /* {toolIcon("new-file")} */ }
325
+ < PlusCircleIcon className = "w-5 h-5" />
326
+ < span className = "font-bold uppercase" > Roo wants to create a new file</ span >
322
327
</ div >
323
328
< CodeAccordian
324
329
isLoading = { message . partial }
@@ -575,13 +580,21 @@ export const ChatRowContent = ({
575
580
} }
576
581
onClick = { onToggleExpand } >
577
582
{ /* <VSCodeBadge style={{ opacity: cost != null && cost > 0 ? 1 : 0 }} className=""> */ }
578
- < div
579
- className = "flex items-center gap-2 p-2 rounded-lg"
580
- style = { { backgroundColor : vscBadgeBackground } } >
581
- < div className = "flex items-center gap-2 flex-grow" >
582
- { title } ${ Number ( cost || 0 ) ?. toFixed ( 4 ) }
583
+ < div className = "flex items-center gap-2" >
584
+ < div
585
+ className = "flex items-center gap-2 p-2 rounded-lg"
586
+ style = { { backgroundColor : "var(--vscode-list-hoverBackground)" } } >
587
+ < div className = "flex items-center gap-2 flex-grow" >
588
+ { title } ${ Number ( cost || 0 ) ?. toFixed ( 4 ) }
589
+ </ div >
590
+ < span
591
+ className = { `codicon codicon-chevron-${ isExpanded ? "up" : "down" } ` } > </ span >
583
592
</ div >
584
- < span className = { `codicon codicon-chevron-${ isExpanded ? "up" : "down" } ` } > </ span >
593
+ { isStreaming && (
594
+ < div className = "flex items-center gap-2 w-5 h-5" >
595
+ < VSCodeProgressRing />
596
+ </ div >
597
+ ) }
585
598
</ div >
586
599
{ /* </VSCodeBadge> */ }
587
600
</ div >
@@ -663,13 +676,17 @@ export const ChatRowContent = ({
663
676
return (
664
677
< div
665
678
style = { {
666
- backgroundColor : "var(--vscode-badge-background )" ,
679
+ backgroundColor : "var(--vscode-list-hoverBackground )" ,
667
680
color : "var(--vscode-badge-foreground)" ,
668
- borderRadius : "3px " ,
681
+ borderRadius : "12px " ,
669
682
padding : "9px" ,
670
683
whiteSpace : "pre-line" ,
671
684
wordWrap : "break-word" ,
685
+ width : "60%" ,
686
+ marginLeft : "auto" ,
687
+ position : "relative" ,
672
688
} } >
689
+ < Tail2 />
673
690
< div
674
691
style = { {
675
692
display : "flex" ,
@@ -680,6 +697,7 @@ export const ChatRowContent = ({
680
697
< span style = { { display : "block" , flexGrow : 1 , padding : "4px" } } >
681
698
{ highlightMentions ( message . text ) }
682
699
</ span >
700
+
683
701
< VSCodeButton
684
702
appearance = "icon"
685
703
style = { {
0 commit comments