UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-25 13:29:53 +00:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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">
{#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>
{: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}
</div>
{/if}
</div>
<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
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 { user } from '$lib/stores';
import { onMount, getContext } from 'svelte';
import { blur, fade } from 'svelte/transition';
import Suggestions from '../MessageInput/Suggestions.svelte';
import Bolt from '$lib/components/icons/Bolt.svelte';
const i18n = getContext('i18n');
@ -13,6 +15,7 @@
export let submitPrompt;
export let suggestionPrompts;
let mounted = false;
let modelfile = null;
let selectedModelIdx = 0;
@ -22,12 +25,16 @@
$: if (models.length > 0) {
selectedModelIdx = models.length - 1;
}
onMount(() => {
mounted = true;
});
</script>
{#if models.length > 0}
{#key mounted}
<div class="m-auto w-full max-w-3xl px-8 pb-32">
<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}
<button
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"
>
<div>
{#if modelfile}
<span class=" capitalize">
<div class=" capitalize line-clamp-1" in:fade={{ duration: 200 }}>
{#if modelfile}
{modelfile.title}
</span>
<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
>
{:else}
{$i18n.t('Hello, {{name}}', { name: $user.name })}
{/if}
</div>
<div in:fade={{ duration: 200, delay: 200 }}>
{#if modelfile}
<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>
{/if}
{:else}
<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 class=" w-full">
<div class=" w-full" in:fade={{ duration: 200, delay: 300 }}>
<Suggestions {suggestionPrompts} {submitPrompt} />
</div>
</div>
{/if}
{/key}

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

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

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

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