Skip to content

Commit 18af608

Browse files
Gerome-ElassaadGerome-Elassaad
committed
Add slash commands documentation and menu component
1 parent 8537104 commit 18af608

3 files changed

Lines changed: 447 additions & 0 deletions

File tree

‎components/slash-command-menu.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react'
2+
import { motion, AnimatePresence } from 'framer-motion'
3+
import { SlashCommand } from '@/lib/slash-commands'
4+
import { Command } from 'lucide-react'
5+
6+
interface SlashCommandMenuProps {
7+
commands: SlashCommand[]
8+
selectedIndex: number
9+
onSelect: (command: SlashCommand) => void
10+
position?: { top: number; left: number }
11+
}
12+
13+
export function SlashCommandMenu({
14+
commands,
15+
selectedIndex,
16+
onSelect,
17+
position = { top: 0, left: 0 }
18+
}: SlashCommandMenuProps) {
19+
if (commands.length === 0) return null
20+
21+
return (
22+
<AnimatePresence>
23+
<motion.div
24+
initial={{ opacity: 0, y: -10 }}
25+
animate={{ opacity: 1, y: 0 }}
26+
exit={{ opacity: 0, y: -10 }}
27+
transition={{ duration: 0.15 }}
28+
className="absolute z-50 w-72 bg-background border border-border rounded-xl shadow-lg overflow-hidden"
29+
style={{
30+
bottom: position.top + 8,
31+
left: position.left,
32+
}}
33+
>
34+
<div className="p-2 border-b border-border flex items-center gap-2 bg-muted/30">
35+
<Command className="w-4 h-4 text-muted-foreground" />
36+
<span className="text-xs font-medium text-muted-foreground">
37+
Slash Commands
38+
</span>
39+
</div>
40+
<div className="max-h-64 overflow-y-auto">
41+
{commands.map((cmd, index) => (
42+
<button
43+
key={cmd.command}
44+
onClick={() => onSelect(cmd)}
45+
className={`w-full px-3 py-2 flex items-center gap-3 text-left transition-colors ${
46+
index === selectedIndex
47+
? 'bg-primary/10 text-primary'
48+
: 'hover:bg-primary/5 dark:hover:bg-muted/50 text-foreground'
49+
}`}
50+
>
51+
<span className="text-lg">{cmd.icon}</span>
52+
<div className="flex-1 min-w-0">
53+
<div className="font-medium text-sm">{cmd.command}</div>
54+
<div className="text-xs text-muted-foreground truncate">
55+
{cmd.description}
56+
</div>
57+
</div>
58+
{cmd.category && (
59+
<span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
60+
{cmd.category}
61+
</span>
62+
)}
63+
</button>
64+
))}
65+
</div>
66+
<div className="p-2 border-t border-border bg-muted/30">
67+
<div className="text-xs text-muted-foreground flex items-center justify-between">
68+
<span>↑↓ Navigate</span>
69+
<span>↵ Select</span>
70+
<span>Esc Close</span>
71+
</div>
72+
</div>
73+
</motion.div>
74+
</AnimatePresence>
75+
)
76+
}

‎docs/slash-commands.md‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
# Slash Commands Guide
2+
3+
## What are Slash Commands?
4+
5+
Slash commands are quick shortcuts that help you communicate more effectively with the AI. Simply type a forward slash `/` in the chat input, and a menu of available commands will appear. These commands tell the AI exactly what kind of help you need.
6+
7+
## How to Use Slash Commands
8+
9+
1. **Type `/` in the chat input** - A dropdown menu will instantly appear
10+
2. **Start typing** - The menu filters to show matching commands (e.g., type `/ed` to find `/edit`)
11+
3. **Select a command** using:
12+
- **Arrow keys (↑/↓)** to navigate, then press **Enter** to select
13+
- **Click** on any command with your mouse
14+
4. **Add details** - After selecting a command, type what you want the AI to do
15+
5. **Press Enter** to send your message
16+
17+
## Available Commands
18+
19+
### 🔨 Code Commands
20+
21+
#### ✏️ `/edit`
22+
**What it does:** Asks the AI to modify or change your code
23+
24+
**When to use it:**
25+
- You want to update existing code
26+
- You need to change how something works
27+
- You want to add new features to your code
28+
29+
**Example:**
30+
```
31+
/edit add error handling to the login function
32+
```
33+
34+
---
35+
36+
#### 🔧 `/fix`
37+
**What it does:** Tells the AI to find and repair bugs or errors in your code
38+
39+
**When to use it:**
40+
- Your code isn't working as expected
41+
- You're getting error messages
42+
- Something is broken and needs repair
43+
44+
**Example:**
45+
```
46+
/fix the submit button is not responding when clicked
47+
```
48+
49+
---
50+
51+
#### ✅ `/apply`
52+
**What it does:** Instructs the AI to implement changes or suggestions
53+
54+
**When to use it:**
55+
- You want to apply recommended improvements
56+
- You're ready to implement a discussed solution
57+
- You want to accept and use AI suggestions
58+
59+
**Example:**
60+
```
61+
/apply the performance improvements you suggested earlier
62+
```
63+
64+
---
65+
66+
#### 💡 `/explain`
67+
**What it does:** Asks the AI to break down and clarify how code works
68+
69+
**When to use it:**
70+
- You don't understand what code does
71+
- You need to learn how something works
72+
- You want to understand complex logic
73+
74+
**Example:**
75+
```
76+
/explain what this authentication middleware does
77+
```
78+
79+
---
80+
81+
#### ♻️ `/refactor`
82+
**What it does:** Requests the AI to reorganize and improve code structure without changing functionality
83+
84+
**When to use it:**
85+
- Your code works but is messy
86+
- You want cleaner, more maintainable code
87+
- You need better organization
88+
89+
**Example:**
90+
```
91+
/refactor this component to use modern React hooks
92+
```
93+
94+
---
95+
96+
#### ⚡ `/optimize`
97+
**What it does:** Asks the AI to improve code performance and efficiency
98+
99+
**When to use it:**
100+
- Your code is slow
101+
- You want better performance
102+
- You need to reduce loading times
103+
104+
**Example:**
105+
```
106+
/optimize this database query that's taking too long
107+
```
108+
109+
---
110+
111+
### 🧪 Testing Commands
112+
113+
#### 🧪 `/test`
114+
**What it does:** Requests the AI to create tests for your code
115+
116+
**When to use it:**
117+
- You need unit tests
118+
- You want to ensure code reliability
119+
- You're practicing test-driven development
120+
121+
**Example:**
122+
```
123+
/test create tests for the user registration function
124+
```
125+
126+
---
127+
128+
### 📚 Documentation Commands
129+
130+
#### 📝 `/document`
131+
**What it does:** Asks the AI to generate documentation for your code
132+
133+
**When to use it:**
134+
- You need comments in your code
135+
- You want to create API documentation
136+
- You need to explain code to others
137+
138+
**Example:**
139+
```
140+
/document add JSDoc comments to all functions in this file
141+
```
142+
143+
---
144+
145+
### 🔍 Review Commands
146+
147+
#### 👀 `/review`
148+
**What it does:** Requests the AI to examine code for potential issues, bugs, and improvements
149+
150+
**When to use it:**
151+
- You want a second opinion on your code
152+
- You need to catch potential problems
153+
- You want suggestions for improvement
154+
155+
**Example:**
156+
```
157+
/review check this code for security vulnerabilities
158+
```
159+
160+
---
161+
162+
### ℹ️ Help Commands
163+
164+
#### ❓ `/help`
165+
**What it does:** Shows information about available commands
166+
167+
**When to use it:**
168+
- You forget what commands are available
169+
- You need a reminder of what each command does
170+
- You're new to using slash commands
171+
172+
**Example:**
173+
```
174+
/help
175+
```
176+
177+
---
178+
179+
## Tips for Using Slash Commands
180+
181+
### ✨ **Be Specific**
182+
Instead of: `/fix my code`
183+
Try: `/fix the login button throws an error when password is empty`
184+
185+
### ✨ **Combine with Context**
186+
You can provide additional details after the command to get better results:
187+
```
188+
/optimize the product search function - it's taking 3+ seconds to load
189+
```
190+
191+
### ✨ **Use the Right Command**
192+
- Use `/fix` for bugs and errors
193+
- Use `/edit` for changes and modifications
194+
- Use `/refactor` for code cleanup
195+
- Use `/optimize` for performance issues
196+
197+
### ✨ **Keyboard Shortcuts**
198+
- **↑** (Up Arrow) - Move up in command list
199+
- **↓** (Down Arrow) - Move down in command list
200+
- **Enter** - Select highlighted command
201+
- **Esc** - Close command menu
202+
203+
### ✨ **Quick Filtering**
204+
Type part of a command to filter instantly:
205+
- `/fi` → shows `/fix`
206+
- `/ed` → shows `/edit`
207+
- `/te` → shows `/test`
208+
209+
---
210+
211+
## Common Use Cases
212+
213+
### 🐛 **I have a bug**
214+
```
215+
/fix the shopping cart total is calculating incorrectly
216+
```
217+
218+
### 🎨 **I want to improve my code**
219+
```
220+
/refactor this messy function to be more readable
221+
```
222+
223+
### 🚀 **My app is slow**
224+
```
225+
/optimize the image loading on the homepage
226+
```
227+
228+
### 🤔 **I don't understand something**
229+
```
230+
/explain how this async function works
231+
```
232+
233+
### 📖 **I need documentation**
234+
```
235+
/document create README instructions for this project
236+
```
237+
238+
### ✅ **I need tests**
239+
```
240+
/test write unit tests for the payment processing logic
241+
```
242+
243+
### 🔍 **I want a code review**
244+
```
245+
/review check this function for potential bugs
246+
```
247+
248+
---
249+
250+
## Frequently Asked Questions
251+
252+
**Q: Do I have to use slash commands?**
253+
A: No! Slash commands are optional shortcuts. You can still chat normally with the AI.
254+
255+
**Q: Can I use multiple commands at once?**
256+
A: It's best to use one command per message for clearest results.
257+
258+
**Q: What if I make a typo in a command?**
259+
A: The AI will try to understand your intent, but it's best to use the dropdown menu to ensure accuracy.
260+
261+
**Q: Can I suggest new commands?**
262+
A: Yes! Feature requests are welcome through the project's GitHub issues.
263+
264+
**Q: Do commands work on mobile?**
265+
A: Yes! You can type `/` and tap commands on mobile devices.
266+
267+
---
268+
269+
## Need More Help?
270+
271+
If you're having trouble with slash commands or need additional assistance:
272+
273+
1. Use `/help` in the chat
274+
2. Visit the project documentation
275+
3. Check the GitHub repository for examples
276+
4. Ask in the community Discord
277+
278+
Happy coding! 🚀

0 commit comments

Comments
 (0)