feat: follow ups backend integration

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

@@ -15,7 +15,7 @@
 			  src.startsWith('/')
 			? src
 			: `/user.png`}
-	class=" {className} object-cover rounded-full -translate-y-[1px]"
+	class=" {className} object-cover rounded-full"
 	alt="profile"
 	draggable="false"
 />

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

@@ -48,6 +48,8 @@
 	import ContentRenderer from './ContentRenderer.svelte';
 	import { KokoroWorker } from '$lib/workers/KokoroWorker';
 	import FileItem from '$lib/components/common/FileItem.svelte';
+	import FollowUps from './ResponseMessage/FollowUps.svelte';
+	import { fade } from 'svelte/transition';
 
 	interface MessageType {
 		id: string;
@@ -606,7 +608,7 @@
 			/>
 		</div>
 
-		<div class="flex-auto w-0 pl-1 relative">
+		<div class="flex-auto w-0 pl-1 relative -translate-y-0.5">
 			<Name>
 				<Tooltip content={model?.name ?? message.model} placement="top-start">
 					<span class="line-clamp-1 text-black dark:text-white">
@@ -1425,6 +1427,17 @@
 							}}
 						/>
 					{/if}
+
+					{#if isLastMessage && message.done && !readOnly && (message?.followUps ?? []).length > 0}
+						<div class="mt-2.5" in:fade={{ duration: 50 }}>
+							<FollowUps
+								followUps={message?.followUps}
+								onClick={() => {
+									console.log('Follow-ups clicked');
+								}}
+							/>
+						</div>
+					{/if}
 				{/if}
 			</div>
 

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	export let followUps: string[] = [];
+	export let onClick: (followUp: string) => void = () => {};
+</script>
+
+<div class="mt-2">
+	<div class="text-xs text-gray-500 font-medium">
+		{$i18n.t('Follow up')}
+	</div>
+
+	<div class="flex flex-col text-left gap-1 mt-1.5">
+		{#each followUps as followUp, idx (idx)}
+			<button
+				class=" mr-2 py-1 bg-transparent text-left text-xs"
+				on:click={() => onClick(followUp)}
+				title={followUp}
+				aria-label={followUp}
+			>
+				{followUp}
+			</button>
+		{/each}
+	</div>
+</div>