Merge pull request #9932 from gitbutlerapp/pass-user-avatar-to-codegen-message

Use the users real profile picture

Author: Caleb-T-Owens

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

@@ -8,9 +8,9 @@
 		message: Message;
 		onApproval?: (id: string) => Promise<void>;
 		onRejection?: (id: string) => Promise<void>;
+		userAvatarUrl?: string;
 	};
-	const { message, onApproval, onRejection }: Props = $props();
-
+	const { message, onApproval, onRejection, userAvatarUrl }: Props = $props();
 	let toolCallsExpanded = $state(false);
 
 	const toolDisplayLimit = 3;
@@ -25,12 +25,7 @@
 </script>
 
 {#if message.type === 'user'}
-	<CodegenMessage
-		content={message.message}
-		avatarUrl="https://avatars.githubusercontent.com/u/70?v=4"
-		side="right"
-		bubble
-	/>
+	<CodegenMessage content={message.message} avatarUrl={userAvatarUrl} side="right" bubble />
 {:else if message.type === 'claude'}
 	<CodegenMessage content={message.message} side="left">
 		{#snippet extraContent()}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar, Markdown } from '@gitbutler/ui';
+	import { Avatar, Icon, Markdown } from '@gitbutler/ui';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -17,6 +17,10 @@
 	<div class="message-avatar">
 		{#if avatarUrl}
 			<Avatar size="large" srcUrl={avatarUrl} tooltip="" />
+		{:else if side === 'right'}
+			<div class="user-icon">
+				<Icon name="profile" size={22} />
+			</div>
 		{:else}
 			{@render happyPC()}
 		{/if}
@@ -103,4 +107,15 @@
 		gap: 16px;
 		text-wrap: wrap;
 	}
+
+	.user-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 16px;
+		background: var(--clr-theme-pop-element);
+		color: var(--clr-theme-pop-on-element);
+	}
 </style>

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

@@ -17,6 +17,7 @@
 	import { SETTINGS_SERVICE } from '$lib/config/appSettingsV2';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { combineResults } from '$lib/state/helpers';
+	import { USER } from '$lib/user/user';
 	import { inject } from '@gitbutler/shared/context';
 	import { Badge, Button } from '@gitbutler/ui';
 
@@ -28,6 +29,7 @@
 	const claudeCodeService = inject(CLAUDE_CODE_SERVICE);
 	const stackService = inject(STACK_SERVICE);
 	const settingsService = inject(SETTINGS_SERVICE);
+	const user = inject(USER);
 
 	const stacks = $derived(stackService.stacks(projectId));
 	const permissionRequests = $derived(claudeCodeService.permissionRequests({ projectId }));
@@ -159,7 +161,12 @@
 					>
 						{#snippet children([events, permissionRequests], { projectId: _projectId })}
 							{#each formatMessages(events, permissionRequests) as message}
-								<CodegenClaudeMessage {message} {onApproval} {onRejection} />
+								<CodegenClaudeMessage
+									{message}
+									{onApproval}
+									{onRejection}
+									userAvatarUrl={$user?.picture}
+								/>
 							{/each}
 							{@const lastUserMessageSent = lastUserMessageSentAt(events)}
 							{#if currentStatus(events) === 'running' && lastUserMessageSent}