diff --git a/docs/advanced-usage/auto-approving-actions.md b/docs/advanced-usage/auto-approving-actions.md index 21b5cb0f..9f523c27 100644 --- a/docs/advanced-usage/auto-approving-actions.md +++ b/docs/advanced-usage/auto-approving-actions.md @@ -27,7 +27,7 @@ At the top of the Auto-Approve Toolbar is a toggle to enable/disable auto-approv ## Advanced Configuration (Settings) -You can also find these auto-approval options in the Roo Code settings panel (gear icon ⚙️ in the top right corner). The settings panel provides the same functionality as the auto-approve menu, but in a different location. The auto-approve menu is generally the quickest way to change these settings. +You can also find these auto-approval options in the Roo Code settings panel ( in the top right corner). The settings panel provides the same functionality as the auto-approve menu, but in a different location. The auto-approve menu is generally the quickest way to change these settings. ## Security Considerations diff --git a/docs/advanced-usage/code-actions.md b/docs/advanced-usage/code-actions.md index 0b747985..cee4180a 100644 --- a/docs/advanced-usage/code-actions.md +++ b/docs/advanced-usage/code-actions.md @@ -61,7 +61,7 @@ Each code action gives you two options: You can customize the prompts used for each Code Action by modifying the "Support Prompts" in the **Prompts** tab. This allows you to fine-tune the instructions given to the AI model and tailor the responses to your specific needs. -1. **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar. +1. **Open the Prompts Tab:** Click the icon in the Roo Code top menu bar. 2. **Find "Support Prompts":** You will see the support prompts, including "Enhance Prompt", "Explain Code", "Fix Code", and "Improve Code". 3. **Edit the Prompts:** Modify the text in the text area for the prompt you want to customize. You can use placeholders like `${filePath}` and `${selectedText}` to include information about the current file and selection. 4. **Click "Done":** Save your changes. diff --git a/docs/advanced-usage/custom-instructions.md b/docs/advanced-usage/custom-instructions.md index d432de2a..cc53c2ca 100644 --- a/docs/advanced-usage/custom-instructions.md +++ b/docs/advanced-usage/custom-instructions.md @@ -12,7 +12,7 @@ These instructions are added to every prompt, regardless of the active mode. Th **How to set them:** -1. Open the Roo Code panel (rocket icon 🚀). +1. Open the Roo Code panel (). 2. Click the "Prompts" button in the top menu bar. 3. Find the "Custom Instructions for All Modes" section. 4. Enter your instructions in the text area. @@ -24,7 +24,7 @@ These instructions are added only when a specific mode is active. They allow yo **How to set them:** -1. Open the Roo Code panel (rocket icon 🚀). +1. Open the Roo Code panel (). 2. Click the "Prompts" button in the top menu bar. 3. Select the mode you want to customize from the dropdown. 4. Find the "Mode-specific Custom Instructions" section. diff --git a/docs/advanced-usage/custom-modes.md b/docs/advanced-usage/custom-modes.md index 7db653c5..49f82b5d 100644 --- a/docs/advanced-usage/custom-modes.md +++ b/docs/advanced-usage/custom-modes.md @@ -33,7 +33,7 @@ Roo Code will guide you through the process. ### 2. Using the Prompts Tab -1. **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar. +1. **Open the Prompts Tab:** Click the icon in the Roo Code top menu bar. 2. **Click "Create New Mode":** Use the "+" button to add a new mode. 3. **Fill in the Fields:** Enter the mode's name, role definition, custom instructions, and select the allowed tool groups. 4. **Click "Create Mode":** Save your new mode. @@ -55,8 +55,8 @@ Custom modes can be configured in two locations: To edit either configuration: -1. **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar. -2. **Open the Settings File:** Click the code icon (`<>`) in the top right corner of the "Prompts" tab. +1. **Open the Prompts Tab:** Click the icon in the Roo Code top menu bar. +2. **Open the Settings File:** Click the in the top right corner of the "Prompts" tab. 3. **Edit the JSON:** Add or modify mode configurations within the `customModes` array, following the format described below. 4. **Save the File:** Roo Code will automatically detect the changes. diff --git a/docs/advanced-usage/enhance-prompt.md b/docs/advanced-usage/enhance-prompt.md index 7157a07a..28192fb4 100644 --- a/docs/advanced-usage/enhance-prompt.md +++ b/docs/advanced-usage/enhance-prompt.md @@ -13,15 +13,15 @@ The "Enhance Prompt" feature in Roo Code helps you improve the quality and effec ## How to Use Enhance Prompt 1. **Type your initial prompt:** Enter your request in the Roo Code chat input box as you normally would. This can be a simple question, a complex task description, or anything in between. -2. **Click the ✨ (Sparkle) Icon:** Instead of pressing Enter, click the sparkle icon located to the left of the chat input box. +2. **Click the Icon:** Instead of pressing Enter, click the icon located to the left of the chat input box. 3. **Review the Enhanced Prompt:** Roo Code will replace your original prompt with an enhanced version. Review the enhanced prompt to make sure it accurately reflects your intent. You can further refine the enhanced prompt before sending. -4. **Send the Enhanced Prompt:** Press Enter or click the Send icon (paper plane) to send the enhanced prompt to Roo Code. +4. **Send the Enhanced Prompt:** Press Enter or click the Send icon () to send the enhanced prompt to Roo Code. ## Customizing the Enhancement Process The "Enhance Prompt" feature uses a customizable prompt template. You can modify this template to tailor the enhancement process to your specific needs. -1. **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar. +1. **Open the Prompts Tab:** Click the icon in the Roo Code top menu bar. 2. **Select "ENHANCE" Tab:** You should see listed out support prompts, including "ENHANCE". Click on this tab. 3. **Edit the Prompt Template:** Modify the text in the "Prompt" field. @@ -32,7 +32,7 @@ The default prompt template includes the placeholder `${userInput}`, which will The API configuration used for Enhance Prompt is, by default, the same one that is selected for Roo Code tasks, but it can be changed: -1. **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar. +1. **Open the Prompts Tab:** Click the icon in the Roo Code top menu bar. 2. **Select "ENHANCE" Tab:** You should see an "API Configuration" dropdown 3. **Select an API Configuration:** Choose an existing configuration, and future Enhance Prompt requests will be sent to that configured provider/model. diff --git a/docs/advanced-usage/experimental-features.md b/docs/advanced-usage/experimental-features.md index de5faa85..0cf3d613 100644 --- a/docs/advanced-usage/experimental-features.md +++ b/docs/advanced-usage/experimental-features.md @@ -8,7 +8,7 @@ Roo Code includes experimental features that are still under development. These To enable or disable experimental features: -1. Open the Roo Code settings (gear icon ⚙️ in the top right corner). +1. Open the Roo Code settings ( icon in the top right corner). 2. Go to the "Advanced Settings" section. 3. Find the "Experimental Features" section. 4. Check or uncheck the boxes for the features you want to enable or disable. diff --git a/docs/advanced-usage/local-models.md b/docs/advanced-usage/local-models.md index 081b0923..22e2297f 100644 --- a/docs/advanced-usage/local-models.md +++ b/docs/advanced-usage/local-models.md @@ -73,8 +73,8 @@ Roo Code currently supports two main local model providers: 4. **Configure Roo Code:** - * Open the Roo Code sidebar (🚀 icon). - * Click the settings gear icon (⚙️). + * Open the Roo Code sidebar ( icon). + * Click the settings gear icon (). * Select "ollama" as the API Provider. * Enter the Model name from the previous step (e.g., `your_model_name`). * (Optional) You can configure the base URL if you're running Ollama on a different machine. The default is `http://localhost:11434`. @@ -89,8 +89,8 @@ Roo Code currently supports two main local model providers: * Select your downloaded model. * Click **"Start Server"**. 4. **Configure Roo Code:** - * Open the Roo Code sidebar (🚀 icon). - * Click the settings gear icon (⚙️). + * Open the Roo Code sidebar ( icon). + * Click the settings gear icon (). * Select "lmstudio" as the API Provider. * Enter the Model ID. This should be the name of the model file you loaded in LM Studio (e.g., `codellama-7b.Q4_0.gguf`). LM Studio shows a list of "Currently loaded models" in its UI. * (Optional) You can configure the base URL if you're running LM Studio on a different machine. The default is `http://localhost:1234`. diff --git a/docs/advanced-usage/mcp.md b/docs/advanced-usage/mcp.md index 6d16ae78..e01264fb 100644 --- a/docs/advanced-usage/mcp.md +++ b/docs/advanced-usage/mcp.md @@ -11,7 +11,7 @@ The Model Context Protocol (MCP) is a standard for extending Roo Code's capabili ## MCP Server Status -You can view and manage your MCP server connections by clicking the server icon in the top navigation bar. +You can view and manage your MCP server connections by clicking the icon in the top navigation bar. ## Finding and Installing MCP Servers @@ -71,7 +71,7 @@ Roo Code provides two settings to control the use of MCP servers, to help you ma If you don't want to use MCP servers at all, you can disable them completely: -1. Open the Roo Code Settings (gear icon ⚙️) +1. Open the Roo Code Settings () 2. Find the "Enable MCP Servers" setting 3. Uncheck the box @@ -83,7 +83,7 @@ Roo Code can be asked to assist in creating new MCP servers. This is a powerful To disable MCP server creation: -1. Open the Roo Code Settings (gear icon ⚙️) +1. Open the Roo Code Settings () 2. Find the "Enable MCP Server Creation" setting 3. Uncheck the box diff --git a/docs/advanced-usage/model-temperature.md b/docs/advanced-usage/model-temperature.md index 107d561c..393b2a70 100644 --- a/docs/advanced-usage/model-temperature.md +++ b/docs/advanced-usage/model-temperature.md @@ -21,8 +21,8 @@ Different tasks benefit from different temperature settings. For example: You can adjust the temperature in the Roo Code settings: -1. **Open the Roo Code Panel:** Click the Roo Code icon (🚀) in the VS Code Activity Bar. -2. **Open Settings:** Click the gear icon (⚙️) in the top right corner of the Roo Code panel. +1. **Open the Roo Code Panel:** Click the Roo Code icon () in the VS Code Activity Bar. +2. **Open Settings:** Click the icon in the top right corner of the Roo Code panel. 3. **Find the Temperature Setting:** In the settings panel, you'll find a "Use custom temperature" setting within the API configuration section. 4. **Enter the Temperature Value:** Check the box and enter the temperature value you want to use. The range is typically from 0.0 to 1.0, but this may depend on the specific model and provider. diff --git a/docs/advanced-usage/rate-limits-costs.md b/docs/advanced-usage/rate-limits-costs.md index c5844c27..45210d17 100644 --- a/docs/advanced-usage/rate-limits-costs.md +++ b/docs/advanced-usage/rate-limits-costs.md @@ -29,7 +29,7 @@ To prevent accidental overuse of the API and to help you manage costs, Roo Code **How to configure:** -1. Open the Roo Code settings (gear icon ⚙️ in the top right corner). +1. Open the Roo Code settings ( icon in the top right corner). 2. Go to the "Advanced Settings" section. 3. Find the "Rate Limit (seconds)" setting. 4. Enter the desired delay in seconds. A value of 0 disables rate limiting. diff --git a/docs/basic-usage/the-chat-interface.md b/docs/basic-usage/the-chat-interface.md index 9766a696..f531ec31 100644 --- a/docs/basic-usage/the-chat-interface.md +++ b/docs/basic-usage/the-chat-interface.md @@ -1,6 +1,6 @@ # The Chat Interface -The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon (🚀) in the VS Code Activity Bar. +The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon () in the VS Code Activity Bar. ## Components of the Chat Interface diff --git a/docs/faq.md b/docs/faq.md index 0afae310..d826fd5b 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -81,7 +81,7 @@ Yes, Roo Code supports running models locally using Ollama and LM Studio. See [ ### How do I start a new task? -Open the Roo Code panel (rocket icon 🚀) and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](basic-usage/typing-your-requests) for best practices. +Open the Roo Code panel () and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](basic-usage/typing-your-requests) for best practices. ### What are modes in Roo Code? diff --git a/docs/getting-started/connecting-api-provider.md b/docs/getting-started/connecting-api-provider.md index 8d0f5899..d708def7 100644 --- a/docs/getting-started/connecting-api-provider.md +++ b/docs/getting-started/connecting-api-provider.md @@ -28,7 +28,7 @@ Choose one of these options and follow the instructions below to obtain an API k ## Configuring Roo Code in VS Code -1. **Open the Roo Code Sidebar:** Click the Roo Code icon (🚀) in the VS Code Activity Bar. You should see the welcome screen. +1. **Open the Roo Code Sidebar:** Click the Roo Code icon () in the VS Code Activity Bar. You should see the welcome screen. 2. **Select your API Provider:** In the "API Provider" dropdown, choose your API provider. diff --git a/docs/getting-started/installing.md b/docs/getting-started/installing.md index 02f5cb03..bf9425c4 100644 --- a/docs/getting-started/installing.md +++ b/docs/getting-started/installing.md @@ -22,7 +22,7 @@ This is the easiest and recommended method for most users. 4. **Install:** Find "Roo Code" in the search results (by RooVeterinaryInc). Click the **Install** button. 5. **Reload (if required):** VS Code may prompt you to reload. If so, click the **Reload** button. -Once installed, you'll see the Roo Code icon (a rocket 🚀) in the Activity Bar. Click it to open the Roo Code panel. +Once installed, you'll see the Roo Code icon () in the Activity Bar. Click it to open the Roo Code panel. ## 2. Installation from the Open VSX Registry diff --git a/docs/getting-started/your-first-task.md b/docs/getting-started/your-first-task.md index 1dab403c..df5a61ae 100644 --- a/docs/getting-started/your-first-task.md +++ b/docs/getting-started/your-first-task.md @@ -8,7 +8,7 @@ Now that you've [configured your AI provider and model](./connecting-api-provide ## Step 1: Open the Roo Code Panel -If the Roo Code panel isn't already visible, click the Roo Code icon (🚀) in the VS Code Activity Bar (the vertical bar on the side of the window). This will open the Roo Code chat interface. If you don't see the icon, make sure the extension is installed and enabled. +If the Roo Code panel isn't already visible, click the Roo Code icon () in the VS Code Activity Bar (the vertical bar on the side of the window). This will open the Roo Code chat interface. If you don't see the icon, make sure the extension is installed and enabled. ## Step 2: Type Your Task @@ -22,7 +22,7 @@ You don't need to use any special commands or syntax at this point. Just write ## Step 3: Send Your Task -Press Enter, or click the Send icon (a paper plane) to the right of the input box. +Press Enter, or click the Send icon () to the right of the input box. ## Step 4: Review and Approve Actions diff --git a/package-lock.json b/package-lock.json index 4369f124..c4d32c17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@docusaurus/preset-classic": "3.7.0", "@easyops-cn/docusaurus-search-local": "^0.48.5", "@mdx-js/react": "^3.0.0", + "@vscode/codicons": "^0.0.36", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", @@ -4883,6 +4884,11 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz", "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==" }, + "node_modules/@vscode/codicons": { + "version": "0.0.36", + "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.36.tgz", + "integrity": "sha512-wsNOvNMMJ2BY8rC2N2MNBG7yOowV3ov8KlvUE/AiVUlHKTfWsw3OgAOQduX7h0Un6GssKD3aoTVH+TF3DSQwKQ==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", diff --git a/package.json b/package.json index 12ebe742..be59567e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@docusaurus/preset-classic": "3.7.0", "@easyops-cn/docusaurus-search-local": "^0.48.5", "@mdx-js/react": "^3.0.0", + "@vscode/codicons": "^0.0.36", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", diff --git a/src/components/Codicon.tsx b/src/components/Codicon.tsx new file mode 100644 index 00000000..653ea2e4 --- /dev/null +++ b/src/components/Codicon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import '@vscode/codicons/dist/codicon.css'; + +interface CodiconProps { + name: string; +} + +export default function Codicon({ name }: CodiconProps): JSX.Element { + return ( +