refac: styling

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

View file

@ -20,7 +20,6 @@
export let submitPrompt: Function; export let submitPrompt: Function;
export let stopResponse: Function; export let stopResponse: Function;
export let suggestionPrompts = [];
export let autoScroll = true; export let autoScroll = true;
let chatTextAreaElement: HTMLTextAreaElement; let chatTextAreaElement: HTMLTextAreaElement;
let filesInputElement; let filesInputElement;
@ -453,9 +452,9 @@
/> />
{/if} {/if}
{#if messages.length == 0 && suggestionPrompts.length !== 0} <!-- {#if messages.length == 0 && suggestionPrompts.length !== 0}
<Suggestions {suggestionPrompts} {submitPrompt} /> <Suggestions {suggestionPrompts} {submitPrompt} />
{/if} {/if} -->
</div> </div>
</div> </div>
</div> </div>

View file

@ -10,14 +10,12 @@
: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4); : suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
</script> </script>
<div class=" mb-3 md:p-1 text-left w-full"> <div class="w-full">
<div class=" flex flex-wrap-reverse px-2 text-left"> <div class="relative w-full flex gap-2 snap-x overflow-x-auto tabs">
{#each prompts as prompt, promptIdx} {#each prompts as prompt, promptIdx}
<div <div class="snap-center shrink-0">
class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px] px-1"
>
<button <button
class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-2xl transition group" class="flex flex-1 shrink-0 w-60 justify-between h-full px-4 py-2.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-2xl transition group"
on:click={() => { on:click={() => {
submitPrompt(prompt.content); submitPrompt(prompt.content);
}} }}
@ -25,7 +23,7 @@
<div class="flex flex-col text-left self-center"> <div class="flex flex-col text-left self-center">
{#if prompt.title && prompt.title[0] !== ''} {#if prompt.title && prompt.title[0] !== ''}
<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div> <div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
<div class="text-sm text-gray-500 line-clamp-1">{prompt.title[1]}</div> <div class="text-sm text-gray-500 font-normal line-clamp-1">{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 line-clamp-2">
{prompt.content} {prompt.content}
@ -52,5 +50,22 @@
</button> </button>
</div> </div>
{/each} {/each}
<!-- <div class="snap-center shrink-0">
<img
class="shrink-0 w-80 h-40 rounded-lg shadow-xl bg-white"
src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
/>
</div> -->
</div> </div>
</div> </div>
<style>
.tabs::-webkit-scrollbar {
display: none; /* for Chrome, Safari and Opera */
}
.tabs {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>

View file

@ -22,6 +22,8 @@
export let continueGeneration: Function; export let continueGeneration: Function;
export let regenerateResponse: Function; export let regenerateResponse: Function;
export let prompt;
export let suggestionPrompts;
export let processing = ''; export let processing = '';
export let bottomPadding = false; export let bottomPadding = false;
export let autoScroll; export let autoScroll;
@ -276,7 +278,22 @@
</script> </script>
{#if messages.length == 0} {#if messages.length == 0}
<Placeholder models={selectedModels} modelfiles={selectedModelfiles} /> <Placeholder
models={selectedModels}
modelfiles={selectedModelfiles}
{suggestionPrompts}
submitPrompt={async (p) => {
const chatTextAreaElement = document.getElementById('chat-textarea');
if (chatTextAreaElement) {
prompt = p;
await tick();
chatTextAreaElement.style.height = '';
chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px';
}
}}
/>
{:else} {:else}
<div class=" pb-10"> <div class=" pb-10">
{#key chatId} {#key chatId}

View file

@ -2,12 +2,16 @@
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 Suggestions from '../MessageInput/Suggestions.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let models = []; export let models = [];
export let modelfiles = []; export let modelfiles = [];
export let submitPrompt;
export let suggestionPrompts;
let modelfile = null; let modelfile = null;
let selectedModelIdx = 0; let selectedModelIdx = 0;
@ -20,8 +24,9 @@
</script> </script>
{#if models.length > 0} {#if models.length > 0}
<div class="m-auto text-center max-w-md px-2"> <div class=" my-auto text-center pb-10 md:pb-24">
<div class="flex justify-center mt-8"> <div class="m-auto max-w-3xl px-8">
<div class="flex justify-start mt-8">
<div class="flex -space-x-4 mb-1"> <div class="flex -space-x-4 mb-1">
{#each models as model, modelIdx} {#each models as model, modelIdx}
<button <button
@ -50,16 +55,19 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class=" mt-2 mb-5 text-2xl text-gray-800 dark:text-gray-100 font-semibold"> <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} {#if modelfile}
<span class=" capitalize"> <span class=" capitalize">
{modelfile.title} {modelfile.title}
</span> </span>
<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400"> <div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
{modelfile.desc} {modelfile.desc}
</div> </div>
{#if modelfile.user} {#if modelfile.user}
<div class="mt-0.5 text-sm font-normal text-gray-500 dark:text-gray-500"> <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}" By <a href="https://openwebui.com/m/{modelfile.user.username}"
>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a >{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
> >
@ -68,8 +76,16 @@
{:else} {:else}
<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div> <div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
<div>{$i18n.t('How can I help you today?')}</div> <div class=" font-medium text-gray-400 dark:">
{$i18n.t('How can I help you today?')}
</div>
{/if} {/if}
</div> </div>
</div> </div>
<div class=" max-w-full">
<Suggestions {suggestionPrompts} {submitPrompt} />
</div>
</div>
</div>
{/if} {/if}

View file

@ -867,7 +867,10 @@
bind:history bind:history
bind:messages bind:messages
bind:autoScroll bind:autoScroll
bind:prompt
bottomPadding={files.length > 0} bottomPadding={files.length > 0}
suggestionPrompts={selectedModelfile?.suggestionPrompts ??
$config.default_prompt_suggestions}
{sendPrompt} {sendPrompt}
{continueGeneration} {continueGeneration}
{regenerateResponse} {regenerateResponse}
@ -875,14 +878,6 @@
</div> </div>
</div> </div>
<MessageInput <MessageInput bind:files bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
bind:files
bind:prompt
bind:autoScroll
suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
{messages}
{submitPrompt}
{stopResponse}
/>
</div> </div>
</div> </div>