📌 docs: Add Prompts Feature Page

pages/docs/features/_meta.ts

@@ -6,6 +6,7 @@ export default {
   artifacts: 'Artifacts - Generative UI',
   web_search: 'Web Search',
   memory: 'Memory',
+  prompts: 'Prompts',
   image_gen: 'Image Generation',
   // local_setup: 'Local Setup',
   // custom_endpoints: 'Custom Endpoints',

pages/docs/features/prompts.mdx

@@ -0,0 +1,170 @@
+---
+title: Prompts
+description: Learn how to save, organize, and use prompts in LibreChat for efficient conversation management.
+---
+
+import {
+  Dices,
+  BoxIcon,
+  PenLineIcon,
+  LightbulbIcon,
+  LineChartIcon,
+  ShoppingBagIcon,
+  PlaneTakeoffIcon,
+  GraduationCapIcon,
+  TerminalSquareIcon,
+  Users as UsersIcon,
+  Beaker as BeakerIcon,
+  Settings as SettingsIcon,
+} from 'lucide-react';
+
+# Prompts
+
+LibreChat's Prompts feature allows you to save, organize, and quickly reuse frequently used prompts across your conversations.
+This powerful tool helps streamline your workflow by providing easy access to your most important prompts through slash commands in chat or through the Prompts panel in the side navigation bar.
+
+## Overview
+
+The Prompts feature enables you to:
+
+- Save frequently used prompts for quick access
+- Organize prompts into categories
+- Attach files to prompts for added context
+- Reference prompts via the `/<prompt_name>` command in chat
+- Access prompts through the Prompts panel
+- Preview prompts before using them
+- Edit and manage prompt versions
+- Mark specific prompt versions as production
+- Enable auto-send for immediate prompt execution
+
+## Creating and Managing Prompts
+
+### Creating a New Prompt
+
+You can create a new prompt by clicking the "New Prompt" button found in the Prompts panel within the right hand side navigation menu.
+
+![New prompt button](/images/prompts/open_prompts.png)
+
+This will open the Prompt Creation dialog, where you can configure your prompt's name, content, category, variables, description, command-name, and attachments, as well as browse previously created prompts.
+
+![New prompt creation dialog](/images/prompts/create_prompt.png)
+
+### Prompt Categories
+
+Organize your prompts into categories for easier management:
+
+![Prompt categories](/images/prompts/categories.png)
+
+
+#### Available Categories
+
+LibreChat includes several predefined categories with custom icons:
+
+**General Categories:**
+- `idea` - Ideas <LightbulbIcon className="inline w-4 h-4 text-yellow-500" />
+- `travel` - Travel <PlaneTakeoffIcon className="inline w-4 h-4 text-yellow-500" />
+- `teach_or_explain` - Learning <GraduationCapIcon className="inline w-4 h-4 text-sky-400" />
+- `write` - Writing <PenLineIcon className="inline w-4 h-4 text-purple-500" />
+- `shop` - Shopping <ShoppingBagIcon className="inline w-4 h-4 text-purple-500" />
+- `code` - Code <TerminalSquareIcon className="inline w-4 h-4 text-red-500" />
+- `misc` - Miscellaneous <BoxIcon className="inline w-4 h-4 text-sky-400" />
+- `roleplay` - Roleplay <Dices className="inline w-4 h-4 text-orange-500" />
+- `finance` - Finance <LineChartIcon className="inline w-4 h-4 text-orange-500" />
+
+
+### File Attachments
+
+Attach files to your prompts to provide context and reference materials:
+
+![File attachments](/images/prompts/attachments.png)
+
+- Upload documents, images, and other files just as you would in chat
+- Files are made available to the AI in chat when the prompt is used
+- Supports the same file types as regular chat attachments
+- Files are stored with the prompt for future use / configuration
+
+### Variables
+
+Use double braces in your text to create variables, e.g. `{{example variable}}`, to later fill when using the prompt.
+
+![Variables](/images/prompts/variables.png)
+
+**Special variables:**
+You can select special variables from the dropdown: `{{current_date}}` (today's date and day of week), `{{current_datetime}}` (local date and time), `{{utc_iso_datetime}}` (UTC ISO datetime), and `{{current_user}}` (your account name).
+
+**Dropdown variables:**
+Create custom dropdown menus for your prompts: `{{variable_name:option1|option2|option3}}`
+
+
+### Advanced Configuration
+
+The Prompts Creation dialog has 2 modes: *Simple* and *Advanced*  that you can switch between using the toggle at the top right of the dialog. 
+
+![Advanced configuration](/images/prompts/advanced.png)
+
+In advanced mode, you can switch between, delete, edit, create, and set specific versions as the default to be used in chat by marking them as 'production' using the Rocket Icon button.
+There will also be a new toggle at the top of the dialog which allows you to choose whether new versions will automatically be set as production.
+
+## Accessing Prompts
+
+### Side Navigation Panel
+
+The Prompts panel in the side navigation provides comprehensive access to your saved prompts:
+
+![Prompts panel](/images/prompts/sidepanel.png)
+
+From the side navigation, you can:
+- Browse all your saved prompts
+- Filter prompts by category, name, and whether they have been shared to others
+- Preview prompt content before using them in chat
+- Enable/disable auto-send for prompts
+
+### Chat Commands
+
+You can quickly access prompts directly in chat using their names as commands:
+
+![Chat commands](/images/prompts/command.png)
+
+Type `/` followed by your prompt name (e.g., `/test` or `/travelprompt`) to quickly insert it into your message.
+
+
+## Using Prompts
+
+### Auto-Send Feature
+
+Enable auto-send for prompts you want to execute immediately:
+
+![Auto-send](/images/prompts/autosend.png)
+
+When auto-send is enabled:
+- Clicking the prompt in the side navigation immediately sends the message in chat containing the prompt
+- Helpful for frequently used prompts that don't require modification
+
+### Preview Mode
+
+Preview prompts before using them to ensure they contain the right content:
+
+- Click the preview button to see the full prompt content
+![Preview mode](/images/prompts/preview_button.png)
+
+- Review attached files and context
+![Preview mode](/images/prompts/preview.png)
+
+## Example Use Cases
+
+### Code Review Prompts
+- "Review this code for security vulnerabilities"
+- "Check for performance optimizations"
+- "Validate coding standards compliance"
+
+### Writing Assistance
+- "Improve the clarity and flow of this text"
+- "Convert technical content for a general audience"
+- "Generate a summary of this document"
+
+### Analysis Tasks
+- "Analyze the data trends in this spreadsheet"
+- "Compare these two documents for key differences"
+- "Extract the main points from this research paper"
+
+