feat: reply editor follow-up (#13106)

Co-authored-by: aakashb95 <aakashbakhle@gmail.com>

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -50,7 +50,8 @@ export default {
 
     async generateAIContent(type = 'improve') {
       this.isGenerating = true;
-      this.generatedContent = await this.processEvent(type);
+      const { message } = await this.processEvent(type);
+      this.generatedContent = message;
       this.isGenerating = false;
     },
     applyText() {

app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue

@@ -10,7 +10,7 @@ import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 
 import Icon from 'next/icon/Icon.vue';
 
-const props = defineProps({
+defineProps({
   hasSelection: {
     type: Boolean,
     default: false,
@@ -28,7 +28,12 @@ const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
 // Selection-based menu items (when text is selected)
 const menuItems = computed(() => {
   const items = [];
-  if (props.hasSelection) {
+  // for now, we don't allow improving just  aprt of the selection
+  // we will add this feature later. Once we do, we can revert the change
+  const hasSelection = false;
+  // const hasSelection = props.hasSelection
+
+  if (hasSelection) {
     items.push({
       label: t(
         'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY_SELECTION'

app/javascript/dashboard/components/widgets/WootWriter/CopilotReplyBottomPanel.vue

@@ -1,35 +1,37 @@
 <script setup>
+import { computed } from 'vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import { useI18n } from 'vue-i18n';
+import { useKbd } from 'dashboard/composables/utils/useKbd';
 
 defineProps({
   isGeneratingContent: {
     type: Boolean,
     default: false,
   },
-  isPrivate: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['submit', 'cancel']);
-
+const { t } = useI18n();
 const handleCancel = () => {
   emit('cancel');
 };
 
+const shortcutKey = useKbd(['$mod', '+', 'enter']);
+
+const acceptLabel = computed(() => {
+  return `${t('GENERAL.ACCEPT')}  (${shortcutKey.value})`;
+});
+
 const handleSubmit = () => {
   emit('submit');
 };
 </script>
 
 <template>
-  <div
-    class="flex justify-between items-center p-3 border-t"
-    :class="{ 'border-n-weak': !isPrivate, 'border-n-amber-12/5': isPrivate }"
-  >
+  <div class="flex justify-between items-center p-3 pt-0">
     <NextButton
-      label="Discard"
+      :label="t('GENERAL.DISCARD')"
       slate
       link
       class="!px-1 hover:!no-underline"
@@ -38,7 +40,7 @@ const handleSubmit = () => {
       @click="handleCancel"
     />
     <NextButton
-      label="Accept"
+      :label="acceptLabel"
       class="bg-n-iris-9 text-white"
       solid
       sm

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -56,7 +56,6 @@ import {
   getFormattingForEditor,
   getSelectionCoords,
   calculateMenuPosition,
-  stripUnsupportedFormatting,
   getEffectiveChannelType,
   stripUnsupportedFormatting,
 } from 'dashboard/helper/editorHelper';

app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue

@@ -22,7 +22,13 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['focus', 'blur', 'clearSelection', 'contentReady']);
+const emit = defineEmits([
+  'focus',
+  'blur',
+  'clearSelection',
+  'contentReady',
+  'send',
+]);
 
 const copilotEditorContent = ref('');
 
@@ -37,6 +43,11 @@ const onBlur = () => {
 const clearEditorSelection = () => {
   emit('clearSelection');
 };
+
+const onSend = () => {
+  emit('send', copilotEditorContent.value);
+  copilotEditorContent.value = '';
+};
 </script>
 
 <template>
@@ -62,6 +73,7 @@ const clearEditorSelection = () => {
       @focus="onFocus"
       @blur="onBlur"
       @clear-selection="clearEditorSelection"
+      @send="onSend"
     />
     <div
       v-else-if="isGeneratingContent"

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -48,6 +48,7 @@ import {
   getEffectiveChannelType,
 } from 'dashboard/helper/editorHelper';
 import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
+import { useKbd } from 'dashboard/composables/utils/useKbd';
 
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
@@ -94,6 +95,7 @@ export default {
 
     const replyEditor = useTemplateRef('replyEditor');
     const copilot = useCopilotReply();
+    const shortcutKey = useKbd(['$mod', '+', 'enter']);
 
     return {
       uiSettings,
@@ -103,6 +105,7 @@ export default {
       fetchQuotedReplyFlagFromUISettings,
       replyEditor,
       copilot,
+      shortcutKey,
     };
   },
   data() {
@@ -273,7 +276,7 @@ export default {
         sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
       }
       const keyLabel = this.isEditorHotKeyEnabled('cmd_enter')
-        ? '(⌘ + ↵)'
+        ? `(${this.shortcutKey})`
         : '(↵)';
       return `${sendMessageText} ${keyLabel}`;
     },
@@ -624,7 +627,9 @@ export default {
         },
         '$mod+Enter': {
           action: () => {
-            if (this.isAValidEvent('cmd_enter')) {
+            if (this.copilot.isActive.value && this.isFocused) {
+              this.onSubmitCopilotReply();
+            } else if (this.isAValidEvent('cmd_enter')) {
               this.onSendReply();
             }
           },
@@ -1171,6 +1176,7 @@ export default {
           @clear-selection="clearEditorSelection"
           @close="copilot.showEditor.value = false"
           @content-ready="copilot.setContentReady"
+          @send="copilot.sendFollowUp"
         />
         <WootMessageEditor
           v-else-if="!showAudioRecorderEditor"
@@ -1240,7 +1246,6 @@ export default {
       <CopilotReplyBottomPanel
         v-if="copilot.isActive.value"
         key="copilot-bottom-panel"
-        :is-private="isOnPrivateNote"
         :is-generating-content="copilot.isButtonDisabled.value"
         @submit="onSubmitCopilotReply"
         @cancel="copilot.toggleEditor"