UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-25 15:08:18 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-05 21:25:04 -07:00
parent 1086a0e662
commit 46bd97c100
3 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/chat/MessageInput/Commands/Knowledge.svelte
View File

@ -117,11 +117,11 @@
{#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
<div
id="commands-container"
class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
>
<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
<div class=" text-lg font-semibold mt-2">#</div>
<div class=" text-lg font-medium mt-2">#</div>
</div>
<div

42
src/lib/components/chat/MessageInput/Commands/Models.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import Fuse from 'fuse.js';
import { createEventDispatcher, onMount } from 'svelte';
import { tick, getContext } from 'svelte';
@ -11,13 +13,31 @@
export let command = '';
let selectedIdx = 0;
let filteredModels = [];
let filteredItems = [];
$: filteredModels = $models
.filter((p) =>
p.name.toLowerCase().includes(command.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '')
)
.sort((a, b) => a.name.localeCompare(b.name));
let fuse = new Fuse(
$models
.filter((model) => !model?.info?.meta?.hidden)
.map((model) => {
const _item = {
...model,
modelName: model?.name,
tags: model?.info?.meta?.tags?.map((tag) => tag.name).join(' '),
desc: model?.info?.meta?.description
};
return _item;
}),
{
keys: ['value', 'tags', 'modelName'],
threshold: 0.3
}
);
$: filteredItems = command.slice(1)
? fuse.search(command).map((e) => {
return e.item;
})
: $models.filter((model) => !model?.info?.meta?.hidden);
$: if (command) {
selectedIdx = 0;
@ -28,7 +48,7 @@
};
export const selectDown = () => {
selectedIdx = Math.min(selectedIdx + 1, filteredModels.length - 1);
selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1);
};
const confirmSelect = async (model) => {
@ -45,21 +65,21 @@
});
</script>
{#if filteredModels.length > 0}
{#if filteredItems.length > 0}
<div
id="commands-container"
class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
>
<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
<div class=" text-lg font-semibold mt-2">@</div>
<div class=" text-lg font-medium mt-2">@</div>
</div>
<div
class="max-h-60 flex flex-col w-full rounded-r-lg bg-white dark:bg-gray-900 dark:text-gray-100"
>
<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden">
{#each filteredModels as model, modelIdx}
{#each filteredItems as model, modelIdx}
<button
class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button'

4
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View File

@ -132,11 +132,11 @@
{#if filteredPrompts.length > 0}
<div
id="commands-container"
class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
>
<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
<div class=" text-lg font-semibold mt-2">/</div>
<div class=" text-lg font-medium mt-2">/</div>
</div>
<div