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"> <script lang="ts">
export let submitPrompt: Function; export let submitPrompt: Function;
export let suggestionPrompts = []; export let suggestionPrompts = [];
let prompts = [];
$: prompts =
suggestionPrompts.length <= 4
? suggestionPrompts
: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
</script> </script>
<div class=" flex flex-wrap-reverse mb-3 md:p-1 text-left w-full"> <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]"> <div class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px]">
<button <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" 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 <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? '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={() => { on:click={() => {
editMessageHandler(); editMessageHandler();
}} }}
@ -387,7 +387,7 @@
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? '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={() => { on:click={() => {
copyToClipboard(message.content); copyToClipboard(message.content);
}} }}
@ -412,7 +412,7 @@
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1 : '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" : ''} transition"
on:click={() => { on:click={() => {
rateMessage(message.id, 1); rateMessage(message.id, 1);
@ -436,7 +436,7 @@
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1 : '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" : ''} transition"
on:click={() => { on:click={() => {
rateMessage(message.id, -1); rateMessage(message.id, -1);
@ -460,7 +460,7 @@
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? '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={() => { on:click={() => {
if (!loadingSpeech) { if (!loadingSpeech) {
toggleSpeakMessage(message); toggleSpeakMessage(message);
@ -534,7 +534,7 @@
<button <button
class=" {isLastMessage class=" {isLastMessage
? 'visible' ? '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={() => { on:click={() => {
console.log(message); console.log(message);
}} }}
@ -562,7 +562,7 @@
type="button" type="button"
class="{isLastMessage class="{isLastMessage
? 'visible' ? '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} on:click={regenerateResponse}
> >
<svg <svg

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

@ -239,7 +239,7 @@
{/if} {/if}
<button <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={() => { on:click={() => {
editMessageHandler(); editMessageHandler();
}} }}
@ -261,7 +261,7 @@
</button> </button>
<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={() => { on:click={() => {
copyToClipboard(message.content); copyToClipboard(message.content);
}} }}