Closed dustinbyrne closed 1 month ago
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.
:tada: This issue has been resolved in version @appland/components-v4.30.0 :tada:
The release is available on:
@appland/components-v4.30.0
@appland/components-v4.30.0
Your semantic-release bot :package::rocket:
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
Enhance
UserMessage.vue
to recognize comment directives with file paths:Renderer
instance to detect comment directives that specify a file path.renderedMarkdown
computed property to parse these comment directives and store the file path.Add
apply
button inMarkdownCodeSnippet.vue
:apply
button when the file path is available.apply
button to emit an event with the necessary file and code information.Handle
apply
event in parent component:UserMessage.vue
) to listen for theapply
event fromMarkdownCodeSnippet.vue
.apply
event, trigger the logic to apply the code to the specified file using the existing backend logic.File-specific changes:
UserMessage.vue
:renderedMarkdown
computed property to extract and store the file path when present.MarkdownCodeSnippet.vue
:apply
button when a file path is detected.apply
button is clicked.Parent Component:
apply
event from child components and execute the code application logic.Detailed Implementation Plan
Update
UserMessage.vue
:packages/components/src/components/chat/UserMessage.vue
renderedMarkdown
computed property to extract the file path from the markdown content.Modify
MarkdownCodeSnippet.vue
:packages/components/src/components/chat/MarkdownCodeSnippet.vue
apply
button.apply
event with the necessary file path and code details when the button is clicked.Parent Component Handling:
packages/components/src/components/chat/UserMessage.vue
apply
event fromMarkdownCodeSnippet.vue
.This approach ensures the frontend can dynamically add
apply
buttons to relevant code snippets and respond to user actions to apply the changes.