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

Merge pull request #678 from ollama-webui/styling

Browse source 
refac: styling
This commit is contained in:
Timothy Jaeryang Baek 2024-02-07 18:52:20 -08:00 committed by GitHub
commit a06a2b7b9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,17 @@
<script lang="ts">
export let submitPrompt: Function;
export let suggestionPrompts = [];
let prompts = [];
$: prompts =
suggestionPrompts.length <= 4
? suggestionPrompts
: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
</script>
<div class=" flex flex-wrap-reverse mb-3 md:p-1 text-left w-full">
{#each suggestionPrompts as prompt, promptIdx}
{#each prompts as prompt, promptIdx}
<div class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px]">
<button
class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg transition group"

14
src/lib/components/chat/Messages/ResponseMessage.svelte
View file

@ -363,7 +363,7 @@
<button
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
on:click={() => {
editMessageHandler();
}}
@ -387,7 +387,7 @@
<button
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition copy-response-button"
on:click={() => {
copyToClipboard(message.content);
}}
@ -412,7 +412,7 @@
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
? 'bg-gray-100 dark:bg-gray-900'
? 'bg-gray-100 dark:bg-gray-800'
: ''} transition"
on:click={() => {
rateMessage(message.id, 1);
@ -436,7 +436,7 @@
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
? 'bg-gray-100 dark:bg-gray-900'
? 'bg-gray-100 dark:bg-gray-800'
: ''} transition"
on:click={() => {
rateMessage(message.id, -1);
@ -460,7 +460,7 @@
<button
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
on:click={() => {
if (!loadingSpeech) {
toggleSpeakMessage(message);
@ -534,7 +534,7 @@
<button
class=" {isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition whitespace-pre-wrap"
on:click={() => {
console.log(message);
}}
@ -562,7 +562,7 @@
type="button"
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition regenerate-response-button"
: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition regenerate-response-button"
on:click={regenerateResponse}
>
<svg

4
src/lib/components/chat/Messages/UserMessage.svelte
View file

@ -239,7 +239,7 @@
{/if}
<button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition edit-user-message-button"
class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition edit-user-message-button"
on:click={() => {
editMessageHandler();
}}
@ -261,7 +261,7 @@
</button>
<button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition"
on:click={() => {
copyToClipboard(message.content);
}}