UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-07 14:14:50 +00:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-12-23 01:03:14 -07:00
parent 83099a093d
commit 15fa7b44ea
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,7 @@
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte'; import Pencil from '$lib/components/icons/Pencil.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
export let message; export let message;
export let showUserProfile = true; export let showUserProfile = true;
@ -63,7 +64,7 @@
? 'max-w-full' ? 'max-w-full'
: 'max-w-5xl'} mx-auto group hover:bg-gray-500/5 transition relative" : 'max-w-5xl'} mx-auto group hover:bg-gray-500/5 transition relative"
> >
<div class=" absolute invisible group-hover:visible right-1 -top-2"> <div class=" absolute invisible group-hover:visible right-1 -top-2 z-30">
<div <div
class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800" class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800"
> >
@ -104,11 +105,15 @@
<!-- <div class="w-7 h-7 rounded-full bg-transparent" /> --> <!-- <div class="w-7 h-7 rounded-full bg-transparent" /> -->
{#if message.created_at} {#if message.created_at}
<span <div
class=" text-xs self-center invisible group-hover:visible text-gray-500 font-medium first-letter:capitalize" class="mt-1.5 flex 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')} <Tooltip
</span> content={dayjs(message.created_at / 1000000).format('dddd, DD MMMM YYYY HH:mm')}
>
{dayjs(message.created_at / 1000000).format('HH:mm')}
</Tooltip>
</div>
{/if} {/if}
{/if} {/if}
</div> </div>
@ -116,16 +121,20 @@
<div class="flex-auto w-0 pl-1"> <div class="flex-auto w-0 pl-1">
{#if showUserProfile} {#if showUserProfile}
<Name> <Name>
<span class="text-sm"> <div class="text-sm">
{message?.user?.name} {message?.user?.name}
</span> </div>
{#if message.created_at} {#if message.created_at}
<span <div
class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium first-letter:capitalize ml-0.5 -mt-0.5" class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 -mt-0.5"
> >
{formatDate(message.created_at / 1000000)} <Tooltip
</span> content={dayjs(message.created_at / 1000000).format('dddd, DD MMMM YYYY HH:mm')}
>
{formatDate(message.created_at / 1000000)}
</Tooltip>
</div>
{/if} {/if}
</Name> </Name>
{/if} {/if}
@ -181,7 +190,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="markdown-prose"> <div class=" min-w-full markdown-prose">
<Markdown id={message.id} content={message.content} /> <Markdown id={message.id} content={message.content} />
</div> </div>
{/if} {/if}

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

@ -1,3 +1,3 @@
<div class=" self-center font-semibold mb-0.5 line-clamp-1 contents"> <div class=" self-center font-semibold mb-0.5 line-clamp-1 flex gap-1 items-center">
<slot /> <slot />
</div> </div>