Skip to content
This repository was archived by the owner on Oct 10, 2025. It is now read-only.

Commit 7318bfa

Browse files
killerappkillerapp
committed
docs: redo ui
1 parent 2516015 commit 7318bfa

File tree

2 files changed

+92
-77
lines changed

2 files changed

+92
-77
lines changed

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

Lines changed: 68 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
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';
2+
import { Container, Paper, Box, Button, Typography, Link as MuiLink, Snackbar, IconButton, Accordion, AccordionSummary, AccordionDetails, Divider, Select, MenuItem, FormControl, InputLabel, SelectChangeEvent } 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';
7+
import { BrowserRouter as Router } from 'react-router-dom';
88
import theme from './theme';
9-
import ContextForm from './components/ContextForm';
10-
import ContextDocsForm from './components/ContextDocsForm';
11-
import ContextIgnoreForm from './components/ContextIgnoreForm';
129
import PromptViewer from './components/PromptViewer';
13-
import NavTabs from './components/NavTabs';
1410
import SpecificationModal from './components/SpecificationModal';
15-
import ActionButtons from './components/ActionButtons';
16-
import OptionsDescription from './components/OptionsDescription';
17-
import { handleCopyToClipboard, handleDownload } from './utils/helpers';
11+
import { handleCopyToClipboard } from './utils/helpers';
1812
import usePrompts from './hooks/usePrompts';
1913
import useSnackbar from './hooks/useSnackbar';
2014
import './App.css';
2115

22-
// Conditional base path for GitHub Pages
2316
const BASE_PATH = process.env.NODE_ENV === 'production' ? '/codebase-context-spec' : '';
2417

2518
const App: React.FC = () => {
26-
const [generatedContent, setGeneratedContent] = useState('');
2719
const [specModalOpen, setSpecModalOpen] = useState(false);
20+
const [selectedTool, setSelectedTool] = useState('');
21+
const [loadedPrompt, setLoadedPrompt] = useState<string | null>(null);
2822

2923
const { snackbarOpen, snackbarMessage, showSnackbar, closeSnackbar } = useSnackbar();
30-
const { codebaseContext, generateContextPrompt, codingAssistantPrompt } = usePrompts(
24+
const { codebaseContext, generateContextPrompt, codingAssistantPrompts } = usePrompts(
3125
showSnackbar,
3226
(open: boolean) => open ? showSnackbar('') : closeSnackbar()
3327
);
3428

35-
const handleFormSubmit = (content: string) => {
36-
setGeneratedContent(content);
29+
const handleToolChange = (event: SelectChangeEvent<string>) => {
30+
setSelectedTool(event.target.value as string);
31+
setLoadedPrompt(null);
32+
};
33+
34+
const handleLoadPrompt = () => {
35+
if (selectedTool && codingAssistantPrompts[selectedTool]) {
36+
setLoadedPrompt(selectedTool);
37+
showSnackbar(`Loaded ${selectedTool} prompt`);
38+
} else {
39+
showSnackbar('Please select a valid tool first');
40+
}
3741
};
3842

3943
return (
@@ -49,6 +53,8 @@ const App: React.FC = () => {
4953
<Button
5054
className="viewLatestSpec"
5155
onClick={() => setSpecModalOpen(true)}
56+
variant="contained"
57+
color="primary"
5258
sx={{ mr: 2 }}
5359
>
5460
View Latest Specification v1.0.0-RFC
@@ -58,67 +64,60 @@ const App: React.FC = () => {
5864
</MuiLink>
5965
</Box>
6066
</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+
6768
<Divider sx={{ my: 3 }} />
69+
70+
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
71+
<FormControl sx={{ minWidth: 200, mr: 2 }}>
72+
<InputLabel id="coding-tool-select-label">Select Coding Tool</InputLabel>
73+
<Select
74+
labelId="coding-tool-select-label"
75+
value={selectedTool}
76+
onChange={handleToolChange}
77+
label="Select Coding Tool"
78+
>
79+
<MenuItem value="claude-dev">Claude-dev</MenuItem>
80+
<MenuItem value="aider">Aider</MenuItem>
81+
<MenuItem value="cody">Cody</MenuItem>
82+
{/* Add more tools as needed */}
83+
</Select>
84+
</FormControl>
85+
<Button variant="contained" color="secondary" onClick={handleLoadPrompt}>
86+
Load Prompt
87+
</Button>
88+
</Box>
89+
90+
<Typography variant="h5" sx={{ mb: 2 }}>Coding Assistant Prompts</Typography>
6891

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-
}}
83-
>
84-
<Typography variant="h6" color="secondary">Prompts: Generate draft & Usage / custom instructions</Typography>
92+
{loadedPrompt && codingAssistantPrompts[loadedPrompt] && (
93+
<PromptViewer
94+
title={`${loadedPrompt.toUpperCase()} Prompt`}
95+
subtitle={`${loadedPrompt.toUpperCase()}-PROMPT.md`}
96+
explanation={codingAssistantPrompts[loadedPrompt].explanation}
97+
content={codingAssistantPrompts[loadedPrompt].content}
98+
onCopy={() => handleCopyToClipboard(codingAssistantPrompts[loadedPrompt].content, showSnackbar, () => showSnackbar(''))}
99+
/>
100+
)}
101+
102+
<Divider sx={{ my: 3 }} />
103+
104+
<Accordion>
105+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
106+
<Typography variant="h6">Generate Context Files</Typography>
85107
</AccordionSummary>
86108
<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}>
98-
<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(''))}
104-
/>
105-
</Grid>
106-
</Grid>
109+
<Typography variant="body2" paragraph>
110+
Use the 'Generate Context Prompt' to get an AI agent to draft your context files.
111+
</Typography>
112+
<PromptViewer
113+
title="Generate Context Prompt"
114+
subtitle="GENERATE-CONTEXT-PROMPT.md"
115+
explanation={generateContextPrompt.explanation}
116+
content={generateContextPrompt.content}
117+
onCopy={() => handleCopyToClipboard(generateContextPrompt.content, showSnackbar, () => showSnackbar(''))}
118+
/>
107119
</AccordionDetails>
108120
</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-
/>
122121
</Paper>
123122

124123
<SpecificationModal

‎examples/context-editor/src/hooks/usePrompts.ts‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,47 @@ interface Prompt {
55
explanation: string;
66
}
77

8+
interface CodingAssistantPrompts {
9+
[key: string]: Prompt;
10+
}
11+
812
interface Prompts {
913
codebaseContext: Prompt;
1014
generateContextPrompt: Prompt;
11-
codingAssistantPrompt: Prompt;
15+
codingAssistantPrompts: CodingAssistantPrompts;
1216
}
1317

1418
const usePrompts = (setSnackbarMessage: (message: string) => void, setSnackbarOpen: (open: boolean) => void) => {
1519
const [prompts, setPrompts] = useState<Prompts>({
1620
codebaseContext: { content: '', explanation: '' },
1721
generateContextPrompt: { content: '', explanation: '' },
18-
codingAssistantPrompt: { content: '', explanation: '' },
22+
codingAssistantPrompts: {},
1923
});
2024

2125
useEffect(() => {
2226
const fetchPrompts = async () => {
2327
try {
24-
const [codebaseContext, generateContextPrompt, codingAssistantPrompt] = await Promise.all([
28+
const [codebaseContext, generateContextPrompt, claudeDevPrompt] = await Promise.all([
2529
fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/CODEBASE-CONTEXT.md').then(res => res.text()),
2630
fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/GENERATE-CONTEXT-PROMPT.md').then(res => res.text()),
27-
fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/CODING-ASSISTANT-PROMPT.md').then(res => res.text())
31+
fetch('https://raw.githubusercontent.com/Agentic-Insights/codebase-context-spec/main/CODING-ASSISTANT-PROMPT.md').then(res => res.text()),
2832
]);
2933

34+
const codingAssistantPrompts: CodingAssistantPrompts = {
35+
'claude-dev': {
36+
content: claudeDevPrompt,
37+
explanation: 'Use this prompt for the Claude-dev coding assistant tool.'
38+
},
39+
'aider': {
40+
content: 'Aider specific prompt content goes here',
41+
explanation: 'Use this prompt for the Aider coding assistant tool.'
42+
},
43+
'cody': {
44+
content: 'Cody specific prompt content goes here',
45+
explanation: 'Use this prompt for the Cody coding assistant tool.'
46+
},
47+
};
48+
3049
setPrompts({
3150
codebaseContext: {
3251
content: codebaseContext,
@@ -36,10 +55,7 @@ const usePrompts = (setSnackbarMessage: (message: string) => void, setSnackbarOp
3655
content: generateContextPrompt,
3756
explanation: 'Use this prompt when building a new context for a project. It guides you through the process of creating the necessary context files.'
3857
},
39-
codingAssistantPrompt: {
40-
content: codingAssistantPrompt,
41-
explanation: 'Use this prompt at the beginning of a new context window for a project that already has context files. It helps the AI understand and utilize the existing context.'
42-
}
58+
codingAssistantPrompts,
4359
});
4460
} catch (error) {
4561
console.error('Error fetching prompts:', error);

0 commit comments

Comments
 (0)