Feature: Claude Assistent Chat in TaskMate
Neuer Tab "Assistent" mit interaktiver Claude Code Session: - Chat-UI mit Session-Verwaltung (History, neue/alte Sessions) - Claude CLI als Child-Process auf dem Host (interaktiv, mit Rueckfragen) - Streaming-Output per Socket.io - Nur fuer autorisierte User (Hendrik, Monami) - 30 Min Inaktivitaets-Timeout - Task-Uebergabe: Button im Task-Modal sendet Aufgabe an Assistenten - Chat-Verlauf wird in DB gespeichert Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Server Deploy
@@ -1350,6 +1350,26 @@ class ApiClient {
|
||||
async getContactTags() {
|
||||
return this.get('/contacts/tags/all');
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// ASSISTANT
|
||||
// =============================================================================
|
||||
|
||||
async getAssistantSessions() {
|
||||
return this.get('/assistant/sessions');
|
||||
}
|
||||
|
||||
async getAssistantMessages(sessionId) {
|
||||
return this.get(`/assistant/sessions/${sessionId}/messages`);
|
||||
}
|
||||
|
||||
async createAssistantSession(data) {
|
||||
return this.post('/assistant/sessions', data);
|
||||
}
|
||||
|
||||
async deleteAssistantSession(id) {
|
||||
return this.delete(`/assistant/sessions/${id}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom API Error Class
|
||||
|
||||
@@ -25,6 +25,7 @@ import codingManager from './coding.js';
|
||||
import mobileManager from './mobile.js';
|
||||
import reminderManager from './reminders.js';
|
||||
import pwaManager from './pwa.js';
|
||||
import assistantManager from './assistant.js';
|
||||
import { $, $$, debounce, getFromStorage, setToStorage } from './utils.js';
|
||||
|
||||
class App {
|
||||
@@ -90,6 +91,9 @@ class App {
|
||||
// Initialize knowledge manager
|
||||
await knowledgeManager.init();
|
||||
|
||||
// Initialize assistant manager
|
||||
await assistantManager.init();
|
||||
|
||||
// Initialize mobile features
|
||||
mobileManager.init();
|
||||
|
||||
@@ -708,6 +712,13 @@ class App {
|
||||
knowledgeManager.hide();
|
||||
}
|
||||
|
||||
// Show/hide assistant manager
|
||||
if (view === 'assistant') {
|
||||
assistantManager.show();
|
||||
} else {
|
||||
assistantManager.hide();
|
||||
}
|
||||
|
||||
// Initialize contacts view when switching to it
|
||||
if (view === 'contacts') {
|
||||
window.initContactsPromise = window.initContactsPromise || import('./contacts.js').then(module => {
|
||||
|
||||
455
frontend/js/assistant.js
Normale Datei
455
frontend/js/assistant.js
Normale Datei
@@ -0,0 +1,455 @@
|
||||
/**
|
||||
* TASKMATE - Assistant Manager
|
||||
* ============================
|
||||
* Claude Assistant Chat Interface
|
||||
*/
|
||||
|
||||
import api from './api.js';
|
||||
import syncManager from './sync.js';
|
||||
import { $ } from './utils.js';
|
||||
|
||||
class AssistantManager {
|
||||
constructor() {
|
||||
this.sessions = [];
|
||||
this.currentSessionId = null;
|
||||
this.sessionStatus = null; // running, ended, stopped, error
|
||||
this.streamingMessageEl = null;
|
||||
this.streamingContent = '';
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
async init() {
|
||||
if (this.initialized) return;
|
||||
|
||||
// DOM Elements
|
||||
this.sessionsListEl = $('#assistant-sessions-list');
|
||||
this.messagesEl = $('#assistant-messages');
|
||||
this.inputEl = $('#assistant-input');
|
||||
this.sendBtn = $('#btn-send-message');
|
||||
this.newSessionBtn = $('#btn-new-session');
|
||||
this.chatTitleEl = $('#assistant-chat-title');
|
||||
this.statusBadgeEl = $('#assistant-status-badge');
|
||||
this.chatEl = document.querySelector('.assistant-chat');
|
||||
this.emptyEl = $('#assistant-empty');
|
||||
|
||||
this.bindEvents();
|
||||
this.setupSocketListeners();
|
||||
this.updateChatState();
|
||||
|
||||
this.initialized = true;
|
||||
console.log('[Assistant] Initialized');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// New session
|
||||
this.newSessionBtn?.addEventListener('click', () => this.startSession());
|
||||
|
||||
// Send message
|
||||
this.sendBtn?.addEventListener('click', () => this.sendMessage());
|
||||
|
||||
// Textarea: Enter sends, Shift+Enter new line, auto-resize
|
||||
this.inputEl?.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
this.inputEl?.addEventListener('input', () => {
|
||||
this.autoResizeInput();
|
||||
});
|
||||
}
|
||||
|
||||
setupSocketListeners() {
|
||||
const socket = syncManager.socket;
|
||||
if (!socket) {
|
||||
// Socket not yet connected, wait for it
|
||||
const checkSocket = setInterval(() => {
|
||||
if (syncManager.socket) {
|
||||
clearInterval(checkSocket);
|
||||
this._attachSocketEvents(syncManager.socket);
|
||||
}
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
this._attachSocketEvents(socket);
|
||||
}
|
||||
|
||||
_attachSocketEvents(socket) {
|
||||
// Streaming output
|
||||
socket.on('assistant:output', (data) => {
|
||||
if (data.sessionId !== this.currentSessionId) return;
|
||||
this.handleOutput(data.content);
|
||||
});
|
||||
|
||||
// Status changes
|
||||
socket.on('assistant:status', (data) => {
|
||||
if (data.sessionId && data.sessionId !== this.currentSessionId) return;
|
||||
|
||||
if (data.status === 'error') {
|
||||
this.setStatus('error');
|
||||
this.showToast(data.error || 'Fehler beim Assistenten', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.setStatus(data.status);
|
||||
|
||||
// If session ended, finalize streaming
|
||||
if (data.status === 'ended' || data.status === 'stopped') {
|
||||
this.finalizeStreaming();
|
||||
this.loadSessions();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// =====================
|
||||
// SHOW / HIDE
|
||||
// =====================
|
||||
|
||||
async show() {
|
||||
await this.loadSessions();
|
||||
}
|
||||
|
||||
hide() {
|
||||
// Nothing to clean up
|
||||
}
|
||||
|
||||
// =====================
|
||||
// SESSIONS
|
||||
// =====================
|
||||
|
||||
async loadSessions() {
|
||||
try {
|
||||
this.sessions = await api.getAssistantSessions();
|
||||
this.renderSessionsList();
|
||||
} catch (err) {
|
||||
console.error('[Assistant] Fehler beim Laden der Sessions:', err);
|
||||
}
|
||||
}
|
||||
|
||||
renderSessionsList() {
|
||||
if (!this.sessionsListEl) return;
|
||||
|
||||
if (this.sessions.length === 0) {
|
||||
this.sessionsListEl.innerHTML = '<div style="padding: 16px; text-align: center; color: var(--text-muted); font-size: var(--text-sm);">Keine Sessions vorhanden</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.sessionsListEl.innerHTML = this.sessions.map(s => {
|
||||
const isActive = s.id === this.currentSessionId;
|
||||
const date = new Date(s.created_at);
|
||||
const dateStr = `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
|
||||
const statusLabel = s.status === 'active' ? 'Aktiv' : 'Beendet';
|
||||
|
||||
return `
|
||||
<div class="assistant-session-item ${isActive ? 'active' : ''}" data-session-id="${s.id}">
|
||||
<div class="assistant-session-info">
|
||||
<div class="assistant-session-title">${this.escapeHtml(s.title)}</div>
|
||||
<div class="assistant-session-meta">${dateStr} - ${statusLabel}</div>
|
||||
</div>
|
||||
<button class="assistant-session-delete" data-delete-id="${s.id}" title="Session loeschen">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Click handlers
|
||||
this.sessionsListEl.querySelectorAll('.assistant-session-item').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.assistant-session-delete')) return;
|
||||
const id = parseInt(el.dataset.sessionId, 10);
|
||||
this.selectSession(id);
|
||||
});
|
||||
});
|
||||
|
||||
this.sessionsListEl.querySelectorAll('.assistant-session-delete').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = parseInt(btn.dataset.deleteId, 10);
|
||||
this.deleteSession(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async selectSession(id) {
|
||||
this.currentSessionId = id;
|
||||
const session = this.sessions.find(s => s.id === id);
|
||||
|
||||
if (session) {
|
||||
this.chatTitleEl.textContent = session.title;
|
||||
this.setStatus(session.status === 'active' ? 'ended' : session.status);
|
||||
}
|
||||
|
||||
this.renderSessionsList();
|
||||
this.updateChatState();
|
||||
await this.loadMessages(id);
|
||||
}
|
||||
|
||||
async loadMessages(sessionId) {
|
||||
if (!this.messagesEl) return;
|
||||
this.messagesEl.innerHTML = '';
|
||||
|
||||
try {
|
||||
const messages = await api.getAssistantMessages(sessionId);
|
||||
messages.forEach(msg => {
|
||||
this.renderMessage(msg.role, msg.content);
|
||||
});
|
||||
this.scrollToBottom();
|
||||
} catch (err) {
|
||||
console.error('[Assistant] Fehler beim Laden der Nachrichten:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async startSession(taskContext = null) {
|
||||
try {
|
||||
const session = await api.createAssistantSession({
|
||||
title: 'Neue Session',
|
||||
taskContext
|
||||
});
|
||||
|
||||
this.currentSessionId = session.id;
|
||||
this.chatTitleEl.textContent = session.title;
|
||||
this.messagesEl.innerHTML = '';
|
||||
this.setStatus('running');
|
||||
this.updateChatState();
|
||||
|
||||
// Start Claude process via Socket
|
||||
const socket = syncManager.socket;
|
||||
if (socket) {
|
||||
socket.emit('assistant:start', { sessionId: session.id });
|
||||
}
|
||||
|
||||
await this.loadSessions();
|
||||
this.showToast('Session gestartet', 'success');
|
||||
} catch (err) {
|
||||
console.error('[Assistant] Fehler beim Starten:', err);
|
||||
this.showToast('Fehler beim Starten der Session', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async deleteSession(id) {
|
||||
if (!confirm('Session wirklich loeschen?')) return;
|
||||
|
||||
try {
|
||||
await api.deleteAssistantSession(id);
|
||||
|
||||
if (this.currentSessionId === id) {
|
||||
this.currentSessionId = null;
|
||||
this.messagesEl.innerHTML = '';
|
||||
this.chatTitleEl.textContent = 'Assistent';
|
||||
this.setStatus(null);
|
||||
this.updateChatState();
|
||||
}
|
||||
|
||||
await this.loadSessions();
|
||||
this.showToast('Session geloescht', 'success');
|
||||
} catch (err) {
|
||||
console.error('[Assistant] Fehler beim Loeschen:', err);
|
||||
this.showToast('Fehler beim Loeschen', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async endSession() {
|
||||
const socket = syncManager.socket;
|
||||
if (socket) {
|
||||
socket.emit('assistant:stop');
|
||||
}
|
||||
}
|
||||
|
||||
// =====================
|
||||
// MESSAGING
|
||||
// =====================
|
||||
|
||||
sendMessage() {
|
||||
const text = this.inputEl?.value?.trim();
|
||||
if (!text || !this.currentSessionId) return;
|
||||
|
||||
// Render user message
|
||||
this.renderMessage('user', text);
|
||||
this.inputEl.value = '';
|
||||
this.autoResizeInput();
|
||||
this.scrollToBottom();
|
||||
|
||||
// Send via socket
|
||||
const socket = syncManager.socket;
|
||||
if (socket) {
|
||||
socket.emit('assistant:message', { message: text });
|
||||
}
|
||||
|
||||
// Prepare streaming bubble
|
||||
this.streamingContent = '';
|
||||
this.streamingMessageEl = this.createMessageEl('assistant', '');
|
||||
this.streamingMessageEl.classList.add('streaming');
|
||||
this.messagesEl.appendChild(this.streamingMessageEl);
|
||||
this.setStatus('thinking');
|
||||
}
|
||||
|
||||
handleOutput(content) {
|
||||
if (!this.streamingMessageEl) {
|
||||
// Create streaming bubble if not exists
|
||||
this.streamingContent = '';
|
||||
this.streamingMessageEl = this.createMessageEl('assistant', '');
|
||||
this.streamingMessageEl.classList.add('streaming');
|
||||
this.messagesEl.appendChild(this.streamingMessageEl);
|
||||
}
|
||||
|
||||
this.streamingContent += content;
|
||||
this.streamingMessageEl.innerHTML = this.renderMarkdown(this.streamingContent);
|
||||
this.setStatus('running');
|
||||
this.scrollToBottom();
|
||||
}
|
||||
|
||||
finalizeStreaming() {
|
||||
if (this.streamingMessageEl) {
|
||||
this.streamingMessageEl.classList.remove('streaming');
|
||||
this.streamingMessageEl = null;
|
||||
this.streamingContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
// =====================
|
||||
// RENDERING
|
||||
// =====================
|
||||
|
||||
renderMessage(role, content) {
|
||||
const el = this.createMessageEl(role, content);
|
||||
this.messagesEl.appendChild(el);
|
||||
}
|
||||
|
||||
createMessageEl(role, content) {
|
||||
const el = document.createElement('div');
|
||||
el.className = `assistant-message ${role}`;
|
||||
|
||||
if (role === 'assistant') {
|
||||
el.innerHTML = this.renderMarkdown(content);
|
||||
} else {
|
||||
el.textContent = content;
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
renderMarkdown(text) {
|
||||
if (!text) return '';
|
||||
|
||||
let html = this.escapeHtml(text);
|
||||
|
||||
// Code blocks
|
||||
html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
|
||||
return `<pre><code>${code.trim()}</code></pre>`;
|
||||
});
|
||||
|
||||
// Inline code
|
||||
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
|
||||
// Bold
|
||||
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
|
||||
// Italic
|
||||
html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
||||
|
||||
// Headers
|
||||
html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
|
||||
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
|
||||
html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
|
||||
|
||||
// Unordered lists
|
||||
html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
|
||||
html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
|
||||
|
||||
// Blockquotes
|
||||
html = html.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>');
|
||||
|
||||
// Line breaks (but not inside pre)
|
||||
html = html.replace(/\n/g, '<br>');
|
||||
|
||||
// Clean up extra <br> in pre blocks
|
||||
html = html.replace(/<pre><code>([\s\S]*?)<\/code><\/pre>/g, (match) => {
|
||||
return match.replace(/<br>/g, '\n');
|
||||
});
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// =====================
|
||||
// UI HELPERS
|
||||
// =====================
|
||||
|
||||
updateChatState() {
|
||||
if (!this.chatEl) return;
|
||||
|
||||
if (this.currentSessionId) {
|
||||
this.chatEl.classList.remove('no-session');
|
||||
} else {
|
||||
this.chatEl.classList.add('no-session');
|
||||
}
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
this.sessionStatus = status;
|
||||
|
||||
if (!this.statusBadgeEl) return;
|
||||
|
||||
// Remove all status classes
|
||||
this.statusBadgeEl.className = 'assistant-status-badge';
|
||||
|
||||
if (!status) {
|
||||
this.statusBadgeEl.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const labels = {
|
||||
running: 'Aktiv',
|
||||
thinking: 'Denkt...',
|
||||
ended: 'Beendet',
|
||||
stopped: 'Gestoppt',
|
||||
error: 'Fehler'
|
||||
};
|
||||
|
||||
this.statusBadgeEl.classList.add(`status-${status}`);
|
||||
this.statusBadgeEl.textContent = labels[status] || status;
|
||||
}
|
||||
|
||||
autoResizeInput() {
|
||||
if (!this.inputEl) return;
|
||||
this.inputEl.style.height = 'auto';
|
||||
this.inputEl.style.height = Math.min(this.inputEl.scrollHeight, 150) + 'px';
|
||||
}
|
||||
|
||||
scrollToBottom() {
|
||||
if (!this.messagesEl) return;
|
||||
requestAnimationFrame(() => {
|
||||
this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async handleTaskHandover(taskContext) {
|
||||
// Switch to assistant view
|
||||
const assistantTab = document.querySelector('.view-tab[data-view="assistant"]');
|
||||
if (assistantTab) assistantTab.click();
|
||||
|
||||
// Ensure initialized
|
||||
await this.init();
|
||||
|
||||
// Start new session with task context
|
||||
await this.startSession(taskContext);
|
||||
}
|
||||
|
||||
showToast(message, type = 'info') {
|
||||
window.dispatchEvent(new CustomEvent('toast:show', {
|
||||
detail: { message, type }
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// Singleton
|
||||
const assistantManager = new AssistantManager();
|
||||
export default assistantManager;
|
||||
@@ -7,6 +7,7 @@
|
||||
import store from './store.js';
|
||||
import api from './api.js';
|
||||
import syncManager from './sync.js';
|
||||
import assistantManager from './assistant.js';
|
||||
import {
|
||||
$, $$, createElement, clearElement, formatDate, formatDateTime,
|
||||
formatRelativeTime, formatFileSize, getInitials, hexToRgba,
|
||||
@@ -72,6 +73,9 @@ class TaskModalManager {
|
||||
// Archive button
|
||||
$('#btn-archive-task')?.addEventListener('click', () => this.handleArchive());
|
||||
|
||||
// Task to Assistant button
|
||||
$('#btn-task-to-assistant')?.addEventListener('click', () => this.handleTaskToAssistant());
|
||||
|
||||
// Restore button
|
||||
$('#btn-restore-task')?.addEventListener('click', () => this.handleRestore());
|
||||
|
||||
@@ -225,6 +229,7 @@ class TaskModalManager {
|
||||
const duplicateBtn = $('#btn-duplicate-task');
|
||||
const archiveBtn = $('#btn-archive-task');
|
||||
const restoreBtn = $('#btn-restore-task');
|
||||
const assistantBtn = $('#btn-task-to-assistant');
|
||||
const saveBtn = $('#btn-save-task');
|
||||
const cancelBtn = $('#btn-cancel-task');
|
||||
const backBtn = $('#btn-back-task');
|
||||
@@ -233,6 +238,7 @@ class TaskModalManager {
|
||||
if (deleteBtn) deleteBtn.classList.toggle('hidden', mode === 'create');
|
||||
if (duplicateBtn) duplicateBtn.classList.toggle('hidden', mode === 'create');
|
||||
if (archiveBtn) archiveBtn.classList.toggle('hidden', mode === 'create');
|
||||
if (assistantBtn) assistantBtn.classList.toggle('hidden', mode === 'create');
|
||||
if (restoreBtn) restoreBtn.classList.add('hidden'); // Always hide initially, shown in loadTaskData if archived
|
||||
|
||||
// Right side buttons (create vs edit mode)
|
||||
@@ -596,6 +602,33 @@ class TaskModalManager {
|
||||
}
|
||||
}
|
||||
|
||||
handleTaskToAssistant() {
|
||||
if (!this.originalTask) return;
|
||||
|
||||
const task = this.originalTask;
|
||||
const priorityLabels = { low: 'Niedrig', medium: 'Mittel', high: 'Hoch', urgent: 'Dringend' };
|
||||
|
||||
// Build context text
|
||||
let context = `Aufgabe: ${task.title}\n`;
|
||||
if (task.description) context += `Beschreibung: ${task.description}\n`;
|
||||
context += `Prioritaet: ${priorityLabels[task.priority] || task.priority}\n`;
|
||||
|
||||
if (task.labels && task.labels.length > 0) {
|
||||
context += `Labels: ${task.labels.map(l => l.name).join(', ')}\n`;
|
||||
}
|
||||
|
||||
if (this.subtasks && this.subtasks.length > 0) {
|
||||
context += `\nSubtasks:\n`;
|
||||
this.subtasks.forEach(st => {
|
||||
context += `- [${st.completed ? 'x' : ' '}] ${st.title}\n`;
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal and hand over to assistant
|
||||
this.close();
|
||||
assistantManager.handleTaskHandover(context);
|
||||
}
|
||||
|
||||
showColumnSelectDialog() {
|
||||
const columns = store.get('columns');
|
||||
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren