Adrien Denat victor HF staff commited on
Commit
4791715
1 Parent(s): fd5e4ef

✨ add conversations deletion to settings modal (#239)

Browse files

* ✨ add conversations deletion to settings modal #233

* remove inert attribute from app only if last modal closed

* make the button an underlined text instead

* prepare for no-js

* ui

---------

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/Modal.svelte CHANGED
@@ -33,7 +33,10 @@
33
 
34
  onDestroy(() => {
35
  if (!browser) return;
36
- document.getElementById("app")?.removeAttribute("inert");
 
 
 
37
  });
38
  </script>
39
 
 
33
 
34
  onDestroy(() => {
35
  if (!browser) return;
36
+ // remove inert attribute if this is the last modal
37
+ if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
38
+ document.getElementById("app")?.removeAttribute("inert");
39
+ }
40
  });
41
  </script>
42
 
src/lib/components/SettingsModal.svelte CHANGED
@@ -11,57 +11,97 @@
11
  export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
12
 
13
  let shareConversationsWithModelAuthors = settings.shareConversationsWithModelAuthors;
 
14
 
15
  const dispatch = createEventDispatcher<{ close: void }>();
16
  </script>
17
 
18
  <Modal on:close>
19
- <form
20
- class="flex w-full flex-col gap-5 p-6"
21
- use:enhance={() => {
22
- dispatch("close");
23
- }}
24
- method="post"
25
- action="{base}/settings"
26
- >
27
  <div class="flex items-start justify-between text-xl font-semibold text-gray-800">
28
  <h2>Settings</h2>
29
  <button type="button" class="group" on:click={() => dispatch("close")}>
30
  <CarbonClose class="text-gray-900 group-hover:text-gray-500" />
31
  </button>
32
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
 
34
- <label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
35
- {#each Object.entries(settings).filter(([k]) => k !== "shareConversationsWithModelAuthors") as [key, val]}
36
- <input type="hidden" name={key} value={val} />
37
- {/each}
38
- <Switch
39
- name="shareConversationsWithModelAuthors"
40
- bind:checked={shareConversationsWithModelAuthors}
41
- />
42
- Share conversations with model authors
43
- </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
- <p class="text-gray-800">
46
- Sharing your data will help improve the training data and make open models better over time.
47
- </p>
48
- <p class="text-gray-800">
49
- You can change this setting at any time, it applies to all your conversations.
50
- </p>
51
- <p class="text-gray-800">
52
- Read more about this model's authors,
53
- <a
54
- href="https://open-assistant.io/"
55
- target="_blank"
56
- rel="noreferrer"
57
- class="underline decoration-gray-300 hover:decoration-gray-700">Open Assistant</a
58
- >.
59
- </p>
60
- <button
61
- type="submit"
62
- class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
63
- >
64
- Apply
65
- </button>
66
- </form>
 
 
 
 
 
 
 
67
  </Modal>
 
11
  export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
12
 
13
  let shareConversationsWithModelAuthors = settings.shareConversationsWithModelAuthors;
14
+ let isConfirmingDeletion = false;
15
 
16
  const dispatch = createEventDispatcher<{ close: void }>();
17
  </script>
18
 
19
  <Modal on:close>
20
+ <div class="flex w-full flex-col gap-5 p-6">
 
 
 
 
 
 
 
21
  <div class="flex items-start justify-between text-xl font-semibold text-gray-800">
22
  <h2>Settings</h2>
23
  <button type="button" class="group" on:click={() => dispatch("close")}>
24
  <CarbonClose class="text-gray-900 group-hover:text-gray-500" />
25
  </button>
26
  </div>
27
+ <form
28
+ class="flex flex-col gap-5"
29
+ use:enhance={() => {
30
+ dispatch("close");
31
+ }}
32
+ method="post"
33
+ action="{base}/settings"
34
+ >
35
+ <label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
36
+ {#each Object.entries(settings).filter(([k]) => k !== "shareConversationsWithModelAuthors") as [key, val]}
37
+ <input type="hidden" name={key} value={val} />
38
+ {/each}
39
+ <Switch
40
+ name="shareConversationsWithModelAuthors"
41
+ bind:checked={shareConversationsWithModelAuthors}
42
+ />
43
+ Share conversations with model authors
44
+ </label>
45
 
46
+ <p class="text-gray-800">
47
+ Sharing your data will help improve the training data and make open models better over time.
48
+ </p>
49
+ <p class="text-gray-800">
50
+ You can change this setting at any time, it applies to all your conversations.
51
+ </p>
52
+ <p class="text-gray-800">
53
+ Read more about this model's authors,
54
+ <a
55
+ href="https://open-assistant.io/"
56
+ target="_blank"
57
+ rel="noreferrer"
58
+ class="underline decoration-gray-300 hover:decoration-gray-700">Open Assistant</a
59
+ >.
60
+ </p>
61
+ <form
62
+ method="post"
63
+ action="{base}/conversations?/delete"
64
+ on:submit|preventDefault={() => (isConfirmingDeletion = true)}
65
+ >
66
+ <button type="submit" class="underline decoration-gray-300 hover:decoration-gray-700">
67
+ Delete all conversations
68
+ </button>
69
+ </form>
70
+ <button
71
+ type="submit"
72
+ class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
73
+ >
74
+ Apply
75
+ </button>
76
+ </form>
77
 
78
+ {#if isConfirmingDeletion}
79
+ <Modal on:close={() => (isConfirmingDeletion = false)}>
80
+ <form
81
+ use:enhance={() => {
82
+ dispatch("close");
83
+ }}
84
+ method="post"
85
+ action="{base}/conversations?/delete"
86
+ class="flex w-full flex-col gap-5 p-6"
87
+ >
88
+ <div class="flex items-start justify-between text-xl font-semibold text-gray-800">
89
+ <h2>Are you sure?</h2>
90
+ <button type="button" class="group" on:click={() => (isConfirmingDeletion = false)}>
91
+ <CarbonClose class="text-gray-900 group-hover:text-gray-500" />
92
+ </button>
93
+ </div>
94
+ <p class="text-gray-800">
95
+ This action will delete all your conversations. This cannot be undone.
96
+ </p>
97
+ <button
98
+ type="submit"
99
+ class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
100
+ >
101
+ Confirm deletion
102
+ </button>
103
+ </form>
104
+ </Modal>
105
+ {/if}
106
+ </div>
107
  </Modal>
src/routes/conversations/+page.server.ts ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { base } from "$app/paths";
2
+ import { authCondition } from "$lib/server/auth";
3
+ import { collections } from "$lib/server/database";
4
+ import { redirect } from "@sveltejs/kit";
5
+
6
+ export const actions = {
7
+ delete: async function ({ locals }) {
8
+ // double check we have a user to delete conversations for
9
+ if (locals.user?._id || locals.sessionId) {
10
+ await collections.conversations.deleteMany({
11
+ ...authCondition(locals),
12
+ });
13
+ }
14
+
15
+ throw redirect(303, `${base}/`);
16
+ },
17
+ };