can update previous message

src/lib/components/chat/Message.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Check, PenLine, X } from '@lucide/svelte';
 	import SvelteMarkdown from 'svelte-markdown';
 
 	import type { ChatMessage } from '$lib/helpers/types';
@@ -12,8 +13,13 @@
 	import Link from './markdown/Link.svelte';
 	import Hr from './markdown/Hr.svelte';
 	import Think from './markdown/Think.svelte';
+	import Button from '../ui/button/button.svelte';
 
-	let { message }: { message: ChatMessage } = $props();
+	let {
+		message,
+		nodeId,
+		onEdit
+	}: { message: ChatMessage; nodeId: string; onEdit?: (newContent: string) => void } = $props();
 
 	const renderers = {
 		paragraph: Paragraph,
@@ -26,15 +32,71 @@
 		link: Link,
 		hr: Hr
 	};
+
+	let isEditing = $state(false);
+	let editContent = $state('');
+
+	function handleEdit() {
+		editContent = message.content as string;
+		isEditing = true;
+	}
+
+	function handleSubmitEdit() {
+		const trimmed = editContent.trim();
+		if (trimmed) {
+			onEdit?.(trimmed);
+		}
+		isEditing = false;
+	}
+
+	function handleCancelEdit() {
+		isEditing = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmitEdit();
+		} else if (e.key === 'Escape') {
+			handleCancelEdit();
+		}
+	}
 </script>
 
 <main
-	class="pointer-events-auto cursor-auto p-1 text-lg leading-relaxed text-accent-foreground select-text"
+	class="group/message pointer-events-auto cursor-auto p-1 text-lg leading-relaxed text-accent-foreground select-text"
 >
 	{#if message?.role === 'user'}
-		<p class="">
-			{message.content}
-		</p>
+		{#if isEditing}
+			<div class="w-full">
+				<p
+					contenteditable="true"
+					bind:textContent={editContent}
+					class="w-full rounded-lg bg-accent px-2 py-1 outline-none"
+					onkeydown={handleKeydown}
+				></p>
+				<div class="mt-1.5 flex items-center justify-end gap-1">
+					<Button variant="transparent" size="icon-2xs" onclick={handleCancelEdit}>
+						<X class="size-3" />
+					</Button>
+					<Button variant="transparent" size="icon-2xs" onclick={handleSubmitEdit}>
+						<Check class="size-3 text-primary" />
+					</Button>
+				</div>
+			</div>
+		{:else}
+			<p class="relative max-w-max pr-8">
+				{message.content}
+				<Button
+					variant="transparent"
+					size="icon-2xs"
+					class="absolute top-0.5 right-0 opacity-0 group-hover/message:opacity-100"
+					onclick={handleEdit}
+				>
+					<PenLine class="size-3" />
+				</Button>
+			</p>
+		{/if}
 	{:else}
 		{#if message.reasoning}
 			<Think

src/lib/components/chat/User.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Send, X } from '@lucide/svelte';
+	import { PenLine, Send, X } from '@lucide/svelte';
 	import {
 		Handle,
 		useEdges,
@@ -43,6 +43,7 @@
 	let isFirstNode = $derived((nodeData.current?.data.isFirstNode as boolean) ?? false);
 	let showWelcome = $derived((nodeData.current?.data.showWelcome as boolean) ?? true);
 	let isParentNode = $derived((nodeData.current?.data.isParentNode as boolean) ?? false);
+	let isFromEdit = $derived((nodeData.current?.data.isFromEdit as boolean) ?? false);
 
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
 	let loading = $state.raw<boolean>(false);
@@ -153,6 +154,33 @@
 		deleteElements({ nodes: [{ id: id }] });
 	}
 
+	function handleEditMessage(newContent: string) {
+		const newNodeId = `user-${crypto.randomUUID()}`;
+		const prevMessages = messages.slice(0, -1);
+		const newNode: Node = {
+			id: newNodeId,
+			type: 'user',
+			position: { x: 0, y: 0 },
+			data: {
+				role: 'user',
+				selectedModels,
+				messages: prevMessages,
+				isFirstNode: false,
+				isFromEdit: true,
+				showWelcome: false,
+				isParentNode: true,
+				prompt: newContent
+			}
+		};
+		const newEdge: Edge = {
+			id: `edge-${crypto.randomUUID()}`,
+			source: id,
+			target: newNodeId
+		};
+		updateNodes((currentNodes) => [...currentNodes, newNode]);
+		updateEdges((currentEdges) => [...currentEdges, newEdge]);
+	}
+
 	onMount(() => {
 		if (prompt.trim() !== '' && prompt) {
 			handleTriggerAction();
@@ -165,6 +193,14 @@
 	class="group/user relative z-10 w-[calc(100dvw-2rem)] rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
 >
 	<div class="nodrag pointer-events-auto cursor-auto">
+		{#if isFromEdit}
+			<span
+				class="mb-2 inline-flex items-center justify-center gap-1 rounded-md bg-accent px-2 py-1 text-[11px] text-muted-foreground"
+			>
+				<PenLine class="size-2.5" />
+				Edited message
+			</span>
+		{/if}
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
 				<ListModels {selectedModels} showSelector={!lastMessage} onToggleModel={toggleModel} />
@@ -175,7 +211,7 @@
 		</header>
 		<ErrorMessage bind:error={errorMessage} />
 		{#if lastMessage}
-			<Message message={lastMessage} />
+			<Message nodeId={id} message={lastMessage} onEdit={handleEditMessage} />
 		{:else}
 			<footer class="flex flex-col items-end transition-all duration-300">
 				<textarea

src/lib/components/chat/markdown/Code.svelte

@@ -38,11 +38,11 @@
 		<div
 			class="flex items-center justify-between border-b border-border/60 bg-muted px-3 py-1.5 dark:bg-accent/30"
 		>
-			<span class="font-mono text-[11px] text-muted-foreground">{lang}</span>
+			<span class="font-mono text-sm text-muted-foreground">{lang}</span>
 		</div>
 	{/if}
 	<div class="group relative">
-		<HighlightAuto code={text} class="font-mono text-[11px] leading-relaxed" />
+		<HighlightAuto code={text} class="font-mono text-sm leading-relaxed" />
 		<Button
 			variant="outline"
 			class="absolute top-2 right-2 opacity-0 group-hover:opacity-100"

src/lib/components/chat/markdown/Codespan.svelte

@@ -3,6 +3,6 @@
 </script>
 
 <code
-	class="rounded-md border border-border/40 bg-accent-foreground/5 px-1.5 py-0.5 font-mono text-[11px] text-foreground/85"
+	class="rounded-md border border-border/40 bg-accent-foreground/5 px-1.5 py-0.5 font-mono text-xs text-foreground/85"
 	>{raw.replace(/`/g, '')}</code
 >

src/lib/components/chat/markdown/Heading.svelte

@@ -5,19 +5,19 @@
 </script>
 
 {#if depth === 1}
-	<h1 class="mt-4 mb-2 text-base font-semibold text-foreground first:mt-0">
+	<h1 class="mt-4 mb-2 text-2xl font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h1>
 {:else if depth === 2}
-	<h2 class="mt-3.5 mb-2 text-base font-semibold text-foreground first:mt-0">
+	<h2 class="mt-3.5 mb-2 text-xl font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h2>
 {:else if depth === 3}
-	<h3 class="mt-3 mb-1.5 text-sm font-semibold text-foreground first:mt-0">
+	<h3 class="mt-3 mb-1.5 text-lg font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h3>
 {:else}
-	<h4 class="mt-2.5 mb-1 text-sm font-semibold text-foreground first:mt-0">
+	<h4 class="mt-2.5 mb-1 text-base font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h4>
 {/if}

src/lib/components/chat/markdown/List.svelte

@@ -6,14 +6,14 @@
 
 {#if ordered}
 	<ol
-		class="my-2 list-outside list-decimal space-y-1 pl-5 text-xs text-foreground/90 marker:text-muted-foreground"
+		class="my-2 list-outside list-decimal space-y-1 pl-5 text-sm text-foreground/90 marker:text-muted-foreground"
 		{start}
 	>
 		{@render children?.()}
 	</ol>
 {:else}
 	<ul
-		class="my-2 list-outside list-disc space-y-1 pl-5 text-xs text-foreground/90 marker:text-muted-foreground"
+		class="my-2 list-outside list-disc space-y-1 pl-5 text-sm text-foreground/90 marker:text-muted-foreground"
 	>
 		{@render children?.()}
 	</ul>

src/lib/components/chat/markdown/Paragraph.svelte

@@ -3,4 +3,4 @@
 	let { children }: { children?: Snippet } = $props();
 </script>
 
-<p class="mb-3 text-xs leading-relaxed text-foreground/90 last:mb-0">{@render children?.()}</p>
+<p class="mb-3 text-sm leading-relaxed text-foreground/90 last:mb-0">{@render children?.()}</p>

src/lib/components/chat/markdown/think/Heading.svelte

@@ -5,19 +5,19 @@
 </script>
 
 {#if depth === 1}
-	<h1 class="mt-4 mb-2 text-2xl font-semibold text-foreground first:mt-0">
+	<h1 class="mt-4 mb-2 text-base font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h1>
 {:else if depth === 2}
-	<h2 class="mt-3.5 mb-2 text-xl font-semibold text-foreground first:mt-0">
+	<h2 class="mt-3.5 mb-2 text-sm font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h2>
 {:else if depth === 3}
-	<h3 class="mt-3 mb-1.5 text-lg font-semibold text-foreground first:mt-0">
+	<h3 class="mt-3 mb-1.5 text-sm font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h3>
 {:else}
-	<h4 class="mt-2.5 mb-1 text-base font-semibold text-foreground first:mt-0">
+	<h4 class="mt-2.5 mb-1 text-xs font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h4>
 {/if}

src/lib/components/ui/button/button.svelte

@@ -23,7 +23,9 @@
 					'bg-blue-500/10 text-blue-500 border border-blue-500/20 hover:bg-blue-500/20 shadow-xs',
 				'outline-destructive':
 					'bg-rose-500/10 hover:bg-rose-500/20 text-rose-600 border border-rose-500/20 shadow-xs',
-				amber: 'bg-amber-500 text-white hover:brightness-110 shadow-xs'
+				amber: 'bg-amber-500 text-white hover:brightness-110 shadow-xs',
+				transparent:
+					'bg-gray-200/50 text-gray-500 hover:bg-gray-200/80 border-transparent! dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800/80'
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',