scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-04 02:33:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat(ui): add Legacy Message Skeleton toggle in user settings

Browse source
This commit is contained in:
silentoplayz 2026-06-11 19:22:15 -04:00
parent b1d40f3409
commit ac40f7f36c
5 changed files with 85 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/chat/Messages/MultiResponseMessages.svelte
View file

@ -414,7 +414,7 @@
<div class="mt-1 markdown-prose w-full min-w-full">
{#if (message?.content ?? '') === ''}
<Skeleton />
<Skeleton legacy={$settings?.legacyMessageSkeleton ?? false} />
{:else}
<Markdown id={`merged`} content={message.content ?? ''} />
{/if}

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

@ -827,7 +827,7 @@
id="response-content-container"
>
{#if message.content === '' && !message.done && !message.error && !hasVisibleStatus}
<Skeleton />
<Skeleton legacy={$settings?.legacyMessageSkeleton ?? false} />
{:else if message.content && message.error !== true}
<!-- always show message contents even if there's an error -->
<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->

77
src/lib/components/chat/Messages/Skeleton.svelte
View file

@ -1,25 +1,70 @@
<script lang="ts">
export let size = 'md';
export let legacy = false;
</script>
<span
class="relative flex {size === 'md'
? 'size-3 my-2'
: size === 'xs'
? 'size-1.5 my-1'
: 'size-2 my-1'} mx-1"
>
{#if legacy}
<div class="w-full mt-2 mb-2">
<div class="animate-pulse flex w-full">
<div class="{size === 'md' ? 'space-y-2' : 'space-y-1.5'} w-full">
<div
class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm mr-14"
/>
<div class="grid grid-cols-3 gap-4">
<div
class="{size === 'md'
? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
/>
<div
class="{size === 'md'
? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
/>
</div>
<div class="grid grid-cols-4 gap-4">
<div
class="{size === 'md'
? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
/>
<div
class="{size === 'md'
? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
/>
<div
class="{size === 'md'
? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1 mr-4"
/>
</div>
<div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm" />
</div>
</div>
</div>
{:else}
<span
class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
></span>
<span
class="relative inline-flex {size === 'md'
? 'size-3'
class="relative flex {size === 'md'
? 'size-3 my-2'
: size === 'xs'
? 'size-1.5'
: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
></span>
</span>
? 'size-1.5 my-1'
: 'size-2 my-1'} mx-1"
>
<span
class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
></span>
<span
class="relative inline-flex {size === 'md'
? 'size-3'
: size === 'xs'
? 'size-1.5'
: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
></span>
</span>
{/if}
<style>
@keyframes size {

21
src/lib/components/chat/Settings/Interface.svelte
View file

@ -68,6 +68,7 @@
let temporaryChatByDefault = false;
let chatFadeStreamingText = true;
let legacyMessageSkeleton = false;
let collapseCodeBlocks = false;
let renderMarkdownInUserMessages = true;
let renderMarkdownInAssistantMessages = true;
@ -217,6 +218,7 @@
displayMultiModelResponsesInTabs = $settings?.displayMultiModelResponsesInTabs ?? false;
chatFadeStreamingText = $settings?.chatFadeStreamingText ?? true;
legacyMessageSkeleton = $settings?.legacyMessageSkeleton ?? false;
richTextInput = $settings?.richTextInput ?? true;
showFormattingToolbar = $settings?.showFormattingToolbar ?? false;
@ -780,6 +782,25 @@
</div>
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div id="legacy-message-skeleton-label" class=" self-center text-xs">
{$i18n.t('Legacy Message Skeleton')}
</div>
<div class="flex items-center gap-2 p-1">
<Switch
ariaLabelledbyId="legacy-message-skeleton-label"
tooltip={true}
bind:state={legacyMessageSkeleton}
on:change={() => {
saveSettings({ legacyMessageSkeleton });
}}
/>
</div>
</div>
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div id="render-markdown-user-label" class=" self-center text-xs">

1
src/lib/stores/index.ts
View file

@ -215,6 +215,7 @@ type Settings = {
scrollOnBranchChange?: boolean;
directConnections?: null;
chatBubble?: boolean;
legacyMessageSkeleton?: boolean;
copyFormatted?: boolean;
models?: string[];
conversationMode?: boolean;