Skip to content

Commit 2fbdc45

Browse files
progress
1 parent 032036e commit 2fbdc45

File tree

9 files changed

+2080
-518
lines changed

9 files changed

+2080
-518
lines changed

package-lock.json

Lines changed: 1550 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,7 @@
245245
"devDependencies": {
246246
"@changesets/cli": "^2.27.10",
247247
"@changesets/types": "^6.0.0",
248+
"@react-dev-inspector/middleware": "^2.0.1",
248249
"@types/diff": "^5.2.1",
249250
"@types/diff-match-patch": "^1.0.36",
250251
"@types/jest": "^29.5.14",
@@ -264,6 +265,7 @@
264265
"lint-staged": "^15.2.11",
265266
"npm-run-all": "^4.1.5",
266267
"prettier": "^3.4.2",
268+
"react-dev-inspector": "^2.0.1",
267269
"ts-jest": "^29.2.5",
268270
"typescript": "^5.4.5"
269271
},

webview-ui/src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ExtensionStateContextProvider, useExtensionState } from "./context/Exte
88
import { vscode } from "./utils/vscode"
99
import McpView from "./components/mcp/McpView"
1010
import PromptsView from "./components/prompts/PromptsView"
11+
import { Inspector } from "react-dev-inspector"
1112

1213
const AppContent = () => {
1314
const { didHydrateState, showWelcome, shouldShowAnnouncement } = useExtensionState()
@@ -73,6 +74,7 @@ const AppContent = () => {
7374
return (
7475
<>
7576
<>
77+
<Inspector />
7678
{showSettings && <SettingsView onDone={() => setShowSettings(false)} />}
7779
{showHistory && <HistoryView onDone={() => setShowHistory(false)} />}
7880
{showMcp && <McpView onDone={() => setShowMcp(false)} />}

webview-ui/src/components/chat/AutoApproveMenu.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,8 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
157157
return (
158158
<div
159159
style={{
160-
padding: "0 15px",
160+
padding: "6px 6px 10px 6px",
161+
// paddingBottom: "10px",
161162
userSelect: "none",
162163
overflowY: "auto",
163164
...style,

webview-ui/src/components/chat/ChatRow.tsx

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ import {
2929
vscFocusBorder,
3030
vscInputBackground,
3131
} from "../ui"
32-
import { PencilIcon, PencilSquareIcon, ServerIcon } from "@heroicons/react/24/outline"
32+
import { PencilIcon, PencilSquareIcon, ServerIcon, PlusCircleIcon } from "@heroicons/react/24/outline"
3333
import { vsCodeBadge } from "@vscode/webview-ui-toolkit"
3434
import { ViewfinderCircleIcon } from "@heroicons/react/24/outline"
3535
import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
36+
import { Tail, Tail2 } from "../ui/tail"
3637

3738
interface ChatRowProps {
3839
message: ClineMessage
@@ -289,6 +290,7 @@ export const ChatRowContent = ({
289290
<PencilIcon className="w-5 h-5" />
290291
<div className="flex flex-col">
291292
<span className="font-bold uppercase">Roo wants to edit</span>
293+
292294
<span
293295
style={{
294296
color: "var(--vscode-descriptionForeground)",
@@ -316,9 +318,12 @@ export const ChatRowContent = ({
316318
case "newFileCreated":
317319
return (
318320
<>
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>
322327
</div>
323328
<CodeAccordian
324329
isLoading={message.partial}
@@ -575,13 +580,21 @@ export const ChatRowContent = ({
575580
}}
576581
onClick={onToggleExpand}>
577582
{/* <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>
583592
</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+
)}
585598
</div>
586599
{/* </VSCodeBadge> */}
587600
</div>
@@ -663,13 +676,17 @@ export const ChatRowContent = ({
663676
return (
664677
<div
665678
style={{
666-
backgroundColor: "var(--vscode-badge-background)",
679+
backgroundColor: "var(--vscode-list-hoverBackground)",
667680
color: "var(--vscode-badge-foreground)",
668-
borderRadius: "3px",
681+
borderRadius: "12px",
669682
padding: "9px",
670683
whiteSpace: "pre-line",
671684
wordWrap: "break-word",
685+
width: "60%",
686+
marginLeft: "auto",
687+
position: "relative",
672688
}}>
689+
<Tail2 />
673690
<div
674691
style={{
675692
display: "flex",
@@ -680,6 +697,7 @@ export const ChatRowContent = ({
680697
<span style={{ display: "block", flexGrow: 1, padding: "4px" }}>
681698
{highlightMentions(message.text)}
682699
</span>
700+
683701
<VSCodeButton
684702
appearance="icon"
685703
style={{

0 commit comments

Comments
 (0)