feat: Insert captain response to reply editor (#10581)

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -18,6 +18,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
 });
 
 const emit = defineEmits(['sendMessage']);
@@ -47,7 +51,7 @@ watch(
 
 <template>
   <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
-    <div ref="chatContainer" class="flex-1 overflow-y-auto py-4 space-y-6 px-4">
+    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
           v-if="message.role === 'user'"
@@ -57,12 +61,13 @@ watch(
         <CopilotAssistantMessage
           v-else-if="COPILOT_USER_ROLES.includes(message.role)"
           :message="message"
+          :conversation-inbox-type="conversationInboxType"
         />
       </template>
 
       <CopilotLoader v-if="isCaptainTyping" />
     </div>
 
-    <CopilotInput class="mx-3 mb-4 mt-px" @send="sendMessage" />
+    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
   </div>
 </template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -1,12 +1,36 @@
 <script setup>
+import { computed } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from '../avatar/Avatar.vue';
 
-defineProps({
+const props = defineProps({
   message: {
     type: Object,
     required: true,
   },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
 });
+
+const insertIntoRichEditor = computed(() => {
+  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
+    props.conversationInboxType
+  );
+});
+
+const useCopilotResponse = () => {
+  if (insertIntoRichEditor.value) {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
+  } else {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
+  }
+};
 </script>
 
 <template>
@@ -22,6 +46,15 @@ defineProps({
       <div class="break-words">
         {{ message.content }}
       </div>
+      <div class="flex flex-row mt-1">
+        <Button
+          :label="$t('CAPTAIN.COPILOT.USE')"
+          faded
+          sm
+          slate
+          @click="useCopilotResponse"
+        />
+      </div>
     </div>
   </div>
 </template>