leocrm/frontend/src/components/layout/AISidebar.tsx

import React, { useState, useEffect } from 'react';
import { ChatWindow } from '@/components/ai/ChatWindow';
import { ResizablePanel } from '@/components/ui/ResizablePanel';
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(() => {
    (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 (
    <ResizablePanel
      initialWidth={320}
      minWidth={240}
      maxWidth={600}
      className="border-l border-secondary-200 bg-white"
      data-testid="ai-sidebar-pane"
    >
      <div className="h-full flex flex-col">
        <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>
    </ResizablePanel>
  );
}