paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-03 13:33:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show date and month below each message bubble

Browse Source 
Use `created_at` timestamp instead of `updated_at` timestamp in message bubble.

Fixes #117
This commit is contained in:
Abhinav Raut
2025-07-06 20:14:18 +05:30
parent 5e19f13e18
commit be977dcff2
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/features/conversation/message/AgentMessageBubble.vue
View File

@@ -66,11 +66,11 @@
<Tooltip>
<TooltipTrigger>
<span class="text-muted-foreground text-xs mt-1">
{{ format(message.updated_at, 'h:mm a') }}
{{ formatMessageTimestamp(message.created_at) }}
</span>
</TooltipTrigger>
<TooltipContent>
{{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
{{ formatFullTimestamp(message.created_at) }}
</TooltipContent>
</Tooltip>
</div>
@@ -79,12 +79,12 @@
<script setup>
import { computed } from 'vue'
import { format } from 'date-fns'
import { useConversationStore } from '@/stores/conversation'
import { Lock, RotateCcw, Check } from 'lucide-vue-next'
import { revertCIDToImageSrc } from '@/utils/strings'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Spinner } from '@/components/ui/spinner'
import { formatMessageTimestamp, formatFullTimestamp } from '@/utils/datetime'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import MessageAttachmentPreview from '@/features/conversation/message/attachment/MessageAttachmentPreview.vue'
import MessageEnvelope from './MessageEnvelope.vue'

6
frontend/src/features/conversation/message/ContactMessageBubble.vue
View File

@@ -60,12 +60,12 @@
<Tooltip>
<TooltipTrigger>
<span class="text-muted-foreground text-xs mt-1">
{{ format(message.updated_at, 'h:mm a') }}
{{ formatMessageTimestamp(message.created_at) }}
</span>
</TooltipTrigger>
<TooltipContent>
<p>
{{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
{{ formatFullTimestamp(message.created_at) }}
</p>
</TooltipContent>
</Tooltip>
@@ -75,11 +75,11 @@
<script setup>
import { computed, ref } from 'vue'
import { format } from 'date-fns'
import { useConversationStore } from '@/stores/conversation'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Letter } from 'vue-letter'
import { formatMessageTimestamp, formatFullTimestamp } from '@/utils/datetime'
import { useAppSettingsStore } from '@/stores/appSettings'
import { useI18n } from 'vue-i18n'
import MessageAttachmentPreview from '@/features/conversation/message/attachment/MessageAttachmentPreview.vue'

8
frontend/src/utils/datetime.js
View File

@@ -25,4 +25,12 @@ export const formatDuration = (seconds, showSeconds = true) => {
const mins = Math.floor((totalSeconds % 3600) / 60)
const secs = totalSeconds % 60
return `${hours}h ${mins}m ${showSeconds ? `${secs}s` : ''}`
}
export const formatMessageTimestamp = (time) => {
return format(time, 'd MMM, hh:mm a')
}
export const formatFullTimestamp = (time) => {
return format(time, 'd MMM yyyy, hh:mm a')
}