Enable Email Forwarding with Attachments in Conversations #2141

desk/src/components/CommunicationArea.vue

@@ -144,6 +144,15 @@ function replyToEmail(data: object) {
   );
 }
 
+function forwardEmail(data: object) {
+  showEmailBox.value = true;
+  emailEditorRef.value.addToForward(
+    data.content,
+    data.subject,
+    data.attachments
+  );
+}
+
 const props = defineProps({
   doctype: {
     type: String,
@@ -183,6 +192,7 @@ watch(
 
 defineExpose({
   replyToEmail,
+  forwardEmail,
   toggleEmailBox,
   toggleCommentBox,
   editor: emailEditorRef,

desk/src/components/EmailArea.vue

@@ -65,10 +65,22 @@
           v-if="showSplitOption"
           :placement="'right'"
           :options="[
-            {
+            ...(showSplitOption ? [{
               label: 'Split Ticket',
               icon: LucideSplit,
               onClick: () => (showSplitModal = true),
+            }] : []),
+            {
+              label: 'Forward',
+              icon: ForwardIcon,
+              onClick: () => emit('forward', {
+                content: content,
+                attachments: attachments,
+                subject: subject,
+                to: sender?.name ?? to,
+                cc: cc,
+                bcc: bcc,
+              }),
             },
           ]"
         >
@@ -120,7 +132,7 @@ import { dateFormat, dateTooltipFormat, timeAgo } from "@/utils";
 import { Dropdown } from "frappe-ui";
 import { ref } from "vue";
 import LucideSplit from "~icons/lucide/split";
-import { ReplyAllIcon, ReplyIcon } from "./icons";
+import { ReplyAllIcon, ReplyIcon, ForwardIcon } from "./icons";
 import TicketSplitModal from "./ticket/TicketSplitModal.vue";
 const props = defineProps({
   activity: {
@@ -136,7 +148,7 @@ const props = defineProps({
 const { sender, to, cc, bcc, creation, subject, attachments, content, name } =
   props.activity;
 
-const emit = defineEmits(["reply"]);
+const emit = defineEmits(["reply","forward"]);
 
 const { isMobileView } = useScreenSize();
 

desk/src/components/EmailEditor.vue

@@ -327,6 +327,20 @@ function addToReply(
     .run();
 }
 
+function addToForward(body: string, subject: string, _attachments: any[]) {
+  newEmail.value = body;
+  attachments.value = _attachments;
+  editorRef.value.editor
+    .chain()
+    .clearContent()
+    .insertContent(body)
+    .focus("all")
+    // .setBlockquote()
+    .insertContentAt(0, { type: "paragraph" })
+    .focus("start")
+    .run();
+}
+
 function resetState() {
   newEmail.value = null;
   attachments.value = [];
@@ -351,6 +365,7 @@ const editor = computed(() => {
 
 defineExpose({
   addToReply,
+  addToForward,
   editor,
   submitMail,
 });

desk/src/components/icons/ForwardIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-forward"
+  >
+    <polyline points="15 17 20 12 15 7"></polyline>
+    <path d="M4 18v-2a4 4 0 0 1 4-4h12"></path>
+  </svg>
+</template>

desk/src/components/icons/index.ts

@@ -29,3 +29,6 @@ export { default as ThumbsUpFilledIcon } from "./ThumbsUpFilledIcon.vue";
 export { default as ThumbsUpIcon } from "./ThumbsUpIcon.vue";
 export { default as TicketIcon } from "./TicketIcon.vue";
 export { default as UnpinIcon } from "./UnpinIcon.vue";
+export { default as PinIcon } from "./PinIcon.vue";
+export { default as FrappeCloudIcon } from "./FrappeCloudIcon.vue";
+export { default as ForwardIcon } from './ForwardIcon.vue';

desk/src/components/ticket/TicketAgentActivities.vue

@@ -45,6 +45,7 @@
               "
               class="py-2 px-3"
               @reply="(e) => emit('email:reply', e)"
+              @forward="(e) => emit('email:forward', e)"
             />
             <CommentBox
               v-else-if="activity.type === 'comment'"
@@ -109,7 +110,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["email:reply", "update"]);
+const emit = defineEmits(["email:reply", "email:forward", "update"]);
 
 const { getUser } = useUserStore();
 const communicationAreaRef: Ref = inject("communicationArea");

desk/src/pages/ticket/MobileTicketAgent.vue

@@ -103,6 +103,11 @@
                     communicationAreaRef.replyToEmail(e);
                   }
                 "
+                @email:forward="
+                  (e) => {
+                    communicationAreaRef.forwardEmail(e);
+                  }
+                "
               />
             </TabPanel>
           </Tabs>

desk/src/pages/ticket/TicketAgent.vue

@@ -73,6 +73,11 @@
                     communicationAreaRef.replyToEmail(e);
                   }
                 "
+                @email:forward="
+                  (e) => {
+                    communicationAreaRef.forwardEmail(e);
+                  }
+                "
               />
             </TabPanel>
           </Tabs>