mirror of
https://github.com/open-webui/open-webui.git
synced 2026-09-20 00:11:27 +00:00
4b160d88a2
When the "Valves" modal is opened from the "Integrations" menu, a click outside the modal would incorrectly close the integrations menu first. This was because the dropdown's outside click handler was still active. This commit fixes the issue by introducing a `closeOnOutsideClick` prop to the `Dropdown` component. This prop is controlled by the `MessageInput` component, which now disables the outside click handler on the integrations menu when the valves modal is open, and re-enables it when the modal is closed.
51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { DropdownMenu } from 'bits-ui';
|
|
import { createEventDispatcher, getContext } from 'svelte';
|
|
|
|
const i18n = getContext('i18n');
|
|
|
|
import { flyAndScale } from '$lib/utils/transitions';
|
|
|
|
export let show = false;
|
|
export let side = 'bottom';
|
|
export let align = 'start';
|
|
export let closeOnOutsideClick = true;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
</script>
|
|
|
|
<DropdownMenu.Root
|
|
bind:open={show}
|
|
closeFocus={false}
|
|
{closeOnOutsideClick}
|
|
onOpenChange={(state) => {
|
|
dispatch('change', state);
|
|
}}
|
|
typeahead={false}
|
|
>
|
|
<DropdownMenu.Trigger>
|
|
<slot />
|
|
</DropdownMenu.Trigger>
|
|
|
|
<slot name="content">
|
|
<DropdownMenu.Content
|
|
class="w-full max-w-[130px] rounded-lg p-1 border border-gray-900 z-50 bg-gray-850 text-white"
|
|
sideOffset={8}
|
|
{side}
|
|
{align}
|
|
transition={flyAndScale}
|
|
>
|
|
<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm font-medium">
|
|
<div class="flex items-center">{$i18n.t('Profile')}</div>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm font-medium">
|
|
<div class="flex items-center">{$i18n.t('Profile')}</div>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm font-medium">
|
|
<div class="flex items-center">{$i18n.t('Profile')}</div>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</slot>
|
|
</DropdownMenu.Root>
|