feat: Thinking-Blocks inline + Live Tool-Status im Chat [appimage]
All checks were successful
Build AppImage / build (push) Successful in 6m3s
All checks were successful
Build AppImage / build (push) Successful in 6m3s
- Thinking-Blocks immer sichtbar (kein Collapse), kleine Schrift, dezent - Inline Tool-Status waehrend Verarbeitung (wie VSCodium Extension) - currentTool Store fuer Echtzeit-Anzeige (Liest/Bearbeitet/Sucht...) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eddy
parent
2b7dfa6e37
commit
54b58cf166
3 changed files with 127 additions and 94 deletions
|
|
@ -543,12 +543,11 @@ async function sendMessage(message, requestId, model = null, contextOverride = n
|
|||
fullText += block.text;
|
||||
sendEvent('text', { text: block.text });
|
||||
} else if (block.type === 'thinking' && block.thinking) {
|
||||
// Extended Thinking — als kollabierbaren Block im ChatGPT/Claude.ai-Style
|
||||
const thinkLines = block.thinking.split('\n').length;
|
||||
// Extended Thinking — als kompaktes Inline-Element (immer sichtbar)
|
||||
const escaped = block.thinking.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
const collapsed = `<details class="thinking-block"><summary><svg class="thinking-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.4V19a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1.6c2.9-1.1 5-4 5-7.4a8 8 0 0 0-8-8z"/><line x1="9" y1="22" x2="15" y2="22"/></svg><span class="thinking-label">Überlegung</span><span class="thinking-meta">${thinkLines} Zeilen</span><svg class="thinking-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></summary><div class="thinking-content">${escaped}</div></details>\n\n`;
|
||||
fullText += collapsed;
|
||||
sendEvent('text', { text: collapsed });
|
||||
const inlineThinking = `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${escaped}</span></div>\n\n`;
|
||||
fullText += inlineThinking;
|
||||
sendEvent('text', { text: inlineThinking });
|
||||
} else if (block.type === 'tool_use') {
|
||||
// Tool-Call von Main-Agent — manuell weiterreichen, damit
|
||||
// der tool_use-Case weiter unten greift
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { emit } from '@tauri-apps/api/event';
|
||||
import { messages, currentInput, isProcessing, addMessage, currentSessionId, messageToDb, queuedMessage, messageQueue, type Message } from '$lib/stores/app';
|
||||
import { currentTool } from '$lib/stores/events';
|
||||
import { marked, type Tokens } from 'marked';
|
||||
import { tick, onDestroy, onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
|
|
@ -53,14 +54,22 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* Erkennt "Denk-Blöcke" im Text und packt sie in kollabierbare Blöcke.
|
||||
* Erkennt "Denk-Blöcke" im Text und zeigt sie als kompakte Inline-Elemente.
|
||||
* Zwei Quellen:
|
||||
* 1. SDK Extended-Thinking (kommt als <details class="thinking-block"> von Bridge)
|
||||
* 1. SDK Extended-Thinking (kommt als <div class="thinking-inline"> von Bridge)
|
||||
* 2. Text-basierte Patterns (Lass mich analysieren..., Ich schaue mir...)
|
||||
*/
|
||||
function collapseThinkingBlocks(text: string): string {
|
||||
// Bereits von Bridge als <details> geliefert? Nicht nochmal wrappen.
|
||||
if (text.includes('<details class="thinking-block">')) return text;
|
||||
// Bereits von Bridge als inline-div geliefert? Nicht nochmal wrappen.
|
||||
if (text.includes('<div class="thinking-inline">')) return text;
|
||||
|
||||
// Legacy: Falls noch alte <details> vorhanden, konvertieren
|
||||
if (text.includes('<details class="thinking-block">')) {
|
||||
return text.replace(
|
||||
/<details class="thinking-block">.*?<div class="thinking-content">([\s\S]*?)<\/div><\/details>/g,
|
||||
(_match, content) => `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${content}</span></div>`
|
||||
);
|
||||
}
|
||||
|
||||
// Pattern: Text beginnt mit Analyse/Überlegungs-Block, dann kommt die Antwort
|
||||
const thinkingPatterns = [
|
||||
|
|
@ -72,14 +81,37 @@
|
|||
if (match && match[1] && match[1].split('\n').length > 5) {
|
||||
const thinkingPart = match[1].trim().replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
const answerPart = match[2].trim();
|
||||
const lines = match[1].trim().split('\n').length;
|
||||
return `<details class="thinking-block"><summary><svg class="thinking-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.4V19a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1.6c2.9-1.1 5-4 5-7.4a8 8 0 0 0-8-8z"/><line x1="9" y1="22" x2="15" y2="22"/></svg><span class="thinking-label">Überlegung</span><span class="thinking-meta">${lines} Zeilen</span><svg class="thinking-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></summary><div class="thinking-content">${thinkingPart}</div></details>\n\n${answerPart}`;
|
||||
return `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${thinkingPart}</span></div>\n\n${answerPart}`;
|
||||
}
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
// Tool-Aktivitätsanzeige Hilfsfunktionen
|
||||
function getToolIcon(tool: string): string {
|
||||
const icons: Record<string, string> = {
|
||||
'Read': '\u{1F4D6}', 'Write': '\u{270F}\u{FE0F}', 'Edit': '\u{270F}\u{FE0F}',
|
||||
'Bash': '\u{26A1}', 'Grep': '\u{1F50D}', 'Glob': '\u{1F50D}',
|
||||
'Task': '\u{1F916}', 'Agent': '\u{1F916}',
|
||||
};
|
||||
return icons[tool] || '\u{2699}\u{FE0F}';
|
||||
}
|
||||
|
||||
function getToolLabel(tool: string, input: Record<string, unknown> | null): string {
|
||||
if (!input) return `${tool}...`;
|
||||
switch(tool) {
|
||||
case 'Read': return `Liest ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
|
||||
case 'Write': return `Schreibt ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
|
||||
case 'Edit': return `Bearbeitet ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
|
||||
case 'Bash': return `Fuehrt aus: ${((input.command as string) || '').substring(0, 40)}...`;
|
||||
case 'Grep': return `Sucht: ${(input.pattern as string) || ''}...`;
|
||||
case 'Glob': return `Sucht Dateien: ${(input.pattern as string) || ''}...`;
|
||||
case 'Task': case 'Agent': return `Delegiert: ${((input.description as string) || (input.prompt as string) || '').substring(0, 40)}...`;
|
||||
default: return `${tool}...`;
|
||||
}
|
||||
}
|
||||
|
||||
// Svelte Action: Copy-Buttons zu Code-Blöcken hinzufügen
|
||||
function addCopyButtons(node: HTMLElement) {
|
||||
function processCodeBlocks() {
|
||||
|
|
@ -901,6 +933,17 @@
|
|||
{/if}
|
||||
{/if}
|
||||
{:else if $isProcessing}
|
||||
{#if $currentTool}
|
||||
<div class="tool-status">
|
||||
<span class="tool-icon">{getToolIcon($currentTool.tool)}</span>
|
||||
<span class="tool-label">{getToolLabel($currentTool.tool, $currentTool.input)}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="tool-status">
|
||||
<span class="tool-icon">{'\u{1F9E0}'}</span>
|
||||
<span class="tool-label">Denkt nach...</span>
|
||||
</div>
|
||||
{/if}
|
||||
<span class="typing">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
|
|
@ -921,12 +964,25 @@
|
|||
<!-- Nur zeigen wenn noch gar keine assistant-message da ist -->
|
||||
<div class="message assistant typing-msg">
|
||||
<div class="message-header">
|
||||
<span class="message-role">🤖 Claude</span>
|
||||
<span class="message-role">{'\u{1F916}'} Claude</span>
|
||||
</div>
|
||||
<div class="message-content typing">
|
||||
<div class="message-content">
|
||||
{#if $currentTool}
|
||||
<div class="tool-status">
|
||||
<span class="tool-icon">{getToolIcon($currentTool.tool)}</span>
|
||||
<span class="tool-label">{getToolLabel($currentTool.tool, $currentTool.input)}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="tool-status">
|
||||
<span class="tool-icon">{'\u{1F9E0}'}</span>
|
||||
<span class="tool-label">Denkt nach...</span>
|
||||
</div>
|
||||
{/if}
|
||||
<span class="typing">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -1424,101 +1480,70 @@
|
|||
background: var(--bg-hover, #333);
|
||||
}
|
||||
|
||||
/* Thinking-Block — ChatGPT/Claude.ai Style */
|
||||
.message-content :global(details.thinking-block) {
|
||||
margin: 8px 0 12px 0;
|
||||
background: #161b27;
|
||||
border: 1px solid #1e2a3a;
|
||||
border-left: 3px solid #374151;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-left-color 0.2s ease;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block:hover) {
|
||||
border-left-color: #6366f1;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block[open]) {
|
||||
border-left-color: #6366f1;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block summary) {
|
||||
/* Thinking-Inline — kompakte, immer sichtbare Denkbloecke */
|
||||
.message-content :global(.thinking-inline) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block summary::-webkit-details-marker) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block summary::marker) {
|
||||
display: none;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block summary:hover) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.message-content :global(svg.thinking-icon) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #6366f1;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin: 0.3rem 0;
|
||||
background: rgba(99, 102, 241, 0.06);
|
||||
border-left: 2px solid rgba(99, 102, 241, 0.3);
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.4;
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
}
|
||||
|
||||
.message-content :global(.thinking-label) {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.message-content :global(.thinking-meta) {
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message-content :global(svg.thinking-chevron) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.message-content :global(details.thinking-block[open] svg.thinking-chevron) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.message-content :global(.thinking-content) {
|
||||
padding: 0 14px 12px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
.message-content :global(.thinking-text) {
|
||||
white-space: pre-wrap;
|
||||
max-height: 300px;
|
||||
word-break: break-word;
|
||||
font-family: inherit;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #1e2a3a;
|
||||
}
|
||||
|
||||
.message-content :global(.thinking-content::-webkit-scrollbar) {
|
||||
.message-content :global(.thinking-text::-webkit-scrollbar) {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.message-content :global(.thinking-content::-webkit-scrollbar-thumb) {
|
||||
.message-content :global(.thinking-text::-webkit-scrollbar-thumb) {
|
||||
background: #374151;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Tool-Aktivitaetsanzeige */
|
||||
.tool-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
margin: 0.2rem 0;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
animation: fadeInTool 0.2s ease;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-label {
|
||||
opacity: 0.8;
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@keyframes fadeInTool {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Markdown-Styles innerhalb von Nachrichten */
|
||||
.message-content :global(p) {
|
||||
margin: 0.3em 0;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
import { listen, type UnlistenFn } from '@tauri-apps/api/event';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { get } from 'svelte/store';
|
||||
import { writable, get } from 'svelte/store';
|
||||
import {
|
||||
agents,
|
||||
toolCalls,
|
||||
|
|
@ -31,6 +31,9 @@ import {
|
|||
type AgentMode
|
||||
} from './app';
|
||||
|
||||
// Aktuell laufendes Tool (für inline Aktivitätsanzeige)
|
||||
export const currentTool = writable<{ tool: string; input: Record<string, unknown> } | null>(null);
|
||||
|
||||
// Event-Typen vom Backend
|
||||
interface AgentEvent {
|
||||
id: string;
|
||||
|
|
@ -183,6 +186,7 @@ export async function initEventListeners(): Promise<void> {
|
|||
console.log('⏹️ Alle Agents gestoppt');
|
||||
agents.update((ags) => ags.map((a) => ({ ...a, status: 'stopped' as const })));
|
||||
isProcessing.set(false);
|
||||
currentTool.set(null);
|
||||
streamingMessageId = null;
|
||||
})
|
||||
);
|
||||
|
|
@ -217,6 +221,9 @@ export async function initEventListeners(): Promise<void> {
|
|||
const { tool, input } = event.payload;
|
||||
console.log('🔧 Tool Start:', tool);
|
||||
|
||||
// Inline-Aktivitätsanzeige aktualisieren
|
||||
currentTool.set({ tool: tool || 'unknown', input: input || {} });
|
||||
|
||||
agents.update((ags) => {
|
||||
const activeAgent = ags.find((a) => a.status === 'active');
|
||||
if (activeAgent) {
|
||||
|
|
@ -264,6 +271,7 @@ export async function initEventListeners(): Promise<void> {
|
|||
await listen<ToolEvent>('tool-end', (event) => {
|
||||
const { id, tool, success, output } = event.payload;
|
||||
console.log('✅ Tool Ende:', id, success ? 'OK' : 'FEHLER');
|
||||
currentTool.set(null);
|
||||
completeToolCall(id, output, !success);
|
||||
|
||||
// Hook: post-tool-use (fire-and-forget, Fehler blockieren nicht)
|
||||
|
|
@ -406,6 +414,7 @@ export async function initEventListeners(): Promise<void> {
|
|||
// Alle Agents auf "stopped" setzen, aber Messages NICHT löschen
|
||||
agents.update((ags) => ags.map((a) => ({ ...a, status: 'stopped' as const })));
|
||||
toolCalls.set([]);
|
||||
currentTool.set(null);
|
||||
isProcessing.set(false);
|
||||
})
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue