From 63ddb7bd6e72dc9e3f2e8af5d2f9270a417731df Mon Sep 17 00:00:00 2001
From: Liam Dyer <liamcdyer@gmail.com>
Date: Mon, 27 May 2024 20:56:31 -0400
Subject: [PATCH 1/4] feat: use contenteditable span for input

---
 src/lib/components/chat/ChatMessage.svelte | 48 ++++++++++------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/chat/ChatMessage.svelte b/src/lib/components/chat/ChatMessage.svelte
index 365acde99eb..185e96691ac 100644
--- a/src/lib/components/chat/ChatMessage.svelte
+++ b/src/lib/components/chat/ChatMessage.svelte
@@ -192,13 +192,13 @@
 	}
 
 	$: editMode = $convTreeStore.editing === message.id;
-	let editContentEl: HTMLTextAreaElement;
+	let editContentEl: HTMLSpanElement;
 	let editFormEl: HTMLFormElement;
 
 	$: if (editMode) {
 		tick();
 		if (editContentEl) {
-			editContentEl.value = message.content;
+			editContentEl.innerText = message.content;
 			editContentEl?.focus();
 		}
 	}
@@ -485,29 +485,25 @@
 			{/if}
 
 			<div class="flex w-full flex-row flex-nowrap">
-				{#if !editMode}
-					<p
-						class="disabled w-full appearance-none whitespace-break-spaces text-wrap break-words bg-inherit px-5 py-3.5 text-gray-500 dark:text-gray-400"
-					>
-						{message.content.trim()}
-					</p>
-				{:else}
-					<form
-						class="flex w-full flex-col"
-						bind:this={editFormEl}
-						on:submit|preventDefault={() => {
-							dispatch("retry", { content: editContentEl.value, id: message.id });
-							$convTreeStore.editing = null;
-						}}
+				<form
+					class="flex w-full flex-col"
+					bind:this={editFormEl}
+					on:submit|preventDefault={() => {
+						dispatch("retry", { content: editContentEl.innerText, id: message.id });
+						$convTreeStore.editing = null;
+					}}
+				>
+					<span
+						role="textbox"
+						tabindex={1}
+						class="w-full whitespace-break-spaces text-wrap break-words break-words rounded-xl px-5 py-3.5 text-gray-500 outline-none *:h-max dark:text-gray-400"
+						class:bg-gray-100={editMode}
+						class:dark:bg-gray-800={editMode}
+						bind:this={editContentEl}
+						on:keydown={handleKeyDown}
+						contenteditable={editMode}>{message.content.trim()}</span
 					>
-						<textarea
-							class="w-full whitespace-break-spaces break-words rounded-xl bg-gray-100 px-5 py-3.5 text-gray-500 *:h-max dark:bg-gray-800 dark:text-gray-400"
-							rows="5"
-							bind:this={editContentEl}
-							value={message.content.trim()}
-							on:keydown={handleKeyDown}
-							required
-						/>
+					{#if editMode}
 						<div class="flex w-full flex-row flex-nowrap items-center justify-center gap-2 pt-2">
 							<button
 								type="submit"
@@ -530,8 +526,8 @@
 								Cancel
 							</button>
 						</div>
-					</form>
-				{/if}
+					{/if}
+				</form>
 				{#if !loading && !editMode}
 					<div
 						class="

From 72bad25c6ab1d626f536dcfe77af90f90d07cab0 Mon Sep 17 00:00:00 2001
From: Liam Dyer <liamcdyer@gmail.com>
Date: Mon, 27 May 2024 20:56:56 -0400
Subject: [PATCH 2/4] feat: increase input max rows to 16

---
 src/lib/components/chat/ChatWindow.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ChatWindow.svelte b/src/lib/components/chat/ChatWindow.svelte
index af3b0bafd38..bda490b7554 100644
--- a/src/lib/components/chat/ChatWindow.svelte
+++ b/src/lib/components/chat/ChatWindow.svelte
@@ -319,7 +319,7 @@
 										loginModalOpen = true;
 									}
 								}}
-								maxRows={6}
+								maxRows={16}
 								disabled={isReadOnly || lastIsError}
 							/>
 						{/if}

From e9c846acd33f806b30498f67140bac9579c1c33b Mon Sep 17 00:00:00 2001
From: Liam Dyer <liamcdyer@gmail.com>
Date: Mon, 27 May 2024 20:57:11 -0400
Subject: [PATCH 3/4] fix: avoid forcing scroll bars on chat input

---
 src/lib/components/chat/ChatInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ChatInput.svelte b/src/lib/components/chat/ChatInput.svelte
index b2e4f4e1bc2..388ee37e004 100644
--- a/src/lib/components/chat/ChatInput.svelte
+++ b/src/lib/components/chat/ChatInput.svelte
@@ -47,7 +47,7 @@
 		enterkeyhint="send"
 		tabindex="0"
 		rows="1"
-		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-y-auto overflow-x-hidden border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
 		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}

From bcd08338f48dbe55cd06a84f623d2f938695dd07 Mon Sep 17 00:00:00 2001
From: Liam Dyer <liamcdyer@gmail.com>
Date: Mon, 27 May 2024 21:02:41 -0400
Subject: [PATCH 4/4] fix: user message content not updating

---
 src/lib/components/chat/ChatMessage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ChatMessage.svelte b/src/lib/components/chat/ChatMessage.svelte
index 185e96691ac..b745668ea27 100644
--- a/src/lib/components/chat/ChatMessage.svelte
+++ b/src/lib/components/chat/ChatMessage.svelte
@@ -198,7 +198,7 @@
 	$: if (editMode) {
 		tick();
 		if (editContentEl) {
-			editContentEl.innerText = message.content;
+			editContentEl.textContent = message.content;
 			editContentEl?.focus();
 		}
 	}