feat: render shortcut button dynamically based on buttonText (e.g., "… #4
Conversation
…TAB", "CTRL + →")
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the completion input component to dynamically render shortcut buttons based on the current action type. The button alternates between showing "TAB" for full completion approval and "CTRL + →" for next word approval.
- Updates the completion button to display different shortcuts dynamically ("TAB" vs "CTRL + →")
- Implements state management to track and toggle between completion modes
- Adjusts styling and layout to accommodate variable button widths
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| custom/package.json | Updates vue-suggestion-input dependency to version 1.0.12 |
| custom/completionInput.vue | Implements dynamic button rendering with state management and conditional UI display |
Files not reviewed (1)
- custom/package-lock.json: Language not supported
custom/completionInput.vue
Outdated
| @@ -61,15 +85,33 @@ const props = defineProps<{ | |||
| const emit = defineEmits([ | |||
| 'update:value', | |||
| ]); | |||
|
|
|||
| const approveCompletionValue:string='TAB'; | |||
| const approveNextWorldValue:string='CTRL + ->' | |||
There was a problem hiding this comment.
The variable name 'approveNextWorldValue' contains a spelling error. 'World' should be 'Word' to match the intended functionality.
| const approveNextWorldValue:string='CTRL + ->' | |
| const approveNextWordValue:string='CTRL + ->' |
Copilot uses AI. Check for mistakes.
| :class="[ | ||
| 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800', | ||
| 'font-medium rounded-lg text-xs flex items-center justify-center py-1 px-1 ', | ||
| buttonText === approveCompletionValue ? 'w-16' : 'w-18' |
There was a problem hiding this comment.
[nitpick] The conditional width assignment uses magic numbers ('w-16', 'w-18'). Consider defining these as named constants to improve maintainability and make the sizing logic more explicit.
Copilot uses AI. Check for mistakes.
custom/completionInput.vue
Outdated
| } | ||
| buttonText.value === approveCompletionValue ? buttonText.value = approveNextWorldValue : buttonText.value = approveCompletionValue; |
There was a problem hiding this comment.
This ternary assignment duplicates logic from the handleCompletionApproved function. Consider using the existing function to maintain consistency and reduce duplication.
| buttonText.value === approveCompletionValue ? buttonText.value = approveNextWorldValue : buttonText.value = approveCompletionValue; | |
| handleCompletionApproved(); |
Copilot uses AI. Check for mistakes.
custom/completionInput.vue
Outdated
| buttonText.value = approveNextWorldValue; | ||
| } else if (buttonText.value === approveNextWorldValue && type === 'word') { |
There was a problem hiding this comment.
Reference to misspelled variable 'approveNextWorldValue' should be 'approveNextWordValue'.
| buttonText.value = approveNextWorldValue; | |
| } else if (buttonText.value === approveNextWorldValue && type === 'word') { | |
| buttonText.value = approveNextWordValue; | |
| } else if (buttonText.value === approveNextWordValue && type === 'word') { |
Copilot uses AI. Check for mistakes.
custom/completionInput.vue
Outdated
| buttonText.value = approveNextWorldValue; | ||
| } else if (buttonText.value === approveNextWorldValue && type === 'word') { |
There was a problem hiding this comment.
Reference to misspelled variable 'approveNextWorldValue' should be 'approveNextWordValue'.
| buttonText.value = approveNextWorldValue; | |
| } else if (buttonText.value === approveNextWorldValue && type === 'word') { | |
| buttonText.value = approveNextWordValue; | |
| } else if (buttonText.value === approveNextWordValue && type === 'word') { |
Copilot uses AI. Check for mistakes.
…TAB", "CTRL + →")