diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index f06453aca9..61361ce6e5 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -5,6 +5,7 @@ import ChatView from "./components/chat/ChatView" import HistoryView from "./components/history/HistoryView" import SettingsView from "./components/settings/SettingsView" import WelcomeView from "./components/welcome/WelcomeView" +import AccountOptions from "./components/account/AccountOptions" import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext" import { vscode } from "./utils/vscode" import McpView from "./components/mcp/McpView" @@ -14,6 +15,7 @@ const AppContent = () => { const [showSettings, setShowSettings] = useState(false) const [showHistory, setShowHistory] = useState(false) const [showMcp, setShowMcp] = useState(false) + const [showAccount, setShowAccount] = useState(false) const [showAnnouncement, setShowAnnouncement] = useState(false) const handleMessage = useCallback((e: MessageEvent) => { @@ -25,21 +27,31 @@ const AppContent = () => { setShowSettings(true) setShowHistory(false) setShowMcp(false) + setShowAccount(false) break case "historyButtonClicked": setShowSettings(false) setShowHistory(true) setShowMcp(false) + setShowAccount(false) break case "mcpButtonClicked": setShowSettings(false) setShowHistory(false) setShowMcp(true) + setShowAccount(false) + break + case "accountButtonClicked": + setShowSettings(false) + setShowHistory(false) + setShowMcp(false) + setShowAccount(true) break case "chatButtonClicked": setShowSettings(false) setShowHistory(false) setShowMcp(false) + setShowAccount(false) break } break @@ -68,6 +80,7 @@ const AppContent = () => { {showSettings && setShowSettings(false)} />} {showHistory && setShowHistory(false)} />} {showMcp && setShowMcp(false)} />} + {showAccount && } {/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */} { @@ -75,7 +88,7 @@ const AppContent = () => { setShowMcp(false) setShowHistory(true) }} - isHidden={showSettings || showHistory || showMcp} + isHidden={showSettings || showHistory || showMcp || showAccount} showAnnouncement={showAnnouncement} hideAnnouncement={() => { setShowAnnouncement(false) diff --git a/webview-ui/src/components/account/AccountOptions.tsx b/webview-ui/src/components/account/AccountOptions.tsx new file mode 100644 index 0000000000..e2e366b212 --- /dev/null +++ b/webview-ui/src/components/account/AccountOptions.tsx @@ -0,0 +1,15 @@ +import { memo } from "react" +import { vscode } from "../../utils/vscode" + +const AccountOptions = () => { + const handleAccountClick = () => { + vscode.postMessage({ type: "accountButtonClicked" }) + } + + // Call handleAccountClick immediately when component mounts + handleAccountClick() + + return null // This component doesn't render anything +} + +export default memo(AccountOptions)