refac

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

@@ -1,11 +1,21 @@
 <script lang="ts">
-	import { settings } from '$lib/stores';
-	import ProfileImageBase from './ProfileImageBase.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let className = 'size-8';
-	export let src = '';
+	export let src = `${WEBUI_BASE_URL}/static/favicon.png`;
 </script>
 
-<div class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}>
-	<ProfileImageBase {src} {className} />
-</div>
+<img
+	crossorigin="anonymous"
+	src={src === ''
+		? `${WEBUI_BASE_URL}/static/favicon.png`
+		: src.startsWith(WEBUI_BASE_URL) ||
+			  src.startsWith('https://www.gravatar.com/avatar/') ||
+			  src.startsWith('data:') ||
+			  src.startsWith('/')
+			? src
+			: `/user.png`}
+	class=" {className} object-cover rounded-full -translate-y-[1px]"
+	alt="profile"
+	draggable="false"
+/>

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { WEBUI_BASE_URL } from '$lib/constants';
-
-	export let className = 'size-8';
-	export let src = `${WEBUI_BASE_URL}/static/favicon.png`;
-</script>
-
-<img
-	crossorigin="anonymous"
-	src={src === ''
-		? `${WEBUI_BASE_URL}/static/favicon.png`
-		: src.startsWith(WEBUI_BASE_URL) ||
-			  src.startsWith('https://www.gravatar.com/avatar/') ||
-			  src.startsWith('data:') ||
-			  src.startsWith('/')
-			? src
-			: `/user.png`}
-	class=" {className} object-cover rounded-full -translate-y-[1px]"
-	alt="profile"
-	draggable="false"
-/>

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

@@ -477,10 +477,13 @@
 		id="message-{message.id}"
 		dir={$settings.chatDirection}
 	>
-		<ProfileImage
-			src={model?.info?.meta?.profile_image_url ??
-				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
-		/>
+		<div class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}>
+			<ProfileImage
+				src={model?.info?.meta?.profile_image_url ??
+					($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
+				className={'size-8'}
+			/>
+		</div>
 
 		<div class="flex-auto w-0 pl-1">
 			<Name>

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

@@ -88,11 +88,15 @@
 
 <div class=" flex w-full user-message" dir={$settings.chatDirection} id="message-{message.id}">
 	{#if !($settings?.chatBubble ?? true)}
-		<ProfileImage
-			src={message.user
-				? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ?? '/user.png')
-				: (user?.profile_image_url ?? '/user.png')}
-		/>
+		<div class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}>
+			<ProfileImage
+				src={message.user
+					? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ??
+						'/user.png')
+					: (user?.profile_image_url ?? '/user.png')}
+				className={'size-8'}
+			/>
+		</div>
 	{/if}
 	<div class="flex-auto w-0 max-w-full pl-1">
 		{#if !($settings?.chatBubble ?? true)}

src/lib/components/chat/Overview/Node.svelte

@@ -2,7 +2,7 @@
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
-	import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
+	import ProfileImage from '../Messages/ProfileImage.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Heart from '$lib/components/icons/Heart.svelte';
 
@@ -20,7 +20,7 @@
 	>
 		{#if data.message.role === 'user'}
 			<div class="flex w-full">
-				<ProfileImageBase
+				<ProfileImage
 					src={data.user?.profile_image_url ?? '/user.png'}
 					className={'size-5 -translate-y-[1px]'}
 				/>
@@ -40,7 +40,7 @@
 			</div>
 		{:else}
 			<div class="flex w-full">
-				<ProfileImageBase
+				<ProfileImage
 					src={data?.model?.info?.meta?.profile_image_url ?? ''}
 					className={'size-5 -translate-y-[1px]'}
 				/>