Mishig victor HF staff nsarrazin HF staff commited on
Commit
c208e39
1 Parent(s): aab7222

Update share behaviour (#645)

Browse files

* Update share behaviour

* Simplify

* format

* wording

* lint

---------

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

src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -1,11 +1,12 @@
1
  <script lang="ts">
2
  import type { Message } from "$lib/types/Message";
3
- import { createEventDispatcher } from "svelte";
4
 
5
  import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
6
  import CarbonExport from "~icons/carbon/export";
7
  import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
8
  import CarbonClose from "~icons/carbon/close";
 
9
 
10
  import EosIconsLoading from "~icons/eos-icons/loading";
11
 
@@ -38,6 +39,9 @@
38
 
39
  let loginModalOpen = false;
40
  let message: string;
 
 
 
41
 
42
  const dispatch = createEventDispatcher<{
43
  message: string;
@@ -73,6 +77,23 @@
73
  $: sources = files.map((file) => file2base64(file));
74
 
75
  const settings = useSettingsStore();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </script>
77
 
78
  <div class="relative min-h-0 min-w-0">
@@ -226,12 +247,19 @@
226
  </p>
227
  {#if messages.length}
228
  <button
229
- class="flex flex-none items-center hover:text-gray-400 hover:underline max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
230
  type="button"
231
- on:click={() => dispatch("share")}
 
 
232
  >
233
- <CarbonExport class="text-[.6rem] sm:mr-1.5 sm:text-primary-500" />
234
- <div class="max-sm:hidden">Share this conversation</div>
 
 
 
 
 
235
  </button>
236
  {/if}
237
  </div>
 
1
  <script lang="ts">
2
  import type { Message } from "$lib/types/Message";
3
+ import { createEventDispatcher, onDestroy } from "svelte";
4
 
5
  import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
6
  import CarbonExport from "~icons/carbon/export";
7
  import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
8
  import CarbonClose from "~icons/carbon/close";
9
+ import CarbonCheckmark from "~icons/carbon/checkmark";
10
 
11
  import EosIconsLoading from "~icons/eos-icons/loading";
12
 
 
39
 
40
  let loginModalOpen = false;
41
  let message: string;
42
+ let timeout: ReturnType<typeof setTimeout>;
43
+ let isSharedRecently = false;
44
+ $: $page.params.id && (isSharedRecently = false);
45
 
46
  const dispatch = createEventDispatcher<{
47
  message: string;
 
77
  $: sources = files.map((file) => file2base64(file));
78
 
79
  const settings = useSettingsStore();
80
+
81
+ function onShare() {
82
+ dispatch("share");
83
+ isSharedRecently = true;
84
+ if (timeout) {
85
+ clearTimeout(timeout);
86
+ }
87
+ timeout = setTimeout(() => {
88
+ isSharedRecently = false;
89
+ }, 2000);
90
+ }
91
+
92
+ onDestroy(() => {
93
+ if (timeout) {
94
+ clearTimeout(timeout);
95
+ }
96
+ });
97
  </script>
98
 
99
  <div class="relative min-h-0 min-w-0">
 
247
  </p>
248
  {#if messages.length}
249
  <button
250
+ class="flex flex-none items-center hover:text-gray-400 max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
251
  type="button"
252
+ class:hover:underline={!isSharedRecently}
253
+ on:click={onShare}
254
+ disabled={isSharedRecently}
255
  >
256
+ {#if isSharedRecently}
257
+ <CarbonCheckmark class="text-[.6rem] sm:mr-1.5 sm:text-green-600" />
258
+ <div class="text-green-600 max-sm:hidden">Link copied to clipboard</div>
259
+ {:else}
260
+ <CarbonExport class="text-[.6rem] sm:mr-1.5 sm:text-primary-500" />
261
+ <div class="max-sm:hidden">Share this conversation</div>
262
+ {/if}
263
  </button>
264
  {/if}
265
  </div>
src/lib/shareConversation.ts CHANGED
@@ -8,7 +8,7 @@ export async function shareConversation(id: string, title: string) {
8
  try {
9
  if (id.length === 7) {
10
  const url = get(page).url;
11
- share(getShareUrl(url, id), title);
12
  } else {
13
  const res = await fetch(`${base}/conversation/${id}/share`, {
14
  method: "POST",
@@ -24,7 +24,7 @@ export async function shareConversation(id: string, title: string) {
24
  }
25
 
26
  const { url } = await res.json();
27
- share(url, title);
28
  }
29
  } catch (err) {
30
  error.set(ERROR_MESSAGES.default);
 
8
  try {
9
  if (id.length === 7) {
10
  const url = get(page).url;
11
+ await share(getShareUrl(url, id), title);
12
  } else {
13
  const res = await fetch(`${base}/conversation/${id}/share`, {
14
  method: "POST",
 
24
  }
25
 
26
  const { url } = await res.json();
27
+ await share(url, title);
28
  }
29
  } catch (err) {
30
  error.set(ERROR_MESSAGES.default);
src/lib/utils/share.ts CHANGED
@@ -1,7 +1,7 @@
1
- export function share(url: string, title: string) {
2
  if (navigator.share) {
3
  navigator.share({ url, title });
4
  } else {
5
- prompt("Copy this public url to share:", url);
6
  }
7
  }
 
1
+ export async function share(url: string, title: string) {
2
  if (navigator.share) {
3
  navigator.share({ url, title });
4
  } else {
5
+ await navigator.clipboard.writeText(url);
6
  }
7
  }