71ab5ec830
All checks were successful
Build AppImage / build (push) Successful in 8m18s
- AnimatedFileEdit.svelte: neue Komponente fuer animierte Datei-Aenderungen im Praesentation-Fenster - Schulungsmodus: 5-Stufen-Speed-Regler (Lehrer 10cps bis Data-Modus instant+Glow) - Schulungsmodus: Live-Catchup-Button, Auto-Weiter nach Slide-Abschluss - ChatPanel: Permission-Mode-Toggle links vom Textfeld (default/acceptEdits/bypassPermissions) - ApprovalBar: Floating-Card mit blauem Glow, Buttons umbenannt (Anwenden/Ablehnen) - MessageList: Scroll-Guard mit scrollend-Event + 700ms-Fallback statt doppeltem rAF - MessageList: User-Nachrichten scrollen sofort nach unten (requestAnimationFrame + force) - Message.svelte: MessagePart[]-basiertes Rendering fuer chronologische Reihenfolge - events.ts: file-change sendet Slide an Praesentation-Fenster wenn offen - teaching.rs: presentation_send_slide_if_open Command - claude.rs: set/get_permission_mode Commands mit DB-Persistenz Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
439 lines
12 KiB
Svelte
439 lines
12 KiB
Svelte
<script lang="ts">
|
|
// Eine einzelne Chat-Message (Phase 8: VS-Code-Look)
|
|
//
|
|
// Layout: Avatar (Kreis 24px) links, Content rechts.
|
|
// User + Assistant beide linksbuendig — wie in der Claude-Code-Extension.
|
|
//
|
|
// Hover-Actions rechts oben: Edit (User), Regenerate (letzte Assistant),
|
|
// Copy, Das-merken, Rewind (Assistant).
|
|
|
|
import { messages, type Message, type InlineToolCall, type KnowledgeHint, type MessagePart } from '$lib/stores';
|
|
import { processingPhase } from '$lib/stores/events';
|
|
import { renderMarkdown } from '$lib/utils/markdown';
|
|
import ToolCardAuto from './ToolCardAuto.svelte';
|
|
import KnowledgeHintPill from './KnowledgeHintPill.svelte';
|
|
|
|
interface Props {
|
|
message: Message;
|
|
isLast?: boolean;
|
|
isStreaming?: boolean;
|
|
onEdit?: (id: string) => void;
|
|
onRegenerate?: (id: string) => void;
|
|
onRemember?: (m: Message) => void;
|
|
onRewind?: (id: string) => void;
|
|
}
|
|
|
|
let {
|
|
message,
|
|
isLast = false,
|
|
isStreaming = false,
|
|
onEdit,
|
|
onRegenerate,
|
|
onRemember,
|
|
onRewind,
|
|
}: Props = $props();
|
|
|
|
const userInitial = 'E';
|
|
|
|
const avatarChar = $derived.by(() => {
|
|
if (message.role === 'user') return userInitial;
|
|
if (message.role === 'system') return '!';
|
|
return '✱'; // ✱ Spark
|
|
});
|
|
|
|
const roleLabel = $derived.by(() => {
|
|
if (message.role === 'user') return 'Du';
|
|
if (message.role === 'system') return 'System';
|
|
return 'Claude';
|
|
});
|
|
|
|
const timeStr = $derived(
|
|
new Date(message.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
|
|
);
|
|
|
|
// Streaming-Sub-Label aus processingPhase
|
|
const phaseLabel = $derived.by(() => {
|
|
if (!isStreaming) return '';
|
|
switch ($processingPhase) {
|
|
case 'thinking': return 'denkt nach …';
|
|
case 'streaming': return 'streamt …';
|
|
case 'tool-use': return 'nutzt Tool …';
|
|
case 'subagent': return 'Subagent aktiv …';
|
|
default: return '';
|
|
}
|
|
});
|
|
|
|
// Klassische Hover-Actions
|
|
let copied = $state(false);
|
|
async function copyContent() {
|
|
try {
|
|
await navigator.clipboard.writeText(message.content);
|
|
copied = true;
|
|
setTimeout(() => (copied = false), 1500);
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
const showRegenerate = $derived(message.role === 'assistant' && isLast && onRegenerate);
|
|
const showEdit = $derived(message.role === 'user' && onEdit);
|
|
const showRewind = $derived(message.role === 'assistant' && onRewind);
|
|
|
|
const toolCalls = $derived<InlineToolCall[]>(message.toolCalls || []);
|
|
const knowledgeHints = $derived<KnowledgeHint[]>(message.knowledgeHints || []);
|
|
|
|
// Phase 11: chronologische Render-Liste. Wenn parts gesetzt sind (neue
|
|
// Messages + DB-rehydrierte), nutzen wir sie. Sonst Fallback auf alte
|
|
// Aufteilung (kann nach voller Migration entfallen).
|
|
const renderParts = $derived.by((): MessagePart[] => {
|
|
if (message.parts && message.parts.length > 0) return message.parts;
|
|
const fallback: MessagePart[] = [];
|
|
for (const c of toolCalls) fallback.push({ type: 'tool', call: c });
|
|
if (message.content) fallback.push({ type: 'text', content: message.content });
|
|
return fallback;
|
|
});
|
|
|
|
// Index des LETZTEN text-parts — nur dort darf der Streaming-Cursor stehen.
|
|
const lastTextIdx = $derived.by(() => {
|
|
for (let i = renderParts.length - 1; i >= 0; i--) {
|
|
if (renderParts[i].type === 'text') return i;
|
|
}
|
|
return -1;
|
|
});
|
|
|
|
// Copy-Buttons fuer Code-Bloecke (sicher: nur Effekt auf content-Aenderung,
|
|
// kein MutationObserver — verhindert OOM bei langem Streaming)
|
|
let contentEl: HTMLDivElement | null = null;
|
|
function decorateCodeBlocks() {
|
|
if (!contentEl) return;
|
|
const wrappers = contentEl.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 || '';
|
|
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 btn = document.createElement('button');
|
|
btn.className = 'copy-btn';
|
|
btn.title = 'Code kopieren';
|
|
btn.innerHTML = '📋';
|
|
btn.onclick = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(codeText);
|
|
btn.innerHTML = '✓';
|
|
setTimeout(() => (btn.innerHTML = '📋'), 1500);
|
|
} catch { /* ignore */ }
|
|
};
|
|
header.appendChild(btn);
|
|
wrapper.insertBefore(header, wrapper.firstChild);
|
|
});
|
|
}
|
|
|
|
$effect(() => {
|
|
void message.content; // bei Content-Aenderung neu dekorieren
|
|
queueMicrotask(decorateCodeBlocks);
|
|
});
|
|
</script>
|
|
|
|
<article class="msg" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:queued={message.queued}>
|
|
<div class="avatar" aria-hidden="true">{avatarChar}</div>
|
|
|
|
<div class="body">
|
|
<header class="msg-header">
|
|
<span class="role">{roleLabel}</span>
|
|
<span class="time">· {timeStr}</span>
|
|
{#if message.queued}
|
|
<span class="queued-tag">wartet</span>
|
|
{/if}
|
|
{#if isStreaming && phaseLabel}
|
|
<span class="phase">· {phaseLabel}</span>
|
|
{/if}
|
|
|
|
<span class="actions">
|
|
{#if showEdit}
|
|
<button class="act" title="Bearbeiten" onclick={() => onEdit?.(message.id)}>✏️</button>
|
|
{/if}
|
|
{#if showRegenerate}
|
|
<button class="act" title="Neu generieren" onclick={() => onRegenerate?.(message.id)}>🔄</button>
|
|
{/if}
|
|
<button class="act" title={copied ? 'Kopiert' : 'Kopieren'} onclick={copyContent}>
|
|
{copied ? '✓' : '📋'}
|
|
</button>
|
|
{#if onRemember}
|
|
<button class="act" title="Das merken" onclick={() => onRemember?.(message)}>💡</button>
|
|
{/if}
|
|
{#if showRewind}
|
|
<button class="act" title="Hierhin zuruecksetzen" onclick={() => onRewind?.(message.id)}>↶</button>
|
|
{/if}
|
|
</span>
|
|
</header>
|
|
|
|
<!-- KB-Hints sind Hintergrund-Hinweise (kein Stream-Event), daher oben.
|
|
Alles Andere (Text, Tool-Calls, eingebettete Gedanken) wird ueber
|
|
parts in echter chronologischer Reihenfolge gerendert. -->
|
|
{#if knowledgeHints.length > 0}
|
|
<div class="kb-hints">
|
|
{#each knowledgeHints as hint (hint.id)}
|
|
<KnowledgeHintPill {hint} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if renderParts.length > 0}
|
|
<div class="content" bind:this={contentEl}>
|
|
{#each renderParts as part, i (i)}
|
|
{#if part.type === 'text'}
|
|
<div class="text-part">
|
|
{@html renderMarkdown(part.content)}
|
|
{#if isStreaming && i === lastTextIdx}
|
|
<span class="cursor">▍</span>
|
|
{/if}
|
|
</div>
|
|
{:else if part.type === 'tool'}
|
|
<div class="tool-part">
|
|
<ToolCardAuto call={part.call} />
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{:else if isStreaming}
|
|
<div class="content faint">▍</div>
|
|
{/if}
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
.msg {
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr;
|
|
column-gap: 10px;
|
|
padding: 10px 14px;
|
|
/* User-konfigurierbar via chatAppearance Store (Settings → Chat-Darstellung) */
|
|
font-family: var(--chat-font-family, inherit);
|
|
font-size: var(--chat-font-size, 13px);
|
|
line-height: var(--chat-line-height, 1.55);
|
|
color: var(--vscode-editor-foreground);
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.msg + .msg { margin-top: 0; }
|
|
|
|
.msg.user {
|
|
background: transparent;
|
|
}
|
|
.msg.assistant {
|
|
background: rgba(255, 255, 255, 0.012);
|
|
}
|
|
.msg.system {
|
|
background: rgba(244, 135, 113, 0.06);
|
|
border-left: 2px solid var(--vscode-errorForeground);
|
|
}
|
|
.msg.queued {
|
|
opacity: 0.7;
|
|
border-left: 2px solid var(--vscode-warningForeground);
|
|
}
|
|
|
|
.avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
font-family: var(--font-sans);
|
|
user-select: none;
|
|
margin-top: 1px;
|
|
}
|
|
.msg.user .avatar {
|
|
background: var(--vscode-badge-background);
|
|
color: var(--vscode-badge-foreground);
|
|
}
|
|
.msg.assistant .avatar {
|
|
background: var(--vscode-button-background);
|
|
color: var(--vscode-button-foreground);
|
|
}
|
|
.msg.system .avatar {
|
|
background: var(--vscode-errorForeground);
|
|
color: #1e1e1e;
|
|
}
|
|
|
|
.body { min-width: 0; }
|
|
|
|
.msg-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
color: var(--vscode-descriptionForeground);
|
|
margin-bottom: 2px;
|
|
}
|
|
.role {
|
|
font-weight: 600;
|
|
color: var(--vscode-editor-foreground);
|
|
}
|
|
.time { color: var(--vscode-descriptionForeground); }
|
|
.phase {
|
|
color: var(--vscode-progressBar-background);
|
|
font-style: italic;
|
|
}
|
|
.queued-tag {
|
|
background: var(--vscode-warningForeground);
|
|
color: #1e1e1e;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 0 6px;
|
|
border-radius: 2px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 2px;
|
|
opacity: 0;
|
|
transition: opacity 0.12s;
|
|
}
|
|
.msg:hover .actions { opacity: 1; }
|
|
|
|
.act {
|
|
font-size: 11px;
|
|
padding: 1px 5px;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
.act:hover {
|
|
color: var(--vscode-editor-foreground);
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
|
|
.content {
|
|
/* Schrift wird von .msg geerbt (User-konfigurierbar) */
|
|
word-wrap: break-word;
|
|
}
|
|
.content.faint { color: var(--vscode-descriptionForeground); }
|
|
|
|
/* Markdown global styles innerhalb .content — kommen aus app.css fuer
|
|
pre/code; wir setzen nur ein paar Anpassungen fuer den VS-Code-Look. */
|
|
.content :global(p) { margin: 4px 0; }
|
|
.content :global(ul), .content :global(ol) { margin: 4px 0 4px 20px; }
|
|
.content :global(h1), .content :global(h2), .content :global(h3) {
|
|
margin: 10px 0 4px 0;
|
|
font-weight: 600;
|
|
}
|
|
.content :global(h1) { font-size: 1.25em; }
|
|
.content :global(h2) { font-size: 1.13em; }
|
|
.content :global(h3) { font-size: 1.05em; }
|
|
.content :global(.code-block-wrapper) {
|
|
background: var(--vscode-terminal-background);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 4px;
|
|
margin: 6px 0;
|
|
overflow: hidden;
|
|
}
|
|
.content :global(.code-header) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
font-size: 10.5px;
|
|
gap: 6px;
|
|
}
|
|
.content :global(.code-lang) {
|
|
color: var(--vscode-descriptionForeground);
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.content :global(.copy-btn) {
|
|
margin-left: auto;
|
|
padding: 1px 6px;
|
|
background: transparent;
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 2px;
|
|
color: var(--vscode-descriptionForeground);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
.content :global(.copy-btn:hover) {
|
|
background: var(--vscode-list-hoverBackground);
|
|
color: var(--vscode-editor-foreground);
|
|
}
|
|
.content :global(.code-block-wrapper pre) {
|
|
margin: 0;
|
|
padding: 6px 10px;
|
|
background: transparent;
|
|
border: 0;
|
|
font-size: var(--chat-code-font-size, 12px);
|
|
line-height: 1.55;
|
|
overflow-x: auto;
|
|
}
|
|
.content :global(code) {
|
|
font-family: var(--font-mono);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
font-size: var(--chat-code-font-size, 12.5px);
|
|
}
|
|
.content :global(.thinking-inline) {
|
|
display: block;
|
|
margin: 6px 0;
|
|
padding: 6px 10px;
|
|
background: rgba(99, 102, 241, 0.06);
|
|
border-left: 3px solid rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
.content :global(.thinking-label) { margin-right: 4px; }
|
|
.content :global(a) { color: var(--link); }
|
|
|
|
.cursor {
|
|
display: inline-block;
|
|
color: var(--vscode-progressBar-background, var(--accent, #007acc));
|
|
margin-left: 2px;
|
|
font-weight: 600;
|
|
/* weicheres Pulsieren statt hartem on/off — wirkt "lebendiger",
|
|
aehnlich Codium/Claude-Code-Extension */
|
|
animation: caret-pulse 1.1s ease-in-out infinite;
|
|
text-shadow: 0 0 4px var(--vscode-progressBar-background, var(--accent, #007acc));
|
|
}
|
|
@keyframes caret-pulse {
|
|
0%, 100% { opacity: 0.25; transform: scaleY(1); }
|
|
45% { opacity: 1; transform: scaleY(1.05); }
|
|
50% { opacity: 1; transform: scaleY(1.05); }
|
|
}
|
|
|
|
.tool-calls {
|
|
margin: 2px 0 8px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
/* Phase 11: einzelner Tool-Part im chronologischen Strom */
|
|
.tool-part {
|
|
margin: 6px 0;
|
|
}
|
|
.text-part + .tool-part,
|
|
.tool-part + .text-part,
|
|
.tool-part + .tool-part {
|
|
margin-top: 4px;
|
|
}
|
|
.text-part:not(:first-child) {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.kb-hints {
|
|
margin: 2px 0 4px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
</style>
|