Clicking "Suggest" button preloads the question into the box but does not “Press Enter”

[kgilpin]

Giving the user a chance to edit the question first.

[github-actions[bot]]

Title:

Modify "Suggest" button to preload question into the input box without submitting it

Problem:

Currently, when a user clicks the "Suggest" button, the question is preloaded into the input box but is not automatically submitted ("Pressed Enter"). This allows the user to review and edit the question before submitting it, which is the intended behavior. However, this is not clearly communicated and can cause confusion.

Analysis:

The main components involved in this feature are:

1. The component that renders the suggestion buttons.
2. The input box where the question is preloaded.
3. The logic that handles the "Suggest" button click, ensuring the question is loaded into the input box without automatically submitting it.

Currently, it seems the question is loaded correctly but there is no mechanism to submit the question automatically, which is intended but not clearly indicated to the user. We need to ensure that the preloaded text does not get automatically submitted and provide clear, user-friendly indication of this behavior.

Proposed Changes:

1. packages/components/src/components/chat/UserMessage.vue:

   • Modify the v-popper component used to display suggestions to ensure the question is loaded into the input box upon clicking the "Suggest" button.
   • Ensure that the "next step suggestions" include a visual indication that the user needs to manually submit the question by pressing "Enter".

2. packages/cli/src/rpc/navie/suggest.ts:

   • Ensure there is no logic that automatically submits the question once it is loaded into the input box. This might already be correct as per the provided snippets.

3. packages/components/src/components/install-guide/ButtonGroup.vue:

   • The button component v-button should include a click handler that loads the suggestion into the input box without submitting it automatically.

Below are the detailed proposed changes:

1. packages/components/src/components/chat/UserMessage.vue:

   • Update the code to ensure the question is preloaded without being automatically submitted. Indicate to the user that they need to manually press "Enter" to submit.

   <!-- file: /home/runner/work/appmap-js/appmap-js/packages/components/src/components/chat/UserMessage.vue -->
   <v-popper
     v-for="(i, index) in nextStepSuggestions"
     :key="index"
     placement="top"
     align="left"
     :time-to-display="500"
   >
     <template #content>
       <div class="key-binds" v-if="nextStepSuggestions">
         <div class="key-binds__option">
           <span class="keyboard">Click</span>
           <span class="keyboard-plus">To preload this suggestion</span>
         </div>
         <div class="key-binds__option">
           <span class="keyboard">Click</span>
           <span class="keyboard-plus">Then press Enter to submit</span>
         </div>
       </div>
     </template>
     <v-next-prompt-button
       data-cy="next-step-button"
       :command="i.command"
       :prompt="i.prompt"
       @click.native="preloadSuggestion(i.prompt)"
     >
       {{ i.label }}
     </v-next-prompt-button>
   </v-popper>

2. packages/cli/src/rpc/navie/suggest.ts:

   • Verify that the getSuggestions and navieSuggestHandlerV1 methods do not include unnecessary automatic submission logic.

3. packages/components/src/components/install-guide/ButtonGroup.vue:

   • Add an event handler to preload the suggestion into the input field without submitting.

   <!-- file: /home/runner/work/appmap-js/appmap-js/packages/components/src/components/install-guide/ButtonGroup.vue -->
   <v-button
     v-for="button in buttons"
     :key="button"
     :class="{ button: 1, 'button--active': selectedButton === button }"
     size="small"
     @click.native="onClickButton(button)"
   >
     {{ button }}
   </v-button>
   
   <script lang="ts">
   import Vue from 'vue';
   import VButton from '@/components/Button.vue';
   
   export default Vue.extend({
   components: {
     VButton,
   },
   props: {
     label: String,
     buttons: {
       type: Array as () => string[],
       default: () => [],
     },
   },
   data() {
     return {
       selectedButton: undefined as undefined | string,
     };
   },
   methods: {
     onClickButton(button: string) {
       const newSelection = this.selectedButton === button ? undefined : button;
       this.selectedButton = newSelection;
       this.$emit('preload-suggestion', newSelection);
     },
   },
   });
   </script>