|
1 | 1 | <script lang="ts">
|
2 | 2 | import { base } from "$app/paths";
|
3 |
| - import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte"; |
4 |
| - import { usePublicConfig } from "$lib/utils/PublicConfig.svelte"; |
5 |
| - import { SvelteDate } from "svelte/reactivity"; |
6 |
| -
|
7 |
| - const publicConfig = usePublicConfig(); |
8 |
| -
|
9 |
| - let { data } = $props(); |
10 |
| -
|
11 |
| - let nextExportTime = SvelteDate.now() + (data.nextExport || 0) * 1000; |
12 |
| -
|
13 |
| - let seconds = $state(Math.max(0, Math.ceil((nextExportTime - SvelteDate.now()) / 1000))); |
14 |
| -
|
15 |
| - $effect(() => { |
16 |
| - const interval = setInterval(() => { |
17 |
| - seconds = Math.max(0, Math.ceil((nextExportTime - SvelteDate.now()) / 1000)); |
18 |
| - }, 1000); |
19 |
| -
|
20 |
| - return () => clearInterval(interval); |
21 |
| - }); |
22 | 3 | </script>
|
23 | 4 |
|
24 | 5 | <div
|
|
98 | 79 | <span class="text-nowrap">please stay tuned...</span>
|
99 | 80 | </p>
|
100 | 81 |
|
101 |
| - <div class="mt-6 flex min-h-max flex-col items-center space-y-4 text-center"> |
102 |
| - {#if data.nextExport !== Infinity} |
103 |
| - {#if seconds <= 0} |
104 |
| - <button |
105 |
| - onclick={() => { |
106 |
| - window.open(`${base}/api/v2/export`, "_blank"); |
107 |
| - nextExportTime = SvelteDate.now() + 3600 * 1000; |
108 |
| - seconds = 3600; |
109 |
| - }} |
110 |
| - class="flex flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-white transition-colors hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-300" |
111 |
| - >Export your data</button |
112 |
| - > |
113 |
| - {:else} |
114 |
| - <button |
115 |
| - disabled |
116 |
| - class="flex cursor-not-allowed flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-gray-400 px-5 py-2 text-center text-lg font-semibold text-gray-300 opacity-50 dark:bg-gray-600 dark:text-gray-500" |
117 |
| - >Export your data</button |
118 |
| - > |
119 |
| - <p class="text-sm text-gray-500 dark:text-gray-400"> |
120 |
| - You can export your data again in {seconds} |
121 |
| - {seconds === 1 ? "second" : "seconds"}. |
122 |
| - </p> |
123 |
| - {/if} |
124 |
| - |
125 |
| - <form action="{base}/logout" method="POST" class="w-full pt-4"> |
126 |
| - {#if data?.user?.username} |
127 |
| - <span class="text-sm text-gray-500 dark:text-gray-400"> |
128 |
| - Logged in as {data.user.username} • |
129 |
| - </span> |
130 |
| - {/if} |
131 |
| - <button |
132 |
| - type="submit" |
133 |
| - class="text-sm text-gray-500 underline hover:underline dark:text-gray-400" |
134 |
| - >Log out</button |
135 |
| - > |
136 |
| - </form> |
137 |
| - {:else} |
138 |
| - <a |
139 |
| - href="{base}/login" |
140 |
| - class="mt-10 flex w-full max-w-xs flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" |
141 |
| - > |
142 |
| - Sign in |
143 |
| - {#if publicConfig.isHuggingChat} |
144 |
| - <span class="flex items-center"> |
145 |
| - with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face |
146 |
| - </span> |
147 |
| - {/if} |
148 |
| - </a> |
149 |
| - <p class="text-sm text-gray-500 dark:text-gray-400">to export your existing data.</p> |
150 |
| - {/if} |
151 |
| - </div> |
152 | 82 | <a
|
153 | 83 | class="mt-10"
|
154 | 84 | href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/747"
|
|
0 commit comments