Skip to content

Commit d701e2c

Browse files
killerappkillerapp
authored
Merge pull request #14 from Agentic-Insights/new-ui-and-prompt-db
New UI and prompt db
2 parents 2516015 + 91595b4 commit d701e2c

File tree

3 files changed

+191
-169
lines changed

3 files changed

+191
-169
lines changed

‎examples/context-editor/src/App.tsx

+116-122
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,149 @@
1-
import React, { useState } from 'react';
2-
import { Container, Paper, Box, Button, Typography, Link as MuiLink, Snackbar, IconButton, Grid, Accordion, AccordionSummary, AccordionDetails, Divider } from '@mui/material';
1+
import React, { useState, useCallback } from 'react';
2+
import { Container, Paper, Box, Typography, Link as MuiLink, Snackbar, IconButton, Accordion, AccordionSummary, AccordionDetails, Button } from '@mui/material';
33
import { ThemeProvider } from '@mui/material/styles';
44
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
55
import CloseIcon from '@mui/icons-material/Close';
66
import GitHubIcon from '@mui/icons-material/GitHub';
7-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
87
import theme from './theme';
9-
import ContextForm from './components/ContextForm';
10-
import ContextDocsForm from './components/ContextDocsForm';
11-
import ContextIgnoreForm from './components/ContextIgnoreForm';
128
import PromptViewer from './components/PromptViewer';
13-
import NavTabs from './components/NavTabs';
149
import SpecificationModal from './components/SpecificationModal';
15-
import ActionButtons from './components/ActionButtons';
16-
import OptionsDescription from './components/OptionsDescription';
17-
import { handleCopyToClipboard, handleDownload } from './utils/helpers';
10+
import NavTabs from './components/NavTabs';
11+
import ContextForm from './components/ContextForm';
12+
import { handleCopyToClipboard } from './utils/helpers';
1813
import usePrompts from './hooks/usePrompts';
1914
import useSnackbar from './hooks/useSnackbar';
2015
import './App.css';
2116

22-
// Conditional base path for GitHub Pages
23-
const BASE_PATH = process.env.NODE_ENV === 'production' ? '/codebase-context-spec' : '';
24-
2517
const App: React.FC = () => {
26-
const [generatedContent, setGeneratedContent] = useState('');
2718
const [specModalOpen, setSpecModalOpen] = useState(false);
19+
const [selectedTab, setSelectedTab] = useState(0);
2820

2921
const { snackbarOpen, snackbarMessage, showSnackbar, closeSnackbar } = useSnackbar();
30-
const { codebaseContext, generateContextPrompt, codingAssistantPrompt } = usePrompts(
22+
const { codebaseContext, generateContextPrompt, codingAssistantPrompts } = usePrompts(
3123
showSnackbar,
3224
(open: boolean) => open ? showSnackbar('') : closeSnackbar()
3325
);
3426

35-
const handleFormSubmit = (content: string) => {
36-
setGeneratedContent(content);
27+
const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
28+
setSelectedTab(newValue);
3729
};
3830

31+
const handleContextFormSubmit = (content: string) => {
32+
console.log('Generated .context.md content:', content);
33+
showSnackbar('Context form submitted successfully');
34+
// Here you can add logic to save or process the generated content
35+
};
36+
37+
const handleCopy = useCallback((content: string) => {
38+
handleCopyToClipboard(
39+
content,
40+
(message: string) => showSnackbar(message),
41+
(open: boolean) => open ? showSnackbar('') : closeSnackbar()
42+
);
43+
}, [showSnackbar, closeSnackbar]);
44+
3945
return (
4046
<ThemeProvider theme={theme}>
41-
<Router basename={BASE_PATH}>
42-
<Container className="container" maxWidth="lg">
43-
<Paper className="paper" elevation={3}>
44-
<Box className="header" display="flex" justifyContent="space-between" alignItems="center">
45-
<Typography className="title" variant="h4" component="h1">
46-
Codebase Context Editor
47+
<Container className="container" maxWidth="lg">
48+
<Paper className="paper" elevation={3}>
49+
<Box className="header" display="flex" justifyContent="space-between" alignItems="flex-start" mb={4}>
50+
<Box>
51+
<Typography className="title" variant="h4" component="h1" gutterBottom>
52+
Codebase Context Suite
53+
</Typography>
54+
<Typography variant="subtitle1">
55+
A comprehensive tool for managing codebase context, generating prompts, and enhancing development workflows.
4756
</Typography>
48-
<Box display="flex" alignItems="center">
49-
<Button
50-
className="viewLatestSpec"
51-
onClick={() => setSpecModalOpen(true)}
52-
sx={{ mr: 2 }}
53-
>
54-
View Latest Specification v1.0.0-RFC
55-
</Button>
56-
<MuiLink href="https://github.com/Agentic-Insights/codebase-context-spec" target="_blank" rel="noopener noreferrer">
57-
<GitHubIcon fontSize="large" />
58-
</MuiLink>
59-
</Box>
6057
</Box>
61-
<Typography variant="body1" paragraph sx={{ mb: 3 }}>
62-
This editor helps you create .context.md, .contextdocs.md, and .contextignore files for your project.
63-
</Typography>
64-
65-
<OptionsDescription />
66-
67-
<Divider sx={{ my: 3 }} />
68-
69-
<Accordion sx={{
70-
mb: 3,
71-
'&.MuiAccordion-root': {
72-
borderLeft: `6px solid ${theme.palette.secondary.main}`,
73-
}
74-
}}>
75-
<AccordionSummary
76-
expandIcon={<ExpandMoreIcon />}
77-
sx={{
78-
backgroundColor: theme.palette.background.paper,
79-
'&.Mui-expanded': {
80-
minHeight: 48,
81-
},
82-
}}
58+
<Box display="flex" alignItems="center">
59+
<Button
60+
onClick={() => setSpecModalOpen(true)}
61+
variant="contained"
62+
color="primary"
63+
sx={{ mr: 2 }}
8364
>
84-
<Typography variant="h6" color="secondary">Prompts: Generate draft & Usage / custom instructions</Typography>
85-
</AccordionSummary>
86-
<AccordionDetails>
87-
<Grid container spacing={2}>
88-
<Grid item xs={12} md={6}>
89-
<PromptViewer
90-
title="Generate Context Prompt"
91-
subtitle="GENERATE-CONTEXT-PROMPT.md"
92-
explanation={generateContextPrompt.explanation}
93-
content={generateContextPrompt.content}
94-
onCopy={() => handleCopyToClipboard(generateContextPrompt.content, showSnackbar, () => showSnackbar(''))}
95-
/>
96-
</Grid>
97-
<Grid item xs={12} md={6}>
65+
View Specification
66+
</Button>
67+
<MuiLink href="https://github.com/Agentic-Insights/codebase-context-spec" target="_blank" rel="noopener noreferrer">
68+
<GitHubIcon fontSize="large" />
69+
</MuiLink>
70+
</Box>
71+
</Box>
72+
73+
<NavTabs value={selectedTab} onChange={handleTabChange} />
74+
75+
<Box mt={2}>
76+
{selectedTab === 0 && (
77+
<Box>
78+
<Typography variant="h5" sx={{ mb: 2 }}>Coding Assistant Prompts</Typography>
79+
<Accordion defaultExpanded>
80+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
81+
<Typography>Claude-dev Prompt</Typography>
82+
</AccordionSummary>
83+
<AccordionDetails>
9884
<PromptViewer
99-
title="Coding Assistant Prompt"
100-
subtitle="CODING-ASSISTANT-PROMPT.md"
101-
explanation={codingAssistantPrompt.explanation}
102-
content={codingAssistantPrompt.content}
103-
onCopy={() => handleCopyToClipboard(codingAssistantPrompt.content, showSnackbar, () => showSnackbar(''))}
85+
title="CLAUDE-DEV Prompt"
86+
subtitle="CLAUDE-DEV-PROMPT.md"
87+
explanation={codingAssistantPrompts['claude-dev']?.explanation || ''}
88+
content={codingAssistantPrompts['claude-dev']?.content || ''}
89+
onCopy={() => handleCopy(codingAssistantPrompts['claude-dev']?.content || '')}
10490
/>
105-
</Grid>
106-
</Grid>
107-
</AccordionDetails>
108-
</Accordion>
109-
<NavTabs />
110-
<Box className="form-section">
111-
<Routes>
112-
<Route path="/" element={<ContextForm onSubmit={handleFormSubmit} />} />
113-
<Route path="/contextdocs" element={<ContextDocsForm onSubmit={handleFormSubmit} />} />
114-
<Route path="/contextignore" element={<ContextIgnoreForm onSubmit={handleFormSubmit} />} />
115-
</Routes>
116-
</Box>
117-
<ActionButtons
118-
generatedContent={generatedContent}
119-
onCopy={() => handleCopyToClipboard(generatedContent, showSnackbar, () => showSnackbar(''))}
120-
onDownload={() => handleDownload(generatedContent, 'generated_context.md', showSnackbar, () => showSnackbar(''))}
121-
/>
122-
</Paper>
91+
</AccordionDetails>
92+
</Accordion>
93+
{/* Add other coding assistant prompts here if needed */}
94+
</Box>
95+
)}
12396

124-
<SpecificationModal
125-
open={specModalOpen}
126-
onClose={() => setSpecModalOpen(false)}
127-
content={codebaseContext.content}
128-
onCopy={() => handleCopyToClipboard(codebaseContext.content, showSnackbar, () => showSnackbar(''))}
129-
/>
97+
{selectedTab === 1 && (
98+
<Box>
99+
<Typography variant="h5" sx={{ mb: 2 }}>Generate Context Files</Typography>
100+
<PromptViewer
101+
title="Generate Context Prompt"
102+
subtitle="GENERATE-CONTEXT-PROMPT.md"
103+
explanation={generateContextPrompt.explanation}
104+
content={generateContextPrompt.content}
105+
onCopy={() => handleCopy(generateContextPrompt.content)}
106+
/>
107+
</Box>
108+
)}
130109

131-
<Snackbar
132-
anchorOrigin={{
133-
vertical: 'bottom',
134-
horizontal: 'center',
135-
}}
136-
open={snackbarOpen}
137-
autoHideDuration={2000}
138-
onClose={closeSnackbar}
139-
message={snackbarMessage}
140-
action={
141-
<IconButton
142-
size="small"
143-
aria-label="close"
144-
color="inherit"
145-
onClick={closeSnackbar}
146-
>
147-
<CloseIcon fontSize="small" />
148-
</IconButton>
149-
}
150-
/>
151-
</Container>
152-
</Router>
110+
{selectedTab === 2 && (
111+
<Box>
112+
<Typography variant="h5" sx={{ mb: 2 }}>Manual Context Form</Typography>
113+
<ContextForm onSubmit={handleContextFormSubmit} />
114+
</Box>
115+
)}
116+
</Box>
117+
</Paper>
118+
119+
<SpecificationModal
120+
open={specModalOpen}
121+
onClose={() => setSpecModalOpen(false)}
122+
content={codebaseContext.content}
123+
onCopy={() => handleCopy(codebaseContext.content)}
124+
/>
125+
126+
<Snackbar
127+
anchorOrigin={{
128+
vertical: 'bottom',
129+
horizontal: 'center',
130+
}}
131+
open={snackbarOpen}
132+
autoHideDuration={2000}
133+
onClose={closeSnackbar}
134+
message={snackbarMessage}
135+
action={
136+
<IconButton
137+
size="small"
138+
aria-label="close"
139+
color="inherit"
140+
onClick={closeSnackbar}
141+
>
142+
<CloseIcon fontSize="small" />
143+
</IconButton>
144+
}
145+
/>
146+
</Container>
153147
</ThemeProvider>
154148
);
155149
};

‎examples/context-editor/src/components/NavTabs.tsx

+51-39
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,62 @@
11
import React from 'react';
2-
import { Tabs, Tab } from '@mui/material';
3-
import { Link, useLocation } from 'react-router-dom';
2+
import { Tabs, Tab, Box } from '@mui/material';
43
import DescriptionIcon from '@mui/icons-material/Description';
54
import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
65
import BlockIcon from '@mui/icons-material/Block';
76

8-
const NavTabs: React.FC = () => {
9-
const location = useLocation();
10-
const currentForm = getCurrentForm(location.pathname);
7+
interface NavTabsProps {
8+
value: number;
9+
onChange: (event: React.SyntheticEvent, newValue: number) => void;
10+
}
1111

12+
const NavTabs: React.FC<NavTabsProps> = ({ value, onChange }) => {
1213
return (
13-
<Tabs value={currentForm} aria-label="file type tabs" variant="fullWidth">
14-
<Tab
15-
icon={<DescriptionIcon />}
16-
label=".context.md"
17-
component={Link}
18-
to="/"
19-
sx={{ textTransform: 'lowercase' }}
20-
/>
21-
<Tab
22-
icon={<LibraryBooksIcon />}
23-
label=".contextdocs.md"
24-
component={Link}
25-
to="/contextdocs"
26-
sx={{ textTransform: 'lowercase' }}
27-
/>
28-
<Tab
29-
icon={<BlockIcon />}
30-
label=".contextignore"
31-
component={Link}
32-
to="/contextignore"
33-
sx={{ textTransform: 'lowercase' }}
34-
/>
35-
</Tabs>
14+
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
15+
<Tabs
16+
value={value}
17+
onChange={onChange}
18+
aria-label="file type tabs"
19+
variant="fullWidth"
20+
sx={{
21+
'& .MuiTab-root': {
22+
textTransform: 'none',
23+
padding: '12px 16px',
24+
'&.Mui-selected': {
25+
backgroundColor: 'action.selected',
26+
},
27+
},
28+
}}
29+
>
30+
<Tab
31+
icon={<DescriptionIcon />}
32+
label="Coding Assistant Prompts"
33+
sx={{
34+
'&.Mui-selected': {
35+
fontWeight: 'bold',
36+
},
37+
}}
38+
/>
39+
<Tab
40+
icon={<LibraryBooksIcon />}
41+
label="Generate Context Files"
42+
sx={{
43+
'&.Mui-selected': {
44+
fontWeight: 'bold',
45+
},
46+
}}
47+
/>
48+
<Tab
49+
icon={<BlockIcon />}
50+
label="Manual Context Form"
51+
sx={{
52+
'&.Mui-selected': {
53+
fontWeight: 'bold',
54+
},
55+
}}
56+
/>
57+
</Tabs>
58+
</Box>
3659
);
3760
};
3861

39-
const getCurrentForm = (pathname: string) => {
40-
switch (pathname) {
41-
case '/contextdocs':
42-
return 1;
43-
case '/contextignore':
44-
return 2;
45-
default:
46-
return 0;
47-
}
48-
};
49-
5062
export default NavTabs;

0 commit comments

Comments
 (0)