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

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-07-05 21:37:29 -07:00
parent ca3f8e6cb5
commit 73899e1c0d
2 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
View File

@ -11,7 +11,6 @@
<Collapsible bind:open={state} className="w-full space-y-1"> <Collapsible bind:open={state} className="w-full space-y-1">
<div <div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition" class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
slot="head"
> >
<slot /> <slot />

38
src/lib/components/common/Collapsible.svelte
View File

@ -1,38 +1,18 @@
<script lang="ts"> <script lang="ts">
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
export let open = false; export let open = false;
export let className = ''; export let className = '';
// Manage the max-height of the collapsible content for snappy transitions
let contentElement: HTMLElement;
let maxHeight = '0px'; // Initial max-height
$: if (contentElement?.scrollHeight) {
if (open) {
// Ensure the element is visible before measuring
maxHeight = `${contentElement.scrollHeight}px`;
} else {
maxHeight = '0px';
}
}
</script> </script>
<div class={className}> <div class={className}>
<button on:click={() => (open = !open)}> <button on:click={() => (open = !open)}>
<slot name="head" /> <slot />
</button> </button>
<div
bind:this={contentElement}
class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`}
style="max-height: {maxHeight};"
>
<slot name="content" />
</div>
</div>
<style> {#if open}
.collapsible-content { <div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
overflow: hidden; <slot name="content" />
transition: all 0.3s ease-out; </div>
max-height: 0; {/if}
} </div>
</style>