56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|