feat: treeview with folders, toolbar, file attachments in chat

frontend/src/components/ai/ChatWindow.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
-import { streamChat, fetchMessages, type ChatMessage } from '@/api/ai';
+import {
+  streamChat, fetchMessages, fetchAttachments, uploadAttachment, getAttachmentDownloadUrl,
+  type ChatMessage, type ChatAttachment,
+} from '@/api/ai';
 
 interface ChatWindowProps {
   sessionId: string;
@@ -9,23 +12,33 @@ interface ChatWindowProps {
   compact?: boolean;
 }
 
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindowProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   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 [pendingFiles, setPendingFiles] = useState<File[]>([]);
+  const [uploadingFile, setUploadingFile] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (!sessionId) return;
     setMessages([]);
+    setAttachments([]);
     setError(null);
-    fetchMessages(sessionId)
-      .then((msgs) => setMessages(msgs))
-      .catch((e) => setError(e?.message || 'Failed to load messages'));
+    fetchMessages(sessionId).then(setMessages).catch((e) => setError(e?.message || 'Failed to load messages'));
+    fetchAttachments(sessionId).then(setAttachments).catch(() => {});
   }, [sessionId]);
 
   useEffect(() => {
@@ -34,6 +47,23 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
     }
   }, [messages, streamingContent]);
 
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+    setUploadingFile(true);
+    try {
+      for (const file of files) {
+        const att = await uploadAttachment(sessionId, file);
+        setAttachments((prev) => [...prev, att]);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Upload failed');
+    } finally {
+      setUploadingFile(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
   const handleSend = async () => {
     const content = input.trim();
     if (!content || isStreaming) return;
@@ -94,6 +124,30 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
 
   return (
     <div className={clsx('flex flex-col h-full bg-white', className)}>
+      {/* Attachments bar */}
+      {attachments.length > 0 && (
+        <div className={clsx('border-b border-secondary-200 bg-secondary-50', compact ? 'px-2 py-1' : 'px-4 py-2')}>
+          <div className="flex flex-wrap gap-2">
+            {attachments.map((att) => (
+              <a
+                key={att.id}
+                href={getAttachmentDownloadUrl(att.id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1.5 rounded-md bg-white border border-secondary-200 px-2 py-1 text-xs hover:border-primary-400"
+              >
+                <svg className="w-3.5 h-3.5 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                </svg>
+                <span className="max-w-32 truncate">{att.filename}</span>
+                <span className="text-secondary-400">{formatSize(att.size_bytes)}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Messages */}
       <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">
@@ -128,8 +182,27 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
           </div>
         )}
       </div>
+
+      {/* Input */}
       <div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
         <div className="flex items-end gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploadingFile || isStreaming}
+            className="rounded-lg border border-secondary-300 p-2 text-secondary-500 hover:bg-secondary-100 disabled:opacity-50"
+            title="Datei anhängen"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+            </svg>
+          </button>
           <textarea
             ref={inputRef}
             value={input}