Restructure omni services and add Chatwoot research snapshot

2026-02-21 11:11:27 +07:00
parent edea7a0034
commit b73babbbf6
7732 changed files with 978203 additions and 32 deletions
--- a/research/chatwoot/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/research/chatwoot/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -0,0 +1,120 @@
+<script>
+const MINUTE_IN_MILLI_SECONDS = 60000;
+const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
+const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
+
+import {
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
+
+export default {
+  name: 'TimeAgo',
+  props: {
+    isAutoRefreshEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    lastActivityTimestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+    createdAtTimestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
+      timer: null,
+    };
+  },
+  computed: {
+    lastActivityTime() {
+      return shortTimestamp(this.lastActivityAtTimeAgo);
+    },
+    createdAtTime() {
+      return shortTimestamp(this.createdAtTimeAgo);
+    },
+    createdAt() {
+      const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
+      const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isBeforeAMonth
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
+            this.createdAtTimeAgo
+          }`
+        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
+            this.createdAtTimestamp
+          )}`;
+    },
+    lastActivity() {
+      const lastActivityTimeDiff =
+        Date.now() - this.lastActivityTimestamp * 1000;
+      const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isNotActive
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
+            this.lastActivityAtTimeAgo
+          }`
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
+          )} ${dateFormat(this.lastActivityTimestamp)}`;
+    },
+    tooltipText() {
+      return `${this.createdAt}
+              ${this.lastActivity}`;
+    },
+  },
+  watch: {
+    lastActivityTimestamp() {
+      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+    },
+    createdAtTimestamp() {
+      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+    },
+  },
+  mounted() {
+    if (this.isAutoRefreshEnabled) {
+      this.createTimer();
+    }
+  },
+  unmounted() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+        this.createTimer();
+      }, this.refreshTime());
+    },
+    refreshTime() {
+      const timeDiff = Date.now() - this.lastActivityTimestamp * 1000;
+      if (timeDiff > DAY_IN_MILLI_SECONDS) {
+        return DAY_IN_MILLI_SECONDS;
+      }
+      if (timeDiff > HOUR_IN_MILLI_SECONDS) {
+        return HOUR_IN_MILLI_SECONDS;
+      }
+
+      return MINUTE_IN_MILLI_SECONDS;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1000, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>