OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-16 19:43:42 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: Localized dates and times

Browse Source
This commit is contained in:
Sharon Fox 2025-01-26 02:44:26 -05:00
parent 24ab79f5e9
commit dda945f4ad
No known key found for this signature in database
GPG Key ID: 04D236CBE1C84D3B
11 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/admin/Users/UserList.svelte
View File

@ -6,7 +6,9 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
@ -364,7 +366,7 @@
</td> </td>
<td class=" px-3 py-1"> <td class=" px-3 py-1">
{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))} {dayjs(user.created_at * 1000).format('LL')}
</td> </td>
<td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td> <td class=" px-3 py-1"> {user.oauth_sub ?? ''} </td>

4
src/lib/components/admin/Users/UserList/EditUserModal.svelte
View File

@ -7,9 +7,11 @@
import { updateUserById } from '$lib/apis/users'; import { updateUserById } from '$lib/apis/users';
import Modal from '$lib/components/common/Modal.svelte'; import Modal from '$lib/components/common/Modal.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
dayjs.extend(localizedFormat);
export let show = false; export let show = false;
export let selectedUser; export let selectedUser;
@ -87,7 +89,7 @@
<div class="text-xs text-gray-500"> <div class="text-xs text-gray-500">
{$i18n.t('Created at')} {$i18n.t('Created at')}
{dayjs(selectedUser.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))} {dayjs(selectedUser.created_at * 1000).format('LL')}
</div> </div>
</div> </div>
</div> </div>

4
src/lib/components/admin/Users/UserList/UserChatsModal.svelte
View File

@ -2,8 +2,10 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getContext, createEventDispatcher } from 'svelte'; import { getContext, createEventDispatcher } from 'svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
dayjs.extend(localizedFormat);
import { getChatListByUserId, deleteChatById, getArchivedChatList } from '$lib/apis/chats'; import { getChatListByUserId, deleteChatById, getArchivedChatList } from '$lib/apis/chats';
@ -130,7 +132,7 @@
<td class=" px-3 py-1 hidden md:flex h-[2.5rem] justify-end"> <td class=" px-3 py-1 hidden md:flex h-[2.5rem] justify-end">
<div class="my-auto shrink-0"> <div class="my-auto shrink-0">
{dayjs(chat.updated_at * 1000).format($i18n.t('MMMM DD, YYYY HH:mm'))} {dayjs(chat.updated_at * 1000).format('LLL')}
</div> </div>
</td> </td>

8
src/lib/components/channel/Messages/Message.svelte
View File

@ -3,10 +3,12 @@
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import isToday from 'dayjs/plugin/isToday'; import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday'; import isYesterday from 'dayjs/plugin/isYesterday';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
dayjs.extend(isToday); dayjs.extend(isToday);
dayjs.extend(isYesterday); dayjs.extend(isYesterday);
dayjs.extend(localizedFormat);
import { getContext, onMount } from 'svelte'; import { getContext, onMount } from 'svelte';
const i18n = getContext<Writable<i18nType>>('i18n'); const i18n = getContext<Writable<i18nType>>('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" 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"
> >
<Tooltip <Tooltip
content={dayjs(message.created_at / 1000000).format('dddd, DD MMMM YYYY HH:mm')} content={dayjs(message.created_at / 1000000).format('LLLL')}
> >
{dayjs(message.created_at / 1000000).format('HH:mm')} {dayjs(message.created_at / 1000000).format('LT')}
</Tooltip> </Tooltip>
</div> </div>
{/if} {/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]" class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
> >
<Tooltip <Tooltip
content={dayjs(message.created_at / 1000000).format('dddd, DD MMMM YYYY HH:mm')} content={dayjs(message.created_at / 1000000).format('LLLL')}
> >
<span class="line-clamp-1">{formatDate(message.created_at / 1000000)}</span> <span class="line-clamp-1">{formatDate(message.created_at / 1000000)}</span>
</Tooltip> </Tooltip>

4
src/lib/components/chat/Messages/MultiResponseMessages.svelte
View File

@ -16,7 +16,9 @@
import Markdown from './Markdown.svelte'; import Markdown from './Markdown.svelte';
import Name from './Name.svelte'; import Name from './Name.svelte';
import Skeleton from './Skeleton.svelte'; import Skeleton from './Skeleton.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
dayjs.extend(localizedFormat);
export let chatId; export let chatId;
export let history; export let history;
@ -264,7 +266,7 @@
<span <span
class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5" class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
> >
{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))} {dayjs(message.timestamp * 1000).format('LT')}
</span> </span>
{/if} {/if}
</Name> </Name>

2
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -500,7 +500,7 @@
<div <div
class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]" class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
> >
<Tooltip content={dayjs(message.timestamp * 1000).format('dddd, DD MMMM YYYY HH:mm')}> <Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span> <span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
</Tooltip> </Tooltip>
</div> </div>

4
src/lib/components/chat/Messages/UserMessage.svelte
View File

@ -13,8 +13,10 @@
import FileItem from '$lib/components/common/FileItem.svelte'; import FileItem from '$lib/components/common/FileItem.svelte';
import Markdown from './Markdown.svelte'; import Markdown from './Markdown.svelte';
import Image from '$lib/components/common/Image.svelte'; import Image from '$lib/components/common/Image.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
dayjs.extend(localizedFormat);
export let user; export let user;
@ -112,7 +114,7 @@
<div <div
class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]" class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
> >
<Tooltip content={dayjs(message.timestamp * 1000).format('dddd, DD MMMM YYYY HH:mm')}> <Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span> <span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
</Tooltip> </Tooltip>
</div> </div>

6
src/lib/components/chat/Settings/Personalization/ManageModal.svelte
View File

@ -11,8 +11,10 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import EditMemoryModal from './EditMemoryModal.svelte'; import EditMemoryModal from './EditMemoryModal.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
dayjs.extend(localizedFormat);
export let show = false; export let show = false;
@ -84,9 +86,7 @@
</td> </td>
<td class=" px-3 py-1 hidden md:flex h-[2.5rem]"> <td class=" px-3 py-1 hidden md:flex h-[2.5rem]">
<div class="my-auto whitespace-nowrap"> <div class="my-auto whitespace-nowrap">
{dayjs(memory.updated_at * 1000).format( {dayjs(memory.updated_at * 1000).format('LLL')}
$i18n.t('MMMM DD, YYYY hh:mm:ss A')
)}
</div> </div>
</td> </td>
<td class="px-3 py-1"> <td class="px-3 py-1">

5
src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
View File

@ -4,6 +4,9 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getContext, createEventDispatcher } from 'svelte'; import { getContext, createEventDispatcher } from 'svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -159,7 +162,7 @@
<td class=" px-3 py-1 hidden md:flex h-[2.5rem]"> <td class=" px-3 py-1 hidden md:flex h-[2.5rem]">
<div class="my-auto"> <div class="my-auto">
{dayjs(chat.created_at * 1000).format($i18n.t('MMMM DD, YYYY HH:mm'))} {dayjs(chat.created_at * 1000).format('LLL')}
</div> </div>
</td> </td>

8
src/lib/utils/index.ts
View File

@ -5,10 +5,12 @@ import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import isToday from 'dayjs/plugin/isToday'; import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday'; import isYesterday from 'dayjs/plugin/isYesterday';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
dayjs.extend(isToday); dayjs.extend(isToday);
dayjs.extend(isYesterday); dayjs.extend(isYesterday);
dayjs.extend(localizedFormat);
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import { TTS_RESPONSE_SPLIT } from '$lib/types'; import { TTS_RESPONSE_SPLIT } from '$lib/types';
@ -295,11 +297,11 @@ export const formatDate = (inputDate) => {
const now = dayjs(); const now = dayjs();
if (date.isToday()) { if (date.isToday()) {
return `Today at ${date.format('HH:mm')}`; return `Today at ${date.format('LT')}`;
} else if (date.isYesterday()) { } else if (date.isYesterday()) {
return `Yesterday at ${date.format('HH:mm')}`; return `Yesterday at ${date.format('LT')}`;
} else { } else {
return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`; return `${date.format('L')} at ${date.format('LT')}`;
} }
}; };

4
src/routes/s/[id]/+page.svelte
View File

@ -16,8 +16,10 @@
import { getUserById } from '$lib/apis/users'; import { getUserById } from '$lib/apis/users';
import { getModels } from '$lib/apis'; import { getModels } from '$lib/apis';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import localizedFormat from 'dayjs/plugin/localizedFormat';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
dayjs.extend(localizedFormat);
let loaded = false; let loaded = false;
@ -138,7 +140,7 @@
<div class="flex text-sm justify-between items-center mt-1"> <div class="flex text-sm justify-between items-center mt-1">
<div class="text-gray-400"> <div class="text-gray-400">
{dayjs(chat.chat.timestamp).format($i18n.t('MMMM DD, YYYY'))} {dayjs(chat.chat.timestamp).format('LLL')}
</div> </div>
</div> </div>
</div> </div>