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

2026-07-17 00:52:17 +02:00
parent 26feadf179
commit 2d5d0143e6
14 changed files with 930 additions and 15 deletions
@@ -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>
+  );
+}