ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 04:15:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

enh: enter into folder

Browse source 
Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek 2025-07-13 02:40:48 +04:00
parent 6176dba3c9
commit 5abc03f4dd
6 changed files with 172 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/chat/Chat.svelte
View file

@ -36,7 +36,8 @@
chatTitle, chatTitle,
showArtifacts, showArtifacts,
tools, tools,
toolServers toolServers,
selectedFolder
} from '$lib/stores'; } from '$lib/stores';
import { import {
convertMessagesToHistory, convertMessagesToHistory,

207
src/lib/components/chat/Placeholder.svelte
View file

@ -7,7 +7,13 @@
const dispatch = createEventDispatcher(); 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 { sanitizeResponseContent, extractCurlyBraceWords } from '$lib/utils';
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
@ -15,6 +21,9 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import EyeSlash from '$lib/components/icons/EyeSlash.svelte'; import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
import MessageInput from './MessageInput.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'); 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" 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="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"> {#if $selectedFolder}
<div class="flex shrink-0 justify-center"> <div class="mb-3 px-4 justify-center w-fit flex relative group">
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}> <div class="text-center flex gap-3.5 items-center">
{#each models as model, modelIdx} <div class=" rounded-full bg-gray-50 dark:bg-gray-800 p-3 w-fit">
<Tooltip <Folder className="size-4.5" strokeWidth="2" />
content={(models[modelIdx]?.info?.meta?.tags ?? []) </div>
.map((tag) => tag.name.toUpperCase())
.join(', ')} <div class="text-3xl">
placement="top" {$selectedFolder?.name}
> </div>
<button </div>
aria-hidden={models.length <= 1}
aria-label={$i18n.t('Get information on {{name}} in the UI', { <div class="absolute -right-3">
name: models[modelIdx]?.name <button
})} class="group-hover:visible invisible rounded-md"
on:click={() => { type="button"
selectedModelIdx = modelIdx; 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 <button
crossorigin="anonymous" aria-hidden={models.length <= 1}
src={model?.info?.meta?.profile_image_url ?? aria-label={$i18n.t('Get information on {{name}} in the UI', {
($i18n.language === 'dg-DG' name: models[modelIdx]?.name
? `${WEBUI_BASE_URL}/doge.png` })}
: `${WEBUI_BASE_URL}/static/favicon.png`)} on:click={() => {
class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none" selectedModelIdx = modelIdx;
aria-hidden="true" }}
draggable="false" >
/> <img
</button> 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> </Tooltip>
{/each} {:else}
{$i18n.t('Hello, {{name}}', { name: $user?.name })}
{/if}
</div> </div>
</div> </div>
<div <div class="flex mt-1 mb-2">
class=" text-3xl @sm:text-3xl line-clamp-1 flex items-center" <div in:fade={{ duration: 100, delay: 50 }}>
in:fade={{ duration: 100 }} {#if models[selectedModelIdx]?.info?.meta?.description ?? null}
> <Tooltip
{#if models[selectedModelIdx]?.name} className=" w-fit"
<Tooltip content={marked.parse(
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(
sanitizeResponseContent( sanitizeResponseContent(
models[selectedModelIdx]?.info?.meta?.description ?? '' models[selectedModelIdx]?.info?.meta?.description ?? ''
).replaceAll('\n', '<br>') ).replaceAll('\n', '<br>')
)} )}
</div> placement="top"
</Tooltip> >
<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} {#if models[selectedModelIdx]?.info?.meta?.user}
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500"> <div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
By By
{#if models[selectedModelIdx]?.info?.meta?.user.community} {#if models[selectedModelIdx]?.info?.meta?.user.community}
<a <a
href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user
.username}" .username}"
>{models[selectedModelIdx]?.info?.meta?.user.name >{models[selectedModelIdx]?.info?.meta?.user.name
? models[selectedModelIdx]?.info?.meta?.user.name ? models[selectedModelIdx]?.info?.meta?.user.name
: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a : `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
> >
{:else} {:else}
{models[selectedModelIdx]?.info?.meta?.user.name} {models[selectedModelIdx]?.info?.meta?.user.name}
{/if} {/if}
</div> </div>
{/if}
{/if} {/if}
{/if} </div>
</div> </div>
</div> {/if}
<div class="text-base font-normal @md:max-w-3xl w-full py-3 {atSelectedModel ? 'mt-2' : ''}"> <div class="text-base font-normal @md:max-w-3xl w-full py-3 {atSelectedModel ? 'mt-2' : ''}">
<MessageInput <MessageInput

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

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
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="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
/>
</svg>

4
src/lib/components/layout/Sidebar.svelte
View file

@ -22,7 +22,8 @@
socket, socket,
config, config,
isApp, isApp,
models models,
selectedFolder
} from '$lib/stores'; } from '$lib/stores';
import { onMount, getContext, tick, onDestroy } from 'svelte'; import { onMount, getContext, tick, onDestroy } from 'svelte';
@ -494,6 +495,7 @@
draggable="false" draggable="false"
on:click={async () => { on:click={async () => {
selectedChatId = null; selectedChatId = null;
selectedFolder.set(null);
if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) { if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) {
await temporaryChatEnabled.set(true); await temporaryChatEnabled.set(true);

12
src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
View file

@ -12,6 +12,10 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Download from '$lib/components/icons/Download.svelte'; import Download from '$lib/components/icons/Download.svelte';
export let onEdit = () => {};
export let onExport = () => {};
export let onDelete = () => {};
let show = false; let show = false;
</script> </script>
@ -38,17 +42,17 @@
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => { on:click={() => {
dispatch('rename'); onEdit();
}} }}
> >
<Pencil strokeWidth="2" /> <Pencil strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Rename')}</div> <div class="flex items-center">{$i18n.t('Edit')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => { on:click={() => {
dispatch('export'); onExport();
}} }}
> >
<Download strokeWidth="2" /> <Download strokeWidth="2" />
@ -59,7 +63,7 @@
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => { on:click={() => {
dispatch('delete'); onDelete();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin strokeWidth="2" />

23
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View file

@ -31,6 +31,7 @@
import ChatItem from './ChatItem.svelte'; import ChatItem from './ChatItem.svelte';
import FolderMenu from './Folders/FolderMenu.svelte'; import FolderMenu from './Folders/FolderMenu.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import { selectedFolder } from '$lib/stores';
export let open = false; export let open = false;
@ -38,6 +39,8 @@
export let folderId; export let folderId;
export let shiftKey = false; export let shiftKey = false;
export let onCreateChat = (e) => {};
export let className = ''; export let className = '';
export let parentDragged = false; export let parentDragged = false;
@ -288,6 +291,11 @@
if (res) { if (res) {
folders[folderId].name = name; folders[folderId].name = name;
toast.success($i18n.t('Folder name updated successfully')); toast.success($i18n.t('Folder name updated successfully'));
if ($selectedFolder?.id === folderId) {
selectedFolder.set(folders[folderId]);
}
dispatch('update'); dispatch('update');
} }
}; };
@ -394,10 +402,16 @@
<div class="w-full group"> <div class="w-full group">
<button <button
id="folder-{folderId}-button" id="folder-{folderId}-button"
class="relative w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="relative w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id ===
folderId
? 'bg-gray-100 dark:bg-gray-900'
: ''}"
on:dblclick={() => { on:dblclick={() => {
editHandler(); editHandler();
}} }}
on:click={(e) => {
selectedFolder.set(folders[folderId]);
}}
> >
<div class="text-gray-300 dark:text-gray-600"> <div class="text-gray-300 dark:text-gray-600">
{#if open} {#if open}
@ -446,18 +460,19 @@
on:pointerup={(e) => { on:pointerup={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
on:click={(e) => e.stopPropagation()}
> >
<FolderMenu <FolderMenu
on:rename={() => { onEdit={() => {
// Requires a timeout to prevent the click event from closing the dropdown // Requires a timeout to prevent the click event from closing the dropdown
setTimeout(() => { setTimeout(() => {
editHandler(); editHandler();
}, 200); }, 200);
}} }}
on:delete={() => { onDelete={() => {
showDeleteConfirm = true; showDeleteConfirm = true;
}} }}
on:export={() => { onExport={() => {
exportHandler(); exportHandler();
}} }}
> >