Apply generated code from UI code snippets

[dustinbyrne]

Problem

Users need the ability to directly apply code snippets generated in Navie's response to existing files. This feature should be activated when a code block is preceded by a comment directive containing a file path.

Analysis

To address this requirement, we need to identify code blocks that are preceded by a comment directive specifying a file path. Then, modify the rendering logic to include an apply button in the frontend markdown code snippet UI component. Clicking this button will trigger the necessary events for applying the code to the specified file.

The change primarily involves enhancing the frontend rendering of markdown code blocks and handling the click event to apply the code.

Proposed Changes

1. Enhance UserMessage.vue to recognize comment directives with file paths:

   • Modify the Renderer instance to detect comment directives that specify a file path.
   • Update the renderedMarkdown computed property to parse these comment directives and store the file path.

2. Add apply button in MarkdownCodeSnippet.vue:

   • Modify the template to conditionally render an apply button when the file path is available.
   • Implement the click handler for the apply button to emit an event with the necessary file and code information.

3. Handle apply event in parent component:

   • Update the parent component (likely UserMessage.vue) to listen for the apply event from MarkdownCodeSnippet.vue.
   • On receiving the apply event, trigger the logic to apply the code to the specified file using the existing backend logic.

File-specific changes:

1. UserMessage.vue:

   • Renderer Modification: Within the custom renderer, modify the code rendering logic to detect and handle comment directives specifying file paths.
   • Computed Property: Update the renderedMarkdown computed property to extract and store the file path when present.

2. MarkdownCodeSnippet.vue:

   • Template Update: Amend the template to include an apply button when a file path is detected.
   • Event Emission: Implement the logic to emit an event with file and code details when the apply button is clicked.

3. Parent Component:

   • Event Listener: Add an event listener to handle the apply event from child components and execute the code application logic.

Detailed Implementation Plan

1. Update UserMessage.vue:

   • Location: packages/components/src/components/chat/UserMessage.vue
   • Changes:
     • Update the custom renderer to detect and store file path comment directives.
     • Modify the renderedMarkdown computed property to extract the file path from the markdown content.

2. Modify MarkdownCodeSnippet.vue:

   • Location: packages/components/src/components/chat/MarkdownCodeSnippet.vue
   • Changes:
     • Update the template to conditionally render an apply button.
     • Add a method to emit an apply event with the necessary file path and code details when the button is clicked.

3. Parent Component Handling:

   • Location: Likely packages/components/src/components/chat/UserMessage.vue
   • Changes:
     • Listen for the apply event from MarkdownCodeSnippet.vue.
     • Implement the handler to trigger the backend update logic.

This approach ensures the frontend can dynamically add apply buttons to relevant code snippets and respond to user actions to apply the changes.

[kgilpin]

This design doesn’t specify what command will be called to actually apply the change. I propose that it be a Navie command (@apply) in which the message content is the code to apply. A /file directive can be used to specify the file name. /content=body can indicate that the message body is the file content - rather than searching back through the message history.

[appland-release]

:tada: This issue has been resolved in version @appland/components-v4.30.0 :tada:

The release is available on:

• @appland/components-v4.30.0
• GitHub release
• @appland/components-v4.30.0

Your semantic-release bot :package::rocket: