Hugging Face's logo

Spaces:
coolmanx
/
open-webui
Running

App Files
open-webui
File size: 2,092 Bytes 
76aa260
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<script lang="ts">

	import { getContext, createEventDispatcher } from 'svelte';



	const dispatch = createEventDispatcher();

	$: dispatch('change', open);



	import { slide } from 'svelte/transition';

	import { quintOut } from 'svelte/easing';



	import ChevronUp from '../icons/ChevronUp.svelte';

	import ChevronDown from '../icons/ChevronDown.svelte';



	export let open = false;

	export let className = '';

	export let buttonClassName =

		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';

	export let title = null;



	export let grow = false;



	export let disabled = false;

	export let hide = false;

</script>



<div class={className}>

	{#if title !== null}

		<!-- svelte-ignore a11y-no-static-element-interactions -->

		<!-- svelte-ignore a11y-click-events-have-key-events -->

		<div

			class="{buttonClassName} cursor-pointer"

			on:pointerup={() => {

				if (!disabled) {

					open = !open;

				}

			}}

		>

			<div class=" w-full font-medium flex items-center justify-between gap-2">

				<div class="">

					{title}

				</div>



				<div>

					{#if open}

						<ChevronUp strokeWidth="3.5" className="size-3.5" />

					{:else}

						<ChevronDown strokeWidth="3.5" className="size-3.5" />

					{/if}

				</div>

			</div>

		</div>

	{:else}

		<!-- svelte-ignore a11y-no-static-element-interactions -->

		<!-- svelte-ignore a11y-click-events-have-key-events -->

		<div

			class="{buttonClassName} cursor-pointer"

			on:pointerup={() => {

				if (!disabled) {

					open = !open;

				}

			}}

		>

			<div>

				<slot />



				{#if grow}

					{#if open && !hide}

						<div

							transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}

							on:pointerup={(e) => {

								e.stopPropagation();

							}}

						>

							<slot name="content" />

						</div>

					{/if}

				{/if}

			</div>

		</div>

	{/if}



	{#if !grow}

		{#if open && !hide}

			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>

				<slot name="content" />

			</div>

		{/if}

	{/if}

</div>