mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refac: include help items in user menu
This commit is contained in:
Timothy Jaeryang Baek
parent
dd8e742c2d
commit
02000b1a6c
@ -57,8 +57,9 @@
|
||||
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">
|
||||
{#if $user !== undefined}
|
||||
<UserMenu
|
||||
className="max-w-[200px]"
|
||||
className="max-w-[240px]"
|
||||
role={$user?.role}
|
||||
help={true}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
|
||||
@ -154,8 +154,9 @@
|
||||
|
||||
{#if $user !== undefined && $user !== null}
|
||||
<UserMenu
|
||||
className="max-w-[200px]"
|
||||
className="max-w-[240px]"
|
||||
role={$user?.role}
|
||||
help={true}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import ShortcutsModal from '../chat/ShortcutsModal.svelte';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import HelpMenu from './Help/HelpMenu.svelte';
|
||||
|
||||
let showShortcuts = false;
|
||||
</script>
|
||||
|
||||
<div class=" hidden lg:flex fixed bottom-0 right-0 px-1 py-1 z-20">
|
||||
<button
|
||||
id="show-shortcuts-button"
|
||||
class="hidden"
|
||||
on:click={() => {
|
||||
showShortcuts = !showShortcuts;
|
||||
}}
|
||||
/>
|
||||
|
||||
<HelpMenu
|
||||
showDocsHandler={() => {
|
||||
showShortcuts = !showShortcuts;
|
||||
}}
|
||||
showShortcutsHandler={() => {
|
||||
showShortcuts = !showShortcuts;
|
||||
}}
|
||||
>
|
||||
<Tooltip content={$i18n.t('Help')} placement="left">
|
||||
<button
|
||||
class="text-gray-600 dark:text-gray-300 bg-gray-300/20 size-4 flex items-center justify-center text-[0.7rem] rounded-full"
|
||||
>
|
||||
?
|
||||
</button>
|
||||
</Tooltip>
|
||||
</HelpMenu>
|
||||
</div>
|
||||
|
||||
<ShortcutsModal bind:show={showShortcuts} />
|
||||
@ -166,8 +166,9 @@
|
||||
|
||||
{#if $user !== undefined}
|
||||
<UserMenu
|
||||
className="max-w-[200px]"
|
||||
className="max-w-[240px]"
|
||||
role={$user?.role}
|
||||
help={true}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
|
||||
@ -9,16 +9,25 @@
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import { userSignOut } from '$lib/apis/auths';
|
||||
import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
|
||||
import Map from '$lib/components/icons/Map.svelte';
|
||||
import Keyboard from '$lib/components/icons/Keyboard.svelte';
|
||||
import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let show = false;
|
||||
export let role = '';
|
||||
export let help = false;
|
||||
export let className = 'max-w-[240px]';
|
||||
|
||||
let showShortcuts = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<ShortcutsModal bind:show={showShortcuts} />
|
||||
|
||||
<DropdownMenu.Root
|
||||
bind:open={show}
|
||||
onOpenChange={(state) => {
|
||||
@ -32,13 +41,13 @@
|
||||
<slot name="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full {className} text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
|
||||
sideOffset={8}
|
||||
sideOffset={4}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={(e) => fade(e, { duration: 100 })}
|
||||
>
|
||||
<button
|
||||
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
on:click={async () => {
|
||||
await showSettings.set(true);
|
||||
show = false;
|
||||
@ -73,7 +82,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
on:click={() => {
|
||||
dispatch('show', 'archived-chat');
|
||||
show = false;
|
||||
@ -91,7 +100,7 @@
|
||||
|
||||
{#if role === 'admin'}
|
||||
<a
|
||||
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
href="/playground"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
@ -121,7 +130,7 @@
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
href="/admin"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
@ -151,10 +160,50 @@
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<hr class=" border-gray-100 dark:border-gray-850 my-1 p-0" />
|
||||
{#if help}
|
||||
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
|
||||
|
||||
<!-- {$i18n.t('Help')} -->
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center py-1.5 px-3 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
id="chat-share-button"
|
||||
on:click={() => {
|
||||
window.open('https://docs.openwebui.com', '_blank');
|
||||
}}
|
||||
>
|
||||
<QuestionMarkCircle className="size-5" />
|
||||
<div class="flex items-center">{$i18n.t('Documentation')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<!-- Releases -->
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center py-1.5 px-3 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
id="menu-item-releases"
|
||||
on:click={() => {
|
||||
window.open('https://github.com/open-webui/open-webui/releases', '_blank');
|
||||
}}
|
||||
>
|
||||
<Map className="size-5" />
|
||||
<div class="flex items-center">{$i18n.t('Releases')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center py-1.5 px-3 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
id="chat-share-button"
|
||||
on:click={() => {
|
||||
showShortcuts = !showShortcuts;
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<Keyboard className="size-5" />
|
||||
<div class="flex items-center">{$i18n.t('Keyboard shortcuts')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
|
||||
|
||||
<button
|
||||
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
on:click={async () => {
|
||||
const res = await userSignOut();
|
||||
user.set(null);
|
||||
@ -187,14 +236,14 @@
|
||||
</button>
|
||||
|
||||
{#if $activeUserIds?.length > 0}
|
||||
<hr class=" border-gray-100 dark:border-gray-850 my-1 p-0" />
|
||||
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
|
||||
|
||||
<Tooltip
|
||||
content={$USAGE_POOL && $USAGE_POOL.length > 0
|
||||
? `${$i18n.t('Running')}: ${$USAGE_POOL.join(', ')} ✨`
|
||||
: ''}
|
||||
>
|
||||
<div class="flex rounded-md py-1.5 px-3 text-xs gap-2.5 items-center">
|
||||
<div class="flex rounded-md py-1 px-3 text-xs gap-2.5 items-center">
|
||||
<div class=" flex items-center">
|
||||
<span class="relative flex size-2">
|
||||
<span
|
||||
@ -216,7 +265,7 @@
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<!-- <DropdownMenu.Item class="flex items-center px-3 py-2 text-sm ">
|
||||
<!-- <DropdownMenu.Item class="flex items-center py-1.5 px-3 text-sm ">
|
||||
<div class="flex items-center">Profile</div>
|
||||
</DropdownMenu.Item> -->
|
||||
</DropdownMenu.Content>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Chat from '$lib/components/chat/Chat.svelte';
|
||||
import Help from '$lib/components/layout/Help.svelte';
|
||||
</script>
|
||||
|
||||
<Help />
|
||||
<Chat />
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Chat from '$lib/components/chat/Chat.svelte';
|
||||
import Help from '$lib/components/layout/Help.svelte';
|
||||
</script>
|
||||
|
||||
<Help />
|
||||
<Chat chatIdProp={$page.params.id} />
|
||||
|
||||
@ -68,8 +68,9 @@
|
||||
<div class=" self-center flex items-center gap-1">
|
||||
{#if $user !== undefined && $user !== null}
|
||||
<UserMenu
|
||||
className="max-w-[200px]"
|
||||
className="max-w-[240px]"
|
||||
role={$user?.role}
|
||||
help={true}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user