Merge pull request #5028 from continuedev/pe/prompt-docs-pt2

feat: fix ctx providers w/ slash cmds

Author: Patrick-Erichsen

core/commands/index.ts

@@ -1,6 +1,7 @@
 import { CustomCommand, SlashCommand, SlashCommandDescription } from "../";
 import { renderTemplatedString } from "../promptFiles/v1/renderTemplatedString";
 import { replaceSlashCommandWithPromptInChatHistory } from "../promptFiles/v1/updateChatHistory";
+import { renderPromptFileV2 } from "../promptFiles/v2/renderPromptFile";
 import { renderChatMessage } from "../util/messageContent";
 
 import SlashCommands from "./slash";
@@ -15,7 +16,16 @@ export function slashFromCustomCommand(
     name: commandName,
     description: customCommand.description ?? "",
     prompt: customCommand.prompt,
-    run: async function* ({ input, llm, history, ide, completionOptions }) {
+    run: async function* ({
+      input,
+      llm,
+      history,
+      ide,
+      completionOptions,
+      config,
+      selectedCode,
+      fetch,
+    }) {
       // Render prompt template
       let renderedPrompt: string;
       if (customCommand.prompt.includes("{{{ input }}}")) {
@@ -25,7 +35,21 @@ export function slashFromCustomCommand(
           { input },
         );
       } else {
-        renderedPrompt = customCommand.prompt + "\n\n" + input;
+        const renderedPromptFile = await renderPromptFileV2(
+          customCommand.prompt,
+          {
+            config,
+            llm,
+            ide,
+            selectedCode,
+            fetch,
+            fullInput: input,
+            embeddingsProvider: config.modelsByRole.embed[0],
+            reranker: config.modelsByRole.rerank[0],
+          },
+        );
+
+        renderedPrompt = renderedPromptFile[1];
       }
 
       // Replaces slash command messages with the rendered prompt

core/promptFiles/v1/slashCommandFromPromptFile.ts

@@ -2,6 +2,7 @@ import { ContinueSDK, SlashCommand } from "../..";
 import { renderChatMessage } from "../../util/messageContent";
 import { getLastNPathParts } from "../../util/uri";
 import { parsePromptFileV1V2 } from "../v2/parsePromptFileV1V2";
+import { renderPromptFileV2 } from "../v2/renderPromptFile";
 
 import { getContextProviderHelpers } from "./getContextProviderHelpers";
 import { renderTemplatedString } from "./renderTemplatedString";
@@ -67,7 +68,17 @@ export function slashCommandFromPromptFileV1(
       context.llm.systemMessage = systemMessage;
 
       const userInput = extractUserInput(context.input, name);
-      const renderedPrompt = await renderPromptV1(prompt, context, userInput);
+      const [_, renderedPrompt] = await renderPromptFileV2(prompt, {
+        config: context.config,
+        fullInput: userInput,
+        embeddingsProvider: context.config.modelsByRole.embed[0],
+        reranker: context.config.modelsByRole.rerank[0],
+        llm: context.llm,
+        ide: context.ide,
+        selectedCode: context.selectedCode,
+        fetch: context.fetch,
+      });
+
       const messages = replaceSlashCommandWithPromptInChatHistory(
         context.history,
         name,

core/promptFiles/v2/renderPromptFile.ts

@@ -66,7 +66,7 @@ export async function renderPromptFileV2(
   rawContent: string,
   extras: ContextProviderExtras,
 ): Promise<[ContextItem[], string]> {
-  const [preamble, body] = getPreambleAndBody(rawContent);
+  const [_, body] = getPreambleAndBody(rawContent);
 
   const contextItemsPromises: Promise<ContextItem[]>[] = [];
   const renderedBody = body.replace(/@([^\s]+)/g, (match, name) => {
@@ -75,6 +75,10 @@ export async function renderPromptFileV2(
   });
 
   const contextItems = (await Promise.all(contextItemsPromises)).flat();
+  const renderedPrompt =
+    contextItems.map((item) => item.content).join("\n\n") +
+    "\n\n" +
+    renderedBody;
 
-  return [contextItems, renderedBody];
+  return [contextItems, renderedPrompt];
 }

docs/docs/customize/context-providers.mdx

@@ -530,10 +530,6 @@ The [Model Context Protocol](https://modelcontextprotocol.io/introduction) is a
 
 You'll then be able to type "@" and see "MCP" in the context providers dropdown.
 
-### Prompt Files
-
-See [Prompt Files](./deep-dives/prompt-files.md). Prompt files are not added directly to the config file; prompt files are parsed and injected into the config automatically, to be used like other context providers.
-
 ### `@Issue`
 
 Reference the conversation in a GitHub issue.
@@ -883,7 +879,6 @@ You can override this query by setting the `issueQuery` parameter.
 
 You can set the `maxResults` parameter to limit the number of results returned. The default is `50`.
 
-
 ### `@Discord`
 
 Reference the messages in a Discord channel.

docs/docs/customize/deep-dives/prompt-files.md

@@ -0,0 +1,97 @@
+---
+title: Prompts
+---
+
+Prompts are reusable instructions that can be referenced at any time during chat. They are especially useful as context for repetitive and/or complex tasks.
+
+:::info
+Visit the Hub to [explore prompts](https://hub.continue.dev/explore/prompts) or [create your own](https://hub.continue.dev/new?type=block&blockType=prompts)
+:::
+
+## Examples
+
+Below are some examples to get you started.
+
+### Security review
+
+```text title="Security best practices review"
+@open - Review these files for the following security best practices:
+- Does the architecture follow security-by-design principles?
+- Are there potential security vulnerabilities in the system design?
+- Is sensitive data handled appropriately throughout the lifecycle?
+```
+
+### Reference best practice guides
+
+```text title="Redux best practices review"
+@https://redux.js.org/style-guide/
+@currentFile
+
+Review this code for adherence to Redux best practices.
+```
+
+### Pull in commonly used files for tasks
+
+```text title="Generate a new TypeORM entity"
+@src/db/dataSource.ts @src/db/entity/SampleEntity.ts
+
+Use these files to generate a new TypeORM entity based on the following requirements:
+```
+
+## Including Context Providers in your prompts
+
+Many [context providers](../context-providers.mdx) can be referenced by typing "@" followed by the name of the context provider. The currently supported list is:
+
+- `@terminal` - The contents of the terminal
+- `@currentFile` - The currently active file
+- `@open` - All open files
+- `@os` - Information about the operating system
+- `@problems` - Problems reported by the language server in the active file
+- `@repo-map` - A map of files in the repository
+- `@tree` - A tree view of the repository structure
+
+Or you can directly type URLs and file paths:
+
+- `@https://github.com/continuedev/continue` - The contents of a URL
+- `@src/index.ts` - The contents of a file (VS Code only)
+
+All references will be attached as context items, rather than injected directly inline.
+
+## Local `.prompt` files
+
+In addition to Prompt blocks on the Hub, you can also define prompts in local `.prompt` files, located in the `.continue/prompts` folder at the top level of your workspace. This is useful for quick iteration on prompts to test them out before pushing up to the Hub.
+
+### Quick Start
+
+Below is a quick example of setting up a prompt file:
+
+1. Create a folder called `.continue/prompts` at the top level of your workspace
+2. Add a file called `test.prompt` to this folder.
+3. Write the following contents to `test.prompt` and save.
+
+```.prompt
+name: Current file prompt
+description: A test prompt using the current file context provider
+---
+@currentFile
+```
+
+Now to use this prompt, you can open Chat, type <kbd>/</kbd>, select the prompt, and add type out some additional text such as "Review the code for any issues".
+
+### Format
+
+The format is inspired by [HumanLoops's .prompt file](https://docs.humanloop.com/docs/prompt-file-format), with additional templating to reference files, URLs, and context providers.
+
+:::info
+The current state of this format is experimental and subject to change
+:::
+
+### Preamble
+
+The "preamble" is everything above the `---` separator, and lets you specify model parameters. It uses YAML syntax and currently supports the following parameters:
+
+- `name` - The display title
+- `description` - The description you will see in the dropdown
+- `version` - Can be either "1" (for legacy prompt files) or "2" (this is the default and does not need to be set)
+
+If you don't need any of these parameters, you can leave out the preamble and do not need to include the `---` separator.

docs/docs/customize/deep-dives/prompts.md

@@ -26,7 +26,7 @@ The easiest way to add a slash command is by adding [`prompt` blocks](../../hub/
 
 It is also possible to write your own slash command by defining a “.prompt file.” Prompt files can be as simple as a text file, but also include templating so that you can refer to files, URLs, highlighted code, and more.
 
-Learn more about prompt files [here](./prompt-files.md)
+Learn more about prompt files [here](./prompts.md)
 
 ### MCP Server prompts
 

docs/docs/customize/deep-dives/slash-commands.mdx

@@ -14,7 +14,7 @@ To make common use cases even more accessible, we provide a handful of other way
 
 ## Quick actions
 
-Quick Actions are displayed as buttons above top-level classes and functions in your source code, letting you invoke actions with one click. They will edit that class or function, but nothing outside of it. They can also be customized with [.prompt files](./prompt-files.md) to perform custom actions.
+Quick Actions are displayed as buttons above top-level classes and functions in your source code, letting you invoke actions with one click. They will edit that class or function, but nothing outside of it. They can also be customized with [.prompt files](./prompts.md) to perform custom actions.
 
 ![quick-actions](/img/quick-actions.png)
 

docs/docs/customize/deep-dives/vscode-actions.md

@@ -50,7 +50,7 @@ Then, create a server that responds to requests as are made from [HttpContextPro
 The `"options"` property can be used to send additional parameters to your endpoint, which will be included in the request body.
 
 :::info
-The following methods for creating custom context providers are deprecated. We recommend using HTTP context providers, [MCP Servers](../context-providers.mdx#model-context-protocol), and [Prompt files](../deep-dives/prompt-files.md) where possible.
+The following methods for creating custom context providers are deprecated. We recommend using HTTP context providers, [MCP Servers](../context-providers.mdx#model-context-protocol), and [Prompts](../deep-dives/prompts.md) where possible.
 :::
 
 ## Using CustomContextProvider

docs/docs/customize/tutorials/build-your-own-context-provider.mdx

@@ -3,7 +3,7 @@ title: Build your own slash command
 ---
 
 :::info
-Slash commands can currently only be added using [`config.json`](../../json-reference.md) or `config.ts`. The [`YAML Config Format`](../../reference.md) is the new and preferred format. We recommend looking into [Prompt Files](../deep-dives/prompt-files.md) to achieve similar functionality.
+Slash commands can currently only be added using [`config.json`](../../json-reference.md) or `config.ts`. The [`YAML Config Format`](../../reference.md) is the new and preferred format. We recommend looking into [Prompt Files](../deep-dives/prompts.md) to achieve similar functionality.
 :::
 
 There are two ways to add custom slash commands:

docs/docs/customize/tutorials/build-your-own-slash-command.md

@@ -41,12 +41,7 @@ Learn more in the [rules deep dive](../../customize/deep-dives/rules.md), and vi
 
 Prompts blocks are pre-written, reusable prompts that can be referenced at any time during chat. They are especially useful as context for repetitive and/or complex tasks. [Explore prompts](https://hub.continue.dev/explore/prompts) on the hub.
 
-Prompt blocks have the same syntax as [prompt files](../../customize/deep-dives/prompt-files.md). There are two important differences between prompt blocks and prompt files:
-
-1. Currently, prompt blocks cannot use context providers
-2. Prompt blocks are stored within `config.yaml` rather than `.continue/prompts` in project directory and
-
-The `config.yaml` spec for `prompts` can be found [here](../../reference.md#prompts).
+Prompt blocks have the same syntax as [prompt files](../../customize/deep-dives/prompts.md). The `config.yaml` spec for `prompts` can be found [here](../../reference.md#prompts).
 
 ## Data
 

docs/docs/hub/blocks/block-types.md

@@ -286,7 +286,7 @@ const config = {
             ],
           },
           {
-            to: "/customize/deep-dives/prompt-files",
+            to: "/customize/deep-dives/prompts",
             from: ["/walkthroughs/prompt-files", "/features/prompt-files"],
           },
           // TODO - actions redirects
@@ -489,6 +489,10 @@ const config = {
             to: "/getting-started/install",
             from: "/getting-started",
           },
+          {
+            to: "/customize/deep-dives/prompts",
+            from: "/customize/deep-dives/prompt-files",
+          },
         ],
       },
     ],

docs/docusaurus.config.js

@@ -13,7 +13,7 @@ Continue 有一个大的内置斜杠命令库，但是当你首次安装时，
 
 有两种方法添加定制斜杠命令：
 
-1. 使用 `.prompt` 文件 - 这是大多数情况下推荐的。[在这里](../customize/deep-dives/prompt-files.md) 查看完整参考。
+1. 使用 `.prompt` 文件 - 这是大多数情况下推荐的。[在这里](../customize/deep-dives/prompts.md) 查看完整参考。
 2. 使用 `config.ts` - 这给你对于 LLM, IDE 和其他重要的入口可编程的访问，通过编写 JavaScript/TypeScript 函数
 
 ### 使用 `config.ts` 定制斜杠命令

docs/i18n/zh-CN/docusaurus-plugin-content-docs/current/actions/how-to-customize.md

@@ -24,7 +24,7 @@ Actions 是常见用例的快捷方式。例如，你可能想要审查代码，
 
 通过定义一个 ".prompt 文件" ，也可以编写你自己的斜杠命令。 prompt 文件可以是个简单的文本文件，但是也包含模板，所以你可以引用文件， URL ，高亮代码以及更多。
 
-完整的 .prompt 文件可以参考 [这里](../customize/deep-dives/prompt-files.md) 。
+完整的 .prompt 文件可以参考 [这里](../customize/deep-dives/prompt.md) 。
 
 :::tip[Prompt 库]
 为了帮助你开始，[我们精心编写了一个小的 `.prompt` 文件库](https://github.com/continuedev/prompt-file-examples) 。我们鼓励社区贡献到这个仓库，所以请考虑为你的 prompt 创建一个拉取请求！