Skip to content

GitLab

Commit 18e5c2e4 authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: styling

parent 2674656b
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 67 deletions
src/lib/components/chat/MessageInput.svelte
View file @ 18e5c2e4
...@@ -20,7 +20,6 @@ ...@@ -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 @@ ...@@ -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>
......
src/lib/components/chat/MessageInput/Suggestions.svelte
View file @ 18e5c2e4
...@@ -10,14 +10,12 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
src/lib/components/chat/Messages.svelte
View file @ 18e5c2e4
...@@ -22,6 +22,8 @@ ...@@ -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 @@ ...@@ -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}
......
src/lib/components/chat/Messages/Placeholder.svelte
View file @ 18e5c2e4
...@@ -2,12 +2,16 @@ ...@@ -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,56 +24,68 @@ ...@@ -20,56 +24,68 @@
</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 -space-x-4 mb-1"> <div class="flex justify-start mt-8">
{#each models as model, modelIdx} <div class="flex -space-x-4 mb-1">
<button {#each models as model, modelIdx}
on:click={() => { <button
selectedModelIdx = modelIdx; on:click={() => {
}} selectedModelIdx = modelIdx;
> }}
{#if model in modelfiles} >
<img {#if model in modelfiles}
src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`} <img
alt="modelfile" src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none" alt="modelfile"
draggable="false" class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
/> draggable="false"
{:else} />
<img {:else}
src={$i18n.language === 'dg-DG' <img
? `/doge.png` src={$i18n.language === 'dg-DG'
: `${WEBUI_BASE_URL}/static/favicon.png`} ? `/doge.png`
class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none" : `${WEBUI_BASE_URL}/static/favicon.png`}
alt="logo" class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
draggable="false" alt="logo"
/> draggable="false"
{/if} />
</button> {/if}
{/each} </button>
{/each}
</div>
</div> </div>
</div> <div
<div class=" mt-2 mb-5 text-2xl text-gray-800 dark:text-gray-100 font-semibold"> class=" mt-2 mb-3.5 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
{#if modelfile} >
<span class=" capitalize"> <div>
{modelfile.title} {#if modelfile}
</span> <span class=" capitalize">
<div class="mt-0.5 text-base font-normal text-gray-600 dark:text-gray-400"> {modelfile.title}
{modelfile.desc} </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 class=" font-medium text-gray-400 dark:">
{$i18n.t('How can I help you today?')}
</div>
{/if}
</div> </div>
{#if modelfile.user} </div>
<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>
{/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> <div class=" max-w-full">
{/if} <Suggestions {suggestionPrompts} {submitPrompt} />
</div>
</div> </div>
</div> </div>
{/if} {/if}
src/routes/(app)/+page.svelte
View file @ 18e5c2e4
...@@ -867,7 +867,10 @@ ...@@ -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 @@ ...@@ -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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment