fix(timeline): single ticket view

desk/src/components/UserAvatar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex items-center gap-2">
-    <Avatar :label="user.name" :image="user.user_image" v-bind="$attrs" />
+    <Avatar
+      :label="user.name"
+      :image="user.user_image"
+      v-bind="$attrs"
+      v-if="!hideAvatar"
+    />
     <span
       v-if="expand"
       class="truncate"
@@ -31,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hideAvatar: {
+    type: Boolean,
+    default: false,
+  },
 });
 const user = userStore.getUser(props.name);
 </script>

desk/src/pages/TicketCustomer.vue

@@ -61,6 +61,7 @@ import { createResource, Button, Breadcrumbs } from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { useError } from "@/composables/error";
 import TicketConversation from "./ticket/TicketConversation.vue";
+import TicketCustomerConversation from "@/pages/ticket/TicketCustomerConversation.vue";
 import TicketCustomerTemplateFields from "./ticket/TicketCustomerTemplateFields.vue";
 import TicketFeedback from "./ticket/TicketFeedback.vue";
 import TicketTextEditor from "./ticket/TicketTextEditor.vue";

desk/src/pages/ticket/TicketCommunication.vue

@@ -1,19 +1,18 @@
 <template>
-  <div class="mx-3 pt-6">
+  <div class="border rounded flex-1 px-3 pt-1.5 pb-2.5 bg-gray-50">
     <div class="mb-4 flex items-center justify-between text-base">
       <div class="flex items-center gap-0.5">
-        <UserAvatar v-bind="user" size="lg" expand strong />
+        <UserAvatar v-bind="user" size="lg" expand strong :hide-avatar="true" />
         <Icon icon="lucide:dot" class="text-gray-500" />
         <Tooltip :text="dayjs(date).long()">
-          <div class="text-gray-600">
+          <span class="text-gray-600">
             {{ dayjs.tz(date).fromNow() }}
-          </div>
+          </span>
         </Tooltip>
       </div>
-      <slot name="top-right" v-bind="{ message: content }" />
     </div>
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <span class="prose-f" v-html="sanitize(content)"></span>
+    <div class="prose-f" v-html="sanitize(content)"></div>
     <div class="flex flex-wrap gap-2">
       <AttachmentItem
         v-for="a in attachments"

desk/src/pages/ticket/TicketConversation.vue

@@ -1,19 +1,39 @@
 <template>
-  <div class="divide-y overflow-auto px-5 pb-32">
-    <div v-for="c in conversation" :id="c.name" :key="c.name" class="mt-4">
-      <TicketCommunication
-        :content="c.content"
-        :date="c.creation"
-        :user="c.user"
-        :sender-image="c.sender"
-        :cc="c.cc || ''"
-        :bcc="c.bcc || ''"
-        :attachments="c.attachments"
+  <div
+    class="md:mx-5 md:my-8 mb-4 mt-8 flex items-center justify-between h-8 text-xl font-semibold text-gray-800"
+  >
+    Activity
+  </div>
+  <div class="overflow-auto px-5 pb-20 grow">
+    <div
+      v-for="c in communications"
+      :id="c.name"
+      :key="c.name"
+      class="mt-4 flex items-between justify-center gap-4 relative"
+    >
+      <div
+        class="w-full activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4"
       >
-        <template #top-right="d">
-          <slot name="communication-top-right" v-bind="d" />
-        </template>
-      </TicketCommunication>
+        <div
+          class="relative flex justify-center after:absolute after:left-[50%] after:top-[12%] after:-z-10 after:border-l after:border-gray-200 after:h-full"
+        >
+          <Avatar
+            size="lg"
+            :label="c.user.name"
+            :image="c.user.image"
+            class="mt-1 relative"
+          />
+        </div>
+        <TicketCommunication
+          :content="c.content"
+          :date="c.creation"
+          :user="c.user"
+          :sender-image="c.sender"
+          :cc="c.cc || ''"
+          :bcc="c.bcc || ''"
+          :attachments="c.attachments"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -22,9 +42,9 @@
 import { computed, inject, nextTick, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useElementVisibility } from "@vueuse/core";
+import { Avatar } from "frappe-ui";
 import { orderBy } from "lodash";
 import { dayjs } from "@/dayjs";
-import TicketComment from "./TicketComment.vue";
 import TicketCommunication from "./TicketCommunication.vue";
 import { ITicket } from "./symbols";
 
@@ -37,11 +57,12 @@ const props = withDefaults(defineProps<P>(), {
 });
 const route = useRoute();
 const ticket = inject(ITicket);
-const data = computed(() => ticket.data || {});
-const communications = computed(() => data.value.communications || []);
-const conversation = computed(() =>
-  orderBy([...communications.value], (c) => dayjs(c.creation))
-);
+const communications = computed(() => {
+  const _communications = ticket.data.communications || [];
+  return orderBy(_communications, (c) => dayjs(c.creation));
+});
+
+console.log(communications.value);
 
 function scroll(id: string) {
   const e = document.getElementById(id);