Merge branch 'main' into refac/auth-middleware

src/app.css

@@ -16,7 +16,7 @@ html {
 
 code {
 	/* white-space-collapse: preserve !important; */
-	white-space: pre;
+	overflow-x: auto;
 	width: auto;
 }
 

src/lib/components/chat/MessageInput.svelte

@@ -298,6 +298,24 @@
 									submitPrompt(prompt);
 								}
 							}}
+							on:keydown={(e) => {
+								if (prompt === '' && e.key == 'ArrowUp') {
+									e.preventDefault();
+
+									const userMessageElement = [
+										...document.getElementsByClassName('user-message')
+									]?.at(-1);
+
+									const editButton = [
+										...document.getElementsByClassName('edit-user-message-button')
+									]?.at(-1);
+
+									console.log(userMessageElement);
+
+									userMessageElement.scrollIntoView({ block: 'center' });
+									editButton?.click();
+								}
+							}}
 							rows="1"
 							on:input={(e) => {
 								e.target.style.height = '';

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -88,6 +88,7 @@
 				let code = block.querySelector('code');
 				code.style.borderTopRightRadius = 0;
 				code.style.borderTopLeftRadius = 0;
+				code.style.whiteSpace = 'pre';
 
 				let topBarDiv = document.createElement('div');
 				topBarDiv.style.backgroundColor = '#202123';

src/lib/components/chat/Messages/UserMessage.svelte

@@ -24,6 +24,8 @@
 
 		editElement.style.height = '';
 		editElement.style.height = `${editElement.scrollHeight}px`;
+
+		editElement?.focus();
 	};
 
 	const editMessageConfirmHandler = async () => {
@@ -43,7 +45,9 @@
 	<ProfileImage src={user?.profile_image_url ?? '/user.png'} />
 
 	<div class="w-full overflow-hidden">
+		<div class="user-message">
 			<Name>You</Name>
+		</div>
 
 		<div
 			class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
@@ -145,7 +149,7 @@
 						{/if}
 
 						<button
-							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
+							class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition edit-user-message-button"
 							on:click={() => {
 								editMessageHandler();
 							}}