AI Assistant: frontend - chat app, sidebar, settings with 4 tabs

frontend/src/components/layout/AISidebar.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { ChatWindow } from '@/components/ai/ChatWindow';
+import { createSession, fetchSessions } from '@/api/ai';
+import { useUIStore } from '@/store/uiStore';
+
+export function AISidebar() {
+  const { setAISidebarOpen } = useUIStore();
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Find or create a sidebar session
+    (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);
+      }
+    })();
+  }, []);
+
+  return (
+    <div className="w-80 flex-shrink-0 border-l border-secondary-200 bg-white flex flex-col h-full">
+      <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
+        <span className="text-sm font-medium text-secondary-700">KI Assistent</span>
+        <button
+          onClick={() => setAISidebarOpen(false)}
+          className="text-secondary-400 hover:text-secondary-600"
+          title="Schließen"
+        >
+          ✕
+        </button>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        {loading ? (
+          <div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
+        ) : sessionId ? (
+          <ChatWindow sessionId={sessionId} compact className="h-full" />
+        ) : (
+          <div className="flex items-center justify-center h-full text-sm text-red-500">
+            Session konnte nicht erstellt werden
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/layout/AppShell.tsx

@@ -1,26 +1,37 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { Sidebar } from './Sidebar';
 import { TopBar } from './TopBar';
 import { PluginToolbar } from './PluginToolbar';
+import { AISidebar } from './AISidebar';
 import { ToastContainer } from '@/components/ui/Toast';
+import { useUIStore } from '@/store/uiStore';
 
 export function AppShell() {
+  const { aiSidebarOpen } = useUIStore();
+  const location = useLocation();
+
+  // Hide AI sidebar on the AI Assistant page itself
+  const showAISidebar = aiSidebarOpen && !location.pathname.startsWith('/ai-assistant');
+
   return (
     <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
       <Sidebar />
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopBar />
         <PluginToolbar />
-        <main
-          className="flex-1 overflow-y-auto focus:outline-none"
-          tabIndex={-1}
-          role="main"
-          id="main-content"
-          data-testid="content-area"
-        >
-          <Outlet />
-        </main>
+        <div className="flex-1 flex overflow-hidden">
+          <main
+            className="flex-1 overflow-y-auto focus:outline-none"
+            tabIndex={-1}
+            role="main"
+            id="main-content"
+            data-testid="content-area"
+          >
+            <Outlet />
+          </main>
+          {showAISidebar && <AISidebar />}
+        </div>
       </div>
       <ToastContainer />
     </div>

frontend/src/components/layout/Sidebar.tsx

@@ -23,6 +23,7 @@ const navItems: NavItem[] = [
   { to: '/calendar', labelKey: 'nav.calendar', icon: navIcon('M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z') },
   { to: '/dms', labelKey: 'nav.files', icon: navIcon('M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z') },
   { to: '/mail', labelKey: 'nav.email', icon: navIcon('M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z') },
+  { to: '/ai-assistant', labelKey: 'nav.aiAssistant', icon: navIcon('M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z') },
   { to: '/audit-log', labelKey: 'nav.auditLog', icon: navIcon('M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z') },
 ];
 

frontend/src/components/layout/TopBar.tsx

@@ -14,7 +14,7 @@ export function TopBar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { user } = useAuthStore();
-  const { toggleSidebar } = useUIStore();
+  const { toggleSidebar, toggleAISidebar } = useUIStore();
   const { currentTenant, availableTenants, switchTenant, isSwitching } = useTenant();
   const logoutMutation = useLogout();
 
@@ -69,6 +69,18 @@ export function TopBar() {
           </svg>
         </button>
 
+        {/* AI Assistant toggle */}
+        <button
+          onClick={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"
+          aria-label="KI Assistent"
+          title="KI Assistent"
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        </button>
+
         {/* Tenant switcher */}
         <div ref={tenantRef} className="relative">
           <button