mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
refac
This commit is contained in:
parent
8753c2ff51
commit
c923461882
3 changed files with 60 additions and 50 deletions
|
|
@ -119,7 +119,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="py-5">
|
<div class="py-4.5">
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,13 @@
|
||||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||||
import Database from '$lib/components/icons/Database.svelte';
|
import Database from '$lib/components/icons/Database.svelte';
|
||||||
import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
|
import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
|
||||||
|
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
export let onSelect = (e) => {};
|
export let onSelect = (e) => {};
|
||||||
|
|
||||||
|
let loaded = false;
|
||||||
let items = [];
|
let items = [];
|
||||||
let selectedIdx = 0;
|
let selectedIdx = 0;
|
||||||
|
|
||||||
|
|
@ -99,55 +101,63 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
await tick();
|
await tick();
|
||||||
|
|
||||||
|
loaded = true;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col gap-0.5">
|
{#if loaded}
|
||||||
{#each items as item, idx}
|
<div class="flex flex-col gap-0.5">
|
||||||
<button
|
{#each items as item, idx}
|
||||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
<button
|
||||||
selectedIdx
|
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
selectedIdx
|
||||||
: ''}"
|
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||||
type="button"
|
: ''}"
|
||||||
on:click={() => {
|
type="button"
|
||||||
console.log(item);
|
on:click={() => {
|
||||||
onSelect(item);
|
console.log(item);
|
||||||
}}
|
onSelect(item);
|
||||||
on:mousemove={() => {
|
}}
|
||||||
selectedIdx = idx;
|
on:mousemove={() => {
|
||||||
}}
|
selectedIdx = idx;
|
||||||
on:mouseleave={() => {
|
}}
|
||||||
if (idx === 0) {
|
on:mouseleave={() => {
|
||||||
selectedIdx = -1;
|
if (idx === 0) {
|
||||||
}
|
selectedIdx = -1;
|
||||||
}}
|
}
|
||||||
data-selected={idx === selectedIdx}
|
}}
|
||||||
>
|
data-selected={idx === selectedIdx}
|
||||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
|
>
|
||||||
<Tooltip
|
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
|
||||||
content={item?.legacy
|
<Tooltip
|
||||||
? $i18n.t('Legacy')
|
content={item?.legacy
|
||||||
: item?.type === 'file'
|
? $i18n.t('Legacy')
|
||||||
? $i18n.t('File')
|
: item?.type === 'file'
|
||||||
: item?.type === 'collection'
|
? $i18n.t('File')
|
||||||
? $i18n.t('Collection')
|
: item?.type === 'collection'
|
||||||
: ''}
|
? $i18n.t('Collection')
|
||||||
placement="top"
|
: ''}
|
||||||
>
|
placement="top"
|
||||||
{#if item?.type === 'collection'}
|
>
|
||||||
<Database className="size-4" />
|
{#if item?.type === 'collection'}
|
||||||
{:else}
|
<Database className="size-4" />
|
||||||
<DocumentPage className="size-4" />
|
{:else}
|
||||||
{/if}
|
<DocumentPage className="size-4" />
|
||||||
</Tooltip>
|
{/if}
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||||
<div class="line-clamp-1 flex-1">
|
<div class="line-clamp-1 flex-1">
|
||||||
{decodeString(item?.name)}
|
{decodeString(item?.name)}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="py-4.5">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -122,7 +122,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="py-5">
|
<div class="py-4.5">
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue