OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-24 06:44:24 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: fixed new Collapsible Component to allow passed in classes

Browse Source 
chore: format
This commit is contained in:
rdavis 2024-07-04 14:02:26 +00:00
parent 2389c36a70
commit d5c0876a0b
2 changed files with 92 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,13 +4,11 @@
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte'; import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte'; import Collapsible from '$lib/components/common/Collapsible.svelte';
export let status = { urls: [], query: '' }; export let status = { urls: [], query: '' };
let state = false; let state = false;
</script> </script>
<div class="w-full space-y-1"> <Collapsible bind:open={state} className="w-full space-y-1">
<Collapsible bind:open={state}>
<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="head"
@ -23,10 +21,7 @@
<ChevronDown strokeWidth="3.5" className="size-3.5 " /> <ChevronDown strokeWidth="3.5" className="size-3.5 " />
{/if} {/if}
</div> </div>
<div <div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
slot="content"
>
{#if status?.query} {#if status?.query}
<a <a
href="https://www.google.com/search?q={status.query}" href="https://www.google.com/search?q={status.query}"
@ -93,5 +88,4 @@
</a> </a>
{/each} {/each}
</div> </div>
</Collapsible> </Collapsible>
</div>

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

@ -2,7 +2,7 @@
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
export let open = false; export let open = false;
export let className = '';
// Manage the max-height of the collapsible content for snappy transitions // Manage the max-height of the collapsible content for snappy transitions
let contentElement: HTMLElement; let contentElement: HTMLElement;
@ -16,9 +16,17 @@
maxHeight = '0px'; maxHeight = '0px';
} }
}); });
</script> </script>
<div class={className}>
<button on:click={() => (open = !open)}>
<slot name="head" />
</button>
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
<slot name="content" />
</div>
</div>
<style> <style>
.collapsible-content { .collapsible-content {
overflow: hidden; overflow: hidden;
@ -26,12 +34,3 @@
max-height: 0; max-height: 0;
} }
</style> </style>
<div>
<button on:click={() => open = !open}>
<slot name="head"></slot>
</button>
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
<slot name="content"></slot>
</div>
</div>