codegen-ui-fixes-part-2 (#10849)

* refactor(codegen): rename CodegenInputQueued to CodegenQueued

* feat(ui): display attachments in queued codegen messages

* update composition for the "new unread" and "scroll-to-bottom" buttons.

* update codegen header

* update FileSearch box styles

* Fix the box blinking on query change

Author: PavelLaptev

apps/desktop/src/components/VirtualList.svelte

@@ -335,8 +335,11 @@
 			});
 		} else if (items) {
 			untrack(() => {
+				const hadNewItems = items.length > previousItemsLength && items.length > end;
 				recalculate();
-				newUnseenTail = items.length > previousItemsLength && items.length > end;
+				if (hadNewItems) {
+					newUnseenTail = true;
+				}
 			});
 		}
 		previousItemsLength = items.length;
@@ -369,26 +372,26 @@
 	</div>
 </ScrollableContainer>
 
-{#if newUnseenTail}
-	<div class="new-items-notification" transition:fade={{ duration: 150 }}>
-		<Button
-			kind="outline"
-			icon="arrow-down"
-			tooltip="Scroll to bottom"
-			onclick={scrollToBottomAndDismiss}
-		>
-			New unread
-		</Button>
-	</div>
-{/if}
-{#if !newUnseenTail && distanceFromBottom > 300}
-	<div class="chat-scroll-to-bottom" transition:fade={{ duration: 150 }}>
-		<Button
-			kind="outline"
-			icon="arrow-down"
-			tooltip="Scroll to bottom"
-			onclick={scrollToBottomAndDismiss}
-		/>
+{#if distanceFromBottom > 300}
+	<div class="feed-actions">
+		{#if newUnseenTail}
+			<button
+				type="button"
+				class="text-12 feed-actions__new-messages"
+				transition:fade={{ duration: 150 }}
+				onclick={scrollToBottomAndDismiss}
+			>
+				New unread
+			</button>
+		{/if}
+		<div class="feed-actions__scroll-to-bottom" transition:fade={{ duration: 150 }}>
+			<Button
+				kind="outline"
+				icon="arrow-down"
+				tooltip="Scroll to bottom"
+				onclick={scrollToBottomAndDismiss}
+			/>
+		</div>
 	</div>
 {/if}
 
@@ -404,34 +407,28 @@
 		flex-direction: column;
 	}
 
-	.new-items-notification {
+	.feed-actions {
+		display: flex;
 		z-index: var(--z-floating);
 		position: absolute;
+		right: 16px;
 		bottom: 14px;
-		left: 50%;
-		overflow: hidden;
-		transform: translateX(-50%);
-		border-radius: var(--radius-btn);
-		background-color: var(--clr-bg-1);
-		transition:
-			box-shadow var(--transition-fast),
-			transform var(--transition-medium);
-
-		&:hover {
-			transform: scale(1.05) translateY(-2px);
-			box-shadow: var(--fx-shadow-s);
-		}
+		gap: 4px;
 	}
 
-	.new-items-notification:hover {
-		transform: translateX(-50%) translateY(-2px);
+	.feed-actions__new-messages {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		border: 1px solid var(--clr-border-3);
+		border-radius: var(--radius-btn);
+		background-color: var(--clr-bg-2);
+		color: var(--clr-text-1);
 	}
 
-	.chat-scroll-to-bottom {
+	.feed-actions__scroll-to-bottom {
 		z-index: var(--z-floating);
-		position: absolute;
-		right: 16px;
-		bottom: 14px;
 		overflow: hidden;
 		border-radius: var(--radius-btn);
 		background-color: var(--clr-bg-1);

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

@@ -9,7 +9,6 @@
 		branchIcon?: Snippet;
 		pageWorkspaceActions: Snippet;
 		pageContextActions?: Snippet;
-		inWorkspaceInlineActions?: Snippet;
 		inWorkspaceInlineContextActions?: Snippet;
 		messages: Snippet;
 		input?: Snippet;
@@ -22,7 +21,6 @@
 		branchIcon,
 		pageWorkspaceActions,
 		pageContextActions,
-		inWorkspaceInlineActions,
 		inWorkspaceInlineContextActions,
 		messages,
 		input,
@@ -60,8 +58,6 @@
 
 			{#snippet actions()}
 				{@render inWorkspaceInlineContextActions?.()}
-				<div class="divider"></div>
-				{@render inWorkspaceInlineActions?.()}
 			{/snippet}
 		</PreviewHeader>
 	{/if}

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

@@ -2,7 +2,7 @@
 	import CardOverlay from '$components/CardOverlay.svelte';
 	import Dropzone from '$components/Dropzone.svelte';
 	import AttachmentList from '$components/codegen/AttachmentList.svelte';
-	import CodegenInputQueued from '$components/codegen/CodegenInputQueued.svelte';
+	import CodegenQueued from '$components/codegen/CodegenQueued.svelte';
 	import FileSearch from '$components/codegen/FileSearch.svelte';
 	import { ATTACHMENT_SERVICE } from '$lib/codegen/attachmentService.svelte';
 	import {
@@ -50,7 +50,6 @@
 	const attachments = $derived(attachmentService.getByBranch(branchName));
 
 	let editorRef = $state<ReturnType<typeof RichTextEditor>>();
-
 	let showAbortButton = $state(false);
 
 	$effect(() => {
@@ -118,14 +117,21 @@
 
 	let query = $state('');
 	let callback = $state<((result: string) => void) | undefined>();
+
+	const placeholderVariants = [
+		'What to build?',
+		'Describe your changes.',
+		'What to create?',
+		'Describe what to build.',
+		'What to code?'
+	];
 </script>
 
 <div class="dialog-wrapper">
-	{#if query}
-		<FileSearch {projectId} {query} onselect={callback} limit={8} />
-	{/if}
+	<FileSearch {projectId} {query} onselect={callback} limit={8} />
+
 	<div class="text-input dialog-input" data-remove-from-panning>
-		<CodegenInputQueued {projectId} {stackId} {branchName} />
+		<CodegenQueued {projectId} {stackId} {branchName} />
 
 		<Dropzone {handlers}>
 			{#snippet overlay({ hovered, activated })}
@@ -140,13 +146,15 @@
 				</div>
 			{/if}
 
+			{@const randomPlaceholder =
+				placeholderVariants[Math.floor(Math.random() * placeholderVariants.length)]}
 			<RichTextEditor
 				bind:this={editorRef}
 				bind:value
 				namespace="codegen-input"
 				markdown={false}
 				styleContext="chat-input"
-				placeholder="What would you like to make..."
+				placeholder="{randomPlaceholder} Use @ to reference files…"
 				minHeight="4rem"
 				onError={(e: unknown) => console.warn('Editor error', e)}
 				initialText={value}

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

@@ -35,6 +35,7 @@
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { combineResults } from '$lib/state/helpers';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
+	import { formatCompactNumber } from '$lib/utils/number';
 	import { getEditorUri, URL_SERVICE } from '$lib/utils/url';
 	import { inject } from '@gitbutler/core/context';
 	import { reactive } from '@gitbutler/shared/reactiveUtils.svelte';
@@ -345,37 +346,26 @@
 			{#snippet inWorkspaceInlineContextActions()}
 				{@const stats = usageStats(events)}
 				{@const contextUsage = Math.round(stats.contextUtilization * 100)}
-				<div class="flex gap-8 items-center">
+
+				<div class="flex gap-10 items-center">
+					{#if stats.tokens > 0}
+						<Tooltip text="Tokens: {stats.tokens.toLocaleString()} / ${stats.cost.toFixed(2)} ">
+							<span class="text-12 clr-text-2">
+								{formatCompactNumber(stats.tokens)}
+							</span>
+						</Tooltip>
+					{/if}
+
 					<Tooltip text="{contextUsage}% context used">
 						<div
 							class="context-utilization-piechart"
 							style="--context-utilization: {contextUsage}%"
 						></div>
 					</Tooltip>
 
-					{#if contextUsage > 0}
-						<KebabButton
-							bind:el={workspaceContextActionsKebab}
-							onclick={() => contextActionsContextMenu?.toggle()}
-						/>
-					{/if}
-				</div>
-			{/snippet}
-			{#snippet inWorkspaceInlineActions()}
-				<div class="flex gap-4">
-					<Button
-						kind="ghost"
-						icon="mcp"
-						size="tag"
-						tooltip="MCP settings"
-						onclick={() => mcpConfigModal?.open()}
-					/>
-					<Button
-						kind="ghost"
-						icon="mixer"
-						size="tag"
-						tooltip="Agent settings"
-						onclick={() => settingsModal?.show()}
+					<KebabButton
+						bind:el={workspaceContextActionsKebab}
+						onclick={() => contextActionsContextMenu?.toggle()}
 					/>
 				</div>
 			{/snippet}
@@ -396,6 +386,7 @@
 					reversedDirection
 				/>
 			{/snippet}
+
 			{#snippet pageContextActions()}
 				{@const stats = usageStats(events)}
 
@@ -677,6 +668,24 @@
 		events.response.length === 0 ||
 		['running', 'compacting'].includes(currentStatus(events.response, isStackActive))}
 
+	<ContextMenuSection>
+		<ContextMenuItem
+			label="MCP settings"
+			icon="mcp"
+			onclick={() => {
+				mcpConfigModal?.open();
+				contextActionsContextMenu?.close();
+			}}
+		/>
+		<ContextMenuItem
+			label="Agent settings"
+			icon="mixer"
+			onclick={() => {
+				settingsModal?.show();
+				contextActionsContextMenu?.close();
+			}}
+		/>
+	</ContextMenuSection>
 	<ContextMenuSection>
 		<ContextMenuItem
 			label="Clear context and rules"
@@ -747,13 +756,24 @@
 
 	.context-utilization-piechart {
 		position: relative;
-		width: 16px;
-		height: 16px;
+		width: 17px;
+		height: 17px;
+		border: 0.094rem solid var(--clr-text-2);
 		border-radius: 50%;
-		background: conic-gradient(
-			var(--clr-text-2) var(--context-utilization),
-			var(--clr-border-2) var(--context-utilization)
-		);
+
+		&::after {
+			position: absolute;
+			top: 2px;
+			left: 2px;
+			width: calc(100% - 4px);
+			height: calc(100% - 4px);
+			border-radius: 50%;
+			background: conic-gradient(
+				var(--clr-text-2) var(--context-utilization),
+				transparent var(--context-utilization)
+			);
+			content: '';
+		}
 	}
 
 	.context-utilization-badge-2 {

apps/desktop/src/components/codegen/CodegenInputQueued.svelte renamed to apps/desktop/src/components/codegen/CodegenQueued.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
+	import AttachmentList from '$components/codegen/AttachmentList.svelte';
 	import { messageQueueSelectors, messageQueueSlice } from '$lib/codegen/messageQueueSlice';
 	import { CLIENT_STATE } from '$lib/state/clientState.svelte';
 	import { inject } from '@gitbutler/core/context';
 	import { Icon, Button } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
+	import type { PromptAttachment } from '$lib/codegen/types';
 
 	type Message = {
 		thinkingLevel: any;
 		model: any;
 		permissionMode: any;
 		prompt: string;
+		attachments?: PromptAttachment[];
 	};
 
 	interface Props {
@@ -52,7 +55,13 @@
 </script>
 
 {#snippet messageContent(message: Message)}
-	<p class="text-13 text-body message-text">{message.prompt}</p>
+	<div class="message-content">
+		<p class="text-13 text-body message-text">{message.prompt}</p>
+
+		{#if message.attachments && message.attachments.length > 0}
+			<AttachmentList attachments={message.attachments} showRemoveButton={false} />
+		{/if}
+	</div>
 
 	<div class="message-actions">
 		<Button
@@ -145,6 +154,13 @@
 		}
 	}
 
+	.message-content {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 10px;
+	}
+
 	.message-text {
 		display: -webkit-box;
 		overflow: hidden;