แก้ไขการแสดงผลเวลา และส่วนอื่นเล็กน้อย

src/modules/00_support/components/ChatMessage.vue

@@ -4,27 +4,61 @@ import moment from "moment";
 import { useSupportStore } from "@/modules/00_support/store/Main";
 
 const store = useSupportStore();
+
+function dateChat(timestamp: string): string {
+  const parsedTimestamp = moment(timestamp);
+  const diff = moment().diff(parsedTimestamp);
+
+  if (diff < 1000) {
+    return "just now";
+  } else if (diff < 86400000) {
+    const formattedDate = parsedTimestamp.format("HH:MM") + " น.";
+    return formattedDate;
+  } else {
+    const beYear = parsedTimestamp.year() + 543;
+    const formattedDate = parsedTimestamp.clone().year(beYear).format("DD MMM");
+    return formattedDate;
+  }
+}
 </script>
 
 <template>
   <div class="col-grow q-pt-md q-pb-sm">
-    <div v-for="(data, index) in store.message?.result.message">
+    <div v-for="(item, index) in store.message?.result.message">
       <q-item-label>
         <q-chat-message
           ref="myElement"
           :key="index"
-          :id="data.id"
-          avatar="https://cdn.quasar.dev/img/avatar4.jpg"
-          :text="[data.content]"
-          :bg-color="data.fromUserId === store.userId ? 'teal' : 'white'"
-          :text-color="data.fromUserId === store.userId ? 'white' : 'black'"
-          :sent="data.fromUserId === store.userId"
-          :stamp="moment(data.createdAt).fromNow()"
-        />
+          :id="item.id"
+          :text="[item.content]"
+          :bg-color="item.fromUserId === store.userId ? 'teal' : 'white'"
+          :text-color="item.fromUserId === store.userId ? 'white' : 'black'"
+          :sent="item.fromUserId === store.userId"
+        >
+          <template v-slot:stamp>
+            <span> {{ dateChat(item.createdAt) }} </span>
+          </template>
+          <template v-slot:avatar>
+            <img
+              v-if="item.fromUserId === store.userId"
+              class="q-message-avatar q-message-avatar--sent"
+              src="https://cdn.quasar.dev/img/avatar4.jpg"
+            />
+            <div
+              v-else
+              class="q-mr-sm"
+              style="border-radius: 50%; border: 1px solid teal"
+            >
+              <q-avatar color="teal-1" text-color="white" size="42px">
+                <q-icon :name="store.icon" size="24px" color="teal" />
+              </q-avatar>
+            </div>
+          </template>
+        </q-chat-message>
       </q-item-label>
 
       <q-item-label
-        v-if="data.fromUserId === store.userId"
+        v-if="item.fromUserId === store.userId"
         class="flex"
         caption
       >
@@ -34,12 +68,14 @@ const store = useSupportStore();
             store.messageStatus?.result.some(
               (v) =>
                 new Date(v.lastAccessDate).getTime() >=
-                  new Date(data.createdAt).getTime() &&
+                  new Date(item.createdAt).getTime() &&
                 index + 1 === store.message?.result.message.length
             )
           "
+          class="q-mr-xl"
         >
-          อ่านเเล้ว
+          <q-icon name="mdi-check-all" size="xs" />
+          <span class="text-caption q-ml-sm">อ่านแล้ว</span>
         </div>
       </q-item-label>
     </div>

src/modules/00_support/components/NewIssue.vue

@@ -22,7 +22,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div @click="isOpen = true" class="col-10 row items-center q-pa-md new">
+  <div @click="isOpen = true" class="col-10 row items-center q-py-sm q-px-md new">
     <div class="noactive-avatar">
       <div class="new-avatar">
         <q-icon name="mdi-plus" size="24px" color="primary" />