Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enh: width adjustable chat controls

Browse Source
This commit is contained in:
Timothy J. Baek
2024-09-21 03:33:06 +02:00
parent 657d443a3e
commit 692f04d457
5 changed files with 182 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/ChatControls.svelte
+50 -26
View File
@@ -10,6 +10,9 @@
import CallOverlay from './MessageInput/CallOverlay.svelte';
import Drawer from '../common/Drawer.svelte';
import Overview from './Overview.svelte';
import { Pane, PaneResizer } from 'paneforge';
import EllipsisVertical from '../icons/EllipsisVertical.svelte';
import { get } from 'svelte/store';
export let history;
export let models = [];
@@ -25,7 +28,9 @@
export let files;
export let modelId;
export let pane;
let largeScreen = false;
onMount(() => {
// listen to resize 1024px
const mediaQuery = window.matchMedia('(min-width: 1024px)');
@@ -58,33 +63,33 @@
<SvelteFlowProvider>
{#if !largeScreen}
{#if $showCallOverlay}
<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
<div
class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
>
<CallOverlay
bind:files
{submitPrompt}
{stopResponse}
{modelId}
{chatId}
{eventTarget}
on:close={() => {
showControls.set(false);
}}
/>
</div>
</div>
{:else if $showControls}
{#if $showControls}
<Drawer
show={$showControls}
on:close={() => {
showControls.set(false);
}}
>
<div class=" {$showOverview ? ' h-screen w-screen' : 'px-6 py-4'} h-full">
{#if $showOverview}
<div
class=" {$showCallOverlay || $showOverview ? ' h-screen w-screen' : 'px-6 py-4'} h-full"
>
{#if $showCallOverlay}
<div
class=" h-full max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
>
<CallOverlay
bind:files
{submitPrompt}
{stopResponse}
{modelId}
{chatId}
{eventTarget}
on:close={() => {
showControls.set(false);
}}
/>
</div>
{:else if $showOverview}
<Overview
{history}
on:nodeclick={(e) => {
@@ -107,11 +112,30 @@
</div>
</Drawer>
{/if}
{:else if $showControls}
<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
<div class="pr-4 pt-14 pb-8 w-[26rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
{:else}
<!-- if $showControls -->
<PaneResizer class="relative flex w-2 items-center justify-center bg-background">
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm">
<EllipsisVertical />
</div>
</PaneResizer>
<Pane
bind:pane
defaultSize={$showControls ? localStorage.getItem('chat-controls-size') || 40 : 0}
onResize={(size) => {
if (size === 0) {
showControls.set(false);
} else {
if (!$showControls) {
showControls.set(true);
}
localStorage.setItem('chat-controls-size', size);
}
}}
>
<div class="pr-4 pb-8 flex max-h-full min-h-full" in:slide={{ duration: 200, axis: 'x' }}>
<div
class="w-full h-full {$showOverview && !$showCallOverlay
class="w-full {$showOverview && !$showCallOverlay
? ' '
: 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800'} rounded-lg z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
>
@@ -149,6 +173,6 @@
{/if}
</div>
</div>
</div>
</Pane>
{/if}
</SvelteFlowProvider>