diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte index 176f46551..ef17feb7f 100644 --- a/src/lib/components/channel/Messages/Message.svelte +++ b/src/lib/components/channel/Messages/Message.svelte @@ -30,6 +30,7 @@ import FaceSmile from '$lib/components/icons/FaceSmile.svelte'; import ReactionPicker from './Message/ReactionPicker.svelte'; import ChevronRight from '$lib/components/icons/ChevronRight.svelte'; + import { formatDate } from '$lib/utils'; export let message; export let showUserProfile = true; @@ -45,19 +46,6 @@ let edit = false; let editedContent = null; let showDeleteConfirmDialog = false; - - const formatDate = (inputDate) => { - const date = dayjs(inputDate); - const now = dayjs(); - - if (date.isToday()) { - return `Today at ${date.format('HH:mm')}`; - } else if (date.isYesterday()) { - return `Yesterday at ${date.format('HH:mm')}`; - } else { - return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`; - } - }; {#if message.timestamp} - + + {formatDate(message.timestamp * 1000)} + + {/if} diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 7f9e78226..db1d31548 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -5,7 +5,7 @@ import { models, settings } from '$lib/stores'; import { user as _user } from '$lib/stores'; - import { copyToClipboard as _copyToClipboard } from '$lib/utils'; + import { copyToClipboard as _copyToClipboard, formatDate } from '$lib/utils'; import Name from './Name.svelte'; import ProfileImage from './ProfileImage.svelte'; @@ -109,11 +109,13 @@ {/if} {#if message.timestamp} - + + {formatDate(message.timestamp * 1000)} + + {/if} diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index 82b30b2d6..e8a488692 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -1,6 +1,15 @@ import { v4 as uuidv4 } from 'uuid'; import sha256 from 'js-sha256'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import isToday from 'dayjs/plugin/isToday'; +import isYesterday from 'dayjs/plugin/isYesterday'; + +dayjs.extend(relativeTime); +dayjs.extend(isToday); +dayjs.extend(isYesterday); + import { WEBUI_BASE_URL } from '$lib/constants'; import { TTS_RESPONSE_SPLIT } from '$lib/types'; @@ -281,6 +290,19 @@ export const generateInitialsImage = (name) => { return canvas.toDataURL(); }; +export const formatDate = (inputDate) => { + const date = dayjs(inputDate); + const now = dayjs(); + + if (date.isToday()) { + return `Today at ${date.format('HH:mm')}`; + } else if (date.isYesterday()) { + return `Yesterday at ${date.format('HH:mm')}`; + } else { + return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`; + } +}; + export const copyToClipboard = async (text) => { let result = false; if (!navigator.clipboard) {