AISidebar: add Team panel with users/groups and online status, add Chat panel placeholder

2026-07-21 23:11:17 +02:00
parent 650f6e6723
commit 5980d38c66
3 changed files with 95 additions and 2 deletions
@@ -1295,3 +1295,4 @@ export function useMoveContactToFolder() {
    },
  });
 }
+
@@ -5,6 +5,8 @@ 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';

 const robotIcon = (className: string) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -24,6 +26,18 @@ const bulbIcon = (className: string) => (
  </svg>
 );

+const teamIcon = (className: string) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+  </svg>
+);
+
+const chatBubbleIcon = (className: string) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+  </svg>
+);
+
 const chevronRightIcon = (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@@ -31,12 +45,82 @@ const chevronRightIcon = (
 );

 interface TabDef {
-  key: 'proactive' | 'chat' | 'notifications';
+  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">
+                  <svg className="w-4 h-4 text-secondary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </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();
@@ -65,6 +149,8 @@ export function AISidebar() {
    { 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];
@@ -124,6 +210,12 @@ export function AISidebar() {
        </div>
      );
    }
+    if (aiSidebarTab === 'team') {
+      return <TeamPanel />;
+    }
+    if (aiSidebarTab === 'chatroom') {
+      return <ChatPanel />;
+    }
    // chat tab
    if (loading) {
      return (
@@ -2,7 +2,7 @@ import { create } from 'zustand';

 export type Theme = 'light' | 'dark' | 'system';
 export type Locale = 'de' | 'en';
-export type AISidebarTab = 'proactive' | 'chat' | 'notifications';
+export type AISidebarTab = 'proactive' | 'chat' | 'notifications' | 'team' | 'chatroom';

 export interface Toast {
  id: string;