mishig HF staff commited on
Commit
c5c965b
2 Parent(s): 814b775 5c869f5

[Fix] dynamic textarea reset when toggling between code snippets and input messages (#49)

Browse files
src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte CHANGED
@@ -1,7 +1,7 @@
1
  <script lang="ts">
2
  import type { Conversation } from "$lib/components/InferencePlayground/types";
3
 
4
- import { createEventDispatcher } from "svelte";
5
 
6
  import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
7
  import Message from "./InferencePlaygroundMessage.svelte";
@@ -23,8 +23,9 @@
23
 
24
  let messageContainer: HTMLDivElement | null = null;
25
 
26
- function resizeMessageTextAreas() {
27
  // ideally we would use CSS "field-sizing:content". However, it is currently only supported on Chrome.
 
28
  if (messageContainer) {
29
  const containerScrollTop = messageContainer.scrollTop;
30
  const textareaEls = messageContainer.querySelectorAll("textarea");
@@ -57,6 +58,8 @@
57
  conversationLength = conversation.messages.length;
58
  shouldScrollToBottom = true;
59
  }
 
 
60
  </script>
61
 
62
  <div
 
1
  <script lang="ts">
2
  import type { Conversation } from "$lib/components/InferencePlayground/types";
3
 
4
+ import { createEventDispatcher, tick } from "svelte";
5
 
6
  import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
7
  import Message from "./InferencePlaygroundMessage.svelte";
 
23
 
24
  let messageContainer: HTMLDivElement | null = null;
25
 
26
+ async function resizeMessageTextAreas() {
27
  // ideally we would use CSS "field-sizing:content". However, it is currently only supported on Chrome.
28
+ await tick();
29
  if (messageContainer) {
30
  const containerScrollTop = messageContainer.scrollTop;
31
  const textareaEls = messageContainer.querySelectorAll("textarea");
 
58
  conversationLength = conversation.messages.length;
59
  shouldScrollToBottom = true;
60
  }
61
+
62
+ $: viewCode, resizeMessageTextAreas();
63
  </script>
64
 
65
  <div