feat: reply to email

frontend/src/components/Activities.vue

@@ -222,11 +222,7 @@
               v-if="call.show_recording"
               class="flex items-center justify-between rounded border"
             >
-              <audio
-                class="audio-control"
-                controls
-                :src="call.recording_url"
-              />
+              <audio class="audio-control" controls :src="call.recording_url" />
             </div>
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-1">
@@ -316,15 +312,13 @@
                   {{ timeAgo(activity.creation) }}
                 </Tooltip>
               </div>
-              <div>
-                <Button
-                  variant="ghost"
-                  icon="more-horizontal"
-                  class="text-gray-600"
-                />
+              <div class="flex gap-0.5">
+                <Button variant="ghost" class="text-gray-700" @click="reply(activity.data.content)">
+                  <ReplyIcon class="h-4 w-4" />
+                </Button>
               </div>
             </div>
-            <div class="px-1" v-html="activity.data.content" />
+            <span class="prose-f" v-html="activity.data.content" />
           </div>
         </div>
         <div
@@ -620,6 +614,7 @@ import DotIcon from '@/components/Icons/DotIcon.vue'
 import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
+import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
@@ -876,6 +871,7 @@ function timelineIcon(activity_type, is_lead) {
 // Notes
 const showNoteModal = ref(false)
 const note = ref({})
+const emailBox = ref(null)
 
 function showNote(n) {
   note.value = n || {
@@ -928,6 +924,21 @@ function updateTaskStatus(status, task) {
   })
 }
 
+// Email
+function reply(message) {
+  emailBox.value.show = true
+  let editor = emailBox.value.editor.editor
+  editor
+    .chain()
+    .clearContent()
+    .insertContent(message)
+    .focus('all')
+    .setBlockquote()
+    .insertContentAt(0, { type: 'paragraph' })
+    .focus('start')
+    .run()
+}
+
 watch([reload, reload_email], ([reload_value, reload_email_value]) => {
   if (reload_value || reload_email_value) {
     versions.reload()

frontend/src/components/CommunicationArea.vue

@@ -106,5 +106,5 @@ async function submitComment() {
   reload.value = true
 }
 
-defineExpose({ show: showCommunicationBox })
+defineExpose({ show: showCommunicationBox, editor: newEmailEditor })
 </script>

frontend/src/components/Icons/ReplyIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.64645 3.14645C5.84171 2.95118 6.15829 2.95118 6.35355 3.14645C6.54882 3.34171 6.54882 3.65829 6.35355 3.85355L3.20711 7H10C12.4853 7 14.5 9.01472 14.5 11.5V12C14.5 12.2761 14.2761 12.5 14 12.5C13.7239 12.5 13.5 12.2761 13.5 12V11.5C13.5 9.567 11.933 8 10 8H3.20711L6.35355 11.1464C6.54882 11.3417 6.54882 11.6583 6.35355 11.8536C6.15829 12.0488 5.84171 12.0488 5.64645 11.8536L1.64645 7.85355C1.45118 7.65829 1.45118 7.34171 1.64645 7.14645L5.64645 3.14645Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/index.css

@@ -1,2 +1,26 @@
 @import './assets/Inter/inter.css';
 @import 'frappe-ui/src/style.css';
+
+@layer components {
+	.prose-f {
+		@apply
+		break-all
+		max-w-none
+		prose
+		prose-code:break-all
+		prose-code:whitespace-pre-wrap
+		prose-img:border
+		prose-img:rounded-lg
+		prose-sm
+		prose-table:table-fixed
+		prose-td:border
+		prose-td:border-gray-300
+		prose-td:p-2
+		prose-td:relative
+		prose-th:bg-gray-100
+		prose-th:border
+		prose-th:border-gray-300
+		prose-th:p-2
+		prose-th:relative
+	}
+}