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

refac: styling

Browse source
This commit is contained in:
Timothy J. Baek 2024-05-01 22:39:09 -07:00
parent 68cfccedee
commit 6d378844ae
5 changed files with 84 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/chat/MessageInput.svelte
View file

@ -480,16 +480,16 @@
];
}}
/>
{:else if prompt.charAt(0) === '@'}
<Models
bind:this={modelsElement}
bind:prompt
bind:user
bind:chatInputPlaceholder
{messages}
/>
{/if}
<Models
bind:this={modelsElement}
bind:prompt
bind:user
bind:chatInputPlaceholder
{messages}
/>
<!-- {#if messages.length == 0 && suggestionPrompts.length !== 0}
<Suggestions {suggestionPrompts} {submitPrompt} />
{/if} -->

82
src/lib/components/chat/MessageInput/Models.svelte
View file

@ -13,16 +13,13 @@
export let chatInputPlaceholder = '';
export let messages = [];
let selectedModel = null;
let selectedIdx = 0;
let filteredModels = [];
$: filteredModels = $models
.filter(
(p) =>
p.name !== 'hr' &&
!p.external &&
p.name.includes(prompt.split(' ')?.at(0)?.substring(1) ?? '')
)
.filter((p) => p.name.includes(prompt.split(' ')?.at(0)?.substring(1) ?? ''))
.sort((a, b) => a.name.localeCompare(b.name));
$: if (prompt) {
@ -38,6 +35,13 @@
};
const confirmSelect = async (model) => {
prompt = '';
selectedModel = model;
console.log(selectedModel);
};
const confirmSelectCollaborativeChat = async (model) => {
// dispatch('select', model);
prompt = '';
user = JSON.parse(JSON.stringify(model.name));
@ -127,40 +131,50 @@
};
</script>
{#if filteredModels.length > 0}
<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
<div class="flex w-full px-2">
<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-xl text-center">
<div class=" text-lg font-semibold mt-2">@</div>
</div>
{#if prompt.charAt(0) === '@'}
{#if filteredModels.length > 0}
<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
<div class="flex w-full px-2">
<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-xl text-center">
<div class=" text-lg font-semibold mt-2">@</div>
</div>
<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
{#each filteredModels as model, modelIdx}
<button
class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
? ' bg-gray-100 selected-command-option-button'
: ''}"
type="button"
on:click={() => {
confirmSelect(model);
}}
on:mousemove={() => {
selectedIdx = modelIdx;
}}
on:focus={() => {}}
>
<div class=" font-medium text-black line-clamp-1">
{model.name}
</div>
<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
{#each filteredModels as model, modelIdx}
<button
class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
? ' bg-gray-100 selected-command-option-button'
: ''}"
type="button"
on:click={() => {
confirmSelect(model);
}}
on:mousemove={() => {
selectedIdx = modelIdx;
}}
on:focus={() => {}}
>
<div class=" font-medium text-black line-clamp-1">
{model.name}
</div>
<!-- <div class=" text-xs text-gray-600 line-clamp-1">
<!-- <div class=" text-xs text-gray-600 line-clamp-1">
{doc.title}
</div> -->
</button>
{/each}
</button>
{/each}
</div>
</div>
</div>
</div>
{/if}
{/if}
{#if selectedModel !== null}
<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
<div>
{JSON.stringify(selectedModel)}
</div>
</div>
{/if}

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

@ -3,6 +3,7 @@
import { user } from '$lib/stores';
import { onMount, getContext } from 'svelte';
import Suggestions from '../MessageInput/Suggestions.svelte';
import Bolt from '$lib/components/icons/Bolt.svelte';
const i18n = getContext('i18n');
@ -25,7 +26,7 @@
{#if models.length > 0}
<div class="m-auto w-full max-w-3xl px-8 pb-24">
<div class="flex justify-start">
<!-- <div class="flex justify-start">
<div class="flex -space-x-4 mb-0.5">
{#each models as model, modelIdx}
<button
@ -53,9 +54,9 @@
</button>
{/each}
</div>
</div>
</div> -->
<div
class=" mt-2 mb-4 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
>
<div>
{#if modelfile}
@ -83,6 +84,10 @@
</div>
<div class=" w-full">
<div class="mb-2 flex gap-1 text-sm font-medium items-center dark:text-gray-600">
<Bolt />
Suggested
</div>
<Suggestions {suggestionPrompts} {submitPrompt} />
</div>
</div>

19
src/lib/components/icons/Bolt.svelte Normal file
View file

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-3';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>

2
src/lib/components/layout/Navbar.svelte
View file

@ -29,7 +29,7 @@
<nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
<div
class=" flex {$settings?.fullScreenMode ?? null ? 'max-w-full' : 'max-w-3xl'}
w-full mx-auto px-3"
w-full mx-auto px-5"
>
<div class="flex items-center w-full max-w-full">
<div class="flex-1 overflow-hidden max-w-full">