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

Merge pull request #17746 from andrewbbaek/dev

Browse source 
chore: add IDs to elements for better maintainability
This commit is contained in:
Tim Jaeryang Baek 2025-09-25 12:07:35 -05:00 committed by GitHub
commit 4aa5574ba7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/channel/MessageInput.svelte
View file

@ -769,6 +769,7 @@
}} }}
> >
<div <div
id="message-input-container"
class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border border-gray-50 dark:border-gray-850 hover:border-gray-100 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800 transition px-1 bg-white/90 dark:bg-gray-400/5 dark:text-gray-100" class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border border-gray-50 dark:border-gray-850 hover:border-gray-100 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800 transition px-1 bg-white/90 dark:bg-gray-400/5 dark:text-gray-100"
dir={$settings?.chatDirection ?? 'auto'} dir={$settings?.chatDirection ?? 'auto'}
> >
@ -941,6 +942,7 @@
}} }}
> >
<button <button
id="input-menu-button"
class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden" class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden"
type="button" type="button"
aria-label="More" aria-label="More"

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

@ -1030,6 +1030,7 @@
}} }}
> >
<div <div
id="message-input-container"
class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border {$temporaryChatEnabled class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border {$temporaryChatEnabled
? 'border-dashed border-gray-100 dark:border-gray-800 hover:border-gray-200 focus-within:border-gray-200 hover:dark:border-gray-700 focus-within:dark:border-gray-700' ? 'border-dashed border-gray-100 dark:border-gray-800 hover:border-gray-200 focus-within:border-gray-200 hover:dark:border-gray-700 focus-within:dark:border-gray-700'
: ' border-gray-100 dark:border-gray-850 hover:border-gray-200 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800'} transition px-1 bg-white/5 dark:bg-gray-500/5 backdrop-blur-sm dark:text-gray-100" : ' border-gray-100 dark:border-gray-850 hover:border-gray-200 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800'} transition px-1 bg-white/5 dark:bg-gray-500/5 backdrop-blur-sm dark:text-gray-100"
@ -1425,6 +1426,7 @@
}} }}
> >
<div <div
id="input-menu-button"
class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden" class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden"
> >
<PlusAlt className="size-5.5" /> <PlusAlt className="size-5.5" />
@ -1455,6 +1457,7 @@
}} }}
> >
<div <div
id="integration-menu-button"
class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden" class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden"
> >
<Component className="size-4.5" strokeWidth="1.5" /> <Component className="size-4.5" strokeWidth="1.5" />

1
src/lib/components/common/Folder.svelte
View file

@ -139,6 +139,7 @@
> >
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
id="sidebar-folder-button"
class=" w-full group rounded-xl relative flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 transition {buttonClassName}" class=" w-full group rounded-xl relative flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 transition {buttonClassName}"
> >
<button class="w-full py-1.5 pl-2 flex items-center gap-1.5 text-xs font-medium"> <button class="w-full py-1.5 pl-2 flex items-center gap-1.5 text-xs font-medium">

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

@ -749,7 +749,7 @@
<div <div
class="{scrollTop > 0 class="{scrollTop > 0
? 'visible' ? 'visible'
: 'invisible'} bg-linear-to-b from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mb-6" : 'invisible'} sidebar-bg-gradient-to-b bg-linear-to-b from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mb-6"
></div> ></div>
</div> </div>
@ -785,6 +785,7 @@
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<button <button
id="sidebar-search-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
on:click={() => { on:click={() => {
showSearch.set(true); showSearch.set(true);
@ -805,6 +806,7 @@
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))} {#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a <a
id="sidebar-notes-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/notes" href="/notes"
on:click={itemClickHandler} on:click={itemClickHandler}
@ -825,6 +827,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools} {#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a <a
id="sidebar-workspace-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/workspace" href="/workspace"
on:click={itemClickHandler} on:click={itemClickHandler}
@ -1176,7 +1179,7 @@
<div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 -mt-3 sidebar"> <div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 -mt-3 sidebar">
<div <div
class=" bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6" class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
></div> ></div>
<div class="flex flex-col font-primary"> <div class="flex flex-col font-primary">
{#if $user !== undefined && $user !== null} {#if $user !== undefined && $user !== null}

3
src/lib/components/layout/Sidebar/ChannelItem.svelte
View file

@ -44,10 +44,11 @@
/> />
<div <div
id="sidebar-channel-item"
bind:this={itemElement} bind:this={itemElement}
class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
.url.pathname === `/channels/${channel.id}` .url.pathname === `/channels/${channel.id}`
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900 selected'
: ''} px-2.5 py-1" : ''} px-2.5 py-1"
> >
<a <a

16
src/lib/components/layout/Sidebar/ChatItem.svelte
View file

@ -336,17 +336,19 @@
{/if} {/if}
<div <div
id="sidebar-chat-group"
bind:this={itemElement} bind:this={itemElement}
class=" w-full {className} relative group" class=" w-full {className} relative group"
draggable={draggable && !confirmEdit} draggable={draggable && !confirmEdit}
> >
{#if confirmEdit} {#if confirmEdit}
<div <div
id="sidebar-chat-item"
class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId || class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
confirmEdit confirmEdit
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900 selected'
: selected : selected
? 'bg-gray-100 dark:bg-gray-950' ? 'bg-gray-100 dark:bg-gray-950 selected'
: 'group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis relative {generating : 'group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis relative {generating
? 'cursor-not-allowed' ? 'cursor-not-allowed'
: ''}" : ''}"
@ -394,11 +396,12 @@
</div> </div>
{:else} {:else}
<a <a
id="sidebar-chat-item"
class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId || class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
confirmEdit confirmEdit
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900 selected'
: selected : selected
? 'bg-gray-100 dark:bg-gray-950' ? 'bg-gray-100 dark:bg-gray-950 selected'
: ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis" : ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis"
href="/c/{id}" href="/c/{id}"
on:click={() => { on:click={() => {
@ -438,11 +441,12 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
id="sidebar-chat-item-menu"
class=" class="
{id === $chatId || confirmEdit {id === $chatId || confirmEdit
? 'from-gray-100 dark:from-gray-900' ? 'from-gray-100 dark:from-gray-900 selected'
: selected : selected
? 'from-gray-100 dark:from-gray-950' ? 'from-gray-100 dark:from-gray-950 selected'
: 'invisible group-hover:visible from-gray-100 dark:from-gray-950'} : 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
absolute {className === 'pr-2' absolute {className === 'pr-2'
? 'right-[8px]' ? 'right-[8px]'

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

@ -431,7 +431,7 @@
id="folder-{folderId}-button" id="folder-{folderId}-button"
class="relative w-full py-1 px-1.5 rounded-xl flex items-center gap-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id === class="relative w-full py-1 px-1.5 rounded-xl flex items-center gap-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id ===
folderId folderId
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900 selected'
: ''}" : ''}"
on:dblclick={(e) => { on:dblclick={(e) => {
if (clickTimer) { if (clickTimer) {