From dda945f4ad0c1482fd3ac0e8e55f7817b50ffaf4 Mon Sep 17 00:00:00 2001 From: Sharon Fox Date: Sun, 26 Jan 2025 02:44:26 -0500 Subject: [PATCH] feat: Localized dates and times --- src/lib/components/admin/Users/UserList.svelte | 4 +++- .../components/admin/Users/UserList/EditUserModal.svelte | 4 +++- .../components/admin/Users/UserList/UserChatsModal.svelte | 4 +++- src/lib/components/channel/Messages/Message.svelte | 8 +++++--- .../components/chat/Messages/MultiResponseMessages.svelte | 4 +++- src/lib/components/chat/Messages/ResponseMessage.svelte | 2 +- src/lib/components/chat/Messages/UserMessage.svelte | 4 +++- .../chat/Settings/Personalization/ManageModal.svelte | 6 +++--- .../components/layout/Sidebar/ArchivedChatsModal.svelte | 5 ++++- src/lib/utils/index.ts | 8 +++++--- src/routes/s/[id]/+page.svelte | 4 +++- 11 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte index 2ee4297a4..ce730571f 100644 --- a/src/lib/components/admin/Users/UserList.svelte +++ b/src/lib/components/admin/Users/UserList.svelte @@ -6,7 +6,9 @@ import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; dayjs.extend(relativeTime); + dayjs.extend(localizedFormat); import { toast } from 'svelte-sonner'; @@ -364,7 +366,7 @@ - {dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))} + {dayjs(user.created_at * 1000).format('LL')} {user.oauth_sub ?? ''} diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte index 868951d57..9b2edb407 100644 --- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte +++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte @@ -7,9 +7,11 @@ import { updateUserById } from '$lib/apis/users'; import Modal from '$lib/components/common/Modal.svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const i18n = getContext('i18n'); const dispatch = createEventDispatcher(); + dayjs.extend(localizedFormat); export let show = false; export let selectedUser; @@ -87,7 +89,7 @@
{$i18n.t('Created at')} - {dayjs(selectedUser.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))} + {dayjs(selectedUser.created_at * 1000).format('LL')}
diff --git a/src/lib/components/admin/Users/UserList/UserChatsModal.svelte b/src/lib/components/admin/Users/UserList/UserChatsModal.svelte index 92970b658..a95df8291 100644 --- a/src/lib/components/admin/Users/UserList/UserChatsModal.svelte +++ b/src/lib/components/admin/Users/UserList/UserChatsModal.svelte @@ -2,8 +2,10 @@ import { toast } from 'svelte-sonner'; import dayjs from 'dayjs'; import { getContext, createEventDispatcher } from 'svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const dispatch = createEventDispatcher(); + dayjs.extend(localizedFormat); import { getChatListByUserId, deleteChatById, getArchivedChatList } from '$lib/apis/chats'; @@ -130,7 +132,7 @@
- {dayjs(chat.updated_at * 1000).format($i18n.t('MMMM DD, YYYY HH:mm'))} + {dayjs(chat.updated_at * 1000).format('LLL')}
diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte index ef17feb7f..a84077823 100644 --- a/src/lib/components/channel/Messages/Message.svelte +++ b/src/lib/components/channel/Messages/Message.svelte @@ -3,10 +3,12 @@ import relativeTime from 'dayjs/plugin/relativeTime'; import isToday from 'dayjs/plugin/isToday'; import isYesterday from 'dayjs/plugin/isYesterday'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; dayjs.extend(relativeTime); dayjs.extend(isToday); dayjs.extend(isYesterday); + dayjs.extend(localizedFormat); import { getContext, onMount } from 'svelte'; const i18n = getContext>('i18n'); @@ -154,9 +156,9 @@ class="mt-1.5 flex flex-shrink-0 items-center text-xs self-center invisible group-hover:visible text-gray-500 font-medium first-letter:capitalize" > - {dayjs(message.created_at / 1000000).format('HH:mm')} + {dayjs(message.created_at / 1000000).format('LT')} {/if} @@ -175,7 +177,7 @@ class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]" > {formatDate(message.created_at / 1000000)} diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte index e7874df63..ad42c0f26 100644 --- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte +++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte @@ -16,7 +16,9 @@ import Markdown from './Markdown.svelte'; import Name from './Name.svelte'; import Skeleton from './Skeleton.svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const i18n = getContext('i18n'); + dayjs.extend(localizedFormat); export let chatId; export let history; @@ -264,7 +266,7 @@ {/if} diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte index 1768d584d..d6b31e6a0 100644 --- a/src/lib/components/chat/Messages/ResponseMessage.svelte +++ b/src/lib/components/chat/Messages/ResponseMessage.svelte @@ -500,7 +500,7 @@ diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index db1d31548..bf22e558a 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -13,8 +13,10 @@ import FileItem from '$lib/components/common/FileItem.svelte'; import Markdown from './Markdown.svelte'; import Image from '$lib/components/common/Image.svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const i18n = getContext('i18n'); + dayjs.extend(localizedFormat); export let user; @@ -112,7 +114,7 @@ diff --git a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte index e4613b5fe..a9f72ccbb 100644 --- a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte +++ b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte @@ -11,8 +11,10 @@ import Tooltip from '$lib/components/common/Tooltip.svelte'; import { error } from '@sveltejs/kit'; import EditMemoryModal from './EditMemoryModal.svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const i18n = getContext('i18n'); + dayjs.extend(localizedFormat); export let show = false; @@ -84,9 +86,7 @@
- {dayjs(memory.updated_at * 1000).format( - $i18n.t('MMMM DD, YYYY hh:mm:ss A') - )} + {dayjs(memory.updated_at * 1000).format('LLL')}
diff --git a/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte b/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte index 6626cfed7..7af0c6ded 100644 --- a/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte +++ b/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte @@ -4,6 +4,9 @@ import { toast } from 'svelte-sonner'; import dayjs from 'dayjs'; import { getContext, createEventDispatcher } from 'svelte'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; + + dayjs.extend(localizedFormat); const dispatch = createEventDispatcher(); @@ -159,7 +162,7 @@
- {dayjs(chat.created_at * 1000).format($i18n.t('MMMM DD, YYYY HH:mm'))} + {dayjs(chat.created_at * 1000).format('LLL')}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index 24d6f23b5..20f44f49b 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -5,10 +5,12 @@ import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import isToday from 'dayjs/plugin/isToday'; import isYesterday from 'dayjs/plugin/isYesterday'; +import localizedFormat from 'dayjs/plugin/localizedFormat'; dayjs.extend(relativeTime); dayjs.extend(isToday); dayjs.extend(isYesterday); +dayjs.extend(localizedFormat); import { WEBUI_BASE_URL } from '$lib/constants'; import { TTS_RESPONSE_SPLIT } from '$lib/types'; @@ -295,11 +297,11 @@ export const formatDate = (inputDate) => { const now = dayjs(); if (date.isToday()) { - return `Today at ${date.format('HH:mm')}`; + return `Today at ${date.format('LT')}`; } else if (date.isYesterday()) { - return `Yesterday at ${date.format('HH:mm')}`; + return `Yesterday at ${date.format('LT')}`; } else { - return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`; + return `${date.format('L')} at ${date.format('LT')}`; } }; diff --git a/src/routes/s/[id]/+page.svelte b/src/routes/s/[id]/+page.svelte index dfef68513..36ea3541e 100644 --- a/src/routes/s/[id]/+page.svelte +++ b/src/routes/s/[id]/+page.svelte @@ -16,8 +16,10 @@ import { getUserById } from '$lib/apis/users'; import { getModels } from '$lib/apis'; import { toast } from 'svelte-sonner'; + import localizedFormat from 'dayjs/plugin/localizedFormat'; const i18n = getContext('i18n'); + dayjs.extend(localizedFormat); let loaded = false; @@ -138,7 +140,7 @@
- {dayjs(chat.chat.timestamp).format($i18n.t('MMMM DD, YYYY'))} + {dayjs(chat.chat.timestamp).format('LLL')}