ui: fix system message edit box not expanding to fit content (#26006)

The in-conversation system-message edit textarea had a fixed min-height and no auto-resize, so long messages were crammed to 2 lines. Reused existing autoResizeTextarea helper on input and when the editor opens, and added max-height to cap growth.

diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
index 36798e2283a420ef030d50968ca1f7d462542b24..24b3be4c5ff774715e5ed055b3a1687c9bd722a1 100644 (file)
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
@@ -7,7 +7,7 @@
        import { getMessageEditContext } from '$lib/contexts';
        import { KeyboardKey, MessageRole } from '$lib/enums';
        import { config } from '$lib/stores/settings.svelte';
-       import { isIMEComposing } from '$lib/utils';
+       import { autoResizeTextarea, isIMEComposing } from '$lib/utils';
 
        interface Props {
                class?: string;
@@ -91,6 +91,11 @@
                        resizeObserver.disconnect();
                };
        });
+       $effect(() => {
+               if (editCtx.isEditing && textareaElement) {
+                       autoResizeTextarea(textareaElement);
+               }
+       });
 
        function toggleExpand() {
                isExpanded = !isExpanded;
@@ -105,11 +110,15 @@
        {#if editCtx.isEditing}
                <div class="w-full max-w-[80%]">
                        <textarea
+                               style="max-height: var(--max-message-height);"
                                bind:this={textareaElement}
                                value={editCtx.editedContent}
                                class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
                                onkeydown={handleEditKeydown}
-                               oninput={(e) => editCtx.setContent(e.currentTarget.value)}
+                               oninput={(e) => {
+                                       autoResizeTextarea(e.currentTarget);
+                                       editCtx.setContent(e.currentTarget.value);
+                               }}
                                placeholder="Edit system message..."
                        ></textarea>