docs: clean up the prompt headers and componentize them

Author: killerapp

examples/context-editor/src/App.tsx

@@ -1,130 +1,40 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Paper, Box, Button, Typography, Tabs, Tab, Link as MuiLink, Tooltip, IconButton, Snackbar, Grid, Accordion, AccordionSummary, AccordionDetails, Modal } from '@mui/material';
+import React, { useState } from 'react';
+import { Container, Paper, Box, Button, Typography, Link as MuiLink, Snackbar, IconButton, Grid, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
-import DescriptionIcon from '@mui/icons-material/Description';
-import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
-import BlockIcon from '@mui/icons-material/Block';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DownloadIcon from '@mui/icons-material/Download';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CloseIcon from '@mui/icons-material/Close';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import theme from './theme';
 import ContextForm from './components/ContextForm';
 import ContextDocsForm from './components/ContextDocsForm';
 import ContextIgnoreForm from './components/ContextIgnoreForm';
+import PromptViewer from './components/PromptViewer';
+import NavTabs from './components/NavTabs';
+import SpecificationModal from './components/SpecificationModal';
+import ActionButtons from './components/ActionButtons';
+import { handleCopyToClipboard, handleDownload } from './utils/helpers';
+import usePrompts from './hooks/usePrompts';
+import useSnackbar from './hooks/useSnackbar';
 import './App.css';
 
 // Conditional base path for GitHub Pages
 const BASE_PATH = process.env.NODE_ENV === 'production' ? '/codebase-context-spec' : '';
 
-const PromptViewer: React.FC<{ title: string, content: string, onCopy: () => void }> = ({ title, content, onCopy }) => {
-  return (
-    <Box mb={2}>
-      <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
-        <Typography variant="h6">{title}</Typography>
-        <Button startIcon={<ContentCopyIcon />} onClick={onCopy}>
-          Copy
-        </Button>
-      </Box>
-      <Box className="code-preview" style={{ maxHeight: '300px', overflow: 'auto' }}>
-        <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
-          {content}
-        </pre>
-      </Box>
-    </Box>
-  );
-};
-
-const SpecificationViewer: React.FC<{ content: string, onCopy: () => void }> = ({ content, onCopy }) => {
-  return (
-    <Box height="100%" display="flex" flexDirection="column">
-      <Box display="flex" justifyContent="flex-end" mb={2}>
-        <Button startIcon={<ContentCopyIcon />} onClick={onCopy}>
-          Copy Specification
-        </Button>
-      </Box>
-      <Box flexGrow={1} overflow="auto">
-        <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0 }}>
-          {content}
-        </pre>
-      </Box>
-    </Box>
-  );
-};
-
 const App: React.FC = () => {
   const [generatedContent, setGeneratedContent] = useState('');
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-  const [codebaseContextContent, setCodebaseContextContent] = useState('');
-  const [codingAssistantPromptContent, setCodingAssistantPromptContent] = useState('');
-  const [generateContextPromptContent, setGenerateContextPromptContent] = useState('');
   const [specModalOpen, setSpecModalOpen] = useState(false);
 
-  useEffect(() => {
-    const fetchPrompts = async () => {
-      try {
-        const [codebaseContext, codingAssistantPrompt, generateContextPrompt] = await Promise.all([
-          fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/CODEBASE-CONTEXT.md').then(res => res.text()),
-          fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/CODING-ASSISTANT-PROMPT.md').then(res => res.text()),
-          fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/GENERATE-CONTEXT-PROMPT.md').then(res => res.text())
-        ]);
-
-        setCodebaseContextContent(codebaseContext);
-        setCodingAssistantPromptContent(codingAssistantPrompt);
-        setGenerateContextPromptContent(generateContextPrompt);
-      } catch (error) {
-        console.error('Error fetching prompts:', error);
-        setSnackbarMessage('Error fetching prompts');
-        setSnackbarOpen(true);
-      }
-    };
-
-    fetchPrompts();
-  }, []);
+  const { snackbarOpen, snackbarMessage, showSnackbar, closeSnackbar } = useSnackbar();
+  const { codebaseContext, generateContextPrompt, codingAssistantPrompt } = usePrompts(
+    showSnackbar,
+    (open: boolean) => open ? showSnackbar('') : closeSnackbar()
+  );
 
   const handleFormSubmit = (content: string) => {
     setGeneratedContent(content);
   };
 
-  const handleCopyToClipboard = (content: string) => {
-    navigator.clipboard.writeText(content).then(() => {
-      setSnackbarMessage('Copied to clipboard!');
-      setSnackbarOpen(true);
-    }, (err) => {
-      console.error('Could not copy text: ', err);
-    });
-  };
-
-  const handleDownload = () => {
-    const element = document.createElement('a');
-    const file = new Blob([generatedContent], {type: 'text/plain'});
-    element.href = URL.createObjectURL(file);
-    element.download = 'generated_context.md';
-    document.body.appendChild(element);
-    element.click();
-    document.body.removeChild(element);
-    setSnackbarMessage('File downloaded!');
-    setSnackbarOpen(true);
-  };
-
-  const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setSnackbarOpen(false);
-  };
-
-  const handleOpenSpecModal = () => {
-    setSpecModalOpen(true);
-  };
-
-  const handleCloseSpecModal = () => {
-    setSpecModalOpen(false);
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <Router basename={BASE_PATH}>
@@ -135,7 +45,7 @@ const App: React.FC = () => {
                 Codebase Context Editor
               </Typography>
               <Box display="flex" alignItems="center">
-                <Button variant="outlined" onClick={handleOpenSpecModal} sx={{ mr: 2 }}>
+                <Button variant="outlined" onClick={() => setSpecModalOpen(true)} sx={{ mr: 2 }}>
                   View Latest Specification
                 </Button>
                 <MuiLink href="https://github.com/Agentic-Insights/codebase-context-spec" target="_blank" rel="noopener noreferrer">
@@ -154,16 +64,20 @@ const App: React.FC = () => {
                 <Grid container spacing={2}>
                   <Grid item xs={12} md={6}>
                     <PromptViewer 
-                      title="CODING-ASSISTANT-PROMPT.md" 
-                      content={codingAssistantPromptContent} 
-                      onCopy={() => handleCopyToClipboard(codingAssistantPromptContent)} 
+                      title="Generate Context Prompt" 
+                      subtitle="GENERATE-CONTEXT-PROMPT.md"
+                      explanation={generateContextPrompt.explanation}
+                      content={generateContextPrompt.content} 
+                      onCopy={() => handleCopyToClipboard(generateContextPrompt.content, showSnackbar, () => showSnackbar(''))} 
                     />
                   </Grid>
                   <Grid item xs={12} md={6}>
                     <PromptViewer 
-                      title="GENERATE-CONTEXT-PROMPT.md" 
-                      content={generateContextPromptContent} 
-                      onCopy={() => handleCopyToClipboard(generateContextPromptContent)} 
+                      title="Coding Assistant Prompt" 
+                      subtitle="CODING-ASSISTANT-PROMPT.md"
+                      explanation={codingAssistantPrompt.explanation}
+                      content={codingAssistantPrompt.content} 
+                      onCopy={() => handleCopyToClipboard(codingAssistantPrompt.content, showSnackbar, () => showSnackbar(''))} 
                     />
                   </Grid>
                 </Grid>
@@ -177,66 +91,19 @@ const App: React.FC = () => {
                 <Route path="/contextignore" element={<ContextIgnoreForm onSubmit={handleFormSubmit} />} />
               </Routes>
             </Box>
-            <Box className="action-buttons">
-              <Tooltip title="Copy to clipboard" arrow>
-                <Button
-                  onClick={() => handleCopyToClipboard(generatedContent)}
-                  variant="contained"
-                  startIcon={<ContentCopyIcon />}
-                  disabled={!generatedContent}
-                >
-                  Copy
-                </Button>
-              </Tooltip>
-              <Tooltip title="Download file" arrow>
-                <Button
-                  onClick={handleDownload}
-                  variant="contained"
-                  startIcon={<DownloadIcon />}
-                  disabled={!generatedContent}
-                >
-                  Download
-                </Button>
-              </Tooltip>
-            </Box>
+            <ActionButtons
+              generatedContent={generatedContent}
+              onCopy={() => handleCopyToClipboard(generatedContent, showSnackbar, () => showSnackbar(''))}
+              onDownload={() => handleDownload(generatedContent, 'generated_context.md', showSnackbar, () => showSnackbar(''))}
+            />
           </Paper>
 
-          <Modal
+          <SpecificationModal
             open={specModalOpen}
-            onClose={handleCloseSpecModal}
-            aria-labelledby="spec-modal-title"
-          >
-            <Box 
-              sx={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                width: '80%',
-                height: '80%',
-                bgcolor: 'background.paper',
-                boxShadow: 24,
-                p: 4,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-                <Typography id="spec-modal-title" variant="h6" component="h2">
-                  Latest Specification (CODEBASE-CONTEXT.md)
-                </Typography>
-                <IconButton onClick={handleCloseSpecModal} size="small">
-                  <CloseIcon />
-                </IconButton>
-              </Box>
-              <Box flexGrow={1} overflow="hidden">
-                <SpecificationViewer 
-                  content={codebaseContextContent} 
-                  onCopy={() => handleCopyToClipboard(codebaseContextContent)} 
-                />
-              </Box>
-            </Box>
-          </Modal>
+            onClose={() => setSpecModalOpen(false)}
+            content={codebaseContext.content}
+            onCopy={() => handleCopyToClipboard(codebaseContext.content, showSnackbar, () => showSnackbar(''))}
+          />
 
           <Snackbar
             anchorOrigin={{
@@ -245,14 +112,14 @@ const App: React.FC = () => {
             }}
             open={snackbarOpen}
             autoHideDuration={2000}
-            onClose={handleCloseSnackbar}
+            onClose={closeSnackbar}
             message={snackbarMessage}
             action={
               <IconButton
                 size="small"
                 aria-label="close"
                 color="inherit"
-                onClick={handleCloseSnackbar}
+                onClick={closeSnackbar}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>
@@ -264,46 +131,4 @@ const App: React.FC = () => {
   );
 };
 
-const NavTabs: React.FC = () => {
-  const location = useLocation();
-  const currentForm = getCurrentForm(location.pathname);
-
-  return (
-    <Tabs value={currentForm} aria-label="file type tabs" variant="fullWidth">
-      <Tab 
-        icon={<DescriptionIcon />} 
-        label=".context.md" 
-        component={Link} 
-        to="/" 
-        sx={{ textTransform: 'lowercase' }}
-      />
-      <Tab 
-        icon={<LibraryBooksIcon />} 
-        label=".contextdocs.md" 
-        component={Link} 
-        to="/contextdocs" 
-        sx={{ textTransform: 'lowercase' }}
-      />
-      <Tab 
-        icon={<BlockIcon />} 
-        label=".contextignore" 
-        component={Link} 
-        to="/contextignore" 
-        sx={{ textTransform: 'lowercase' }}
-      />
-    </Tabs>
-  );
-};
-
-const getCurrentForm = (pathname: string) => {
-  switch (pathname) {
-    case '/contextdocs':
-      return 1;
-    case '/contextignore':
-      return 2;
-    default:
-      return 0;
-  }
-};
-
 export default App;

examples/context-editor/src/components/ActionButtons.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Button, Tooltip } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DownloadIcon from '@mui/icons-material/Download';
+
+interface ActionButtonsProps {
+  generatedContent: string;
+  onCopy: () => void;
+  onDownload: () => void;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({ generatedContent, onCopy, onDownload }) => {
+  return (
+    <Box className="action-buttons">
+      <Tooltip title="Copy to clipboard" arrow>
+        <span>
+          <Button
+            onClick={onCopy}
+            variant="contained"
+            startIcon={<ContentCopyIcon />}
+            disabled={!generatedContent}
+          >
+            Copy
+          </Button>
+        </span>
+      </Tooltip>
+      <Tooltip title="Download file" arrow>
+        <span>
+          <Button
+            onClick={onDownload}
+            variant="contained"
+            startIcon={<DownloadIcon />}
+            disabled={!generatedContent}
+          >
+            Download
+          </Button>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+};
+
+export default ActionButtons;