Skip to content

Commit 2cb745f

Browse files
nsarrazingalen-ftcoyotte508gary149
authored
Reworked settings menu (#591)
* initial work on new settings page * new settings - fully working * tweak to settings layout * Added model links * lint * redirect on bad model * delete error page * fix links & reset button * add saving indicator * Make new settings work on mobile * small tweak mobile * Fix preprompt so it gets read correctly from the model.preprompt (#595) * 🔒️ Harden session ID generator (#599) * bump svelte & related to latest (#600) * Update dockerfile to node 20 (#601) * Only refresh cookie on post (#606) * Session management improvements: Multi sessions, renew on login/logout (#603) * wip: update sessionId on every login * comment out object.freeze * only refresh cookies on post * Add support for multiple sessions per user * fix tests * 🛂 Hash sessionId in DB * 🐛 do not forget about event.locals.sessionId * Update src/lib/server/auth.ts Co-authored-by: Eliott C. <coyotte508@gmail.com> * Add `expiresAt` field * remove index causing errors * Fix bug where sessions were not properly being deleted on logout * Moved session refresh outside of form content check --------- Co-authored-by: coyotte508 <coyotte508@gmail.com> * fix settings custom prompt bug * simplify WIP * mobile * misc * mobile * remove debug log * Fix switches working only on label * Revert "Fix switches working only on label" This reverts commit b46d852. * Switch fix --------- Co-authored-by: Galén <105213101+galen-ft@users.noreply.github.com> Co-authored-by: Eliott C <coyotte508@gmail.com> Co-authored-by: Victor Mustar <victor.mustar@gmail.com>
1 parent 3cbea34 commit 2cb745f

24 files changed

+494
-432
lines changed

‎package-lock.json

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"dependencies": {
4747
"@huggingface/hub": "^0.5.1",
4848
"@huggingface/inference": "^2.6.3",
49+
"@iconify-json/bi": "^1.1.21",
4950
"@xenova/transformers": "^2.6.0",
5051
"autoprefixer": "^10.4.14",
5152
"browser-image-resizer": "^2.4.1",

‎src/lib/actions/clickOutside.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export function clickOutside(element: HTMLDialogElement, callbackFunction: () => void) {
2+
function onClick(event: MouseEvent) {
3+
if (!element.contains(event.target as Node)) {
4+
callbackFunction();
5+
}
6+
}
7+
8+
document.body.addEventListener("click", onClick);
9+
10+
return {
11+
update(newCallbackFunction: () => void) {
12+
callbackFunction = newCallbackFunction;
13+
},
14+
destroy() {
15+
document.body.removeEventListener("click", onClick);
16+
},
17+
};
18+
}

‎src/lib/components/DisclaimerModal.svelte

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
55
import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
66
import Modal from "$lib/components/Modal.svelte";
7+
import { useSettingsStore } from "$lib/stores/settings";
78
import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
8-
import type { LayoutData } from "../../routes/$types";
99
import Logo from "./icons/Logo.svelte";
1010
11-
export let settings: LayoutData["settings"];
11+
const settings = useSettingsStore();
1212
</script>
1313

1414
<Modal>
@@ -31,36 +31,26 @@
3131

3232
<div class="flex w-full flex-col items-center gap-2">
3333
{#if $page.data.guestMode || !$page.data.loginEnabled}
34-
<form action="{base}/settings" method="POST" class="w-full">
35-
<input type="hidden" name="ethicsModalAccepted" value={true} />
36-
{#each Object.entries(settings).filter(([k]) => !(k === "customPrompts")) as [key, val]}
37-
<input type="hidden" name={key} value={val} />
38-
{/each}
39-
<input
40-
type="hidden"
41-
name="customPrompts"
42-
value={JSON.stringify(settings.customPrompts)}
43-
/>
44-
<button
45-
type="submit"
46-
class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
47-
class:bg-white={$page.data.loginEnabled}
48-
class:text-gray-800={$page.data.loginEnabled}
49-
class:hover:bg-slate-100={$page.data.loginEnabled}
50-
on:click={(e) => {
51-
if (!cookiesAreEnabled()) {
52-
e.preventDefault();
53-
window.open(window.location.href, "_blank");
54-
}
55-
}}
56-
>
57-
{#if $page.data.loginEnabled}
58-
Try as guest
59-
{:else}
60-
Start chatting
61-
{/if}
62-
</button>
63-
</form>
34+
<button
35+
class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
36+
class:bg-white={$page.data.loginEnabled}
37+
class:text-gray-800={$page.data.loginEnabled}
38+
class:hover:bg-slate-100={$page.data.loginEnabled}
39+
on:click={(e) => {
40+
if (!cookiesAreEnabled()) {
41+
e.preventDefault();
42+
window.open(window.location.href, "_blank");
43+
}
44+
45+
$settings.ethicsModalAccepted = true;
46+
}}
47+
>
48+
{#if $page.data.loginEnabled}
49+
Try as guest
50+
{:else}
51+
Start chatting
52+
{/if}
53+
</button>
6454
{/if}
6555
{#if $page.data.loginEnabled}
6656
<form action="{base}/login" target="_parent" method="POST" class="w-full">

‎src/lib/components/LoginModal.svelte

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
55
import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
66
import Modal from "$lib/components/Modal.svelte";
7-
import type { LayoutData } from "../../routes/$types";
7+
import { useSettingsStore } from "$lib/stores/settings";
8+
import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
89
import Logo from "./icons/Logo.svelte";
9-
export let settings: LayoutData["settings"];
10+
11+
const settings = useSettingsStore();
1012
</script>
1113

1214
<Modal on:close>
@@ -42,13 +44,16 @@
4244
{/if}
4345
</button>
4446
{:else}
45-
<input type="hidden" name="ethicsModalAccepted" value={true} />
46-
{#each Object.entries(settings) as [key, val]}
47-
<input type="hidden" name={key} value={val} />
48-
{/each}
4947
<button
50-
type="submit"
5148
class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
49+
on:click={(e) => {
50+
if (!cookiesAreEnabled()) {
51+
e.preventDefault();
52+
window.open(window.location.href, "_blank");
53+
}
54+
55+
$settings.ethicsModalAccepted = true;
56+
}}
5257
>
5358
Start chatting
5459
</button>

‎src/lib/components/ModelsModal.svelte

Lines changed: 0 additions & 153 deletions
This file was deleted.

‎src/lib/components/NavMenu.svelte

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import { base } from "$app/paths";
3-
import { createEventDispatcher } from "svelte";
43
54
import Logo from "$lib/components/icons/Logo.svelte";
65
import { switchTheme } from "$lib/switchTheme";
@@ -9,12 +8,6 @@
98
import NavConversationItem from "./NavConversationItem.svelte";
109
import type { LayoutData } from "../../routes/$types";
1110
12-
const dispatch = createEventDispatcher<{
13-
shareConversation: { id: string; title: string };
14-
clickSettings: void;
15-
clickLogout: void;
16-
}>();
17-
1811
interface Conv {
1912
id: string;
2013
title: string;
@@ -119,13 +112,12 @@
119112
>
120113
Theme
121114
</button>
122-
<button
123-
on:click={() => dispatch("clickSettings")}
124-
type="button"
115+
<a
116+
href="{base}/settings"
125117
class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
126118
>
127119
Settings
128-
</button>
120+
</a>
129121
{#if PUBLIC_APP_NAME === "HuggingChat"}
130122
<a
131123
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"

0 commit comments

Comments
 (0)