BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add McpDropdown component with related UI enhancements

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-01-08 23:14:29 +02:00
parent 699fc7596a
commit 6eace604de
13 changed files with 533 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/Header.tsx
+25 -18
View File
@@ -14,6 +14,7 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
import { useDeviceInfo } from '@/lib/device';
import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
import { useDiffFileCount } from '@/components/views/DiffView';
import { McpDropdown } from '@/components/mcp/McpDropdown';
interface TabConfig {
id: MainTab;
@@ -397,22 +398,25 @@ export const Header: React.FC = () => {
<div className="flex-1" />
{}
<div className="flex items-center gap-1 pr-3">
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
type="button"
onClick={toggleCommandPalette}
aria-label="Open command palette"
className={headerIconButtonClass}
>
<RiCommandLine className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Command Palette ({getModifierLabel()}+K)</p>
</TooltipContent>
</Tooltip>
<div className="flex items-center gap-1 pr-3">
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
type="button"
onClick={toggleCommandPalette}
aria-label="Open command palette"
className={headerIconButtonClass}
>
<RiCommandLine className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Command Palette ({getModifierLabel()}+K)</p>
</TooltipContent>
</Tooltip>
<McpDropdown headerIconButtonClass={headerIconButtonClass} />
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
@@ -454,8 +458,9 @@ export const Header: React.FC = () => {
)}
</div>
<div className="app-region-no-drag flex items-center gap-1.5">
<div className="flex items-center" role="tablist" aria-label="Main navigation">
<div className="app-region-no-drag flex items-center gap-1.5">
<div className="flex items-center" role="tablist" aria-label="Main navigation">
{tabs.map((tab) => {
const isActive = activeMainTab === tab.id;
const Icon = tab.icon;
@@ -501,6 +506,8 @@ export const Header: React.FC = () => {
})}
</div>
<McpDropdown headerIconButtonClass={headerIconButtonClass} />
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
packages/ui/src/components/layout/VSCodeLayout.tsx
+9 -1
View File
@@ -5,6 +5,7 @@ import { ChatView, SettingsView } from '@/components/views';
import { useSessionStore } from '@/stores/useSessionStore';
import { useConfigStore } from '@/stores/useConfigStore';
import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
import { McpDropdown } from '@/components/mcp/McpDropdown';
import { RiAddLine, RiArrowLeftLine, RiRobot2Line, RiSettings3Line } from '@remixicon/react';
// Width threshold for mobile vs desktop layout in settings
@@ -218,6 +219,7 @@ export const VSCodeLayout: React.FC = () => {
: sessions.find(s => s.id === currentSessionId)?.title || 'Chat'}
showBack
onBack={handleBackToSessions}
showMcp
showContextUsage
/>
<div className="flex-1 overflow-hidden">
@@ -238,10 +240,11 @@ interface VSCodeHeaderProps {
onNewSession?: () => void;
onSettings?: () => void;
onAgentManager?: () => void;
showMcp?: boolean;
showContextUsage?: boolean;
}
const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, onNewSession, onSettings, onAgentManager, showContextUsage }) => {
const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, onNewSession, onSettings, onAgentManager, showMcp, showContextUsage }) => {
const { getCurrentModel } = useConfigStore();
const getContextUsage = useSessionStore((state) => state.getContextUsage);
@@ -283,6 +286,11 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
<RiRobot2Line className="h-5 w-5" />
</button>
)}
{showMcp && (
<McpDropdown
headerIconButtonClass="inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
/>
)}
{onSettings && (
<button
onClick={onSettings}