+ {/* Header */}
+
+
Conversations
+
+
+
+
+
+
+ {/* View mode toggle */}
+
+
+
+
+
+ {/* Filter */}
+ {filtered.length > 3 && (
+
setFilterQuery(e.target.value)}
+ style={{
+ width: '100%', padding: '6px 10px', fontSize: 12, borderRadius: 4,
+ border: '1px solid #ddd', marginBottom: 8, boxSizing: 'border-box',
+ }}
+ />
+ )}
+
+ {/* Empty state */}
+ {filtered.length === 0 && !loading && (
+
+ {viewMode === 'archived'
+ ? 'Keine archivierten Chats.'
+ : 'Noch keine Chats. Sende eine Nachricht oder klicke "+".'}
+
+ )}
+
+ {/* List */}
+ {paginated.map(conv => {
+ const isActive = conv.id === activeWorkflowId;
+ const isEditing = editingId === conv.id;
+ return (
+
{ if (!isEditing) onSelect(conv.id); }}
+ style={{
+ padding: '8px 10px',
+ marginBottom: 4,
+ borderRadius: 6,
+ cursor: isEditing ? 'default' : 'pointer',
+ background: isActive ? 'var(--primary-light, #e3f2fd)' : 'transparent',
+ border: isActive ? '1px solid var(--primary-color, #1976d2)20' : '1px solid transparent',
+ transition: 'background 0.15s',
+ position: 'relative',
+ }}
+ onMouseEnter={e => {
+ if (!isActive) e.currentTarget.style.background = '#f5f5f5';
+ const actions = e.currentTarget.querySelector('[data-actions]') as HTMLElement;
+ if (actions) actions.style.opacity = '1';
+ }}
+ onMouseLeave={e => {
+ if (!isActive) e.currentTarget.style.background = 'transparent';
+ const actions = e.currentTarget.querySelector('[data-actions]') as HTMLElement;
+ if (actions) actions.style.opacity = '0';
+ if (confirmDeleteId === conv.id) setConfirmDeleteId(null);
+ }}
+ >
+ {/* Name row */}
+
+ {isEditing ? (
+ setEditName(e.target.value)}
+ onBlur={() => _commitRename(conv.id)}
+ onKeyDown={e => _handleKeyDown(e, conv.id)}
+ onClick={e => e.stopPropagation()}
+ style={{
+ flex: 1, minWidth: 0, fontSize: 13, fontWeight: 600,
+ padding: '1px 4px', borderRadius: 3,
+ border: '1px solid var(--primary-color, #1976d2)',
+ outline: 'none', background: '#fff',
+ }}
+ />
+ ) : (
+ { e.stopPropagation(); _startEditing(conv); }}
+ title={conv.name}
+ >
+ {conv.name}
+
+ )}
+
+ {/* Action buttons (visible on hover) */}
+ {!isEditing && (
+
+
+ {conv.status === 'archived' ? (
+
+ ) : (
+
+ )}
+ {confirmDeleteId === conv.id ? (
+
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ {/* Status + last activity */}
+
+
+ {conv.status === 'active' && (
+ {'\u25CF'} aktiv
+ )}
+ {conv.status === 'completed' && (
+ {'\u25CF'} abgeschlossen
+ )}
+ {conv.status === 'archived' && (
+ {'\u25CF'} archiviert
+ )}
+ {!['active', 'completed', 'archived'].includes(conv.status) && (
+ {conv.status}
+ )}
+
+
+ {_formatTime(conv.lastActivity)}
+
+
+
+ );
+ })}
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+ {page + 1} / {totalPages}
+
+
+ )}
+