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

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-09-05 19:11:27 +02:00
parent 0c1fab09ff
commit c9107fa87f
3 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/lib/components/chat/ChatControls.svelte
View File

@ -44,65 +44,60 @@
}); });
</script> </script>
{#if largeScreen} {#if !largeScreen}
{#if show} {#if show}
<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none"> <Drawer bind:show>
<div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}> <div class=" px-6 py-4 h-full">
<div <Controls
class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden" on:close={() => {
> show = false;
{#if $showCallOverlay} }}
<CallOverlay {models}
bind:files bind:chatFiles
{submitPrompt} bind:params
{stopResponse} />
{modelId} </div>
{chatId} </Drawer>
{eventTarget} {/if}
/>
{:else} {#if $showCallOverlay}
<Controls <div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
on:close={() => { <div
show = false; class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
}} >
{models} <CallOverlay
bind:chatFiles bind:files
bind:params {submitPrompt}
/> {stopResponse}
{/if} {modelId}
</div> {chatId}
{eventTarget}
on:close={() => {
show = false;
}}
/>
</div> </div>
</div> </div>
{/if} {/if}
{:else if $showCallOverlay} {:else if show}
<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden"> <div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
<div <div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center" <div
> class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
<CallOverlay >
bind:files {#if $showCallOverlay}
{submitPrompt} <CallOverlay bind:files {submitPrompt} {stopResponse} {modelId} {chatId} {eventTarget} />
{stopResponse} {:else}
{modelId} <Controls
{chatId} on:close={() => {
{eventTarget} show = false;
on:close={() => { }}
show = false; {models}
}} bind:chatFiles
/> bind:params
/>
{/if}
</div>
</div> </div>
</div> </div>
{:else if show}
<Drawer bind:show>
<div class=" px-6 py-4 h-full">
<Controls
on:close={() => {
show = false;
}}
{models}
bind:chatFiles
bind:params
/>
</div>
</Drawer>
{/if} {/if}

6
src/lib/components/common/Drawer.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { onDestroy, onMount, createEventDispatcher } from 'svelte'; import { onDestroy, onMount, createEventDispatcher } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions'; import { flyAndScale } from '$lib/utils/transitions';
import { fade, fly, slide } from 'svelte/transition';
export let show = true; export let show = false;
export let size = 'md'; export let size = 'md';
let modalElement = null; let modalElement = null;
@ -56,10 +57,11 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this={modalElement} bind:this={modalElement}
class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain" class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
in:flyAndScale in:fly={{ y: 100, duration: 100 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;
}} }}

4
src/lib/components/layout/Sidebar.svelte
View File

@ -261,7 +261,7 @@
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px]' ? 'md:relative w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl : '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0
" "
data-state={$showSidebar} data-state={$showSidebar}
> >
@ -273,7 +273,7 @@
<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400"> <div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
<a <a
id="sidebar-new-chat-button" id="sidebar-new-chat-button"
class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="flex flex-1 justify-between rounded-xl px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/" href="/"
draggable="false" draggable="false"
on:click={async () => { on:click={async () => {