tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

refac: placeholder fade in effect

Browse source
This commit is contained in:
Timothy J. Baek 2024-05-01 23:41:12 -07:00
parent b19e05669e
commit 8fb5e22e43
4 changed files with 50 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/chat/MessageInput/Suggestions.svelte
View file

@ -33,17 +33,27 @@
> >
<div class="flex flex-col text-left"> <div class="flex flex-col text-left">
{#if prompt.title && prompt.title[0] !== ''} {#if prompt.title && prompt.title[0] !== ''}
<div class=" font-medium dark:text-gray-300">{prompt.title[0]}</div> <div
class=" font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition"
>
{prompt.title[0]}
</div>
<div class="text-sm text-gray-600 font-normal line-clamp-2">{prompt.title[1]}</div> <div class="text-sm text-gray-600 font-normal line-clamp-2">{prompt.title[1]}</div>
{:else} {:else}
<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2"> <div
class=" self-center text-sm font-medium dark:text-gray-300 dark:group-hover:text-gray-100 transition line-clamp-2"
>
{prompt.content} {prompt.content}
</div> </div>
{/if} {/if}
</div> </div>
<div class="w-full flex justify-between"> <div class="w-full flex justify-between">
<div class="text-xs text-gray-400 dark:text-gray-600 self-center">Prompt</div> <div
class="text-xs text-gray-400 group-hover:text-gray-500 dark:text-gray-600 dark:group-hover:text-gray-500 transition self-center"
>
Prompt
</div>
<div <div
class="self-end p-1 rounded-lg text-gray-300 group-hover:text-gray-800 dark:text-gray-700 dark:group-hover:text-gray-100 transition" class="self-end p-1 rounded-lg text-gray-300 group-hover:text-gray-800 dark:text-gray-700 dark:group-hover:text-gray-100 transition"

58
src/lib/components/chat/Messages/Placeholder.svelte
View file

@ -2,8 +2,10 @@
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import { user } from '$lib/stores'; import { user } from '$lib/stores';
import { onMount, getContext } from 'svelte'; import { onMount, getContext } from 'svelte';
import { blur, fade } from 'svelte/transition';
import Suggestions from '../MessageInput/Suggestions.svelte'; import Suggestions from '../MessageInput/Suggestions.svelte';
import Bolt from '$lib/components/icons/Bolt.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -13,6 +15,7 @@
export let submitPrompt; export let submitPrompt;
export let suggestionPrompts; export let suggestionPrompts;
let mounted = false;
let modelfile = null; let modelfile = null;
let selectedModelIdx = 0; let selectedModelIdx = 0;
@ -22,12 +25,16 @@
$: if (models.length > 0) { $: if (models.length > 0) {
selectedModelIdx = models.length - 1; selectedModelIdx = models.length - 1;
} }
onMount(() => {
mounted = true;
});
</script> </script>
{#if models.length > 0} {#key mounted}
<div class="m-auto w-full max-w-3xl px-8 pb-32"> <div class="m-auto w-full max-w-3xl px-8 pb-32">
<div class="flex justify-start"> <div class="flex justify-start">
<div class="flex -space-x-4 mb-1"> <div class="flex -space-x-4 mb-1" in:fade={{ duration: 200 }}>
{#each models as model, modelIdx} {#each models as model, modelIdx}
<button <button
on:click={() => { on:click={() => {
@ -60,32 +67,37 @@
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4" class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
> >
<div> <div>
{#if modelfile} <div class=" capitalize line-clamp-1" in:fade={{ duration: 200 }}>
<span class=" capitalize"> {#if modelfile}
{modelfile.title} {modelfile.title}
</span> {:else}
<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400"> {$i18n.t('Hello, {{name}}', { name: $user.name })}
{modelfile.desc} {/if}
</div> </div>
{#if modelfile.user}
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500"> <div in:fade={{ duration: 200, delay: 200 }}>
By <a href="https://openwebui.com/m/{modelfile.user.username}" {#if modelfile}
>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a <div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
> {modelfile.desc}
</div>
{#if modelfile.user}
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
By <a href="https://openwebui.com/m/{modelfile.user.username}"
>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
>
</div>
{/if}
{:else}
<div class=" font-medium text-gray-400 dark:text-gray-500">
{$i18n.t('How can I help you today?')}
</div> </div>
{/if} {/if}
{:else} </div>
<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
<div class=" font-medium text-gray-400 dark:text-gray-500">
{$i18n.t('How can I help you today?')}
</div>
{/if}
</div> </div>
</div> </div>
<div class=" w-full"> <div class=" w-full" in:fade={{ duration: 200, delay: 300 }}>
<Suggestions {suggestionPrompts} {submitPrompt} /> <Suggestions {suggestionPrompts} {submitPrompt} />
</div> </div>
</div> </div>
{/if} {/key}

1
src/routes/(app)/+layout.svelte
View file

@ -294,7 +294,6 @@
{/if} {/if}
<Sidebar /> <Sidebar />
<slot /> <slot />
{/if} {/if}
</div> </div>

5
src/routes/(app)/c/[id]/+page.svelte
View file

@ -5,7 +5,6 @@
import { onMount, tick, getContext } from 'svelte'; import { onMount, tick, getContext } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { import {
models, models,
modelfiles, modelfiles,
@ -860,8 +859,8 @@
{#if loaded} {#if loaded}
<div <div
class="min-h-screen max-h-screen {$showSidebar class="min-h-screen max-h-screen {$showSidebar
? 'max-w-[calc(100%-260px)]' ? ' lg:max-w-[calc(100%-260px)]'
: 'max-w-full'} flex flex-col" : ''} max-w-full flex flex-col"
> >
<Navbar <Navbar
{title} {title}