[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
|