Hugging Face's logo

Spaces:
coolmanx
/
open-webui
Running

App Files
open-webui
File size: 3,652 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
<script lang="ts">

	import type { Banner } from '$lib/types';

	import { onMount, createEventDispatcher } from 'svelte';

	import { fade } from 'svelte/transition';



	const dispatch = createEventDispatcher();



	export let banner: Banner = {

		id: '',

		type: 'info',

		title: '',

		content: '',

		url: '',

		dismissable: true,

		timestamp: Math.floor(Date.now() / 1000)

	};



	export let dismissed = false;



	let mounted = false;



	const classNames: Record<string, string> = {

		info: 'bg-blue-500/20 text-blue-700 dark:text-blue-200 ',

		success: 'bg-green-500/20 text-green-700 dark:text-green-200',

		warning: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200',

		error: 'bg-red-500/20 text-red-700 dark:text-red-200'

	};



	const dismiss = (id) => {

		dismissed = true;

		dispatch('dismiss', id);

	};



	onMount(() => {

		mounted = true;

	});

</script>



{#if !dismissed}

	{#if mounted}

		<div

			class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-50 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-30"

			transition:fade={{ delay: 100, duration: 300 }}

		>

			<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">

				<div class="flex justify-between self-start">

					<div

						class=" text-xs font-bold {classNames[banner.type] ??

							classNames['info']}  w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"

					>

						{banner.type}

					</div>



					{#if banner.url}

						<div class="flex md:hidden group w-fit md:items-center">

							<a

								class="text-gray-700 dark:text-white text-xs font-semibold underline"

								href="/assets/files/whitepaper.pdf"

								target="_blank">Learn More</a

							>



							<div

								class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white"

							>

								<!--  -->

								<svg

									xmlns="http://www.w3.org/2000/svg"

									viewBox="0 0 16 16"

									fill="currentColor"

									class="w-4 h-4"

								>

									<path

										fill-rule="evenodd"

										d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"

										clip-rule="evenodd"

									/>

								</svg>

							</div>

						</div>

					{/if}

				</div>



				<div class="flex-1 text-xs text-gray-700 dark:text-white">

					{banner.content}

				</div>

			</div>



			{#if banner.url}

				<div class="hidden md:flex group w-fit md:items-center">

					<a

						class="text-gray-700 dark:text-white text-xs font-semibold underline"

						href="/"

						target="_blank">Learn More</a

					>



					<div class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white">

						<!--  -->

						<svg

							xmlns="http://www.w3.org/2000/svg"

							viewBox="0 0 16 16"

							fill="currentColor"

							class="size-4"

						>

							<path

								fill-rule="evenodd"

								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"

								clip-rule="evenodd"

							/>

						</svg>

					</div>

				</div>

			{/if}

			<div class="flex self-start">

				{#if banner.dismissible}

					<button

						on:click={() => {

							dismiss(banner.id);

						}}

						class="  -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white"

						>&times;</button

					>

				{/if}

			</div>

		</div>

	{/if}

{/if}