feat: attachment context for LLM, markdown rendering, mobile layout with back arrow

app/plugins/builtins/ai_assistant/services.py

@@ -352,6 +352,57 @@ async def execute_tool_call(
         return f"Error executing tool '{tool.name}': {exc}"
 
 
+async def _extract_attachment_content(
+    db: AsyncSession,
+    session_id: uuid.UUID,
+    tenant_id: uuid.UUID,
+) -> str:
+    """Extract text content from session attachments for LLM context."""
+    result = await db.execute(
+        select(AIChatAttachment)
+        .where(AIChatAttachment.session_id == session_id)
+        .where(AIChatAttachment.tenant_id == tenant_id)
+        .order_by(AIChatAttachment.created_at.asc())
+    )
+    attachments = list(result.scalars().all())
+    if not attachments:
+        return ""
+
+    parts: list[str] = []
+    for att in attachments:
+        try:
+            with open(att.storage_path, "rb") as f:
+                content = f.read()
+
+            text_content = ""
+            mime = att.mime_type.lower()
+
+            if mime.startswith("text/") or att.filename.endswith((".txt", ".md", ".csv", ".json", ".yaml", ".yml", ".py", ".js", ".ts", ".html", ".xml")):
+                text_content = content.decode("utf-8", errors="replace")
+            elif mime == "application/pdf" or att.filename.endswith(".pdf"):
+                try:
+                    import fitz
+                    doc = fitz.open(stream=content, filetype="pdf")
+                    text_content = "\n".join(page.get_text() for page in doc)
+                    doc.close()
+                except ImportError:
+                    text_content = f"[PDF file: {att.filename} - extraction not available]"
+            elif mime.startswith("image/"):
+                text_content = f"[Image file: {att.filename} ({att.mime_type}, {att.size_bytes} bytes)]"
+            else:
+                text_content = f"[Binary file: {att.filename} ({att.mime_type}, {att.size_bytes} bytes)]"
+
+            if len(text_content) > 10000:
+                text_content = text_content[:10000] + "\n... [truncated]"
+
+            parts.append(f"--- Attachment: {att.filename} ---\n{text_content}")
+        except Exception as exc:
+            logger.warning("Failed to extract attachment %s: %s", att.filename, exc)
+            parts.append(f"--- Attachment: {att.filename} (extraction failed) ---")
+
+    return "\n\n".join(parts)
+
+
 async def stream_chat(
     db: AsyncSession,
     session: AIChatSession,
@@ -360,18 +411,18 @@ async def stream_chat(
     user_context: dict[str, Any],
     tenant_id: uuid.UUID,
 ) -> AsyncGenerator[str, None]:
-    """Stream chat response via SSE with tool-calling loop.
+    """Stream chat response via SSE with tool-calling loop."""
-
-    Yields SSE-formatted strings.
-    """
-    # Load conversation history
     history = await get_session_messages(db, session.id, tenant_id)
     messages: list[dict[str, Any]] = []
     for msg in history:
         messages.append({"role": msg.role, "content": msg.content})
 
-    # Add user message
+    attachment_content = await _extract_attachment_content(db, session.id, tenant_id)
-    messages.append({"role": "user", "content": user_message})
+    full_message = user_message
+    if attachment_content:
+        full_message = f"{user_message}\n\n--- Attached Files ---\n{attachment_content}"
+
+    messages.append({"role": "user", "content": full_message})
     await save_message(db, session.id, "user", user_message, tenant_id)
 
     # Get agent tools

frontend/package.json

@@ -33,7 +33,9 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-i18next": "^15.0.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.26.0",
+    "remark-gfm": "^4.0.1",
     "zod": "^3.23.8",
     "zustand": "^4.5.5"
   },

frontend/src/components/ai/ChatWindow.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import {
   streamChat, fetchMessages, fetchAttachments, uploadAttachment, getAttachmentDownloadUrl,
   type ChatMessage, type ChatAttachment,
@@ -18,6 +20,17 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+function MessageContent({ content, role }: { content: string; role: string }) {
+  if (role === 'user') {
+    return <div className="whitespace-pre-wrap break-words">{content}</div>;
+  }
+  return (
+    <div className="prose prose-sm max-w-none break-words">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+}
+
 export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindowProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
@@ -26,7 +39,6 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
   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);
@@ -37,14 +49,12 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
     setMessages([]);
     setAttachments([]);
     setError(null);
-    fetchMessages(sessionId).then(setMessages).catch((e) => setError(e?.message || 'Failed to load messages'));
+    fetchMessages(sessionId).then(setMessages).catch((e) => setError(e?.message || 'Failed to load'));
     fetchAttachments(sessionId).then(setAttachments).catch(() => {});
   }, [sessionId]);
 
   useEffect(() => {
-    if (scrollRef.current) {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
   }, [messages, streamingContent]);
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,27 +77,18 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
   const handleSend = async () => {
     const content = input.trim();
     if (!content || isStreaming) return;
-
     setInput('');
     setIsStreaming(true);
     setStreamingContent('');
     setToolStatus(null);
     setError(null);
 
-    const userMsg: ChatMessage = {
+    const userMsg: ChatMessage = { id: 'temp-' + Date.now(), session_id: sessionId, role: 'user', content, tokens: 0, model_used: '' };
-      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;
@@ -116,29 +117,17 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
-      e.preventDefault();
-      handleSend();
-    }
   };
 
   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
+              <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">
-                key={att.id}
+                <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>
-                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>
@@ -146,22 +135,16 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
           </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">
+          <div className="flex items-center justify-center h-full text-secondary-400 text-sm">Starte eine Konversation...</div>
-            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>
+              <MessageContent content={msg.content} role={msg.role} />
               {msg.tool_calls && msg.tool_calls.length > 0 && (
-                <div className="mt-2 text-xs opacity-70">
+                <div className="mt-2 text-xs opacity-70">Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}</div>
-                  Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}
-                </div>
               )}
             </div>
           </div>
@@ -169,57 +152,21 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
         {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>
+              <MessageContent content={streamingContent} role="assistant" />
             </div>
           </div>
         )}
-        {toolStatus && (
+        {toolStatus && <div className="mb-2 text-center text-xs text-secondary-500">⚙️ {toolStatus}</div>}
-          <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>}
-        )}
-        {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>
-
-      {/* Input */}
       <div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
         <div className="flex items-end gap-2">
-          <input
+          <input ref={fileInputRef} type="file" multiple onChange={handleFileSelect} className="hidden" />
-            ref={fileInputRef}
+          <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">
-            type="file"
+            <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>
-            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}
-            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>
+          <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/pages/AIAssistant.tsx

@@ -8,58 +8,55 @@ export function AIAssistantPage() {
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [agents, setAgents] = useState<AIAgent[]>([]);
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
+  const [mobileView, setMobileView] = useState<'list' | 'chat'>('list');
   const { registerItems, unregisterPlugin } = usePluginToolbarStore();
 
-  useEffect(() => {
+  useEffect(() => { fetchAgents().then(setAgents).catch(() => {}); }, []);
-    fetchAgents().then(setAgents).catch(() => {});
-  }, []);
 
   useEffect(() => {
     registerItems('ai_assistant', [
-      {
+      { id: 'agent-select', label: 'Agent', type: 'select', options: agents.map((a) => ({ value: a.id, label: a.name })), value: selectedAgentId || '', onChange: (val: string) => setSelectedAgentId(val || null) },
-        id: 'agent-select',
+      { id: 'new-chat', label: 'Neuer Chat', type: 'button', onClick: () => { setActiveSessionId(null); setMobileView('list'); } },
-        label: 'Agent',
-        type: 'select',
-        options: agents.map((a) => ({ value: a.id, label: a.name })),
-        value: selectedAgentId || '',
-        onChange: (val: string) => setSelectedAgentId(val || null),
-      },
-      {
-        id: 'new-chat',
-        label: 'Neuer Chat',
-        type: 'button',
-        onClick: () => setActiveSessionId(null),
-      },
     ]);
-
     return () => unregisterPlugin('ai_assistant');
   }, [agents, selectedAgentId, registerItems, unregisterPlugin]);
 
+  const handleSelectSession = (id: string) => { setActiveSessionId(id); setMobileView('chat'); };
+
   return (
     <div className="flex h-full" data-testid="ai-assistant-page">
-      {/* Left: Session List with TreeView */}
+      {/* Desktop: two-pane layout */}
-      <div className="w-72 flex-shrink-0 border-r border-secondary-200 bg-white">
+      <div className="hidden md:flex w-72 flex-shrink-0 border-r border-secondary-200 bg-white flex-col">
-        <div className="h-16 flex items-center px-6 border-b border-secondary-200">
+        <div className="h-16 flex items-center px-6 border-b border-secondary-200"><h1 className="text-lg font-bold text-secondary-900">KI Assistent</h1></div>
-          <h1 className="text-lg font-bold text-secondary-900">KI Assistent</h1>
+        <SessionList activeSessionId={activeSessionId} onSelectSession={setActiveSessionId} className="h-[calc(100%-4rem)]" />
-        </div>
-        <SessionList
-          activeSessionId={activeSessionId}
-          onSelectSession={setActiveSessionId}
-          className="h-[calc(100%-4rem)]"
-        />
       </div>
-      {/* Right: Chat Window */}
+      <div className="hidden md:flex flex-1 flex-col">
-      <div className="flex-1 flex flex-col">
+        {activeSessionId ? <ChatWindow sessionId={activeSessionId} agentId={selectedAgentId} className="flex-1" /> : (
-        {activeSessionId ? (
+          <div className="flex-1 flex items-center justify-center text-secondary-400"><div className="text-center"><div className="text-4xl mb-3">🤖</div><div className="text-sm">Wähle einen Chat oder erstelle einen neuen</div></div></div>
-          <ChatWindow sessionId={activeSessionId} agentId={selectedAgentId} className="flex-1" />
+        )}
-        ) : (
+      </div>
-          <div className="flex-1 flex items-center justify-center text-secondary-400">
+      {/* Mobile: single-pane view switching */}
-            <div className="text-center">
+      <div className="flex md:hidden flex-1 flex-col overflow-hidden">
-              <div className="text-4xl mb-3">🤖</div>
+        {mobileView === 'list' && (
-              <div className="text-sm">Wähle einen Chat oder erstelle einen neuen</div>
+          <div className="flex-1 flex flex-col bg-white">
-            </div>
+            <div className="h-14 flex items-center px-4 border-b border-secondary-200"><h1 className="text-lg font-bold text-secondary-900">KI Assistent</h1></div>
+            <SessionList activeSessionId={activeSessionId} onSelectSession={handleSelectSession} className="flex-1" />
           </div>
         )}
+        {mobileView === 'chat' && activeSessionId && (
+          <div className="flex-1 flex flex-col">
+            <div className="h-14 flex items-center gap-2 px-3 border-b border-secondary-200 bg-white">
+              <button onClick={() => setMobileView('list')} className="p-2 rounded-lg hover:bg-secondary-100" aria-label="Zurück">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+              </button>
+              <span className="text-sm font-medium text-secondary-700 truncate">Chat</span>
+            </div>
+            <ChatWindow sessionId={activeSessionId} agentId={selectedAgentId} className="flex-1" />
+          </div>
+        )}
+        {mobileView === 'chat' && !activeSessionId && (
+          <div className="flex-1 flex items-center justify-center text-secondary-400"><div className="text-center"><div className="text-4xl mb-3">🤖</div><div className="text-sm">Wähle einen Chat</div></div></div>
+        )}
       </div>
     </div>
   );