codegen-fixes (#10353)

* feat(ui): increase chat message max width from px to 620px

* style: add border to markdown blocks and adjust background visibility

* Abort CC generation on Ctrl+C

* fix(textarea): ensure textarea respects padding when switching to a new line

Author: PavelLaptev

apps/desktop/src/components/codegen/CodegenInput.svelte

@@ -87,6 +87,13 @@
 			borderless
 			maxRows={10}
 			minRows={2}
+			onkeydown={(e) => {
+				// Global gotakey on the button doesn't work inside textarea, so we handle it here
+				if (e.key === 'c' && e.ctrlKey && onAbort) {
+					e.preventDefault();
+					onAbort();
+				}
+			}}
 		/>
 
 		<div class="dialog-input__actions">
@@ -102,6 +109,7 @@
 							style="error"
 							action={onAbort}
 							icon="stop"
+							hotkey="⌃C"
 							reversedDirection
 						>
 							Stop

apps/desktop/src/components/codegen/CodegenPage.svelte

@@ -1085,7 +1085,7 @@
 		gap: 8px;
 
 		/* SHARABLE */
-		--message-max-width: 520px;
+		--message-max-width: 620px;
 	}
 
 	.chat-view {

apps/desktop/src/components/codegen/CodegenUserMessage.svelte

@@ -44,6 +44,11 @@
 		background-color: var(--clr-bg-2);
 		text-wrap: wrap;
 		word-break: break-word;
+
+		/* make code blocks visible */
+		:global(.markdown pre) {
+			background-color: var(--clr-bg-1);
+		}
 	}
 
 	.user-icon {

packages/ui/src/lib/components/Textarea.svelte

@@ -195,6 +195,8 @@
 		width: 100%;
 		padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
 		line-height: var(--lineheight-ratio);
+		scroll-padding: var(--padding-top) var(--padding-right) var(--padding-bottom)
+			var(--padding-left);
 		word-wrap: break-word;
 		white-space: pre-wrap;
 	}

packages/ui/src/styles/sharable/markdown.css

@@ -76,6 +76,7 @@
 		margin: 1em 0;
 		padding: 1em;
 		overflow: auto;
+		border: 1px solid var(--clr-border-3);
 		border-radius: var(--radius-m);
 		background-color: var(--clr-bg-2);
 		font-size: 92%;