Hugging Face's logo

Spaces:
coolmanx
/
open-webui
Running

App Files
open-webui
File size: 3,807 Bytes 
bc27e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
128
129
130
 
<script lang="ts">

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

	import { onMount, createEventDispatcher } from 'svelte';

	import { fade } from 'svelte/transition';

	import DOMPurify from 'dompurify';

	import { marked } from 'marked';



	const dispatch = createEventDispatcher();



	export let banner: Banner = {

		id: '',

		type: 'info',

		title: '',

		content: '',

		url: '',

		dismissable: true,

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

	};

	export let className = 'mx-4';



	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="{className} top-0 left-0 right-0 p-2 px-3 flex justify-center items-center relative rounded-xl border border-gray-100 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-sm 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">

					{@html marked.parse(DOMPurify.sanitize(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}