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

refac: styling

Browse source
This commit is contained in:
Timothy J. Baek 2024-04-30 14:56:06 -07:00
parent 2674656b49
commit 18e5c2e4cb
5 changed files with 110 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,12 +2,16 @@
import { WEBUI_BASE_URL } from '$lib/constants';
import { user } from '$lib/stores';
import { onMount, getContext } from 'svelte';
import Suggestions from '../MessageInput/Suggestions.svelte';
const i18n = getContext('i18n');
export let models = [];
export let modelfiles = [];
export let submitPrompt;
export let suggestionPrompts;
let modelfile = null;
let selectedModelIdx = 0;
@ -20,56 +24,68 @@
</script>
{#if models.length > 0}
<div class="m-auto text-center max-w-md px-2">
<div class="flex justify-center mt-8">
<div class="flex -space-x-4 mb-1">
{#each models as model, modelIdx}
<button
on:click={() => {
selectedModelIdx = modelIdx;
}}
>
{#if model in modelfiles}
<img
src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
alt="modelfile"
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
draggable="false"
/>
{:else}
<img
src={$i18n.language === 'dg-DG'
? `/doge.png`
: `${WEBUI_BASE_URL}/static/favicon.png`}
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo"
draggable="false"
/>
{/if}
</button>
{/each}
</div>
</div>
<div class=" mt-2 mb-5 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
{#if modelfile}
<span class=" capitalize">
{modelfile.title}
</span>
<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400">
{modelfile.desc}
</div>
{#if modelfile.user}
<div class="mt-0.5 text-sm font-normal text-gray-500 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 class=" my-auto text-center pb-10 md:pb-24">
<div class="m-auto max-w-3xl px-8">
<div class="flex justify-start mt-8">
<div class="flex -space-x-4 mb-1">
{#each models as model, modelIdx}
<button
on:click={() => {
selectedModelIdx = modelIdx;
}}
>
</div>
{/if}
{:else}
<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
{#if model in modelfiles}
<img
src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
alt="modelfile"
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
draggable="false"
/>
{:else}
<img
src={$i18n.language === 'dg-DG'
? `/doge.png`
: `${WEBUI_BASE_URL}/static/favicon.png`}
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo"
draggable="false"
/>
{/if}
</button>
{/each}
</div>
</div>
<div
class=" mt-2 mb-3.5 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
>
<div>
{#if modelfile}
<span class=" capitalize">
{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
>
</div>
{/if}
{:else}
<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
<div>{$i18n.t('How can I help you today?')}</div>
{/if}
<div class=" font-medium text-gray-400 dark:">
{$i18n.t('How can I help you today?')}
</div>
{/if}
</div>
</div>
<div class=" max-w-full">
<Suggestions {suggestionPrompts} {submitPrompt} />
</div>
</div>
</div>
{/if}