diff --git a/webview-ui/src/components/chat/AutoApproveDropdown.tsx b/webview-ui/src/components/chat/AutoApproveDropdown.tsx index 1fbe8cc0db9..29b0251899f 100644 --- a/webview-ui/src/components/chat/AutoApproveDropdown.tsx +++ b/webview-ui/src/components/chat/AutoApproveDropdown.tsx @@ -6,7 +6,7 @@ import { cn } from "@/lib/utils" import { useExtensionState } from "@/context/ExtensionStateContext" import { useAppTranslation } from "@/i18n/TranslationContext" import { useRooPortal } from "@/components/ui/hooks/useRooPortal" -import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, ToggleSwitch } from "@/components/ui" +import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, ToggleSwitch, Button } from "@/components/ui" import { AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle" import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles" import { useAutoApprovalState } from "@/hooks/useAutoApprovalState" @@ -228,24 +228,21 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }: const isEnabled = toggles[key] return ( - + ) })} @@ -254,44 +251,32 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }: {/* Bottom bar with Select All/None buttons */}
- - +
- { e.preventDefault() @@ -58,7 +58,7 @@ export const AutoApprovedRequestLimitWarning = memo(({ message }: AutoApprovedRe vscode.postMessage({ type: "askResponse", askResponse: "yesButtonClicked" }) }}> - + ) diff --git a/webview-ui/src/components/chat/BrowserSessionRow.tsx b/webview-ui/src/components/chat/BrowserSessionRow.tsx index c23b79f568a..57cb0cf2432 100644 --- a/webview-ui/src/components/chat/BrowserSessionRow.tsx +++ b/webview-ui/src/components/chat/BrowserSessionRow.tsx @@ -2,7 +2,6 @@ import React, { memo, useEffect, useMemo, useRef, useState } from "react" import { useSize } from "react-use" import deepEqual from "fast-deep-equal" import { useTranslation } from "react-i18next" -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react" import type { ClineMessage } from "@roo-code/types" @@ -10,6 +9,7 @@ import { BrowserAction, BrowserActionResult, ClineSayBrowserAction } from "@roo/ import { vscode } from "@src/utils/vscode" import { useExtensionState } from "@src/context/ExtensionStateContext" +import { Button } from "@src/components/ui" import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock" import { ChatRowContent } from "./ChatRow" @@ -372,16 +372,16 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => { {t("chat:browser.navigation.step", { current: currentPageIndex + 1, total: pages.length })}
- setCurrentPageIndex((i) => i - 1)}> {t("chat:browser.navigation.previous")} - - +
)} diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx index 9944aa03f6b..9adf603ee4b 100644 --- a/webview-ui/src/components/chat/ChatView.tsx +++ b/webview-ui/src/components/chat/ChatView.tsx @@ -3,7 +3,7 @@ import { useDeepCompareEffect, useEvent, useMount } from "react-use" import debounce from "debounce" import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" import removeMd from "remove-markdown" -import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" import useSound from "use-sound" import { LRUCache } from "lru-cache" import { Trans } from "react-i18next" @@ -30,7 +30,7 @@ import { useExtensionState } from "@src/context/ExtensionStateContext" import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel" import RooHero from "@src/components/welcome/RooHero" import RooTips from "@src/components/welcome/RooTips" -import { StandardTooltip } from "@src/components/ui" +import { StandardTooltip, Button } from "@src/components/ui" import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog" import TelemetryBanner from "../common/TelemetryBanner" @@ -1464,15 +1464,15 @@ const ChatViewComponent: React.ForwardRefRenderFunction {showScrollToBottom ? ( - { scrollToBottomSmooth() disableAutoScrollRef.current = false }}> - + ) : ( <> @@ -1499,13 +1499,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction - handlePrimaryButtonClick(inputValue, selectedImages)}> {primaryButtonText} - + )} {(secondaryButtonText || isStreaming) && ( @@ -1521,13 +1521,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction - handleSecondaryButtonClick(inputValue, selectedImages)}> {isStreaming ? t("chat:cancel.title") : secondaryButtonText} - + )} diff --git a/webview-ui/src/components/chat/CodeIndexPopover.tsx b/webview-ui/src/components/chat/CodeIndexPopover.tsx index 42fe9498e70..70a13377300 100644 --- a/webview-ui/src/components/chat/CodeIndexPopover.tsx +++ b/webview-ui/src/components/chat/CodeIndexPopover.tsx @@ -41,6 +41,7 @@ import { PopoverContent, Slider, StandardTooltip, + Button, } from "@src/components/ui" import { useRooPortal } from "@src/components/ui/hooks/useRooPortal" import { useEscapeKey } from "@src/hooks/useEscapeKey" @@ -1387,11 +1388,11 @@ export const CodeIndexPopover: React.FC = ({ {currentSettings.codebaseIndexEnabled && (indexingStatus.systemStatus === "Error" || indexingStatus.systemStatus === "Standby") && ( - vscode.postMessage({ type: "startIndexing" })} disabled={saveStatus === "saving" || hasUnsavedChanges}> {t("settings:codeIndex.startIndexingButton")} - + )} {currentSettings.codebaseIndexEnabled && @@ -1399,9 +1400,9 @@ export const CodeIndexPopover: React.FC = ({ indexingStatus.systemStatus === "Error") && ( - + @@ -1426,13 +1427,13 @@ export const CodeIndexPopover: React.FC = ({ )} - {saveStatus === "saving" ? t("settings:codeIndex.saving") : t("settings:codeIndex.saveSettings")} - + {/* Save Status Messages */} diff --git a/webview-ui/src/components/chat/FollowUpSuggest.tsx b/webview-ui/src/components/chat/FollowUpSuggest.tsx index d18ccc25173..39bdd010b28 100644 --- a/webview-ui/src/components/chat/FollowUpSuggest.tsx +++ b/webview-ui/src/components/chat/FollowUpSuggest.tsx @@ -108,9 +108,7 @@ export const FollowUpSuggest = ({ const isFirstSuggestion = index === 0 return ( -
+
- + +
) : ( @@ -281,9 +275,9 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
{renderCloudBenefitsContent(t)}
{!authInProgress && ( - + )} {/* Manual entry section */} diff --git a/webview-ui/src/components/common/VSCodeButtonLink.tsx b/webview-ui/src/components/common/VSCodeButtonLink.tsx index d0cd6b1c977..ee56ee4f7f8 100644 --- a/webview-ui/src/components/common/VSCodeButtonLink.tsx +++ b/webview-ui/src/components/common/VSCodeButtonLink.tsx @@ -1,19 +1,27 @@ import React from "react" -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react" +import { Button } from "@src/components/ui" interface VSCodeButtonLinkProps { href: string children: React.ReactNode + appearance?: "primary" | "secondary" [key: string]: any } -export const VSCodeButtonLink = ({ href, children, ...props }: VSCodeButtonLinkProps) => ( - - {children} - -) +export const VSCodeButtonLink = ({ href, children, appearance, ...props }: VSCodeButtonLinkProps) => { + // Map appearance to variant for the new Button component + const variant = appearance === "primary" ? "primary" : appearance === "secondary" ? "secondary" : undefined + + return ( + + + + ) +} diff --git a/webview-ui/src/components/common/VersionIndicator.tsx b/webview-ui/src/components/common/VersionIndicator.tsx index 1776a2d39aa..ac4a1c51464 100644 --- a/webview-ui/src/components/common/VersionIndicator.tsx +++ b/webview-ui/src/components/common/VersionIndicator.tsx @@ -13,7 +13,7 @@ const VersionIndicator: React.FC = ({ onClick, className return ( diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx index e7b574c490c..21b083a7b99 100644 --- a/webview-ui/src/components/history/HistoryView.tsx +++ b/webview-ui/src/components/history/HistoryView.tsx @@ -91,7 +91,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => { : `${t("history:enterSelectionMode")}` }> -
diff --git a/webview-ui/src/components/marketplace/MarketplaceView.tsx b/webview-ui/src/components/marketplace/MarketplaceView.tsx index abfcf87cc5c..0d66be48afd 100644 --- a/webview-ui/src/components/marketplace/MarketplaceView.tsx +++ b/webview-ui/src/components/marketplace/MarketplaceView.tsx @@ -103,7 +103,7 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace

{t("marketplace:title")}

- {server.status === "connecting" ? t("mcp:serverStatus.retrying") : t("mcp:serverStatus.retryConnection")} - + )} @@ -554,7 +553,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM - diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx index 1107eb44e10..2504fe914b9 100644 --- a/webview-ui/src/components/modes/ModesView.tsx +++ b/webview-ui/src/components/modes/ModesView.tsx @@ -1228,7 +1228,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
-
@@ -1682,7 +1682,7 @@ const ModesView = ({ onDone }: ModesViewProps) => { {t("prompts:createModeDialog.buttons.cancel")} diff --git a/webview-ui/src/components/settings/BrowserSettings.tsx b/webview-ui/src/components/settings/BrowserSettings.tsx index 76b4a823be9..69cf9cf59e6 100644 --- a/webview-ui/src/components/settings/BrowserSettings.tsx +++ b/webview-ui/src/components/settings/BrowserSettings.tsx @@ -1,9 +1,18 @@ -import { VSCodeButton, VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react" import { SquareMousePointer } from "lucide-react" import { HTMLAttributes, useEffect, useMemo, useState } from "react" import { Trans } from "react-i18next" -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, + Slider, + Button, +} from "@/components/ui" import { useAppTranslation } from "@/i18n/TranslationContext" import { vscode } from "@/utils/vscode" import { buildDocLink } from "@src/utils/docLinks" @@ -198,11 +207,11 @@ export const BrowserSettings = ({ placeholder={t("settings:browser.remote.urlPlaceholder")} style={{ flexGrow: 1 }} /> - +
{testResult && (
)} ({ // Mock the UI components vi.mock("@src/components/ui", () => ({ + Button: ({ children, onClick, variant, ...rest }: any) => ( + + ), Select: ({ children }: any) =>
{children}
, SelectContent: ({ children }: any) =>
{children}
, SelectItem: ({ children }: any) =>
{children}
, @@ -190,7 +195,7 @@ describe("HuggingFace Component", () => { ) // Check that the API key button is rendered - const apiKeyButton = screen.getByTestId("vscode-button") + const apiKeyButton = screen.getByTestId("button") expect(apiKeyButton).toBeInTheDocument() expect(apiKeyButton).toHaveTextContent("Get Hugging Face API Key") }) diff --git a/webview-ui/src/components/ui/button.tsx b/webview-ui/src/components/ui/button.tsx index 015cdabda00..0c97c3d61a5 100644 --- a/webview-ui/src/components/ui/button.tsx +++ b/webview-ui/src/components/ui/button.tsx @@ -5,17 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80", { variants: { variant: { - default: "border border-vscode-input-border bg-primary text-primary-foreground hover:bg-primary/90", + primary: "bg-primary text-primary-foreground hover:bg-primary/70", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70", + ghost: "hover:bg-accent hover:text-accent-foreground", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: - "border border-vscode-input-border bg-transparent hover:bg-accent hover:text-accent-foreground", - secondary: - "border border-vscode-input-border bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", + "border border-foreground/50 text-secondary-foreground bg-transparent hover:bg-secondary hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", combobox: "border border-vscode-dropdown-border focus-visible:border-vscode-focusBorder bg-vscode-dropdown-background hover:bg-transparent text-vscode-dropdown-foreground font-normal", @@ -28,7 +27,7 @@ const buttonVariants = cva( }, }, defaultVariants: { - variant: "default", + variant: "secondary", size: "default", }, }, diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx index e2af5c93d41..395e97bca8b 100644 --- a/webview-ui/src/components/welcome/WelcomeView.tsx +++ b/webview-ui/src/components/welcome/WelcomeView.tsx @@ -1,7 +1,7 @@ import { useCallback, useState, useEffect } from "react" import knuthShuffle from "knuth-shuffle-seeded" import { Trans } from "react-i18next" -import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" import posthog from "posthog-js" import type { ProviderSettings } from "@roo-code/types" @@ -13,6 +13,7 @@ import { vscode } from "@src/utils/vscode" import { useAppTranslation } from "@src/i18n/TranslationContext" import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "@src/oauth/urls" import { telemetryClient } from "@src/utils/TelemetryClient" +import { Button } from "@src/components/ui" import ApiOptions from "../settings/ApiOptions" import { Tab, TabContent } from "../common/Tab" @@ -198,9 +199,9 @@ const WelcomeView = () => { {t("welcome:importSettings")}
- + {errorMessage &&
{errorMessage}
}