UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-19 09:16:44 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Updated to use Dropdown menu which is being used elsewhere in app

Browse Source
This commit is contained in:
Zohaib Rauf 2024-09-09 21:33:48 -07:00
parent f88a86f9b0
commit b33ab6c5fd
1 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/chat/MessageInput/CallOverlay.svelte
View File

@ -1,6 +1,9 @@
<script lang="ts"> <script lang="ts">
import { config, models, settings, showCallOverlay } from '$lib/stores'; import { config, models, settings, showCallOverlay } from '$lib/stores';
import { onMount, tick, getContext, onDestroy, createEventDispatcher } from 'svelte'; import { onMount, tick, getContext, onDestroy, createEventDispatcher } from 'svelte';
import { DropdownMenu } from 'bits-ui';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import { flyAndScale } from '$lib/utils/transitions';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -55,7 +58,7 @@
let speechRate = 1; let speechRate = 1;
let showSpeedMenu = false; let showSpeedMenu = false;
const speedOptions = [0.5, 1, 1.5, 2, 2.5, 3]; const speedOptions = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5];
const toggleSpeedMenu = () => { const toggleSpeedMenu = () => {
showSpeedMenu = !showSpeedMenu; showSpeedMenu = !showSpeedMenu;
@ -946,31 +949,38 @@
</div> </div>
<div class="relative"> <div class="relative">
<button on:click={toggleSpeedMenu} class="p-2 rounded-full bg-gray-100 dark:bg-gray-800"> <Dropdown bind:show={showSpeedMenu}>
<button class="p-2 rounded-full bg-gray-50 dark:bg-gray-900">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<polygon points="8,5 8,19 19,12" fill="currentColor"/> <polygon points="8,5 8,19 19,12" fill="currentColor"/>
<path d="M12 2A10 10 0 0 0 12 22" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2,2"/> <path d="M12 2A10 10 0 0 0 12 22" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2,2"/>
<path d="M12 2A10 10 0 0 1 12 22" fill="none" stroke="currentColor" stroke-width="2"/> <path d="M12 2A10 10 0 0 1 12 22" fill="none" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
</button> </button>
{#if showSpeedMenu}
<div <div slot="content">
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg" <DropdownMenu.Content
on:click|self={() => showSpeedMenu = false} class="w-full max-w-[180px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-sm"
role="menu" sideOffset={6}
tabindex="0" side="top"
align="start"
transition={flyAndScale}
> >
{#each speedOptions as speed} {#each speedOptions as speed}
<button <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md {speechRate === speed ? 'bg-gray-200 dark:bg-gray-600' : ''}"
on:click={() => setSpeedRate(speed)} on:click={() => setSpeedRate(speed)}
class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 {speechRate === speed ? 'bg-gray-200 dark:bg-gray-600' : ''}"
role="menuitem"
> >
<div class="flex items-center">
<div class="line-clamp-1">
{speed}x {speed}x
</button>
{/each}
</div> </div>
{/if} </div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</div>
</Dropdown>
</div> </div>
<div> <div>