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

frontend/src/components/ai/ChatWindow.tsx

@@ -0,0 +1,154 @@
+import React, { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { streamChat, fetchMessages, type ChatMessage } from '@/api/ai';
+
+interface ChatWindowProps {
+  sessionId: string;
+  agentId?: string | null;
+  className?: string;
+  compact?: boolean;
+}
+
+export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindowProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState('');
+  const [toolStatus, setToolStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    setMessages([]);
+    setError(null);
+    fetchMessages(sessionId)
+      .then((msgs) => setMessages(msgs))
+      .catch((e) => setError(e?.message || 'Failed to load messages'));
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, streamingContent]);
+
+  const handleSend = async () => {
+    const content = input.trim();
+    if (!content || isStreaming) return;
+
+    setInput('');
+    setIsStreaming(true);
+    setStreamingContent('');
+    setToolStatus(null);
+    setError(null);
+
+    const userMsg: ChatMessage = {
+      id: 'temp-' + Date.now(),
+      session_id: sessionId,
+      role: 'user',
+      content,
+      tokens: 0,
+      model_used: '',
+    };
+    setMessages((prev) => [...prev, userMsg]);
+
+    try {
+      const stream = streamChat(sessionId, content, agentId || undefined);
+      let accumulated = '';
+
+      for await (const event of stream) {
+        if (event.type === 'token' && event.content) {
+          accumulated += event.content;
+          setStreamingContent(accumulated);
+        } else if (event.type === 'tool_calls' && event.tools) {
+          setToolStatus(`Tools: ${event.tools.join(', ')}`);
+        } else if (event.type === 'tool_result' && event.tool) {
+          setToolStatus(`Tool '${event.tool}' ausgefuehrt`);
+        } else if (event.type === 'done') {
+          setToolStatus(null);
+          const msgs = await fetchMessages(sessionId);
+          setMessages(msgs);
+          setStreamingContent('');
+        } else if (event.type === 'error') {
+          setError(event.content || 'Unknown error');
+        }
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Stream failed');
+    } finally {
+      setIsStreaming(false);
+      setStreamingContent('');
+      setToolStatus(null);
+      inputRef.current?.focus();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className={clsx('flex flex-col h-full bg-white', className)}>
+      <div ref={scrollRef} className={clsx('flex-1 overflow-y-auto', compact ? 'p-3' : 'p-6')}>
+        {messages.length === 0 && !streamingContent && !error && (
+          <div className="flex items-center justify-center h-full text-secondary-400 text-sm">
+            Starte eine Konversation...
+          </div>
+        )}
+        {messages.map((msg) => (
+          <div key={msg.id} className={clsx('mb-4 flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
+            <div className={clsx('max-w-[80%] rounded-lg px-4 py-2 text-sm', msg.role === 'user' ? 'bg-primary-600 text-white' : 'bg-secondary-100 text-secondary-900')}>
+              <div className="whitespace-pre-wrap break-words">{msg.content}</div>
+              {msg.tool_calls && msg.tool_calls.length > 0 && (
+                <div className="mt-2 text-xs opacity-70">
+                  Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+        {streamingContent && (
+          <div className="mb-4 flex justify-start">
+            <div className="max-w-[80%] rounded-lg px-4 py-2 text-sm bg-secondary-100 text-secondary-900">
+              <div className="whitespace-pre-wrap break-words">{streamingContent}</div>
+            </div>
+          </div>
+        )}
+        {toolStatus && (
+          <div className="mb-2 text-center text-xs text-secondary-500">⚙️ {toolStatus}</div>
+        )}
+        {error && (
+          <div className="mb-4 flex justify-center">
+            <div className="rounded-lg px-4 py-2 text-sm bg-red-50 text-red-700">{error}</div>
+          </div>
+        )}
+      </div>
+      <div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isStreaming}
+            placeholder="Nachricht eingeben..."
+            rows={compact ? 1 : 2}
+            className={clsx('flex-1 resize-none rounded-lg border border-secondary-300 px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary-500', 'disabled:opacity-50')}
+          />
+          <button
+            onClick={handleSend}
+            disabled={isStreaming || !input.trim()}
+            className={clsx('rounded-lg px-4 py-2 text-sm font-medium text-white', 'bg-primary-600 hover:bg-primary-700', 'disabled:opacity-50 disabled:cursor-not-allowed')}
+          >
+            {isStreaming ? '...' : 'Senden'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ai/SessionList.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { fetchSessions, createSession, deleteSession, updateSession, type ChatSession } from '@/api/ai';
+
+interface SessionListProps {
+  activeSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  isSidebar?: boolean;
+  className?: string;
+}
+
+export function SessionList({ activeSessionId, onSelectSession, isSidebar, className }: SessionListProps) {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadSessions = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchSessions(isSidebar ? true : undefined);
+      setSessions(data);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load sessions');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadSessions();
+  }, [isSidebar]);
+
+  const handleNewChat = async () => {
+    try {
+      const session = await createSession({ is_sidebar: isSidebar || false });
+      setSessions((prev) => [session, ...prev]);
+      onSelectSession(session.id);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to create session');
+    }
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await deleteSession(id);
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      if (activeSessionId === id) {
+        onSelectSession('');
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to delete session');
+    }
+  };
+
+  if (loading) {
+    return <div className="p-4 text-sm text-secondary-400">Laden...</div>;
+  }
+
+  return (
+    <div className={clsx('flex flex-col h-full', className)}>
+      <div className="p-3 border-b border-secondary-200">
+        <button
+          onClick={handleNewChat}
+          className="w-full rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700"
+        >
+          + Neuer Chat
+        </button>
+      </div>
+      {error && <div className="p-2 text-xs text-red-600">{error}</div>}
+      <div className="flex-1 overflow-y-auto">
+        {sessions.length === 0 ? (
+          <div className="p-4 text-sm text-secondary-400 text-center">Keine Chats vorhanden</div>
+        ) : (
+          <ul className="space-y-1 p-2">
+            {sessions.map((session) => (
+              <li key={session.id}>
+                <div
+                  onClick={() => onSelectSession(session.id)}
+                  className={clsx(
+                    'group flex items-center gap-2 rounded-lg px-3 py-2 text-sm cursor-pointer',
+                    'hover:bg-secondary-100',
+                    activeSessionId === session.id && 'bg-primary-100 text-primary-700'
+                  )}
+                >
+                  <span className="flex-1 truncate">{session.title}</span>
+                  <button
+                    onClick={(e) => handleDelete(session.id, e)}
+                    className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600"
+                    title="Loeschen"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

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