Add chatGPT placeholder

Author: colinmcneil

src/extension/ui/src/chatgpt.svg

@@ -9,6 +9,7 @@ import { v1 } from "@docker/extension-api-client-types";
 import ClaudeIcon from '../../claude-ai-icon.svg'
 import GordonIcon from '../../gordon-icon.png'
 import CursorIcon from '../../cursor.svg'
+import ChatGPTIcon from '../../chatgpt.svg'
 
 type MCPClientSettingsProps = {
     mcpClientStates: { [name: string]: MCPClientState };
@@ -124,6 +125,30 @@ const MCPClientSettings = ({ mcpClientStates, onUpdate, setButtonsLoading, butto
                     </Tooltip>
                 </Stack>
             ))}
+            <Stack direction="row" spacing={1} sx={{ marginTop: 2 }}>
+                <Accordion disabled sx={{ width: '100%', marginRight: 1 }}>
+                    <AccordionSummary sx={{ width: '100%' }}>
+                        <Stack direction="row" alignItems="center" spacing={1}>
+                            <img src={ChatGPTIcon} alt="ChatGPT Desktop" style={{ width: '2em', height: '2em' }} />
+                            <Typography variant="h4">ChatGPT Desktop</Typography>
+                            {<Chip label='Coming Soon' color='info' />}
+                        </Stack>
+                    </AccordionSummary>
+                </Accordion>
+                <Tooltip sx={{ alignSelf: 'baseline' }} title={<Stack direction="column" spacing={1}>
+                    <Typography>OpenAI has announced that MCP support is coming to ChatGPT Desktop. Please check back soon for updates.</Typography>
+                </Stack>}>
+                    <Stack direction="row" alignItems="space-between" spacing={1} sx={{ marginLeft: 'auto' }}>
+                        <Button
+                            sx={connectionButtonSX}
+                            disabled color="warning" variant="outlined" size="small">
+                            <Stack direction="row" alignItems="center" spacing={1}>
+                                <Typography>Coming Soon</Typography>
+                            </Stack>
+                        </Button>
+                    </Stack>
+                </Tooltip>
+            </Stack>
         </Stack>
         <Divider />
         <Alert severity="info">

src/extension/ui/src/components/SecretList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, List, ListItem, ListItemText, Stack, Typography } from '@mui/material';
+import { Alert, Box, Card, CardContent, CardHeader, Grid2, List, ListItem, ListItemText, Stack, Typography } from '@mui/material';
 import Secrets from '../../Secrets';
 import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from '../../Constants';
 
@@ -18,25 +18,39 @@ const YourEnvironment: React.FC<YourEnvironmentProps> = ({ secrets, ddVersion, c
 
     return (
         <Stack direction="column" spacing={2}>
-            <List subheader={
-                <Stack direction="column" spacing={2} alignItems="center">
-                    <Alert title="Docker Secret Management" severity="info" sx={{ fontSize: '1.2rem', maxWidth: 600 }}>
-                        Docker Secret Management is a new feature in Docker Desktop that allows you to securely inject secrets into your containers.
-                    </Alert>
-                    <Typography variant="h2">
-                        The following secrets are available to use in your prompts:
-                    </Typography>
-                </Stack>
-            }>
-                {secrets.map((secret) => (
-                    <ListItem key={secret.name}>
-                        <ListItemText primary={<Typography variant="h6">{secret.name}</Typography>} />
-                    </ListItem>
+
+            <Stack direction="column" spacing={2}>
+
+                <Typography variant="h3">
+                    The following secrets are available to use in your prompts:
+                </Typography>
+                <Alert title="Docker Secret Management" severity="info" sx={{ width: '90vw', maxWidth: 1000, p: 1 }}>
+                    Docker Secret Management is a new feature in Docker Desktop that allows you to securely inject secrets into your containers. Only the tools which need to access the secrets will be able to access them.
+                </Alert>
+            </Stack>
+            <Grid2 container spacing={1}>
+                {secrets.sort((a, b) => a.name.localeCompare(b.name)).map((secret) => (
+                    <Grid2 key={secret.name} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+                        <Card raised sx={{ py: 0, px: 2 }}>
+                            <pre>{secret.name}</pre>
+                        </Card>
+                    </Grid2>
+                ))}
+            </Grid2>
+            <Typography variant="h3">The following configurations are available to use in your prompts:</Typography>
+            <Grid2 container spacing={1}>
+                {Object.keys(config).sort().map((key) => (
+                    <Grid2 key={key} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+                        <Card raised sx={{ py: 1, px: 2 }}>
+                            <Typography variant="h6">{key}</Typography>
+                            <Box sx={{ overflow: 'auto', maxHeight: 200, backgroundColor: 'background.secondary', borderRadius: 2, p: 1, mt: 1 }}>
+                                <pre style={{ margin: 0 }}>{JSON.stringify(config[key], null, 2)}</pre>
+                            </Box>
+                        </Card>
+                    </Grid2>
                 ))}
-            </List>
-            <Typography variant="h2">The following configurations are available to use in your prompts:</Typography>
-            <pre>{JSON.stringify(config, null, 2)}</pre>
-        </Stack>
+            </Grid2>
+        </Stack >
     );
 };