scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-18 04:43:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2026-10-16 14:18:22 +04:00
parent df5fc0c14f
commit 59d6f5e43c
2 changed files with 61 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -241,12 +241,7 @@
<Visibility
state={isPrivate ? 'private' : 'public'}
onChange={(value: string) => {
if (value === 'private') {
isPrivate = true;
} else {
isPrivate = false;
}
console.log(value, isPrivate);
isPrivate = value === 'private';
}}
/>
{/if}

106
src/lib/components/workspace/common/Visibility.svelte
View file

@ -1,55 +1,69 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
import { getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import Hashtag from '$lib/components/icons/Hashtag.svelte';
import Lock from '$lib/components/icons/Lock.svelte';
import LockClosed from '$lib/components/icons/LockClosed.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import Check from '$lib/components/icons/Check.svelte';
const i18n = getContext('i18n');
const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
export let onChange: Function = () => {};
export let onChange: (value: string) => void = () => {};
export let state = 'private';
$: options = [
{ value: 'private', label: $i18n.t('Private') },
{ value: 'public', label: $i18n.t('Public') }
];
</script>
<div class=" rounded-lg flex flex-col gap-2">
<div class="">
<div class=" text-xs font-normal mb-2.5 text-gray-500">{$i18n.t('Visibility')}</div>
<div class="flex gap-2.5 items-center mb-1">
<div>
<div class=" p-2 bg-black/5 dark:bg-white/5 rounded-full">
{#if state === 'private'}
<Lock className="w-5 h-5" strokeWidth="1.8" />
{:else}
<Hashtag className="w-5 h-5" strokeWidth="1.8" />
{/if}
</div>
</div>
<div>
<select
id="models"
class="outline-hidden bg-transparent text-sm font-normal block w-fit pr-10 max-w-full placeholder-gray-400"
value={state === 'private' ? 'private' : 'public'}
on:change={(e) => {
if (e.target.value === 'public') {
state = 'public';
} else {
state = 'private';
}
onChange(state);
}}
>
<option class=" text-gray-700" value="public" selected>{$i18n.t('Public')}</option>
<option class=" text-gray-700" value="private" selected>{$i18n.t('Private')}</option>
</select>
<div class=" text-xs text-gray-400 font-normal">
{#if state === 'private'}
{$i18n.t('Only invited users can access')}
{:else}
{$i18n.t('Visible to all users')}
{/if}
</div>
</div>
<div class="-mx-1 rounded-xl bg-gray-50/60 px-3 py-2 dark:bg-white/[0.03]">
<Dropdown closeOnSelect>
<button
type="button"
aria-label={$i18n.t('Visibility')}
class="flex h-6 items-center gap-2 rounded-md text-[0.8125rem] font-medium text-gray-800 transition hover:text-gray-950 dark:text-gray-200 dark:hover:text-white"
>
{#if state === 'private'}
<LockClosed className="size-3.5 text-gray-500 dark:text-gray-400" />
{:else}
<Hashtag className="size-3.5 text-gray-500 dark:text-gray-400" />
{/if}
<span>{state === 'private' ? $i18n.t('Private') : $i18n.t('Public')}</span>
<ChevronDown className="size-3 text-gray-400 dark:text-gray-500" strokeWidth="2" />
</button>
<div slot="content">
<DropdownMenu className="min-w-40">
{#each options as option}
<button
type="button"
role="menuitemradio"
aria-checked={state === option.value}
on:click={() => {
if (state !== option.value) {
state = option.value;
onChange(state);
}
}}
>
{#if option.value === 'private'}
<LockClosed className="size-3.5" />
{:else}
<Hashtag className="size-3.5" />
{/if}
<span class="flex-1 text-left">{option.label}</span>
{#if state === option.value}<Check className="size-3.5 text-blue-500" />{/if}
</button>
{/each}
</DropdownMenu>
</div>
</div>
</Dropdown>
<p class="mt-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400">
{#if state === 'private'}
{$i18n.t('Only invited users can access')}
{:else}
{$i18n.t('Visible to all users')}
{/if}
</p>
</div>