konnosDashboard
McpConfigurationOptions.tsx81 lines · main
1'use client'
2
3import { cn, Switch } from 'ui'
4import { Label } from 'ui/src/components/shadcn/ui/label'
5
6import { InfoTooltip } from '../../info-tooltip'
7import {
8 MultiSelector,
9 MultiSelectorContent,
10 MultiSelectorItem,
11 MultiSelectorList,
12 MultiSelectorTrigger,
13} from '../../multi-select'
14import type { McpFeatureGroup } from '../types'
15
16interface McpConfigurationOptionsProps {
17 readonly: boolean
18 onReadonlyChange: (readonly: boolean) => void
19 selectedFeatures: string[]
20 onFeaturesChange: (features: string[]) => void
21 featureGroups: McpFeatureGroup[]
22 className?: string
23}
24
25export function McpConfigurationOptions({
26 readonly,
27 onReadonlyChange,
28 selectedFeatures,
29 onFeaturesChange,
30 featureGroups,
31 className,
32}: McpConfigurationOptionsProps) {
33 return (
34 <div className={cn('flex flex-col gap-4 lg:flex-row lg:gap-12 lg:items-baseline', className)}>
35 {/* Readonly Mode */}
36 <div className="space-y-3 lg:shrink-0">
37 <div className="flex items-center gap-2">
38 <Label htmlFor="readonly" className="text-sm">
39 Read-only
40 </Label>
41 <InfoTooltip>Only allow read operations on your database</InfoTooltip>
42 </div>
43 <div className="flex items-center space-x-2">
44 <Switch id="readonly" checked={readonly} onCheckedChange={onReadonlyChange} />
45 </div>
46 </div>
47
48 {/* Feature Groups */}
49 <div className="space-y-3 lg:flex-1">
50 <div className="flex items-center gap-2">
51 <Label className="text-sm">Feature Groups</Label>
52 <InfoTooltip>
53 Only enable a subset of features. Helps keep the number of tools within MCP client
54 limits
55 </InfoTooltip>
56 </div>
57
58 <MultiSelector values={selectedFeatures} onValuesChange={onFeaturesChange}>
59 <MultiSelectorTrigger
60 className="w-full"
61 label="All features except Storage enabled by default"
62 badgeLimit="wrap"
63 showIcon={true}
64 />
65 <MultiSelectorContent>
66 <MultiSelectorList>
67 {featureGroups.map((feature) => (
68 <MultiSelectorItem key={feature.id} value={feature.id}>
69 <div className="flex flex-col">
70 <span className="font-medium">{feature.name}</span>
71 <span className="text-xs text-foreground-light">{feature.description}</span>
72 </div>
73 </MultiSelectorItem>
74 ))}
75 </MultiSelectorList>
76 </MultiSelectorContent>
77 </MultiSelector>
78 </div>
79 </div>
80 )
81}