From 5a9e99fb22a756285b13beba5eb14a901dbaff77 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 17:33:40 +0530
Subject: [PATCH 01/12] fix(type): add typesafety to ticket agent activities

---
 desk/src/components/EmailArea.vue             |  6 +---
 .../ticket/TicketAgentActivities.vue          |  8 ++---
 desk/src/types.ts                             | 32 +++++++++++++++++++
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
index b85ef17fc..7593cc410 100644
--- a/desk/src/components/EmailArea.vue
+++ b/desk/src/components/EmailArea.vue
@@ -71,11 +71,7 @@
       </span>
       <span v-if="bcc">{{ bcc }}</span>
     </div>
-    <!-- <div
-      class="email-content prose-f max-h-[500px] overflow-y-auto"
-      v-html="content"
-    /> -->
-    <EmailContent :content="content" :emailBox="emailBox" />
+    <EmailContent :content="content" />
     <div class="flex flex-wrap gap-2">
       <AttachmentItem
         v-for="a in attachments"
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index b12d1499f..6f225287f 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -36,7 +36,7 @@
               <DotIcon v-else class="text-gray-600" />
             </div>
           </div>
-          <div class="mb-4 w-full">
+          <div class="mb-4 flex flex-1">
             <EmailArea
               v-if="activity.type === 'email'"
               :activity="activity"
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, inject, h, computed, onMounted, watch } from "vue";
+import { Ref, inject, h, computed, onMounted, watch, PropType } from "vue";
 import { useElementVisibility } from "@vueuse/core";
 import {
   DotIcon,
@@ -86,10 +86,10 @@ import {
 import { EmailArea, CommentBox, HistoryBox } from "@/components";
 import { useUserStore } from "@/stores/user";
 import { Avatar } from "frappe-ui";
-
+import { TicketActivity } from "@/types";
 const props = defineProps({
   activities: {
-    type: Array,
+    type: Array as PropType<TicketActivity[]>,
     required: true,
   },
   title: {
diff --git a/desk/src/types.ts b/desk/src/types.ts
index 735cc7a93..3bd7be15d 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -275,3 +275,35 @@ export interface Breadcrumb {
     params?: Record<string, string>;
   };
 }
+
+interface BaseActivity {
+  type: string;
+  key: string;
+  creation: string;
+  content: string;
+}
+
+interface HistoryActivity extends BaseActivity {
+  type: "history";
+  user: string;
+  relatedActivities: HistoryActivity[];
+}
+
+interface EmailActivity extends BaseActivity {
+  type: "email";
+  attachments: Array<{ key: string; name: any }>;
+  bcc: string;
+  cc: string;
+  sender: { full_name: string; name: string };
+  subject: string;
+  to: string;
+}
+
+export interface CommentActivity extends BaseActivity {
+  type: "comment";
+  name: string;
+  commenter: string;
+  commentedBy: string;
+}
+
+export type TicketActivity = HistoryActivity | EmailActivity | CommentActivity;

From 514b4b30450ef3f1062ef0b949f852b0a3cdd4c2 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 17:33:57 +0530
Subject: [PATCH 02/12] fix(styles): ticket overflow

---
 desk/src/components/CommentBox.vue | 61 +++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 0864419b0..cb8ac9ad6 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-col text-base">
+  <div class="flex-col text-base flex-1" ref="commentBoxRef">
     <div class="mb-1 ml-0.5 flex items-center justify-between">
       <div class="text-gray-600 flex items-center gap-2">
         <Avatar
@@ -36,10 +36,33 @@
         </div>
       </div>
     </div>
-    <div
+    <TextEditor
+      ref="editorRef"
+      :editor-class="'prose-f shrink rounded bg-gray-50 px-4 py-3 text-p-sm transition-all duration-300 ease-in-out block w-full '"
+      :content="content"
+      :editable="false"
+      @change="(event:string) => {content = event}"
+    >
+      <template #bottom v-if="false">
+        <TextEditorFixedMenu
+          class="-ml-1 overflow-x-auto w-full"
+          :buttons="textEditorMenuButtons"
+        />
+      </template>
+    </TextEditor>
+    <!-- <div
       class="prose-f grow cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
-      v-html="content"
-    />
+    >
+      <iframe :srcdoc="content" class="prose-f block w-full h-fit" />
+    </div> -->
+    <!-- <div class="flex flex-wrap gap-2">
+      <AttachmentItem
+        v-for="a in attachments"
+        :key="a.file_url"
+        :label="a.file_name"
+        :url="a.file_url"
+      />
+    </div> -->
   </div>
   <Dialog
     v-model="showDialog"
@@ -59,16 +82,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { Dropdown, createResource, Dialog, Avatar } from "frappe-ui";
-import { dateFormat, timeAgo, dateTooltipFormat, createToast } from "@/utils";
+import { ref, PropType } from "vue";
+import {
+  Dropdown,
+  createResource,
+  Dialog,
+  Avatar,
+  TextEditor,
+  TextEditorFixedMenu,
+} from "frappe-ui";
+// import { EmailContent } from "@/components/EmailContent.vue";
+import {
+  dateFormat,
+  timeAgo,
+  dateTooltipFormat,
+  createToast,
+  textEditorMenuButtons,
+} from "@/utils";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
-
+import { CommentActivity } from "@/types";
+import { onMounted } from "vue";
 const authStore = useAuthStore();
 const props = defineProps({
   activity: {
-    type: Object,
+    type: Object as PropType<CommentActivity>,
     required: true,
   },
 });
@@ -78,6 +116,11 @@ const { name, creation, content, commenter, commentedBy } = props.activity;
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
+const commentBoxRef = ref(null);
+
+onMounted(() => {
+  commentBoxRef.value.style.width = "0px";
+});
 
 const deleteComment = createResource({
   url: "frappe.client.delete",

From e7869352b5684a1518c27a3123af23e2358c9aec Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 17:35:01 +0530
Subject: [PATCH 03/12] fix: use count to get list of total count of rows in
 listview

---
 helpdesk/api/doc.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/helpdesk/api/doc.py b/helpdesk/api/doc.py
index 651d5aea0..8b4837d45 100644
--- a/helpdesk/api/doc.py
+++ b/helpdesk/api/doc.py
@@ -289,12 +289,13 @@ def get_options(fieldtype, options):
                     "type": field.get("type"),
                     "options": options,
                 }
-
     return {
         "data": data,
         "columns": columns,
         "fields": fields if doctype == "HD Ticket" else [],
-        "total_count": len(frappe.get_list(doctype, filters=filters)),
+        "total_count": frappe.get_list(
+            doctype, filters=filters, fields="count(*) as count"
+        )[0].count,
         "row_count": len(data),
         "group_by_field": group_by_field,
         "view_type": view_type,

From f5a417e93b59b5b46005aca0955b932d976c5df5 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 18:20:36 +0530
Subject: [PATCH 04/12] feat: edit comment

---
 desk/src/components/CommentBox.vue | 113 ++++++++++++++++++++---------
 desk/src/utils.ts                  |   6 ++
 2 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index cb8ac9ad6..458a5e7a5 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -17,7 +17,7 @@
           </span>
         </p>
       </div>
-      <div class="flex items-center">
+      <div class="flex items-center gap-1">
         <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
           <span class="pl-0.5 text-sm text-gray-600">
             {{ timeAgo(creation) }}
@@ -25,7 +25,18 @@
         </Tooltip>
         <div v-if="authStore.userId === commentedBy">
           <Dropdown
-            :options="[{ label: 'Delete', onClick: () => (showDialog = true) }]"
+            :options="[
+              {
+                label: 'Edit',
+                onClick: () => (editable = true),
+                icon: 'edit-2',
+              },
+              {
+                label: 'Delete',
+                onClick: () => (showDialog = true),
+                icon: 'trash-2',
+              },
+            ]"
           >
             <Button
               icon="more-horizontal"
@@ -36,33 +47,23 @@
         </div>
       </div>
     </div>
-    <TextEditor
-      ref="editorRef"
-      :editor-class="'prose-f shrink rounded bg-gray-50 px-4 py-3 text-p-sm transition-all duration-300 ease-in-out block w-full '"
-      :content="content"
-      :editable="false"
-      @change="(event:string) => {content = event}"
-    >
-      <template #bottom v-if="false">
-        <TextEditorFixedMenu
-          class="-ml-1 overflow-x-auto w-full"
-          :buttons="textEditorMenuButtons"
-        />
-      </template>
-    </TextEditor>
-    <!-- <div
-      class="prose-f grow cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
-    >
-      <iframe :srcdoc="content" class="prose-f block w-full h-fit" />
-    </div> -->
-    <!-- <div class="flex flex-wrap gap-2">
-      <AttachmentItem
-        v-for="a in attachments"
-        :key="a.file_url"
-        :label="a.file_name"
-        :url="a.file_url"
-      />
-    </div> -->
+    <div class="rounded bg-gray-50 px-4 py-3">
+      <TextEditor
+        ref="editorRef"
+        :editor-class="'prose-f shrink  text-p-sm transition-all duration-300 ease-in-out block w-full content'"
+        :content="_content"
+        :editable="editable"
+        :bubble-menu="textEditorMenuButtons"
+        @change="(event:string) => {_content = event}"
+      >
+        <template #bottom v-if="editable">
+          <div class="flex flex-row-reverse gap-2">
+            <Button label="Save" @click="handleSave" variant="solid" />
+            <Button label="Discard" @click="handleDiscard" />
+          </div>
+        </template>
+      </TextEditor>
+    </div>
   </div>
   <Dialog
     v-model="showDialog"
@@ -89,20 +90,20 @@ import {
   Dialog,
   Avatar,
   TextEditor,
-  TextEditorFixedMenu,
 } from "frappe-ui";
-// import { EmailContent } from "@/components/EmailContent.vue";
 import {
   dateFormat,
   timeAgo,
   dateTooltipFormat,
   createToast,
   textEditorMenuButtons,
+  isContentEmpty,
 } from "@/utils";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
 import { CommentActivity } from "@/types";
 import { onMounted } from "vue";
+import { updateRes as updateComment } from "@/stores/knowledgeBase";
 const authStore = useAuthStore();
 const props = defineProps({
   activity: {
@@ -117,10 +118,8 @@ const { name, creation, content, commenter, commentedBy } = props.activity;
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 const commentBoxRef = ref(null);
-
-onMounted(() => {
-  commentBoxRef.value.style.width = "0px";
-});
+const editable = ref(false);
+const _content = ref(content);
 
 const deleteComment = createResource({
   url: "frappe.client.delete",
@@ -137,4 +136,48 @@ const deleteComment = createResource({
     });
   },
 });
+
+function handleDiscard() {
+  _content.value = content;
+  editable.value = false;
+}
+
+function handleSave() {
+  if (content === _content.value) {
+    editable.value = false;
+    return;
+  }
+  if (isContentEmpty(_content.value)) {
+    createToast({
+      title: "Comment cannot be empty",
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
+    return;
+  }
+
+  updateComment.submit(
+    {
+      doctype: "HD Ticket Comment",
+      name: name,
+      fieldname: "content",
+      value: _content.value,
+    },
+    {
+      onSuccess: () => {
+        editable.value = false;
+        emit("update");
+        createToast({
+          title: "Comment updated",
+          icon: "check",
+          iconClasses: "text-green-500",
+        });
+      },
+    }
+  );
+}
+
+onMounted(() => {
+  commentBoxRef.value.style.width = "0px";
+});
 </script>
diff --git a/desk/src/utils.ts b/desk/src/utils.ts
index 8d04b1a32..4fc8df2be 100644
--- a/desk/src/utils.ts
+++ b/desk/src/utils.ts
@@ -177,3 +177,9 @@ export const textEditorMenuButtons = [
     "DeleteTable",
   ],
 ];
+
+export function isContentEmpty(content: string) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, "text/html");
+  return doc.body.textContent === "";
+}

From 80b59cb417adda39308d4abf342f1148989e2729 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 18:26:54 +0530
Subject: [PATCH 05/12] fix(ux): focus on comment if editable true

---
 desk/src/components/CommentBox.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 458a5e7a5..12afbb603 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -23,12 +23,12 @@
             {{ timeAgo(creation) }}
           </span>
         </Tooltip>
-        <div v-if="authStore.userId === commentedBy">
+        <div v-if="authStore.userId === commentedBy && !editable">
           <Dropdown
             :options="[
               {
                 label: 'Edit',
-                onClick: () => (editable = true),
+                onClick: () => handleEditMode(),
                 icon: 'edit-2',
               },
               {
@@ -117,10 +117,13 @@ const { name, creation, content, commenter, commentedBy } = props.activity;
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
-const commentBoxRef = ref(null);
 const editable = ref(false);
 const _content = ref(content);
 
+// HTML refs
+const commentBoxRef = ref(null);
+const editorRef = ref(null);
+
 const deleteComment = createResource({
   url: "frappe.client.delete",
   makeParams: () => ({
@@ -137,6 +140,11 @@ const deleteComment = createResource({
   },
 });
 
+function handleEditMode() {
+  editable.value = true;
+  editorRef.value.editor.chain().focus("start");
+}
+
 function handleDiscard() {
   _content.value = content;
   editable.value = false;

From b9ee22223a18ba86cc4f36b1bf77b4a74ea000ca Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 20:09:19 +0530
Subject: [PATCH 06/12] fix(ui): typography in comment activity

---
 desk/src/components/CommentBox.vue            | 24 +++---
 desk/src/components/HistoryBox.vue            | 84 ++++++++++---------
 .../components/ticket/TicketAgentSidebar.vue  |  2 +-
 3 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 12afbb603..42d5890f4 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -58,7 +58,7 @@
       >
         <template #bottom v-if="editable">
           <div class="flex flex-row-reverse gap-2">
-            <Button label="Save" @click="handleSave" variant="solid" />
+            <Button label="Save" @click="handleSaveComment" variant="solid" />
             <Button label="Discard" @click="handleDiscard" />
           </div>
         </template>
@@ -124,6 +124,16 @@ const _content = ref(content);
 const commentBoxRef = ref(null);
 const editorRef = ref(null);
 
+function handleEditMode() {
+  editable.value = true;
+  editorRef.value.editor.chain().focus("start");
+}
+
+function handleDiscard() {
+  _content.value = content;
+  editable.value = false;
+}
+
 const deleteComment = createResource({
   url: "frappe.client.delete",
   makeParams: () => ({
@@ -140,17 +150,7 @@ const deleteComment = createResource({
   },
 });
 
-function handleEditMode() {
-  editable.value = true;
-  editorRef.value.editor.chain().focus("start");
-}
-
-function handleDiscard() {
-  _content.value = content;
-  editable.value = false;
-}
-
-function handleSave() {
+function handleSaveComment() {
   if (content === _content.value) {
     editable.value = false;
     return;
diff --git a/desk/src/components/HistoryBox.vue b/desk/src/components/HistoryBox.vue
index 38efd1e6d..8dfb6188c 100644
--- a/desk/src/components/HistoryBox.vue
+++ b/desk/src/components/HistoryBox.vue
@@ -1,52 +1,56 @@
 <template>
-  <div class="mt-1.5 flex justify-between text-base">
-    <div class="text-gray-600">
-      <span class="font-medium text-gray-800">
-        {{ user }}
-      </span>
-      <span> {{ content }}</span>
-    </div>
-    <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
-      <div class="text-gray-600">
-        {{ timeAgo(creation) }}
-      </div>
-    </Tooltip>
-  </div>
-  <div v-if="show_others && content !== 'created this ticket'">
-    <div
-      v-for="relatedActivity in relatedActivities"
-      :key="relatedActivity.creation"
-      class="mt-2 flex justify-between text-base"
-    >
+  <div class="flex-1">
+    <div class="mt-1.5 flex justify-between text-base items-center">
       <div class="text-gray-600">
         <span class="font-medium text-gray-800">
-          {{ relatedActivity.user }}
+          {{ user }}
         </span>
-        <span> {{ relatedActivity.content }}</span>
+        <span> {{ content }}</span>
       </div>
-      <Tooltip :text="dateFormat(relatedActivity.creation, dateTooltipFormat)">
-        <div class="text-gray-600">
-          {{ timeAgo(relatedActivity.creation) }}
+      <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+        <div class="text-gray-600 text-sm">
+          {{ timeAgo(creation) }}
         </div>
       </Tooltip>
     </div>
+    <div v-if="show_others && content !== 'created this ticket'">
+      <div
+        v-for="relatedActivity in relatedActivities"
+        :key="relatedActivity.creation"
+        class="mt-2 flex justify-between text-base"
+      >
+        <div class="text-gray-600">
+          <span class="font-medium text-gray-800">
+            {{ relatedActivity.user }}
+          </span>
+          <span> {{ relatedActivity.content }}</span>
+        </div>
+        <Tooltip
+          :text="dateFormat(relatedActivity.creation, dateTooltipFormat)"
+        >
+          <div class="text-gray-600 text-sm">
+            {{ timeAgo(relatedActivity.creation) }}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+    <Button
+      v-if="relatedActivities.length && content !== 'created this ticket'"
+      :label="
+        show_others ? 'Hide' : `${relatedActivities.length} other activities`
+      "
+      variant="outline"
+      class="mt-2"
+      @click="show_others = !show_others"
+    >
+      <template #suffix>
+        <FeatherIcon
+          :name="show_others ? 'chevron-up' : 'chevron-down'"
+          class="h-4 text-gray-600"
+        />
+      </template>
+    </Button>
   </div>
-  <Button
-    v-if="relatedActivities.length && content !== 'created this ticket'"
-    :label="
-      show_others ? 'Hide' : `${relatedActivities.length} other activities`
-    "
-    variant="outline"
-    class="mt-2"
-    @click="show_others = !show_others"
-  >
-    <template #suffix>
-      <FeatherIcon
-        :name="show_others ? 'chevron-up' : 'chevron-down'"
-        class="h-4 text-gray-600"
-      />
-    </template>
-  </Button>
 </template>
 
 <script setup lang="ts">
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
index bd23e3cac..e71c93bcf 100644
--- a/desk/src/components/ticket/TicketAgentSidebar.vue
+++ b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-[382px] flex-col justify-between border-l">
-    <div class="h-10.5 flex items-center justify-between border-b px-5 py-2.5">
+    <div class="h-[2.83rem] flex items-center justify-between border-b px-5">
       <span
         class="cursor-copy text-lg font-semibold"
         @click="copyToClipboard(ticket.name, ticket.name)"

From b847ba2c048b4fb23092a12549d7d3d9cf2494bc Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 23:20:27 +0530
Subject: [PATCH 07/12] feat: attachments in comments

---
 desk/src/components/CommentBox.vue               | 15 ++++++++++++---
 desk/src/components/CommentTextEditor.vue        |  4 ++++
 desk/src/pages/TicketAgent.vue                   |  1 +
 desk/src/types.ts                                | 12 ++++++++++--
 helpdesk/helpdesk/doctype/hd_ticket/api.py       |  1 +
 helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py | 16 ++++++++++------
 6 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 42d5890f4..473cd302b 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -63,6 +63,14 @@
           </div>
         </template>
       </TextEditor>
+      <div class="flex flex-wrap gap-2">
+        <AttachmentItem
+          v-for="a in attachments"
+          :key="a.file_url"
+          :label="a.file_name"
+          :url="a.file_url"
+        />
+      </div>
     </div>
   </div>
   <Dialog
@@ -83,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType } from "vue";
+import { ref, PropType, onMounted } from "vue";
 import {
   Dropdown,
   createResource,
@@ -99,10 +107,10 @@ import {
   textEditorMenuButtons,
   isContentEmpty,
 } from "@/utils";
+import { AttachmentItem } from "@/components";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
 import { CommentActivity } from "@/types";
-import { onMounted } from "vue";
 import { updateRes as updateComment } from "@/stores/knowledgeBase";
 const authStore = useAuthStore();
 const props = defineProps({
@@ -113,7 +121,8 @@ const props = defineProps({
 });
 const { getUser } = useUserStore();
 
-const { name, creation, content, commenter, commentedBy } = props.activity;
+const { name, creation, content, commenter, commentedBy, attachments } =
+  props.activity;
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
index 57979441f..cf0f465c4 100644
--- a/desk/src/components/CommentTextEditor.vue
+++ b/desk/src/components/CommentTextEditor.vue
@@ -154,12 +154,16 @@ async function submitComment() {
       method: "new_comment",
       args: {
         content: newComment.value,
+        attachments: attachments.value,
       },
     }),
     onSuccess: () => {
       emit("submit");
       loading.value = false;
     },
+    onError: () => {
+      loading.value = false;
+    },
   });
 
   comment.submit();
diff --git a/desk/src/pages/TicketAgent.vue b/desk/src/pages/TicketAgent.vue
index 93459b9de..4898c99ab 100644
--- a/desk/src/pages/TicketAgent.vue
+++ b/desk/src/pages/TicketAgent.vue
@@ -296,6 +296,7 @@ const activities = computed(() => {
       commenter: comment.user.name,
       creation: comment.creation,
       content: comment.content,
+      attachments: comment.attachments,
     };
   });
 
diff --git a/desk/src/types.ts b/desk/src/types.ts
index 3bd7be15d..189d8404f 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -276,6 +276,7 @@ export interface Breadcrumb {
   };
 }
 
+// Activity Types
 interface BaseActivity {
   type: string;
   key: string;
@@ -289,9 +290,9 @@ interface HistoryActivity extends BaseActivity {
   relatedActivities: HistoryActivity[];
 }
 
-interface EmailActivity extends BaseActivity {
+export interface EmailActivity extends BaseActivity {
   type: "email";
-  attachments: Array<{ key: string; name: any }>;
+  attachments: FileAttachment;
   bcc: string;
   cc: string;
   sender: { full_name: string; name: string };
@@ -304,6 +305,13 @@ export interface CommentActivity extends BaseActivity {
   name: string;
   commenter: string;
   commentedBy: string;
+  attachments: FileAttachment[];
 }
 
 export type TicketActivity = HistoryActivity | EmailActivity | CommentActivity;
+
+interface FileAttachment {
+  name: string;
+  file_name: string;
+  file_url: string;
+}
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/api.py b/helpdesk/helpdesk/doctype/hd_ticket/api.py
index e6a9bc846..eea57ed5d 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/api.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/api.py
@@ -143,6 +143,7 @@ def get_comments(ticket: str):
     )
     for c in comments:
         c.user = get_user_info_for_avatar(c.commented_by)
+        c.attachments = get_attachments("HD Ticket Comment", c.name)
     return comments
 
 
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
index ed5a5b977..948111a96 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
@@ -458,7 +458,7 @@ def portal_uri(self):
         return f"{root_uri}/helpdesk/my-tickets/{self.name}"
 
     @frappe.whitelist()
-    def new_comment(self, content: str):
+    def new_comment(self, content: str, attachments: List[str] = []):
         if not is_agent():
             frappe.throw(
                 _("You are not permitted to add a comment"), frappe.PermissionError
@@ -469,6 +469,10 @@ def new_comment(self, content: str):
         c.is_pinned = False
         c.reference_ticket = self.name
         c.save()
+        for attachment in attachments:
+            self.attach_file_with_doc(
+                "HD Ticket Comment", c.name, attachment.get("file_url")
+            )
 
     @frappe.whitelist()
     def reply_via_agent(
@@ -531,7 +535,7 @@ def reply_via_agent(
             file_doc.attached_to_name = communication.name
             file_doc.attached_to_doctype = "Communication"
             file_doc.save(ignore_permissions=True)
-            self.attach_file_with_ticket(file_doc.file_url)
+            self.attach_file_with_doc("HD Ticket", self.name, file_doc.file_url)
 
             _attachments.append({"file_url": file_doc.file_url})
 
@@ -613,7 +617,7 @@ def create_communication_via_contact(self, message, attachments=[]):
             "File", filters={"attached_to_name": c.name}, pluck="file_url"
         )
         for url in file_urls:
-            self.attach_file_with_ticket(url)
+            self.attach_file_with_doc("HD Ticket", self.name, url)
 
     @frappe.whitelist()
     def mark_seen(self):
@@ -720,10 +724,10 @@ def on_communication_update(self, c):
         # Save the ticket, allowing for hooks to run.
         self.save()
 
-    def attach_file_with_ticket(self, file_url):
+    def attach_file_with_doc(self, doctype, docname, file_url):
         file_doc = frappe.new_doc("File")
-        file_doc.attached_to_name = self.name
-        file_doc.attached_to_doctype = "HD Ticket"
+        file_doc.attached_to_doctype = doctype
+        file_doc.attached_to_name = docname
         file_doc.file_url = file_url
         file_doc.save(ignore_permissions=True)
 

From 9fc46744ce4b9bec81633b33f68ba38472ffc7a4 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 23 Jan 2025 23:49:41 +0530
Subject: [PATCH 08/12] fix: notifications seen all ticket not found

---
 desk/src/components/layouts/Sidebar.vue            | 4 +++-
 helpdesk/helpdesk/doctype/hd_notification/utils.py | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue
index 974d17fb6..488bac971 100644
--- a/desk/src/components/layouts/Sidebar.vue
+++ b/desk/src/components/layouts/Sidebar.vue
@@ -39,7 +39,9 @@
         <template #right>
           <Badge
             v-if="isExpanded && notificationStore.unread"
-            :label="notificationStore.unread"
+            :label="
+              notificationStore.unread > 9 ? '9+' : notificationStore.unread
+            "
             theme="gray"
             variant="subtle"
           />
diff --git a/helpdesk/helpdesk/doctype/hd_notification/utils.py b/helpdesk/helpdesk/doctype/hd_notification/utils.py
index 17f1e7159..55883a6c8 100644
--- a/helpdesk/helpdesk/doctype/hd_notification/utils.py
+++ b/helpdesk/helpdesk/doctype/hd_notification/utils.py
@@ -16,7 +16,7 @@ def clear(user: str = None, ticket: str | int = None, comment: str = None):
         filters["reference_ticket"] = ticket
     if comment:
         filters["reference_comment"] = comment
-    for n in frappe.get_all("HD Notification", filters=filters):
-        d = frappe.get_doc("HD Notification", n.name)
-        d.read = True
-        d.save()
+    for notification in frappe.get_all(
+        "HD Notification", filters=filters, pluck="name"
+    ):
+        frappe.db.set_value("HD Notification", notification, "read", 1)

From 274806fc175e743be5f41d7c75ea317e6fe390bc Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Fri, 24 Jan 2025 13:23:06 +0530
Subject: [PATCH 09/12] fix: hide notifcations tab in mobile view of customer
 portal

---
 desk/src/components/layouts/MobileSidebar.vue          | 2 +-
 desk/src/pages/ticket/TicketCustomerTemplateFields.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/desk/src/components/layouts/MobileSidebar.vue b/desk/src/components/layouts/MobileSidebar.vue
index 22ea9c528..66bd90d88 100644
--- a/desk/src/components/layouts/MobileSidebar.vue
+++ b/desk/src/components/layouts/MobileSidebar.vue
@@ -16,7 +16,7 @@
           <!-- user dropwdown -->
           <div><UserMenu class="p-2 mb-2" :options="profileSettings" /></div>
           <!-- notifications -->
-          <div class="overflow-y-auto px-2">
+          <div class="overflow-y-auto px-2" v-if="!isCustomerPortal">
             <div class="mb-3 flex flex-col">
               <SidebarLink
                 class="relative"
diff --git a/desk/src/pages/ticket/TicketCustomerTemplateFields.vue b/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
index 094aefaed..fe8c50d8b 100644
--- a/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
+++ b/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="grid grid-cols-1 gap-4 border-b px-5 py-2.5 sm:grid-cols-3">
+  <div class="grid grid-cols-1 gap-4 border-b px-5 py-2.5 sm:grid-cols-3">
     <div class="space-y-1.5">
       <span class="block text-sm text-gray-700"> Status </span>
       <span class="block break-words text-base font-medium text-gray-900">
@@ -40,7 +40,7 @@
         {{ ticket.data[field.fieldname] }}
       </span>
     </div>
-  </span>
+  </div>
 </template>
 
 <script setup lang="ts">

From 49804569c031a772a93830abc2c64e78ca2edc67 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Fri, 24 Jan 2025 15:32:16 +0530
Subject: [PATCH 10/12] chore: code cleanup

---
 desk/src/components/EmailArea.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
index 7593cc410..301a8941f 100644
--- a/desk/src/components/EmailArea.vue
+++ b/desk/src/components/EmailArea.vue
@@ -102,7 +102,6 @@ const { sender, to, cc, bcc, creation, subject, attachments, content } =
 
 const emit = defineEmits(["reply"]);
 
-let emailBox = inject("communicationArea");
 const { isMobileView } = useScreenSize();
 
 // TODO: Implement reply functionality using this way instead of emit drillup

From 7440b239b79a381e9e94457a7246d04db0d9707d Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 28 Jan 2025 21:17:29 +0530
Subject: [PATCH 11/12] chore: code cleanup

---
 desk/src/components/EmailArea.vue   | 3 +--
 desk/src/components/EmailEditor.vue | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
index 301a8941f..77ddddf4c 100644
--- a/desk/src/components/EmailArea.vue
+++ b/desk/src/components/EmailArea.vue
@@ -84,11 +84,10 @@
 </template>
 
 <script setup lang="ts">
-import { UserAvatar, AttachmentItem } from "@/components";
+import { AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
 import { ReplyIcon, ReplyAllIcon } from "./icons";
 import { useScreenSize } from "@/composables/screen";
-import { inject } from "vue";
 
 const props = defineProps({
   activity: {
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index a672eda80..0a240d4d4 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -165,7 +165,6 @@ import {
 } from "@/components";
 import { AttachmentIcon, EmailIcon } from "@/components/icons";
 import { PreserveVideoControls } from "@/tiptap-extensions";
-import { useError } from "@/composables/error";
 
 const editorRef = ref(null);
 const showCannedResponseSelectorModal = ref(false);

From 030cd8bec6d3fe0dfe66e08d62404e4cd2c89f09 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 28 Jan 2025 23:21:04 +0530
Subject: [PATCH 12/12] fix: hide attachments while editing

---
 desk/src/components/CommentBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 473cd302b..b3c59505e 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -63,7 +63,7 @@
           </div>
         </template>
       </TextEditor>
-      <div class="flex flex-wrap gap-2">
+      <div class="flex flex-wrap gap-2" v-if="!editable">
         <AttachmentItem
           v-for="a in attachments"
           :key="a.file_url"