victor HF staff coyotte508 HF staff commited on
Commit
9405a81
1 Parent(s): 831f161

Add disclaimer and share (#76)

Browse files

* disclaimer and share

* ✨ Share from multiple routes

* Update src/lib/components/chat/ChatWindow.svelte

---------

Co-authored-by: coyotte508 <[email protected]>

src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -8,6 +8,7 @@
8
 
9
  import ChatMessages from "./ChatMessages.svelte";
10
  import ChatInput from "./ChatInput.svelte";
 
11
 
12
  export let messages: Message[] = [];
13
  export let disabled: boolean = false;
@@ -16,7 +17,7 @@
16
 
17
  let message: string;
18
 
19
- const dispatch = createEventDispatcher<{ message: string }>();
20
  </script>
21
 
22
  <div class="relative h-screen">
@@ -27,7 +28,7 @@
27
  </nav>
28
  <ChatMessages {loading} {pending} {messages} on:message />
29
  <div
30
- class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
31
  >
32
  <form
33
  on:submit|preventDefault={() => {
@@ -50,5 +51,19 @@
50
  </button>
51
  </div>
52
  </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </div>
54
  </div>
 
8
 
9
  import ChatMessages from "./ChatMessages.svelte";
10
  import ChatInput from "./ChatInput.svelte";
11
+ import CarbonExport from "~icons/carbon/export";
12
 
13
  export let messages: Message[] = [];
14
  export let disabled: boolean = false;
 
17
 
18
  let message: string;
19
 
20
+ const dispatch = createEventDispatcher<{ message: string; share: void }>();
21
  </script>
22
 
23
  <div class="relative h-screen">
 
28
  </nav>
29
  <ChatMessages {loading} {pending} {messages} on:message />
30
  <div
31
+ class="flex flex-col max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
32
  >
33
  <form
34
  on:submit|preventDefault={() => {
 
51
  </button>
52
  </div>
53
  </form>
54
+ <div class="flex text-xs text-gray-400/80 mt-2 justify-between self-stretch px-1">
55
+ <p>
56
+ Model: OpenAssistant/oasst-sft-1-pythia-12b · Generated content may be inaccurate or false.
57
+ </p>
58
+ {#if messages.length}
59
+ <button
60
+ class="flex items-center hover:underline hover:text-gray-400"
61
+ type="button"
62
+ on:click={() => dispatch("share")}
63
+ >
64
+ <CarbonExport class="text-[.6rem] mr-1.5 text-yellow-500" />Share this conversation
65
+ </button>
66
+ {/if}
67
+ </div>
68
  </div>
69
  </div>
src/lib/shareConversation.ts ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { base } from "$app/paths";
2
+
3
+ export async function shareConversation(id: string, title: string) {
4
+ try {
5
+ const res = await fetch(`${base}/conversation/${id}/share`, {
6
+ method: "POST",
7
+ headers: {
8
+ "Content-Type": "application/json",
9
+ },
10
+ });
11
+
12
+ if (!res.ok) {
13
+ alert("Error while sharing conversation: " + (await res.text()));
14
+ return;
15
+ }
16
+
17
+ const { url } = await res.json();
18
+
19
+ if (navigator.share) {
20
+ navigator.share({
21
+ title,
22
+ text: "Share this chat with others",
23
+ url,
24
+ });
25
+ } else {
26
+ prompt("Share this link with your friends:", url);
27
+ }
28
+ } catch (err) {
29
+ console.error(err);
30
+ alert("Error while sharing conversation: " + err);
31
+ }
32
+ }
src/routes/+layout.svelte CHANGED
@@ -7,6 +7,7 @@
7
  import CarbonTrashCan from "~icons/carbon/trash-can";
8
  import CarbonExport from "~icons/carbon/export";
9
  import { base } from "$app/paths";
 
10
  import { UrlDependency } from "$lib/types/UrlDependency";
11
 
12
  export let data: LayoutData;
@@ -22,37 +23,6 @@
22
  }
23
  }
24
 
25
- async function shareConversation(id: string, title: string) {
26
- try {
27
- const res = await fetch(`${base}/conversation/${id}/share`, {
28
- method: "POST",
29
- headers: {
30
- "Content-Type": "application/json",
31
- },
32
- });
33
-
34
- if (!res.ok) {
35
- alert("Error while sharing conversation: " + (await res.text()));
36
- return;
37
- }
38
-
39
- const { url } = await res.json();
40
-
41
- if (navigator.share) {
42
- navigator.share({
43
- title,
44
- text: "Share this chat with others",
45
- url,
46
- });
47
- } else {
48
- prompt("Share this link with your friends:", url);
49
- }
50
- } catch (err) {
51
- console.error(err);
52
- alert("Error while sharing conversation: " + err);
53
- }
54
- }
55
-
56
  async function deleteConversation(id: string) {
57
  try {
58
  const res = await fetch(`${base}/conversation/${id}`, {
 
7
  import CarbonTrashCan from "~icons/carbon/trash-can";
8
  import CarbonExport from "~icons/carbon/export";
9
  import { base } from "$app/paths";
10
+ import { shareConversation } from "$lib/shareConversation";
11
  import { UrlDependency } from "$lib/types/UrlDependency";
12
 
13
  export let data: LayoutData;
 
23
  }
24
  }
25
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  async function deleteConversation(id: string) {
27
  try {
28
  const res = await fetch(`${base}/conversation/${id}`, {
src/routes/conversation/[id]/+page.server.ts CHANGED
@@ -16,5 +16,6 @@ export const load: PageServerLoad = async (event) => {
16
 
17
  return {
18
  messages: conversation.messages,
 
19
  };
20
  };
 
16
 
17
  return {
18
  messages: conversation.messages,
19
+ title: conversation.title,
20
  };
21
  };
src/routes/conversation/[id]/+page.svelte CHANGED
@@ -10,6 +10,7 @@
10
  import { trimSuffix } from "$lib/utils/trimSuffix";
11
  import { PUBLIC_SEP_TOKEN } from "$env/static/public";
12
  import { trimPrefix } from "$lib/utils/trimPrefix";
 
13
  import { UrlDependency } from "$lib/types/UrlDependency";
14
 
15
  export let data: PageData;
@@ -124,4 +125,10 @@
124
  });
125
  </script>
126
 
127
- <ChatWindow {loading} {pending} {messages} on:message={(message) => writeMessage(message.detail)} />
 
 
 
 
 
 
 
10
  import { trimSuffix } from "$lib/utils/trimSuffix";
11
  import { PUBLIC_SEP_TOKEN } from "$env/static/public";
12
  import { trimPrefix } from "$lib/utils/trimPrefix";
13
+ import { shareConversation } from "$lib/shareConversation";
14
  import { UrlDependency } from "$lib/types/UrlDependency";
15
 
16
  export let data: PageData;
 
125
  });
126
  </script>
127
 
128
+ <ChatWindow
129
+ {loading}
130
+ {pending}
131
+ {messages}
132
+ on:message={(message) => writeMessage(message.detail)}
133
+ on:share={() => shareConversation($page.params.id, data.title)}
134
+ />
src/routes/r/[id]/+page.server.ts CHANGED
@@ -13,5 +13,6 @@ export const load: PageServerLoad = async ({ params }) => {
13
 
14
  return {
15
  messages: conversation.messages,
 
16
  };
17
  };
 
13
 
14
  return {
15
  messages: conversation.messages,
16
+ title: conversation.title,
17
  };
18
  };
src/routes/r/[id]/+page.svelte CHANGED
@@ -39,6 +39,25 @@
39
  loading = false;
40
  }
41
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  </script>
43
 
44
- <ChatWindow on:message={(ev) => createConversation(ev.detail)} messages={data.messages} {loading} />
 
 
 
 
 
 
39
  loading = false;
40
  }
41
  }
42
+
43
+ async function shareConversation() {
44
+ const url = `${window.location.origin}${window.location.pathname}`;
45
+
46
+ if (navigator.share) {
47
+ navigator.share({
48
+ title: data.title,
49
+ text: "Share this chat with others",
50
+ url,
51
+ });
52
+ } else {
53
+ prompt("Share this link with your friends:", url);
54
+ }
55
+ }
56
  </script>
57
 
58
+ <ChatWindow
59
+ on:message={(ev) => createConversation(ev.detail)}
60
+ on:share={shareConversation}
61
+ messages={data.messages}
62
+ {loading}
63
+ />