From 9d837efae69093c93781e38a354118dc58493682 Mon Sep 17 00:00:00 2001
From: Eddy <eddy@alles-watt-laeuft.de>
Date: Tue, 14 Apr 2026 12:44:50 +0200
Subject: [PATCH] =?UTF-8?q?Phase=207:=20UI-Verbesserungen=20=E2=80=94=20Co?=
 =?UTF-8?q?de-Copy,=20Edit,=20Regenerate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Code-Blöcke mit Copy-Button (📋) und Sprach-Label
- Nachrichten bearbeiten (✏️) mit Speichern & Senden
- Antwort regenerieren (🔄) für letzte Assistant-Nachricht
- Custom marked-Renderer für Code-Block-Wrapper
- MutationObserver für Streaming-kompatible Copy-Buttons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/lib/components/ChatPanel.svelte | 365 +++++++++++++++++++++++++++-
 src/lib/components/CodeBlock.svelte |  96 ++++++++
 2 files changed, 450 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/CodeBlock.svelte

diff --git a/src/lib/components/ChatPanel.svelte b/src/lib/components/ChatPanel.svelte
index 67b8e58..efa55ef 100644
--- a/src/lib/components/ChatPanel.svelte
+++ b/src/lib/components/ChatPanel.svelte
@@ -1,11 +1,22 @@
 <script lang="ts">
 	import { invoke } from '@tauri-apps/api/core';
 	import { messages, currentInput, isProcessing, addMessage, currentSessionId, messageToDb, type Message } from '$lib/stores/app';
-	import { marked } from 'marked';
+	import { marked, type Tokens } from 'marked';
 	import { tick, onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
 
-	marked.setOptions({ breaks: true, gfm: true });
+	// Custom Renderer für Code-Blöcke mit Wrapper
+	const renderer = new marked.Renderer();
+	renderer.code = function ({ text, lang }: Tokens.Code): string {
+		const language = lang || '';
+		const escapedCode = text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;');
+		return `<div class="code-block-wrapper" data-lang="${language}"><pre><code class="language-${language}">${escapedCode}</code></pre></div>`;
+	};
+
+	marked.setOptions({ breaks: true, gfm: true, renderer });
 
 	function renderMarkdown(text: string): string {
 		try {
@@ -15,8 +26,67 @@
 		}
 	}
 
+	// Svelte Action: Copy-Buttons zu Code-Blöcken hinzufügen
+	function addCopyButtons(node: HTMLElement) {
+		function processCodeBlocks() {
+			const wrappers = node.querySelectorAll('.code-block-wrapper:not([data-copy-added])');
+			wrappers.forEach((wrapper) => {
+				wrapper.setAttribute('data-copy-added', 'true');
+
+				const lang = wrapper.getAttribute('data-lang') || '';
+				const codeEl = wrapper.querySelector('code');
+				const codeText = codeEl?.textContent || '';
+
+				// Header mit Sprache und Copy-Button erstellen
+				const header = document.createElement('div');
+				header.className = 'code-header';
+
+				if (lang) {
+					const langSpan = document.createElement('span');
+					langSpan.className = 'code-lang';
+					langSpan.textContent = lang;
+					header.appendChild(langSpan);
+				}
+
+				const copyBtn = document.createElement('button');
+				copyBtn.className = 'copy-btn';
+				copyBtn.title = 'Code kopieren';
+				copyBtn.innerHTML = '📋';
+				copyBtn.onclick = async () => {
+					try {
+						await navigator.clipboard.writeText(codeText);
+						copyBtn.innerHTML = '<span class="copied">✓</span>';
+						setTimeout(() => (copyBtn.innerHTML = '📋'), 2000);
+					} catch (err) {
+						console.error('Kopieren fehlgeschlagen:', err);
+					}
+				};
+				header.appendChild(copyBtn);
+
+				wrapper.insertBefore(header, wrapper.firstChild);
+			});
+		}
+
+		// Initial verarbeiten
+		processCodeBlocks();
+
+		// MutationObserver für dynamische Inhalte (Streaming)
+		const observer = new MutationObserver(processCodeBlocks);
+		observer.observe(node, { childList: true, subtree: true });
+
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
+	}
+
 	let messagesContainer: HTMLDivElement;
 
+	// Edit-Modus State
+	let editingMessageId: string | null = $state(null);
+	let editingContent: string = $state('');
+
 	async function scrollToBottom() {
 		await tick();
 		if (messagesContainer) {
@@ -94,6 +164,107 @@
 			sendMessage();
 		}
 	}
+
+	// Edit-Funktionen
+	function startEdit(message: Message) {
+		editingMessageId = message.id;
+		editingContent = message.content;
+	}
+
+	function cancelEdit() {
+		editingMessageId = null;
+		editingContent = '';
+	}
+
+	async function confirmEdit() {
+		if (!editingMessageId || !editingContent.trim()) return;
+
+		const msgIndex = $messages.findIndex((m) => m.id === editingMessageId);
+		if (msgIndex === -1) return;
+
+		const updatedMessage = {
+			...$messages[msgIndex],
+			content: editingContent.trim(),
+			timestamp: new Date()
+		};
+
+		// Nachricht aktualisieren und alle folgenden entfernen
+		// (da sie auf der alten Nachricht basieren)
+		messages.update((msgs) => {
+			const newMsgs = [...msgs.slice(0, msgIndex), updatedMessage];
+			return newMsgs;
+		});
+
+		// Nachricht in DB aktualisieren
+		await saveMessageToDb(updatedMessage);
+
+		// Edit-Modus beenden
+		const newContent = editingContent.trim();
+		editingMessageId = null;
+		editingContent = '';
+
+		// Nachricht neu an Claude senden
+		$isProcessing = true;
+		try {
+			await invoke('send_message', { message: newContent });
+		} catch (err) {
+			console.error('Fehler beim Senden:', err);
+			addMessage('system', `Fehler: ${err}`);
+			$isProcessing = false;
+		}
+	}
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			confirmEdit();
+		} else if (event.key === 'Escape') {
+			cancelEdit();
+		}
+	}
+
+	// Regenerate: Antwort neu generieren
+	async function regenerateResponse(assistantMsgIndex: number) {
+		if ($isProcessing) return;
+
+		// Vorherige User-Nachricht finden
+		let userMsg: Message | null = null;
+		for (let i = assistantMsgIndex - 1; i >= 0; i--) {
+			if ($messages[i].role === 'user') {
+				userMsg = $messages[i];
+				break;
+			}
+		}
+
+		if (!userMsg) {
+			console.error('Keine User-Nachricht zum Regenerieren gefunden');
+			return;
+		}
+
+		// Alle Nachrichten ab der Assistant-Nachricht entfernen
+		messages.update((msgs) => msgs.slice(0, assistantMsgIndex));
+
+		// User-Nachricht erneut senden
+		$isProcessing = true;
+		try {
+			await invoke('send_message', { message: userMsg.content });
+		} catch (err) {
+			console.error('Fehler beim Regenerieren:', err);
+			addMessage('system', `Fehler: ${err}`);
+			$isProcessing = false;
+		}
+	}
+
+	// Prüfen ob eine Nachricht die letzte Assistant-Nachricht ist
+	function isLastAssistantMessage(index: number): boolean {
+		// Finde die letzte Assistant-Nachricht
+		for (let i = $messages.length - 1; i >= 0; i--) {
+			if ($messages[i].role === 'assistant' && $messages[i].content) {
+				return i === index;
+			}
+		}
+		return false;
+	}
 </script>
 
 <div class="chat-panel">
@@ -102,7 +273,7 @@
 		<span class="msg-count">{$messages.length} Nachrichten</span>
 	</div>
 
-	<div class="chat-messages" bind:this={messagesContainer}>
+	<div class="chat-messages" bind:this={messagesContainer} use:addCopyButtons>
 		{#if $messages.length === 0}
 			<div class="empty-state">
 				<div class="empty-icon">🤖</div>
@@ -110,8 +281,8 @@
 				<p class="hint">Enter = Senden, Shift+Enter = Neue Zeile, Escape = Stopp</p>
 			</div>
 		{:else}
-			{#each $messages as message}
-				<div class="message" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'}>
+			{#each $messages as message, index}
+				<div class="message" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:editing={editingMessageId === message.id}>
 					<div class="message-header">
 						<span class="message-role">
 							{#if message.role === 'user'}
@@ -122,12 +293,33 @@
 								⚙️ System
 							{/if}
 						</span>
-						<span class="message-time">
-							{message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
-						</span>
+						<div class="message-actions">
+							{#if message.role === 'user' && !$isProcessing && editingMessageId !== message.id}
+								<button class="action-btn" onclick={() => startEdit(message)} title="Bearbeiten">✏️</button>
+							{/if}
+							{#if message.role === 'assistant' && !$isProcessing && isLastAssistantMessage(index) && message.content}
+								<button class="action-btn" onclick={() => regenerateResponse(index)} title="Antwort neu generieren">🔄</button>
+							{/if}
+							<span class="message-time">
+								{message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+							</span>
+						</div>
 					</div>
 					<div class="message-content">
-						{#if message.role === 'assistant'}
+						{#if editingMessageId === message.id}
+							<textarea
+								class="edit-textarea"
+								bind:value={editingContent}
+								onkeydown={handleEditKeydown}
+								rows="3"
+							></textarea>
+							<div class="edit-actions">
+								<button class="edit-btn cancel" onclick={cancelEdit}>Abbrechen</button>
+								<button class="edit-btn confirm" onclick={confirmEdit} disabled={!editingContent.trim()}>
+									Speichern & Senden
+								</button>
+							</div>
+						{:else if message.role === 'assistant'}
 							{@html renderMarkdown(message.content)}
 						{:else}
 							{message.content}
@@ -268,11 +460,101 @@
 		font-weight: 600;
 	}
 
+	.message-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-xs);
+	}
+
+	.action-btn {
+		padding: 0.15rem 0.3rem;
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		opacity: 0;
+		transition: all 0.15s ease;
+		font-size: 0.7rem;
+	}
+
+	.message:hover .action-btn {
+		opacity: 0.6;
+	}
+
+	.action-btn:hover {
+		opacity: 1 !important;
+		background: var(--bg-tertiary);
+	}
+
 	.message-time {
 		font-size: 0.6rem;
 		color: var(--text-secondary);
 	}
 
+	/* Edit-Modus */
+	.message.editing {
+		border: 1px solid var(--accent);
+	}
+
+	.edit-textarea {
+		width: 100%;
+		min-height: 60px;
+		padding: var(--spacing-sm);
+		font-size: 0.85rem;
+		line-height: 1.5;
+		background: var(--bg-primary);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		resize: vertical;
+		font-family: inherit;
+	}
+
+	.edit-textarea:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.edit-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		margin-top: var(--spacing-xs);
+	}
+
+	.edit-btn {
+		padding: 0.3rem 0.75rem;
+		font-size: 0.75rem;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.edit-btn.cancel {
+		background: transparent;
+		border: 1px solid var(--border);
+		color: var(--text-secondary);
+	}
+
+	.edit-btn.cancel:hover {
+		background: var(--bg-tertiary);
+		color: var(--text-primary);
+	}
+
+	.edit-btn.confirm {
+		background: var(--accent);
+		border: 1px solid var(--accent);
+		color: white;
+	}
+
+	.edit-btn.confirm:hover:not(:disabled) {
+		background: var(--accent-hover);
+	}
+
+	.edit-btn.confirm:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
 	.message-content {
 		font-size: 0.85rem;
 		line-height: 1.6;
@@ -299,7 +581,68 @@
 		border-radius: var(--radius-sm);
 	}
 
-	.message-content :global(pre) {
+	/* Code-Block mit Header und Copy-Button */
+	.message-content :global(.code-block-wrapper) {
+		margin: 0.5em 0;
+		border-radius: var(--radius-md);
+		background: var(--bg-tertiary);
+		overflow: hidden;
+	}
+
+	.message-content :global(.code-header) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.3rem 0.75rem;
+		background: rgba(0, 0, 0, 0.15);
+		font-size: 0.65rem;
+		gap: 0.5rem;
+	}
+
+	.message-content :global(.code-lang) {
+		color: var(--text-secondary);
+		font-family: var(--font-mono);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.message-content :global(.copy-btn) {
+		margin-left: auto;
+		padding: 0.2rem 0.5rem;
+		background: transparent;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		color: var(--text-secondary);
+		font-size: 0.7rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.message-content :global(.copy-btn:hover) {
+		background: var(--bg-secondary);
+		color: var(--text-primary);
+		border-color: var(--text-secondary);
+	}
+
+	.message-content :global(.copy-btn .copied) {
+		color: var(--success);
+	}
+
+	.message-content :global(.code-block-wrapper pre) {
+		margin: 0;
+		padding: var(--spacing-sm) var(--spacing-md);
+		overflow-x: auto;
+		font-size: 0.75rem;
+		line-height: 1.5;
+	}
+
+	.message-content :global(.code-block-wrapper pre code) {
+		padding: 0;
+		background: none;
+	}
+
+	/* Fallback für inline pre (ohne wrapper) */
+	.message-content :global(pre:not(.code-block-wrapper pre)) {
 		margin: 0.5em 0;
 		padding: var(--spacing-sm) var(--spacing-md);
 		background: var(--bg-tertiary);
@@ -309,7 +652,7 @@
 		line-height: 1.4;
 	}
 
-	.message-content :global(pre code) {
+	.message-content :global(pre:not(.code-block-wrapper pre) code) {
 		padding: 0;
 		background: none;
 	}
diff --git a/src/lib/components/CodeBlock.svelte b/src/lib/components/CodeBlock.svelte
new file mode 100644
index 0000000..fcabe4f
--- /dev/null
+++ b/src/lib/components/CodeBlock.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	// CodeBlock — Code mit Syntax-Highlight und Copy-Button
+	// Standalone-Komponente für manuellen Einsatz
+
+	interface Props {
+		code: string;
+		language?: string;
+	}
+
+	let { code, language = '' }: Props = $props();
+
+	let copied = $state(false);
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch (err) {
+			console.error('Kopieren fehlgeschlagen:', err);
+		}
+	}
+</script>
+
+<div class="code-block">
+	<div class="code-header">
+		{#if language}
+			<span class="code-lang">{language}</span>
+		{/if}
+		<button class="copy-btn" onclick={copyToClipboard} title="Code kopieren">
+			{#if copied}
+				<span class="copied">✓ Kopiert</span>
+			{:else}
+				<span>📋</span>
+			{/if}
+		</button>
+	</div>
+	<pre><code class="language-{language}">{code}</code></pre>
+</div>
+
+<style>
+	.code-block {
+		position: relative;
+		margin: 0.5em 0;
+		border-radius: var(--radius-md);
+		background: var(--bg-tertiary);
+		overflow: hidden;
+	}
+
+	.code-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.25rem 0.75rem;
+		background: rgba(0, 0, 0, 0.2);
+		font-size: 0.65rem;
+	}
+
+	.code-lang {
+		color: var(--text-secondary);
+		font-family: var(--font-mono);
+		text-transform: uppercase;
+	}
+
+	.copy-btn {
+		padding: 0.2rem 0.5rem;
+		background: transparent;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		color: var(--text-secondary);
+		font-size: 0.7rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.copy-btn:hover {
+		background: var(--bg-secondary);
+		color: var(--text-primary);
+	}
+
+	.copied {
+		color: var(--success);
+	}
+
+	pre {
+		margin: 0;
+		padding: var(--spacing-sm) var(--spacing-md);
+		overflow-x: auto;
+		font-size: 0.75rem;
+		line-height: 1.5;
+	}
+
+	code {
+		font-family: var(--font-mono);
+	}
+</style>