Adrien Denat coyotte508 HF staff commited on
Commit
74815cb
1 Parent(s): 9a2f641

use a custom event instead of requestSubmit as it's not supported in … (#112)

Browse files

* use a custom event instead of requestSubmit as it's not supported in Safari 14

* add typings on createEventDispatcher

Co-authored-by: Eliott C. <[email protected]>

---------

Co-authored-by: Eliott C. <[email protected]>

src/lib/components/chat/ChatInput.svelte CHANGED
@@ -1,4 +1,6 @@
1
  <script lang="ts">
 
 
2
  export let value = "";
3
  export let minRows = 1;
4
  export let maxRows: null | number = null;
@@ -6,6 +8,8 @@
6
  export let disabled = false;
7
  export let autofocus = false;
8
 
 
 
9
  $: minHeight = `${1 + minRows * 1.5}em`;
10
  $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
11
 
@@ -13,8 +17,7 @@
13
  // submit on enter
14
  if (event.key === "Enter" && !event.shiftKey) {
15
  event.preventDefault();
16
-
17
- textareaElement.closest("form")?.requestSubmit();
18
  }
19
  }
20
 
 
1
  <script lang="ts">
2
+ import { createEventDispatcher } from "svelte";
3
+
4
  export let value = "";
5
  export let minRows = 1;
6
  export let maxRows: null | number = null;
 
8
  export let disabled = false;
9
  export let autofocus = false;
10
 
11
+ const dispatch = createEventDispatcher<{submit: void}>();
12
+
13
  $: minHeight = `${1 + minRows * 1.5}em`;
14
  $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
15
 
 
17
  // submit on enter
18
  if (event.key === "Enter" && !event.shiftKey) {
19
  event.preventDefault();
20
+ dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
 
21
  }
22
  }
23
 
src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -17,6 +17,12 @@
17
  let message: string;
18
 
19
  const dispatch = createEventDispatcher<{ message: string; share: void }>();
 
 
 
 
 
 
20
  </script>
21
 
22
  <div class="relative min-h-0 min-w-0">
@@ -25,15 +31,17 @@
25
  class="flex flex-col pointer-events-none [&>*]:pointer-events-auto 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 via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full"
26
  >
27
  <form
28
- on:submit|preventDefault={() => {
29
- if (loading) return;
30
- dispatch("message", message);
31
- message = "";
32
- }}
33
  class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
34
  >
35
  <div class="w-full flex flex-1 border-none bg-transparent">
36
- <ChatInput placeholder="Ask anything" bind:value={message} autofocus maxRows={10} />
 
 
 
 
 
 
37
  <button
38
  class="btn p-1 px-[0.7rem] self-end bg-transparent my-1 h-[2.4rem] text-gray-400 rounded-lg enabled:dark:hover:text-gray-100 enabled:hover:text-gray-700 disabled:opacity-60 dark:disabled:opacity-40 mx-1"
39
  disabled={!message || loading || disabled}
 
17
  let message: string;
18
 
19
  const dispatch = createEventDispatcher<{ message: string; share: void }>();
20
+
21
+ const handleSubmit = () => {
22
+ if (loading) return;
23
+ dispatch("message", message);
24
+ message = "";
25
+ };
26
  </script>
27
 
28
  <div class="relative min-h-0 min-w-0">
 
31
  class="flex flex-col pointer-events-none [&>*]:pointer-events-auto 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 via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full"
32
  >
33
  <form
34
+ on:submit|preventDefault={handleSubmit}
 
 
 
 
35
  class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
36
  >
37
  <div class="w-full flex flex-1 border-none bg-transparent">
38
+ <ChatInput
39
+ placeholder="Ask anything"
40
+ bind:value={message}
41
+ on:submit={handleSubmit}
42
+ autofocus
43
+ maxRows={10}
44
+ />
45
  <button
46
  class="btn p-1 px-[0.7rem] self-end bg-transparent my-1 h-[2.4rem] text-gray-400 rounded-lg enabled:dark:hover:text-gray-100 enabled:hover:text-gray-700 disabled:opacity-60 dark:disabled:opacity-40 mx-1"
47
  disabled={!message || loading || disabled}