Agent Zero
306 lines
12 KiB
TypeScript
306 lines
12 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { ChatWindow } from '@/components/ai/ChatWindow';
|
|
import { ResizablePanel } from '@/components/ui/ResizablePanel';
|
|
import { SuggestionList } from '@/components/ai/SuggestionSidebar';
|
|
import { createSession, fetchSessions } from '@/api/ai';
|
|
import { useUIStore } from '@/store/uiStore';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useUsers, useGroups } from '@/api/hooks';
|
|
import { Avatar } from '@/components/ui/Avatar';
|
|
import { Bell, Bot, ChevronLeft, ChevronRight, Lightbulb, MessageSquare, Users, X } from 'lucide-react';
|
|
|
|
const robotIcon = (className: string) => (
|
|
<Bot className={className} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const bellIcon = (className: string) => (
|
|
<Bell className={className} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const bulbIcon = (className: string) => (
|
|
<Lightbulb className={className} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const teamIcon = (className: string) => (
|
|
<Users className={className} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const chatBubbleIcon = (className: string) => (
|
|
<MessageSquare className={className} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const chevronRightIcon = (
|
|
<ChevronRight className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
interface TabDef {
|
|
key: 'proactive' | 'chat' | 'notifications' | 'team' | 'chatroom';
|
|
label: string;
|
|
icon: (cls: string) => React.ReactNode;
|
|
testId: string;
|
|
}
|
|
|
|
function TeamPanel() {
|
|
const { data: usersData, isLoading: usersLoading } = useUsers();
|
|
const { data: groupsData, isLoading: groupsLoading } = useGroups();
|
|
const users: any[] = usersData?.items || [];
|
|
const groups: any[] = groupsData?.items || [];
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-y-auto p-3 gap-3" data-testid="team-panel">
|
|
<div>
|
|
<h3 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide mb-2">Mitarbeiter</h3>
|
|
{usersLoading ? (
|
|
<p className="text-sm text-secondary-400">Laden...</p>
|
|
) : users.length === 0 ? (
|
|
<p className="text-sm text-secondary-400">Keine Mitarbeiter</p>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{users.map((u) => (
|
|
<div key={u.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-secondary-50 transition-colors">
|
|
<div className="relative flex-shrink-0">
|
|
<Avatar name={u.name} size="sm" />
|
|
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white bg-secondary-300" aria-label="offline" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-secondary-700 truncate">{u.name}</p>
|
|
<p className="text-xs text-secondary-400 truncate">{u.email}</p>
|
|
</div>
|
|
<span className="text-xs text-secondary-400">{u.role}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide mb-2">Gruppen</h3>
|
|
{groupsLoading ? (
|
|
<p className="text-sm text-secondary-400">Laden...</p>
|
|
) : groups.length === 0 ? (
|
|
<p className="text-sm text-secondary-400">Keine Gruppen</p>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{groups.map((g) => (
|
|
<div key={g.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-secondary-50 transition-colors">
|
|
<div className="w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center flex-shrink-0">
|
|
<Users className="w-4 h-4 text-secondary-500" aria-hidden="true" strokeWidth={2} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-secondary-700 truncate">{g.name}</p>
|
|
{g.description && <p className="text-xs text-secondary-400 truncate">{g.description}</p>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChatPanel() {
|
|
return (
|
|
<div className="flex flex-col h-full" data-testid="chat-panel">
|
|
<div className="flex-1 overflow-y-auto p-3">
|
|
<p className="text-sm text-secondary-400 text-center py-8">Chat-Sidebar - Coming Soon</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function AISidebar() {
|
|
const { t } = useTranslation();
|
|
const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore();
|
|
const [sessionId, setSessionId] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const sessions = await fetchSessions(true);
|
|
if (sessions.length > 0) {
|
|
setSessionId(sessions[0].id);
|
|
} else {
|
|
const session = await createSession({ is_sidebar: true, title: 'Sidebar Chat' });
|
|
setSessionId(session.id);
|
|
}
|
|
} catch (e) {
|
|
console.error('AISidebar init error:', e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
const tabs: TabDef[] = [
|
|
{ key: 'chat', label: 'KI Chat', icon: robotIcon, testId: 'ai-sidebar-tab-chat' },
|
|
{ key: 'proactive', label: 'Live KI', icon: bulbIcon, testId: 'ai-sidebar-tab-proactive' },
|
|
{ key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
|
|
{ key: 'team', label: 'Team', icon: teamIcon, testId: 'ai-sidebar-tab-team' },
|
|
{ key: 'chatroom', label: 'Chat', icon: chatBubbleIcon, testId: 'ai-sidebar-tab-chatroom' },
|
|
];
|
|
|
|
const activeTab = tabs.find((tab) => tab.key === aiSidebarTab) || tabs[0];
|
|
|
|
// Collapsed: narrow icon strip (desktop only, hidden on mobile)
|
|
if (aiSidebarCollapsed) {
|
|
return (
|
|
<div
|
|
className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3 gap-2"
|
|
data-testid="ai-sidebar-collapsed"
|
|
>
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => { setAISidebarTab(tab.key); toggleAISidebar(); }}
|
|
className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 relative"
|
|
aria-label={tab.label}
|
|
title={tab.label}
|
|
data-testid={tab.testId}
|
|
>
|
|
{tab.icon('w-5 h-5 text-secondary-600')}
|
|
{tab.key === 'notifications' && notifications.length > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
|
|
{notifications.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const renderTabContent = () => {
|
|
if (aiSidebarTab === 'proactive') {
|
|
return <SuggestionList />;
|
|
}
|
|
if (aiSidebarTab === 'notifications') {
|
|
return (
|
|
<div className="flex flex-col h-full overflow-y-auto p-3 gap-2" data-testid="notification-list">
|
|
{notifications.length === 0 && (
|
|
<p className="text-sm text-secondary-400 text-center py-4">Keine Benachrichtigungen</p>
|
|
)}
|
|
{notifications.map((msg, i) => (
|
|
<div key={i} className="flex items-start justify-between gap-2 px-3 py-2 rounded-lg border border-secondary-200 bg-secondary-50 hover:border-secondary-300 hover:bg-secondary-100 transition-colors text-sm text-secondary-700 group">
|
|
<span className="flex-1 leading-snug">{msg}</span>
|
|
<button
|
|
className="p-1 rounded text-secondary-300 hover:text-danger-600 hover:bg-danger-50 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5"
|
|
aria-label="Benachrichtigung löschen"
|
|
onClick={() => removeNotification(i)}
|
|
>
|
|
<X className="w-3.5 h-3.5" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
if (aiSidebarTab === 'team') {
|
|
return <TeamPanel />;
|
|
}
|
|
if (aiSidebarTab === 'chatroom') {
|
|
return <ChatPanel />;
|
|
}
|
|
// chat tab
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
|
|
);
|
|
}
|
|
if (sessionId) {
|
|
return <ChatWindow sessionId={sessionId} compact className="h-full" />;
|
|
}
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-sm text-red-500">
|
|
Session konnte nicht erstellt werden
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const iconStrip = (
|
|
<div className="flex items-center gap-1 px-2 h-[58px] border-b border-secondary-200" role="tablist">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setAISidebarTab(tab.key)}
|
|
className={`p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center transition-colors relative ${
|
|
aiSidebarTab === tab.key
|
|
? 'bg-primary-100 text-primary-600'
|
|
: 'text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700'
|
|
}`}
|
|
role="tab"
|
|
aria-selected={aiSidebarTab === tab.key}
|
|
aria-label={tab.label}
|
|
data-testid={tab.testId}
|
|
>
|
|
{tab.icon('w-5 h-5')}
|
|
{tab.key === 'notifications' && notifications.length > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
|
|
{notifications.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
<div className="flex-1" />
|
|
<button
|
|
onClick={toggleAISidebar}
|
|
className="p-1.5 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
|
|
title="Einklappen"
|
|
aria-label="KI Assistent einklappen"
|
|
>
|
|
{chevronRightIcon}
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
// Expanded: Mobile = full width overlay, Desktop = resizable panel
|
|
return (
|
|
<>
|
|
{/* Mobile: full width overlay with back button */}
|
|
<div
|
|
className="md:hidden fixed inset-0 z-50 bg-white flex flex-col"
|
|
data-testid="ai-sidebar-mobile"
|
|
>
|
|
<div className="h-14 flex items-center gap-2 px-3 border-b border-secondary-200">
|
|
<button
|
|
onClick={toggleAISidebar}
|
|
className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
|
|
aria-label="Zurück"
|
|
data-testid="ai-sidebar-back"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" aria-hidden="true" strokeWidth={2} />
|
|
<span className="text-sm font-medium">Zurück</span>
|
|
</button>
|
|
</div>
|
|
{iconStrip}
|
|
<div className="px-3 py-2 border-b border-secondary-200">
|
|
<span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
{renderTabContent()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop: resizable panel */}
|
|
<ResizablePanel
|
|
initialWidth={320}
|
|
minWidth={240}
|
|
maxWidth={600}
|
|
handleSide="left"
|
|
className="hidden md:flex border-l border-secondary-200 bg-white"
|
|
data-testid="ai-sidebar-pane"
|
|
>
|
|
<div className="h-full flex flex-col">
|
|
{iconStrip}
|
|
<div className="px-3 py-2 border-b border-secondary-200">
|
|
<span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
{renderTabContent()}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</>
|
|
);
|
|
}
|