enh: enter into folder
Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
co-authored by
Classic298
Classic298
parent
6176dba3c9
commit
5abc03f4dd
@@ -7,7 +7,13 @@
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
import { config, user, models as _models, temporaryChatEnabled } from '$lib/stores';
|
||||
import {
|
||||
config,
|
||||
user,
|
||||
models as _models,
|
||||
temporaryChatEnabled,
|
||||
selectedFolder
|
||||
} from '$lib/stores';
|
||||
import { sanitizeResponseContent, extractCurlyBraceWords } from '$lib/utils';
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
|
||||
@@ -15,6 +21,9 @@
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
|
||||
import MessageInput from './MessageInput.svelte';
|
||||
import FolderOpen from '../icons/FolderOpen.svelte';
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
import Folder from '../icons/Folder.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -77,103 +86,129 @@
|
||||
class="w-full text-3xl text-gray-800 dark:text-gray-100 text-center flex items-center gap-4 font-primary"
|
||||
>
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5 max-w-xl">
|
||||
<div class="flex shrink-0 justify-center">
|
||||
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
|
||||
{#each models as model, modelIdx}
|
||||
<Tooltip
|
||||
content={(models[modelIdx]?.info?.meta?.tags ?? [])
|
||||
.map((tag) => tag.name.toUpperCase())
|
||||
.join(', ')}
|
||||
placement="top"
|
||||
>
|
||||
<button
|
||||
aria-hidden={models.length <= 1}
|
||||
aria-label={$i18n.t('Get information on {{name}} in the UI', {
|
||||
name: models[modelIdx]?.name
|
||||
})}
|
||||
on:click={() => {
|
||||
selectedModelIdx = modelIdx;
|
||||
}}
|
||||
{#if $selectedFolder}
|
||||
<div class="mb-3 px-4 justify-center w-fit flex relative group">
|
||||
<div class="text-center flex gap-3.5 items-center">
|
||||
<div class=" rounded-full bg-gray-50 dark:bg-gray-800 p-3 w-fit">
|
||||
<Folder className="size-4.5" strokeWidth="2" />
|
||||
</div>
|
||||
|
||||
<div class="text-3xl">
|
||||
{$selectedFolder?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute -right-3">
|
||||
<button
|
||||
class="group-hover:visible invisible rounded-md"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedFolder.set(null);
|
||||
}}
|
||||
>
|
||||
<XMark className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5 max-w-xl">
|
||||
<div class="flex shrink-0 justify-center">
|
||||
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
|
||||
{#each models as model, modelIdx}
|
||||
<Tooltip
|
||||
content={(models[modelIdx]?.info?.meta?.tags ?? [])
|
||||
.map((tag) => tag.name.toUpperCase())
|
||||
.join(', ')}
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src={model?.info?.meta?.profile_image_url ??
|
||||
($i18n.language === 'dg-DG'
|
||||
? `${WEBUI_BASE_URL}/doge.png`
|
||||
: `${WEBUI_BASE_URL}/static/favicon.png`)}
|
||||
class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none"
|
||||
aria-hidden="true"
|
||||
draggable="false"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
aria-hidden={models.length <= 1}
|
||||
aria-label={$i18n.t('Get information on {{name}} in the UI', {
|
||||
name: models[modelIdx]?.name
|
||||
})}
|
||||
on:click={() => {
|
||||
selectedModelIdx = modelIdx;
|
||||
}}
|
||||
>
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src={model?.info?.meta?.profile_image_url ??
|
||||
($i18n.language === 'dg-DG'
|
||||
? `${WEBUI_BASE_URL}/doge.png`
|
||||
: `${WEBUI_BASE_URL}/static/favicon.png`)}
|
||||
class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none"
|
||||
aria-hidden="true"
|
||||
draggable="false"
|
||||
/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" text-3xl @sm:text-3xl line-clamp-1 flex items-center"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
{#if models[selectedModelIdx]?.name}
|
||||
<Tooltip
|
||||
content={models[selectedModelIdx]?.name}
|
||||
placement="top"
|
||||
className=" flex items-center "
|
||||
>
|
||||
<span class="line-clamp-1">
|
||||
{models[selectedModelIdx]?.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{:else}
|
||||
{$i18n.t('Hello, {{name}}', { name: $user?.name })}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" text-3xl @sm:text-3xl line-clamp-1 flex items-center"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
{#if models[selectedModelIdx]?.name}
|
||||
<Tooltip
|
||||
content={models[selectedModelIdx]?.name}
|
||||
placement="top"
|
||||
className=" flex items-center "
|
||||
>
|
||||
<span class="line-clamp-1">
|
||||
{models[selectedModelIdx]?.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
{$i18n.t('Hello, {{name}}', { name: $user?.name })}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-1 mb-2">
|
||||
<div in:fade={{ duration: 100, delay: 50 }}>
|
||||
{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
|
||||
<Tooltip
|
||||
className=" w-fit"
|
||||
content={marked.parse(
|
||||
sanitizeResponseContent(
|
||||
models[selectedModelIdx]?.info?.meta?.description ?? ''
|
||||
).replaceAll('\n', '<br>')
|
||||
)}
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="mt-0.5 px-2 text-sm font-normal text-gray-500 dark:text-gray-400 line-clamp-2 max-w-xl markdown"
|
||||
>
|
||||
{@html marked.parse(
|
||||
<div class="flex mt-1 mb-2">
|
||||
<div in:fade={{ duration: 100, delay: 50 }}>
|
||||
{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
|
||||
<Tooltip
|
||||
className=" w-fit"
|
||||
content={marked.parse(
|
||||
sanitizeResponseContent(
|
||||
models[selectedModelIdx]?.info?.meta?.description ?? ''
|
||||
).replaceAll('\n', '<br>')
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="mt-0.5 px-2 text-sm font-normal text-gray-500 dark:text-gray-400 line-clamp-2 max-w-xl markdown"
|
||||
>
|
||||
{@html marked.parse(
|
||||
sanitizeResponseContent(
|
||||
models[selectedModelIdx]?.info?.meta?.description ?? ''
|
||||
).replaceAll('\n', '<br>')
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if models[selectedModelIdx]?.info?.meta?.user}
|
||||
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
|
||||
By
|
||||
{#if models[selectedModelIdx]?.info?.meta?.user.community}
|
||||
<a
|
||||
href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user
|
||||
.username}"
|
||||
>{models[selectedModelIdx]?.info?.meta?.user.name
|
||||
? models[selectedModelIdx]?.info?.meta?.user.name
|
||||
: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
|
||||
>
|
||||
{:else}
|
||||
{models[selectedModelIdx]?.info?.meta?.user.name}
|
||||
{/if}
|
||||
</div>
|
||||
{#if models[selectedModelIdx]?.info?.meta?.user}
|
||||
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
|
||||
By
|
||||
{#if models[selectedModelIdx]?.info?.meta?.user.community}
|
||||
<a
|
||||
href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user
|
||||
.username}"
|
||||
>{models[selectedModelIdx]?.info?.meta?.user.name
|
||||
? models[selectedModelIdx]?.info?.meta?.user.name
|
||||
: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
|
||||
>
|
||||
{:else}
|
||||
{models[selectedModelIdx]?.info?.meta?.user.name}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text-base font-normal @md:max-w-3xl w-full py-3 {atSelectedModel ? 'mt-2' : ''}">
|
||||
<MessageInput
|
||||
|
||||
Reference in New Issue
Block a user