Implement prompt configs

colinmcneil · colinmcneil · commit f24020f1f7d5 · 2025-03-12T17:00:26.000-04:00
diff --git a/src/extension/ui/package-lock.json b/src/extension/ui/package-lock.json
diff --git a/src/extension/ui/package.json b/src/extension/ui/package.json
@@ -11,6 +11,7 @@
     "@mui/icons-material": "6.4.5",
     "@mui/material": "6.4.5",
     "ansi-to-html": "^0.7.2",
+    "json-edit-react": "^1.23.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yaml": "^2.3.1"
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -10,6 +10,7 @@ import { POLL_INTERVAL } from './Constants';
 import MCPCatalogLogo from './MCP Catalog.svg'
 import Settings from './components/Settings';
 import { getMCPClientStates, MCPClientState } from './MCPClients';
+import PromptConfig from './components/PromptConfig';
 
 export const client = createDockerDesktopClient();
 
@@ -20,10 +21,12 @@ const DEFAULT_SETTINGS = {
 
 export function App() {
   const [canRegister, setCanRegister] = useState(false);
-  const [registryItems, setRegistryItems] = useState<{ [key: string]: { ref: string } }>({});
+  const [registryItems, setRegistryItems] = useState<{ [key: string]: { ref: string; config: any } }>({});
   const [imagesLoadingResults, setImagesLoadingResults] = useState<ExecResult | null>(null);
   const [settings, setSettings] = useState<{ showModal: boolean, pollIntervalSeconds: number }>(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings') || '{}') : DEFAULT_SETTINGS);
   const [mcpClientStates, setMcpClientStates] = useState<{ [name: string]: MCPClientState }>({});
+  const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
+
   const loadRegistry = async () => {
     setCanRegister(false);
     try {
@@ -70,15 +73,21 @@ export function App() {
   }
 
   useEffect(() => {
-    startImagesLoading();
-    loadRegistry();
-    updateMCPClientStates();
-    const interval = setInterval(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    startImagesLoading().then(() => {
       loadRegistry();
       updateMCPClientStates();
-    }, POLL_INTERVAL);
+      interval = setInterval(() => {
+        loadRegistry();
+        updateMCPClientStates();
+      }, POLL_INTERVAL);
+    })
+
     return () => {
-      clearInterval(interval)
+      if (interval) {
+        clearInterval(interval)
+      }
     }
   }, []);
 
@@ -103,20 +112,37 @@ export function App() {
           <Settings onUpdate={updateMCPClientStates} mcpClientStates={mcpClientStates} settings={settings} setSettings={setSettings} />
         </DialogContent>
       </Dialog>
+      {configuringItem && <Dialog open={configuringItem !== null} onClose={() => setConfiguringItem(null)}>
+        <DialogTitle>
+          <Typography variant="h6">
+            Config
+          </Typography>
+        </DialogTitle>
+        <DialogContent>
+          <PromptConfig client={client} catalogItem={configuringItem!} registryItem={registryItems[configuringItem!.name]} onRegistryChange={loadRegistry} />
+        </DialogContent>
+      </Dialog>}
       <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
         <img src={MCPCatalogLogo} alt="MCP Catalog" height={100} />
         {hasMCPConfigured ? <></> : <Alert action={<Button variant='outlined' color='secondary' onClick={() => setSettings({ ...settings, showModal: true })}>Configure</Button>} severity="error" sx={{ fontWeight: 'bold' }}>MCP Clients are not configured.  Please configure MCP Clients to use the MCP Catalog.</Alert>}
-        <CatalogGrid settingsBadgeProps={hasMCPConfigured ? {} : {
-          color: hasMCPConfigured ? 'default' : 'error',
-          badgeContent: '0 MCP Clients',
-          sx: {
-            width: 80,
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        }} showSettings={() => setSettings({ ...settings, showModal: true })} registryItems={registryItems} canRegister={canRegister} client={client} onRegistryChange={loadRegistry} />
+        <CatalogGrid
+          settingsBadgeProps={hasMCPConfigured ? {} : {
+            color: hasMCPConfigured ? 'default' : 'error',
+            badgeContent: '0 MCP Clients',
+            sx: {
+              width: 80,
+              height: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+          }}
+          setConfiguringItem={setConfiguringItem}
+          showSettings={() => setSettings({ ...settings, showModal: true })}
+          registryItems={registryItems}
+          canRegister={canRegister}
+          client={client}
+          onRegistryChange={loadRegistry} />
       </Stack>
     </>
   )
diff --git a/src/extension/ui/src/MergeDeep.ts b/src/extension/ui/src/MergeDeep.ts
@@ -0,0 +1,31 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: any) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function mergeDeep(target: any, ...sources: any[]) {
+    if (!sources.length) return target;
+    const source = sources.shift();
+
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key]) Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            } else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+
+    return mergeDeep(target, ...sources);
+}
diff --git a/src/extension/ui/src/Registry.ts b/src/extension/ui/src/Registry.ts
@@ -6,7 +6,7 @@ export const getRegistry = async (client: v1.DockerDesktopClient) => {
     const parseRegistry = async () => {
         const registry = await readFileInPromptsVolume(client, 'registry.yaml')
         if (registry) {
-            return parse(registry)['registry'] as Promise<{ [key: string]: { ref: string } }>;
+            return parse(registry)['registry'] as Promise<{ [key: string]: { ref: string; config: any } }>;
         }
         return {};
     }
diff --git a/src/extension/ui/src/components/CatalogGrid.tsx b/src/extension/ui/src/components/CatalogGrid.tsx
@@ -19,6 +19,7 @@ interface CatalogGridProps {
     onRegistryChange: () => void;
     showSettings: () => void;
     settingsBadgeProps: BadgeProps;
+    setConfiguringItem: (item: CatalogItemWithName) => void;
 }
 
 const filterCatalog = (catalogItems: CatalogItemWithName[], registryItems: { [key: string]: { ref: string } }, search: string) =>
@@ -40,7 +41,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     client,
     onRegistryChange,
     showSettings,
-    settingsBadgeProps
+    settingsBadgeProps,
+    setConfiguringItem
 }) => {
     const [catalogItems, setCatalogItems] = useState<CatalogItemWithName[]>([]);
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
@@ -207,6 +209,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 {filteredCatalogItems.map((item) => (
                     <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={item.name}>
                         <CatalogItemCard
+                            setConfiguringItem={setConfiguringItem}
                             openUrl={() => {
                                 client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
                             }}
@@ -244,7 +247,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         }} canRegister={canRegister} registered={true} register={registerCatalogItem} unregister={unregisterCatalogItem} onSecretChange={async (secret) => {
                             await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
                             loadSecrets();
-                        }} secrets={secrets} />
+                        }} secrets={secrets} setConfiguringItem={setConfiguringItem} />
                     </Grid2>
                 ))}
             </Grid2>}
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
@@ -1,15 +1,18 @@
-import { Badge, CircularProgress, Dialog, DialogContent, DialogTitle, Divider, IconButton, List, ListItem, ListItemIcon, ListItemText, Stack, Switch, TextField, Tooltip } from "@mui/material";
+import { Badge, CircularProgress, Dialog, DialogContent, DialogTitle, Divider, IconButton, List, ListItem, ListItemIcon, ListItemText, Stack, Switch, TextField, Tooltip, useTheme } from "@mui/material";
 import Button from '@mui/material/Button';
 import { Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
 import { Ref } from "../Refs";
 import { useEffect, useState } from "react";
 import { trackEvent } from "../Usage";
-import { Article, AttachFile, Build, CheckBox, Delete, LockOpenRounded, LockReset, LockRounded, NoEncryptionGmailerrorred, Save } from "@mui/icons-material";
+import { Article, AttachFile, Build, CheckBox, Delete, LockOpenRounded, LockReset, LockRounded, NoEncryptionGmailerrorred, Save, Settings } from "@mui/icons-material";
 import Secrets from "../Secrets";
 import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from "../Constants";
-
+import { DataType, githubDarkTheme, githubLightTheme, JsonEditor, NodeData } from "json-edit-react";
+import PromptConfig, { Config } from "./PromptConfig";
 const iconSize = 16
 
+
+
 export interface CatalogItem {
     description?: string;
     icon?: string;
@@ -18,13 +21,15 @@ export interface CatalogItem {
     prompts: number;
     resources: object[];
     tools: object[];
+    config?: Config;
 }
 
 export interface CatalogItemWithName extends CatalogItem {
     name: string;
 }
 
-export function CatalogItemCard({ openUrl, item, canRegister, registered, register, unregister, onSecretChange, secrets, ddVersion }: { openUrl: () => void, item: CatalogItemWithName, canRegister: boolean, registered: boolean, register: (item: CatalogItemWithName) => Promise<void>, unregister: (item: CatalogItemWithName, showNotification?: boolean) => Promise<void>, onSecretChange: (secret: { name: string, value: string }) => Promise<void>, secrets: Secrets.Secret[], ddVersion: { version: string, build: number } }) {
+
+export function CatalogItemCard({ setConfiguringItem, openUrl, item, canRegister, registered, register, unregister, onSecretChange, secrets, ddVersion }: { setConfiguringItem: (item: CatalogItemWithName) => void, openUrl: () => void, item: CatalogItemWithName, canRegister: boolean, registered: boolean, register: (item: CatalogItemWithName) => Promise<void>, unregister: (item: CatalogItemWithName, showNotification?: boolean) => Promise<void>, onSecretChange: (secret: { name: string, value: string }) => Promise<void>, secrets: Secrets.Secret[], ddVersion: { version: string, build: number } }) {
     const loadAssignedSecrets = () => {
         const assignedSecrets = Secrets.getAssignedSecrets(item, secrets);
         setAssignedSecrets(assignedSecrets)
@@ -152,29 +157,39 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                                     </Tooltip>
                                 ))}
                             </Stack>
-                            <Tooltip open={tooltipOpen} onClose={() => setTooltipOpen(false)} onOpen={() => setTooltipOpen(true)} title={hasAllSecrets ? registered ? "Blocking this tile will remove its tools, resources and prompts from being used in any MCP clients you have connected." : "Allowing this tile will expose its tools, resources and prompts to any MCP clients you have connected." : "You need to set all expected secrets to allow this tile."}>
-                                {!hasAllSecrets ? <LockRounded /> : isRegistering ? <CircularProgress size={20} /> : <Switch
-                                    size="small"
-                                    color={registered ? 'success' : 'primary'}
-                                    checked={registered && hasAllSecrets}
-                                    onChange={() => {
-                                        setTooltipOpen(false)
-                                        trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
-                                        setIsRegistering(true)
-                                        if (registered) {
-                                            unregister(item).then(() => {
-                                                setIsRegistering(false)
-                                            })
-                                        } else {
-                                            register(item).then(() => {
-                                                setIsRegistering(false)
-                                            })
-                                        }
+                            <Stack direction="row" spacing={1} alignItems="center" justifyContent="flex-end">
+                                {/* WIP */}
+                                {item.config && registered && (
+                                    <Tooltip title="Configure this item">
+                                        <IconButton onClick={() => setConfiguringItem(item)}>
+                                            <Settings />
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                                <Tooltip open={tooltipOpen} onClose={() => setTooltipOpen(false)} onOpen={() => setTooltipOpen(true)} title={hasAllSecrets ? registered ? "Blocking this tile will remove its tools, resources and prompts from being used in any MCP clients you have connected." : "Allowing this tile will expose its tools, resources and prompts to any MCP clients you have connected." : "You need to set all expected secrets to allow this tile."}>
+                                    {!hasAllSecrets ? <LockRounded /> : isRegistering ? <CircularProgress size={20} /> : <Switch
+                                        size="small"
+                                        color={registered ? 'success' : 'primary'}
+                                        checked={registered && hasAllSecrets}
+                                        onChange={() => {
+                                            setTooltipOpen(false)
+                                            trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
+                                            setIsRegistering(true)
+                                            if (registered) {
+                                                unregister(item).then(() => {
+                                                    setIsRegistering(false)
+                                                })
+                                            } else {
+                                                register(item).then(() => {
+                                                    setIsRegistering(false)
+                                                })
+                                            }
+                                        }}
+                                        disabled={!canRegister || isRegistering}
+                                    />}
+                                </Tooltip>
 
-                                    }}
-                                    disabled={!canRegister || isRegistering}
-                                />}
-                            </Tooltip>
+                            </Stack>
                         </Stack>
 
                     </CardActions>
diff --git a/src/extension/ui/src/components/PromptConfig.tsx b/src/extension/ui/src/components/PromptConfig.tsx
diff --git a/src/extension/ui/yarn.lock b/src/extension/ui/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export const getRegistry = async (client: v1.DockerDesktopClient) => {`
`6`	`6`	`const parseRegistry = async () => {`
`7`	`7`	`const registry = await readFileInPromptsVolume(client, 'registry.yaml')`
`8`	`8`	`if (registry) {`
`9`		`- return parse(registry)['registry'] as Promise<{ [key: string]: { ref: string } }>;`
	`9`	`+ return parse(registry)['registry'] as Promise<{ [key: string]: { ref: string; config: any } }>;`
`10`	`10`	`}`
`11`	`11`	`return {};`
`12`	`12`	`}`